/* ==========================================================================
   24K Studios — design tokens
   Dark, gold-accented. Gold is accent and edge, never fill.
   ========================================================================== */

@font-face{font-family:Archivo;src:url(../fonts/archivo-700.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/archivo-600.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  /* surfaces */
  --k24-base:#0A0A0B;        /* near-black, not pure — pure black crushes photo shadows */
  --k24-surface-1:#141416;
  --k24-surface-2:#1C1C1F;
  --k24-hairline:#2A2A2E;

  /* text */
  --k24-text:#F5F5F4;
  --k24-text-muted:#A3A3A8;

  /* accent */
  --k24-gold:#C9A227;
  --k24-gold-hi:#E8C55A;
  --k24-gold-dim:#8A6F1A;

  /* state */
  --k24-success:#3FB950;
  --k24-danger:#F85149;

  /* type */
  --k24-font-display:Archivo,'Helvetica Neue',Arial,sans-serif;
  --k24-font-body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --k24-h1:clamp(2.5rem,6vw,4.5rem);
  --k24-h2:clamp(1.9rem,4vw,3rem);
  --k24-h3:clamp(1.4rem,2.5vw,2rem);
  --k24-body:1.0625rem;
  --k24-lh-display:1.1;
  --k24-lh-body:1.6;
  --k24-measure:68ch;

  /* 8px spacing grid */
  --k24-s1:8px; --k24-s2:16px; --k24-s3:24px; --k24-s4:32px;
  --k24-s5:48px; --k24-s6:64px; --k24-s7:96px; --k24-s8:128px;
  --k24-section:clamp(64px,8vw,128px);

  /* layout */
  --k24-container:1200px;
  --k24-prose:720px;
  --k24-radius:4px;

  /* the hero scrim — caption/CTA clears contrast regardless of the photo behind it */
  --k24-scrim:linear-gradient(180deg,rgba(10,10,11,0) 40%,rgba(10,10,11,.85) 100%);
}

/* ---------- base ---------- */
body{
  background:var(--k24-base);
  color:var(--k24-text);
  font-family:var(--k24-font-body);
  font-size:var(--k24-body);
  line-height:var(--k24-lh-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.k24-display{
  font-family:var(--k24-font-display);
  font-weight:700;
  line-height:var(--k24-lh-display);
  letter-spacing:-.02em;
  color:var(--k24-text);
}
h1{font-size:var(--k24-h1)}
h2{font-size:var(--k24-h2)}
h3{font-size:var(--k24-h3);font-weight:600}
p,li{max-width:var(--k24-measure)}
a{color:var(--k24-gold);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--k24-gold-hi)}

/* Focus ring must clear 3:1 against every surface it can land on. */
:focus-visible{outline:2px solid var(--k24-gold-hi);outline-offset:2px;border-radius:2px}

/* Explicit aspect-ratio + dimensions: the single largest CLS lever here. */
img,video{max-width:100%;height:auto}

hr{border:0;border-top:1px solid var(--k24-hairline);margin:var(--k24-s5) 0}
::selection{background:var(--k24-gold);color:var(--k24-base)}

/* Motion budget: compositor-only properties, and honour reduced-motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}