/* Golden Geese — design tokens */
/* Golden Geese — color tokens.
   Monochrome system with one licensed exception: the logo mark carries a
   warm amber→crimson gradient. Everything else stays achromatic. */

:root {
  /* ---- Base scale (named values from the brand identity doc) ---- */
  --gg-ink:      #0A0A0B; /* Ink — primary dark */
  --gg-paper:    #FAFAFA; /* Paper — primary light */
  --gg-mist:     #B8B8BE; /* Mist */
  --gg-graphite: #6E6E76; /* Graphite */
  --gg-slate:    #26262B; /* Slate */

  /* ---- Extended grays (derived from brand-in-use mockups) ---- */
  --gg-void:    #060609;
  --gg-carbon:  #0E0E10;
  --gg-coal:    #111114;
  --gg-onyx:    #161619;
  --gg-steel:   #8A8A90;
  --gg-silver:  #8A8A90;
  --gg-stone:   #9A9AA0;
  --gg-fog:     #E4E4E8;

  /* ---- Semantic — dark-first ---- */
  --bg-page:         var(--gg-ink);
  --surface-card:    var(--gg-carbon);
  --surface-sunken:  var(--gg-coal);
  --surface-raised:  var(--gg-onyx);
  --surface-active:  var(--gg-slate);
  --surface-inverse: var(--gg-paper);

  --text-primary:    var(--gg-paper);
  --text-secondary:  var(--gg-stone);
  --text-tertiary:   var(--gg-silver);
  --text-faint:      var(--gg-graphite);
  --text-on-inverse: var(--gg-ink);

  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.12);
  --border-emphasis: rgba(255, 255, 255, 0.20);

  /* ---- Brand warm signature (MARK ONLY) ----
     The single warm accent, reserved for the logo orbit ring. Do not use
     as a UI accent (buttons, links, focus) — the interface stays monochrome. */
  --gg-amber:   #E8A03D;
  --gg-crimson: #E0524E;
  --brand-gradient: linear-gradient(180deg, var(--gg-amber), var(--gg-crimson));

  /* Paper is the UI accent — primary actions are paper-on-ink. */
  --accent:       var(--gg-paper);
  --accent-hover: var(--gg-fog);
}

/* Golden Geese — typography tokens.
   Space Grotesk (display + UI), JetBrains Mono (technical / data / labels). */

