/* Nasir Neurology, direction G "Cinematic scroll".
   A navy opening, then cream chapters that slide up over it. Every animation
   is decoration on top of a complete, fully visible resting layout; the page
   works without JavaScript (site.js only enhances the inquiry form and
   counts email clicks). One sheet for every page. */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter (variable: optical size and weight) for the text styles */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-opsz-normal.woff2") format("woff2-variations"),
       url("fonts/inter-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Variant F only: Newsreader at its display optical size (opsz 72, weights
   300 to 600). Downloaded only when <html data-headings="serif"> uses it. */
@font-face {
  font-family: "Newsreader Display";
  src: url("fonts/newsreader-display-latin-wght-normal.woff2") format("woff2-variations"),
       url("fonts/newsreader-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* metric matches for the moments before the webfonts arrive */
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 97%;
  ascent-override: 99.9%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  color-scheme: only light;
  --oxblood: #701208;
  --red: #B02A2A;          /* the primary action only */
  --cream: #FAEFDC;
  --navy: #132E48;
  --steel: #739CBE;        /* hairlines, underlines and outlines on navy */
  --steel-text: #8DAECB;   /* a lighter steel tint for small type on navy */
  --night: #0A1828;        /* near black navy, the bottom of the opening */
  --ink-soft: #46566A;     /* secondary text and field outlines on cream */
  --cream-soft: #D8D0C2;   /* secondary text on navy */
  --rule: #DECDB0;         /* hairlines on cream */
  --rule-dark: rgba(115, 156, 190, 0.28);
  --field: #FFFBF4;        /* form fields on cream */
  --gutter: 1.5rem;
  --max: 76rem;
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* ---------- the type system: six styles, nothing else ----------
     Each style is defined once here; every text element carries exactly
     one t-* class (or inherits it). Inter Tight for the two large styles,
     Inter (with optical sizing) for the four text styles. Fluid sizes run
     from a 390px phone to a 1440px desktop. Variant F swaps only the face
     of the name and the page and section titles (see the end of this block). */
  --face-tight: "Inter Tight", "Inter Tight Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --face-text: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --face-head: var(--face-tight);

  /* 1. Display: the name only */
  --display-size: clamp(2.75rem, min(7.4vw, 11.5vh), 7.5rem);
  --display-weight: 300;
  --display-lh: 0.95;
  --display-ls: -0.035em;

  /* 2. Title: the headline, section titles, the contact email (26 to 38px) */
  --title-size: clamp(1.625rem, 1.625rem + 12 * (100vw - 24.375rem) / 1050, 2.375rem);
  --title-weight: 400;
  --title-lh: 1.15;
  --title-ls: -0.02em;

  /* 3. Lead: the subhead, chapter text, every list item (19 to 24px) */
  --lead-size: clamp(1.1875rem, 1.1875rem + 5 * (100vw - 24.375rem) / 1050, 1.5rem);
  --lead-weight: 400;
  --lead-lh: 1.45;
  --lead-ls: 0em;

  /* 4. Body: notes, navigation, credentials, small links (16 to 17px) */
  --body-size: clamp(1rem, 1rem + (100vw - 24.375rem) / 1050, 1.0625rem);
  --body-weight: 400;
  --body-lh: 1.55;
  --body-ls: 0em;

  /* 5. Label: uppercase, never under 15px, openly tracked */
  --label-size: 0.9375rem;
  --label-weight: 600;
  --label-lh: 1.5;
  --label-ls: 0.1em;

  /* 6. Action: buttons and form labels (Body size, semibold) */
  --action-size: var(--body-size);
  --action-weight: 600;
  --action-lh: 1.35;
  --action-ls: 0em;

  /* the portrait's corner: 6px on a phone to 8px on a desktop */
  --radius-photo: clamp(0.375rem, 0.375rem + 2 * (100vw - 24.375rem) / 1050, 0.5rem);
}

@supports (height: 1svh) {
  :root { --display-size: clamp(2.75rem, min(7.4vw, 11.5svh), 7.5rem); }
}

/* Variant F: <html data-headings="serif">. Body text stays Inter. */
:root[data-headings="serif"] {
  --face-head: "Newsreader Display", Georgia, serif;
  --display-weight: 400;
  --display-ls: -0.02em;
}

.t-display {
  font-family: var(--face-head);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  letter-spacing: var(--display-ls);
  text-transform: none;
}
.t-title {
  font-family: var(--face-tight);
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-lh);
  letter-spacing: var(--title-ls);
  text-transform: none;
}
/* the page and section titles take the heading face */
h1.t-title, h2.t-title { font-family: var(--face-head); }
:root[data-headings="serif"] h1.t-title,
:root[data-headings="serif"] h2.t-title { letter-spacing: -0.01em; }
.t-lead {
  font-family: var(--face-text);
  font-optical-sizing: auto;
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  line-height: var(--lead-lh);
  letter-spacing: var(--lead-ls);
  text-transform: none;
}
body, .t-body {
  font-family: var(--face-text);
  font-optical-sizing: auto;
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  letter-spacing: var(--body-ls);
  text-transform: none;
}
.t-label {
  font-family: var(--face-text);
  font-optical-sizing: auto;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: var(--label-lh);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
}
.t-action {
  font-family: var(--face-text);
  font-optical-sizing: auto;
  font-size: var(--action-size);
  font-weight: var(--action-weight);
  line-height: var(--action-lh);
  letter-spacing: var(--action-ls);
  text-transform: none;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: var(--face-text);
  background: var(--night);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, ul, figure, address, fieldset, legend { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
p, li { text-wrap: pretty; }
/* a phrase kept on one line while it fits; with very large text it may
   still wrap inside rather than run off the screen */
.nw { display: inline-block; }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- reading progress: a thin steel line, scroll driven ---------- */

.progress { display: none; }

/* ---------- the top bar: the five section links, held to the right ---------- */

.top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 2rem;
  padding-bottom: 0.25rem;
}

.top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule-dark);
  transform-origin: 0 50%;
}

