/* ==========================================================================
   Dr. Deep Sea — deepsea.css
   Theme v0.4.0. Design system per 29-design-handoff-theme-architecture.md.

   Contrast rules are enforced structurally, not by convention:
     aqua and gold NEVER as text on bone   (1.84 / 1.79)
     white NEVER on aqua or gold fills     (2.06 / 2.01)
     green is a FILL on dark, never type on dark (3.30)
     body text on navy is bone, never white
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --navy:      #081A26;
  --navy-2:    #0E2130;
  --navy-3:    #123043;
  --green:     #007A53;
  --green-2:   #00603F;
  --aqua:      #18C9C3;
  --gold:      #D6B35A;
  --bone:      #F4F2EA;
  --bone-2:    #EAE7DC;
  --charcoal:  #15191D;

  /* Derived */
  --hairline:      rgba(244, 242, 234, 0.14);
  --hairline-lift: rgba(244, 242, 234, 0.26);
  --hairline-dark: rgba(21, 25, 29, 0.14);
  --bone-dim:      rgba(244, 242, 234, 0.72);
  --bone-faint:    rgba(244, 242, 234, 0.52);
  --charcoal-dim:  rgba(21, 25, 29, 0.72);

  /* Type */
  --f-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-edit:    "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-display: clamp(2rem, 6.2vw, 4rem);
  --t-section: clamp(1.75rem, 3.4vw, 2.5rem);
  --t-large:   clamp(1.15rem, 1.8vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.875rem;
  --t-eyebrow: 0.75rem;
  --t-quote:   clamp(1.25rem, 2.2vw, 1.625rem);

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --rhythm: var(--s8);

  /* Shell */
  /* Full width. Changed 1 Sep 2026 at the client's request: the page fills the
     window and the only inset is the gutter. Line length is not at risk from
     this, because every paragraph is capped at 68ch in the base type rules and
     the hero lede at 52ch, so text keeps a readable measure while grids,
     cards and rails use the whole screen. */
  --sheet:   100%;
  --gutter:  20px;
  --radius:  4px;
  --radius-btn: 6px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --fast: 160ms;
  --slow: 240ms;

  --masthead-h: 64px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --rhythm: var(--s9); --masthead-h: 76px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 40px; --rhythm: var(--s10); }
}


/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--navy);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.02em; }
h2 { font-size: var(--t-section); }
h3 { font-size: var(--t-large); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--t-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--aqua); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--bone); }

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

ul, ol { margin: 0 0 var(--s4); padding-left: 1.1em; }
li { margin-bottom: var(--s2); }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s7) 0; }

::selection { background: var(--aqua); color: var(--navy); }

/* Focus. Two rings, because one ring cannot serve both grounds. */
:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
  border-radius: 2px;
}
.section--light :focus-visible { outline-color: var(--green); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--aqua); color: var(--navy);
  padding: var(--s3) var(--s5); font-weight: 600; font-family: var(--f-display);
  text-decoration: none;
}
.skip:focus { left: var(--s4); top: var(--s4); }

.vh, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.sheet {
  width: 100%;
  max-width: var(--sheet);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sheet--narrow { max-width: 820px; }

.section {
  padding-block: var(--rhythm);
  background: var(--navy);
  color: var(--bone);
  position: relative;
}
.section--raised { background: var(--navy-2); }
.section--deep   { background: var(--charcoal); }
.section--light  { background: var(--bone); color: var(--charcoal); }
.section--tight  { padding-block: var(--s7); }

.section--light h1, .section--light h2,
.section--light h3, .section--light h4 { color: var(--charcoal); }
.section--light a { color: var(--green); }
.section--light a:hover { color: var(--charcoal); }
.section--light .lede { color: var(--charcoal-dim); }

/* Section header: eyebrow, title, optional lede + action */
.section-hd { margin-bottom: var(--s7); }
.section-hd > * { margin-bottom: 0; }
.section-hd h2 { margin-bottom: var(--s3); }

@media (min-width: 900px) {
  .section-hd--split {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s7);
  }
  .section-hd--split .section-hd-tx { max-width: 62ch; }
}

.eyebrow {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: var(--s3);
}
.section--light .eyebrow { color: var(--green); }

.lede {
  font-size: var(--t-large);
  line-height: 1.5;
  color: var(--bone-dim);
  max-width: 62ch;
}

.fine {
  font-size: var(--t-small);
  color: var(--bone-faint);
  line-height: 1.5;
}
.section--light .fine { color: var(--charcoal-dim); }

.quote, blockquote {
  font-family: var(--f-edit);
  font-style: italic;
  font-size: var(--t-quote);
  line-height: 1.4;
  border-left: 2px solid var(--gold);
  padding-left: var(--s5);
  margin: var(--s7) 0;
  max-width: 44ch;
}
.section--light blockquote { border-left-color: var(--green); }

/* --------------------------------------------------------------------------
   4. Buttons and actions
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary: green fill, white type. 5.37:1. The fill against navy is 3.30,
   which clears the 3:1 minimum for a UI component boundary. */
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-2); color: #fff; }

/* Secondary on dark: bone outline. Never green type on navy. */
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--hairline-lift); }
.btn--ghost:hover { background: rgba(244,242,234,0.08); color: var(--bone); border-color: var(--bone); }

/* Secondary on light */
.section--light .btn--ghost { color: var(--charcoal); border-color: var(--hairline-dark); }
.section--light .btn--ghost:hover { background: rgba(21,25,29,0.05); color: var(--charcoal); border-color: var(--charcoal); }

/* Quiet: a text action. Gold on dark reads as the editorial third option. */
.btn--quiet {
  min-height: 0; padding: 0; border: 0; background: none;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
.btn--quiet:hover { color: var(--bone); }
.section--light .btn--quiet { color: var(--green); }
.section--light .btn--quiet:hover { color: var(--charcoal); }

/* Gold fill, navy type. 8.81:1. Never white type on gold, which is 2.01. */
.btn--gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn--gold:hover { background: #E3C87E; color: var(--navy); border-color: #E3C87E; }

.btn--wide { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }
@media (max-width: 519px) {
  .actions--stack { flex-direction: column; align-items: stretch; }
  .actions--stack .btn { width: 100%; }
}

/* Arrow link, used inside cards */
.act {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--aqua);
  text-decoration: none;
}
.act::after { content: "\2192"; transition: transform var(--fast) var(--ease); }
.act:hover::after { transform: translateX(3px); }
.section--light .act { color: var(--green); }

/* --------------------------------------------------------------------------
   5. Card
   The fill sits at 1.08 against the page ground, which is not a perceivable
   edge. The hairline does the structural work.
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--navy-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s5);
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.card:hover { border-color: rgba(24,201,195,0.55); background: var(--navy-3); }
.card h3 { margin-bottom: 0; }
.card p { font-size: var(--t-small); color: var(--bone-dim); margin-bottom: 0; }
.card .act { margin-top: auto; padding-top: var(--s3); }

/* Whole card clickable, keyboard reachable through the real link only */
/* A card that is itself an anchor must not inherit link styling. */
a.card { text-decoration: none; color: inherit; }
.card h3 a { display: inline-block; padding-block: 2px; }
a.card:hover { color: inherit; }
.section--light a.card { color: inherit; }

.card--link:hover { transform: translateY(-2px); }
.card--link .card-hit::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
}
.card:focus-within { border-color: var(--aqua); }

.section--light .card {
  background: #fff;
  border-color: var(--hairline-dark);
  box-shadow: 0 1px 2px rgba(21,25,29,0.08);
}
.section--light .card:hover { border-color: var(--green); background: #fff; }
.section--light .card p { color: var(--charcoal-dim); }

.card-ic {
  width: 34px; height: 34px;
  color: var(--aqua);
  margin-bottom: var(--s1);
}
.card-ic svg { width: 100%; height: 100%; display: block; }
.section--light .card-ic { color: var(--green); }

/* --------------------------------------------------------------------------
   6. Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8,26,38,0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--slow) var(--ease), box-shadow var(--slow) var(--ease);
}
.masthead.is-stuck {
  background: rgba(8,26,38,0.97);
  box-shadow: 0 1px 0 var(--hairline), 0 8px 24px rgba(0,0,0,0.28);
}
@supports not (backdrop-filter: blur(1px)) {
  .masthead { background: var(--navy); }
}

.masthead .sheet {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--masthead-h);
}

.brand {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: var(--bone);
  margin-right: auto;
  flex-shrink: 0;
}
.brand:hover { color: var(--bone); }
.brand-mark { width: 40px; height: 51px; flex-shrink: 0; }
.brand-mark--lg { width: 50px; height: 64px; }
.brand-tx { display: flex; flex-direction: column; line-height: 1.05; }
.brand-n {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.brand-s {
  font-family: var(--f-display);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
@media (min-width: 380px) {
  .brand-mark { width: 46px; height: 58px; }
  .brand-n { font-size: 1.1875rem; }
  .brand-s { font-size: 0.625rem; }
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .nav ul { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
  .nav li { margin: 0; }
  .nav a {
    display: block; padding: var(--s2) 0;
    font-family: var(--f-display);
    font-size: 0.9375rem; font-weight: 500;
    color: var(--bone); text-decoration: none;
    position: relative;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--aqua);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--fast) var(--ease);
  }
  .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
  .nav a[aria-current="page"] { color: var(--aqua); }
}

.masthead .btn--primary { display: none; }
@media (min-width: 600px) {
  .masthead .btn--primary { display: inline-flex; min-height: 42px; padding: var(--s2) var(--s4); }
}

/* Mobile toggle */
.navtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--hairline-lift); border-radius: var(--radius);
  color: var(--bone); cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.navtoggle:hover { border-color: var(--bone); }
@media (min-width: 1024px) { .navtoggle { display: none; } }
.navtoggle span {
  display: block; width: 18px; height: 1.5px; background: currentColor;
  position: relative; transition: background var(--fast) var(--ease);
}
.navtoggle span::before, .navtoggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: currentColor;
  transition: transform var(--fast) var(--ease), top var(--fast) var(--ease);
}
.navtoggle span::before { top: -6px; }
.navtoggle span::after  { top: 6px; }
.navtoggle[aria-expanded="true"] span { background: transparent; }
.navtoggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.navtoggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile overlay */
.navpanel {
  position: fixed; inset: 0; z-index: 99;
  background: var(--navy);
  padding: calc(var(--masthead-h) + var(--s6)) var(--gutter) var(--s8);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--slow) var(--ease), visibility var(--slow);
}
.navpanel.is-open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .navpanel { display: none; } }

.navpanel ul { list-style: none; margin: 0 0 var(--s7); padding: 0; }
.navpanel li { margin: 0; border-bottom: 1px solid var(--hairline); }
.navpanel nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s5) 0;
  font-family: var(--f-display);
  font-size: 1.375rem; font-weight: 600;
  color: var(--bone); text-decoration: none;
}
.navpanel nav a::after { content: "\2192"; color: var(--aqua); }
.navpanel nav a:hover { color: var(--aqua); }
.navpanel .fine { margin-top: var(--s5); }

body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Hero
   One fixed composition. One LCP image. One H1. No JS in the critical path.
   Decision recorded 28 Aug 2026: the six-slide carousel was replaced by this
   plus the lane rail below it.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute; inset: 0; z-index: -2;
}
.hero-media picture { display: block; position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
@media (min-width: 900px) { .hero-media picture { display: block; position: absolute; inset: 0; }
.hero-media img { object-position: 65% center; } }

/* Scrim. Vertical on phones so the portrait stays readable, horizontal on
   desktop so the copy column has a ground and the subject stays clear. */
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--navy) 10%, rgba(8,26,38,0.95) 42%, rgba(8,26,38,0.92) 60%, rgba(8,26,38,0.74) 73%, rgba(8,26,38,0.20) 90%, rgba(8,26,38,0.50) 100%);
}
@media (min-width: 900px) {
  .hero-media::after {
    background:
      linear-gradient(to right, var(--navy) 0%, rgba(8,26,38,0.95) 40%, rgba(8,26,38,0.82) 58%, rgba(8,26,38,0.46) 72%, rgba(8,26,38,0.10) 88%),
      linear-gradient(to bottom, rgba(8,26,38,0.55) 0%, rgba(8,26,38,0) 30%);
  }
}

