/* ==========================================================================
   EM Tutoring, LLC
   Design direction: academic publishing vernacular, applied with restraint.
   Dr. McClure is a published researcher who tutors — the page borrows the
   structures of scholarship (citations, reference lists, dated credentials)
   because they are literally true, not as decoration.
   Palette: oxblood crimson + neutral greys only.
   ========================================================================== */

/* --- Fonts: self-hosted, no third-party requests ------------------------- */

@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/hostgrotesk-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/hostgrotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Average';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/average-latin.woff2') format('woff2');
  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;
}
@font-face {
  font-family: 'Average';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/average-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Colour — crimson + greys, nothing else */
  --crimson: #810101;        /* 10.8:1 on white — AAA */
  --crimson-deep: #5c0000;   /* hover / pressed */
  --crimson-wash: #faf3f3;   /* barely-there tint for quote blocks */
  --ink: #181d23;            /* headings, primary text */
  --slate: #575a5f;          /* secondary text — 6.9:1 on white, AA */
  --rule: #e0e0e0;           /* hairlines */
  --rule-strong: #c9c9cb;
  --paper: #ffffff;
  --paper-alt: #f5f5f6;      /* alternating bands */

  /* Type */
  --sans: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Average', Georgia, 'Times New Roman', serif;

  /* Spacing scale */
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4.5rem;
  --s8: 6.5rem;

  --measure: 62ch;
  --radius: 4px;
}

/* --- Reset / base -------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* `text-wrap: pretty` stops a paragraph ending on a single stranded word. It
   works at every viewport width, which simply widening the measure does not —
   a wider box just moves the orphan to a different screen size. */
p {
  margin: 0 0 var(--s3);
  max-width: var(--measure);
  text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }

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

ul, ol { margin: 0; padding: 0; }

/* Visible keyboard focus everywhere, no exceptions */
:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--crimson);
  color: #fff;
  padding: var(--s2) var(--s3);
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus {
  left: var(--s3);
  top: var(--s3);
  color: #fff;
}

/* --- Layout primitives --------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.band { padding-block: var(--s7); }
.band--alt { background: var(--paper-alt); }
.band--tight { padding-block: var(--s6); }

/* --- Type roles ---------------------------------------------------------- */

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.display {
  font-size: clamp(2.35rem, 5.6vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}

.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -0.028em;
}

.lede {
  font-size: clamp(1.125rem, 1.7vw, 1.3rem);
  color: var(--slate);
  line-height: 1.6;
}

.fine { font-size: 0.9375rem; color: var(--slate); }

/* --- Header -------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s3);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}
/* The logo is the wordmark, so it stands alone here — repeating
   "EM Tutoring, LLC" beside it would say the same thing twice. */
.brand img { height: 44px; width: auto; }

@media (max-width: 46rem) {
  .brand img { height: 36px; }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  list-style: none;
  font-size: 1rem;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding-block: var(--s1);
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--rule-strong); }
.nav a[aria-current='page'] {
  border-bottom-color: var(--crimson);
  color: var(--crimson);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--crimson);
  background: var(--crimson);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn:hover {
  background: var(--crimson-deep);
  border-color: var(--crimson-deep);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--crimson);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  background: transparent;
  color: var(--crimson-deep);
  border-color: var(--crimson);
}

.btn--onCrimson {
  background: #fff;
  color: var(--crimson);
  border-color: #fff;
}
.btn--onCrimson:hover {
  background: var(--paper-alt);
  color: var(--crimson-deep);
  border-color: var(--paper-alt);
}

.actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.tel-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--crimson);
  padding-bottom: 2px;
  white-space: nowrap;
}
.tel-link:hover { color: var(--crimson); }

/* --- Hero ---------------------------------------------------------------- */
/* Asymmetric: copy on 7 columns, portrait on 5, so the page does not read as
   a centred template. Everything that sells sits above the fold. */

.hero { padding-block: var(--s7) var(--s6); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(var(--s5), 5vw, var(--s7));
  align-items: center;
}

.hero__sub {
  margin-top: var(--s4);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  color: var(--slate);
  max-width: 46ch;
}

.hero__portrait {
  position: relative;
}
.hero__portrait img {
  width: 100%;
  border-radius: var(--radius);
  /* Crimson appears here only as a thin edge — the photo stays the subject */
  border-bottom: 4px solid var(--crimson);
}
.hero__caption {
  margin-top: var(--s2);
  font-size: 0.9375rem;
  color: var(--slate);
  line-height: 1.45;
}

/* --- Evidence strip ------------------------------------------------------ */
/* The four proof points as a single hairline-divided band. The scholarship
   figure is static text — it cannot fail to animate, which is how the old
   site ended up publishing "$0K". */

.evidence {
  border-block: 1px solid var(--rule);
  padding-block: var(--s5);
}
.evidence__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  gap: 0;
}
.evidence__item {
  padding-inline: var(--s4);
  border-left: 1px solid var(--rule);
}
.evidence__item:first-child { padding-left: 0; border-left: 0; }
.evidence__item:last-child { padding-right: 0; }

