/* ════════════════════════════════════════════════════════════════
   ELDARA GAMES — STUDIO FRAME
   The studio's own identity, independent of any one game: warm paper,
   ink, one vermilion signal, and Archivo set wide. Studio pages put
   data-frame="studio" on <html>, which re-points the shared tokens so
   every core component follows. Each game keeps its own look inside
   its [data-theme] island. Game pages load this file too, for the
   brand mark and the Archivo face only.
   ════════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(/assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap;
  src:url(/assets/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── tokens ──────────────────────────────────────────────────────── */
:root{
  --paper:#efebe4; --paper-2:#e5e0d6; --paper-3:#d8d2c6;
  --ink:#141210; --ink-2:#46423c; --ink-3:#6a655d;
  --signal:#ff4f2e;            /* the studio's vermilion: fields, marks, large type */
  --signal-deep:#bf3219;       /* the same hue at text contrast on paper (4.8:1) */
  --font-studio:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease-studio:cubic-bezier(.22,1,.36,1);
}

:root[data-frame="studio"]{
  color-scheme:light;
  --s-bg:var(--paper); --s-bg-2:var(--paper-2); --s-surface:#f5f2ec; --s-surface-2:var(--paper-2); --s-surface-3:var(--paper-3);
  --s-line:rgb(20 18 16 / .12); --s-line-2:rgb(20 18 16 / .22); --s-line-3:rgb(20 18 16 / .45);
  --s-ink:var(--ink); --s-ink-2:var(--ink-2); --s-ink-3:var(--ink-3);
  --s-mark:var(--ink); --s-lumen:var(--signal); --s-hair:var(--ink-3);
  --s-signal:var(--signal-deep); --s-signal-ink:#fff; --s-signal-dim:rgb(255 79 46 / .14);
  --s-status-out:#1f8f4e; --s-status-ea:#b07a12; --s-status-dev:#5b4bd6; --s-status-ann:var(--ink); --s-status-tba:var(--ink-3);
  --s-ok:#1f8f4e; --s-danger:#c42b12; --s-focus:var(--ink);
  --s-font-sans:var(--font-studio); --s-font-display:var(--font-studio); --s-font-mono:var(--font-studio);

  --t-label-weight:600; --t-label-track:.04em;
  --t-display-weight:800; --t-display-lh:.92; --t-display-track:-.035em;
  --t-btn-radius:var(--r-pill);
  --t-btn:var(--ink); --t-btn-border:var(--ink); --t-on-accent:var(--paper); --t-accent-hi:var(--signal);
  --t-vignette:0; --t-grain:.07; --t-cursor:transparent;
  --header-ink:var(--ink);
}

/* Dark islands inside the studio frame (the footer, inverted header). */
.on-ink,
:root[data-frame="studio"] .site-footer{
  --t-bg:var(--ink); --t-bg-2:#1c1a17; --t-surface:#1c1a17;
  --t-ink:var(--paper); --t-ink-2:rgb(239 235 228 / .72); --t-ink-3:rgb(239 235 228 / .52);
  --t-line:rgb(239 235 228 / .12); --t-line-2:rgb(239 235 228 / .24); --t-line-3:rgb(239 235 228 / .44);
  --t-btn:var(--paper); --t-btn-border:var(--paper); --t-on-accent:var(--ink); --t-focus:var(--paper);
  color:var(--t-ink);
}

/* ── base type ───────────────────────────────────────────────────── */
:root[data-frame="studio"] body{
  font-family:var(--font-studio);
  font-size:1.0625rem;
  background:var(--paper);
  color:var(--ink);
}
:root[data-frame="studio"] body::after{ mix-blend-mode:multiply; }   /* paper grain, not film grain */
:root[data-frame="studio"] :focus-visible{ outline:2px solid var(--t-focus,var(--ink)); outline-offset:3px; }
:root[data-frame="studio"] ::selection{ background:var(--signal); color:var(--ink); }

.display{
  font-family:var(--font-studio);
  font-weight:800; font-stretch:125%;
  letter-spacing:-.04em; line-height:.9;
  text-wrap:balance;
}

/* ── brand: the E tile + wordmark ────────────────────────────────── */
.brand{
  display:inline-flex; align-items:center; gap:11px;
  min-height:44px;
  color:var(--t-ink);
}
.mark{ width:30px; height:30px; flex:none; border-radius:9px; }
.mark__tile{ fill:var(--signal); }
.mark__e{ fill:var(--paper); }
.brand__name{
  font:700 17px/1 var(--font-studio);
  font-stretch:118%;
  letter-spacing:-.015em;
  white-space:nowrap;
}
.brand--lg .mark{ width:44px; height:44px; border-radius:13px; }
.brand--lg .brand__name{ font-size:24px; }
@media (hover:hover){
  .brand .mark{ transition:rotate var(--d-4) var(--ease-spring),scale var(--d-4) var(--ease-spring); }
  .brand:hover .mark{ rotate:-8deg; scale:1.06; }
}
@media (width < 420px){ .brand__name{ font-size:15px; } }