.hero-in {
  position: relative; z-index: 2;
  padding-block: clamp(var(--s8), 12vh, 160px) var(--s8);
  min-height: clamp(520px, 78svh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
@media (min-width: 900px) {
  /* Corrected 1 Sep 2026. This rule used to set max-width: 58% on .hero-in,
     which is also the .sheet. Because .sheet carries margin-inline: auto, that
     did not make a narrow column on the left: it made a narrow sheet in the
     middle of the window, so the hero copy drifted right as the screen grew
     and stopped lining up with every heading below it. At 1920 it sat 143px
     to the right of the section headings.

     The sheet keeps the page column now, and the copy is narrowed by capping
     the children instead. The cap is measured against where the figure
     actually begins rather than set as a round number, so the longest headline
     line never has to compete with the lab coat at any width. */
  .hero-in {
    justify-content: center;
    max-width: var(--sheet);
    padding-block: var(--s10);
    --lead: calc((100vw - min(100vw, var(--sheet))) / 2 + var(--gutter));
  }
  .hero-in > * { max-width: calc(63vw - var(--lead) - 24px); }
}

.hero h1 { margin-bottom: var(--s5); }
.hero h1 .em { color: var(--aqua); }
.hero .lede { margin-bottom: var(--s6); max-width: 52ch; font-size: 1rem; }

@media (min-width: 640px) {
  .hero-cred { font-size: var(--t-eyebrow); }
  .hero .lede { font-size: var(--t-large); }
}

/* Mobile rule from the strategy: one primary CTA per hero. The secondary
   path stays reachable from the navigation panel, which carries Book Joe. */
@media (max-width: 599px) {
  .hero .actions .btn--ghost { display: none; }
}

.hero-cred {
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s5);
}


/* --------------------------------------------------------------------------
   7b. Hero variant: cut-out figure on a designed ground
   Added 1 Sep 2026. The full-bleed photographic hero (7 above) is unchanged
   and still available; this variant is what the homepage uses.

   Why the copy measure is capped here and not in 7: a photograph can be
   darkened by a scrim until bone type clears it. A white lab coat cannot,
   because darkening it destroys the subject. So the two never overlap. The
   figure is confined to the right 43 percent and the lede is capped so its
   longest line stops short of the coat. Measured, not eyeballed.
   -------------------------------------------------------------------------- */
.hero--figure::before {
  content: ""; position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(78% 92% at 74% 58%, rgba(24,201,195,0.16) 0%, rgba(8,26,38,0) 62%),
    radial-gradient(60% 70% at 88% 30%, rgba(0,122,83,0.20) 0%, rgba(8,26,38,0) 66%),
    linear-gradient(160deg, #0E2130 0%, #081A26 58%, #05131C 100%);
}
.hero--figure .hero-media { inset: 0 0 0 auto; width: 43%; }
.hero--figure .hero-media picture { position: absolute; inset: 0; }
.hero--figure .hero-media img {
  object-fit: contain;
  object-position: right bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%);
          mask-image: linear-gradient(to right, transparent 0%, #000 9%);
}
.hero--figure .hero-media::after { content: none; }
@media (min-width: 1200px) {
  .hero--figure .lede { max-width: 27rem; }
}
/* Between 1200 and 1365 the sheet is narrow enough that the longest headline
   line reaches the figure. Pull the figure back rather than shrink the type. */
@media (min-width: 1200px) and (max-width: 1365px) {
  .hero--figure .hero-media { width: 37%; }
  .hero--figure .lede { max-width: 24rem; }
}

/* Below 1200 the hero box is square or portrait and a figure behind the copy
   reads as a ghost. Stack instead: figure first, copy under it, no overlap. */
@media (max-width: 1199px) {
  .hero--figure { display: flex; flex-direction: column; }
  .hero--figure .hero-media {
    position: static; width: 100%; order: -1;
    height: clamp(230px, 40vh, 360px);
  }
  .hero--figure .hero-media picture { position: relative; inset: auto; width: 100%; height: 100%; display: block; }
  .hero--figure .hero-media img {
    object-position: center bottom;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero--figure .hero-in {
    min-height: 0;
    padding-block: var(--s7) var(--s8);
    justify-content: flex-start;
  }
}

/* --------------------------------------------------------------------------
   8. Lane rail — the six doors, immediately under the hero
   -------------------------------------------------------------------------- */
.rail {
  background: var(--navy-2);
  border-block: 1px solid var(--hairline);
}
.rail-in {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail-in::-webkit-scrollbar { display: none; }

.rail-it {
  scroll-snap-align: start;
  flex: 0 0 76%;
  min-width: 0;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s5) var(--s5) var(--s5) 0;
  margin-right: var(--s5);
  border-right: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--bone);
  transition: color var(--fast) var(--ease);
}
.rail-it:last-child { border-right: 0; margin-right: 0; }
.rail-it:hover { color: var(--aqua); }
.rail-it:hover .rail-n { color: var(--bone); }

.rail-n {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--aqua);
  transition: color var(--fast) var(--ease);
}
.rail-t {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
}
.rail-d {
  font-size: var(--t-small);
  color: var(--bone-dim);
  line-height: 1.45;
}

@media (min-width: 640px) { .rail-it { flex-basis: 40%; } }
@media (min-width: 1024px) {
  .rail-in { overflow: visible; }
  .rail-it { flex: 1 1 0; padding-inline: var(--s5) var(--s5); }
  .rail-it:first-child { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   9. Proof strip
   -------------------------------------------------------------------------- */
.proof { background: var(--bone); color: var(--charcoal); border-block: 1px solid var(--hairline-dark); }
.proof-in {
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s5);
  align-items: center;
}
.proof-in::-webkit-scrollbar { display: none; }
.proof-it {
  display: flex; align-items: center; gap: var(--s2);
  flex-shrink: 0;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.proof-it + .proof-it { padding-left: var(--s5); border-left: 1px solid var(--hairline-dark); }
.proof-ic { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }
.proof-ic svg { width: 100%; height: 100%; }

/* Seven items fit at the full sheet width once the gap tightens. Overflow
   stays auto rather than visible so nothing is ever clipped off the edge. */
@media (min-width: 1120px) {
  .proof-in { justify-content: space-between; gap: var(--s2); }
  .proof-it + .proof-it { padding-left: var(--s3); }
}

/* --------------------------------------------------------------------------
   10. Lane grid — deliberately not six equal cards.
   Lane 04 (TBI) is the stated priority and carries double width.
   -------------------------------------------------------------------------- */
/* Four columns on desktop, eight slots, two clean rows. Two lanes carry
   double width: 04 (TBI, Joe's stated priority) and 02 (students, the
   mission audience). Six equal cards was the v1 mistake. */
/* Six equal cards on a horizontal scroller. Changed 1 Sep 2026.

   Was a four-column, eight-slot grid with lanes 02 and 04 double width. Now
   every card is 538px, which is the width the double-wide card had, so the
   card that set the standard still sets it.

   Scrolling is CSS only: scroll-snap plus overflow-x. No JavaScript is needed
   to use this, which matters because these six links are the primary
   navigation of the homepage. The arrow buttons are an enhancement.

   The next card deliberately peeks past the right edge at every width. That
   peek is the affordance that tells a visitor there is more, and it does the
   job on touch devices where arrows are not the natural gesture. */
.lanes {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(538px, 84vw);
  gap: var(--s5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--s5);
}

/* The scroller runs the full width of the window, both edges.

   Corrected 1 Sep 2026. It previously bled to the right only, and only by up
   to 170px, which was fine at 1440 and looked broken at 1920: the left gutter
   stayed at 410px while the right closed to 240. Asymmetric by accident
   rather than by design.

   Now it bleeds by whatever the gutter actually is, on both sides, so the rail
   spans the viewport at every width. The leading padding puts the first card
   back in line with the heading above it, so at rest the section still reads
   as part of the page grid rather than a band stuck to the window edge, and
   the scroll padding makes snapping land on that same line.

   The bleed is derived from 100%, which inside .sheet resolves to the content
   column, so no width is hardcoded. 18px is held back for a classic scrollbar
   so this can never push the page sideways. The extra 3px keeps a focus ring
   on the first card from being clipped. */
.lanes {
  /* The scroller is a direct child of the section, not of the content column,
     so it is already the full width of the page. All it needs is enough
     leading padding to put the first card back in line with the heading.

     That offset is where .sheet starts: half the space the sheet does not
     occupy, plus the sheet's own gutter. Every term is a percentage of the
     section, so no viewport unit is involved and the browser's scrollbar
     width never has to be guessed. The earlier version used 100vw and was
     nine pixels out on both edges for exactly that reason.

     The extra 3px keeps a focus ring on the first card from being clipped. */
  --lead: calc((100% - min(100%, var(--sheet))) / 2 + var(--gutter));
  padding-left: calc(var(--lead) + 3px);
  padding-right: var(--gutter);
  scroll-padding-left: calc(var(--lead) + 3px);
}
.lanes > .card { scroll-snap-align: start; }

/* While the rail is drifting, snap and smooth behaviour have to be off. Snap
   would drag every frame back to the nearest card, and smooth behaviour would
   try to animate each sub-pixel step of the drift against itself. Both come
   back the moment the visitor takes control. */
.lanes.is-drifting {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.lanes.is-drifting > .card { scroll-snap-align: none; }
@media (prefers-reduced-motion: reduce) {
  .lanes { scroll-behavior: auto; }
}

.lanes::-webkit-scrollbar { height: 6px; }
.lanes::-webkit-scrollbar-track { background: rgba(244,242,234,0.06); border-radius: 3px; }
.lanes::-webkit-scrollbar-thumb { background: rgba(244,242,234,0.22); border-radius: 3px; }
.lanes::-webkit-scrollbar-thumb:hover { background: rgba(244,242,234,0.34); }
.lanes { scrollbar-width: thin; scrollbar-color: rgba(244,242,234,0.22) rgba(244,242,234,0.06); }

/* Section head that carries the scroller arrows on its right. */
.section-hd--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}
.railnav { display: flex; gap: var(--s2); flex-shrink: 0; }
.railnav[hidden] { display: none; }
/* On a phone the gesture is a swipe and the arrows are just two more things
   between the heading and the cards. The scroller still works identically. */
@media (max-width: 639px) { .railnav { display: none; } }
.railnav-b {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.railnav-b[hidden] { display: none; }   /* display:grid above would win otherwise */
.railnav-b svg { width: 20px; height: 20px; }
.railnav-b:hover:not(:disabled) { background: var(--navy-3); border-color: var(--aqua); }
.railnav-b:disabled { opacity: 0.3; cursor: default; }

/* Play and pause share one button. aria-pressed carries the state for
   assistive technology; the icon swap is the visual half of the same thing. */
.railnav-b--play .ic-play { display: none; }
.railnav-b--play[aria-pressed="true"] .ic-pause { display: none; }
.railnav-b--play[aria-pressed="true"] .ic-play { display: block; }
/* Lane card figure. Changed 1 Sep 2026: every card carries one, so the figure
   moved from a narrow column beside the text to a band across the top.

   One aspect at every width, 12:5, which is the whole reason for the change.
   A figure beside the text is a tall slot on desktop and a wide one on a
   phone, and a single photograph cannot be composed for both. A band is the
   same shape everywhere, so each lane needs exactly one crop and the brief to
   whoever supplies the photographs is one line instead of two. */
.lane-fig {
  display: block;
  aspect-ratio: 12 / 5;
  overflow: hidden;
  background: var(--navy-3);
  /* full bleed to the card edges, tucked under its rounded top corners */
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  border-bottom: 1px solid var(--hairline);
}
.lane-fig picture { display: block; width: 100%; height: 100%; }
.lane-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The icons came out of these cards on 1 Sep 2026. The icon had been holding
   the space between the photograph and the title; without it the title crowds
   the image, so the body reclaims that space explicitly rather than by
   accident. */
.lane-bd { display: flex; flex-direction: column; gap: var(--s3); flex: 1 1 auto; padding-top: var(--s3); }
.lane h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); }
.lane p { font-size: var(--t-small); }

/* --------------------------------------------------------------------------
   11. Now list — four visible, the rest behind an archive link
   -------------------------------------------------------------------------- */
.nowgrid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .nowgrid { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 1024px) { .nowgrid { grid-template-columns: repeat(4, 1fr); } }

.now { display: grid; gap: var(--s5); }
.now-it { display: flex; gap: var(--s4); align-items: flex-start; }
.now-ic { width: 26px; height: 26px; color: var(--aqua); flex-shrink: 0; margin-top: 2px; }
.now-ic svg { width: 100%; height: 100%; }
.now-t {
  font-family: var(--f-display);
  font-size: 1rem; font-weight: 600;
  color: var(--aqua);
  margin-bottom: 0;
}
.now-t a { display: inline-block; padding-block: 4px; color: inherit; text-decoration: none; }
.now-t a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.now-d { font-size: var(--t-small); color: var(--bone-dim); line-height: 1.45; }
.now-dt {
  display: block; margin-top: var(--s1);
  font-family: var(--f-display);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-faint);
}

/* --------------------------------------------------------------------------
   12. Mechanism cluster — What Does the Science Actually Say
   -------------------------------------------------------------------------- */
.mech { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 560px)  { .mech { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mech { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

.mech .card { gap: var(--s3); }
.mech-q {
  font-family: var(--f-display);
  font-size: 1rem; font-weight: 600; line-height: 1.3;
  margin: 0;
}
.mech-a { font-size: var(--t-small); color: var(--bone-dim); margin: 0; }
.section--light .mech-a { color: var(--charcoal-dim); }

/* --------------------------------------------------------------------------
   13. Featured book
   -------------------------------------------------------------------------- */
.book { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 768px) { .book { grid-template-columns: 260px 1fr; gap: var(--s8); } }
@media (min-width: 1024px) { .book { grid-template-columns: 300px 1fr; } }

.book picture { display: block; }
.book-cover {
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  max-width: 260px;
}
.book-hook {
  font-family: var(--f-edit);
  font-style: italic;
  font-size: var(--t-quote);
  line-height: 1.35;
  color: var(--gold);
  margin-bottom: var(--s4);
  max-width: 34ch;
}
.book h2 { margin-bottom: var(--s2); }
.book-sub {
  font-family: var(--f-display);
  font-size: var(--t-large);
  font-weight: 500;
  color: var(--bone-dim);
  margin-bottom: var(--s5);
}

/* --------------------------------------------------------------------------
   13b. Trio row — Now / Featured book / Speaking
   Three equal cards directly under the proof strip. Added 1 Sep 2026.

   Contrast, measured not estimated, on this palette:
     gold #D6B35A on navy-2 #0E2130 ....... 8.17   eyebrow and border
     navy #081A26 on gold #D6B35A ......... 8.81   .btn--gold type
     the gold fill against navy-2 ......... 8.17   button boundary, needs 3
   White on gold is 2.01 and is prohibited at the top of this file, which is
   why the gold button carries navy type rather than white.
   -------------------------------------------------------------------------- */
/* Three columns or one, never two. A two-column stage put Speaking on a row
   of its own, which is not the layout. The switch is at 880px, the narrowest
   width where three cards still hold a readable heading and a 168px cover:
   at 880 each card is 248px wide, at 1024 it is 298px.

   align-items is stretch at three columns, so the cards are the same width
   and the same height and the three bottom buttons land on one line. Below
   the switch each card sizes to its own content, because a stacked card
   stretched to match a taller sibling leaves a dead panel. */
.trio { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 880px) {
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr floors at the content's own
     minimum, so the 200px cover made the middle column 15px wider than the
     other two at 880. With a zero floor all three columns are identical. */
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
}
@media (min-width: 1100px) { .trio { gap: var(--s6); } }

/* The cards are .panel, so they already carry the surface, border and column
   flow. These rules only add what the trio needs on top. */
.trio-c h2 { font-size: clamp(1.35rem, 2vw, 1.625rem); margin-bottom: var(--s5); }
@media (min-width: 880px) and (max-width: 1099px) {
  .trio-c { padding: var(--s5); }
  .trio-c h2 { font-size: 1.25rem; }
  .trio .plink { padding-inline: var(--s4); font-size: 0.875rem; }
}
.trio-c .btn--wide { margin-top: auto; }
.trio-c .fine { margin-bottom: var(--s5); }
/* The subtitle came back on 2 Sep 2026 into a card a third the width of the
   row it was written for, so it drops to body size and a tighter measure. */
.trio-c .book-sub { font-size: var(--t-body); margin-bottom: var(--s5); }

/* Gold border marks the featured card without a fill, so no type ever sits
   on gold except the button, which is navy. */
.trio-c--feat { border-color: rgba(214, 179, 90, 0.72); box-shadow: 0 0 0 1px rgba(214, 179, 90, 0.18); }
.eyebrow--gold { color: var(--gold); display: inline-flex; align-items: center; gap: var(--s2); }

/* A larger eyebrow, for the one place on the site where the label above the
   heading is doing real work rather than just orienting the reader. */
.eyebrow--lg { font-size: 0.9375rem; letter-spacing: 0.14em; margin-bottom: var(--s4); }
.eyebrow-ic { width: 14px; height: 14px; display: block; }
.eyebrow-ic svg { width: 100%; height: 100%; display: block; }

/* The cover is centered by sizing the picture rather than by centering the
   image inside it. As a flex item the picture stretched to the card width
   and the image sat against its left edge, which looked like a bug. */
.trio-cover { margin-bottom: var(--s5); }
.trio-cover picture { display: block; width: min(200px, 100%); margin-inline: auto; }
/* One size at every width. The cover was stepped down to 168px while the
   card also carried a subtitle, a hook and a blurb; with those gone on
   2 Sep 2026 the card has the room, and 200px still clears the narrowest
   three-column card, which has 208px of inside width at 880. */
.trio-cover .book-cover { width: 100%; max-width: none; height: auto; }

.trio-acts { display: flex; flex-direction: column; gap: var(--s3); margin-top: auto; }

/* Pill rows. Anchors in the left card, spans in the right, because the six
   speaking formats are categories rather than destinations. Both keep the
   48px tap target. */
.plinks { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.plinks li { margin: 0; }
.plink {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bone);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
a.plink::after {
  content: "\2192"; color: var(--aqua); flex-shrink: 0;
  transition: transform var(--fast) var(--ease);
}
a.plink:hover { color: var(--bone); border-color: rgba(24, 201, 195, 0.55); background: rgba(24, 201, 195, 0.08); }
a.plink:hover::after { transform: translateX(3px); }
.plink--static { color: var(--bone-dim); font-weight: 500; }

.section--light .plink { color: var(--charcoal); border-color: var(--hairline-dark); }
.section--light a.plink::after { color: var(--green); }
.section--light a.plink:hover { color: var(--charcoal); border-color: var(--green); background: rgba(0, 122, 83, 0.06); }
.section--light .plink--static { color: var(--charcoal-dim); }

/* Speaking flip cards. Two-column grid of compact cards inside the trio
   speaking panel. Each card flips on click to show engagement examples.
   Re-uses the .flip animation system (section 18) but with its own sizing
   because these cards live in a narrow ~250px column, not a sidebar. */
.speaking-flips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.spk-flip {
  perspective: 900px;
  cursor: pointer;
}
.spk-flip:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.spk-flip-in {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.spk-flip.is-flipped .spk-flip-in { transform: rotateY(180deg); }

.spk-flip-ft, .spk-flip-bk {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* Before JS sizes the container, keep front in flow so cards aren't zero-height */
.spk-flip-in:not([style*="height"]) .spk-flip-ft { position: relative; }

.spk-flip-ft {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 54px;
  padding: var(--s3) var(--s2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: rgba(24, 201, 195, 0.04);
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--bone);
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.spk-flip:hover .spk-flip-ft,
.spk-flip:focus-visible .spk-flip-ft {
  border-color: rgba(24, 201, 195, 0.55);
  background: rgba(24, 201, 195, 0.1);
}

/* Flip hint on front */
.spk-flip-ft::after {
  content: "\21BB";
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.6875rem;
  color: var(--aqua);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.spk-flip:hover .spk-flip-ft::after,
.spk-flip:focus-visible .spk-flip-ft::after { opacity: 1; }

.spk-flip-bk {
  transform: rotateY(180deg);
}
.spk-flip-bk-in {
  background: var(--bone);
  color: var(--charcoal);
  border-radius: var(--radius);
  padding: var(--s3) var(--s2);
}
.spk-flip-bk h4 {
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 var(--s1);
}
.spk-flip-bk p {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--charcoal);
  margin: 0;
}
.spk-flip-bk .spk-close {
  display: block;
  margin-top: var(--s2);
  font-family: var(--f-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

/* Media card centers when it's alone on its row.
   Width = one column: half the grid minus half the gap. */
.spk-flip[data-spk="media"] { grid-column: 1 / -1; width: calc(50% - var(--s2) / 2); justify-self: center; }

/* International card spans full width so the long list has room */
.spk-flip[data-spk="international"] { grid-column: 1 / -1; }

/* At the narrowest trio widths, drop to single column */
@media (min-width: 880px) and (max-width: 1099px) {
  .speaking-flips { gap: 6px; }
  .spk-flip-ft { font-size: 0.75rem; min-height: 48px; padding: var(--s2); }
  .spk-flip-bk p { font-size: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spk-flip-in { transition: none; }
}

/* --------------------------------------------------------------------------
   14. Two-panel row — Research authority and Science Wins
   Merged 2 Sep 2026. Speaking left this row for the trio on 1 Sep and
   Science Wins, which had been its own full-width section below, took the
   empty half. The .duo--solo cap that held the lone panel is gone with it.
   -------------------------------------------------------------------------- */
.duo { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: var(--s7); } }

.panel {
  background: var(--navy-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s6);
  display: flex; flex-direction: column;
}
.section--light .panel { background: #fff; border-color: var(--hairline-dark); }
.panel h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin-bottom: var(--s5); }
.panel .btn { margin-top: var(--s6); }
.panel .btn--wide { margin-top: auto; }
/* Science Wins sits in a panel now, so its lede, chips and video card are
   panel children. The video is last before the button; margin-top:auto on
   the button still pins it to the bottom edge so both panels' buttons align. */
.panel .lede { margin-bottom: var(--s5); }
.panel .chips { margin-bottom: var(--s5); }
.panel .vidcard { margin-bottom: var(--s5); aspect-ratio: 16 / 9; }

.ticks { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.ticks li {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-body);
  margin: 0;
}
.section--light .ticks li { border-bottom-color: var(--hairline-dark); }
.ticks li:last-child { border-bottom: 0; }
.ticks svg { width: 16px; height: 16px; color: var(--aqua); flex-shrink: 0; margin-top: 5px; }
.section--light .ticks svg { color: var(--green); }
.ticks a { display: inline-block; padding-block: 3px; color: inherit; text-decoration: none; }
.ticks a:hover { color: var(--aqua); }

/* In the two-panel row the Research panel carries less content than Science
   Wins, and equal-height panels dumped the difference into one dead gap above
   the button. The list absorbs it instead: the rows and their dividers spread
   to fill the panel, which reads as a deliberate divided list rather than a
   hole. Only inside .duo, so the pattern is unchanged anywhere else. */
@media (min-width: 900px) {
  .duo .panel .ticks { flex: 1 1 auto; display: flex; flex-direction: column; }
  .duo .panel .ticks li { flex: 1 1 auto; align-items: center; }
  .duo .panel .ticks svg { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   15. Students / Science Wins
   The .students two-column grid was retired 2 Sep 2026 when Science Wins
   moved into the right half of the Research row. The video card and chips
   below are still live; they are panel children now.
   -------------------------------------------------------------------------- */

.vidcard {
  position: relative; display: block;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hairline);
  aspect-ratio: 16 / 10;
  background: var(--navy-3);
}
.vidcard img { width: 100%; height: 100%; object-fit: cover; }

/* The Spark player. The facade is a real <button>, because it does something
   rather than going somewhere, and a screen reader should say so. These rules
   only undo the browser's button chrome; everything else is inherited from
   .vidcard above so the two states look identical. */
button.vidcard { padding: 0; font: inherit; color: inherit; text-align: inherit; width: 100%; cursor: pointer; }
button.vidcard:hover { border-color: rgba(24, 201, 195, 0.55); }
.vidcard--empty { cursor: default; }
.vidcard--empty img { object-fit: contain; padding: var(--s6); opacity: 0.7; }

/* Once the iframe replaces the facade it owns the whole frame. */
.vidcard--live { border-color: var(--hairline); }
.vidcard iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Native video player (self-hosted MP4). The video element fills the card
   and the black letterbox bars blend into the navy-3 background. */
.vidcard--native { aspect-ratio: 16 / 9; background: #000; }
.vidcard--native video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The medical note under the player. Smaller than .fine and deliberately so,
   but not smaller than 13px and set in bone-dim rather than bone-faint, so
   dropping the size does not also drop the contrast: it measures 8.2 against
   the raised ground, where .fine measures 5.1. Small print that cannot be
   read is not a disclosure. */
.videonote {
  margin: var(--s4) 0 0;
  max-width: 68ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bone-dim);
}
.videonote strong { color: var(--bone); font-weight: 600; }

/* The closing bar. A lone .panel inside a full-width section occupies the
   left third and leaves the rest of the screen empty; laid out as a row it
   ends the page instead of trailing off. */
/* Unused since 3 Sep 2026, when the Books page's closing bar was replaced by
   the Beyond Books section near the top. Kept for the interior pages still to
   be built, which will want a closing row. */
.closer { display: grid; gap: var(--s5); align-items: center; padding: var(--s7); }
@media (min-width: 900px) { .closer { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); } }
@media (max-width: 639px) { .closer { padding: var(--s5); } }
.closer h2 { margin-bottom: var(--s3); }
.closer .fine { margin-bottom: 0; }
.closer-act .btn { white-space: nowrap; }
@media (max-width: 899px) { .closer-act .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   Section rhythm, tightened.
   The site's default rhythm puts 128px of padding above and below every
   section, so 256px between two of them. On the homepage that is right: the
   sections there carry 800 to 2000px of content and the air is proportionate.
   On a page whose sections run 350 to 530px, the same padding is half the
   section and the page reads as gaps with content in them.

   So rhythm belongs to the page rather than the stylesheet. The class is put
   on <body> by the theme, not written into the template on <main>: a template
   that breaks out of wp:html to render a block leaves <main> auto-closed
   after the first block, so a class there reaches one section and no others.
   That is what happened on the first attempt at this.

   It is a modifier rather than a change to the default because the homepage
   is approved as it stands, and because the short interior pages still to be
   built will want this too.

   Values: 32 / 48 / 64px of padding a side, against the site default of
   64 / 96 / 128. Between two sections that is 128px at desktop rather than
   256.
   -------------------------------------------------------------------------- */
/* <main> is a group block so that WordPress renders it as a real element
   wrapping every child, instead of the browser auto-closing an unclosed tag
   after the first wp:html block. Flow layout is used rather than constrained,
   but the group still ships with the block stylesheet's own margins and
   possible root padding, and this page manages its own width. */
main.wp-block-group { max-width: none; margin: 0; padding: 0; }

body.dds-snug, .rhythm--snug { --rhythm: var(--s6); }
@media (min-width: 768px)  { body.dds-snug, .rhythm--snug { --rhythm: var(--s7); } }
@media (min-width: 1024px) { body.dds-snug, .rhythm--snug { --rhythm: var(--s8); } }
.section--light .videonote { color: var(--charcoal-dim); }
.section--light .videonote strong { color: var(--charcoal); }
.vidcard-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8,26,38,0.28);
  transition: background var(--fast) var(--ease);
}
.vidcard:hover .vidcard-play { background: rgba(8,26,38,0.14); }
.vidcard-play span {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--aqua); color: var(--navy);
  display: grid; place-items: center;
  font-size: 20px; padding-left: 4px;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s5); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--bone);
  text-decoration: none;
  background: var(--navy-2);
}
.chip:hover { border-color: var(--aqua); color: var(--aqua); }
.section--light .chip { background: #fff; border-color: var(--hairline-dark); color: var(--charcoal); }
.section--light .chip:hover { border-color: var(--green); color: var(--green); }

/* --------------------------------------------------------------------------
   16. Authority strip — text only. No third-party logos, deliberately.
   Reproducing the Guinness or USF marks implies an endorsement that does not
   exist and carries usage terms nobody has cleared.
   -------------------------------------------------------------------------- */
.authority { background: var(--bone); color: var(--charcoal); }
/* Two rows as of 2 Sep 2026: the label on its own line, then all seven marks
   on a single line. They used to run inline with the label and wrap wherever
   they landed, which left two ragged rows and a stranded pair at the end. */
.authority-in {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
  padding-block: var(--s6);
}
.authority-lb {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green);
}
.authority-pills {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s3);
  width: 100%;
}
/* One line from 1200. Below that seven marks cannot hold a readable width, so
   they wrap rather than shrink into unreadable columns or hide off-screen in a
   scroller. Above it they shrink from their natural widths, which keeps the
   longer marks wider than the short ones instead of forcing equal columns. */
@media (min-width: 1200px) {
  .authority-pills { flex-wrap: nowrap; }
  .authority-pills .pill { flex: 0 1 auto; }
}
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s2) var(--s4);
  border: 1px solid var(--hairline-dark);
  border-radius: 3px;
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--charcoal);
  text-decoration: none;
  background: #fff;
}
a.pill:hover { border-color: var(--green); color: var(--green); }

/* --------------------------------------------------------------------------
   16b. Book list — /books/
   Markup comes from the drdeepsea/book-list block in the Dr. Deep Sea Core
   plugin, so these class names are a contract with that plugin. Renaming one
   here without renaming it there silently unstyles the page.
   -------------------------------------------------------------------------- */
.booklist { list-style: none; margin: 0; padding: 0; }

.bookrow {
  display: grid;
  gap: var(--s5);
  padding: var(--s6) 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.bookrow:first-child { border-top: 0; padding-top: 0; }
/* These rows are the destination of the bookshelf's clickable covers, and the
   masthead is sticky, so without this the row you jumped to arrives underneath
   it. */
.bookrow { scroll-margin-top: calc(var(--masthead-h) + var(--s5)); }
@media (min-width: 720px) {
  .bookrow { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s5) var(--s7); align-items: start; }
  .bookrow-meta { grid-column: 2; }
}

/* Three columns above 1100. The row used to be cover plus everything else,
   and "everything else" is a paragraph capped at a readable measure, so on a
   wide screen the right third of every row was empty. Moving the record and
   the buy button into a column of their own fills that width with content
   rather than stretching the prose past the point where it is comfortable to
   read. It also puts every buy button in the same place down the page. */
@media (min-width: 1100px) {
  .bookrow {
    grid-template-columns: 200px minmax(0, 1fr) minmax(240px, 300px);
    gap: var(--s7);
  }
  .bookrow-meta { grid-column: 3; }
}

/* The cover is never cropped. Trade paperbacks, children's books and
   reference works are printed to different trims, so the width is capped and
   the height follows the book's own aspect. Cropping to a uniform slot cuts
   the author's name off the bottom. */
.bookrow-fig picture { display: block; }
.bookrow-fig .book-cover { width: 100%; max-width: 200px; height: auto; }
@media (max-width: 719px) {
  .bookrow-fig .book-cover { max-width: 150px; }
  .bookrow { text-align: center; }
  .bookrow-fig { display: flex; justify-content: center; }
  .bookrow-bd h3 { text-align: center; }
  .bookrow-tx { margin-inline: auto; }
  .bookrow-note { margin-inline: auto; }
  .bookrow-act { display: flex; flex-direction: column; align-items: center; }
  .bookrow-meta { text-align: center; }
}

.bookrow-bd { min-width: 0; }
.bookrow-bd h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); margin-bottom: var(--s2); }
.bookrow .book-sub {
  font-family: var(--f-display);
  font-size: var(--t-large);
  font-weight: 500;
  color: var(--bone-dim);
  margin-bottom: var(--s4);
}
.bookrow-tx { max-width: 68ch; margin-bottom: var(--s4); }

