/* ==========================================================================
   Ankaferd — shared design system  (site.css)
   Haematology x botany. Light-only. No external requests.
   Sections:  0 Fonts · 1 Tokens · 2 Reset/base · 3 Layout · 4 Type
              5 Header · 6 Nav/menu · 7 Footer · 8 Buttons/links · 9 Components
              10 Placeholder · 11 Motion/reveal · 12 Utilities · 13 Print
   ========================================================================== */

/* 0 — Fonts --------------------------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-ext-full-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Italic latin-ext: Slovak accented italics (č ď ľ ĺ ň ŕ š ť ž …). Loaded only on Slovak pages
     that use an italic word with these glyphs — the unicode-range keeps it off DE/EN/NL/SV pages. */
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-ext-full-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Tiny subsets (ğ Ğ ş Ş İ for Turkish author names + č Č for "Slovenčina" in the switcher), declared after latin-ext so they win for these glyphs:
   author names like "Haznedaroğlu İC" no longer pull in the full latin-ext files. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-tr-full-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+010C-010D, U+011E-011F, U+0130, U+015E-015F;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-tr-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+010C-010D, U+011E-011F, U+0130, U+015E-015F;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Mono latin-ext: Slovak accents in mono labels/eyebrows/codes. Loaded only where such a glyph
     is rendered (Slovak pages), so DE/EN/NL/SV pages keep the small latin mono subset. */
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Metric-matched fallbacks to minimise layout shift while fonts swap */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 104%; ascent-override: 94%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 93%; ascent-override: 104%; descent-override: 26%; line-gap-override: 0%; }

/* 1 — Tokens -------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colour — paper & ink */
  --paper:        #F4EFE5;   /* page base (warm ivory) */
  --paper-2:      #ECE4D4;   /* sunken band */
  --paper-3:      #E2D7C3;   /* deeper band / hairline on paper-2 */
  --raised:       #FBF8F2;   /* cards, popovers */
  --ink:          #1B1714;   /* primary text  15.5:1 on paper */
  --ink-2:        #463E38;   /* secondary text 9.1:1 */
  --ink-3:        #665B53;   /* muted text / captions 5.7:1 (min. use: >= 14px) */
  --line:         rgb(27 23 20 / .14);
  --line-strong:  rgb(27 23 20 / .28);

  /* Colour — haemoglobin (signature accent, use sparingly) */
  --blood-950: #2A0609;
  --blood-900: #4D0B15;
  --blood-800: #6B1220;
  --blood-700: #861A2A;      /* accent text & primary button  8.3:1 on paper */
  --blood-600: #A2223A;      /* decorative / large display only */
  --blood-500: #C0313F;      /* decorative only (drops, highlights) */
  --blood-300: #EE8D95;      /* accent text on night  7.9:1 */
  --blood-100: #F3DDD7;      /* tint backgrounds */

  /* Colour — botanical moss */
  --moss-900: #1F2E25;
  --moss-700: #34493B;       /* text OK on paper 8.5:1 */
  --moss-500: #5E7A63;       /* decorative strokes */
  --moss-300: #A9BBA4;       /* wash / text on night 9.2:1 */
  --moss-100: #DCE3D4;       /* tint backgrounds */

  /* Colour — clinical neutral (cool) */
  --porcelain:  #E6EAE8;     /* evidence / data surfaces */
  --slate-700:  #3E4A52;     /* text 7.5:1 on porcelain */
  --slate-500:  #6E7C84;     /* decorative */
  --slate-200:  #CBD3D4;

  /* Colour — night (dark sections) */
  --night:    #15110F;
  --night-2:  #211A17;
  --on-night:   #F4EEE4;     /* 16.3:1 */
  --on-night-2: #BDB2A6;     /* 9.0:1 */
  --line-night: rgb(244 238 228 / .14);

  /* Semantic */
  --bg: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--blood-700);
  --accent-hover: var(--blood-800);
  --focus: #1F5FA8;          /* clinical blue focus ring: 5.9:1 on paper, distinct from accent */
  --success: #2F5D3E;
  --danger: #8F1D22;

  /* Texture: generated paper grain (SVG feTurbulence) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .16 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.34'/%3E%3C/svg%3E");
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .3 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='.14'/%3E%3C/svg%3E");

  /* Type families */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
  --font-sans: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale (375 → 1440 px) */
  --step--2: clamp(0.75rem, 0.7280rem + 0.0939vw, 0.8125rem);
  --step--1: clamp(0.875rem, 0.8530rem + 0.0939vw, 0.9375rem);
  --step-0:  clamp(1.0625rem, 1.0185rem + 0.1878vw, 1.1875rem);
  --step-1:  clamp(1.25rem, 1.1620rem + 0.3756vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  --step-3:  clamp(1.8rem, 1.4655rem + 1.4272vw, 2.75rem);
  --step-4:  clamp(2.15rem, 1.5866rem + 2.4038vw, 3.75rem);
  --step-5:  clamp(2.5rem, 1.6197rem + 3.7559vw, 5rem);
  --step-6:  clamp(2.9rem, 1.5444rem + 5.7840vw, 6.75rem);
  --step-7:  clamp(3.1rem, 1.1106rem + 8.4883vw, 8.75rem);

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.6;
  --measure: 64ch;
  --measure-narrow: 46ch;

  /* Fraunces axis presets */
  --fr-display: "SOFT" 30, "WONK" 0;
  --fr-italic:  "SOFT" 100, "WONK" 1;
  --fr-text:    "SOFT" 50, "WONK" 0;

  /* Spacing (4px base) */
  --space-3xs: .25rem;  --space-2xs: .5rem;  --space-xs: .75rem;
  --space-s: 1rem;      --space-m: 1.5rem;   --space-l: 2rem;
  --space-xl: 3rem;     --space-2xl: 4rem;   --space-3xl: 6rem;
  --space-4xl: 8rem;
  --section-y: clamp(4rem, 2.4rem + 6.5vw, 8.5rem);
  --section-y-s: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: clamp(1rem, .45rem + 2.35vw, 2.5rem);
  --grid-gap: clamp(1rem, .6rem + 1.6vw, 2rem);

  /* Containers */
  --container: 82rem;        /* 1312px content */
  --container-wide: 100rem;  /* 1600px for bleeding visuals */
  --container-text: 44rem;

  /* Radii */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* Shadows (warm-tinted, layered) */
  --shadow-1: 0 1px 1px rgb(52 28 18 / .04), 0 1px 3px rgb(52 28 18 / .06);
  --shadow-2: 0 2px 4px rgb(52 28 18 / .04), 0 8px 20px -6px rgb(52 28 18 / .12);
  --shadow-3: 0 4px 8px rgb(52 28 18 / .04), 0 24px 48px -16px rgb(52 28 18 / .22);
  --shadow-pop: 0 1px 0 rgb(255 255 255 / .6) inset, 0 12px 32px -8px rgb(40 18 12 / .28), 0 2px 6px rgb(40 18 12 / .08);

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 700ms; --dur-5: 1200ms;

  /* Layers */
  --z-base: 1; --z-raised: 10; --z-sticky: 50; --z-header: 100; --z-menu: 200; --z-popover: 300; --z-skip: 1000;

  /* Header */
  --header-h: 76px;
  --header-h-condensed: 60px;
  --subnav-h: 52px;
}
@media (min-width: 64em) { :root { --header-h: 88px; --header-h-condensed: 64px; } }

