:root {
    --ivory:      #FDFBF7;
    --ivory-warm: #F6F1E8;
    --ink:        #2A2622;
    --ink-soft:   #5A524A;
    --teal:       #14403B;
    --teal-soft:  #A9C4BE;
    --accent:     #A34A18;
    --accent-lit: #E8A25C;
    --rule:       rgba(42,38,34,0.14);

    --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --container: min(92%, 1180px);

    /* The reading measure, in ONE place. Body prose runs at 20px (Annette's
       standard, 2026-08-01) and this cap is what keeps it inside 65 to 75
       characters per line at that size.

       It is set in PIXELS on purpose. A ch value is the width of the digit
       zero in whatever font the element happens to inherit, so the same ch
       number resolves differently in the prose (system sans) than in a box
       running at a smaller size, and the column silently drifts. That exact
       bug is documented further down on the quiz form.

       648px was found by sweeping the real built pages in headless Chromium at
       1440px and reading back where the browser actually broke each line, not
       by calculating it. Every article and door page lands at 68 to 71.

       Do NOT tune this against a characters-per-line figure derived from
       (text length / line count). That average pulls in every paragraph's
       ragged final line, so it reads 8 to 20 percent LOW, and a column tuned
       to it really renders around 80. Measure real line breaks. */
    --measure: 648px;
  }

  /* The landing page needs its own, narrower measure, and it is the only page
     that does. Its copy is punchier than the articles (shorter words, no
     citations, fewer long clinical terms) so the average character is narrower
     and the same 648px column renders about 80 characters a line instead of 70.
     At 570px every block on this page measures between 68 and 73. */
  body.home { --measure: 570px; }

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

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.25rem;
    line-height: 1.65;
    /* never let a child force sideways scroll */
    overflow-wrap: break-word;
  }

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

  .wrap { width: var(--container); margin-inline: auto; }

  /* ---------- header. scrolls away. nothing sticky anywhere on this page ---------- */
  .site-head {
    padding: 1.6rem 0 0.4rem;
  }
  .site-head .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
  }
  .wordmark {
    font-family: var(--font-display);
    font-size: 1.06rem;
    letter-spacing: 0.01em;
    margin: 0;
    font-weight: 600;
  }
  .wordmark span { color: var(--accent); }
  .head-note {
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0;
  }

  /* ---------- hero ---------- */
  .hero {
    padding: clamp(2.6rem, 7vw, 5.5rem) 0 clamp(2.4rem, 5vw, 3.6rem);
    border-bottom: 1px solid var(--rule);
  }
  /* Split hero: words on the left, Annette on the right. The photo is a
     portrait with her centred, so laying type over it would sit on her face.
     Two columns keeps both legible and reads more editorial anyway. */
  .hero .wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    align-items: center;
  }
  @media (min-width: 900px) {
    .hero .wrap {
      grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
      gap: 3.4rem;
    }
  }

  .hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.05rem, 4.7vw, 3.4rem);
    line-height: 1.07;
    letter-spacing: -0.017em;
    margin: 0 0 1.1rem;
    font-weight: 600;
    /* never hyphenate the display line, and balance the ragged edge */
    hyphens: none;
    text-wrap: balance;
  }
  /* "FDA-approved" must never break at its own hyphen */
  .nb { white-space: nowrap; }

  .hero-figure { margin: 0; }
  .hero-figure img {
    width: 100%;
    border-radius: 4px;
    /* portrait source, so let it keep its shape rather than cropping her out */
    aspect-ratio: 1023 / 1537;
    object-fit: cover;
    background: var(--ivory-warm);
  }
  .hero-figure figcaption {
    font-size: 0.79rem;
    color: var(--ink-soft);
    margin-top: 0.6rem;
    line-height: 1.45;
  }
  @media (max-width: 899px) {
    /* on phones the photo is a full-width band under the words, not a tall column */
    .hero-figure img { aspect-ratio: 4 / 3; object-position: 50% 22%; }
  }
  .hero h1 .none {
    color: var(--accent);
    display: block;
  }
  .hero-sub {
    font-size: clamp(1.04rem, 2.1vw, 1.25rem);
    line-height: 1.55;
    max-width: 46ch;
    color: var(--ink-soft);
    margin: 0 0 1.9rem;
  }
  .byline {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    max-width: 44ch;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
    margin-bottom: 2.1rem;
  }
  .byline-mark {
    flex: 0 0 auto;
    width: 2.9rem; height: 2.9rem;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.12rem;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.01em;
  }
  .byline p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
  .byline .name { font-weight: 700; letter-spacing: 0.005em; }
  .byline .role { color: var(--ink-soft); }

  .cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem 1.1rem; align-items: center; }
  .btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.94rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    padding: 0.95rem 1.9rem;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background 0.15s ease;
  }
  .btn:hover, .btn:focus-visible { background: #8C3E13; }
  .cta-note { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }

  /* ---------- generic section ---------- */
  section { padding: clamp(2.8rem, 6vw, 4.6rem) 0; }
  .eyebrow {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.7rem;
    font-weight: 700;
  }
  h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.6vw, 2.5rem);
    line-height: 1.16;
    letter-spacing: -0.011em;
    margin: 0 0 1rem;
    max-width: 21ch;
    font-weight: 600;
  }
  .lede { font-size: 1.25rem; max-width: min(100%, var(--measure)); margin: 0 0 1.1rem; }
  p { max-width: min(100%, var(--measure)); }

  /* ---------- three doors ---------- */
  .doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
    gap: 1.4rem;
    margin-top: 2rem;
  }
  .door {
    background: var(--ivory-warm);
    padding: 1.7rem 1.6rem 1.5rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-top: 3px solid var(--accent);
  }
  .door h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.22;
    margin: 0 0 0.55rem;
    font-weight: 600;
  }
  .door p { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 1rem; max-width: none; }
  .door .door-go {
    margin-top: auto;
    font-size: 0.79rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
  }
  .door[aria-disabled="true"] { opacity: 0.72; cursor: default; }
  .door[aria-disabled="true"] .door-go { color: var(--ink-soft); }

  /* ---------- the one deep section ---------- */
  .deep {
    background: var(--teal);
    color: #fff;
  }
  .deep h2 { color: #fff; }
  .deep .eyebrow { color: var(--accent-lit); }
  .deep p { color: #EAF1EF; }
  .deep .lede { color: #fff; }
  .fails {
    display: grid;
    /* two across, not four. Each of these is a real paragraph, not a caption,
       and at four across it sat in a 269px column reading 48 characters a line.
       Two columns give it the page measure to work with. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
    gap: 1.5rem 2.2rem;
    margin-top: 2.2rem;
    padding-top: 1.9rem;
    border-top: 1px solid rgba(255,255,255,0.22);
  }
  .fails h3 {
    font-family: var(--font-display);
    /* kept above the 1.25rem paragraph under it */
    font-size: 1.45rem;
    margin: 0 0 0.4rem;
    color: #fff;
    font-weight: 600;
  }
  .fails p { font-size: 1.25rem; margin: 0; max-width: min(100%, var(--measure)); color: #D5E3E0; }

  /* ---------- signup ---------- */
  .signup { background: var(--ivory-warm); }
  .course-list {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 2.1rem;
    /* pinned in rem, not ch, so it stays lined up with the signup form below it
       (also 34rem) instead of stretching when the body size changed */
    max-width: 34rem;
    counter-reset: ep;
  }
  .course-list li {
    counter-increment: ep;
    display: flex;
    gap: 0.9rem;
    padding: 0.62rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.99rem;
  }
  .course-list li::before {
    content: counter(ep);
    flex: 0 0 auto;
    font-family: var(--font-display);
    color: var(--accent);
    font-weight: 700;
    width: 1.4rem;
  }

  form { max-width: 34rem; }
  .field-row { display: flex; flex-wrap: wrap; gap: 0.7rem; }
  label.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  input[type="email"] {
    flex: 1 1 15rem;
    min-width: 0;
    padding: 0.92rem 1rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1.5px solid rgba(42,38,34,0.28);
    border-radius: 3px;
    background: #fff;
    color: var(--ink);
  }
  input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .form-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0.85rem 0 0; max-width: 46ch; }
  .form-msg { margin: 0.95rem 0 0; font-size: 0.97rem; font-weight: 600; min-height: 1.4em; }
  .form-msg.ok  { color: #1C5F38; }
  .form-msg.bad { color: #A32020; }

  /* ---------- author ---------- */
  .author-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.6rem 3rem;
    align-items: start;
  }
  .disclaimer {
    margin-top: 1.5rem;
    padding: 1.1rem 1.3rem;
    background: var(--ivory-warm);
    border-left: 2px solid var(--accent);
    border-radius: 0 3px 3px 0;
  }
  .disclaimer p { font-size: 1.25rem; margin: 0; color: var(--ink-soft); }

  /* ---------- footer ---------- */
  footer {
    border-top: 1px solid var(--rule);
    padding: 2.4rem 0 3rem;
    font-size: 0.88rem;
    color: var(--ink-soft);
  }
  footer a { color: var(--accent); }
  .foot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 1.4rem 2.4rem;
  }
  footer p { max-width: 52ch; margin: 0 0 0.6rem; }
  footer h4 {
    font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
    margin: 0 0 0.6rem; color: var(--ink);
  }

  a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

/* ============================================================
   Articles. Shares every token above so the long reads and the
   landing page cannot drift apart.
   ============================================================ */

.site-head a { color: inherit; text-decoration: none; }
.site-head a:hover { color: var(--accent); }
.head-note a { color: var(--ink-soft); }

.article { padding: clamp(2rem, 5vw, 3.4rem) 0 1rem; }
.article h1 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3.05rem);
  line-height: 1.1;
  letter-spacing: -0.016em;
  margin: 0 0 0.7rem;
  max-width: 010ch;
  max-width: 20ch;
  font-weight: 600;
  hyphens: none;
  text-wrap: balance;
}
.art-meta {
  font-size: 0.83rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
.art-excerpt {
  font-size: clamp(1.12rem, 1.9vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 0 2rem;
}
.art-hero { margin: 0 0 2.4rem; }
.art-hero img { width: 100%; border-radius: 4px; }

/* the reading column */
.prose { max-width: min(100%, var(--measure)); }
.prose p, .prose li { font-size: 1.25rem; line-height: 1.72; }
.prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.42rem, 2.8vw, 1.95rem);
  line-height: 1.2;
  margin: 2.6rem 0 0.7rem;
  max-width: 24ch;
  font-weight: 600;
}
.prose h3 {
  font-family: var(--font-display);
  /* has to stay clearly above the 1.25rem body, or a subhead reads as body text */
  font-size: 1.42rem;
  margin: 1.9rem 0 0.4rem;
  font-weight: 600;
}
.prose a { color: var(--accent); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: 0.45rem 0; }
.prose blockquote {
  margin: 1.7rem 0;
  padding: 0.2rem 0 0.2rem 1.3rem;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--ink-soft);
}
.prose blockquote p { font-size: 1.12rem; }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 2.4rem 0; }
.prose img { border-radius: 4px; margin: 1.6rem 0; }
.prose code {
  font-size: 0.93em;
  background: var(--ivory-warm);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
/* tables must never hide a column: full width, scroll only as a phone fallback */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.96rem;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.prose th {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The phone fallback the comment above always promised but never implemented.
   Added 2026-08-08 with the first real table on the site (the dosing page):
   without it a four-column table pushed the whole document to 400px wide at a
   320px viewport, so the page scrolled sideways instead of the table. Scoped to
   phones, so every column still shows at once on anything wider. */
@media (max-width: 640px) {
  .prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Scroll at a readable width rather than compressing four columns into a
     phone. Without the min-width the cells squeeze to two or three words per
     line and the table becomes taller than the screen. */
  .prose table tbody, .prose table thead { min-width: 34rem; display: table; width: 100%; }
  .prose th, .prose td { padding: 0.55rem 0.7rem; }
}
.prose .footnote { font-size: 0.92rem; color: var(--ink-soft); }

.art-foot {
  max-width: min(100%, var(--measure));
  margin: 3rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.art-foot p { font-size: 1.25rem; color: var(--ink-soft); }
.art-foot a { color: var(--accent); }

/* article index */
.art-index { padding: clamp(2.2rem, 5vw, 3.6rem) 0 1rem; }
.art-index h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  margin: 0 0 0.8rem;
  font-weight: 600;
}
/* Rows, not a three-across card grid.

   The grid version put each article's summary in a 329px column at 15px, which
   measured 46 characters a line: by far the worst reading on the site, and it
   got worse rather than better once body type went to 20px, because a 20px
   summary in a 329px column would have fallen to about 35. Three columns and a
   readable line simply cannot both fit inside a 1180px page.

   So the image moves beside the text instead of above it. The picture takes a
   fixed 320px, the body takes the measure, and the summary reads at the same
   line length as the articles it links to. Below 900px it stacks back into the
   original card shape, where a single column is already the full width. */
.art-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-top: 2.2rem;
  /* 320 image + 2 x 1.4rem body padding + the measure */
  max-width: min(100%, calc(var(--measure) + 320px + 2.8rem));
}
.art-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--ivory-warm);
  border-radius: 4px;
  overflow: hidden;
  border-top: 3px solid var(--accent);
}
.art-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.art-card-body { padding: 1.4rem 1.4rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.art-card h2 {
  font-family: var(--font-display);
  /* stays clearly above the 1.25rem summary under it */
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  max-width: none;
  font-weight: 600;
}
.art-card p { font-size: 1.25rem; color: var(--ink-soft); margin: 0 0 1rem; max-width: none; }

@media (min-width: 900px) {
  .art-card { flex-direction: row; align-items: stretch; }
  /* the <picture> is the flex item; some articles have no hero, and those
     cards just run full width, which is why this is a fixed basis and not a
     percentage of a row whose contents vary */
  .art-card picture {
    flex: 0 0 320px;
    display: block;
    min-height: 180px;
  }
  .art-card picture img { width: 100%; height: 100%; aspect-ratio: auto; }
  .art-card-body { min-width: 0; }
}
.art-card .door-go { margin-top: auto; }

.art-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
  max-width: 46ch;
  line-height: 1.4;
}

