/* ════════════════════════════════════════════════════════════════
   PAGES · HOME
   01 arrival    the studio's horizon, drawn live (fx/horizon.js),
                 under its message, with the newest game's card.
                 Wide screens pin the section: scrolling (--p 0→1,
                 pages/home.js) closes the horizon into that game's
                 own world, raises its landscape, frames it, and the
                 game's details arrive. Everywhere else (phones, short
                 windows, reduced motion, no JS) the same parts stack.
                 Game news lives on each game's page, not here.
   02 studio     the studio's mark, drawn large; how we work
   03 community  the horizon again, at dusk; the newsletter
   Motion vocabulary: arrivals use --ease, travel uses --ease-io,
   ambient light is the shader's own slow drift.
   ════════════════════════════════════════════════════════════════ */

/* ── 01 · arrival ──────────────────────────────────────────────── */
.arrival{ --p:0; --travel:0px; position:relative; isolation:isolate; }
.arrival__pin{ position:relative; }

/* The sky: the shader's canvas, with a drawn fallback underneath in
   case WebGL is unavailable (the canvas then hides itself). */
.sky{
  position:absolute; inset:0 0 auto; height:100svh; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(140% 70% at 66% 118%, #0b0a08 58%, rgb(244 231 207 / .75) 58.4%, rgb(165 132 90 / .3) 60%, rgb(165 132 90 / .07) 68%, transparent 76%),
    radial-gradient(50% 36% at 76% 76%, rgb(165 132 90 / .14), transparent 70%),
    #0d0c0a;
}
.sky__canvas,.screen__canvas,.community__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 900ms var(--ease); }
:is(.sky__canvas,.screen__canvas,.community__canvas).is-live{ opacity:1; }
:is(.sky__canvas,.screen__canvas,.community__canvas).is-fallback{ display:none; }

.intro{
  position:relative; z-index:3;
  width:min(100% - 2 * var(--g), var(--max)); margin-inline:auto; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 24px) 0 max(30svh, 200px);
}
.intro__kicker{ display:flex; align-items:center; gap:14px; margin-bottom:clamp(18px,2.4vw,28px); color:var(--text-2); }
.intro__kicker::before{ content:""; width:28px; height:1px; background:var(--signal); }
.intro__title{ max-width:11ch; }
.intro__lede{ margin-top:clamp(18px,2vw,28px); max-width:38ch; }
.intro__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:clamp(26px,3vw,40px); }
.icon--down{ rotate:90deg; }

/* ── the game card ───────────────────────────────────────────────
   One per game: its world (a live vista in the game's own palette),
   title, genre and actions. The newest stands in the arrival; any
   future game uses the same card with its own world and --accent. */