/* Framing notes: the contributing-author line and the medical-text line.
   Gold rule rather than a coloured panel, because a warning-shaped box on a
   book a reader has done nothing wrong by opening reads as an alarm. */
.bookrow-note {
  border-left: 2px solid var(--gold);
  padding-left: var(--s4);
  font-size: var(--t-small);
  color: var(--bone-dim);
  line-height: 1.55;
  max-width: 62ch;
  margin-bottom: var(--s4);
}

/* The record line. A definition list because that is what it is: labelled
   facts about one object, which is also how a screen reader announces it. */
.bookrow-rec {
  display: grid;
  gap: var(--s1) var(--s4);
  margin: 0 0 var(--s5);
  font-size: var(--t-small);
  line-height: 1.5;
}
@media (min-width: 480px) {
  .bookrow-rec { grid-template-columns: max-content minmax(0, 1fr); }
}
.bookrow-rec dt {
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding-top: 3px;
}
.bookrow-rec dd { margin: 0; color: var(--bone-dim); }

.bookrow-act { margin: 0; }
.bookrow-meta { min-width: 0; }
/* In the third column the record labels stack above their values: a 300px
   column is too narrow for a label beside an ISBN, and this rule has to come
   after the two-column rule above rather than beside the grid definitions,
   or the 480px breakpoint wins on source order. */