/* 2 — Reset & base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-condensed) + 1.5rem);
  hanging-punctuation: first last;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh;
  padding-top: var(--header-h);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--grain), var(--mottle);
  background-size: 240px 240px, 600px 600px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
svg { overflow: visible; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, li, figcaption, blockquote, summary, dt, dd, td, th { text-wrap: pretty; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-weight: inherit; font-size: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
abbr[title] { text-decoration: none; border-bottom: 1px dotted currentColor; cursor: help; }
sup, sub { line-height: 0; }
hr { border: 0; border-top: 1px solid var(--line); }
::selection { background: var(--blood-700); color: var(--on-night); }
[hidden] { display: none !important; }
main:focus { outline: none; }

/* Focus ring — clinical blue, double ring so it reads on any surface */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px; /* outline follows each element's own border-radius */
  box-shadow: 0 0 0 6px rgb(31 95 168 / .16);
}
.on-night :focus-visible, .night :focus-visible { outline-color: #8DB8F0; box-shadow: 0 0 0 6px rgb(141 184 240 / .2); }

/* Skip link */
.skip-link {
  position: fixed; left: var(--gutter); top: .75rem; z-index: var(--z-skip);
  padding: .7rem 1.1rem; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-night);
  font-weight: 600; font-size: var(--step--1); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

.sr-only {
  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;
}

/* 3 — Layout ---------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); position: relative; }
.section--s { padding-block: var(--section-y-s); }
.section--flush-top { padding-top: 0; }
.band-2 { background-color: var(--paper-2); }
.band-porcelain { background-color: var(--porcelain); }
.band-moss { background-color: var(--moss-100); }

/* 12-column grid. Children use .span-* / .start-* from 64em up; stacked below. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.grid > * { grid-column: 1 / -1; }
@media (min-width: 48em) {
  .md\:span-6 { grid-column: span 6; } .md\:span-4 { grid-column: span 4; } .md\:span-8 { grid-column: span 8; } .md\:span-12 { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }
  .start-1 { grid-column-start: 1; } .start-2 { grid-column-start: 2; } .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; } .start-8 { grid-column-start: 8; }
}
.stack > * + * { margin-top: var(--stack, var(--space-s)); }
.stack-l > * + * { margin-top: var(--space-l); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-xs)); align-items: center; }
.auto-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 18rem)), 1fr)); }

/* Hairline rule with mono label (editorial divider) */
.rule { display: flex; align-items: center; gap: var(--space-s); color: var(--text-3); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; }
.rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* 4 — Typography ------------------------------------------------------------ */
.display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--fr-display);
  color: var(--text);
  letter-spacing: -0.02em;
}
.display { font-size: var(--step-7); line-height: .94; font-weight: 340; letter-spacing: -0.035em; }
.h1 { font-size: var(--step-6); line-height: 1; font-weight: 350; letter-spacing: -0.03em; }
.h2 { font-size: var(--step-5); line-height: 1.03; font-weight: 360; letter-spacing: -0.028em; }
.h3 { font-size: var(--step-3); line-height: 1.1; font-weight: 400; letter-spacing: -0.018em; }
.h4 { font-size: var(--step-2); line-height: 1.2; font-weight: 450; letter-spacing: -0.012em; }
.display em, .h1 em, .h2 em, .h3 em, .h4 em, .ital {
  font-style: italic; font-variation-settings: var(--fr-italic); letter-spacing: -0.01em;
}
.accent { color: var(--accent); }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-2); max-width: 40ch; font-weight: 400; letter-spacing: -0.005em; }
.body-l { font-size: var(--step-1); line-height: 1.55; }
.small { font-size: var(--step--1); line-height: 1.55; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.measure { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.mono { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .02em; }
.serif { font-family: var(--font-display); font-variation-settings: var(--fr-text); }
.tnum { font-variant-numeric: tabular-nums; }

/* Prose (long-form content on inner pages) */
.prose { max-width: var(--measure); color: var(--text-2); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-size: var(--step-3); line-height: 1.1; color: var(--text); margin-top: 2em; letter-spacing: -0.02em; font-weight: 400; }
.prose h3 { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-size: var(--step-2); line-height: 1.2; color: var(--text); margin-top: 1.8em; font-weight: 450; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--accent); }

/* Eyebrow / kicker */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.eyebrow::before { content: ""; width: .5em; height: .5em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--blood-700); flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow--moss::before { background: var(--moss-500); }
.night .eyebrow, .on-night .eyebrow { color: var(--on-night-2); }
.night .eyebrow::before { background: var(--blood-300); }

/* Section header */
.section-head { display: grid; gap: var(--space-m); margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section-head__title { max-width: 18ch; }
.section-head__intro { max-width: 46ch; color: var(--text-2); font-size: var(--step-1); line-height: 1.5; }
@media (min-width: 64em) {
  .section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--grid-gap); }
  .section-head--split .eyebrow { grid-column: 1 / -1; }
  .section-head--split .section-head__intro { justify-self: end; }
}
.section-index { font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-3); letter-spacing: .08em; }