/* ============================================================
   Full-bleed photographic hero (added 2026-07-26).
   The photo is a real background layer, not a CSS background-image,
   so it can use <picture> + srcset and be fetched at high priority.

   SCRIM REMOVED 2026-07-31, at Annette's direction, matching the
   treatment on outdoorboulder.com. Legibility is now carried by
   per-line plates on .hl (below) instead of a wash over the photo.
   ============================================================ */
.hero-full {
  position: relative;
  isolation: isolate;
  border-bottom: none;
  padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.6rem, 6vw, 4.5rem);
  overflow: hidden;
}
.hero-full .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.hero-full .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hero re-shot 2026-07-27: the frame was outpainted so Annette sits at ~68%
     across with open meadow on the left, because the headline was landing on
     her face. Keep this near centre; biasing right pushes her toward the edge
     and biasing left drags her back under the type. */
  object-position: 50% 42%;
  display: block;
}
/* The scrim layer, kept as an empty rule rather than deleted so nobody
   re-adds a wash without reading this. It was a left wedge from 0.94 down
   to 0.06 plus an overall vertical darkening, and it is what made the
   photograph read as murky: Annette is standing in full sun and the top
   third of the frame was being dimmed to protect type that no longer needs
   it. The .hl plates below are anchored to the words themselves, so they
   clear WCAG AA without knowing what is underneath, and the photo shows at
   full brightness everywhere the words are not.
   If contrast ever regresses, deepen the PLATES. Never reinstate a wash. */