.gamecard{
  --gc-w:min(100%, 520px);
  position:relative; width:var(--gc-w); margin-top:clamp(32px,6svh,56px);
  padding:6px; border-radius:20px;
  background:linear-gradient(180deg, rgb(24 30 42 / .94), rgb(11 14 20 / .97));
  box-shadow:0 0 0 1px rgb(196 214 255 / .1), 0 44px 100px -40px rgb(0 0 0 / .95);
  transition:translate 600ms var(--ease), box-shadow 600ms var(--ease);
}
.gamecard::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 48px -8px color-mix(in oklab, var(--accent) 50%, transparent);
  opacity:0; transition:opacity 500ms var(--ease);
}
.gamecard__media{
  position:relative; display:block; aspect-ratio:16 / 10; overflow:hidden; isolation:isolate;
  border-radius:15px; container-type:inline-size;
  background:linear-gradient(180deg, #1d1a16 0%, #12110f 100%);           /* quiet until the game's art arrives */
}
.gamecard__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 900ms var(--ease), scale 1400ms var(--ease); }
.gamecard__canvas.is-live{ opacity:1; }
.gamecard__canvas.is-fallback{ display:none; }
.gamecard__media::after{
  content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgb(4 3 5 / .42) 0%, transparent 26%, transparent 52%, rgb(4 3 5 / .78) 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07);
}
.gamecard__index{
  position:absolute; z-index:2; left:4.6cqi; top:4.2cqi;
  display:inline-flex; align-items:center; gap:1.8cqi;
  font-size:max(.625rem, 2.5cqi); font-weight:700; font-stretch:125%; letter-spacing:.2em; color:rgb(255 247 239 / .78);
  font-variant-numeric:tabular-nums;
}
.gamecard__index::after{ content:""; width:5cqi; height:1px; background:currentColor; opacity:.55; }
.gamecard__flag{
  position:absolute; z-index:2; right:4cqi; top:3.4cqi;
  display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px 0 8px; border-radius:999px;
  background:rgb(5 4 6 / .6); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .1);
  font-size:.5625rem; font-weight:700; font-stretch:120%; letter-spacing:.16em; text-transform:uppercase; color:#fff7ef;
}
.gamecard__flag i{ width:6px; height:6px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgb(70 211 154 / .2); }
.gamecard__lockup{ position:absolute; z-index:2; left:4.6cqi; bottom:4.4cqi; display:flex; flex-direction:column; pointer-events:none; }
.gamecard__logo{
  font-size:11.5cqi; font-weight:700; font-stretch:125%; letter-spacing:.035em; line-height:.86; text-transform:uppercase;
  color:#fff7ef; text-shadow:0 2px 30px rgb(255 110 40 / .35);
}
.gamecard__tag{ margin-top:1.9cqi; font-size:max(.5625rem, 2.45cqi); font-weight:600; font-stretch:120%; letter-spacing:.3em; text-transform:uppercase; color:#ffc9a3; white-space:nowrap; }
.gamecard__line{ position:absolute; z-index:2; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform-origin:0 50%; scale:0 1; transition:scale 800ms var(--ease); }

.gamecard__body{ padding:16px 10px 8px; }
.gamecard__kicker{ font-size:.625rem; font-weight:700; font-stretch:125%; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.gamecard__title{ margin-top:7px; font-size:clamp(1.0625rem,.96rem + .3vw,1.25rem); font-weight:700; letter-spacing:-.012em; line-height:1.2; }
.gamecard__title a{ background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size 450ms var(--ease); }
.gamecard__title a:focus-visible{ outline-offset:4px; }
.gamecard__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:6px; font-size:.8125rem; color:var(--text-2); }
.gamecard__meta i{ width:3px; height:3px; border-radius:50%; background:var(--text-3); }
.gamecard__actions{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; margin-top:16px; }
.gc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 14px;
  border-radius:11px; background:#1a2433; color:var(--text);
  box-shadow:inset 0 0 0 1px rgb(196 214 255 / .08);
  font-size:.75rem; font-weight:700; font-stretch:112%; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  transition:background-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui), scale 140ms var(--ease-ui);
}
.gc-btn .icon{ font-size:1rem; transition:translate 260ms var(--ease); }
.gc-btn--primary{ background:var(--text); color:var(--ink-1); box-shadow:none; }
.gc-btn--icon{ width:44px; padding:0; }
/* narrow cards: Steam keeps its name for screen readers, shows its icon */
@media (max-width:479.98px){
  .gamecard__actions{ grid-template-columns:minmax(0,1fr) auto auto; }
  .gamecard__actions .gc-btn:not(.gc-btn--primary){ width:44px; padding:0; }
  .gc-btn__text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
.gc-btn:active{ scale:.97; }
@media (hover:hover){
  .gamecard:hover{ translate:0 -5px; }
  .gamecard:hover::after{ opacity:1; }
  .gamecard:hover .gamecard__line{ scale:1 1; }
  .gamecard:hover .gamecard__canvas{ scale:1.035; }
  .gamecard__title a:hover{ background-size:100% 1px; }
  .gc-btn:hover{ background:var(--signal-strong); color:#fff; }
  .gc-btn--primary:hover .icon{ translate:3px 0; }
}

@media (min-width:900px){
  .gamecard{
    --gc-w:clamp(300px, min(27vw, 56svh - 70px), 420px);
    position:absolute; right:0; top:51%; margin:0; transform:translateY(-50%);
  }
}

/* ── the games showcase ───────────────────────────────────────── */
.showcase{ position:relative; z-index:2; width:min(100% - 2 * var(--g), var(--max)); margin-inline:auto; }
.screen{
  position:relative; aspect-ratio:4 / 5; overflow:hidden; isolation:isolate;
  border-radius:var(--r-xl); background:#060304;
  box-shadow:0 0 0 1px var(--line), 0 60px 140px -60px #000;
}
.screen::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06); }
@media (min-width:600px){ .screen{ aspect-ratio:16 / 10; } }
@media (min-width:900px){
  .screen{ aspect-ratio:auto; height:clamp(560px,84svh,940px); }
  .screen::before{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(90deg, rgb(5 4 6 / .82) 0%, rgb(5 4 6 / .45) 34%, transparent 58%),
      linear-gradient(0deg, rgb(5 4 6 / .6) 0%, transparent 42%);
  }
}