/* ── header (studio) ─────────────────────────────────────────────── */
:root[data-frame="studio"] .site-header{ color:var(--t-ink); transition:translate var(--d-3) var(--ease-out),color var(--d-4) var(--ease-soft); }
:root[data-frame="studio"] .site-nav__list a{
  height:44px;
  font:550 15px/1 var(--font-studio);
  font-stretch:108%;
  letter-spacing:0;
  text-transform:none;
}
:root[data-frame="studio"] .site-header__actions .btn{ font-weight:650; }

/* The header takes the tone of what it sits over (home.js sets it):
   paper-on-ink over dark sections, ink-on-vermilion over the signal field. */
:root[data-frame="studio"] .site-header[data-tone="ink"]{
  --t-ink:var(--paper); --t-ink-2:rgb(239 235 228 / .72); --t-ink-3:rgb(239 235 228 / .5);
  --t-bg:var(--ink); --t-line:rgb(239 235 228 / .14);
  --t-btn:var(--paper); --t-btn-border:var(--paper); --t-on-accent:var(--ink); --t-focus:var(--paper);
  --t-signal:var(--signal);
}
:root[data-frame="studio"] .site-header[data-tone="signal"]{
  --t-bg:var(--signal); --t-line:rgb(20 18 16 / .2); --t-signal:var(--ink);
}

/* ── buttons (studio) ────────────────────────────────────────────── */
:root[data-frame="studio"] .btn{ font-family:var(--font-studio); font-stretch:110%; letter-spacing:0; }
:root[data-frame="studio"] .btn--lg{ --btn-h:56px; font-size:1.0625rem; }
@media (hover:hover){
  :root[data-frame="studio"] .btn--primary:hover{ background:var(--signal); border-color:var(--signal); color:var(--ink); }
  :root[data-frame="studio"] .btn--ghost:hover{ border-color:var(--t-ink); background:transparent; }
  :root[data-frame="studio"] .btn--text:hover{ color:var(--t-signal,var(--signal-deep)); }
}

/* Underlined text link with a sweeping fill, used across studio pages. */
.link-sweep{
  background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom:2px;
  transition:background-size var(--d-4) var(--ease-studio);
}
@media (hover:hover){ .link-sweep:hover{ background-size:0% 1px; background-position:100% 100%; } }

/* ── footer (studio) ─────────────────────────────────────────────── */
:root[data-frame="studio"] .site-footer{
  overflow:hidden;
  padding-block:clamp(72px,9vw,128px) 0;
  background:var(--ink);
}
:root[data-frame="studio"] .site-footer__top{ align-items:flex-start; }
:root[data-frame="studio"] .site-footer__tag{ font-size:clamp(1.25rem,1rem + .8vw,1.75rem); line-height:1.3; color:var(--t-ink); max-width:24ch; }
:root[data-frame="studio"] .site-footer__h{ font:650 13px/1 var(--font-studio); letter-spacing:.02em; text-transform:none; color:var(--t-ink-3); }
:root[data-frame="studio"] .site-footer__cols a{ font-size:1rem; }
:root[data-frame="studio"] .site-footer__base{ font:500 14px/1.4 var(--font-studio); letter-spacing:0; text-transform:none; }
.site-footer__giant{
  display:block;
  margin:clamp(40px,6vw,88px) auto 0;
  width:var(--wrap);
  font:800 clamp(40px,10.6vw,190px)/.78 var(--font-studio);
  font-stretch:125%;
  letter-spacing:-.05em;
  white-space:nowrap;
  color:var(--paper);
  translate:0 .1em;                 /* the baseline sits on the page edge */
  user-select:none;
}
.site-footer__giant span{ color:var(--signal); }
:root[data-frame="studio"] .site-header[data-tone="signal"] .mark__tile{ fill:var(--ink); }
:root[data-frame="studio"] .site-header[data-tone="signal"] .mark__e{ fill:var(--signal); }

/* ── brand inside a game page header ─────────────────────────────── */
.site-header--game .brand{ color:var(--t-ink); }
.site-header--game .brand__name{ font-size:15px; }
@media (width < 1280px){ .site-header--game .brand__name{ display:none; } }   /* the tile alone, beside the game's crumb */