/* ==========================================================================
   NICU Jargon Rx - base.css
   Design tokens, reset, typography primitives.

   DESIGN SYSTEM: "The Formulary"
   A site set like a beautifully typeset clinical reference crossed with a
   gallery catalogue. Warm paper, cold ink, one restrained accent.
   Every color value below is sampled directly from the supplied logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand color, sampled from logo-jargon-rx.png ---------------------
     #0097B2  bright teal   (JARGON fill)
     #036779  deep teal     (JARGON outline / shadow)
     #FFEBCF  cream         (RX lettering)
     Everything else is derived from these three.                          */
  --brand:        #0097B2;   /* graphic accent, large type, rules          */
  --brand-deep:   #036779;   /* links, solid buttons, headings on light    */
  --brand-lift:   #2FB3CE;   /* teal that passes AA on dark backgrounds    */
  --cream:        #FFEBCF;   /* warm accent, body copy on dark             */

  /* --- Ink & paper ------------------------------------------------------- */
  --ink:          #052730;   /* near-black with a teal cast                 */
  --ink-soft:     #0B3A46;   /* raised dark surfaces                        */
  --bone:         #FAF6EF;   /* default page background                     */
  --bone-deep:    #F3EDE2;   /* alternating section background              */
  --paper:        #FFFFFF;   /* cards, form fields                          */

  /* --- CATEGORY CLASSIFICATION SYSTEM -------------------------------------
     Five card categories, five colors. Treated as a scholarly classification
     scheme - deep, slightly desaturated jewel tones of near-equal value, so
     they read as one family beside the teal rather than as a bright rainbow.
     Every base tone clears 4.5:1 on --bone; every *-lift clears 4.5:1 on --ink.
     ------------------------------------------------------------------------ */
  --cat-diseases:        #254A87;  /* Blue   */
  --cat-diseases-lift:   #6E96D6;
  --cat-vocabulary:      #A62B32;  /* Red    */
  --cat-vocabulary-lift: #E68A86;
  --cat-respiratory:     #2C6B4F;  /* Green  */
  --cat-respiratory-lift:#69B08D;
  --cat-nutrition:       #66407C;  /* Purple */
  --cat-nutrition-lift:  #B287C6;
  --cat-imaging:         #A8541A;  /* Orange */
  --cat-imaging-lift:    #E0975A;

  /* --- Support ----------------------------------------------------------- */
  /* Darkened from #5B7079 for WCAG 1.4.3 AA. The old value was 4.83:1 on
     --bone but only 4.46:1 on --bone-deep, so every muted paragraph sitting on
     a tinted section failed the 4.5:1 minimum. This value clears both
     (5.28:1 on --bone, 4.88:1 on --bone-deep) and is a 6-point shift per
     channel, which is not perceptible as a change of color. */
  --muted:        #556A73;   /* secondary text on light  (5.3:1 / 4.9:1)     */
  --muted-dark:   #9DB3BB;   /* secondary text on ink     (7.2:1 on ink)    */
  --line:         #E2DACC;   /* hairline on light                           */
  --line-strong:  #CFC4B1;
  --line-dark:    rgba(255, 235, 207, .20);

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Fraunces", "Lora", Georgia, "Times New Roman", serif;
  --font-sans:    "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Fluid type scale. Ratio ~1.28 at small, ~1.4 at large. */
  --fs-display: clamp(3.25rem, 1.2rem + 9.4vw, 8.5rem);
  --fs-h1:      clamp(2.5rem,  1.4rem + 5.2vw, 5.25rem);
  --fs-h2:      clamp(1.9rem,  1.2rem + 3.1vw, 3.5rem);
  --fs-h3:      clamp(1.3rem,  1.05rem + 1.1vw, 1.875rem);
  --fs-h4:      clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-lead:    clamp(1.125rem, 1.02rem + .5vw, 1.4375rem);
  --fs-body:    1.0625rem;
  --fs-sm:      .9375rem;
  --fs-xs:      .8125rem;
  --fs-label:   .6875rem;

  /* --- Spacing (8px base) ------------------------------------------------ */
  --sp-1: .5rem;   --sp-2: 1rem;    --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;    --sp-7: 6rem;    --sp-8: 8rem;
  --sp-9: 11rem;

  /* Vertical rhythm between major sections */
  --section-y:   clamp(4.5rem, 2rem + 9vw, 11rem);
  --section-y-s: clamp(3rem, 1.5rem + 6vw, 7rem);
  /* Homepage-only rhythm, about 22% tighter at every width (item 16). */
  --section-y-home:   clamp(3.5rem, 1.6rem + 7vw, 8.5rem);
  --section-y-home-s: clamp(2.35rem, 1.2rem + 4.7vw, 5.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --container:   84rem;   /* 1344px */
  --container-n: 68rem;   /* narrow - long-form reading */
  --measure:     62ch;
  --gutter:      clamp(1.25rem, .5rem + 3vw, 4.5rem);
  --header-h:    clamp(4.25rem, 3.5rem + 2vw, 5.5rem);

  /* --- Radii - deliberately tight and editorial --------------------------- */
  --r-xs: 2px;  --r-sm: 3px;  --r: 5px;  --r-lg: 8px;
  --r-card: 14px;             /* physical playing-card corner               */
  --r-pill: 999px;

  /* --- Elevation - barely there --------------------------------------------
     Shadows are warm (teal-black) rather than neutral grey.                */
  --sh-1: 0 1px 2px rgba(5, 39, 48, .05);
  --sh-2: 0 2px 6px rgba(5, 39, 48, .06), 0 12px 28px -12px rgba(5, 39, 48, .10);
  --sh-3: 0 4px 12px rgba(5, 39, 48, .07), 0 28px 60px -24px rgba(5, 39, 48, .22);
  --sh-card: 0 1px 1px rgba(5,39,48,.05), 0 8px 18px -8px rgba(5,39,48,.16),
             0 34px 64px -34px rgba(5,39,48,.30);

  /* --- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-1: 180ms;  --dur-2: 320ms;  --dur-3: 620ms;  --dur-4: 900ms;

  --focus: 0 0 0 2px var(--bone), 0 0 0 4.5px var(--brand);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--line); }

:target { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* --------------------------------------------------------------------------
   3. FOCUS - always visible, never removed
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-ink :focus-visible { outline-color: var(--cream); }

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: .875rem 1.5rem;
  border-radius: 0 0 var(--r) var(--r);
  font-size: var(--fs-sm); font-weight: 600;
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  /* 1.06 sat below the font's own ascender+descender box, so on any heading
     that wrapped to two lines the descenders of the first line touched the
     capitals of the second. 1.12 clears them and is still tight editorial
     leading. */
  line-height: 1.12;
  letter-spacing: -.022em;
  text-wrap: balance;
  /* Fraunces variable axes: low WONK + moderate SOFT keeps it refined
     rather than quirky. */
  font-variation-settings: "SOFT" 20, "WONK" 0;
  font-optical-sizing: auto;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.16; letter-spacing: -.015em; }