.feature{ position:relative; z-index:4; padding:clamp(24px,5vw,36px) 2px 0; }
.feature__kicker{ display:flex; align-items:center; gap:12px; margin-bottom:18px; color:var(--text-2); }
.feature__kicker::before{ content:""; width:28px; height:1px; background:#ff8a4c; }
.feature__kicker span{ color:var(--text-3); font-variant-numeric:tabular-nums; }
.feature__status{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.feature__platform{ display:inline-flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:560; font-stretch:110%; color:var(--text-2); }
.feature__platform .icon{ font-size:14px; color:var(--text-3); }
.feature__title{ display:flex; flex-direction:column; margin-top:clamp(14px,2svh,22px); }
.feature__name{
  font-size:clamp(3.5rem,2rem + 6vw,7.5rem); font-weight:640; font-stretch:112%;
  letter-spacing:-.045em; line-height:.86;
}
.feature__sub{
  margin-top:clamp(10px,1.4svh,16px);
  font-size:.8125rem; font-weight:600; font-stretch:125%; letter-spacing:.28em; text-transform:uppercase; color:#ffcfae;
}
.feature__desc{ margin-top:clamp(16px,2.4svh,24px); max-width:44ch; font-size:var(--fs-lead); line-height:1.55; color:var(--text-2); }
.feature__facts{ display:flex; flex-wrap:wrap; gap:10px clamp(20px,2.6vw,40px); margin-top:clamp(16px,2.4svh,24px); }
.feature__facts div{ display:flex; flex-direction:column; gap:2px; }
.feature__facts dt{ font-size:.625rem; font-weight:600; font-stretch:125%; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); }
.feature__facts dd{ font-size:.9375rem; font-weight:560; }
.feature__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:clamp(20px,3.4svh,34px); }

