/* =========================================================================
   rozacija.lv — design system
   -------------------------------------------------------------------------
   Aesthetic: a printed patient handbook. Warm paper, deep ink, one clay-rose
   accent used sparingly. The subject of this site is facial redness, so the
   palette stays deliberately calm about red: the accent never shouts, and
   large red fields are avoided entirely.

   Type: Newsreader (variable serif) carries headings AND long-form body —
   this is a reading site. Karla handles chrome, labels and tabular data so
   the two roles stay visually separate.
   ========================================================================= */

/* --- Fonts: self-hosted. Google's CDN would expose visitor IPs to a third
       party on every page load, which is not appropriate for a health site
       read by EU users. --------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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: 'Newsreader';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/newsreader-normal-latin.woff2') format('woff2');
  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: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  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: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-normal-latin.woff2') format('woff2');
  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;
}

/* --- Cyrillic pair (Russian pages) --------------------------------------
   Neither Newsreader nor Karla ships Cyrillic, so the Russian pages would
   silently fall back to whatever system face the reader happens to have.
   Literata and Golos Text cover Cyrillic properly and are close enough in
   spirit that the two language versions read as one site.

   These are swapped in wholesale under [lang="ru"] rather than merged into
   the Latin families by unicode-range: a Russian page contains plenty of
   Latin (Demodex, SPF, Rīga, Jeļena), and mixing two typefaces inside one
   sentence looks worse than committing to one face per language. --------- */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/literata-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/literata-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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: 'Literata';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/literata-normal-latin.woff2') format('woff2');
  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: 'Literata';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/literata-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/literata-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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: 'Literata';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/literata-italic-latin.woff2') format('woff2');
  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: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-text-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-text-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, 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: 'Golos Text';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/golos-text-normal-latin.woff2') format('woff2');
  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;
}

/* --- Tokens ------------------------------------------------------------- */

:root {
  --paper:       #fbf8f4;
  --paper-2:     #f5efe7;
  --paper-3:     #eee6db;
  --ink:         #241d1a;
  --ink-2:       #574c46;
  --ink-3:       #8a7c74;
  --rule:        #e4dbd0;
  --rule-strong: #d3c6b7;
  --accent:      #b0503f;
  --accent-deep: #8e3e30;
  --accent-wash: #f7e8e2;
  --sage:        #4f6353;
  --sage-wash:   #e8eee7;
  --shadow: 0 1px 2px rgba(36, 29, 26, .04), 0 8px 24px -12px rgba(36, 29, 26, .16);

  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:  'Karla', ui-sans-serif, 'Segoe UI', Helvetica, Arial, sans-serif;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 78rem;

  color-scheme: light;
}

/* Russian pages swap the whole type system. Declared on [lang] so it applies
   to the document and anything inside it, and so a stray Russian block inside
   a Latvian page could opt in with lang="ru" if ever needed. */
[lang='ru'] {
  --serif: 'Literata', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'Golos Text', ui-sans-serif, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Literata runs slightly larger on the body than Newsreader at the same
     px size, so ease the scale back a touch to keep the two versions even. */
  font-size: 0.98em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper:       #16120f;
    --paper-2:     #1e1814;
    --paper-3:     #27201a;
    --ink:         #f2ebe3;
    --ink-2:       #bcafa4;
    --ink-3:       #8b7d72;
    --rule:        #352c25;
    --rule-strong: #4a3d33;
    --accent:      #e08a76;
    --accent-deep: #efa894;
    --accent-wash: #2c1e19;
    --sage:        #9bb6a0;
    --sage-wash:   #1c2620;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --paper:       #16120f;
  --paper-2:     #1e1814;
  --paper-3:     #27201a;
  --ink:         #f2ebe3;
  --ink-2:       #bcafa4;
  --ink-3:       #8b7d72;
  --rule:        #352c25;
  --rule-strong: #4a3d33;
  --accent:      #e08a76;
  --accent-deep: #efa894;
  --accent-wash: #2c1e19;
  --sage:        #9bb6a0;
  --sage-wash:   #1c2620;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* The hero's decorative bloom is deliberately wider than the viewport.
     `clip` contains it without creating a scroll container — `hidden` here
     would turn <html> into one and break the sticky masthead. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1.0625rem, .98rem + .38vw, 1.1875rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* A faint paper grain. Kept extremely low-contrast — it should read as
   texture, never as noise, and must not interfere with body text. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body::before { opacity: .05; }
}
:root[data-theme='dark'] body::before { opacity: .05; }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

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