.evidence__figure {
  display: block;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--crimson);
  line-height: 1.1;
}
.evidence__label {
  display: block;
  margin-top: var(--s1);
  font-size: 0.9375rem;
  color: var(--slate);
  line-height: 1.45;
}

/* Reserve two lines for the figure so every label starts on the same baseline,
   whether the figure above it wraps or not. Only matters once the strip is
   actually side by side. */
@media (min-width: 46rem) {
  .evidence__figure { min-height: 2.2em; }
}

/* An explicit link, not a superscript marker. A "[1]" reads as a footnote
   pointing further down the same page; this claim is backed by a reference
   list on another page, so the affordance has to say where it goes. */
.evidence__link {
  display: inline-block;
  margin-top: 0.35rem;
  padding-block: 0.2rem;   /* clears the 24px minimum tap target */
  font-weight: 600;
  color: var(--crimson);
  white-space: nowrap;
}

/* --- Neuron band --------------------------------------------------------- */
/* The drawing is ink on cream paper. `multiply` alone won't drop the cream on a
   white page (multiply only removes pure white), so the filter first pushes the
   paper toward white while deepening the ink — then multiply clears it. Result:
   linework sitting on the page's own background, palette untouched. */

.neuron-band {
  background: var(--paper);
  padding-block: var(--s4);
  overflow: hidden;
}

/* Banner strip. The box is cropped to a shallow band and the drawing fills it
   with object-fit, so the linework keeps its natural weight instead of being
   scaled down into grey fuzz — it just shows a horizontal slice through the
   cell body and axon. */
.neuron-band__figure {
  margin: 0;
  height: clamp(110px, 14vw, 200px);
}

/* `cover` scales to the box width, so narrowing the image box is what zooms the
   drawing out — the strip itself keeps its full width and height, and the extra
   margin is white on a white band, so nothing reads as inset. Lower the width to
   zoom out further; raise it toward 100% to zoom back in. */
.neuron-band__figure img {
  display: block;
  width: 86%;
  height: 100%;
  margin-inline: auto;
  object-fit: cover;
  object-position: center 48%;
  opacity: 0.45;
  mix-blend-mode: multiply;
  filter: grayscale(1) brightness(1.06) contrast(1.28);
}

/* --- Syllabus (services) ------------------------------------------------- */
/* Rows, not cards. Reads like a course listing, which is what it is. */

.syllabus { list-style: none; border-top: 1px solid var(--rule); }

.syllabus__row {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) 1.4fr;
  gap: var(--s4);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.syllabus__name {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
}
.syllabus__desc { color: var(--slate); margin: 0; }

/* --- Subject list -------------------------------------------------------- */
/* Names only, no per-item explanation — a course listing meant to be scanned
   rather than read. */

.subjects {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 var(--s5);
}
.subjects li {
  padding-block: var(--s2);
  border-top: 1px solid var(--rule);
  font-weight: 600;
}
.subjects__note {
  font-weight: 400;
  color: var(--slate);
}

/* --- Testimonials -------------------------------------------------------- */
/* The serif appears only here. Grotesque everywhere else, old-style serif for
   the human voice — that contrast is the type story of the page. */

.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s5);
  list-style: none;
}

.quote {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--crimson);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--s5);
}
.quote__text {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--s4);
  max-width: none;
}
.quote__attr {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  font-style: normal;
}

/* --- Process ------------------------------------------------------------- */
/* Numbered because it is genuinely sequential — you cannot have the second
   step before the first. */

.process {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  list-style: none;
  counter-reset: step;
}
.process__step { counter-increment: step; }
.process__step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--crimson);
  padding-bottom: var(--s2);
  margin-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.process__name {
  font-size: 1.125rem;
  margin: 0 0 var(--s2);
}
.process__desc { color: var(--slate); font-size: 1.0625rem; margin: 0; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }

.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--crimson); }

.faq__q::after {
  content: '+';
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 400;
  color: var(--crimson);
  flex-shrink: 0;
  transition: transform 180ms ease;
}
.faq__item[open] .faq__q::after {
  content: '\2212'; /* minus */
}

.faq__a {
  padding-bottom: var(--s4);
  color: var(--slate);
}

/* --- Reference list (the signature element) ------------------------------ */
/* Publications rendered as a real numbered reference list. This is the page's
   one memorable device, and it earns its place: the claim "published educator"
   is the differentiator, so the proof is typeset the way proof actually is. */

.references {
  list-style: none;
  counter-reset: ref;
  border-top: 1px solid var(--rule);
}
.reference {
  counter-increment: ref;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s3);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.reference::before {
  content: '[' counter(ref) ']';
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--crimson);
  padding-top: 0.15rem;
}
.reference__title {
  font-weight: 600;
  font-size: 1.0625rem;
  margin: 0 0 var(--s1);
  max-width: none;
}
.reference__meta {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--slate);
  margin: 0;
  max-width: none;
}