@media (min-width: 1100px) {
  .bookrow-rec { grid-template-columns: 1fr; gap: 2px; }
  .bookrow-rec dt { padding-top: var(--s2); }
  .bookrow-rec dt:first-child { padding-top: 0; }
  .bookrow-act .btn { width: 100%; min-width: 0; }
}

.bookrow-act .btn { min-width: 15rem; }
@media (max-width: 479px) { .bookrow-act .btn { width: 100%; min-width: 0; } }

/* The giveaway flag. Gold type on the section ground is 8.81 against navy and
   8.17 against navy-2; it is never a gold fill with white on it. */
.flag {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(214, 179, 90, 0.5);
  border-radius: 999px;
  padding: 4px var(--s3);
  margin-bottom: var(--s3);
}
.section--light .flag { color: var(--green-2); border-color: rgba(0, 96, 63, 0.4); }

/* The giveaway block. Full width of the sheet with a gold edge, so it reads
   as the banner it is rather than as one more card. The paragraphs inside
   keep their 68ch measure from the base rules, so the line length is not at
   risk from the panel being wide. */
.panel--wide {
  max-width: none;
  border-color: rgba(214, 179, 90, 0.72);
  box-shadow: 0 0 0 1px rgba(214, 179, 90, 0.18);
  padding: var(--s7);
}
@media (max-width: 639px) { .panel--wide { padding: var(--s5); } }
.panel--wide .actions { margin-top: var(--s5); }

/* The giveaway panel: copy on the left, the flagged title's cover on the
   right. Below 900 the cover follows the copy rather than leading it, because
   the offer is the point and the picture is the evidence for it. */
.freebook { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .freebook { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s9); }
}
.freebook-bd { min-width: 0; }
.freebook-bd .actions { margin-top: var(--s6); }
/* The figure is sized to the cover rather than the column, so anything
   positioned against its corners lands on the artwork instead of floating in
   the empty half of a wide column. That is what the New flag needs. */
.freebook-fig { position: relative; width: min(280px, 100%); margin-inline: auto; }
.freebook-fig picture { display: block; }

/* The New flag. Navy on gold, which measures 8.81; the reverse, white on
   gold, is 2.01 and is on the prohibited list at the top of this file. It
   sits proud of the cover's corner rather than inside it, so it reads as
   something stuck on rather than part of the artwork. */