.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: none;
}
.hero-full .wrap { display: block; }
.hero-full .hero-copy { max-width: 40rem; }

/* ---------- per-line text plates ----------
   `display: inline` plus box-decoration-break: clone is the whole trick: the
   background follows the text line by line, ragged right, and stops exactly
   where the words stop. A block-level panel cannot do this; it always draws a
   rectangle out to the measure, which is the murky band we just removed.

   On 0.82: composited over even a pure white pixel this lands at rgb(56,69,67),
   which is about 10:1 against the white type and darker over any real part of
   the photograph. That is the property a tuned-per-photo scrim never had, and
   it is why this survives a photo swap. Do not drop below about 0.75. */
.hero-full .hl {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-color: rgba(12, 28, 26, 0.82);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* Leading has to clear the PLATE, not the text, and the plate is taller than
   you expect. A browser paints an inline background over the font's full
   ascent-plus-descent content area, which is a font metric and is NOT affected
   by line-height. Measured on this site:

     display face  plate = 1.34em   (73px at the 54.4px desktop h1)
     body face     plate = 1.55em   (31px at the 20px hero-sub)

   So the leading has to exceed those numbers before a single pixel of
   photograph shows between two lines. The h1 shipped briefly at 1.25, copied
   from outdoorboulder.com, where it is correct: Fraunces has a ~1.22em content
   box. Here 1.25 put the plates 5px INTO each other. They fused into one slab,
   doubled to ~0.97 opacity along the overlap, and the line above ghosted its
   descenders through, which is the exact panel this whole technique exists to
   avoid. Do not copy leading values between sites; measure the content box.

   These values clear the plates by 3 to 4px at every width. Scoped to
   .hero-full so the tight editorial leading survives on the rest of the site. */
.hero-full h1 { line-height: 1.40; }
.hero-full h1 .hl { padding: 0 0.34em; }
.hero-full .hero-sub { line-height: 1.72; }
.hero-full .byline p { line-height: 1.72; }

/* The byline's hairline rule is removed on the photo hero. At 1px it was the
   weakest element on the page, and with no scrim under it, it read as a
   scratch on the photograph rather than an editorial rule. The plates already
   supply the separation it was providing. It is untouched everywhere else. */
.hero-full .byline { border-top: none; padding-top: 0.4rem; }

/* One measure for the whole hero column (fixed 2026-07-26).
   The split hero capped .hero-sub at 46ch and .byline at 44ch, which was
   invisible when the text column was ~560px. Against the full-bleed hero's
   640px column those caps produced three different right edges stacked on
   each other: headline 691, subhead 547, byline rule 449. The byline's top
   rule stopping 242px short of the headline was the visible defect.
   Everything in the hero column now shares the column's measure, so the
   rule lands flush with the headline. Body copy stays under 75ch. */
.hero-full .hero-sub,
.hero-full .byline { max-width: none; }

.hero-full h1 { color: #fff; }
.hero-full h1 .none { color: var(--accent-lit); }
.hero-full .hero-sub { color: #E8EFED; }
.hero-full .byline { border-top-color: rgba(255,255,255,0.28); }
.hero-full .byline .name { color: #fff; }
.hero-full .byline .role { color: #D3E0DD; }
/* The mark used to be a translucent white disc, which worked only because a
   scrim was darkening the photo behind it. Over a bare photograph a 16% white
   wash is invisible. It now uses the same colour as the text plates, so the
   avatar reads as part of the same ribbon system rather than a separate idea. */
.hero-full .byline-mark { background: rgba(12, 28, 26, 0.82); color: #fff; }
.hero-full .cta-note { color: #D3E0DD; }

@media (max-width: 800px) {
  /* A phone shows a narrow vertical slice of a 2.36:1 frame, so there is no
     crop that fits both Annette and the headline. Her instruction is that type
     never sits on her face, so the phone slice points at the open meadow to the
     left of her and she is out of frame. Do not raise this past ~40% or she
     walks back under the type. */
  .hero-full .hero-bg img { object-position: 30% 45%; }
  /* The phone scrim went too, for the same reason as the desktop one. It ran
     0.72 to 0.90 top to bottom, which on a 390px slice meant the photograph was
     essentially a dark texture behind the type. The plates carry legibility
     here as well, and the meadow is now actually visible. */
  .hero-full::before { background: none; }
}

/* Contrast fixes on the photographic hero, measured 2026-07-26.
   1. An explicit dark base colour. If the photo fails to load the copy is still
      legible, and a contrast checker reading computed styles now sees the real
      backdrop instead of the page's ivory.
   2. The standard --accent-lit measured 2.85:1 against the brightest part of the
      composited hero, below the 3:1 needed for large text. This lighter tint
      measures 4.68:1 in the same spot, so it clears body-text contrast with room
      to spare. It is used ONLY on the hero. */
.hero-full { background-color: #0C1C1A; }
.hero-full h1 .none { color: #FBDCB8; }

/* ============================================================
   The symptom quiz at /quiz/ (added 2026-07-31).

   The segmented answer rows are real radio inputs with their labels
   styled as the visible control, using the :checked + label sibling
   selector. No JS is involved in the interaction at all, so the quiz is
   keyboard operable and works before (and without) the scorer script.
   The inputs are hidden with a clip rect rather than display:none,
   because display:none takes them out of the tab order and a screen
   reader stops announcing the group.
   ============================================================ */
.quiz-intro { margin-bottom: 2.6rem; }
.quiz-caveat {
  background: var(--ivory-warm);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: var(--measure);
}

/* One measure for the whole page, and it has to be font-size independent.
   Two separate bugs met here:
   1. The form shrink-wrapped to its widest answer row (544px), because a
      fieldset's default min-inline-size is min-content and the form took its
      width from that. Hence width: 100% on both.
   2. Capping them at 64ch did NOT line them up with the prose, because ch is
      relative to the element's own font size and the prose runs at 17.44px
      while the form runs at 16.8px. The same 64ch resolved to 601.68px in one
      and 579.26px in the other, so the rules still ended 18px short of the
      text. A rem value is immune to that, which is the point of using it. */
.quiz-page { --measure: 37.5rem; }
.quiz-page .quiz-intro p,
.quiz-page .quiz-foot p,
.quiz-form,
.quiz-result { width: 100%; max-width: var(--measure); }
.quiz-form { margin: 0 0 2.4rem; }
.quiz-section {
  border: none;
  border-top: 1px solid var(--rule);
  padding: 1.8rem 0 0.6rem;
  margin: 0 0 1.6rem;
  min-width: 0;
  width: 100%;
}
.quiz-section legend {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--teal);
  padding: 0 0.7rem 0 0;
}
.quiz-note {
  font-size: 0.93rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0.2rem 0 1.4rem;
  line-height: 1.6;
}

.quiz-item { margin: 0 0 1.7rem; scroll-margin-top: 1.5rem; }
.quiz-item.is-missing {
  outline: 2px solid var(--accent);
  outline-offset: 10px;
  border-radius: 3px;
}
.quiz-q {
  font-size: 1.04rem;
  line-height: 1.5;
  margin: 0 0 0.7rem;
  max-width: 60ch;
}
.quiz-n {
  display: inline-block;
  min-width: 1.9rem;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.quiz-scale { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: 1.9rem; }
.quiz-scale input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.quiz-scale label {
  display: inline-block;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fff;
  font-size: 0.92rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.quiz-scale label:hover { background: var(--ivory-warm); border-color: var(--teal-soft); }
.quiz-scale input:checked + label {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-weight: 600;
}
/* The focus ring has to live on the label, since the input itself is clipped. */
.quiz-scale input:focus-visible + label {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .quiz-scale { margin-left: 0; gap: 0.4rem; }
  .quiz-scale label { padding: 0.6rem 0.85rem; font-size: 0.88rem; }
  .quiz-q { margin-left: 0; }
}

.quiz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.3rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.8rem;
}
.quiz-progress { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.quiz-progress.is-complete { color: var(--teal); font-weight: 600; }

/* ---------- the result panel ---------- */
.quiz-result {
  border-top: 3px solid var(--teal);
  padding-top: 2rem;
  margin: 0 0 2.6rem;
  scroll-margin-top: 1.5rem;
}
.quiz-result:focus { outline: none; }
.quiz-result h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  margin: 0 0 0.5rem;
  color: var(--teal);
}
.quiz-result h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 2.2rem 0 0.7rem;
}
.quiz-result h4 {
  font-size: 1rem;
  margin: 0 0 0.4rem;
  letter-spacing: 0.005em;
}
.quiz-result p { line-height: 1.65; margin: 0 0 0.9rem; }
.quiz-score { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 0.7rem; }
.quiz-score strong { font-size: 1.5rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.quiz-meter {
  height: 9px;
  background: var(--ivory-warm);
  border-radius: 5px;
  overflow: hidden;
  max-width: 30rem;
  margin: 0 0 1.4rem;
}
.quiz-meter span { display: block; height: 100%; background: var(--teal); border-radius: 5px; }
.quiz-lead { font-size: 1.08rem; max-width: var(--measure); }

.quiz-flag {
  background: var(--ivory-warm);
  border-radius: 4px;
  padding: 1.1rem 1.3rem;
  margin: 0 0 1rem;
  max-width: var(--measure);
}
.quiz-flag p { margin: 0; font-size: 0.97rem; }

.quiz-asks { max-width: var(--measure); line-height: 1.65; padding-left: 1.2rem; }
.quiz-asks li { margin-bottom: 0.6rem; }

.quiz-cta {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.6rem 1.5rem 1.8rem;
  margin: 2.4rem 0 1.6rem;
  max-width: var(--measure);
}
.quiz-cta h3 { margin-top: 0; }

.linklike {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.quiz-again { margin-top: 1.6rem; }
.quiz-privacy { font-size: 0.92rem; color: var(--ink-soft); }

/* Homepage pointer to the quiz. It sits under the three doors rather than
   becoming a fourth card on purpose: the doors are articles and the quiz is a
   tool, and adding a fourth card would also have made the "Three questions"
   heading above it wrong. */
.doors-more {
  margin: 1.7rem 0 0;
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: min(100%, var(--measure));
}