/* --- Layout ------------------------------------------------------------- */

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 58rem; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .7rem 1.1rem;
  z-index: 100;
  font-family: var(--sans);
  font-size: .85rem;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- Masthead ----------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.4rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: .05em;
  flex-shrink: 0;
}
.wordmark__dot { color: var(--accent); }
.wordmark__tld {
  font-family: var(--sans);
  font-size: .58em;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1.35rem);
  margin-left: auto;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .005em;
}

.nav a {
  text-decoration: none;
  color: var(--ink-2);
  padding: .35rem 0;
  position: relative;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current='page'] { color: var(--ink); }
.nav a[aria-current='page']::after { transform: scaleX(1); background: var(--accent); }

.nav__cta {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  padding: .5rem .95rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- Language switcher --------------------------------------------------
   Two hard-coded links rather than a dropdown: with exactly two languages a
   select is more machinery than the job needs, and a plain <a> per language
   is what search engines want to see alongside the hreflang tags. */
.lang {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.lang a {
  padding: .38rem .62rem;
  text-decoration: none;
  color: var(--ink-3);
  line-height: 1.25;
  transition: background .18s ease, color .18s ease;
}
.lang a + a { border-left: 1px solid var(--rule); }
.lang a:hover { color: var(--ink); background: var(--paper-2); }
.lang a[aria-current='true'] {
  background: var(--ink);
  color: var(--paper);
}

.theme-toggle {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink-2);
  transition: border-color .2s ease, color .2s ease;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--rule-strong); color: var(--ink); }
.theme-toggle svg { width: 1rem; height: 1rem; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme='light']) .theme-toggle .icon-moon { display: none; }
}

.nav-toggle { display: none; }

/* Base (desktop) layout must be declared BEFORE the mobile override below —
   media queries add no specificity, so a later plain rule would win and leave
   the mobile sheet permanently open. */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1.35rem);
}

@media (max-width: 62rem) {
  .nav__links {
    position: fixed;
    inset: 4.4rem 0 auto;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem var(--gutter) 1.25rem;
    display: none;
    box-shadow: var(--shadow);
    max-height: calc(100dvh - 4.4rem);
    overflow-y: auto;
  }
  .nav__links[data-open='true'] { display: flex; }
  .nav__links a {
    padding: .8rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: .95rem;
  }
  .nav__links a::after { display: none; }
  .nav-toggle {
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    color: var(--ink-2);
  }
  .nav-toggle svg { width: 1rem; height: 1rem; }
}

/* --- Typography --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.021em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.5rem + 3.9vw, 4.15rem); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.85vw, 2.6rem); font-weight: 500; }
h3 { font-size: clamp(1.28rem, 1.12rem + .62vw, 1.6rem); }
h4 { font-size: 1.1rem; letter-spacing: -.01em; }

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.2rem, 1.05rem + .62vw, 1.48rem);
  line-height: 1.52;
  color: var(--ink-2);
  font-weight: 300;
  letter-spacing: -.008em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
}

.eyebrow--muted { color: var(--ink-3); }

/* Editorial section numerals: 01 / 02 / 03 set beside the heading rule. */
.section-mark {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.section-mark__num {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  flex-shrink: 0;
  padding-top: .35em;
  font-variant-numeric: tabular-nums;
}
.section-mark h2 { flex: 1; }

/* --- Prose -------------------------------------------------------------- */

.prose > * + * { margin-top: 1.15em; }
.prose > h2 { margin-top: 2.6em; }
.prose > h3 { margin-top: 2em; }
.prose > h2 + p, .prose > h3 + p, .prose > h4 + p { margin-top: .7em; }
.prose p, .prose li { max-width: var(--measure); }

.prose a:not(.btn):not(.ref) {
  color: var(--accent-deep);
  text-decoration: none;
  background-image: linear-gradient(var(--accent) 0 0);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size .25s ease;
}
.prose a:not(.btn):not(.ref):hover { background-size: 100% 2px; }

.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--accent); }
.prose ul li::marker { font-size: .9em; }