.trailer{ gap:12px; padding-left:8px; }
.trailer__play{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--text); color:var(--ink-1); transition:background-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui), scale 300ms var(--ease);
}
.trailer__play .icon{ font-size:13px; translate:1px 0; }
.trailer__t{ color:var(--text-3); font-weight:500; font-variant-numeric:tabular-nums; }
@media (hover:hover){
  .trailer:hover .trailer__play{ background:var(--signal-strong); color:#fff; scale:1.06; }
}

@media (min-width:900px){
  .feature{
    position:absolute; left:0; top:0; bottom:0; width:min(52%,700px);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:clamp(28px,3.6vw,64px);
  }
}

.cue{ display:none; }
.arrival__end{ position:absolute; left:0; top:0; width:1px; height:1px; pointer-events:none; }

/* ── 01 · the pinned arrival (wide screens, motion allowed) ─────── */
.pin .arrival{ --travel:100svh; height:calc(100svh + var(--travel)); }
.pin .arrival__end{ top:var(--travel); height:100svh; scroll-margin-top:calc(var(--header-h) * -1); }
.pin .arrival__pin{ position:sticky; top:0; height:100svh; overflow:clip; }
.pin .sky{ inset:0; height:auto; opacity:calc(1 - var(--p) * .5); }
.pin .intro{
  position:absolute; left:var(--g); right:var(--g); top:0; bottom:0; width:auto; min-height:0; margin:0;
  padding:var(--header-h) 0 clamp(72px,12svh,140px);
}
/* The words rise away; the card holds still and hands over to the
   game's art, which opens out of the card's own window (see .screen). */
.pin .intro > :not(.gamecard){
  opacity:clamp(0, 1 - var(--p) * 2.6, 1);
  translate:0 calc(var(--p) * -9svh);
}
.pin .intro .gamecard{ opacity:clamp(0, 1 - var(--p) * 9, 1); }
.js.pin .intro .gamecard.e{ animation:none; }
/* The handoff is measured from the resting card. A positional entrance
   or hover zoom would move its source pixels after that measurement. */
.pin .intro .gamecard[data-game="eldara"] .gamecard__painting{ scale:1; transition:none; }
.pin .arrival[data-card="off"] .gamecard{ visibility:hidden; pointer-events:none; }
.pin .intro__title{ font-size:min(var(--fs-display), 5.6vw, 11.5svh); }
.pin .intro__lede{ font-size:min(var(--fs-lead), 2.9svh); }

/* The matte: everything outside the frame goes to ink as the game's
   world takes over, so the scene ends up framed like a window. */
.pin .matte{
  --m:clamp(0, (var(--p) - .3) * 1.9, 1);
  display:block; position:absolute; z-index:1; pointer-events:none;
  left:var(--g); right:var(--g); top:calc(var(--header-h) + 4px); bottom:var(--g);
  border-radius:var(--r-xl);
  box-shadow:0 0 0 150vmax var(--ink-1), inset 0 0 0 1px rgb(232 214 180 / .14);
  opacity:var(--m);
  transform:scale(calc(1 + (1 - var(--m)) * .09));
}
.pin .showcase{
  position:absolute; left:var(--g); right:var(--g); top:calc(var(--header-h) + 4px); bottom:var(--g);
  width:auto; margin:0;
}
/* The game's art is never faded in over the light: it is opaque, and
   shown through a window that grows from the card's art (--rt…--rl,
   measured in pages/home.js) to the whole frame as --rv runs 0 → 1. */
.pin .screen{
  display:block; position:absolute; inset:0; height:auto; aspect-ratio:auto;
  clip-path:inset(
    calc(var(--rt,40%) * (1 - var(--rv,0))) calc(var(--rr,4%) * (1 - var(--rv,0)))
    calc(var(--rb,30%) * (1 - var(--rv,0))) calc(var(--rl,62%) * (1 - var(--rv,0)))
    round calc(15px + (var(--r-xl) - 15px) * var(--rv,0)));
}
.pin .showcase[data-game="eldara"] .screen__painting{
  inset:auto; left:0; top:0;
  width:var(--image-w,100%); height:var(--image-h,100%); max-width:none;
  object-fit:fill;
  transform-origin:0 0;
  transform:
    translate(
      calc(var(--image-x-start,0px) * (1 - var(--rv,0)) + var(--image-x-end,0px) * var(--rv,0)),
      calc(var(--image-y-start,0px) * (1 - var(--rv,0)) + var(--image-y-end,0px) * var(--rv,0)))
    scale(calc(var(--fs,1) + (1 - var(--fs,1)) * var(--rv,0)));
}
.pin .screen::before{
  /* The text shade arrives with the detail panel, once the painting has
     opened. Static layouts keep the original full-strength shade. */
  opacity:clamp(0, (var(--p) - .35) * 2.5, 1);
}
.pin .feature :is(.feature__kicker,.feature__status,.feature__title,.feature__desc,.feature__facts,.feature__actions){
  --k:clamp(0, (var(--p) - var(--s,.5)) * 6, 1);
  opacity:var(--k);
  translate:0 calc((1 - var(--k)) * 30px);
}
.pin .arrival:not([data-panel="on"]) .feature{ pointer-events:none; }
.pin .arrival[data-intro="off"] .intro{ pointer-events:none; }

.pin .cue{
  display:flex; align-items:center; gap:12px;
  position:absolute; z-index:3; right:var(--g); bottom:clamp(18px,3.4svh,36px);
  padding:6px 0; opacity:clamp(0, 1 - var(--p) * 10, 1);
}
.cue__line{ position:relative; width:1px; height:34px; overflow:hidden; background:var(--line-2); }
.cue__line::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:40%;
  background:var(--signal-hi); translate:0 -100%;
  animation:cue 2.4s var(--ease-io) 1.6s infinite;
}
.cue__k{ font-size:.625rem; font-weight:600; font-stretch:125%; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); }
@keyframes cue{ 0%{ translate:0 -100%; } 70%,100%{ translate:0 260%; } }

/* ── the arrival sequence ─────────────────────────────────────────
   The light is there from the first frame and the canvas fades up
   over its drawn fallback; the header resolves; the headline rises
   through its mask line by line; the rest follows on one stagger.
   Backwards fill only, so nothing is held once the sequence ends. */
@media (prefers-reduced-motion:no-preference){
  .js .hdr__bar{ animation:hdr-in 700ms var(--ease) 80ms backwards; }
  .js .intro .e{ animation:rise var(--t-enter) var(--ease) calc(320ms + var(--i,0) * var(--stagger)) backwards; }
  .js .intro__title .line > span{ animation:line-up 1050ms var(--ease) calc(240ms + var(--i,0) * 110ms) backwards; }
  .js .sky{ animation:sky-in 1800ms var(--ease) backwards; }
  .js .cue > *{ animation:rise 800ms var(--ease) 1150ms backwards; }
}
@keyframes hdr-in{ from{ opacity:0; translate:0 -14px; } }
@keyframes rise{ from{ opacity:0; translate:0 22px; } }
@keyframes line-up{ from{ translate:0 110%; } }
@keyframes sky-in{ from{ opacity:0; scale:1.04; } }