/* 5 — Header ---------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  transition: height var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.site-header::before { /* frosted layer appears when condensed */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(244 239 229 / .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.site-header.is-condensed { height: var(--header-h-condensed); }
.site-header::before { background: rgb(244 239 229 / .94); }
/* Over dark sections (.night, .site-footer, [data-header-dark]) the glass turns to night */
.site-header.is-on-dark::before { background: rgb(21 17 15 / .86); box-shadow: 0 1px 0 var(--line-night); }
.site-header.is-on-dark .brand, .site-header.is-on-dark .site-nav__link, .site-header.is-on-dark .lang__btn, .site-header.is-on-dark .nav-toggle { color: var(--on-night); }
.site-header.is-on-dark .brand__sub { color: var(--on-night-2); }
.site-header.is-on-dark .site-nav__link:hover, .site-header.is-on-dark .site-nav__link[aria-current="page"] { color: #fff; }
.site-header.is-on-dark .site-nav__link::after { background: var(--blood-300); }
.site-header.is-on-dark .lang__btn:hover, .site-header.is-on-dark .lang__btn[aria-expanded="true"], .site-header.is-on-dark .nav-toggle:hover { background: rgb(244 238 228 / .1); }
.site-header.is-on-dark :focus-visible { outline-color: #8DB8F0; }
html.menu-open .site-header.is-on-dark .brand, html.menu-open .site-header.is-on-dark .nav-toggle { color: var(--ink); }
html.menu-open .site-header.is-on-dark .brand__sub { color: var(--ink-2); }
.site-header.is-condensed::before, .no-js .site-header::before { opacity: 1; }
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--space-m); }

.brand { position: relative; z-index: calc(var(--z-menu) + 1); display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink); margin-right: auto; flex: none; border-radius: 6px; }
.brand__mark { width: 30px; height: 38px; flex: none; transition: transform var(--dur-3) var(--ease-out); }
.brand__text { display: grid; line-height: 1; }
.brand__word { font-family: var(--font-display); font-variation-settings: "SOFT" 60, "WONK" 0; font-optical-sizing: auto; font-weight: 520; font-size: 1.45rem; letter-spacing: -0.025em; }
.brand__sub { font-family: var(--font-mono); font-size: max(11.5px, .72rem); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: .3rem; transition: opacity var(--dur-2), max-height var(--dur-3) var(--ease-out); max-height: 1em; }
.is-condensed .brand__mark { transform: scale(.86); }
.is-condensed .brand__sub { opacity: 0; max-height: 0; margin-top: 0; }
.brand:hover .brand__mark .brand__drop { fill: var(--blood-800); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-xs); }
.site-header .site-header__cta { display: none; }
@media (min-width: 40em) { .site-header .site-header__cta { display: inline-flex; } }

/* Language switcher */
.lang { position: relative; display: none; }
@media (min-width: 64em) { .lang { display: block; } }
.lang__btn {
  display: inline-flex; align-items: center; gap: .35rem; height: 40px; padding: 0 .75rem;
  border-radius: var(--r-pill); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; font-weight: 500;
  color: var(--ink-2); transition: background-color var(--dur-2), color var(--dur-2);
}
.lang__btn:hover, .lang__btn[aria-expanded="true"] { background: rgb(27 23 20 / .06); color: var(--ink); }
.lang__btn svg { width: 10px; height: 10px; transition: transform var(--dur-2) var(--ease-out); }
.lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 15rem; padding: .4rem;
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
  list-style: none; z-index: var(--z-popover);
  transform-origin: top right; animation: pop-in var(--dur-2) var(--ease-out);
}
.lang__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .75rem; border-radius: var(--r-sm); font-size: var(--step--1); text-decoration: none; color: var(--ink); }
a.lang__item:hover { background: var(--paper-2); }
.lang__item[aria-current="true"] { font-weight: 600; }
.lang__item[aria-current="true"]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blood-700); }
.lang__code { margin-left: auto; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; color: var(--ink-3); }
.lang__item[aria-current="true"] .lang__code { color: var(--blood-800); }
/* legacy (no longer in the partial; kept for backward compatibility) */
.lang__item--soon { color: var(--ink-3); cursor: not-allowed; }
.lang__item--soon:focus-visible { outline-offset: -2px; }
.lang__soon-tag { font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--line-strong); padding: .15rem .4rem; border-radius: var(--r-pill); white-space: nowrap; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* Burger */
.nav-toggle {
  position: relative; z-index: calc(var(--z-menu) + 1);
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center; color: var(--ink);
  transition: background-color var(--dur-2);
}
.nav-toggle:hover { background: rgb(27 23 20 / .06); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 20px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(6px); width: 13px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); width: 20px; }
@media (min-width: 64em) { .nav-toggle { display: none; } }

/* 6 — Primary nav + mobile full-screen menu ------------------------------- */
.site-nav__list { list-style: none; padding: 0; }
.site-nav__num { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--ink-3); }
.site-nav__link { text-decoration: none; color: var(--ink); }
.site-nav__extras { display: none; }

@media (min-width: 64em) {
  .site-nav { margin-right: var(--space-s); }
  .site-nav__list { display: flex; gap: .25rem; }
  .site-nav__num { display: none; }
  .site-nav__link {
    position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 .85rem;
    font-size: .95rem; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-2); border-radius: var(--r-pill);
    transition: color var(--dur-2);
  }
  .site-nav__link::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: 6px; height: 1.5px; background: var(--blood-700);
    transform: scaleX(0); transform-origin: right; transition: transform var(--dur-3) var(--ease-out);
  }
  .site-nav__link:hover { color: var(--ink); }
  .site-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
  .site-nav__link[aria-current="page"] { color: var(--ink); }
  .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
}

@media (max-width: 63.99em) {
  .site-nav {
    position: fixed; inset: 0; z-index: var(--z-menu);
    display: flex; flex-direction: column;
    padding: calc(var(--header-h) + 1rem) var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
    background-color: var(--paper); background-image: var(--grain);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-4) var(--ease-out), opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-4);
  }
  .site-nav.is-open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); transition: clip-path var(--dur-4) var(--ease-out), opacity var(--dur-2) var(--ease-out), visibility 0s; }
  .site-nav__list { border-top: 1px solid var(--line); }
  .site-nav__list li { border-bottom: 1px solid var(--line); }
  .site-nav__link {
    display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0;
    font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto;
    font-size: clamp(2rem, 1.4rem + 3vw, 3rem); font-weight: 360; letter-spacing: -0.025em; line-height: 1.05;
  }
  .site-nav__link[aria-current="page"] { color: var(--blood-700); }
  .site-nav__link[aria-current="page"] .site-nav__num { color: var(--blood-700); }
  .site-nav__extras { display: grid; gap: var(--space-m); margin-top: auto; padding-top: var(--space-xl); }
  .site-nav.is-open .site-nav__list li, .site-nav.is-open .site-nav__extras { animation: menu-item var(--dur-4) var(--ease-out) both; }
  .site-nav.is-open .site-nav__list li:nth-child(2) { animation-delay: 40ms; }
  .site-nav.is-open .site-nav__list li:nth-child(3) { animation-delay: 80ms; }
  .site-nav.is-open .site-nav__list li:nth-child(4) { animation-delay: 120ms; }
  .site-nav.is-open .site-nav__list li:nth-child(5) { animation-delay: 160ms; }
  .site-nav.is-open .site-nav__extras { animation-delay: 220ms; }
  html.menu-open { overflow: hidden; }
  html.menu-open .site-header::before { opacity: 0; }
  html.menu-open .site-header__cta { display: none; }
}
@keyframes menu-item { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lang-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--step--1); }
.lang-inline__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: .25rem; }
.lang-inline a, .lang-inline span.lang-inline__opt { padding: .35rem .7rem; border-radius: var(--r-pill); border: 1px solid var(--line); text-decoration: none; }
.lang-inline a[aria-current="true"] { background: var(--ink); color: var(--on-night); border-color: var(--ink); }
.lang-inline .lang-inline__opt { color: var(--ink-3); border-style: dashed; }
.no-js .nav-toggle { display: none; } /* without JS the footer sitemap is the mobile navigation */