:root {
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Scale (values lifted from the brand identity doc) ---- */
  --text-display:  clamp(40px, 6vw, 84px);   /* page-level display */
  --text-headline: clamp(30px, 4.2vw, 56px); /* section headline */
  --text-title:    19px;                     /* card / block title */
  --text-stat:     26px;                     /* dashboard stat */
  --text-body:     14.5px;
  --text-body-sm:  13px;
  --text-label:    11px;                     /* mono kicker */
  --text-label-sm: 10px;                     /* mono caption */
  --text-label-xs: 9.5px;                    /* mono micro-caption */

  /* ---- Letter-spacing ---- */
  --ls-display:  -0.03em;
  --ls-headline: -0.02em;
  --ls-title:    -0.01em;
  --ls-label:     0.28em; /* section kickers */
  --ls-label-md:  0.18em;
  --ls-label-sm:  0.16em; /* captions */
  --ls-wordmark:  0.13em; /* GOLDEN GEESE wordmark */

  /* ---- Line-height ---- */
  --lh-display:  0.98; /* @kind other */
  --lh-headline: 1.05; /* @kind other */
  --lh-body:     1.6;  /* @kind other */
  --lh-mono:     1.7;  /* @kind other */

  /* ---- Weights (Space Grotesk 400–700; wordmark sits at 500) ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
}

/* Golden Geese — spacing, radius, shadow, motion tokens. */

:root {
  /* ---- Spacing ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-16: 64px;
  --space-24: 96px;
  --page-margin: 8vw; /* section side padding on marketing surfaces */

  /* ---- Radii (exact values from brand-in-use mockups) ---- */
  --radius-xs:   7px;   /* sidebar nav item */
  --radius-sm:   8px;   /* small button */
  --radius-md:   10px;  /* button, input, small card */
  --radius-lg:   14px;  /* large panel / frame */
  --radius-xl:   20px;  /* app-icon tile */
  --radius-full: 999px;

  /* ---- Shadows (deep, soft — dark surfaces only) ---- */
  --shadow-card:   0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-deep:   0 20px 50px rgba(0, 0, 0, 0.6);

  /* ---- Motion (restrained: color/opacity shifts only) ---- */
  --duration: 150ms; /* @kind other */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
}

/* Golden Geese — minimal base styles. Dark-first canvas. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-primary); text-decoration: none; }
a:hover { color: var(--gg-mist); }

::selection { background: var(--gg-paper); color: var(--gg-ink); }

/* Site */
html{scroll-behavior:smooth;background:var(--bg-page);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);overflow-x:hidden}
*{-webkit-tap-highlight-color:transparent}
.cursor-ring,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:90;will-change:transform}
.gg-cursor,.gg-cursor *{cursor:none!important}
a{color:var(--text-primary);text-decoration:none}
a:hover{color:var(--gg-fog)}
button{font:inherit;color:inherit}
img,svg,canvas{max-width:100%}
::selection{background:var(--gg-paper);color:var(--gg-ink)}
:focus-visible{outline:2px solid var(--gg-paper);outline-offset:4px;border-radius:2px}
::-webkit-scrollbar{width:9px}::-webkit-scrollbar-track{background:var(--gg-void)}::-webkit-scrollbar-thumb{background:var(--gg-slate)}
.mast{transition:background 300ms var(--ease),border-color 300ms var(--ease);border-bottom:1px solid transparent}.mast.stuck{background:rgba(14,14,17,0.5);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);border-bottom-color:rgba(255,255,255,0.07)}.lite .mast.stuck{background:rgba(250,250,250,0.45);border-bottom-color:rgba(10,10,11,0.07)}.mast.stuck::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(240px 70px at var(--mx,50%) 0%,rgba(255,255,255,0.1),transparent 70%)}.lite .mast.stuck::before{background:radial-gradient(240px 70px at var(--mx,50%) 0%,rgba(255,255,255,0.65),transparent 70%)}
/* Liquid-glass — kept for the dock + mobile menu. */
.glass{position:relative;background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02)) padding-box,rgba(16,16,20,0.44);backdrop-filter:blur(30px) saturate(185%);-webkit-backdrop-filter:blur(30px) saturate(185%);border:1px solid rgba(255,255,255,0.12);border-top-color:rgba(255,255,255,0.24);box-shadow:0 14px 36px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.09);transition:background 300ms var(--ease),box-shadow 300ms var(--ease)}
.lite .glass{background:linear-gradient(180deg,rgba(255,255,255,0.62),rgba(255,255,255,0.28)) padding-box,rgba(250,250,250,0.4);border:1px solid rgba(10,10,11,0.09);border-top-color:rgba(255,255,255,0.95);box-shadow:0 14px 36px rgba(10,10,11,0.1),inset 0 1px 0 rgba(255,255,255,0.8)}
.mark-light{display:none!important}.lite .mark-light{display:block!important}.lite .mark-dark{display:none!important}
@keyframes gg-in{from{opacity:0;transform:translate3d(0,7px,0)}to{opacity:1;transform:none}}
@keyframes gg-pulse{0%,100%{opacity:1}50%{opacity:0.25}}
.lite{--bg-page:#FAFAFA;--surface-card:#FFFFFF;--surface-sunken:#F1F1F3;--surface-active:#E7E7EA;--text-primary:#0A0A0B;--text-secondary:#44444B;--text-tertiary:#5C5C64;--text-faint:#6E6E76;--gg-steel:#6E6E76;--gg-mist:#44444B;--gg-slate:#DADADE;--gg-fog:#3A3A40;--ink-line:#0A0A0B;--grid-line:rgba(10,10,11,0.06);--scrim:rgba(250,250,250,0.9);--orbit-ghost:#DEDEE2;--gg-paper:#0A0A0B;--gg-ink:#FAFAFA;--gg-onyx:#EFEFF2;--accent:#0A0A0B;--accent-hover:#2A2A30;--text-on-inverse:#FAFAFA;--border-hairline:rgba(10,10,11,0.10);--border-default:rgba(10,10,11,0.15);--border-emphasis:rgba(10,10,11,0.25);--gg-void:#FFFFFF;--gg-carbon:#FFFFFF;--gg-coal:#F1F1F3;--gg-graphite:#6E6E76;--gg-silver:#5C5C64;--gg-stone:#44444B;--surface-raised:#EFEFF2;--surface-inverse:#0A0A0B;--border-strong:rgba(10,10,11,0.18);--shadow-card:0 14px 34px rgba(10,10,11,0.10);--shadow-raised:0 12px 40px rgba(10,10,11,0.10);--shadow-deep:0 20px 50px rgba(10,10,11,0.14);background:var(--bg-page)!important;color:var(--text-primary)}
:root{--ink-line:#FAFAFA;--grid-line:rgba(255,255,255,0.035);--scrim:rgba(10,10,11,0.78);--orbit-ghost:#26262B;--page-margin:clamp(20px,6.5vw,116px)}
.page{padding-left:0}
.m-rail{display:none}
@media (min-width:1101px){.page{padding-left:34px}}
@media (max-width:1100px){.spine{display:none!important}.m-rail{display:block}}
/* The drawing grid thins out rather than crowding a phone screen. */
@media (max-width:900px){.colfield{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:480px){.colfield{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:720px){.sound-toggle{right:auto!important;left:14px!important;bottom:14px!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:1ms!important;animation-duration:1ms!important}}
html.boot-lite,html.boot-lite body{background:#FAFAFA}
.seq-aperture{scrollbar-width:none;-ms-overflow-style:none}
.seq-aperture::-webkit-scrollbar{width:0;height:0}
.seq-aperture:focus-visible{outline:2px solid var(--text-primary);outline-offset:6px}