/* ============================================================
   AERO MEDIA MARKETING — single-page site
   Palette derived from the logo: pure monochrome. The only
   colour on this page comes from the photographs.
   Display face (Poppins, geometric heavy) chosen to harmonise
   with the AERO wordmark.
   ============================================================ */
:root{
  --ink:        #0A0A0A;   /* page ground — the logo's black */
  --ink-2:      #131313;   /* raised surface */
  --ink-3:      #1C1C1C;   /* inset */
  --rule:       #2B2B2A;   /* hairlines */
  --rule-soft:  #1E1E1D;
  --paper:      #F5F5F3;   /* primary text — faint warm bias */
  --paper-dim:  #A5A5A0;   /* secondary */
  --paper-faint:#6C6C67;   /* captions, tertiary */

  --display: "Poppins", "Futura", "Century Gothic", sans-serif;
  --body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --scrim:   rgba(10,10,10,.95);   /* gradient over image captions */
  --bar-bg:  rgba(10,10,10,.93);   /* sticky mobile bar */
  --glow:    rgba(245,245,243,.055);

  --rail: 208px;
  --gutter: clamp(20px, 5vw, 72px);
  color-scheme: dark;
}

/* Inverted (light) state. Same monochrome brand, ground and ink swapped.
   Driven by the Invert control; the choice is remembered per browser. */
:root[data-theme="light"]{
  --ink:        #F7F7F5;
  --ink-2:      #EFEFEC;
  --ink-3:      #E6E6E2;
  --rule:       #D5D5D0;
  --rule-soft:  #E7E7E3;
  --paper:      #0A0A0A;
  --paper-dim:  #55554F;
  --paper-faint:#6E6E67;   /* darkened from #8A8A83 - 3:1 was too low on the pale ground */
  --scrim:      rgba(247,247,245,.95);
  --bar-bg:     rgba(247,247,245,.93);
  --glow:       rgba(10,10,10,.05);
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.03; letter-spacing:-.03em; text-wrap:balance; margin:0; }
p{ margin:0; }
a{ color:inherit; }

::selection{ background:var(--paper); color:var(--ink); }
:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; border-radius:2px; }

/* ---------- shared atoms ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--paper-dim);
  display:flex; align-items:center; gap:11px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--paper); flex:none; }

.spec{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.045em;
  color:var(--paper-faint); text-transform:uppercase;
}

.lede{ font-size:clamp(17px,2vw,19.5px); color:var(--paper-dim); max-width:60ch; }

.btn{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px; border:1px solid var(--rule); background:transparent; color:var(--paper);
  cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{ border-color:var(--paper); transform:translateY(-1px); }
.btn--solid{ background:var(--paper); border-color:var(--paper); color:var(--ink); font-weight:500; }
.btn--solid:hover{ background:transparent; color:var(--paper); }

/* ---------- placeholder frame (drop real images here) ---------- */
.frame{
  position:relative; display:block; width:100%; max-width:100%;
  background:
    repeating-linear-gradient(135deg, var(--rule-soft) 0 1px, transparent 1px 11px),
    var(--ink-2);
  border:1px solid var(--rule);
  overflow:hidden;
}
.frame img{ display:block; width:100%; height:100%; object-fit:cover; }
.frame__tag{
  position:absolute; inset:auto 0 0 0; padding:12px 14px;
  background:linear-gradient(to top, var(--scrim), transparent);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--paper-faint); line-height:1.45;
}
.frame__tag b{ color:var(--paper); font-weight:500; }

/* ============================================================
   NAV RAIL
   ============================================================ */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--rail); z-index:40;
  display:none; flex-direction:column; justify-content:space-between;
  padding:calc(32px + env(safe-area-inset-top,0px)) 0 calc(28px + env(safe-area-inset-bottom,0px)) 28px;
  border-right:1px solid var(--rule-soft); background:var(--ink);
}
.rail__logo{ display:block; width:96px; }
.rail__logo img{ display:block; width:100%; height:auto; }