/* 7 — Footer ---------------------------------------------------------------- */
.site-footer { position: relative; background-color: var(--night); color: var(--on-night-2); padding-top: clamp(4rem, 3rem + 5vw, 7rem); overflow: hidden; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .5; mix-blend-mode: screen; z-index: -1; pointer-events: none; }
.site-footer a { color: var(--on-night); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.site-footer :focus-visible { outline-color: #8DB8F0; box-shadow: 0 0 0 6px rgb(141 184 240 / .2); }
.footer-top { display: grid; gap: var(--space-2xl); padding-bottom: var(--space-2xl); border-bottom: 1px solid var(--line-night); }
@media (min-width: 64em) { .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--grid-gap); } }
.footer-brand .brand { color: var(--on-night); }
.footer-brand .brand__sub { color: var(--on-night-2); }
/* Footer uses the real white wordmark (always on the dark night band) */
.footer-brand .brand__logo--white { display: inline-flex; }
.footer-brand .brand__logo--footer img { height: 2.5rem; }
.footer-tagline { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-3); line-height: 1.1; letter-spacing: -0.02em; color: var(--on-night); font-weight: 340; margin-top: var(--space-l); max-width: 16ch; }
.footer-tagline em { font-style: italic; font-variation-settings: var(--fr-italic); color: var(--blood-300); }
.footer-cols { display: grid; gap: var(--space-xl) var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48em) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-col h2 { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--on-night-2); font-weight: 500; margin-bottom: var(--space-s); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; font-size: var(--step--1); }
.footer-col address { font-style: normal; font-size: var(--step--1); line-height: 1.7; }
.footer-reg { display: grid; gap: var(--space-l); padding-block: var(--space-xl); border-bottom: 1px solid var(--line-night); font-size: var(--step--1); line-height: 1.65; }
@media (min-width: 64em) { .footer-reg { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--grid-gap); } }
.footer-ifu { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; border: 1px solid var(--line-night); border-radius: var(--r-md); color: var(--on-night); background: rgb(255 255 255 / .03); }
.footer-ifu svg { flex: none; width: 22px; height: 22px; color: var(--blood-300); margin-top: .1rem; }
.footer-ifu strong { display: block; font-weight: 600; margin-bottom: .2rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l); align-items: center; justify-content: space-between; padding-block: var(--space-l); font-size: var(--step--2); font-family: var(--font-mono); letter-spacing: .03em; }
.footer-bottom ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.footer-wordmark { display: block; width: 100%; margin-top: var(--space-l); color: rgb(244 238 228 / .07); pointer-events: none; user-select: none; }
.site-footer .lang-inline a, .site-footer .lang-inline .lang-inline__opt { border-color: var(--line-night); }
.site-footer .lang-inline a[aria-current="true"] { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.site-footer .lang-inline .lang-inline__opt { color: var(--on-night-2); }
.site-footer .lang-inline__label { color: var(--on-night-2); }
.site-footer .ph { color: inherit; }
.footer-maker { margin-top: var(--space-s); font-size: var(--step--1); color: var(--on-night-2); }

/* 8 — Buttons & links ------------------------------------------------------- */
.btn {
  --btn-h: 52px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--btn-h); padding: 0 1.5rem; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-size: .98rem; font-weight: 550; letter-spacing: -0.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.985); transition-duration: 80ms; }
.btn__icon { width: 1em; height: 1em; flex: none; transition: transform var(--dur-3) var(--ease-out); }
.btn:hover .btn__icon--arrow { transform: translateX(3px); }
.btn--sm { --btn-h: 42px; padding: 0 1.1rem; font-size: .9rem; }
.btn--lg { --btn-h: 60px; padding: 0 1.9rem; font-size: 1.05rem; }

.btn--primary { background: var(--blood-700); color: #FBF6EF; box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(77 11 21 / .3), 0 6px 16px -6px rgb(134 26 42 / .5); }
.btn--primary::before { /* light sweep on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at var(--mx, 50%) 120%, var(--blood-600), transparent 60%);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
.btn--primary:hover { background: var(--blood-800); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 2px rgb(77 11 21 / .3), 0 12px 24px -8px rgb(134 26 42 / .55); }
.btn--primary:hover::before { opacity: .7; }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); background: var(--ink); color: var(--on-night); }

.btn--ghost { padding-inline: .25rem; min-height: 44px; color: var(--ink); border-radius: 6px; }
.btn--ghost .btn__label { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size var(--dur-3) var(--ease-out); }
.btn--ghost:hover .btn__label { background-size: 0 1px; background-position: 100% 100%; }

.btn--light { background: var(--on-night); color: var(--night); }
.btn--light:hover { background: #fff; }
.btn--outline-light { color: var(--on-night); border-color: rgb(244 238 228 / .35); }
.btn--outline-light:hover { border-color: var(--on-night); background: var(--on-night); color: var(--night); }

/* Inline text links */
.link, .prose a {
  color: var(--blood-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: rgb(134 26 42 / .4); transition: text-decoration-color var(--dur-2), color var(--dur-2);
}
.link:hover, .prose a:hover { text-decoration-color: currentColor; color: var(--blood-800); }
.night .link { color: var(--blood-300); text-decoration-color: rgb(238 141 149 / .45); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 550; text-decoration: none; color: var(--ink); }
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--dur-3) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--blood-700); }

/* 9 — Components ------------------------------------------------------------ */