.top > .nav { margin-left: auto; }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25rem;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--cream-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.nav a:hover { color: var(--cream); text-decoration-color: var(--steel); }

/* on navy, focus rings are cream */
.hero :focus-visible, .bar :focus-visible, .dark :focus-visible { outline-color: var(--cream); }

/* ---------- the opening ---------- */

.hero {
  position: relative;
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--cream);
  --glow-at: 30% 38%;
  background:
    radial-gradient(ellipse 70% 55% at var(--glow-at), rgba(115, 156, 190, 0.11), rgba(115, 156, 190, 0) 70%),
    linear-gradient(180deg, var(--navy) 0%, #0F253C 48%, var(--night) 100%);
  overflow: hidden;
}

.hero-in {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0.75rem var(--edge) 2.5rem;
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 1.5rem;
}

.copy { display: flex; flex-direction: column; }

/* the name and its role label: the name comes first in the reading order;
   above the phone width the label shows above it as an eyebrow */
.ident { display: flex; flex-direction: column; }
.ident .role { order: -1; }

.role { color: var(--steel-text); }

h1 {
  margin-top: 0.5rem;
  color: var(--cream);
}

/* the name: one line on a phone where it fits, two on a desktop */
h1 .ln { display: inline-block; }

.headline {
  margin-top: 0.875rem;
  max-width: 34rem;
  color: var(--cream);
  text-wrap: balance;
}

.offer {
  margin-top: 0.875rem;
  max-width: 34rem;
  color: var(--cream-soft);
}

.actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

/* buttons: the primary is red type on a cream chip (5.7:1) on navy and a
   red chip with cream type on cream; the secondary is outlined in steel */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  min-width: 100%;
  padding: 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--cream);
  color: var(--red);
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.btn svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 260ms var(--ease);
}

.btn:hover { background: #FFFFFF; color: var(--oxblood); }
.btn:hover svg { transform: translateX(3px); }
.btn:focus-visible { border-radius: 999px; }

.btn.ghost {
  background: transparent;
  border-color: var(--steel);
  color: var(--cream);
}
.btn.ghost:hover { border-color: var(--cream); background: rgba(250, 239, 220, 0.06); }

.btn.solid { background: var(--red); color: var(--cream); }
.btn.solid:hover { background: var(--oxblood); color: var(--cream); }
.btn[disabled] { cursor: progress; opacity: 0.8; }

/* the credibility strip: three items, each on its own line on a phone,
   three columns under the opening on a desktop */
.creds {
  margin-top: 2rem;
  color: var(--cream-soft);
}

.creds li {
  padding: 0.625rem 0;
  border-top: 1px solid var(--rule-dark);
}

.frame { margin-top: 2rem; }

.portrait {
  width: min(100%, 24rem);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: #3A3430;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.6);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform-origin: 50% 8%;
}

/* the quiet scroll cue: a hairline with a small travelling light */
.cue {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  width: 1px;
  height: 2.5rem;
  background: rgba(115, 156, 190, 0.35);
  overflow: hidden;
}

.cue::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0.875rem;
  background: var(--cream);
}