/* Two logo files ship with the page: the INVERSE (white) mark for the dark
   state and the standard (black) mark for the inverted state. CSS picks. */
/* :root prefix is load-bearing - the container rules (.rail__logo img etc.)
   are (0,1,1) and would otherwise outrank a bare .logo-std at (0,1,0),
   leaving both lockups stacked on top of each other. */
:root .logo-std{ display:none; }
:root .logo-inv{ display:block; }
:root[data-theme="light"] .logo-inv{ display:none; }
:root[data-theme="light"] .logo-std{ display:block; }

.themetoggle{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:transparent; border:1px solid var(--rule); color:var(--paper-faint);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:8px 11px; transition:color .18s ease, border-color .18s ease;
}
.themetoggle:hover{ color:var(--paper); border-color:var(--paper); }
.themetoggle svg{ width:14px; height:14px; flex:none; }
.themetoggle .lbl{ display:inline; }
.topbar .themetoggle{ padding:7px 9px; margin-left:auto; flex:none; }
.topbar .themetoggle .lbl{ display:none; }
.rail__links{ display:flex; flex-direction:column; gap:2px; margin:0; padding:0; list-style:none; }
.rail__links a{
  display:block; padding:7px 0 7px 18px; text-decoration:none; position:relative;
  font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--paper-faint); transition:color .18s ease;
}
.rail__links a::before{
  content:""; position:absolute; left:0; top:50%; width:9px; height:1px;
  background:var(--paper); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.rail__links a.is-page{ color:var(--paper-dim); }
.rail__links a.is-page::after{ content:" \2192"; }
.rail__links a.is-page::before{ display:none; }
.topbar__links a.is-page{ color:var(--paper-dim); }
.rail__links a.is-ext{ color:var(--paper-dim); }
.rail__links a.is-ext::after{ content:" \2197"; }
.rail__links a.is-ext::before{ display:none; }
.rail__links a:hover{ color:var(--paper-dim); }
.rail__links a.is-active{ color:var(--paper); }
.rail__links a.is-active::before{ transform:scaleX(1); }
.rail__foot{ font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; color:var(--paper-faint); text-transform:uppercase; line-height:1.7; }
.rail__progress{ position:absolute; top:0; right:-1px; width:2px; height:0; background:var(--paper); }

/* mobile top bar */
.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  display:flex; align-items:center; gap:16px;
  padding:10px var(--gutter);
  background:var(--bar-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.topbar__logo{ display:block; width:30px; flex:none; }
.topbar__logo img{ display:block; width:100%; height:auto; }
.topbar__links{ display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; margin:0; padding:0; list-style:none; }
.topbar__links::-webkit-scrollbar{ display:none; }
.topbar__links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--paper-faint); text-decoration:none; white-space:nowrap;
}
.topbar__links a.is-active{ color:var(--paper); }
.topbar__links a.is-ext{ color:var(--paper-dim); }
.topbar__links a.is-ext::after{ content:" \2197"; }

/* ============================================================
   PAGE SHELL
   ============================================================ */
.page{ width:100%; }
.wrap{ padding-inline:var(--gutter); max-width:1180px; margin-inline:auto; }

section{ padding-block:clamp(72px,9vw,124px); border-top:1px solid var(--rule-soft); }
section:first-of-type{ border-top:0; }

.sec-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(38px,5vw,56px); }
.sec-head h2{ font-size:clamp(31px,5vw,52px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; padding-block:clamp(64px,11vw,132px) clamp(60px,8vw,100px); }
.hero::before{
  content:""; position:absolute; top:-35%; right:-12%; width:72vw; height:72vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, var(--glow) 0%, transparent 62%);
  pointer-events:none;
}
.hero__inner{ position:relative; display:flex; flex-direction:column; gap:26px; }
.hero h1{ font-size:clamp(42px,9.4vw,104px); line-height:.94; letter-spacing:-.042em; max-width:13ch; }
.hero h1 span{ color:var(--paper-faint); }
.hero__line{ font-family:var(--display); font-weight:600; font-size:clamp(19px,2.5vw,25px); line-height:1.34; letter-spacing:-.015em; color:var(--paper); max-width:30ch; }
.hero__sub{ color:var(--paper-dim); max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }

.creds{ display:flex; flex-wrap:wrap; gap:0; margin-top:clamp(40px,6vw,64px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.creds div{ flex:1 1 200px; padding:18px 22px 18px 0; min-width:0; }
.creds div + div{ border-left:1px solid var(--rule); padding-left:22px; }
.creds dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); margin-bottom:6px; }
.creds dd{ margin:0; font-size:15px; color:var(--paper-dim); line-height:1.45; }

/* ============================================================
   SERVICES — four service lines, each capped with a heavy rule
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
.svc-item{ padding-top:19px; border-top:2px solid var(--paper); }
.svc-item h3{ font-size:clamp(20px,2.6vw,25px); letter-spacing:-.025em; margin-bottom:9px; }
.svc-item .tags{
  font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--paper-faint); margin-bottom:13px;
}
.svc-item p{ color:var(--paper-dim); font-size:16px; line-height:1.58; max-width:46ch; }

.quote-note{ margin-top:clamp(42px,5vw,60px); padding:26px 28px; background:var(--ink-2); border-left:2px solid var(--paper); }
.quote-note h4{ font-family:var(--display); font-weight:700; font-size:18px; margin:0 0 8px; letter-spacing:-.02em; }
.quote-note p{ color:var(--paper-dim); max-width:62ch; font-size:16px; }

/* ============================================================
   WORK
   ============================================================ */
/* Masonry columns so every photograph keeps its own aspect ratio —
   no forced crops, no dead space at the bottom of a grid row. */
.grid{ column-count:1; column-gap:14px; }
.shot{ break-inside:avoid; margin:0 0 14px; display:block; }
.shot img{
  display:block; width:100%; height:auto; border:1px solid var(--rule);
  background:var(--ink-2);
}
.shot figcaption{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--paper-faint); padding-top:8px;
}

.gallery-panel{
  margin-top:clamp(40px,5vw,56px);
  display:flex; flex-wrap:wrap; align-items:center; gap:24px; justify-content:space-between;
  padding:clamp(26px,4vw,38px); background:var(--ink-2); border:1px solid var(--rule);
}
.gallery-panel h3{ font-size:clamp(20px,3vw,27px); margin-bottom:8px; letter-spacing:-.025em; }
.gallery-panel p{ color:var(--paper-dim); font-size:16px; max-width:46ch; }
.gallery-panel__side{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,60px); align-items:start; }
.about__body{ display:flex; flex-direction:column; gap:20px; }
.about__body p{ color:var(--paper-dim); max-width:62ch; }
.about__body p:first-of-type{ color:var(--paper); font-size:clamp(18px,2.2vw,21px); line-height:1.5; }
.about__body cite{ font-style:normal; color:var(--paper); font-weight:500; }
.about__aside{ display:flex; flex-direction:column; gap:20px; }
.about__aside .frame{ aspect-ratio:4/5; }
.facts{ margin:0; display:flex; flex-direction:column; }
.facts > div{ display:flex; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule-soft); }
.facts dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); flex:0 0 74px; padding-top:3px; }
.facts dd{ margin:0; font-size:15.5px; color:var(--paper-dim); line-height:1.5; }

/* ============================================================
   RECENT WORK STRIP
   ============================================================ */