.newflag {
  position: absolute;
  top: -14px;
  right: -18px;
  z-index: 2;
  transform: rotate(12deg);
  background: var(--gold);
  color: var(--navy);
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: 8px 16px;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
@media (max-width: 899px) { .newflag { top: -10px; right: -12px; font-size: 0.8125rem; padding: 6px 12px; } }
.freebook-fig .book-cover { width: 100%; max-width: none; height: auto; }

/* The fanned covers in the Books page head. The image carries its own
   transparency, so it sits straight on the section ground with no card or
   border around it: a frame around a photograph of objects makes them look
   like a product shot rather than a shelf. */
.bookshelf { margin: 0; }
.bookshelf picture { display: block; }
.bookshelf img { width: 100%; height: auto; }
@media (max-width: 899px) { .bookshelf { margin-top: var(--s6); } }

/* The three media appearances, as one supplied strip across the full sheet.
   It replaced a fanned collage on 3 Sep 2026 when the client sent a finished
   composite. Rounded to match the cards, and no border: the panels have their
   own black gutters and a second edge around them reads as a frame within a
   frame. */
.mediastrip { position: relative; margin: var(--s7) 0 0; }
.mediastrip picture { display: block; }
.mediastrip img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
@media (max-width: 639px) { .mediastrip { margin-top: var(--s6); } }

/* --------------------------------------------------------------------------
   Hitmap: clickable regions over a composite image.

   Used by the media strip, where each panel opens a video, and by the
   bookshelf, where each cover jumps to that book's row. Percentages, not an
   image map: <area> takes absolute pixel coordinates, so its hotspots slide
   off the artwork as soon as the image is responsive. The left and width
   values are set inline by the block that renders each one, from measurements
   of the image file rather than from estimates.
   -------------------------------------------------------------------------- */
.hitmap { position: relative; }
.hitmap-hits { position: absolute; inset: 0; }
.hitmap-hit {
  position: absolute;
  top: 0; bottom: 0;
  display: grid;
  place-items: center;
  background: transparent;
  transition: background var(--fast) var(--ease);
}

/* A link nobody can see is a link nobody clicks. These are not silently
   clickable: hovering or tabbing to a region dims it and shows a badge, so
   the affordance appears at the moment somebody is looking for it without
   putting permanent badges over the client's photographs. */
.hitmap-badge {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--aqua); color: var(--navy);
  font-size: 18px;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.hitmap-hit:hover,
.hitmap-hit:focus-visible { background: rgba(8, 26, 38, 0.42); }
.hitmap-hit:hover .hitmap-badge,
.hitmap-hit:focus-visible .hitmap-badge { opacity: 1; transform: scale(1); }
.hitmap-hit:focus-visible { outline: 3px solid var(--aqua); outline-offset: -3px; border-radius: 2px; }

/* Touch has no hover, so the badges have to be always on there. How loud they
   can be depends on how many there are. The media strip has three wide panels
   and carries a full badge comfortably. The bookshelf has five narrow ones,
   and five full badges over five covers hid the titles they were pointing at,
   which is the opposite of the job. So the shelf gets a smaller marker and no
   scrim: the artwork stays readable, and the whole band is still the tap
   target whatever size the marker on it is. */
@media (hover: none) {
  .hitmap-badge { opacity: 1; transform: scale(1); width: 44px; height: 44px; font-size: 15px; }
  .hitmap-hit { background: rgba(8, 26, 38, 0.2); }

  .bookshelf .hitmap-hit { background: transparent; }
  .bookshelf .hitmap-badge {
    width: 30px; height: 30px;
    font-size: 13px;
    opacity: 0.92;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hitmap-badge { transition: none; transform: none; }
  .hitmap-hit:hover .hitmap-badge,
  .hitmap-hit:focus-visible .hitmap-badge { transform: none; }
}

/* --------------------------------------------------------------------------
   Social buttons
   A row of lit profile buttons, replacing the fanned tiles on 3 Sep 2026 after
   the client supplied a reference image of glowing round buttons.

   The reference is a picture. This is not, for the same three reasons the
   fanned version was not: these are real links a keyboard can reach and a
   screen reader can name, they stay sharp on any display, and a sixth profile
   is one line in the plugin's list rather than a regenerated image. The lit
   look is CSS, and the brand colors come from that same list as two custom
   properties per button, so nothing about a profile is stated twice.

   The glow is a ring plus a spread shadow rather than a filter, because a
   filter would blur the mark inside the button as well as the edge.
   -------------------------------------------------------------------------- */
.socialfan {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* The column this sits in is a full-height grid track, so without a height
     the row hugs the top of it and reads as floating above the paragraph it
     belongs beside. Filling the track lets align-items do the centring. */
  height: 100%;
}
.socialfan li { margin: 0; }

.socialfan-t {
  --face: var(--brand);
  --lift: 0px;
  --spread: 3px;
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--face);
  color: #fff;
  overflow: hidden;
  box-shadow:
    0 0 0 2.5px var(--glow),
    0 0 22px var(--spread) var(--glow),
    inset 0 2px 1px rgba(255, 255, 255, 0.28),
    inset 0 -12px 20px rgba(0, 0, 0, 0.3),
    0 10px 22px rgba(0, 0, 0, 0.45);
  transform: translateY(var(--lift));
  transition: transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}

/* The gloss. A soft white highlight off the top left corner, which is what
   makes a flat disc read as a lit button rather than a colored circle. */
.socialfan-t::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 26% 12%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}

.socialfan-t svg {
  position: relative;
  width: 30px; height: 30px;
  display: block;
}

.socialfan-t:hover,
.socialfan-t:focus-visible {
  --lift: -4px;
  --spread: 9px;
  z-index: 2;
}
.socialfan-t:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 4px;
}

@media (min-width: 560px) {
  .socialfan { gap: 14px; }
  .socialfan-t { width: 72px; height: 72px; }
  .socialfan-t svg { width: 39px; height: 39px; }
}
@media (min-width: 900px) {
  .socialfan { gap: 18px; }
  .socialfan-t { width: 84px; height: 84px; }
  .socialfan-t svg { width: 46px; height: 46px; }
}

/* On a light ground the glow has nothing to glow against, so it becomes a
   plain ring and the depth shadow does the lifting instead. */
.section--light .socialfan-t {
  box-shadow:
    0 0 0 2px var(--glow),
    inset 0 2px 1px rgba(255, 255, 255, 0.28),
    inset 0 -12px 20px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(8, 26, 38, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .socialfan-t { transition: none; transform: none; }
  .socialfan-t:hover,
  .socialfan-t:focus-visible { transform: none; }
}
@media (max-width: 899px) {
  .freebook { text-align: center; }
  .freebook-bd .actions { justify-content: center; }
  .freebook-fig { width: min(200px, 55%); margin-inline: auto; }
  .duo > div { text-align: center; }
  .duo .actions { justify-content: center; }
  .section-hd--split { text-align: center; }
  .section-hd--split .actions { justify-content: center; }
}

/* .disclosure-h was the heading on the Books page's standing-note section,
   removed 3 Sep 2026 when that note moved under the video. The rule is kept
   because the same pattern is wanted on /tbi/ when that page is rebuilt. */
.disclosure-h { font-size: clamp(1.15rem, 1.8vw, 1.375rem); margin-bottom: var(--s3); }


/* --------------------------------------------------------------------------
   16c. About page, /about/
   Added 3 Sep 2026.

   Two shapes only: the biography block, and the record. Everything else on
   that page is reused from sections already in this file, so /about/ adds
   about a hundred lines rather than a stylesheet of its own.
   -------------------------------------------------------------------------- */

/* Named areas rather than source order, because the reading order and the
   visual order differ. On a phone the column runs heading, portrait, prose:
   the H1 stays first, and the photograph sits between the name and the
   biography where it introduces the person the prose is about. From 900 the
   text becomes one column and the portrait is held beside it across both
   rows. The same DOM does both, so there is no duplicated markup and nothing
   is hidden from one viewport and shown to another. */
.bio {
  display: grid;
  gap: var(--s6);
  max-width: 1160px;
}
@media (min-width: 900px) {
  .bio {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "head fig" "body fig";
    gap: var(--s5) var(--s9);
    align-items: start;
  }
  .bio-hd  { grid-area: head; }
  .bio-fig { grid-area: fig; }
  .bio-bd  { grid-area: body; }
}

.bio-hd h1 { margin-bottom: var(--s3); }

/* The non-physician descriptor. Gold on navy measures 8.81, so it carries as
   type on the dark ground; it is the same treatment the homepage hero gives
   the same line, deliberately, because it is the same statement. */
.bio-cred {
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0;
}

/* The card fill and the page ground differ by 1.08, which is not a perceivable
   edge, so the portrait gets a hairline like every other surface on this site.
   The width cap is the file's own: the source is 851px across and upscaling a
   twenty year old official portrait shows immediately. */
.bio-fig {
  margin: 0;
  max-width: 380px;
}
@media (max-width: 899px) { .bio-fig { max-width: 420px; } }
.bio-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline-lift);
  border-radius: var(--radius);
}
.bio-fig figcaption {
  margin-top: var(--s3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bone-faint);
}

.bio-bd .lede { margin-bottom: var(--s5); }
.bio-bd .actions { margin-top: var(--s6); }

/* The record. A definition list, because that is what it is: a label and the
   fact it labels. Rows are separated by a rule rather than boxed, so nine
   entries read as one document instead of nine cards, and so a tenth entry
   costs nothing to add. */
.dossier {
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.dossier-row {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 720px) {
  .dossier-row {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--s6);
    align-items: baseline;
  }
}
.dossier-row dt {
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aqua);
}
.dossier-row dd {
  margin: 0;
  max-width: 68ch;
  color: var(--bone-dim);
}
.dossier-row dd a { color: var(--bone); }


/* The photograph beside the off-the-clock paragraph. .duo is a plain top
   aligned pair, which leaves a short paragraph hanging off the top of a tall
   picture; this variant centres the two against each other. The image is not
   capped in width the way the portrait is, because this one is a 1400px
   landscape crop and the column never gets that wide. */
.duo--mid { align-items: center; }

.offclock-fig { margin: 0; }
.offclock-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline-lift);
  border-radius: var(--radius);
}

/* Lab figure. Used on /tbi/ for the photograph of Joe in the USF hyperbaric
   laboratory beside the chamber.

   It sits in one half of a .duo opposite the credentials list and is sized to
   MATCH that list, so the two halves read as one block rather than a picture
   with a tail of text beside it.

   The crop is the whole trick. An earlier version of this file argued that
   filling the column would cut Joe out of the frame. That was wrong, and it was
   wrong because it assumed a centred crop. The two figures sit right of centre,
   spanning roughly x 390..990 of 1200, so anchoring the window at 66 percent
   holds both of them at every column height the list realistically reaches:
   at 800px tall the window is still 630 source pixels wide and keeps x 376..1006.
   Verified by rendering the crop at 600, 700 and 800 and looking at it.

   If the list ever grows past about 900px tall the window narrows enough to
   start clipping, so keep .dossier--compact compact.

   Below 900px the duo is a single column and the figure returns to its natural
   4:3, because there is nothing beside it to match. */
.lab-fig { margin: 0; }
.lab-fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline-lift);
  border-radius: var(--radius);
}
.lab-fig figcaption {
  margin-top: var(--s3);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bone-faint);
}
@media (min-width: 900px) {
  .duo .lab-fig { display: flex; flex-direction: column; height: 100%; }
  .duo .lab-fig picture { flex: 1 1 auto; min-height: 0; display: block; }
  .duo .lab-fig img { height: 100%; object-fit: cover; object-position: 66% 50%; }
}

/* Compact dossier. The default .dossier-row puts the term in a fixed 260px
   column beside the definition, which needs the full sheet to breathe. Inside
   a half width duo column that 260px eats most of the measure and the
   definitions fall to four and five wrecked lines.

   So the compact variant stacks the term over the definition at every width,
   drops a step in type size, and tightens the vertical rhythm. It is the same
   document, set narrower. */