/* short phones: the name, headline and both buttons share the first
   screen; the subhead follows the buttons */
@media (max-height: 37.49rem) and (max-width: 47.99rem) {
  .offer { margin-top: 1rem; }
  .stage { padding-top: 1rem; }
  .actions { margin-top: 1.25rem; }
}

/* ---------- the cream chapters ---------- */

main {
  position: relative;
  z-index: 1;
  background: var(--cream);
}

.sec {
  position: relative;
  padding: 3.5rem var(--edge);
}

.sec + .sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--edge);
  right: var(--edge);
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}

.head { display: block; }

/* chapter titles carry the oxblood */
h2 { color: var(--oxblood); }

.body { margin-top: 1.5rem; }

.rows li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

/* rules sit between items only, never above the first */
.rows li:first-child {
  padding-top: 0;
  border-top: 0;
}

/* a list that follows a chapter's opening text starts on a rule */
.prose + .rows, .lead + .rows {
  margin-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.prose + .rows li:first-child, .lead + .rows li:first-child { padding-top: 1rem; }

.item { display: block; }

.note {
  display: block;
  margin-top: 0.25rem;
  max-width: 40rem;
  color: var(--ink-soft);
}

/* running text: lead size, a reading measure, short blocks */
.prose { max-width: 38rem; }
.prose + .prose { margin-top: 1.25rem; }

.lead { max-width: 38rem; }

.compact {
  margin-top: 0.5rem;
  max-width: 34rem;
  color: var(--ink-soft);
}

/* the last chapter returns to the dark of the opening */
.sec.dark {
  background: linear-gradient(180deg, var(--navy) 0%, var(--night) 100%);
  color: var(--cream);
  padding-bottom: 4.5rem;
}

.sec.dark::before { content: none; }
.sec.dark h2 { color: var(--cream); }

.intro { color: var(--cream-soft); max-width: 30rem; }

.mail {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--steel);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

.mail:hover { text-decoration-color: var(--cream); }

.elsewhere {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  color: var(--cream-soft);
}

.elsewhere span { color: var(--steel-text); }

.elsewhere a {
  display: inline-block;
  padding: 0.6875rem 0;
  color: var(--cream);
  text-decoration: underline;
  text-decoration-color: var(--steel);
  text-underline-offset: 0.3em;
}

.elsewhere a:hover { text-decoration-color: var(--cream); }

.dark .actions { margin-top: 2rem; }

.colophon {
  position: relative;
  z-index: 1;
  background: var(--night);
  color: var(--cream-soft);
  padding: 1.5rem var(--edge) 2rem;
}

.colophon p {
  border-top: 1px solid var(--rule-dark);
  padding-top: 1.5rem;
  overflow: hidden;
}

/* the two names share a line where they fit; the divider sits in each
   item's left padding and is clipped when it would lead a wrapped line */
.colophon .cl {
  display: flex;
  flex-wrap: wrap;
  margin-left: -2rem;
}

.colophon .cl span {
  position: relative;
  padding-left: 2rem;
}

.colophon .cl span::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.2em;
  bottom: 0.2em;
  border-left: 1px solid rgba(115, 156, 190, 0.45);
}

/* ---------- the inquiry pages: the top bar on a navy band, then cream ---------- */

.bar {
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem var(--edge) 0;
}

.bar .top::after { content: none; }

.form-page .sec { padding-bottom: 5rem; }
.form-page h1 { margin: 0; color: var(--oxblood); }
.form-page .intro { margin-top: 0.75rem; color: var(--ink-soft); max-width: 30rem; }

.field + .field, .field + fieldset, fieldset + .field { margin-top: 1.5rem; }

.field label, legend {
  display: block;
  color: var(--navy);
}