.placeholder-flag{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--paper); padding:5px 10px; font-weight:500;
}
.projects{ display:flex; flex-direction:column; border-top:1px solid var(--rule); }
.project{
  display:grid; grid-template-columns:1fr; gap:8px;
  padding-block:26px; border-bottom:1px solid var(--rule);
}
.project__disc{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--paper-faint); padding-top:5px; }
.project h3{ font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.02em; margin:0 0 6px; }
.project p{ color:var(--paper-dim); font-size:16px; line-height:1.55; max-width:58ch; }
.project p a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--rule); }
.project p a:hover{ border-color:var(--paper); }
.project cite{ font-style:italic; }
.project__noms{
  margin:12px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:5px;
}
.project__noms li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--paper-dim); padding-left:16px; position:relative;
}
.project__noms li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:1px; background:var(--paper-faint);
}
.project__noms li b{ color:var(--paper); font-weight:500; }
/* ---- project video facade + external links ---- */
.project__video{ margin-top:16px; max-width:520px; }
.vframe{
  position:relative; aspect-ratio:16/9; width:100%;
  border:1px solid var(--rule); background:var(--ink-2); overflow:hidden;
  background-image:repeating-linear-gradient(135deg, var(--rule-soft) 0 1px, transparent 1px 11px);
}
.vframe iframe{ display:block; width:100%; height:100%; border:0; }
.vplay{
  position:absolute; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:transparent; border:0; cursor:pointer; color:var(--paper);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s ease;
}
.vplay:hover{ background:rgba(128,128,128,.10); }
.vplay svg{ width:46px; height:46px; }
.vplay:hover svg{ transform:scale(1.06); }
.vplay svg{ transition:transform .2s ease; }
.vnote{
  font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--paper-faint); padding-top:7px;
}
.project__links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:13px; }
.project__links a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--paper-dim); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
}
.project__links a:hover{ color:var(--paper); border-color:var(--paper); }
.project__links a::after{ content:" \2197"; }

.project__role{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper-faint); margin-top:9px;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; grid-template-columns:1fr; gap:clamp(36px,5vw,56px); align-items:start; }
.contact__main{ display:flex; flex-direction:column; gap:30px; }

.mailto{
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:clamp(15px,2.1vw,25px); letter-spacing:-.02em; line-height:1.25;
  color:var(--paper); text-decoration:none; word-break:break-word;
  border-bottom:2px solid var(--rule); padding-bottom:6px;
  transition:border-color .18s ease;
}
.mailto:hover{ border-color:var(--paper); }

.include{ border-top:1px solid var(--rule); }
.include h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); margin:20px 0 12px; font-weight:500; }
.include ol{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; }
.include li{ display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--rule-soft); font-size:16px; color:var(--paper-dim); }
.include li b{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-faint); flex:0 0 92px; font-weight:400; padding-top:3px; }

.contact__aside{ display:flex; flex-direction:column; gap:26px; }
.contact-block h4{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); margin:0 0 10px; font-weight:500; }
.contact-block a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color .16s ease; }
.contact-block a:hover{ border-color:var(--paper); }
.contact-block p{ color:var(--paper-dim); font-size:15.5px; }
.socials{ display:flex; flex-direction:column; gap:9px; }
.socials a{ font-size:15.5px; width:fit-content; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ border-top:1px solid var(--rule); padding-block:44px calc(40px + env(safe-area-inset-bottom,0px)); }
.foot-inner{ display:flex; flex-wrap:wrap; gap:26px 32px; justify-content:space-between; align-items:center; }
.foot-logo{ width:132px; flex:none; }
.foot-logo img{ display:block; width:100%; height:auto; }
.foot-meta{ display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; }
.foot-meta p, .foot-meta a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-faint); }
.foot-meta a{ text-decoration:none; }
.foot-meta a:hover{ color:var(--paper); }

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:720px){
  .grid{ column-count:2; }
  .svc-grid{ grid-template-columns:1fr 1fr; gap:46px 52px; }
  .about{ grid-template-columns:1.55fr 1fr; }
  .project{ grid-template-columns:150px 1fr; gap:24px; }
}
@media (min-width:1024px){
  .topbar{ display:none; }
  .rail{ display:flex; }
  .page{ padding-left:var(--rail); }
  .contact{ grid-template-columns:1.45fr 1fr; }
  .grid{ column-count:3; }
}