.dossier--compact .dossier-row {
  padding-block: var(--s3);
  gap: var(--s1);
}
@media (min-width: 720px) {
  .dossier--compact .dossier-row { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}
.dossier--compact .dossier-row dt { font-size: var(--t-eyebrow); }
.dossier--compact .dossier-row dd { font-size: 0.8125rem; line-height: 1.5; max-width: none; }

/* Trial section, stacked. The two halves used to sit in a .duo. They now run
   one above the other at the full width of the sheet, by request.

   Note what this overrides. The global rule is p { max-width: 68ch }, which is
   the measure the rest of the site is set to and the reason the body copy is
   comfortable to read. Releasing it here is a deliberate exception for this one
   section, not a change of mind about measure: at a wide viewport these lines
   run past 100 characters, which is long. If the section ever reads as a wall,
   the fix is to put a cap back on this block rather than to shorten the copy. */
.trial-stack > div + div { margin-top: var(--s7); }

/* Full measure, page wide. Applied by a class on <main> in page-tbi.html so it
   reaches every section of that one page and no other template.

   This releases the caps the rest of the site is built on: p is 68ch globally,
   .lede is 62ch, and a dossier definition is 68ch. Those numbers are the house
   measure and they are why the body copy elsewhere is comfortable. Turning them
   off is a deliberate, page scoped exception, requested for this page.

   The tradeoff, written down so it is a choice and not an accident: on a wide
   monitor these lines run well past 100 characters, which is roughly half again
   the span the eye tracks comfortably. If the page ever reads as a wall, put a
   cap back HERE, on this one class, rather than shortening the copy. */
body.dds-wide .section p,
body.dds-wide .section .lede,
body.dds-wide .section li,
body.dds-wide .section .dossier-row dd,
body.dds-wide .plate-block p,
body.dds-wide .plate-block .lede { max-width: none; }

/* --------------------------------------------------------------------------
   Flip card: Record 01 on the research archive.
   Added 3 Sep 2026.

   Record 01 doubles as the teaching example. Clicking it turns the specimen
   label over to a plain-language explanation of how to read one, pitched at a
   younger reader under the heading Embrace Your Geek.

   Layout: both faces sit in the SAME grid cell (grid-area 1/1) rather than
   being absolutely positioned. That way the container is as tall as the taller
   face and nothing overflows when the back has more text than the front, which
   it does. Absolute positioning here collapses the container to zero height.

   The back is the bone panel on charcoal type, reusing the palette the site
   already uses for .section--light. It is the biggest available contrast step
   away from the dark label, which is the point: a reader should be able to see
   at a glance that they are looking at an explanation and not at data.

   Accessibility. The container is role=button with tabindex 0 and Enter/Space
   handling, because neither face contains a link or a control, so there is
   nothing to trap focus. The inactive face is aria-hidden so a screen reader
   never reads both sides at once. The Source link lives outside this component
   and stays reachable on both sides.
   -------------------------------------------------------------------------- */
.flip { perspective: 1200px; cursor: pointer; }
.flip:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; border-radius: var(--radius); }

/* Faces are absolutely positioned and the container height is set by script
   to whichever face is showing, then transitioned.

   The first version stacked both faces in one grid cell. That makes the
   container as tall as the TALLER face permanently, which left 83px of dead
   space under the front label at 1440px and 141px at 1100px, on every card in
   the library. Measured, not guessed. Absolute faces plus a scripted height is
   the only way to size the box to the side you are actually looking at. */
.flip-in {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.flip.is-flipped .flip-in { transform: rotateY(180deg); }

.flip-ft, .flip-bk {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-bk { transform: rotateY(180deg); }

/* The prompt on the front. Small, and it says what will happen. */
.flip-hint {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--aqua);
}
.flip-hint::after { content: "\21BB"; font-size: 1.1em; letter-spacing: 0; }

/* The back: light panel, dark type. */
.flip-bk-in {
  background: var(--bone);
  color: var(--charcoal);
  border-radius: var(--radius);
  padding: var(--s5);
  height: 100%;
}
.flip-bk h4 {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  margin: 0 0 var(--s1);
  color: var(--charcoal);
}
.flip-bk .flip-kicker {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--green);
  display: block; margin-bottom: var(--s2);
}
.flip-bk dl { margin: 0; }
.flip-bk dt {
  font-family: var(--f-display);
  font-size: 0.8125rem; font-weight: 700;
  color: var(--charcoal);
  margin-top: var(--s4);
}
.flip-bk dd {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--charcoal-dim);
  max-width: none;
}
.flip-bk .flip-close {
  margin-top: var(--s5);
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green);
}

/* Motion is decoration here; the state change is what matters. */
@media (prefers-reduced-motion: reduce) {
  .flip-in { transition: none; }
}

/* Before the script runs there is no height on .flip-in, and absolute faces
   would collapse it to zero. Until then the front face holds the box open in
   normal flow; the script takes over on init. */
.flip-in:not([style*="height"]) .flip-ft { position: relative; }

/* Four doors instead of six. Written as two classes so it beats the six-column
   rule in section 17 on specificity rather than on source order, which means
   this block can move without the router quietly breaking. Two across from
   560 and four from 1000: never three, because three columns and four items
   is an orphan on a second row. */
.doors.doors--four { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .doors.doors--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .doors.doors--four { grid-template-columns: repeat(4, 1fr); } }

/* Three-door variant: stretches evenly across the sheet at desktop. */
.doors.doors--three { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .doors.doors--three { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   16d. Research library, /research/
   Added 3 Sep 2026, replacing the pre-redesign markup on the compatibility
   layer for all three research templates.

   Everything here styles markup the Dr. Deep Sea Core plugin emits. The class
   names are the interface and the theme does not get to change them, so if a
   selector below looks oddly specific it is because it is following the
   block's output rather than choosing its own shape.
   -------------------------------------------------------------------------- */

/* Field filters. Real links to /research/field/{slug}/, never a JS toggle, so
   each field is a crawlable address rather than a hidden div. Styled as the
   chips they already look like, with the current one filled rather than
   merely tinted, because "tinted" does not survive a colorblind reader. */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s6);
}
.filters a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid var(--hairline-lift);
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--bone-dim);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.filters a:hover { border-color: var(--aqua); color: var(--aqua); }
.filters a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
/* Green fill with bone on it measures 5.37. Aqua fill is prohibited here:
   white on aqua is 2.06. */
.filters a[aria-current="page"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--bone);
}

/* The bibliography. An ordered list, because the order is the argument:
   newest first, and the count is what it is. */
.biblio { list-style: none; margin: 0; padding: 0; }

.ref {
  padding-block: var(--s7);
  border-top: 1px solid var(--hairline);
}
.ref:first-child { border-top: 0; padding-top: 0; }

/* Summary left, specimen label right, which is the shape the block was
   written for. The label column is fixed rather than fractional: it holds
   label and value pairs, and a column that grows with the viewport pushes
   those two apart until they stop reading as pairs. */
.ref-grid { display: grid; gap: var(--s5); }
@media (min-width: 1000px) {
  .ref-grid {
    grid-template-columns: 2.25rem minmax(0, 1fr) 50%;
    gap: var(--s6);
    align-items: start;
  }
}

/* The record number is drawn by CSS from the list counter rather than printed
   by the block, so deleting a record renumbers the rest for free. It is
   decorative: the entry is already an <li> and a screen reader counts them. */
.ref-no {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--aqua);
}
.ref-no::before { content: counter(dds-ref, decimal-leading-zero); }
.biblio { counter-reset: dds-ref; }
@media (min-width: 1000px) {
  .biblio { margin-inline-start: calc(var(--gutter) * -0.5); }
}
.ref { counter-increment: dds-ref; }

.ref-bd { min-width: 0; }
.ref-bd h3 { font-size: var(--t-large); margin-bottom: var(--s3); }
.ref-bd h3 a { color: var(--bone); text-decoration: none; }
.ref-bd h3 a:hover { color: var(--aqua); }
.ref-bd h3 a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
.ref-bd .summary { color: var(--bone-dim); margin-bottom: 0; max-width: none; }

.ref-side { min-width: 0; }
/* Inside a bibliography row the label has the row's own spacing around it, so
   it drops the standalone block margin it carries elsewhere. */
.ref-side .specimen { margin-block: 0; }
.ref-side .specimen-ft { margin-top: 0; }

/* The header splits left and right. The block emits .acc and .ident as two
   spans and nothing else, so the split is done here. */
.specimen-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); justify-content: space-between; }
.specimen-hd .ident { color: var(--bone-faint); font-variant-numeric: tabular-nums; }
.specimen dd .mono-break { overflow-wrap: anywhere; }
.specimen-ft {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s4); justify-content: space-between;
}
/* The source link measured 63 by 22 as plain inline text. It is a standalone
   link in a footer bar, not a link inside a sentence, so the WCAG 2.5.8 inline
   exception does not cover it. Given a box it clears 44. */
.specimen-ft a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--aqua);
}

/* The citation line under a record title. Serif, because it is a quotation of
   how the work is printed elsewhere rather than site copy. */
.cite {
  font-family: var(--f-edit);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 60ch;
}
.cite strong { color: var(--gold); font-weight: 600; }

/* A single record: prose left, the label and its neighbours right. */
.recordgrid { display: grid; gap: var(--s7); }
@media (min-width: 1000px) {
  .recordgrid { grid-template-columns: minmax(0, 1fr) 50%; gap: var(--s9); align-items: start; }
}

.related {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--navy-2);
  padding: var(--s5);
}
.related-hd {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: var(--s4);
}
.related-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.related-list li { border-top: 1px solid var(--hairline); }
.related-list li:first-child { border-top: 0; }
.related-list a {
  display: flex; align-items: center;
  min-height: 44px;
  padding-block: var(--s3);
  font-size: var(--t-small);
  color: var(--bone-dim);
  text-decoration: none;
}
.related-list a:hover { color: var(--aqua); }
.related-ft { margin: 0; font-size: var(--t-small); }
/* Boxed for the same reason as the specimen foot link: a standalone 17px tall
   link is under the 24px floor. */
.related-ft a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--aqua);
}

/* The eyebrow is a breadcrumb on the two inner research templates, so it has
   to look like a link without losing the eyebrow's small-caps job. */
/* Padded rather than bare, because a 17px tall breadcrumb is under the 24px
   floor this project holds every interactive target to. The negative margin
   keeps the eyebrow sitting where it did before the box appeared. */
.eyebrow a {
  display: inline-block;
  padding-block: var(--s2);
  margin-block: calc(var(--s2) * -1);
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.eyebrow a:hover { color: var(--bone); }
.eyebrow a:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* The excerpt is the plain-language summary and it is the reason the record
   page exists, so it is set at reading size rather than as metadata. */
.wp-block-post-excerpt__excerpt {
  font-size: var(--t-large);
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 62ch;
}
.wp-block-post-excerpt .wp-block-post-excerpt__more-text { display: none; }

/* The pair of standing notes. Rule over each rather than a box around each:
   two boxes side by side read as cards to click, and these are not links. */
.notepair { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .notepair { grid-template-columns: 1fr 1fr; gap: var(--s9); } }
.note-col { border-top: 1px solid var(--hairline-lift); padding-top: var(--s5); }
.note-col h3 { font-size: var(--t-large); margin-bottom: var(--s4); }
.note-col p { color: var(--bone-dim); }
.note-col p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. Final CTA — one bar of six doors across the bottom
   Rebuilt 2 Sep 2026 from a stacked text list to the client's card bar.
   Six across from 1200, three from 720, two below. Aqua on charcoal is a
   fill and a stroke here, never body type on bone, so the contrast rules
   at the top of this file hold: the labels are bone, the icons are aqua.
   -------------------------------------------------------------------------- */
.finalcta { background: var(--charcoal); }
.finalcta h2 {
  font-size: clamp(1.875rem, 4.4vw, 3.25rem);
  margin: 0 auto var(--s6);
  max-width: 22ch;
  text-align: center;
}

/* One column on a phone. Two columns at 390 left the doors 169 px wide, which
   wrapped "Understand TBI & Hyperbarics" to four lines and dragged that whole
   grid row taller than the rest. Full-width rows hold every label to two. */
.doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
}
@media (min-width: 560px)  { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .doors { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
@media (min-width: 1200px) { .doors { grid-template-columns: repeat(6, 1fr); } }

.door {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 76px;
  padding: var(--s4);
  border: 1px solid var(--aqua);
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.25;
  color: var(--bone);
  text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@media (min-width: 1200px) { .door { font-size: 0.9375rem; padding: var(--s4) var(--s3); } }

.door-ic { display: grid; place-items: center; flex-shrink: 0; }
.door-ic svg { width: 32px; height: 32px; color: var(--aqua); }
.door-tx { display: block; }

.door:hover { background: rgba(24, 201, 195, 0.10); border-color: var(--bone); color: var(--bone); }
.door:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   18. Colophon
   -------------------------------------------------------------------------- */
.colophon {
  background: var(--charcoal);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s8) var(--s6);
}
.colophon-grid {
  display: grid; gap: var(--s7);
  grid-template-columns: 1fr;
  margin-bottom: var(--s7);
}
@media (min-width: 560px)  { .colophon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .colophon-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); } }

