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

.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; }