/* ============================================================
   ATMOSPHERE — background drift, text reveal, cursor trail
   All three are inert when the visitor prefers reduced motion;
   see the media query at the end of this file.
   ============================================================ */
:root{ --reveal-rise:18px; }

/* stacking: wireframe behind the page, chrome and trail in front */
.fx-wire{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.page{ position:relative; z-index:1; }
.rail, .topbar{ z-index:40; }

.fx-trail{
  position:fixed; inset:0; z-index:60; pointer-events:none;
}

/* ---- text reveal ----
   Elements are visible by default. `.reveal` is added by effects.js only
   when the observer that removes it is confirmed running, so nothing can
   be stranded invisible if the script fails. */
.reveal{
  opacity:0; transform:translateY(var(--reveal-rise));
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---- hero entrance ---- */
.hero-in > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.hero-in--go > *{ opacity:1; transform:none; }
.hero-in--go > *:nth-child(1){ transition-delay:40ms; }
.hero-in--go > *:nth-child(2){ transition-delay:110ms; }
.hero-in--go > *:nth-child(3){ transition-delay:180ms; }
.hero-in--go > *:nth-child(4){ transition-delay:250ms; }
.hero-in--go > *:nth-child(5){ transition-delay:320ms; }
.hero-in--go > *:nth-child(6){ transition-delay:390ms; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal, .hero-in > *{ opacity:1 !important; transform:none !important; }
  .fx-trail{ display:none !important; }
}

/* ============================================================
   CUBEFIELD — the standalone game page (game.html only)
   ============================================================ */
.gamepage{ min-height:100vh; display:flex; flex-direction:column; }
.gamebar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px var(--gutter); border-bottom:1px solid var(--rule-soft);
}
.gamebar__logo{ display:block; width:76px; flex:none; }
.gamebar__logo img{ display:block; width:100%; height:auto; }
.gamebar a.back{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper-faint); text-decoration:none; margin-left:auto;
}
.gamebar a.back:hover{ color:var(--paper); }

.gamewrap{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:clamp(18px,3vw,34px) var(--gutter) clamp(28px,4vw,48px);
}
.gamehead{ width:100%; max-width:980px; margin-bottom:16px; }
.gamehead h1{ font-size:clamp(26px,4.4vw,42px); margin-bottom:8px; }
.gamehead p{ color:var(--paper-dim); max-width:56ch; font-size:16px; }
.gamehead .eyebrow{ max-width:none; font-size:11px; margin-bottom:10px; }

.gamestage{
  position:relative; width:100%; max-width:980px;
  aspect-ratio:16/10; border:1px solid var(--rule); background:var(--ink-2);
  overflow:hidden; touch-action:none;
  /* never taller than the viewport allows — the canvas geometry is derived
     from whatever shape it ends up, so a squatter stage is not a problem */
  max-height:calc(100dvh - 300px);
}
@media (max-width:640px){ .gamestage{ aspect-ratio:3/4; } }
#game{ display:block; width:100%; height:100%; }

.gamepanel{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center;
  padding:24px; background:color-mix(in srgb, var(--ink) 74%, transparent);
  backdrop-filter:blur(2px);
}
.gamepanel h2{ font-size:clamp(30px,6vw,56px); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.gamepanel p{ color:var(--paper-dim); font-size:15px; max-width:40ch; }

.gamekeys{
  width:100%; max-width:980px; margin-top:18px;
  display:flex; flex-wrap:wrap; gap:10px 26px;
}
.gamekeys span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-faint);
}
.gamekeys b{ color:var(--paper-dim); font-weight:500; }