/* ── 02 · studio ───────────────────────────────────────────────── */
.studio{ padding:var(--section) 0; background:var(--ink-1); }
.studio__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,112px); align-items:center; }

/* The studio's mark at full size: a dial of ticks, the ring, the
   horizon, and the sun that rises as the section scrolls in (--s). */
.ident{
  position:relative; width:100%; max-width:600px; aspect-ratio:1; justify-self:center;
  border-radius:var(--r-xl); overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 60%, rgb(165 132 90 / .09), transparent 72%),
    linear-gradient(180deg, #13120f, #0a0a09);
  box-shadow:0 0 0 1px var(--line);
}
.ident__svg{ display:block; width:100%; height:100%; overflow:visible; }
.ident__ticks line{ stroke:rgb(196 214 255 / .2); stroke-width:1; }
.ident__ticks line.major{ stroke:rgb(196 214 255 / .45); }
.ident__ring{ fill:none; stroke:var(--text); stroke-width:2.5; stroke-dasharray:1; stroke-dashoffset:0; }
.ident__line{ stroke:var(--text); stroke-width:2.5; stroke-linecap:round; transform-box:view-box; transform-origin:200px 236px; }
.ident__sun{ fill:url(#ident-sun-fill); transform:translateY(calc((1 - var(--s,1)) * 64px)); }
.ident__sea{ opacity:var(--s,1); transform-box:view-box; transform-origin:200px 236px; transform:scaleY(calc(.2 + var(--s,1) * .8)); }
.ident__halo{ opacity:calc(.15 + var(--s,1) * .85); }
.ident__cap{
  position:absolute; left:clamp(16px,2vw,24px); right:clamp(16px,2vw,24px); bottom:clamp(14px,1.8vw,20px);
  display:flex; justify-content:space-between;
  font-size:.625rem; font-weight:600; font-stretch:125%; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3);
}

.studio__title{ margin-top:18px; }
.studio__copy .lead{ margin-top:22px; }
.tenets{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(20px,2.4vw,36px); margin-top:clamp(28px,3vw,40px); }
.tenets li{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:2px;
  padding:16px 0 18px; border-top:1px solid var(--line);
}
.tenets li::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--signal); transform-origin:0 50%; scale:0 1; opacity:0;
}
.tenets__n{ grid-row:span 2; padding-top:2px; font-size:.75rem; font-weight:600; color:var(--signal-hi); font-variant-numeric:tabular-nums; }
.tenets b{ font-size:.9375rem; font-weight:620; }
.tenets li > span:last-child{ font-size:.875rem; line-height:1.5; color:var(--text-3); }
@media (max-width:899.98px){
  .studio__grid{ grid-template-columns:minmax(0,1fr); }
  .ident{ max-width:440px; }
}
@media (max-width:520px){ .tenets{ grid-template-columns:minmax(0,1fr); } }