h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.01em;
     font-family: var(--font-sans); font-weight: 600; }

p { text-wrap: pretty; }

/* --- Display: the largest editorial statements ---------------------------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.02;   /* was .95: clipped descenders on wrapped display type */
  letter-spacing: -.032em;
  font-variation-settings: "SOFT" 12, "WONK" 0;
}

.h-serif { font-family: var(--font-display); font-weight: 400; }

/* Italic display for emphasis inside headlines - Fraunces' italic is the
   single most characterful thing in the type system. Used sparingly. */
.em-italic {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -.018em;
}

.accent { color: var(--brand-deep); }
.on-ink .accent { color: var(--brand-lift); }

/* --- Lead paragraph ------------------------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--ink);
}
.lead--muted { color: var(--muted); }
.on-ink .lead--muted { color: var(--muted-dark); }

.prose p + p { margin-top: 1.15em; }
.prose { max-width: var(--measure); }

/* --- Eyebrow / label: letterspaced caps, the formulary voice --------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}
.on-ink .eyebrow { color: var(--muted-dark); }

.eyebrow::before {
  content: "";
  width: 1.75rem; height: 1px;
  background: var(--brand);
  flex: none;
}
.eyebrow--bare::before { display: none; }

/* Index numerals - tabular, formulary-entry style */
.index-num {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-deep);
}
.on-ink .index-num { color: var(--brand-lift); }

/* --- Small print ---------------------------------------------------------- */
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.muted { color: var(--muted); }
.on-ink .muted { color: var(--muted-dark); }

/* --- Inline links in body copy -------------------------------------------- */
.link {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--brand-deep) 35%, transparent);
  transition: text-decoration-color var(--dur-1) var(--ease);
}
.link:hover { text-decoration-color: var(--brand-deep); }
.on-ink .link { color: var(--cream);
  text-decoration-color: color-mix(in srgb, var(--cream) 40%, transparent); }
.on-ink .link:hover { text-decoration-color: var(--cream); }

/* --- Trademark glyph: raised, small, never shouty ------------------------- */
.tm {
  font-size: .42em;
  vertical-align: .72em;
  letter-spacing: .02em;
  font-family: var(--font-sans);
  font-weight: 500;
}

/* --- Wordmark set as display type -----------------------------------------
   The brand name at h1 size on The Cards. Headings carry -.022em tracking,
   which is correct for the lowercase editorial type it was tuned on but wrong
   for capitals: at 84px it closes the counters of "NICU" so the caps read as
   cramped and mismatched beside the title-case "Jargon Rx". Capitals want
   positive tracking, so that single word is optically corrected here. The
   trademark is also stepped down, because .42em of an 84px heading renders a
   35px superscript that competes with the name it qualifies.
   The brand name itself is unchanged, and no other heading is affected.      */
.wordmark__caps {
  letter-spacing: .012em;
  padding-inline-end: .015em;
}
.wordmark .tm { font-size: .3em; vertical-align: .95em; }

/* --------------------------------------------------------------------------
   5. DARK CONTEXT
   -------------------------------------------------------------------------- */
.on-ink {
  background: var(--ink);
  color: var(--cream);
}
.on-ink h1, .on-ink h2, .on-ink h3 { color: var(--cream); }
.on-ink .lead { color: color-mix(in srgb, var(--cream) 82%, transparent); }

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.no-scroll { overflow: hidden; }

.text-center { text-align: center; }
.mt-1 { margin-top: var(--sp-1); }  .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }  .mt-6 { margin-top: var(--sp-6); }

/* Hairline rule with an accent tick at its head - a recurring motif */
.rule {
  position: relative;
  height: 1px;
  background: var(--line);
  border: 0;
}
.rule::before {
  content: "";
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 3.5rem; height: 1px;
  background: var(--brand);
}
.on-ink .rule { background: var(--line-dark); }

/* --------------------------------------------------------------------------
   7. MOTION - scroll reveal. Everything degrades to "visible" without JS.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* No JS? Show everything. */
.no-js .reveal { opacity: 1; transform: none; }

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

/* Fine-pointer-only affordances (hover lifts, cursor parallax) are gated
   behind this everywhere in the codebase. */
@media (hover: none) {
  .hover-only { display: none; }
}

/* --------------------------------------------------------------------------
   8. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .video, .form-actions { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}