/* ============================================================
   tokens.css — design system
   Values measured from the Figma Sites build at a 1280px
   viewport: 1168px container, 56px margins, 4 x 280px columns,
   16px gutter. Type sizes are anchored to those measurements
   and scale down fluidly below the design width.
   ============================================================ */

/* ------------------------------------------------------------
   Jeju Myeongjo is NOT served by the Google Fonts CSS API — it is an
   "early access" family, so fonts.googleapis.com returns
   "400: Font family not found" for it. Requesting it there silently
   fell back to a local Korean serif on macOS (which looks close enough
   to hide the problem) and to plain Times everywhere else.

   So it is self-hosted here: the real OFL-licensed font from Google's
   font repo, subset to the glyphs this site sets — Latin, Latin-1 for
   the Ø in RØDE, punctuation, and the two Hangul marks 현 and 규.
   9.6 MB of full Korean glyph coverage down to 14 KB.
   Licence: assets/fonts/JejuMyeongjo-OFL.txt
   ------------------------------------------------------------ */
@font-face {
  font-family: "Jeju Myeongjo";
  src: url("../assets/fonts/jeju-myeongjo-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Families --------------------------------------------- */
  --font-display: "Jeju Myeongjo", "Nanum Myeongjo", AppleMyungjo, ui-serif, Georgia, serif;
  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- Type ------------------------------------------------- */
  /* hero headline: 60px / 60px / +3px tracking at design width */
  --t-hero: clamp(2.25rem, 1.05rem + 3.75vw, 3.75rem);
  --t-hero-lh: 1;
  --t-hero-ls: 0.05em;

  /* section headings + footer links: 28px */
  --t-head: clamp(1.375rem, 1.08rem + 0.94vw, 1.75rem);

  /* header marks 현 / KYU — stepped down so they sit clearly below the
     hero rather than competing with it */
  --t-mark: clamp(1.125rem, 0.98rem + 0.63vw, 1.625rem);

  /* card kicker + title, and case study body: 16px */
  --t-label: 1rem;
  --t-label-ls: 0.02em;

  /* hero nav + footer meta: 12px */
  --t-meta: 0.75rem;
  --t-meta-ls: 0.02em;

  /* pronunciation bar: 11px */
  --t-phon: 0.6875rem;
  --t-phon-ls: 0.02em;

  /* ---- Layout ----------------------------------------------- */
  --container: 1168px;
  --gutter: clamp(1.25rem, 0.6rem + 2.9vw, 3.5rem);   /* 20px -> 56px */
  --col-gap: 16px;
  --col-min: 240px;          /* auto-fill lands on 4 columns at 1168px */

  --rule: 1px;

  /* vertical rhythm, measured from the original */
  --sp-header: 30px;         /* header mark baseline offset      */
  --sp-hero-top: clamp(4rem, 2rem + 6vw, 8.5rem);
  --sp-hero-bottom: clamp(4rem, 2.2rem + 5.4vw, 8rem);
  /* Grouping is done by proximity, not rules: the gap BETWEEN sections is
     always clearly larger than any gap WITHIN one, so a heading reads as
     belonging to the content beneath it.
         within a section  20 -> 36px
         between sections  56 -> 120px   (about 3x)                        */
  --sp-section: clamp(0.875rem, 0.6rem + 1.2vw, 1.625rem); /* heading -> content */
  --sp-block: clamp(3.5rem, 1.8rem + 5vw, 7.5rem);        /* section -> section */
  --sp-row: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);          /* rows within a grid */
  --sp-band-end: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);     /* band -> footer     */

  --card-frame-gap: 34px;    /* title -> panel                             */
  --frame-ratio: 280 / 297;  /* the grey panel fills the whole column      */
  --frame-pad-x: 11.07%;     /* 31px inside a 280px column                 */
  --frame-pad-t: 10.44%;     /* 31px of the 297px panel height             */

  /* ---- Colour ----------------------------------------------- */
  --bg:        #ffffff;
  --bg-band:   #e8e8e6;   /* the grey band behind Other Highlights   */
  --bg-frame:  #f2f2f2;   /* the panel behind each piece of artwork  */
  --bg-panel:  #fafafa;   /* panels when they sit on the grey band   */
  --bg-inset:  #e4e4e2;   /* panel while a card is pressed           */

  --ink:       #000000;
  --ink-2:     #1a1a1a;
  --ink-mute:  #6b6b6b;
  --ink-faint: #a3a3a0;

  --line:      #d2d2d2;
  --line-soft: #e5e5e3;

  --sel-bg:    #1a1a1a;
  --sel-ink:   #ffffff;

  /* ---- Motion ----------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 400ms;
  --dur-slow: 900ms;
  --stagger: 18ms;           /* per-character delay in the header swap */

  /* gallery: the active slide, and how far the neighbours recede */
  --slide-w: min(58vw, 680px);
  --slide-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --slide-scale-off: 0.78;
  --slide-opacity-off: 0.3;

  /* mobile menu panel — inset from the edges, sliding in from the right */
  --menu-inset: 16px;
  --menu-inset-left: 38px;
  --menu-pad: clamp(1.5rem, 1rem + 3vw, 2.25rem);
  --menu-bp: 900px;

  color-scheme: light;
}