.prose strong { font-weight: 600; }

.prose em { font-style: italic; }

blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.4rem;
  font-style: italic;
  color: var(--ink-2);
  font-size: 1.12em;
  line-height: 1.5;
}
blockquote cite {
  display: block;
  margin-top: .7rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 600;
}

/* Footnote-style source references. The single strongest trust signal on a
   health site: every clinical claim points at where it came from. */
.ref {
  font-family: var(--sans);
  font-size: .62em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  color: var(--accent);
  text-decoration: none;
  padding: 0 .1em;
  transition: color .18s ease;
}
.ref:hover { color: var(--accent-deep); text-decoration: underline; }

/* --- Article grid with margin notes ------------------------------------- */

.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14.5rem;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 64rem) {
  .article { grid-template-columns: minmax(0, 1fr); }
}

.margin-notes { position: sticky; top: 6rem; }
@media (max-width: 64rem) {
  .margin-notes { position: static; }
}

.note {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--ink-2);
  border-top: 2px solid var(--accent);
  padding-top: .8rem;
}
.note + .note { margin-top: 1.75rem; }
.note__title {
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: .3rem;
  letter-spacing: .01em;
}
.note p + p { margin-top: .6rem; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
}

/* A soft radial bloom behind the hero — the only place the accent occupies
   real estate, and even here it is barely there. */
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: min(46rem, 80vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-wash) 0%, transparent 68%);
  opacity: .85;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

.hero h1 { margin-top: 1.1rem; }
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero .lede { margin-top: 1.5rem; max-width: 32rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.25rem;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .78rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: .95rem; height: .95rem; }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent-deep); }

.btn--ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }

/* --- Quick-facts card --------------------------------------------------- */