.req, .opt {
  margin-left: 0.5rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.field input, .field textarea {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--ink-soft);
  border-radius: 0.375rem;
  background: var(--field);
  color: var(--navy);
  font: inherit;
}

.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--oxblood); border-width: 2px; }

fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }

.checks { margin-top: 0.375rem; }

.checks label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  color: var(--navy);
  cursor: pointer;
}

.checks input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--navy);
}

.err {
  margin-top: 0.375rem;
  color: var(--oxblood);
  font-weight: 600;
}

.err:empty { display: none; }

.phi {
  margin-top: 2rem;
  max-width: 34rem;
  color: var(--ink-soft);
}

.send { margin-top: 1.5rem; }
.send .btn { min-width: min(100%, 16rem); }

.fail {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--oxblood);
  background: var(--field);
  color: var(--navy);
}

.fail:empty { display: none; }

.fallback { margin-top: 1rem; color: var(--ink-soft); }

.fallback a, .fail a, .done a {
  display: inline-block;
  padding: 0.6875rem 0;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--oxblood);
  text-underline-offset: 0.25em;
}

/* the honeypot: off screen, out of the tab order and the accessibility tree */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.done .t-lead { max-width: 34rem; }
.done p + p { margin-top: 1.25rem; }

@media (max-height: 37.49rem) {
  .stage { padding-top: 1rem; }
}

/* ---------- taller phones: the scroll cue ---------- */

@media (min-height: 46rem) {
  .hero-in { padding-bottom: 4.5rem; }
  .cue { display: block; }
}

/* ---------- tablet ---------- */

@media (min-width: 48rem) {
  :root { --gutter: 3rem; }
  .hero-in, .bar { padding-top: 1.5rem; }
  .btn { min-width: 0; }
  .portrait { width: 20rem; }
  .headline, .offer { max-width: 36rem; }
  .creds { margin-top: 2.5rem; }
  .sec { padding-top: 5rem; padding-bottom: 5rem; }
  .rows li { padding: 1.25rem 0; }
  .rows li:first-child { padding-top: 0; }
  .prose + .rows li:first-child, .lead + .rows li:first-child { padding-top: 1.25rem; }
  .body { margin-top: 2.25rem; }
}

/* ---------- desktop: copy and portrait share the stage, the strip runs
   under both, titles hold beside their chapters ---------- */

@media (min-width: 64rem) {
  :root { --gutter: 4rem; }
  .stage {
    --stage-gap: clamp(3rem, 6vw, 6.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy frame" "creds creds";
    align-items: end;
    align-content: center;
    column-gap: var(--stage-gap);
    padding-top: 2rem;
  }
  .hero { --glow-at: 78% 55%; }
  .copy { grid-area: copy; min-width: 0; }
  .frame { grid-area: frame; margin: 0; }
  .portrait {
    width: min(27.5rem, 30vw, 48vh);
    width: min(27.5rem, 30vw, 48svh);
    box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.65);
  }
  .creds {
    grid-area: creds;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 2.5rem;
    margin-top: 2.25rem;
    border-top: 1px solid var(--rule-dark);
  }
  .creds li { padding: 1rem 0 0; border-top: 0; }
  .creds li + li { padding-left: 2.5rem; margin-left: -2.5rem; border-left: 1px solid var(--rule-dark); }
  h1 { margin-top: 1rem; }
  h1 .ln { display: block; }
  .headline { margin-top: 1.5rem; max-width: 40rem; }
  .offer { margin-top: 1rem; max-width: 36rem; }
  .actions { margin-top: 2rem; }
  .dark .actions { margin-top: 2.5rem; }

  .sec {
    display: grid;
    /* the title column never takes more than about a third, so the
       chapter text keeps its room even when text is enlarged */
    grid-template-columns: minmax(0, min(20rem, 36%)) minmax(0, 1fr);
    gap: 3rem;
    padding-top: 5.5rem;
    padding-bottom: 6rem;
  }
  /* the title shares a baseline with the chapter's first line */
  .head {
    position: sticky;
    top: 4.5rem;
    align-self: baseline;
  }
  .body { align-self: baseline; margin-top: 0; max-width: 48rem; }
  .rows li { padding: 1.5rem 0; }
  .rows li:first-child { padding-top: 0; }
  .prose + .rows li:first-child, .lead + .rows li:first-child { padding-top: 1.5rem; }
  /* six short items read as two columns, not a wall */
  .rows.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .rows.two li:nth-child(2) { border-top: 0; }
  .lead + .rows.two li:nth-child(2) { padding-top: 1.5rem; }
  .sec.dark { padding-bottom: 7rem; }
  .form-page .sec { padding-bottom: 7rem; }
}

