/* mayhematic.io v7. The hero is the v6.6 Carrd theme carried over; everything under it is built
   from the in-game kit (hanging sign, level-up cards, cut-in, THREAT banner, tickets).
   Kit colours were sampled from the 2026-10 captures in AImodels/captures. */
:root{
color-scheme: dark;
--bg0:#6b3a58; --bg1:#4a2749; --bg2:#2b1836; --bg3:#201027;
--ink:#0c0c12; --dusk:#1b1030; --plate:rgba(15,15,28,.82);
--text:#efe8fa; --muted:#cfc4e0; --faint:#a99cc0;
--amber-hi:#fff28c; --tag-gold:#ffd98c;
--title-hi:#fce478; --title-lo:#f08a2a;
--sign:#2a2a30; --sign-edge:#5a5a6c;
--card:#483648; --card-band:#30243c; --card-edge:#e8913a;
--tray:#78182a; --ticket-green:#3a9142; --ticket-green-lo:#2b6f31; --ticket-blue:#363c72; --ticket-blue-lo:#2a2f5c;
--threat:#c6362a; --threat-text:#f03024;
--beast-a:#1f8c9c; --beast-b:#123f6b; --brutus-a:#dd6f2e; --brutus-b:#8f3120;
--display:'Bungee','Arial Black',Impact,sans-serif;
--body:'Rubik','Segoe UI',system-ui,sans-serif;
--sys:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--band:46px;
}
*{ box-sizing:border-box; }
html{ background:var(--bg3); -webkit-text-size-adjust:100%; }
body{
margin:0; overflow-x:hidden; background:var(--bg3);
color:var(--text); font-family:var(--body); font-size:17px; line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }

/* ===== backdrop: cel-banded dusk sky, the sun's glow where the title sits (#1456 B, 2026-10-30) ===== */
.bg{
position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;
--oy:36%;
background:
radial-gradient(640px 520px at 50% var(--oy), rgba(255,178,74,.42) 0%, rgba(232,98,62,.2) 38%, rgba(107,58,88,0) 72%),
linear-gradient(180deg, #1a0d24 0, #1a0d24 9%, #2b1836 9%, #2b1836 20%, #3e2146 20%, #3e2146 31%, #5a3058 31%, #5a3058 42%, #6b3a58 42%, #6b3a58 54%, #4a2749 54%, #4a2749 72%, #2b1836 72%, #2b1836 100%);
}
.bg i{ position:absolute; display:block; }
body.press .bg{ --oy:14%; }
.bg .stars{
inset:0;
background-image:
radial-gradient(1.4px 1.4px at 31px 47px, rgba(255,255,255,.55) 50%, transparent 51%),
radial-gradient(1px 1px at 173px 122px, rgba(255,255,255,.4) 50%, transparent 51%),
radial-gradient(1.8px 1.8px at 96px 203px, rgba(255,240,210,.45) 50%, transparent 51%),
radial-gradient(1px 1px at 226px 31px, rgba(255,255,255,.3) 50%, transparent 51%);
background-size:260px 260px, 310px 310px, 390px 390px, 340px 340px;
}
.bg .dots{
inset:0; opacity:.07;
background-image: radial-gradient(rgba(255,255,255,.9) 1.2px, transparent 1.6px);
background-size:14px 14px; animation: dots-drift 32s linear infinite;
}
@keyframes dots-drift{ to{ background-position:140px 84px; } }
.bg .vig{ inset:0; background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.55) 100%); }

.site{
position:relative; z-index:1; max-width:1040px; margin-inline:auto;
padding-inline:20px; padding-block:0 72px;
display:flex; flex-direction:column; gap:96px;
}

/* ===== hero (v6.6 sizes: Carrd's root was 13pt up to 1680px, 18pt above, 11pt under 980px) ===== */
/* The title's centre sits 1.2 x its font-size under the hero's top edge (0.3em margin + half of a
   1.8em box), so this padding lands it exactly on the ray origin at 36% of the viewport. */