.facts {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.6rem 1.65rem 1.4rem;
  box-shadow: var(--shadow);
}
.facts__title {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--rule);
}
.facts dl { margin-top: .3rem; }
.facts div {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.facts dt {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-2);
  line-height: 1.4;
  flex: 1;
}
.facts dd {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.facts dd small {
  font-size: .5em;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
}

/* --- Cards / grids ------------------------------------------------------ */

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.55rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  text-decoration: none;
  position: relative;
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
a.card:hover {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.card h3 { font-size: 1.22rem; }
.card p {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-2);
  font-family: var(--sans);
}
.card__num {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.card__arrow {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
  padding-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: gap .2s ease;
}
a.card:hover .card__arrow { gap: .7rem; }

/* --- Phenotype cards (with face diagrams) ------------------------------- */

.pheno {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding: 1.9rem 0;
  border-top: 1px solid var(--rule);
}
@media (max-width: 40rem) {
  .pheno { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .pheno__fig { width: 6.5rem; }
}
.pheno__fig {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .5rem;
}
.pheno__fig svg { width: 100%; height: auto; }
.pheno h3 { margin-bottom: .15rem; }
.pheno__latin {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  display: block;
  margin-bottom: .75rem;
}
.pheno p { max-width: var(--measure); }
.pheno p + p { margin-top: .75rem; }

/* Face-diagram parts, driven by CSS so both themes stay legible. */
.face-outline { fill: var(--paper-3); stroke: var(--rule-strong); stroke-width: 1.5; }
.face-feature { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; }
.face-affected { fill: var(--accent); opacity: .3; }
.face-affected--strong { fill: var(--accent); opacity: .55; }

/* --- Trigger bar chart -------------------------------------------------- */

.bars { margin-top: 2rem; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 34rem) {
  .bar-row { grid-template-columns: minmax(0, 1fr) 2.6rem; row-gap: .3rem; }
  .bar-row__track { grid-column: 1 / -1; order: 3; }
}
.bar-row__label {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-2);
  line-height: 1.35;
}
.bar-row__track {
  height: .5rem;
  background: var(--paper-3);
  border-radius: 999px;
  overflow: hidden;
}
.bar-row__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width 1.1s cubic-bezier(.2, .7, .3, 1);
}
.bars.in-view .bar-row__fill { width: var(--pct); }
.bar-row__val {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Callouts ----------------------------------------------------------- */

.callout {
  border-radius: 4px;
  padding: 1.35rem 1.5rem;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.62;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.callout p { max-width: none; }
.callout p + p { margin-top: .7rem; }
.callout__title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  letter-spacing: .01em;
}
.callout__title svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.callout--warn { background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.callout--warn .callout__title { color: var(--accent-deep); }
.callout--care { background: var(--sage-wash); border-color: color-mix(in srgb, var(--sage) 30%, transparent); }
.callout--care .callout__title { color: var(--sage); }

/* --- Myth / fact -------------------------------------------------------- */

.myth {
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
}
@media (max-width: 48rem) {
  .myth { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}
.myth__claim {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-style: italic;
  color: var(--ink-3);
  line-height: 1.4;
  position: relative;
}
.myth__tag {
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .55rem;
  font-style: normal;
}
.myth__claim .myth__tag { color: var(--ink-3); }
.myth__fact .myth__tag { color: var(--sage); }
.myth__fact { font-size: 1rem; }
.myth__fact p { max-width: none; }
.myth__fact p + p { margin-top: .6rem; }

/* --- FAQ ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1rem + .3vw, 1.24rem);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.35;
  position: relative;
  transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-deep); }
.faq summary::after {
  content: '';
  position: absolute;
  right: .35rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  margin-top: -.35rem;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 0 1.5rem; }
.faq__body > * + * { margin-top: .9em; }
.faq__body p, .faq__body li { max-width: var(--measure); font-size: .98rem; }
.faq__body ul, .faq__body ol { padding-left: 1.15rem; }
.faq__body li + li { margin-top: .4em; }
.faq__body li::marker { color: var(--accent); }
.faq__body a {
  color: var(--accent-deep);
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.faq details[open] .faq__body { animation: reveal .32s ease both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- Practitioner ------------------------------------------------------- */

.practitioner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
}
@media (max-width: 52rem) {
  .practitioner { grid-template-columns: minmax(0, 1fr); }
}
.practitioner__portrait {
  aspect-ratio: 4 / 5;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 3px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-3);
  line-height: 1.6;
  overflow: hidden;
}
/* The padding above frames the "add a photo here" placeholder. Once a real
   portrait is in place it should bleed to the edges instead. */
.practitioner__portrait:has(img) { padding: 0; }
.practitioner__portrait img { width: 100%; height: 100%; object-fit: cover; }
.practitioner__name { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem); margin-top: .5rem; }
.practitioner__role {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-2);
  margin-top: .5rem;
  line-height: 1.55;
}
.practitioner__reg {
  font-family: var(--sans);
  font-size: .74rem;
  color: var(--ink-3);
  margin-top: .55rem;
  letter-spacing: .02em;
}
.practitioner__body { font-size: 1rem; }
.practitioner__body p + p { margin-top: .8rem; }

.contact-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: grid;
  gap: .6rem;
  font-family: var(--sans);
  font-size: .88rem;
}
.contact-list li { display: flex; gap: .7rem; align-items: flex-start; max-width: none; }
.contact-list svg { width: 1rem; height: 1rem; color: var(--accent); flex-shrink: 0; margin-top: .28em; }
.contact-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.contact-list a:hover { border-color: var(--accent); color: var(--accent-deep); }

/* --- Tables ------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-top: 1.5rem; }
table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .87rem;
  min-width: 34rem;
}
th, td {
  text-align: left;
  padding: .8rem 1rem .8rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.5;
}
th {
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule-strong);
}
td strong { font-weight: 600; color: var(--ink); }

/* --- Sources list ------------------------------------------------------- */