/* Footer column headings are h2 in the markup: an h4 straight after the
   page's h2 content headings is a level skip. Styling is unchanged. */
.colophon h4, .colophon-h {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: var(--s4);
}
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: var(--s1); }

/* WCAG 2.2 target size. A standalone list link at line height alone is
   about 17px tall; the padding takes it past 24. */
.colophon li a {
  display: inline-block;
  padding-block: 5px;
  color: var(--bone-dim); text-decoration: none; font-size: var(--t-small);
}
.colophon li a:hover { color: var(--bone); }

.social { display: flex; gap: var(--s3); margin-top: var(--s5); }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); border-radius: 50%;
  color: var(--bone-dim);
}
.social a:hover { border-color: var(--aqua); color: var(--aqua); }
.social svg { width: 17px; height: 17px; }

/* Made much smaller on 3 Sep 2026 at the client's request: it was a heavy
   bordered slab across the foot of every page.

   It is now set at the same 0.8125rem as the note under the Spark video,
   which carries this same disclosure and which the client asked for as very
   small print. That is deliberately the floor rather than a starting point.
   This is the non-physician disclosure, and text nobody can read does not
   disclose anything, so what shrank is the box around it: the padding, the
   margin below it, and the number of lines the paragraph takes. It keeps its
   gold edge, and the full version stays a link away in the legal row below. */
.disclosure {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  background: rgba(244,242,234,0.03);
}
/* Runs the full width of the sheet, at the client's direction on 3 Sep 2026.

   This paragraph carried a measure of its own from 1 Sep, when the page's
   1180px column was removed and it ran to 1789px on a 1920 monitor. The
   measure was there for readability: past roughly 90 characters a line the
   eye starts losing its place on the return sweep, and this is the disclosure.
   Full width is about 166 characters at 1440 and 226 at 1920.

   The trade the client chose is a real one and it is not all cost: at full
   width the paragraph sets in two lines instead of three, which is what he
   was asking for in the first place, and the block drops to about 65px.
   Restoring the measure is one value on the line below. */
.disclosure p { font-size: 0.8125rem; color: var(--bone-dim); line-height: 1.5; max-width: none; }
.disclosure strong { color: var(--bone); }

.colophon-foot {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  align-items: center; justify-content: space-between;
}
.colophon-foot p { margin: 0; }
.colophon-foot a { display: inline-block; padding-block: 4px; color: var(--bone-faint); }
.colophon-foot a:hover { color: var(--bone); }

/* Build credit, one line under the legal row on every page. Sits below the
   colophon-foot rule rather than inside it, because a third item in that
   flex row wraps into the gap between the copyright and the legal links. */
.buildcredit {
  margin-top: var(--s5);
  color: var(--bone-faint);
}
.buildcredit a { color: var(--bone-faint); }
.buildcredit a:hover { color: var(--bone); }

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s5); max-width: 640px; }
.field { display: grid; gap: var(--s2); }
.field > label {
  font-family: var(--f-display);
  font-size: var(--t-small);
  font-weight: 600;
}
.field .hint { font-size: var(--t-small); color: var(--bone-faint); }
.section--light .field .hint { color: var(--charcoal-dim); }
.req { color: var(--gold); }
.section--light .req { color: var(--green); }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s3) var(--s4);
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--bone);
  background: var(--navy-2);
  border: 1px solid var(--hairline-lift);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--bone-faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--aqua); }
.field input::placeholder, .field textarea::placeholder { color: var(--bone-faint); }

.section--light .field input,
.section--light .field select,
.section--light .field textarea {
  background: #fff; color: var(--charcoal); border-color: var(--hairline-dark);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--aqua) 50%),
                    linear-gradient(135deg, var(--aqua) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--s8);
}

.field[data-error] input, .field[data-error] select, .field[data-error] textarea {
  border-color: var(--gold);
}
.field-err { font-size: var(--t-small); color: var(--gold); }
.section--light .field-err { color: #A8352B; }

/* Progressive disclosure: the consult panel. The rate is written by script
   from a data attribute so it never sits in the default page source. */
.reveal {
  display: none;
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--aqua);
  border-radius: var(--radius);
  padding: var(--s5);
  background: rgba(24,201,195,0.06);
}
.reveal.is-on { display: block; }
.reveal h4 { color: var(--aqua); margin-bottom: var(--s3); }
.reveal p { font-size: var(--t-small); color: var(--bone-dim); }

/* Honeypot. Offscreen, not display:none, so bots that respect it still fill it. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   20. Existing blocks, restyled. Markup and schema are unchanged.
   -------------------------------------------------------------------------- */
/* The specimen label.

   Rewritten 3 Sep 2026. The rules here were written for a flat dt/dd grid and
   the block does not emit one: it wraps every pair in its own div, so the pairs
   were laying out two across, and the header bar sat inset inside .specimen-in's
   padding as a floating tinted box instead of spanning the card.

   The markup, which the theme does not get to change, is:

     .specimen > .specimen-in > .specimen-hd (.acc + .ident)
                              > dl > div > dt + dd

   So .specimen-in carries no padding of its own and the header and the list
   each pad themselves. That is the only way to get a full-bleed header bar out
   of a header that is nested one level in. */
.specimen {
  background: var(--navy-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  margin-block: var(--s6);
}
.specimen-in { padding: 0; }
.specimen-hd {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--hairline);
  background: rgba(24,201,195,0.07);
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--aqua);
}
/* The foot line is a sibling of the label, not a child of it: the block emits
   it after the card so that a record with no source link simply has no foot.
   These borders make the two read as one card anyway, which is what the
   artboard shows, without the theme touching markup it does not own. */
.specimen:has(+ .specimen-ft) { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.specimen-ft {
  margin-top: 0;
  padding: var(--s3) var(--s5);
  background: var(--navy-2);
  border: 1px solid var(--hairline);
  border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--t-small); color: var(--bone-faint);
}

/* One pair per row, always. Label left, value right from 480, stacked below
   it, where a 92px label column would leave the value too narrow to read. */
.specimen dl { display: grid; gap: var(--s4); margin: 0; padding: var(--s5); }
.specimen dl > div { display: grid; gap: var(--s1) var(--s4); min-width: 0; }
@media (min-width: 480px) {
  .specimen dl > div { grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; }
}
.specimen dt {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-faint);
}
.specimen dd { margin: 0; font-size: var(--t-small); min-width: 0; }
/* Joe's own name is emphasized in the authors string by the record fields.
   Gold on the card ground measures 8.81. */
.specimen dd strong { color: var(--gold); font-weight: 600; }

/* CLASS COLLISION, and the reason for this rule.

   The compatibility layer in section 21 carries `.acc` from the pre-redesign
   templates, where it meant "accordion" and gets a bottom border and vertical
   padding. The specimen block uses `.acc` for the accession number in its
   header, so every label was drawing a stray rule under its record number and
   sitting off the header's baseline.

   Fixed here rather than in section 21 because the specimen is the component
   that survives and the accordion is not. When the last interior template is
   rebuilt and section 21 goes, this rule goes with it. */
.specimen-hd .acc { border-bottom: 0; padding-block: 0; }

.record {
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--s5);
}
.record:last-child { border-bottom: 0; }
.record h3 { margin-bottom: var(--s2); }
.record h3 a { color: var(--bone); text-decoration: none; }
.record h3 a:hover { color: var(--aqua); }
.record .ids {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  font-family: var(--f-display);
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: var(--s3);
}
.record .biblio { font-size: var(--t-small); color: var(--bone-dim); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }

/* --------------------------------------------------------------------------
   21. Compatibility layer.
   The six interior templates still carry plate-era class names. These keep
   them coherent in the new palette until each gets its own pass. Delete this
   block once every template has been rebuilt.
   -------------------------------------------------------------------------- */
.section-dk { font-size: var(--t-large); line-height: 1.5; color: var(--bone-dim); }
.sec-deep   { background: var(--navy-2); }
.section-no, .no {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600; letter-spacing: 0.12em;
  color: var(--aqua);
}
.section-ti { font-family: var(--f-display); }
.label {
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-faint);
}
.headline { font-family: var(--f-display); }
.marg { font-size: var(--t-small); color: var(--bone-faint); }
.col-main { min-width: 0; }
.col-side { min-width: 0; }
.grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, 1fr); }
  /* .grid is a 12-track grid, so a child with no span occupies a single
     track and the column collapses to roughly one twelfth of the sheet.
     .col-main and .col-side carried min-width:0 and no span, which put
     every two-column section on this site into two narrow strips against
     the left edge. The spans are the layout; they are not optional. */
  .col-main { grid-column: span 8; }
  .col-side { grid-column: span 4; }
}
.entry {
  display: block; padding-block: var(--s5);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
}
.entry:last-child { border-bottom: 0; }
.dash { border-bottom: 1px solid var(--hairline); }
.rule { border: 0; border-top: 1px solid var(--hairline); }
.rule-heavy { border: 0; border-top: 2px solid var(--aqua); }
.rule-double { border: 0; border-top: 3px double var(--hairline-lift); }
.pull {
  font-family: var(--f-edit); font-style: italic;
  font-size: var(--t-quote); color: var(--gold);
}
.act-key { color: var(--gold); }
.standing, .plainbox {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s5);
  background: var(--navy-2);
}
.acc, .qa { border-bottom: 1px solid var(--hairline); padding-block: var(--s4); }
.ans { color: var(--bone-dim); font-size: var(--t-small); }
.feature, .route, .router, .contents, .steps, .fee, .flag, .ident, .r-role { min-width: 0; }

/* Steps list: bold heading + description on its own line */
.steps li { margin-bottom: var(--s4); }
.steps li span { display: block; margin-top: 4px; font-weight: normal; }

/* Consult section: equal-width columns */
#consult .grid { gap: var(--s6); }
@media (min-width: 900px) {
  #consult .col-main { grid-column: span 6; }
  #consult .col-side { grid-column: span 6; }
}
.plate-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .plate-grid { grid-template-columns: 1fr 1fr; } }


/* --------------------------------------------------------------------------
   21b. Inquiry form, /work-with-joe/#inquiry
   Added 4 Sep 2026.

   Five visible fields, a select with nine reason values, a honeypot that is
   positioned off-screen rather than display:none (some bots skip hidden
   fields), a timing stamp in JS, and a progressive-disclosure panel for the
   consult price that appears only when that reason is selected.

   The form sits on the deep ground (--deep / --navy-2). All type is bone on
   navy or the dedicated dim variants. Field borders use the lifted hairline
   so they read against the card fill. The submit button is green with white
   type (5.37 contrast). The consult panel uses aqua as a left-border accent
   and a tinted aqua background.

   The grid is single-column on mobile, two columns from 900: form left, the
   media/service-member sidebar right, matching the old #contact layout.
   -------------------------------------------------------------------------- */

.inquiry-hd { max-width: 60ch; margin-bottom: var(--s7); }
.inquiry-dk { font-size: var(--t-body); color: var(--bone-dim); margin-top: var(--s3); }

.inquiry-grid {
  display: grid;
  gap: var(--s7);
}
@media (min-width: 900px) {
  .inquiry-grid {
    grid-template-columns: 1fr 340px;
    align-items: start;
  }
}