/* ---------- the curtain: cream chapters slide up over the held opening ----------
   The opening is held by its BOTTOM edge, not its top: it is sticky with
   bottom: 0 and its normal place sits one screen down, after an empty
   runway (main is pulled back up over the runway by the same amount). So
   the opening scrolls normally until its last line is on screen and only
   then holds. When it is taller than the screen (a phone, whose opening
   ends with the portrait, or enlarged text), every line of it still passes
   the reader before the chapters slide over it. The bottom inset is the
   gap between the current and the small viewport, so a mobile toolbar
   sliding away does not move the held opening. */

.runway { display: none; }

@media screen and (max-width: 47.99rem) and (min-height: 50rem),
       screen and (min-width: 48rem) and (max-width: 63.99rem) and (min-height: 57.5rem),
       screen and (min-width: 64rem) and (min-height: 41rem) {
  .runway { display: block; height: 100vh; height: 100lvh; }
  .runway + .hero + main { margin-top: -100vh; margin-top: -100lvh; }
  .runway + .hero { position: sticky; bottom: 0; }
  @supports (height: 1dvh) {
    .runway + .hero { bottom: calc(100dvh - 100svh); }
  }

  /* keyboard focus inside the opening lets go of the curtain, so a focused
     link is never under a chapter (WCAG 2.4.11) */
  .hero:has(:focus-visible) { position: relative; }
  .runway:has(+ .hero :focus-visible) { display: none; }
  .hero:has(:focus-visible) + main { margin-top: 0; }
}

/* ---------- motion, only for people who have not asked for less ---------- */