/* --- Credentials (dated — a real timeline) ------------------------------- */

.creds { list-style: none; }
.cred {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
}
.cred__year {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--crimson);
  font-size: 0.9375rem;
  padding-top: 0.2rem;
}
.cred__name { font-size: 1.125rem; margin: 0 0 var(--s2); }
.cred__desc { color: var(--slate); font-size: 1.0625rem; margin: 0; }

/* --- CTA band ------------------------------------------------------------ */
/* The single place crimson fills the field. One page, one loud moment. */

.cta-band {
  background: var(--crimson);
  color: #fff;
  padding-block: var(--s7);
}
.cta-band .section-title { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.88); }
.cta-band .eyebrow { color: rgba(255, 255, 255, 0.75); }
.cta-band .eyebrow::after { background: rgba(255, 255, 255, 0.3); }
.cta-band__lede { margin-top: var(--s3); max-width: 52ch; }

.tel-link--onCrimson { color: #fff; border-bottom-color: #fff; }
.tel-link--onCrimson:hover { color: var(--paper-alt); }

/* Spacing utility for content that follows a section heading */
.stack-top { margin-top: var(--s5); }

/* --- Forms --------------------------------------------------------------- */

.form { max-width: 38rem; }

.field { margin-bottom: var(--s4); }

.field > label,
.fieldset__legend {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: var(--s1);
  color: var(--ink);
}

.field__hint {
  display: block;
  font-size: 0.9375rem;
  color: var(--slate);
  margin-bottom: var(--s2);
  line-height: 1.5;
  max-width: 52ch;
}

.optional {
  font-weight: 400;
  color: var(--slate);
  font-size: 0.9375rem;
}

.input,
.select,
.textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  transition: border-color 140ms ease;
}
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--slate); }
.input:focus,
.select:focus,
.textarea:focus { border-color: var(--crimson); }

.textarea { resize: vertical; min-height: 6.5rem; }

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s4);
}
.checks { display: grid; gap: var(--s2); margin-top: var(--s2); }
.check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 1.0625rem;
  font-weight: 400;
  cursor: pointer;
}
.check input {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--crimson);
  flex-shrink: 0;
  cursor: pointer;
}
/* Keep the whole row a comfortable tap target, not just the box */
.check { min-height: 2rem; }

/* Honeypot — hidden from people, reachable by bots */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Empty until the submit handler has something to say, so it takes up no room
   in the normal case. */
.form__status {
  margin: var(--s3) 0 0;
  font-weight: 600;
  line-height: 1.5;
}
.form__status:empty { display: none; }
.form__status--error { color: var(--crimson); }

.form__footer {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

/* --- Contact rail -------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(var(--s5), 6vw, var(--s7));
  align-items: start;
}

.rail {
  border-left: 3px solid var(--crimson);
  padding-left: var(--s4);
}
.rail dl { margin: 0; }
.rail dt {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--s1);
}
.rail dd {
  margin: 0 0 var(--s4);
  font-size: 1.0625rem;
}
.rail dd:last-child { margin-bottom: 0; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--s6);
  font-size: 1rem;
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--crimson); }

.areas {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: var(--s4);
}

.footer-nav {
  list-style: none;
  display: flex;
  gap: var(--s4);
  flex-wrap: wrap;
}
.footer-nav a {
  display: inline-block;
  padding-block: 0.3rem;
}

/* --- Prose (privacy page) ------------------------------------------------ */

.prose h2 {
  font-size: 1.25rem;
  margin-top: var(--s5);
  margin-bottom: var(--s2);
}
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.15rem; margin-bottom: var(--s3); }
.prose li { margin-bottom: var(--s1); max-width: var(--measure); }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s5); }
  /* Copy stays first once stacked. Leading with the portrait would push the
     value proposition below the fold — the exact failure of the old site. */
  .hero__portrait { max-width: 17rem; }
  .evidence__list { grid-template-columns: repeat(2, 1fr); gap: var(--s4) 0; }
  .evidence__item:nth-child(3) { padding-left: 0; border-left: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; gap: var(--s4); }
}

@media (max-width: 46rem) {
  :root { --s7: 3.25rem; --s8: 4rem; }
  .syllabus__row { grid-template-columns: 1fr; gap: var(--s2); padding-block: var(--s4); }
  .quotes { grid-template-columns: 1fr; gap: var(--s4); }
  .evidence__list { grid-template-columns: 1fr; }
  .evidence__item { padding-inline: 0; border-left: 0; }
  .cred { grid-template-columns: 1fr; gap: var(--s1); }
  .site-header__inner { padding-block: var(--s2); }
  .nav { gap: var(--s3); font-size: 1rem; }
  .actions { gap: var(--s3); }
  .actions .btn { width: 100%; }
}

/* --- Motion / print ------------------------------------------------------ */

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

@media print {
  .site-header, .cta-band, .skip-link { display: none; }
  body { font-size: 11pt; }
  a { color: var(--ink); }
}