.hero{
--tf:clamp(40px,5.5vw,84px);
display:flex; flex-direction:column; align-items:center; text-align:center;
padding-top:max(28px, calc(36vh - 1.2 * var(--tf)));
padding-top:max(28px, calc(36svh - 1.2 * var(--tf)));
padding-bottom:0;
}
.hero > *{ position:relative; z-index:1; }
/* the stage: the commissioned key art under the marquee, full-bleed, a cel band for a floor */
.stage{ position:relative; z-index:0; width:100vw; max-width:100vw; height:clamp(220px,32vw,560px); margin-top:0; }
.stage-art{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 38%; }
.stage::before{ content:""; position:absolute; inset:0 0 auto 0; height:28%; background:linear-gradient(180deg, rgba(32,16,39,.96) 0%, rgba(32,16,39,.6) 40%, rgba(32,16,39,0) 100%); }
.stage .celband{ position:absolute; left:0; right:0; bottom:0; }
.title{
font-family:var(--display); font-weight:400; font-size:var(--tf);
line-height:1.1; letter-spacing:.02em; display:inline-block;
margin:.3em auto .7em; padding:.32em .55em .38em; position:relative;
color:transparent; background:var(--plate); border-radius:16px;
box-shadow:0 12px 34px rgba(0,0,0,.45); transform:rotate(-5deg);
animation: title-pulse 2.6s ease-in-out infinite;
}
.title::after{
content:"MAYHEMATIC"; position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(180deg, var(--amber-hi) 20%, #ff8c1f 85%);
-webkit-background-clip:text; background-clip:text; color:transparent;
-webkit-text-stroke:2.5px #000;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
.title::after{ background:none; color:#ffc23c; }
}
@keyframes title-pulse{ 0%,100%{ transform:rotate(-5deg) scale(1); } 50%{ transform:rotate(-5deg) scale(1.018); } }
.tagline, .subline{
font-family:var(--sys); color:var(--tag-gold); font-style:italic; font-weight:700; line-height:1.6;
letter-spacing:.01em; transform:rotate(-3deg); text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.tagline{ font-size:clamp(16.9px,1.55vw,27.6px); margin:.9rem auto 1.5rem; }
.subline{ font-size:clamp(14px,1.28vw,22.8px); margin:-.4rem auto 1.6rem; }
/* hero CTA = the same green ticket as the closing tray (Discord lives only in the tray) */
.hero .tk{ margin-top:6px; }
.ticket.green.big{ font-size:clamp(1.12rem,1.6vw,1.4rem); padding:19px 40px 23px; }

/* ===== the in-game kit ===== */
.inked{
border:3px solid var(--ink); border-bottom-width:6px; border-right-width:5px;
border-radius:18px 15px 20px 16px; box-shadow:0 10px 0 var(--dusk);
}
.cel{ /* amber two-band cel split, repeats per text line */
background:linear-gradient(180deg, var(--title-hi) 0 54%, var(--title-lo) 54% 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* sign plate: the level-up / boss / CORNER STORE header */
.sign{
position:relative; width:fit-content; max-width:100%; margin:0 auto; text-align:center;
background:var(--sign); border:2px solid var(--sign-edge); border-radius:8px 6px 9px 6px;
box-shadow:0 0 0 2px var(--ink), 0 9px 0 2px var(--dusk); padding:9px 26px 11px;
}
.sign .cap{ margin:0 0 2px; font-weight:700; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:#fff; line-height:1.3; }
.sign h1, .sign h2{
font-family:var(--display); font-weight:400; font-size:clamp(21px,3.2vw,34px); line-height:1.15;
letter-spacing:.03em; margin:0; background-size:100% 1.15em;
filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink));
}
.sign.hang{ margin-top:36px; transform:rotate(-2deg); transform-origin:50% -36px; animation:sway 7s ease-in-out infinite; }
.sign.hang::before, .sign.hang::after{
content:""; position:absolute; bottom:100%; width:14px; height:38px;
background:
radial-gradient(circle at 50% 7px, transparent 3.2px, #d6d0e2 3.7px 6px, transparent 6.5px),
linear-gradient(#d6d0e2,#d6d0e2) 50% 100% / 2px calc(100% - 12px) no-repeat;
}
.sign.hang::before{ left:9%; } .sign.hang::after{ right:9%; }
@keyframes sway{ 0%,100%{ transform:rotate(-2.7deg); } 50%{ transform:rotate(-1.3deg); } }
/* card chrome: coloured edge, ink ring, dotted cel band */
.celband{
display:block; align-self:stretch; height:16px;
background: radial-gradient(circle, rgba(12,12,18,.6) 1.5px, transparent 2px) 50% 50% / 8px 8px repeat-x, var(--card-band);
}

/* ===== tonight's episode: clip + level-up hand ===== */
.pitch{ display:flex; flex-direction:column; gap:40px; }
.pitch-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; }
.clip{ width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; }
.clip video{ display:block; width:100%; height:100%; object-fit:cover; }
.cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; min-width:0; }
.lv{
background:var(--card); border:2px solid var(--card-edge); border-radius:8px;
box-shadow:0 0 0 2px var(--ink), 0 8px 0 2px var(--dusk); overflow:hidden; min-width:0;
display:flex; flex-direction:column; align-items:center; text-align:center;
}
.lv .tab{ margin:10px 0 4px; font-family:var(--display); font-size:.68rem; letter-spacing:.1em; color:var(--card-edge); line-height:1; }
.lv .ico{ width:58px; height:58px; display:block; }
.lv h3{ font-family:var(--display); font-weight:400; font-size:1.02rem; line-height:1.2; letter-spacing:.02em; color:#fff; margin:4px 14px 6px; text-wrap:balance; }
.lv .body{ margin:0 16px 14px; font-size:.94rem; line-height:1.45; color:#e9e2f2; }
.lv .celband{ margin-top:auto; }

/* ===== screenshots ===== */
.shots{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 22px; list-style:none; margin:0; padding:0; }
.shots li{
border:2px solid var(--sign-edge); border-radius:8px; overflow:hidden; background:var(--ink);
box-shadow:0 0 0 2px var(--ink), 0 8px 0 2px var(--dusk);
}
.shots img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.shots .celband{ height:12px; }

/* ===== cast: the cut-in as a roll call ===== */
.cast{ display:flex; flex-direction:column; }
.beast{ --a:var(--beast-a); --b:var(--beast-b); }
.brutus{ --a:var(--brutus-a); --b:var(--brutus-b); }
.cast b{ font-family:var(--display); font-weight:400; letter-spacing:.03em; color:var(--amber-hi); }
.cast-more{ text-align:center; color:var(--muted); font-style:italic; font-weight:500; margin:34px 0 0; }
.cast-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px; padding-top:76px; }
.rc{
position:relative; height:300px;
background:
repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 18px, rgba(255,255,255,.11) 18px 21px,
rgba(255,255,255,0) 21px 47px, rgba(255,255,255,.07) 47px 56px,
rgba(255,255,255,0) 56px 83px, rgba(13,9,22,.16) 83px 88px),
linear-gradient(100deg, var(--a), var(--b));
}
.rc.brutus{ background:
repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 18px, rgba(255,255,255,.11) 18px 21px,
rgba(255,255,255,0) 21px 47px, rgba(255,255,255,.07) 47px 56px,
rgba(255,255,255,0) 56px 83px, rgba(13,9,22,.16) 83px 88px),
linear-gradient(260deg, var(--a), var(--b)); }
.rc::before{
content:""; position:absolute; inset:0; border-radius:14px 11px 13px 10px;
background-image:radial-gradient(rgba(13,9,22,.3) 2.2px, transparent 2.7px); background-size:11px 11px;
-webkit-mask-image:linear-gradient(90deg, transparent 38%, #000 100%); mask-image:linear-gradient(90deg, transparent 38%, #000 100%);
}
.rc.brutus::before{ -webkit-mask-image:linear-gradient(270deg, transparent 38%, #000 100%); mask-image:linear-gradient(270deg, transparent 38%, #000 100%); }
.rc .fig{ position:absolute; top:0; bottom:var(--band); width:46%; clip-path:inset(-70px -24px 0 -24px); }
.rc.beast .fig{ left:3%; } .rc.brutus .fig{ right:5%; }
.rc .fig img{ position:absolute; left:50%; top:-44px; height:250%; width:auto; max-width:none; transform:translateX(-50%); }
.rc.brutus .fig img{ height:215%; top:-38px; }
.rc .who{ position:absolute; top:74px; width:52%; display:flex; flex-direction:column; gap:12px; }
.rc.beast .who{ right:4%; align-items:flex-start; text-align:left; }
.rc.brutus .who{ left:4%; width:43%; align-items:flex-end; text-align:right; }
.rc .name{
font-family:var(--display); font-weight:400; font-size:clamp(22px,2.9vw,32px); line-height:1;
white-space:nowrap; margin:0; padding:.3em .5em .34em; background:var(--plate);
border-radius:10px; box-shadow:0 5px 0 var(--dusk); transform:rotate(-4deg);
}
.rc .line{ margin:0; font-style:italic; font-weight:500; line-height:1.3; color:#fff; text-shadow:0 2px 0 rgba(13,9,22,.5); max-width:15em; }
.rc .shout{
position:absolute; top:-18px; margin:0; font-style:italic; font-weight:900; font-size:1.3rem;
line-height:1; color:#fff; white-space:nowrap;
filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink))
drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 3px 0 var(--dusk));
}
.rc.beast .shout{ left:44%; transform:rotate(-7deg); }
.rc.brutus .shout{ right:48%; transform:rotate(7deg); }
.rc .band{
position:absolute; left:0; right:0; bottom:0; min-height:var(--band);
background:rgba(13,9,22,.8); border-radius:0 0 13px 10px;
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 12px;
padding:6px 14px; margin:0; font-size:.95rem; line-height:1.25; text-align:center;
}

/* ===== closing: the THREAT banner with its alarm crawl, then the ticket tray ===== */
.closing{ display:flex; flex-direction:column; align-items:center; gap:34px; text-align:center; }
.threat{
width:100%; max-width:820px; overflow:hidden; color:var(--ink); background:var(--threat);
border:3px solid var(--ink); border-bottom-width:5px; border-radius:10px 7px 11px 8px; box-shadow:0 9px 0 var(--dusk);
}
.crawl{ background:var(--ink); overflow:hidden; white-space:nowrap; padding:6px 0 5px; font-family:var(--display); font-size:.82rem; letter-spacing:.04em; line-height:1.2; color:var(--threat-text); }
.crawl .track{ display:inline-flex; animation:crawl-l 30s linear infinite; }
.crawl.rev .track{ animation-name:crawl-r; }
.crawl span{ display:inline-flex; align-items:center; }
.crawl span::after{ content:""; width:.42em; height:.42em; background:currentColor; margin:0 .8em; }
@keyframes crawl-l{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes crawl-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.threat h2{ font-family:var(--display); font-weight:400; font-size:clamp(26px,4.4vw,44px); line-height:1.05; letter-spacing:.02em; margin:18px 16px 6px; }
.threat p{ margin:0 16px 18px; font-weight:600; color:#1c0a0c; }
.tray{
display:flex; flex-wrap:wrap; gap:14px 18px; justify-content:center; align-items:center;
background:var(--tray); border:3px solid var(--ink); border-bottom-width:5px;
border-radius:12px 10px 13px 10px; box-shadow:0 8px 0 var(--dusk); padding:16px 22px 18px;
}
.tk{
display:inline-block; transition:transform .12s ease;
filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)) drop-shadow(0 4px 0 rgba(12,12,18,.55));
}
.tk:hover{ transform:translateY(-2px); }
.tk:focus-within{ outline:3px solid #fff; outline-offset:4px; border-radius:6px; }
.ticket{
display:inline-flex; align-items:center; justify-content:center; text-decoration:none; color:#fff;
font-family:var(--display); letter-spacing:.04em; line-height:1; outline:none;
background:linear-gradient(180deg, var(--t) 0 80%, var(--t-lo) 80% 100%);
-webkit-mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000 100%) 0 0 / 51% 100% no-repeat,
radial-gradient(circle 8px at 100% 50%, transparent 97%, #000 100%) 100% 0 / 51% 100% no-repeat;
mask: radial-gradient(circle 8px at 0 50%, transparent 97%, #000 100%) 0 0 / 51% 100% no-repeat,
radial-gradient(circle 8px at 100% 50%, transparent 97%, #000 100%) 100% 0 / 51% 100% no-repeat;
}
.ticket.green{ --t:var(--ticket-green); --t-lo:var(--ticket-green-lo); font-size:1.12rem; padding:17px 34px 20px; }
.ticket.blue{ --t:var(--ticket-blue); --t-lo:var(--ticket-blue-lo); font-size:.92rem; padding:14px 28px 17px; }
.ticket.amber{ --t:#e0862f; --t-lo:#b05f1e; font-size:1rem; padding:15px 26px 18px; }

/* ===== email signup: a paper stub to write on + an amber ticket; plain POST, no script ===== */
.signup-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; }
.hero .signup-wrap{ margin-top:22px; }
.tray .signup-wrap{ flex-basis:100%; margin-top:4px; }
.signup{ display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; align-items:center; margin:0; width:min(100%,560px); }
.signup .stub{
font-family:var(--body); font-size:1rem; font-weight:500; color:var(--ink); background:#f3ead6;
border:2px solid var(--ink); border-radius:6px; box-shadow:0 4px 0 var(--dusk); padding:13px 16px 14px; min-width:0; flex:1 1 200px; max-width:300px;
}
.signup .stub::placeholder{ color:#6e6478; opacity:1; }
.signup .stub:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.signup button.ticket{ appearance:none; border:0; cursor:pointer; }
.signup-note{ margin:0; font-size:.86rem; line-height:1.4; color:var(--faint); }
.signup-note a{ color:var(--tag-gold); text-underline-offset:3px; }
.tray .signup-note{ color:#f1dede; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.panel.plain{ text-align:center; max-width:640px; width:100%; margin-inline:auto; }
.panel.plain p{ max-width:none; font-size:1.12rem; font-weight:600; }
.foot{ margin:18px 0 0; font-size:.94rem; line-height:2; color:var(--faint); }
.foot a{ color:var(--tag-gold); text-underline-offset:3px; }
.foot a:hover{ color:#fff; }

@media (max-width:900px){
.cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
}
@media (max-width:760px){
.site{ gap:72px; }
.pitch-body{ gap:36px; }
.cards{ grid-template-columns:minmax(0,1fr); gap:24px; }
.shots{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
.cast-row{ grid-template-columns:minmax(0,1fr); gap:62px; padding-top:66px; }
.rc{ height:256px; --band:58px; }
.rc .fig{ width:44%; }
.rc .fig img{ top:-34px; }
.rc .who{ top:56px; gap:9px; }
.rc .line{ font-size:.92rem; }
.rc .shout{ font-size:1.12rem; }
.sign{ padding-inline:18px; }
}
@media (prefers-reduced-motion: reduce){
.bg .dots, .title, .sign.hang, .crawl .track{ animation:none; }
}

/* ===== the lineup: fact plates + the Steam feature list ===== */
.lineup{ display:flex; flex-direction:column; gap:34px; }
.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 16px; margin:0; }
.facts div{
background:var(--sign); border:2px solid var(--sign-edge); border-radius:8px 6px 9px 6px;
box-shadow:0 0 0 2px var(--ink), 0 6px 0 2px var(--dusk); padding:9px 12px 11px; text-align:center; min-width:0;
}
.facts dt{ font-weight:700; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:#fff; line-height:1.3; }
.facts dd{ margin:2px 0 0; font-family:var(--display); font-size:1.02rem; line-height:1.2; letter-spacing:.02em; background-size:100% 1.2em; }
.listcard{
background:var(--card); border:2px solid var(--card-edge); border-radius:8px;
box-shadow:0 0 0 2px var(--ink), 0 8px 0 2px var(--dusk); overflow:hidden;
}
.listcard ul{ list-style:none; margin:0; padding:22px 26px 8px; columns:2; column-gap:40px; }
.listcard li{ break-inside:avoid; position:relative; padding:0 0 13px 20px; font-size:.96rem; line-height:1.45; color:#e9e2f2; }
.listcard li::before{ content:""; position:absolute; left:0; top:.48em; width:8px; height:8px; background:var(--title-lo); box-shadow:0 0 0 2px var(--ink); }

/* ===== press kit page ===== */
.press .bg{ --oy:118px; }
.press .site{ gap:56px; padding-bottom:72px; }
.press-head{ --tf:clamp(28px,3.6vw,46px); display:flex; flex-direction:column; align-items:center; gap:34px; padding-top:calc(118px - 1.2 * var(--tf)); }
.press-head .title{ text-decoration:none; margin-bottom:.2em; }
.panel{
background:var(--plate); border:2px solid var(--sign-edge); border-radius:8px;
box-shadow:0 0 0 2px var(--ink), 0 8px 0 2px var(--dusk); padding:22px 26px 24px;
}
.panel > :first-child{ margin-top:0; } .panel > :last-child{ margin-bottom:0; }
.panel p{ margin:0 0 14px; color:var(--text); max-width:46em; }
.panel a{ color:var(--tag-gold); }
.sub{
font-family:var(--display); font-weight:400; font-size:1.2rem; line-height:1.2; letter-spacing:.02em;
margin:26px 0 8px; width:fit-content; background-size:100% 1.2em; filter:drop-shadow(0 2px 0 var(--dusk));
}
.sheet{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 22px; margin:0 0 18px; }
.sheet dt{ font-weight:700; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); padding-top:.28em; }
.sheet dd{ margin:0; color:var(--text); }
.kit{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.kit p{ margin:0; color:var(--muted); font-size:.92rem; }
.media{ display:flex; flex-direction:column; gap:22px; }
.media .sub{ margin:0; }
.shots.two{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.shots .wide{ grid-column:1 / -1; }
.shots .sq img{ aspect-ratio:1/1; }
.shots a{ display:block; }
.shots a:focus-visible{ outline:3px solid #fff; outline-offset:-3px; }
.shots .dark{ background:#17131f; } .shots .dark img{ object-fit:contain; }
.shots figcaption, .shots .capt{ display:block; padding:6px 10px 7px; font-size:.8rem; color:var(--muted); background:var(--card-band); }

@media (max-width:760px){
.facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
.listcard ul{ columns:1; padding:18px 18px 6px; }
.panel{ padding:18px 18px 20px; }
.sheet{ grid-template-columns:minmax(0,1fr); gap:0; }
.sheet dd{ margin-bottom:10px; }
}