@media (prefers-reduced-motion: no-preference) {

  /* load: nothing starts hidden. The name and lines sit a few pixels low and
     settle; the photo starts a touch larger and eases to its true size. */
  .portrait img { animation: settle-photo 3.2s var(--ease) backwards; }
  h1 .ln { animation: settle 1.6s var(--ease) backwards; }
  h1 .ln + .ln { animation-delay: 120ms; }
  .role { animation: settle-small 1.4s var(--ease) backwards; }
  .headline { animation: settle-small 1.4s var(--ease) 200ms backwards; }
  .offer { animation: settle-small 1.4s var(--ease) 300ms backwards; }
  .actions { animation: settle-small 1.4s var(--ease) 380ms backwards; }
  .creds { animation: settle-small 1.4s var(--ease) 500ms backwards; }
  .hero .top::after { animation: draw 1.8s var(--ease) 100ms backwards; }
  .cue::after { animation: travel 2.6s ease-in-out 1.8s 3 backwards; }

  @keyframes settle-photo { from { transform: scale(1.06); } }
  @keyframes settle { from { transform: translateY(0.14em); } }
  @keyframes settle-small { from { transform: translateY(0.75rem); } }
  @keyframes draw { from { transform: scaleX(0); } }
  @keyframes travel {
    from { transform: translateY(-1rem); }
    to { transform: translateY(4rem); }
  }

  /* scroll driven, where supported: fill mode none, so any element the
     reader has not reached rests in its final, visible state */
  @supports (animation-timeline: view()) {
    .progress {
      display: block;
      position: fixed;
      z-index: 10;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--steel);
      transform-origin: 0 50%;
      animation-name: progress;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
    }

    /* the opening recedes while the chapters cover it */
    body { timeline-scope: --chapters; }
    .hero + main { view-timeline: --chapters block; }
    .hero-in {
      animation-name: recede;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --chapters;
      animation-range: entry 0% entry 100%;
    }

    .rv {
      animation-name: rise;
      animation-duration: auto;
      animation-timing-function: var(--ease);
      animation-fill-mode: none;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    .sec + .sec::before {
      animation-name: draw;
      animation-duration: auto;
      animation-timing-function: var(--ease);
      animation-fill-mode: none;
      animation-timeline: view();
      animation-range: entry 0% cover 35%;
    }

    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes recede { to { transform: translateY(-6vh) scale(0.985); opacity: 0.35; } }
    @keyframes rise { from { transform: translateY(2.25rem); opacity: 0.15; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .cue { display: none; }
}

/* ---------- print: ink light, the same six styles in print sizes ---------- */

@media print {
  @page { margin: 14mm 16mm; }
  :root {
    --display-size: 22pt; --display-weight: 500; --display-lh: 1.05; --display-ls: -0.02em;
    --title-size: 11pt; --title-weight: 600; --title-lh: 1.3; --title-ls: 0em;
    --lead-size: 10pt; --lead-lh: 1.35; --lead-ls: 0em;
    --body-size: 9pt; --body-lh: 1.35;
    --label-size: 8pt; --label-lh: 1.35;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html, body { background: #FFFFFF; }
  body { color: #000000; }
  .progress, .runway, .cue, .nav, .actions, .top::after, .frame, .send, .hp { display: none !important; }
  .hero, .bar { position: static; min-height: 0; background: none; color: #000000; overflow: visible; padding: 0; }
  .hero-in { padding: 0; }
  .role, .headline, .elsewhere span { color: #000000; }
  .stage { padding-top: 3mm; }
  h1 { color: #000000; margin-top: 1mm; }
  .offer { color: #000000; margin-top: 1.5mm; max-width: none; }
  .headline { margin-top: 1.5mm; max-width: none; }
  .creds { margin: 2mm 0 0; color: #000000; }
  .creds li { padding: 0.5mm 0; border: 0; }
  main { background: none; margin-top: 0 !important; }
  .sec {
    display: grid;
    grid-template-columns: 38mm 1fr;
    gap: 4mm;
    padding: 2.5mm 0;
    border-top: 0.5pt solid #BBBBBB;
  }
  .sec + .sec::before { content: none; }
  .head { position: static; align-self: start; }
  h2 { color: #000000; }
  .body { margin: 0; }
  .rows, .prose + .rows, .lead + .rows { margin-top: 1mm; border: 0; }
  .rows li, .rows li:first-child { padding: 0 0 0.8mm; border: 0; }
  .note, .compact, .intro { color: #000000; }
  .prose + .prose { margin-top: 1mm; }
  .sec.dark { background: none; color: #000000; padding-bottom: 2.5mm; }
  .sec.dark h2 { color: #000000; }
  .mail { padding: 0; color: #000000; text-decoration: none; }
  .elsewhere { margin-top: 0.6mm; color: #000000; }
  .elsewhere a { padding: 0; color: #000000; text-decoration: none; }
  .elsewhere a::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; }
  .colophon { background: none; color: #000000; padding: 0; }
  .colophon p { border-top: 0.5pt solid #BBBBBB; padding-top: 2mm; }
  .colophon .cl span::before { border-left-color: #BBBBBB; }
  .sec { break-inside: avoid; }
}

/* ---------- phones: the top bar folds the five links into one Menu ----------
   A <details> disclosure, so it opens without JavaScript; site.js only adds
   Escape to close it. Tablets and desktops keep the plain row of links. */

.menu, .tl-arrow { display: none; }

@media screen and (max-width: 47.99rem) {
  .top { padding-bottom: 0; }
  .top::after { content: none; }
  .top > .nav { display: none; }

  .menu { display: block; margin-left: auto; }
  .menu summary {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 0 0 1rem;
    color: var(--cream);
    cursor: pointer;
    list-style: none;
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary:focus-visible { outline-offset: 2px; }

  /* two lines that turn into a cross while the menu is open */
  .menu-icon { position: relative; width: 1.125rem; height: 0.75rem; }
  .menu-icon::before, .menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 0.75px);
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 200ms var(--ease);
  }
  .menu-icon::before { transform: translateY(-4px); }
  .menu-icon::after { transform: translateY(4px); }
  .menu[open] .menu-icon::before { transform: rotate(45deg); }
  .menu[open] .menu-icon::after { transform: rotate(-45deg); }

  /* the open menu: a navy sheet under the bar, full bleed, one link a row */
  .menu-panel {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: calc(-1 * var(--edge));
    right: calc(-1 * var(--edge));
    padding: 0.25rem var(--edge) 1rem;
    background: var(--navy);
    border-top: 1px solid var(--rule-dark);
    box-shadow: 0 1.5rem 2rem -1rem rgba(0, 0, 0, 0.55);
  }
  .menu-panel li + li { border-top: 1px solid var(--rule-dark); }
  .menu-panel a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    color: var(--cream);
    text-decoration: none;
  }
  .menu-panel a:hover { color: #FFFFFF; }
  .menu-panel :focus-visible { outline-color: var(--cream); outline-offset: -2px; }
}

@media print { .menu { display: none !important; } }

/* ---------- phones, concept 3 "Statement": the headline takes the
   Display style and leads; the name steps down to the Title style with
   its role under it; one button and a text link. Three groups, each tight
   inside and set well apart: who (name, role), then a short steel rule,
   what (headline, subhead), then the actions ---------- */

@media screen and (max-width: 47.99rem) {
  /* the Display style at phone size: three lines for the headline; with
     enlarged text its longest word, neurology, still fits the column */
  :root { --display-size: clamp(min(2.125rem, (100vw - 3rem) / 4.5), 9.25vw, 2.75rem); }
  /* the second action becomes a quiet text link (still a 44px target) */
  .hero .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .hero .btn.ghost {
    min-height: 2.75rem;
    padding: 0;
    gap: 0.5rem;
    border: 0;
    background: none;
    color: var(--cream);
  }
  .hero .btn.ghost .tl-text {
    text-decoration: underline;
    text-decoration-color: var(--steel);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
  }
  .hero .btn.ghost:hover { background: none; }
  .hero .btn.ghost:hover .tl-text { text-decoration-color: var(--cream); }
  .hero .btn.ghost .tl-arrow { display: block; width: 1rem; height: 1rem; }
  .hero .btn.ghost:hover .tl-arrow { transform: translateX(3px); }
  /* the name in the Title style (as a page title, in the heading face) */
  h1.t-display {
    margin-top: 0;
    font-size: var(--title-size);
    font-weight: var(--title-weight);
    line-height: var(--title-lh);
    letter-spacing: -0.01em;
  }
  .ident .role { order: 0; margin-top: 0.25rem; }
  /* the rule that closes the identity group */
  .ident::after {
    content: "";
    width: 2.5rem;
    height: 1px;
    margin-top: 1.75rem;
    background: var(--steel);
  }
  /* the headline in the Display style */
  .headline {
    margin-top: 1.75rem;
    font-family: var(--face-head);
    font-size: var(--display-size);
    font-weight: var(--display-weight);
    line-height: var(--display-lh);
    letter-spacing: var(--display-ls);
    text-wrap: balance;
  }
  /* the subhead: cream at three quarters, so it reads as secondary */
  .offer { margin-top: 0.75rem; color: rgba(250, 239, 220, 0.75); }
  .hero .actions { margin-top: 2.5rem; }
}

@media screen and (max-width: 47.99rem) and (orientation: portrait) {
  .stage { justify-content: flex-start; padding-top: 0; }
  .copy {
    min-height: calc(100svh - 3.5rem);
    justify-content: center;
    padding: 1.5rem 0 max(2.5rem, 12svh);
  }
  .creds { margin-top: 0; }
}

/* short phones: the same three groups on smaller steps, so the button is
   whole above the fold */
@media screen and (max-width: 47.99rem) and (max-height: 37.49rem) and (orientation: portrait) {
  .copy { padding-top: 1rem; }
  .ident::after { margin-top: 1.25rem; }
  .headline { margin-top: 1.25rem; }
  .offer { margin-top: 0.625rem; }
  .hero .actions { margin-top: 1.75rem; }
}

/* ---------- phones and small tablets on their side ----------
   Last in the sheet so no width rule above can override it: the portrait
   moves beside the copy, the strip runs under both. */

@media screen and (orientation: landscape) and (max-height: 32rem) {
  .stage {
    --stage-gap: 2rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy frame" "creds creds";
    align-items: start;
    column-gap: var(--stage-gap);
    padding-top: 1rem;
  }
  .copy { grid-area: copy; min-width: 0; }
  .frame { grid-area: frame; margin: 0; }
  .creds { grid-area: creds; }
  .portrait { width: min(11rem, 26vw); }
  .btn { min-width: 0; }
  .cue { display: none; }
}