.inquiry-col {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.inquiry-side {
  color: #9CB2C3;
}

/* Honeypot: off-screen, not display:none. Bots that skip hidden fields still
   fill this one, humans never see it, screen readers skip it via aria-hidden
   on the wrapper. */
.inquiry-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fields ----------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-lb {
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bone);
}

.field-req { color: var(--gold); }

.field-in {
  min-height: 50px;
  padding: 13px 16px;
  background: var(--navy-2);
  border: 1px solid var(--hairline-lift);
  border-radius: 4px;
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--fast) var(--ease);
}
.field-in::placeholder {
  color: var(--bone-dim);
  opacity: 0.5;
}
.field-in:focus {
  outline: none;
  border-color: var(--aqua);
}
/* Focus-visible for keyboard users; the plain :focus above covers all
   interaction so the field always shows its active state. */
.field-in:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

/* Select: the browser arrow is replaced with a custom chevron via
   background-image so the field looks consistent across platforms. */
.field-sel {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%2318C9C3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
/* The disabled placeholder option */
.field-sel option[disabled] { color: var(--bone-dim); }
.field-sel option { background: var(--deep); color: var(--bone); }

/* Textarea */
.field-ta {
  min-height: 120px;
  resize: vertical;
}

/* Consult disclosure panel ------------------------------------------------ */
.inquiry-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s var(--ease), opacity 0.25s var(--ease);
}
.inquiry-reveal.is-on {
  max-height: 500px;
  opacity: 1;
}

.inquiry-reveal-in {
  border: 1px solid var(--hairline-lift);
  border-left: 2px solid var(--aqua);
  border-radius: 4px;
  padding: var(--s5);
  background: rgba(24, 201, 195, 0.055);
}

.inquiry-reveal-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.inquiry-reveal-hd h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--aqua);
}
.inquiry-reveal-fee {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--bone);
}

.inquiry-reveal-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--s4);
}
.inquiry-reveal-dl > div {
  display: flex;
  gap: 12px;
  font-size: 0.875rem;
}
.inquiry-reveal-dl dt {
  flex: 0 0 74px;
  font-family: var(--f-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-top: 3px;
}
.inquiry-reveal-dl dd { margin: 0; color: var(--bone); }

.inquiry-reveal-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--bone-dim);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}

/* Submit and note -------------------------------------------------------- */
.inquiry-submit { margin-top: var(--s3); }

.inquiry-note {
  font-size: 0.75rem;
  color: var(--bone-dim);
  line-height: 1.5;
}

/* Success and error states ----------------------------------------------- */
.inquiry-ok,
.inquiry-err {
  margin-top: var(--s6);
  padding: var(--s5);
  border-radius: 4px;
}
.inquiry-ok {
  background: rgba(0, 122, 83, 0.15);
  border: 1px solid var(--green);
  color: var(--bone);
}
.inquiry-err {
  background: rgba(214, 179, 90, 0.1);
  border: 1px solid var(--gold);
  color: var(--bone);
}


/* --------------------------------------------------------------------------
   21c. Interior hero — Science, Youth and other rebuilt interior pages.
   Added 7 Sep 2026. A lighter hero than the homepage: an image behind a
   scrim, an eyebrow, an H1, a lede and one or two buttons. The image is
   optional; without it the section is a plain navy ground.
   -------------------------------------------------------------------------- */
.interior-hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}
.interior-hero .hero-media {
  position: absolute; inset: 0; z-index: -2;
}
.interior-hero .hero-media picture { display: block; position: absolute; inset: 0; }
.interior-hero .hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.interior-hero .hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--navy) 6%, rgba(8,26,38,0.96) 36%, rgba(8,26,38,0.82) 56%, rgba(8,26,38,0.50) 80%, rgba(8,26,38,0.60) 100%);
}
@media (min-width: 900px) {
  .interior-hero .hero-media::after {
    background:
      linear-gradient(to right, var(--navy) 0%, rgba(8,26,38,0.96) 36%, rgba(8,26,38,0.78) 54%, rgba(8,26,38,0.38) 76%, rgba(8,26,38,0.18) 100%),
      linear-gradient(to bottom, rgba(8,26,38,0.50) 0%, rgba(8,26,38,0) 30%);
  }
}
.interior-hero-in {
  position: relative; z-index: 2;
  padding-block: clamp(var(--s7), 8vh, 120px) var(--s7);
}
.interior-hero-in h1 { margin-bottom: var(--s3); }
.interior-hero-in .lede { max-width: 52ch; margin-bottom: var(--s5); }
@media (min-width: 900px) {
  /* Corrected 7 Sep 2026. Same fix as the homepage hero: max-width on .sheet
     centres a narrow column rather than pinning text to the left. Cap the
     children instead so the sheet stays full-width and text aligns with every
     heading below it. */
  .interior-hero-in {
    --lead: calc((100vw - min(100vw, var(--sheet))) / 2 + var(--gutter));
  }
  .interior-hero-in > * { max-width: calc(58vw - var(--lead) - 24px); }
}

/* The students lane image has Joe and a young reader side by side. The
   default centre crop buries the girl under the left-hand gradient. Shift
   the focal point right so both subjects sit in the visible half. */
/* Students hero: position the photo on the right at natural scale so both
   faces are visible, instead of cover-filling the entire section. */
.interior-hero--students .hero-media {
  position: absolute;
  inset: auto 0 0 auto;
  width: 55%;
  height: 100%;
}
.interior-hero--students .hero-media picture {
  position: absolute;
  inset: auto 0 0 0;
}
.interior-hero--students .hero-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}
.interior-hero--students .hero-media::after {
  background:
    linear-gradient(to right, var(--navy) 0%, rgba(8,26,38,0.60) 20%, rgba(8,26,38,0) 50%),
    linear-gradient(to top, var(--navy) 0%, rgba(8,26,38,0) 40%);
}
@media (max-width: 899px) {
  .interior-hero--students .hero-media {
    width: 100%;
  }
  .interior-hero--students .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }
  .interior-hero--students .hero-media::after {
    background:
      linear-gradient(to top, var(--navy) 6%, rgba(8,26,38,0.92) 30%, rgba(8,26,38,0.70) 50%, rgba(8,26,38,0.30) 75%, rgba(8,26,38,0.40) 100%);
  }
}

/* Giving Back hero: no hero-media for Phase 1. The section renders as
   text on the navy ground. Padding matches the students hero. */
.interior-hero--giving .interior-hero-in {
  padding-block: clamp(var(--s8), 12vh, 160px) var(--s8);
}
.interior-hero--giving .lede { max-width: 56ch; }

/* Giving-back cards: book cover inside a card, sized to stay compact. */
.giving-card-fig {
  width: min(140px, 45%);
  margin-inline: auto;
  margin-bottom: var(--s3);
}
.giving-card-fig img {
  width: 100%; height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* --------------------------------------------------------------------------
   21d. Topic cards — a three-column grid of clickable cards. Reuses the
   existing .card component for fill, border, hover and .card-hit overlay.
   -------------------------------------------------------------------------- */
.topics { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .topics { grid-template-columns: repeat(3, 1fr); } }
.topics .card { padding: var(--s5); }
.topics .card .eyebrow { margin-bottom: var(--s2); }

/* --------------------------------------------------------------------------
   21e. Accordion — tap-to-expand study questions and similar lists.
   Progressive enhancement: panels are visible by default in case JS fails;
   the IIFE in site.js adds [data-accord-ready] to hide them and wire the
   toggle. Keyboard: Enter and Space toggle; no roving tabindex because
   each button is a heading-level control and the section is short enough
   that Tab is fine.
   -------------------------------------------------------------------------- */
.accord { list-style: none; margin: 0; padding: 0; counter-reset: accord; }
.accord-item {
  border-bottom: 1px solid var(--hairline);
}
.accord-item:last-child { border-bottom: 0; }
.accord-btn {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%;
  padding: var(--s5) 0;
  background: none; border: 0;
  font-family: var(--f-display);
  font-size: var(--t-large);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--bone);
  cursor: pointer;
  text-align: left;
}
.accord-btn::before {
  counter-increment: accord;
  content: counter(accord, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--aqua);
  min-width: 2ch;
}
.accord-btn::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 24px; height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23F4F2EA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform var(--fast) var(--ease);
}
.accord-btn[aria-expanded="true"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23F4F2EA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.accord-btn:hover { color: var(--aqua); }
.accord-btn:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; border-radius: 2px; }

.accord-panel {
  padding: 0 0 var(--s5) calc(2ch + var(--s4));
  color: var(--bone-dim);
  font-size: var(--t-body);
  line-height: 1.6;
}
.accord-panel p { max-width: 62ch; }

/* JS-enhanced state: panels hidden until opened */
[data-accord-ready] .accord-panel { display: none; }
[data-accord-ready] .accord-panel.is-open { display: block; }

/* --------------------------------------------------------------------------
   21e-ii. Questions duo — USF Hyperbaric Lab photo beside the accordion.
   Added 7 Sep 2026. On mobile the image stacks above the questions. On
   desktop the duo puts them side by side with the image self-sizing.
   The accordion buttons are set slightly smaller inside .questions-body
   so five questions fit comfortably beside the photograph.
   -------------------------------------------------------------------------- */
.questions-fig {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}
.questions-fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
.questions-fig figcaption {
  margin-top: var(--s3);
  font-size: 0.8125rem;
  color: var(--bone-dim);
}
@media (min-width: 900px) {
  .questions-duo { align-items: start; }
  .questions-fig { position: sticky; top: var(--s6); }
  .questions-body .accord-btn { font-size: 0.9375rem; padding-block: var(--s3); }
  .questions-body .accord-panel { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   21f. Great Grads callout — a raised card with text and a link.
   -------------------------------------------------------------------------- */
.callout {
  background: var(--navy-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--s6);
}
.callout h2, .callout h3 { margin-bottom: var(--s3); }
.callout p { color: var(--bone-dim); }

/* --------------------------------------------------------------------------
   21g. Inquiry detail rows — the educator inquiry section on /students/.
   Uses a definition list with labeled rows on the left and values on the
   right, matching the dossier pattern on /about/ but without the raised
   background.
   -------------------------------------------------------------------------- */
.inquiry-rows {
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.inquiry-rows > div {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-body);
}
.inquiry-rows > div:last-child { border-bottom: 0; }
.inquiry-rows dt {
  flex: 0 0 160px;
  font-family: var(--f-display);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-top: 3px;
}
.inquiry-rows dd { margin: 0; color: var(--bone); flex: 1 1 200px; }

/* --------------------------------------------------------------------------
   21h. Closing links — a row of arrow links at the bottom of an interior page,
   before the shared footer doors.
   -------------------------------------------------------------------------- */
.closing-links {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  align-items: center;
}
/* --------------------------------------------------------------------------
   22. Motion, print, forced colors
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .card, .panel, .specimen, .chip, .pill, .plink { border: 1px solid CanvasText; }
  .btn { border: 1px solid CanvasText; }
}

@media print {
  .masthead, .navpanel, .rail, .finalcta, .social { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .section--light, .section--deep, .colophon { background: #fff !important; color: #000 !important; }
  a { color: #000; }
}

/* --------------------------------------------------------------------------
   22. Subject heading, display slogan
   ------------------------------------------------------------------------
   The H1 on an interior page is now the page's SUBJECT, taken from the label
   that was already sitting above the slogan. The slogan keeps its position,
   its size and every word; it simply stops being the H1.

   The reason: an H1 is the strongest on-page relevance signal there is, and
   nine of eleven H1s on this site were slogans. "Science Wins." tells a search
   engine nothing about what the page is. Visual prominence is a styling
   question and has never been what a heading level means.

   These two rules exist only to hold the appearance still across the tag
   change, and their values were measured from the rendered page rather than
   inferred: the eyebrow computed to 12px/19.2px with text-wrap wrap, and the
   slogan to var(--t-display)/1.04 with text-wrap balance. Both are reproduced
   exactly. Nothing here is a new design decision.
   -------------------------------------------------------------------------- */
h1.eyebrow { line-height: 1.6; text-wrap: wrap; }

.hero-slogan {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s3);
  text-wrap: balance;
}