: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);
  }

  *, *::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.05rem;
    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.08rem; max-width: 62ch; margin: 0 0 1.1rem; }
  p { max-width: 64ch; }

  /* ---------- 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;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 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);
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
    color: #fff;
    font-weight: 600;
  }
  .fails p { font-size: 0.95rem; margin: 0; max-width: none; color: #D5E3E0; }

  /* ---------- signup ---------- */
  .signup { background: var(--ivory-warm); }
  .course-list {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 2.1rem;
    max-width: 60ch;
    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: 0.93rem; 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.05rem, 1.9vw, 1.22rem);
  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: 66ch; }
.prose p, .prose li { font-size: 1.09rem; 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);
  font-size: 1.19rem;
  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;
}
.prose .footnote { font-size: 0.92rem; color: var(--ink-soft); }

.art-foot {
  max-width: 66ch;
  margin: 3rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.art-foot p { font-size: 0.95rem; 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;
}
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 1.8rem;
  margin-top: 2.2rem;
}
.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);
  font-size: 1.22rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  max-width: none;
  font-weight: 600;
}
.art-card p { font-size: 0.94rem; color: var(--ink-soft); margin: 0 0 1rem; max-width: none; }
.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.
   A left-weighted scrim keeps white type above 4.5:1 over the
   brightest part of the image.
   ============================================================ */
.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;
  object-position: 62% 40%;
  display: block;
}
/* the scrim. two layers: a strong left wedge for the copy, and a light
   overall darkening so the top edge of the type never sits on bright sky */
.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(12,28,26,0.94) 0%,
      rgba(12,28,26,0.88) 30%,
      rgba(12,28,26,0.62) 48%,
      rgba(12,28,26,0.20) 66%,
      rgba(12,28,26,0.06) 100%),
    linear-gradient(180deg, rgba(12,28,26,0.30) 0%, rgba(12,28,26,0.10) 45%, rgba(12,28,26,0.34) 100%);
}
.hero-full .wrap { display: block; }
.hero-full .hero-copy { max-width: 40rem; }

/* 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; }
.hero-full .byline-mark { background: rgba(255,255,255,0.16); color: #fff; }
.hero-full .cta-note { color: #D3E0DD; }

@media (max-width: 800px) {
  /* on a phone the subject sits right of centre, so bias the crop toward her
     and lean on a top-down scrim instead of the left wedge */
  .hero-full .hero-bg img { object-position: 68% 32%; }
  .hero-full::before {
    background: linear-gradient(180deg,
      rgba(12,28,26,0.72) 0%,
      rgba(12,28,26,0.80) 55%,
      rgba(12,28,26,0.90) 100%);
  }
}

/* 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; }