.sources { counter-reset: src; list-style: none; padding: 0; }
.sources li {
  counter-increment: src;
  position: relative;
  padding-left: 2.3rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46rem;
}
.sources li::before {
  content: counter(src);
  position: absolute;
  left: 0;
  top: .8rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
}
.sources a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.sources a:hover { border-color: var(--accent); color: var(--accent-deep); }
.sources li:target { background: var(--accent-wash); }

/* --- Page header -------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.page-head h1 { margin-top: .9rem; max-width: 20ch; }
.page-head .lede { margin-top: 1.35rem; max-width: 40rem; }

.breadcrumb {
  font-family: var(--sans);
  font-size: .74rem;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.breadcrumb a { color: var(--ink-3); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-deep); }
.breadcrumb span { margin-inline: .45rem; opacity: .5; }

/* --- Section spacing ---------------------------------------------------- */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--tinted { background: var(--paper-2); border-block: 1px solid var(--rule); }

/* --- On-this-page ------------------------------------------------------- */

.toc {
  font-family: var(--sans);
  font-size: .82rem;
  border-top: 2px solid var(--ink);
  padding-top: .85rem;
}
.toc__title {
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .8rem;
}
.toc ol { list-style: none; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block;
  padding: .4rem 0;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color .18s ease, padding-left .18s ease;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero) '  ';
  color: var(--accent);
  font-weight: 700;
  font-size: .72rem;
}
.toc a:hover { color: var(--ink); padding-left: .25rem; }

/* --- CTA band ----------------------------------------------------------- */

.cta-band {
  background: var(--ink);
  color: var(--paper);
  border-radius: 4px;
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 52rem) {
  .cta-band { grid-template-columns: minmax(0, 1fr); }
}
.cta-band h2 { color: var(--paper); max-width: 18ch; }
.cta-band p {
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  margin-top: .9rem;
  max-width: 34rem;
  font-size: 1.02rem;
}
.cta-band .btn--primary { background: var(--paper); color: var(--ink); }
.cta-band .btn--primary:hover { background: var(--accent); color: var(--paper); }
.cta-band .btn--ghost {
  border-color: color-mix(in srgb, var(--paper) 34%, transparent);
  color: var(--paper);
}
.cta-band .btn--ghost:hover {
  border-color: var(--paper);
  background: color-mix(in srgb, var(--paper) 10%, transparent);
}

/* --- Disclaimer --------------------------------------------------------- */

.disclaimer {
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.65;
  color: var(--ink-2);
  border: 1px dashed var(--rule-strong);
  border-radius: 4px;
  padding: 1.25rem 1.4rem;
  background: var(--paper-2);
}
.disclaimer strong { color: var(--ink); font-weight: 700; }
.disclaimer p { max-width: none; }
.disclaimer p + p { margin-top: .6rem; }

/* --- Footer ------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 3.75rem) 2rem;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  font-family: var(--sans);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
@media (max-width: 56rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
}
@media (max-width: 34rem) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}
.footer__about {
  font-size: .84rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 24rem;
  margin-top: .9rem;
}
.footer h4 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: .85rem;
  transition: color .18s ease;
}
.footer a:hover { color: var(--accent-deep); }
.footer__bottom {
  margin-top: 2.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .76rem;
  color: var(--ink-3);
}

/* --- Load-in animation -------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .75s cubic-bezier(.16, .8, .3, 1) forwards;
}
.reveal:nth-child(1) { animation-delay: .04s; }
.reveal:nth-child(2) { animation-delay: .12s; }
.reveal:nth-child(3) { animation-delay: .2s; }
.reveal:nth-child(4) { animation-delay: .28s; }
@keyframes rise {
  to { opacity: 1; transform: none; }
}

.u-mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.u-mt-md { margin-top: 1.5rem; }
.u-center { text-align: center; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .masthead, .footer, .cta-band, .theme-toggle, .nav { display: none; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
}