/* ==========================================================================
   LIMM — Clinical Editorial
   tokens.css · design tokens, reset, typography primitives
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------------
     Semantics: accent = live / current / new.  navy = institutional.        */
  --paper:      #F6F5F1;   /* page ground                                    */
  --paper-2:    #EDEBE5;   /* alternate surface                              */
  --paper-3:    #FBFAF8;   /* raised surface (cards, nav)                    */
  /* --paper-lift (#FFFFFF) is gone. It named one thing: the surface under
     02 / In numbers, which was the only white on the site and read as a stripe
     laid over the warm ground. That band now sits on --paper like every other
     section, announced by its own head-rule and nothing else, so the token has
     no surface left to name. Its second use — the ring that punches each
     member's face out of whatever is behind it — follows --paper directly in
     home.css, which is the ground those faces are now on.                    */
  --ink:        #0B1F33;   /* primary text — deep navy, from the #045184 line*/
  --navy:       #0F3D66;   /* secondary / institutional                      */
  --accent:     #12D6BE;   /* fluorescent cyan — markers, hovers, "current"  */
  /* The two "text" colours below are tuned to clear WCAG AA 4.5:1 at 11px mono
     against BOTH --paper and the darker --paper-2. The first pass used
     #0A7F73 / #6B7280, which measured 4.48 / 4.43 on paper and less on
     paper-2, so each was nudged one step darker. The accent was then taken a
     second step down, from #0A766B, because 5.05:1 still read as a pale green
     rather than as text at the sizes it is actually used.                    */
  --accent-ink: #0B5E57;   /* 7.00:1 on paper · 6.40:1 on paper-2            */
  --muted:      #636B77;   /* 4.96:1 on paper · 4.59:1 on paper-2            */
  --rule:       #D8D6CF;
  --rule-soft:  #E6E4DD;

  /* ---- Type -------------------------------------------------------------- */
  --font-display: "Fraunces", "Pretendard", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-kr:      "Pretendard", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --text-hero: clamp(3.5rem, 1.15rem + 6.45vw, 6.5rem);   /*  56 → 104 */
  --text-h2:   clamp(2.25rem, 1.2rem + 2.88vw, 3.5rem);   /*  36 →  56 */
  --text-h3:   clamp(1.375rem, 1.1rem + 0.75vw, 1.75rem); /*  22 →  28 */
  --text-lead: clamp(1.125rem, 1rem + 0.34vw, 1.375rem);  /*  18 →  22 */
  --text-body: clamp(1rem, 0.955rem + 0.12vw, 1.125rem);  /*  16 →  18 */
  --text-sm:   clamp(0.875rem, 0.85rem + 0.07vw, 0.9375rem);
  --text-meta: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);/*  12 →  13 */
  --text-stat: clamp(3.25rem, 1rem + 6.2vw, 7.5rem);

  /* ---- Space & layout ---------------------------------------------------- */
  --shell-max: 1440px;
  --page-x:  clamp(32px, 4.44vw, 64px);
  --gutter:  clamp(24px, 2.2vw, 32px);
  --section-y: clamp(72px, 6.5vw, 120px);
  --nav-h: 84px;
  --nav-h-compact: 60px;
  /* The announcement strip's own height — its link's min-height plus the rule
     under it, both set in layout.css, which also drops this to 33px where the
     strip gets shorter. The full-screen menu adds it to its top padding so its
     first line clears the masthead while the strip is still on screen. */
  --announce-h: 37px;

  /* ---- Motion ------------------------------------------------------------ */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 600ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h-compact) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- Focus --------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

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

/* ---- Type primitives ----------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}

.kr { font-family: var(--font-kr); letter-spacing: -0.01em; word-break: keep-all; }

.muted { color: var(--muted); }

.em-accent {
  font-style: italic;
  color: var(--accent-ink);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
}

/* Accessible-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 200; background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: 0 0 4px 4px;
  font-family: var(--font-mono); font-size: var(--text-meta);
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ---- Reveal on scroll ----------------------------------------------------
   The .reveal rules used to be declared here as well as in experience.css,
   and this copy was the one that set opacity: 0 — which is what left the
   whole page blank when scripting was off. The single definition now lives
   in experience.css, which every page carrying .reveal markup loads.        */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}