/* Cards */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-s);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-lg);
  background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), border-color var(--dur-3);
}
.card--link { text-decoration: none; color: inherit; }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line-strong); }
.card--flat { background: transparent; box-shadow: none; }
.card--porcelain { background: rgb(255 255 255 / .55); border-color: rgb(62 74 82 / .14); }
.card__kicker { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.card__title { font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-2); line-height: 1.15; font-weight: 420; letter-spacing: -0.015em; }
.card__body { color: var(--text-2); font-size: var(--step--1); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: var(--space-s); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
/* Make whole card clickable while keeping one link (accessible) */
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link { text-decoration: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.card__link:focus-visible { outline: none; box-shadow: none; }

/* Stat blocks */
.stat { display: grid; gap: .35rem; align-content: start; }
.stat__value { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0; font-size: var(--step-5); line-height: .95; font-weight: 300; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.stat__value small { font-size: .45em; letter-spacing: -0.01em; margin-left: .08em; font-weight: 400; }
.stat__label { font-size: var(--step--1); color: var(--text-2); line-height: 1.45; max-width: 26ch; }
.stat__meta { font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-3); letter-spacing: .04em; }
.stat-row { display: grid; gap: var(--space-l) var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.stat-row > .stat { padding-top: var(--space-s); border-top: 1px solid var(--line-strong); }
.night .stat__value { color: var(--on-night); }
.night .stat__label { color: var(--on-night-2); }

/* Citation markers + popover */
.cite {
  display: inline-block; vertical-align: super; text-align: center; white-space: nowrap;
  min-width: 1.6em; height: 1.6em; line-height: 1.6em; padding: 0 .34em; margin-left: .06em; text-indent: 0;
  font-family: var(--font-mono); font-size: clamp(12px, .62em, 13px); font-weight: 600; letter-spacing: 0; font-style: normal;
  color: var(--blood-800); background: #EBCFCB; border-radius: var(--r-pill); text-decoration: none;
  transform: translateY(-.05em); transition: background-color var(--dur-2), color var(--dur-2);
  position: relative;
}
.nobr { white-space: nowrap; } /* site.js wraps 'word + cite(s) + punctuation' in .nobr */
.cite::before { content: ""; position: absolute; inset: -10px -4px; } /* larger hit target (WCAG 2.5.8) */
.cite + .cite { margin-left: .08em; }
.cite:hover, .cite[aria-expanded="true"] { background: var(--blood-700); color: #FBF6EF; }
.night .cite { background: rgb(238 141 149 / .16); color: var(--blood-300); }
.night .cite:hover, .night .cite[aria-expanded="true"] { background: var(--blood-300); color: var(--night); }
.ref-pop {
  position: fixed; z-index: var(--z-popover); width: min(24rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem 1.05rem; border-radius: var(--r-md);
  background: var(--raised); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-pop);
  font-family: var(--font-sans); font-size: var(--step--1); line-height: 1.5; font-weight: 400; letter-spacing: 0; text-align: left; white-space: normal;
  vertical-align: baseline; display: block;
  animation: pop-in var(--dur-2) var(--ease-out);
}
.ref-pop__num { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blood-700); display: block; margin-bottom: .35rem; }
.ref-pop__text { display: block; color: var(--ink-2); }
.ref-pop__text i, .ref-pop__text em { color: var(--ink); }
.ref-pop__actions { display: flex; gap: 1rem; margin-top: .7rem; font-size: var(--step--2); font-family: var(--font-mono); letter-spacing: .02em; }
.ref-pop__actions a { color: var(--blood-700); }

/* Reference list */
.refs { list-style: none; padding: 0; counter-reset: ref; display: grid; gap: 0; }
.refs li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--text-2); line-height: 1.6; scroll-margin-top: 7rem; transition: background-color var(--dur-4); }
.refs li:target, .refs li.is-flash { background: var(--blood-100); }
.refs__n { font-family: var(--font-mono); font-size: var(--step--2); color: var(--blood-700); padding-top: .2em; }
.refs a { color: var(--blood-700); text-underline-offset: .2em; text-decoration-thickness: 1px; word-break: break-word; }

/* Tags / chips */
.tag {
  display: inline-flex; align-items: center; gap: .4rem; height: 28px; padding: 0 .7rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap;
}
.tag--blood { border-color: transparent; background: var(--blood-100); color: var(--blood-800); }
.tag--moss { border-color: transparent; background: var(--moss-100); color: var(--moss-900); }
.tag--slate { border-color: transparent; background: var(--slate-200); color: #2C363C; }
.tag--dashed { border-style: dashed; }
.tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Evidence-level chip: data-level="invitro|animal|clinical-small|clinical-controlled|review" */
.evidence-level { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-2); }
.evidence-level__bars { display: inline-flex; gap: 2px; }
.evidence-level__bars i { width: 4px; height: 12px; border-radius: 1px; background: var(--line-strong); }
.evidence-level[data-level="1"] i:nth-child(-n+1), .evidence-level[data-level="2"] i:nth-child(-n+2),
.evidence-level[data-level="3"] i:nth-child(-n+3), .evidence-level[data-level="4"] i:nth-child(-n+4),
.evidence-level[data-level="5"] i:nth-child(-n+5) { background: var(--slate-700); }
/* Filter chip (button) */
.chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1rem;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent;
  font-size: var(--step--1); font-weight: 500; color: var(--ink-2);
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--ink); color: var(--on-night); border-color: var(--ink); }
.chip__count { font-family: var(--font-mono); font-size: .72rem; opacity: .7; }

/* Accordion (details/summary, enhanced by JS for smooth height) */
.accordion { border-top: 1px solid var(--line-strong); }
.acc { border-bottom: 1px solid var(--line-strong); }
.acc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  padding: 1.35rem 0; font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto;
  font-size: var(--step-1); line-height: 1.3; font-weight: 420; letter-spacing: -0.01em; color: var(--ink);
  border-radius: 4px;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--blood-700); }
.acc__icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-3) var(--ease-out); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform var(--dur-3) var(--ease-out); }
.acc__icon::after { transform: rotate(90deg); }
.acc[open] .acc__icon { background: var(--ink); border-color: var(--ink); color: var(--on-night); }
.acc[open] .acc__icon::after { transform: rotate(0deg); }
.acc__body { padding: 0 0 1.6rem; color: var(--text-2); max-width: var(--measure); }
.acc__body > * + * { margin-top: .9em; }

/* Form fields */
.field { display: grid; gap: .45rem; }
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field__label .req { color: var(--blood-700); margin-left: .15em; }
.field__hint { font-size: var(--step--2); color: var(--text-3); line-height: 1.45; }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: var(--r-sm);
  background: var(--raised); border: 1px solid var(--line-strong); color: var(--ink);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}
.textarea { min-height: 9rem; resize: vertical; }
.select { appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231B1714' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; }
.input::placeholder, .textarea::placeholder { color: #82766C; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px rgb(31 95 168 / .18); border-radius: var(--r-sm); }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea, [aria-invalid="true"] { border-color: var(--danger); background-color: #FBF1EF; }
.field__error { display: none; align-items: center; gap: .4rem; font-size: var(--step--1); color: var(--danger); font-weight: 500; }
.field.is-invalid .field__error { display: flex; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: .75rem; align-items: start; font-size: var(--step--1); color: var(--text-2); cursor: pointer; }
.check input { appearance: none; width: 22px; height: 22px; margin: .1rem 0 0; border-radius: 6px; border: 1px solid var(--ink-3); background: var(--raised); display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-2), border-color var(--dur-2); }
.check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform var(--dur-2) var(--ease-spring); }
.check input:checked { background: var(--blood-700); border-color: var(--blood-700); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }

/* Notice / disclaimer blocks */
.notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1rem; align-items: start;
  padding: 1.15rem 1.35rem; border-radius: var(--r-md);
  background: var(--raised); border: 1px solid var(--line); font-size: var(--step--1); line-height: 1.6; color: var(--text-2);
}
.notice__icon { width: 22px; height: 22px; color: var(--ink-2); margin-top: .1rem; }
.notice__title { display: block; font-weight: 600; color: var(--ink); margin-bottom: .15rem; }
.notice--caution { background: #F7EBDD; border-color: #E2C9A8; }
.notice--caution .notice__icon { color: #7A4A12; }
.notice--blood { background: var(--blood-100); border-color: rgb(134 26 42 / .18); }
.notice--blood .notice__icon { color: var(--blood-700); }
.notice--clinical { background: rgb(255 255 255 / .55); border-color: rgb(62 74 82 / .18); }
.notice--clinical .notice__icon { color: var(--slate-700); }
.notice--ifu { border-left: 3px solid var(--blood-700); border-radius: 0 var(--r-md) var(--r-md) 0; }

/* Figure + caption (plate style) */
.figure { position: relative; }
.figcap { display: flex; gap: .75rem; margin-top: var(--space-s); font-size: var(--step--2); line-height: 1.5; color: var(--text-3); max-width: 52ch; }
.figcap__n { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.illustrative { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* Index list (editorial rows with numbers). Whole row is clickable via the title link's ::after. */
.index-list { list-style: none; padding: 0; border-top: 1px solid var(--line-strong); }
.index-row {
  position: relative; isolation: isolate; border-bottom: 1px solid var(--line-strong);
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .35rem; align-items: baseline;
  padding: 1.4rem 0;
}
.index-row::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -0.5); z-index: -1; background: var(--raised); opacity: 0; transform: scaleY(.7); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); border-radius: var(--r-sm); }
.index-row:hover::before { opacity: 1; transform: none; }
.index-row__num { grid-column: 1; grid-row: 1; font-family: var(--font-mono); font-size: var(--step--2); color: var(--text-3); letter-spacing: .06em; }
.index-row__title { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-variation-settings: var(--fr-display); font-optical-sizing: auto; font-size: var(--step-3); line-height: 1.05; font-weight: 360; letter-spacing: -0.025em; }
.index-row__link { text-decoration: none; color: inherit; transition: color var(--dur-2); border-radius: 4px; }
.index-row__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.index-row:hover .index-row__link { color: var(--blood-700); }
.index-row:has(.index-row__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.index-row__link:focus-visible { outline: none; box-shadow: none; }
.index-row__desc { grid-column: 2 / 3; font-size: var(--step--1); color: var(--text-2); max-width: 52ch; }
.index-row__meta { grid-column: 2 / 3; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.index-row .cite { z-index: 2; }
.index-row__arrow { grid-row: 1; grid-column: 3; align-self: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2), transform var(--dur-3) var(--ease-out); }
.index-row__arrow svg { width: 16px; height: 16px; }
.index-row:hover .index-row__arrow { background: var(--blood-700); border-color: var(--blood-700); color: #FBF6EF; transform: rotate(-45deg); }
@media (min-width: 64em) {
  .index-row { grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 7fr) auto; padding: 1.75rem 0; align-items: center; }
  .index-row__desc { max-width: 60ch; }
  .index-row__desc { grid-column: 3; grid-row: 1; }
  .index-row__meta { grid-column: 3; grid-row: 2; margin-top: 0; }
  .index-row__arrow { grid-column: 4; grid-row: 1 / span 2; }
  .index-row__title { grid-row: 1 / span 2; align-self: center; }
  .index-row__num { grid-row: 1 / span 2; align-self: center; }
}

/* Night (dark) sections */
.night { background-color: var(--night); color: var(--on-night); position: relative; isolation: isolate; }
.night::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .55; mix-blend-mode: screen; pointer-events: none; z-index: -1; }
.night .display, .night .h1, .night .h2, .night .h3, .night .h4 { color: var(--on-night); }
.night .muted, .night .lead, .night .section-head__intro { color: var(--on-night-2); }
.night .faint { color: var(--on-night-2); }
.night .accent { color: var(--blood-300); }

/* Botanical plate frame (used on Home + About) */
.plate { --plate-bg: var(--raised); position: relative; display: flex; flex-direction: column; background: var(--plate-bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem 1rem 1.25rem; }
.plate__no { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--ink-3); display: flex; justify-content: space-between; }
.plate__art { flex: 1; display: grid; place-items: center; padding: .5rem 0 1rem; }
.plate__art svg { width: 100%; height: auto; max-height: 360px; overflow: hidden; }
.plate__latin { font-family: var(--font-display); font-style: italic; font-variation-settings: var(--fr-italic); font-size: var(--step-1); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.plate__common { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: .3rem; }
/* Botanical SVG drawing primitives */
.bot-line { fill: var(--plate-bg, var(--paper)); stroke: var(--ink); stroke-width: 1.05; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bot-line.bot-open { fill: none; }
.bot-vein { fill: none; stroke: var(--ink); stroke-width: .6; stroke-linecap: round; opacity: .75; vector-effect: non-scaling-stroke; }
.bot-wash, .bot-wash--blood, .bot-wash--earth, .bot-wash--wine { stroke: none; mix-blend-mode: multiply; }
.bot-wash { fill: var(--moss-300); opacity: .55; }
.bot-wash--blood { fill: var(--blood-500); opacity: .28; }
.bot-wash--earth { fill: #C9A57A; opacity: .4; }
.bot-wash--wine { fill: #5A1F35; opacity: .3; }
.bot-tex .bot-wash, .bot-tex .bot-wash--blood, .bot-tex .bot-wash--earth, .bot-tex .bot-wash--wine { filter: url(#bot-tex); }

/* HCP call-to-action panel (shared; was home.css) */
.cta { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem); background: radial-gradient(90% 120% at 100% 0%, #6B1220 0%, #3A0811 45%, #1E0509 100%); color: var(--on-night); isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .5; mix-blend-mode: screen; pointer-events: none; z-index: -1; }
.cta__art { position: absolute; right: -4%; top: 50%; width: min(52%, 560px); transform: translateY(-50%); opacity: .5; z-index: -1; color: #EE8D95; pointer-events: none; }
@media (max-width: 47.99em) { .cta__art { width: 90%; right: -30%; top: 12%; transform: none; opacity: .22; } }
.cta__title { max-width: 14ch; color: var(--on-night); }
.cta__title em { color: #F5B3B8; }
.cta__body { margin-top: var(--space-m); color: #E8D9CF; max-width: 42ch; font-size: var(--step-1); line-height: 1.5; }
.cta__actions { margin-top: var(--space-xl); }
.cta__meta { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: #D9C6BB; }
.cta .eyebrow { color: #E8D9CF; }
.cta .eyebrow::before { background: #F5B3B8; }
.cta .ph { background-image: linear-gradient(90deg, rgb(240 200 120 / .7) 0 2px, transparent 2px 5px); }

/* Reference list wrapper (shared) */
.refs-wrap { padding-top: 0; }
.refs-wrap .acc > summary { font-size: var(--step-2); }

/* In-page sticky sub-navigation with scroll-spy (shared)
   <nav class="subnav" aria-label="On this page" data-subnav><div class="container"><ul class="subnav__list" role="list">
   <li><a class="subnav__link" href="#section">Label</a></li>…</ul></div></nav> */
.subnav { position: sticky; top: var(--header-h-condensed); z-index: var(--z-sticky); height: var(--subnav-h); background: rgb(244 239 229 / .97); /* no backdrop-filter: only the header blurs */ box-shadow: 0 1px 0 var(--line); }
.subnav .container { height: 100%; }
.subnav__list { list-style: none; padding: 0; height: 100%; display: flex; align-items: center; gap: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__link { display: inline-flex; align-items: center; height: 36px; padding: 0 .85rem; border-radius: var(--r-pill); white-space: nowrap; text-decoration: none; font-size: var(--step--1); font-weight: 500; color: var(--ink-2); transition: background-color var(--dur-2), color var(--dur-2); }
.subnav__link:hover { color: var(--ink); background: rgb(27 23 20 / .05); }
.subnav__link[aria-current="location"] { color: var(--on-night); background: var(--ink); }
html:has(.subnav) { scroll-padding-top: calc(var(--header-h-condensed) + var(--subnav-h) + 1.25rem); }

/* Photo slot — neutral frame where real product photography will go.
   Never draw a product here. Swap the label for <img> when photos arrive:
   <figure class="photo-slot [photo-slot--landscape|--square]">
     <div class="photo-slot__frame">
       <span class="photo-slot__marks" aria-hidden="true"></span>
       <span class="photo-slot__label"><span class="ph" title="…">Product photography — to be supplied</span></span>
       <!-- later: <img src="…" alt="…" width height> (fills the frame, object-fit: cover) -->
     </div>
     <figcaption class="figcap">…</figcaption>
   </figure> */
.photo-slot { margin: 0; }
.photo-slot__frame {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background-color: var(--paper-2);
  background-image: var(--grain), radial-gradient(120% 90% at 50% 38%, rgb(255 255 255 / .55), transparent 62%), var(--mottle);
  box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--line);
}
.photo-slot--landscape .photo-slot__frame { aspect-ratio: 3 / 2; }
.photo-slot--square .photo-slot__frame { aspect-ratio: 1; }
.photo-slot--compact .photo-slot__frame { box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--line); border-radius: var(--r-sm); }
.photo-slot--compact .photo-slot__marks { inset: 11px; --l: 9px; }
.photo-slot--compact .photo-slot__label { gap: .6rem; padding: .5rem; font-size: 11px; }
.photo-slot--compact .photo-slot__label::before { width: 22px; height: 22px; }
/* Real image fills the frame — a plain <img> or (Home + Product) a <picture>-wrapped
   <img> that is a grandchild. Shared so the Product page reuses the same classes.
   Default cover; add .photo-slot--contain to letterbox instead. */
.photo-slot__frame > picture, .photo-slot__frame picture, .photo-slot__frame > img, .photo-slot__frame picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.photo-slot--contain .photo-slot__frame img { object-fit: contain; }
.photo-slot__frame:has(picture), .photo-slot__frame:has(> img) { box-shadow: inset 0 0 0 1px var(--line); background-image: none; }
.photo-slot__frame:has(picture) .photo-slot__marks, .photo-slot__frame:has(picture) .photo-slot__label,
.photo-slot__frame:has(> img) .photo-slot__marks, .photo-slot__frame:has(> img) .photo-slot__label { display: none; }
.photo-slot__marks {
  --c: var(--ink-3); --l: 18px; position: absolute; inset: 22px; pointer-events: none; opacity: .7;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px, linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px, linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px, linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px, linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
}
.photo-slot__label {
  position: relative; display: grid; justify-items: center; gap: .9rem; padding: 1rem 1.5rem; max-width: 30ch; text-align: center; text-wrap: balance;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; line-height: 1.6; color: var(--ink-2);
}
.photo-slot__label::before { /* registration mark */
  content: ""; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink-3);
  background: linear-gradient(var(--ink-3), var(--ink-3)) center / 1px 100% no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) center / 100% 1px no-repeat;
  opacity: .6;
}

/* Distributor dialog — built by site.js from <template id="distributor-dialog">
   on pages with <html data-distributor-country>. Native <dialog> + showModal(). */
.ddialog {
  width: min(34rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
}
.ddialog:focus, .ddialog:focus-visible { outline: none; }
.ddialog::backdrop { background: rgb(27 23 20 / .46); }
.ddialog__card {
  position: relative; max-height: calc(100dvh - 2rem); overflow: auto;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); border-radius: var(--r-lg);
  background-color: var(--paper); background-image: var(--grain);
  border-top: 3px solid var(--blood-700); box-shadow: var(--shadow-3);
}
.ddialog__x {
  position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer;
}
.ddialog__x:hover { background: var(--paper-2); color: var(--ink); }
.ddialog__x svg { width: 16px; height: 16px; }
.ddialog__body > :first-child { margin-top: 0; }
.ddialog__body .eyebrow { margin-bottom: var(--space-xs); }
.ddialog__body h2, .ddialog__body h3 { margin: 0 2.5rem var(--space-s) 0; font-family: var(--font-display); font-size: var(--step-3); line-height: var(--lh-tight); font-weight: 420; letter-spacing: -.01em; text-wrap: balance; }
.ddialog__body p { margin: 0 0 var(--space-s); color: var(--text-2); max-width: 46ch; text-wrap: pretty; }
.ddialog__mail { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-2); overflow-wrap: anywhere; }
.ddialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: var(--space-m); }
@media (max-width: 39.99em) {
  .ddialog { margin: auto auto 1rem; }
  .ddialog__actions .btn--primary { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) {
  .ddialog[open] { animation: ddialog-in var(--dur-4) var(--ease-out); }
  .ddialog[open]::backdrop { animation: ddialog-fade var(--dur-3) ease-out; }
}
@keyframes ddialog-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes ddialog-fade { from { opacity: 0; } }

/* 10 — Placeholder marker ---------------------------------------------------
   Every unverified fact: <span class="ph" title="Placeholder — confirm">…</span> + HTML comment */
.ph {
  position: relative;
  background-image: linear-gradient(90deg, rgb(160 104 22 / .55) 0 2px, transparent 2px 5px);
  background-size: 5px 1.5px; background-repeat: repeat-x; background-position: 0 100%;
  padding-bottom: 1px; cursor: help;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph::after { /* tiny marker */
  content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .18em; vertical-align: .45em;
  border-radius: 50%; border: 1px solid rgb(160 104 22 / .85); background: rgb(240 200 120 / .5);
}
.ph:hover, .ph:focus-visible, .ph.is-tip { background-color: rgb(240 200 120 / .22); }
.ph:focus-visible { outline-offset: 2px; }
.night .ph, .site-footer .ph { background-image: linear-gradient(90deg, rgb(240 200 120 / .6) 0 2px, transparent 2px 5px); }
.ph-tip {
  position: fixed; z-index: var(--z-popover); pointer-events: none;
  padding: .4rem .6rem; border-radius: 6px; background: var(--ink); color: var(--on-night);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em; white-space: nowrap;
  box-shadow: var(--shadow-2); animation: pop-in var(--dur-1) var(--ease-out);
}

/* Split headlines keep identical line structure in every mode (JS, no-JS, reduced motion) */
.split-lines .line, .split-lines .line > span { display: block; }

/* 11 — Motion & reveal ------------------------------------------------------
   Content is visible by default. Only when JS has run (html.js) and motion is allowed
   do [data-reveal] elements start hidden, then .is-in reveals them. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .js [data-reveal="fade"] { transform: none; }
  .js [data-reveal="scale"] { transform: scale(.965); }
  .js [data-reveal="left"] { transform: translate3d(-24px, 0, 0); }
  .js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1400ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
  /* Split headline lines: wrap each line in <span class="line"><span>…</span></span> */
  .js .split-lines .line { overflow: hidden; padding: .02em .1em .2em 0; margin-bottom: -.2em; }
  .js .split-lines .line > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1100ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .split-lines.is-in .line > span { transform: none; }
  /* Line drawing for SVG strokes: give paths pathLength="1" and class .draw */
  .js [data-reveal-draw] .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2200ms var(--ease-in-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal-draw].is-in .draw { stroke-dashoffset: 0; }
  .js [data-reveal-draw] [class^="bot-wash"] { opacity: 0; transition: opacity 1600ms var(--ease-out) 900ms; }
  .js [data-reveal-draw].is-in .bot-wash { opacity: .55; }
  .js [data-reveal-draw].is-in .bot-wash--blood { opacity: .28; }
  .js [data-reveal-draw].is-in .bot-wash--earth { opacity: .4; }
  .js [data-reveal-draw].is-in .bot-wash--wine { opacity: .3; }
}
@media print {
  .js [data-reveal], .js .split-lines .line > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal-draw] .draw { stroke-dashoffset: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 12 — Utilities ------------------------------------------------------------ */
.mt-0 { margin-top: 0 !important; } .mt-s { margin-top: var(--space-s); } .mt-m { margin-top: var(--space-m); } .mt-l { margin-top: var(--space-l); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); }
.mb-0 { margin-bottom: 0 !important; }
.center { text-align: center; } .mx-auto { margin-inline: auto; }
.nowrap { white-space: nowrap; }
.hide-sm { display: none; } @media (min-width: 48em) { .hide-sm { display: revert; } .hide-md-up { display: none; } }
.icon { width: 1em; height: 1em; flex: none; }
.hairline-top { border-top: 1px solid var(--line); }

/* 13 — Print ---------------------------------------------------------------- */
@media print {
  body { background: #fff; padding-top: 0; }
  .site-header, .nav-toggle, .skip-link, .site-footer .footer-wordmark { display: none !important; }
  .night, .site-footer { background: #fff !important; color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* Header-on-dark: mobile menu panel stays paper, so keep its links ink */
@media (max-width: 63.99em) {
  .site-header.is-on-dark .site-nav__link { color: var(--ink); }
  .site-header.is-on-dark .site-nav__link[aria-current="page"] { color: var(--blood-700); }
}
/* Pause ambient animation in scopes that are off-screen (site.js toggles .is-paused on [data-anim-scope]) */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* Brand logo swap hook (real producer logo + Ankaferd wordmark arriving).
   Drop-in images keep the lockup box, so no layout shift:
   .brand__mark  -> <img class="brand__mark" width="30" height="38" alt="">   (producer mark)
   .brand__text  -> <img class="brand__logo" alt="Ankaferd Blood Stopper">    (wordmark; replaces the two text spans)
   The <a class="brand"> wrapper and aria-label stay; the <img> gets alt="" when the wordmark already names the brand. */
img.brand__mark { object-fit: contain; }
/* Two true-alpha lockups: colour for the paper header, white knockout for dark bands. */
.brand__logo { flex: none; line-height: 0; }
.brand__logo--color { display: inline-flex; }
.brand__logo--white { display: none; }
.brand__logo img { height: 2.25rem; width: auto; display: block; transition: height var(--dur-3) var(--ease-out); }
.is-condensed .brand__logo img { height: 1.85rem; }
.site-header.is-on-dark .brand__logo--color { display: none; }
.site-header.is-on-dark .brand__logo--white { display: inline-flex; }

/* At the very top, before the header condenses on scroll, always keep the
   dark logo and dark menu so they stay clearly visible on the light hero —
   even if a dark band is mistakenly detected beneath the header. Once the
   page is scrolled (header condensed), the on-dark (white) treatment applies
   as before over dark sections. */
.site-header:not(.is-condensed) .brand,
.site-header:not(.is-condensed) .site-nav__link,
.site-header:not(.is-condensed) .lang__btn,
.site-header:not(.is-condensed) .nav-toggle { color: var(--ink); }
.site-header:not(.is-condensed) .brand__sub { color: var(--ink-2); }
.site-header:not(.is-condensed) .brand__logo--color { display: inline-flex; }
.site-header:not(.is-condensed) .brand__logo--white { display: none; }

/* ==========================================================================
   Narrow-phone overflow fixes (<= 30em). Long DE/NL/SK compounds must wrap.
   Selectors are doubled-up / scoped so they win over page CSS loaded after site.css.
   ========================================================================== */
@media (max-width: 30em) {
  main h1, main h2, main h3, main .h1, main .h2, main .h3, main .eyebrow,
  .lsec__n, .lsec__title, .lsec__status, .company__intro,
  .origin__statement, .origin__src, .section-head__intro {
    overflow-wrap: anywhere; hyphens: auto; min-width: 0; max-width: 100%;
  }
  /* legal § header row */
  .lsec__head > * { min-width: 0; }
  .lsec__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .lsec__status { flex-wrap: wrap; }
  /* nowrap spans (site.js .nobr / built .nowrap) may break at narrow widths */
  main .nobr, main .nowrap { white-space: normal; overflow-wrap: anywhere; }
  /* contact: single-column company definition list */
  .company__dl, .company__dl > div, .company__dl dt, .company__dl dd { display: block; min-width: 0; max-width: 100%; }
  .company__dl > div { display: grid; grid-template-columns: minmax(0, 1fr); }
  .company__dl dt, .company__dl dd { overflow-wrap: anywhere; hyphens: auto; }
  .company__grid > * { min-width: 0; }
  /* product: eyebrow / headings / step nav */
  .pnav__list { max-width: 100vw; }
  .pnav__link span { white-space: nowrap; }
  /* generic grid/flex children may shrink */
  .origin__grid > *, .ab-origin__grid > *, .ab-company__grid > * { min-width: 0; }
  .origin__meta { min-width: 0; }
  /* about: rotated/translated specimen sheets poke ~3px past the viewport; clip locally (not on html/body) */
  .specimens { overflow-x: clip; }
  .specimen__auth { white-space: normal; }
}