/* The AI Survival Guide: foundation tokens.
   Taken from the Hedging Against AI design system (YouTube_Revamp/design-system):
   the field map. Deep forest and warm paper grounds, cream and ink text, one
   gold focal element per frame, sage contour lines for decoration only.
   Fonts: Anton (display), Archivo (body), Permanent Marker (handwritten notes). */

:root{
  /* brand constants */
  --forest-deep:#14261C;
  --forest:#1B3326;
  --gold-rich:#C9A23A;   /* accent on dark grounds */
  --gold-deep:#A07A12;   /* accent on paper; text only at 24px and up */
  --paper:#F2EEE6;
  --paper-raised:#E8E2D5;
  --cream:#EDE6D6;
  --ink-black:#151515;
  --sage:#6F8A7A;

  --font-display:Anton,"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --font-hand:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;
  --font-body:Archivo,"Helvetica Neue",Arial,sans-serif;

  /* paper theme (the default ground) */
  --surface:var(--paper);
  --surface-raised:var(--paper-raised);
  --ink:var(--ink-black);
  --ink-muted:#4F5A52;
  --contour:#B8BFB3;      /* lines, grids, hairlines; never text */
  --accent:var(--gold-deep);
  --on-accent:var(--ink-black);
  --field:#FBF9F4;        /* form fields on paper */
  --field-border:#4F5A52;

  /* spacing: 8px steps */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
  --space-8:128px;

  /* the system is square: rounding is for route dots and markers only */
  --radius-none:0;
  --radius-sm:2px;
  --radius-round:50%;

  --container:1200px;
  --gutter:48px;
  --measure:640px;

  /* type scale (desktop; mobile overrides below) */
  --display-xl:116px;
  --display-l:72px;
  --h1:46px;
  --h2:34px;
  --h3:24px;
  --body-lg:19px;
  --body:17px;
  --small:15px;
  --caption:13px;
  --eyebrow:12px;
  --hand-l:30px;
  --hand-m:21px;
}

/* forest theme: news, banner, end screens. Swap any section into it. */
.theme-forest{
  --surface:var(--forest-deep);
  --surface-raised:var(--forest);
  --ink:var(--cream);
  --ink-muted:#BFCBC2;
  --contour:var(--sage);
  --accent:var(--gold-rich);
  --on-accent:var(--forest-deep);
  --field:var(--paper);
  --field-border:transparent;
  background:var(--surface);
  color:var(--ink);
}

@media (max-width:1024px){
  :root{--display-xl:88px;--display-l:60px;--h1:40px}
}
@media (max-width:720px){
  :root{
    --gutter:20px;
    --display-xl:58px;
    --display-l:44px;
    --h1:32px;
    --h2:28px;
    --h3:22px;
    --body-lg:18px;
    --body:16px;
    --small:14px;
    --caption:12px;
    --eyebrow:11px;
    --hand-l:24px;
    --hand-m:19px;
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-body);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{text-decoration-color:currentColor}
::selection{background:var(--gold-rich);color:var(--forest-deep)}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.container{width:100%;max-width:calc(var(--container) + var(--gutter) * 2);margin:0 auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- type ---------- */
.display-xl,.display-l,.h1,.h2,.h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;color:var(--ink)}
.display-xl{font-size:var(--display-xl);line-height:.92;letter-spacing:1px}
.display-l{font-size:var(--display-l);line-height:.95;letter-spacing:1px}
.h1{font-size:var(--h1);line-height:1.02;letter-spacing:.5px}
.h2{font-size:var(--h2);line-height:1.05;letter-spacing:.5px}
.h3{font-size:var(--h3);line-height:1.1;letter-spacing:.3px}
.body-lg{font-size:var(--body-lg);line-height:1.6}
.small{font-size:var(--small);line-height:1.55}
.muted{color:var(--ink-muted)}
.caption{font-size:var(--caption);line-height:1.4;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted)}
.eyebrow{font-family:var(--font-body);font-size:var(--eyebrow);line-height:1;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hand{font-family:var(--font-hand);font-weight:400;text-transform:lowercase;color:var(--ink-muted);letter-spacing:.01em}
.hand-l{font-size:var(--hand-l);line-height:1.2}
.hand-m{font-size:var(--hand-m);line-height:1.25}