/* ── 03 · community ───────────────────────────────────────────── */
.community{ padding:0 0 var(--section); }
.community__frame{
  position:relative; isolation:isolate; overflow:hidden;
  width:min(100% - 2 * var(--g), 1760px); margin-inline:auto;
  min-height:min(860px, 100svh); display:flex; align-items:flex-end;
  border-radius:var(--r-xl); background:#12161c;
  box-shadow:0 0 0 1px var(--line);
  scale:calc(.94 + var(--c,1) * .06);
}
.community__art{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(150% 160% at 58% 108%, #090b0e 58%, rgb(230 221 205 / .7) 58.4%, rgb(95 111 134 / .3) 60%, transparent 72%),
    #12161c;
}
.community__shade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, rgb(4 4 10 / .55) 0%, transparent 45%);
}
.community__inner{
  width:100%; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end;
  gap:40px clamp(32px,5vw,96px); padding:clamp(28px,5vw,80px);
}
.community__title{ margin-top:18px; }
.community__copy .lead{ margin-top:20px; color:var(--text-2); }
.channels{ display:grid; gap:10px; max-width:500px; margin-top:clamp(24px,3vw,36px); }
.channel{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  min-height:64px; padding:12px 20px; border-radius:16px;
  border:1px solid var(--line-2); background:rgb(8 8 20 / .55);
  transition:border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui), scale 140ms var(--ease-ui);
}
.channel:active{ scale:.985; }
.channel > .icon:first-child{ font-size:22px; }
.channel b{ display:block; font-weight:620; line-height:1.25; }
.channel span span{ display:block; font-size:.8125rem; color:var(--text-3); }
.channel .icon--out{ color:var(--text-2); transition:translate 260ms var(--ease), color var(--t-ui) var(--ease-ui); }
.channel--main{ background:var(--signal-strong); border-color:transparent; }
.channel--main span span,.channel--main .icon--out{ color:rgb(255 255 255 / .82); }
@media (hover:hover){
  .channel:hover{ border-color:var(--line-3); background:rgb(22 22 40 / .8); }
  .channel--main:hover{ background:#3a77f0; border-color:transparent; }
  .channel:hover .icon--out{ translate:2px -2px; color:var(--text); }
}

.letter{
  padding:clamp(24px,3vw,40px); border-radius:22px;
  background:rgb(6 6 16 / .72); border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
}
.letter__title{ font-size:var(--fs-h3); font-weight:640; letter-spacing:-.02em; line-height:1.15; }
.letter__lead{ margin-top:8px; font-size:.9375rem; color:var(--text-2); }
.newsletter{ position:relative; margin-top:22px; }
.newsletter__label{ display:block; margin-bottom:8px; font-size:.8125rem; font-weight:560; color:var(--text-2); }
.newsletter__row{
  display:flex; gap:6px; padding:5px; border-radius:999px;
  border:1px solid var(--line-3); background:rgb(4 4 10 / .6);
  transition:border-color var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui);
}
.newsletter__row:focus-within{ border-color:var(--signal); box-shadow:0 0 0 4px rgb(77 141 255 / .22); }
.newsletter__input{ flex:1; min-width:0; height:44px; padding:0 14px; border:0; background:transparent; outline:none; font-size:1rem; }
.newsletter__input::placeholder{ color:var(--text-3); }
.newsletter .btn{ --bh:44px; }
.newsletter__status{ min-height:1.5em; margin-top:10px; font-size:.875rem; color:var(--signal-hi); }
.newsletter.is-error .newsletter__status{ color:#ff9a8f; }
.newsletter__fine{ font-size:.75rem; color:var(--text-3); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

@media (max-width:899.98px){
  .community__frame{ min-height:0; display:block; }
  .community__art{ inset:0 0 auto; height:min(440px,62svh); }
  .community__shade{ background:linear-gradient(0deg, #12161c 0%, rgb(18 22 28 / .9) 40%, rgb(18 22 28 / .1) 75%); }
  .community__inner{ grid-template-columns:minmax(0,1fr); padding:clamp(150px,30svh,240px) 20px 20px; }
}

/* ── section entrances ────────────────────────────────────────────
   home.js adds .can-enter once it is watching, and .is-in to each
   [data-enter] group as it arrives. Without JS nothing is hidden. */
@media (prefers-reduced-motion:no-preference){
  .can-enter [data-enter]:not(.is-in) .e{ opacity:0; translate:0 28px; }
  .can-enter [data-enter] .e{
    transition:opacity 700ms var(--ease) calc(var(--i,0) * var(--stagger)),
               translate 1000ms var(--ease) calc(var(--i,0) * var(--stagger));
  }
  .can-enter [data-enter]:not(.is-in) .line > span{ translate:0 110%; }
  .can-enter [data-enter] .line > span{ transition:translate 1100ms var(--ease) calc(var(--i,0) * 100ms); }

  /* the mark draws itself: ticks, then the ring, then the horizon */
  .can-enter .ident:not(.is-in) .ident__ticks line{ opacity:0; }
  .can-enter .ident .ident__ticks line{ transition:opacity 500ms var(--ease) calc(var(--k,0) * 8ms); }
  .can-enter .ident:not(.is-in) .ident__ring{ stroke-dashoffset:1; }
  .can-enter .ident .ident__ring{ transition:stroke-dashoffset 1600ms var(--ease-io) 150ms; }
  .can-enter .ident:not(.is-in) .ident__line{ scale:0 1; }
  .can-enter .ident .ident__line{ transition:scale 1100ms var(--ease) 900ms; }

  /* tenet rules draw in signal blue, then settle into hairlines */
  .is-in .tenets li::before{ animation:rule 1400ms var(--ease) calc(var(--i,0) * var(--stagger) + 200ms) both; }
}
@keyframes rule{ 0%{ scale:0 1; opacity:1; } 55%{ scale:1 1; opacity:1; } 100%{ scale:1 1; opacity:0; } }