/*
  Save Uncle Mike · website preview v2 · components
  Mobile-first. Reads every value from tokens.css. No hex values below this line.
  Each block maps to one section so it ports cleanly to an Astro component.
  Sections carry data-layout="1|2|3" (family review options). For the real build,
  keep the chosen layout's rules and delete the other two.
*/

/* Keep the family's colors: stop phone browsers recoloring the site in their dark mode */
:root { color-scheme: only light; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  font-synthesis: none;
  overflow-x: hidden;
}
/* Every toned block paints its own surface */
:where([data-t1], [data-t2], [data-t3], .tone-light, .tone-alt, .tone-dark, .tone-deep) { background-color: var(--s-bg); color: var(--s-ink); }

/* No italics anywhere */
em, i, cite, address, dfn, var, q, blockquote { font-style: normal; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--color-white); color: var(--color-indigo); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); font-weight: var(--weight-strong);
}
.skip-link:focus { top: var(--space-4); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Logo pairs: the right file shows for the surface it sits on */
.on-dark { display: var(--logo-dark, none); }
.on-light { display: var(--logo-light, block); }

/* Layout options: show an element only in the layouts it lists */
[data-layout="1"] [data-only]:not([data-only~="1"]),
[data-layout="2"] [data-only]:not([data-only~="2"]),
[data-layout="3"] [data-only]:not([data-only~="3"]) { display: none !important; }

/* Review markers: facts to confirm, drafts to sign off */
.tbc {
  background: var(--review-bg);
  color: var(--review-ink);
  border: 1px dashed var(--review-line);
  border-radius: 4px;
  padding: 0 0.3em;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
h1 .tbc, h2 .tbc, h3 .tbc, .story__quote p .tbc { font-size: 0.6em; vertical-align: middle; line-height: 1.6; }
.draft-tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: var(--review-bg); color: var(--review-ink);
  border: 1px dashed var(--review-line); border-radius: 999px;
  font-size: var(--fs-label); font-weight: var(--weight-strong);
  padding: 2px 10px; line-height: 1.5;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--tap); padding: 0.75em 1.45em;
  border-radius: var(--radius-button); border: 2px solid transparent;
  font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 1.0625rem; letter-spacing: 0;
  text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
  transition: transform var(--dur-fast) var(--ease-settle), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--help { background: var(--accent); color: var(--on-accent); }
.btn--help:hover { box-shadow: 0 8px 20px var(--shadow-color); }
.btn--quiet { background: var(--s-ink); color: var(--s-bg); }
.btn--light { background: var(--color-chalk); color: var(--color-indigo); }
.btn--outline { border-color: currentColor; background: transparent; }
.btn--ghost { border-color: var(--s-line); color: var(--s-ink); background: transparent; }
.btn--placeholder { border: 2px dashed var(--review-line); background: var(--review-bg); color: var(--review-ink); cursor: not-allowed; font-family: var(--font-body); font-weight: var(--weight-strong); }
.btn--placeholder:hover { transform: none; }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-settle); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }
.text-link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-weight: var(--weight-strong); text-decoration: underline;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--s-line);
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-3) var(--space-4); min-height: var(--header-h); }
.brand-link { display: inline-flex; align-items: center; min-height: var(--tap); margin-right: auto; }
.lg { display: contents; }
/* Phones: one-color marks. From 900px: the family's full-color marks. */
.brand-link img { height: auto; }
.lg-color { display: none; }
.lg--plate .lg-mono, .lg--stack .lg-mono { width: auto; height: 40px; }
.lg--line .lg-mono { width: 140px; }
.site-nav { display: none; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3);
  color: var(--s-soft); text-decoration: none; font-size: var(--fs-small); font-weight: var(--weight-strong);
  border-radius: var(--radius-sm);
}
.site-nav a:hover { color: var(--s-ink); background: var(--s-chip); }
.header-cta { padding-inline: 0.85em; font-size: 0.9375rem; white-space: nowrap; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--tap); height: var(--tap); border: 1px solid var(--s-line); border-radius: var(--radius-sm);
  background: transparent; color: var(--s-ink); cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }
.mobile-nav { border-top: 1px solid var(--s-line); padding: var(--space-2) var(--gutter) var(--space-4); }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; }
.mobile-nav a {
  display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-2);
  text-decoration: none; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 1.25rem;
  border-bottom: 1px solid var(--s-line);
}
@media (max-width: 359px) {
  .lg--line .lg-mono { width: 118px; }
  .lg--plate .lg-mono, .lg--stack .lg-mono { height: 34px; }
  .header-cta { padding-inline: 0.7em; font-size: 0.875rem; }
}
@media (min-width: 480px) {
  .lg--line .lg-mono { width: 170px; }
  .lg--plate .lg-mono, .lg--stack .lg-mono { height: 46px; }
  .header-cta { padding-inline: 1.1em; font-size: 1rem; }
}
@media (min-width: 900px) {
  .lg-color { display: block; }
  .lg-mono { display: none; }
  .lg--plate .lg-color { width: 168px; }
  .lg--line .lg-color { width: 280px; }
  .lg--stack .lg-color { width: 140px; }
}
@media (min-width: 1240px) {
  .lg--plate .lg-color { width: 180px; }
  .lg--line .lg-color { width: 300px; }
  .lg--stack .lg-color { width: 157px; }
}
/* Mid widths: a tighter menu so it stays on one line beside the logo */
@media (min-width: 1040px) and (max-width: 1239px) {
  .site-nav a { padding-inline: var(--space-2); font-size: 0.875rem; }
}
/* Header 2: the lead mark sits on its own deep-Indigo base, flush with the bar top to bottom */
.site-header[data-layouts] { overflow: visible; }
@media (min-width: 900px) {
  /* The logo lines up with the page's content edge; the base extends past it by its own padding */
  .site-header[data-layout="2"] .site-header__inner { min-height: 92px; align-items: stretch; }
  .site-header[data-layout="2"] .site-header__inner > :not(.brand-link) { align-self: center; }
  .site-header[data-layout="2"] .brand-link {
    margin: 0 auto 0 calc(var(--space-5) * -1);
    padding: 0 var(--space-5);
    background: var(--plate-bg);
  }
  html:has(.site-header[data-layout="2"]) { scroll-padding-top: 110px; }
}
@media (min-width: 1040px) {
  .site-nav { display: block; }
  .menu-toggle, .mobile-nav { display: none !important; }
  /* Header 3 is taller, so anchored sections stop below it */
  html:has(.site-header[data-layout="3"]) { scroll-padding-top: 170px; }
}
/* Header 1: one row. Name far left, menu centered, button far right.
   The outer columns share the leftover space, so the menu stays centered until the row gets tight. */
@media (min-width: 1040px) {
  .site-header[data-layout="1"] .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--space-4); }
  .site-header[data-layout="1"] .brand-link { justify-self: start; margin: 0; }
  .site-header[data-layout="1"] .site-nav { justify-self: center; }
  .site-header[data-layout="1"] .header-cta { justify-self: end; }
  .site-header[data-layout="1"] .lg--line .lg-color { width: 240px; }
}
/* Header 3: offset stack centered, menu on the left */
.site-header[data-layout="3"] .site-header__inner { display: grid; grid-template-columns: auto 1fr auto; }
.site-header[data-layout="3"] .brand-link { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
.site-header[data-layout="3"] .menu-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
.site-header[data-layout="3"] .header-cta { grid-column: 3; grid-row: 1; justify-self: end; }
.site-header[data-layout="3"] .site-nav { grid-column: 1; grid-row: 1; justify-self: start; }
@media (min-width: 1040px) {
  .site-header[data-layout="3"] .site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: ". brand cta" "nav nav nav"; padding-top: var(--space-3); row-gap: var(--space-2); }
  .site-header[data-layout="3"] .brand-link { grid-area: brand; }
  .site-header[data-layout="3"] .header-cta { grid-area: cta; }
  .site-header[data-layout="3"] .site-nav { grid-area: nav; justify-self: stretch; border-top: 1px solid var(--s-line); }
  .site-header[data-layout="3"] .site-nav ul { justify-content: center; gap: var(--space-4); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-pad); position: relative; }
[data-layouts]:not(.site-header) { position: relative; }
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--s-soft); margin-bottom: var(--space-4);
}
.section-head { max-width: 46rem; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: var(--space-4); font-size: var(--fs-lead); color: var(--s-soft); max-width: var(--measure); }
.lead { font-size: var(--fs-lead); }
.is-centered { text-align: center; margin-inline: auto; }

/* ---------- Media placeholders ---------- */
.ph {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-5); overflow: hidden; min-height: 0;
  background-color: var(--s-ph-bg);
  background-image: repeating-linear-gradient(135deg, var(--color-chalk-6) 0 2px, transparent 2px 14px);
  color: var(--s-ph-ink); border-radius: var(--radius-md);
  border: 1px solid var(--s-card-line);
}
.ph--soft { background-color: var(--s-chip); color: var(--s-ink); background-image: repeating-linear-gradient(135deg, var(--color-indigo-5) 0 2px, transparent 2px 14px); }
.ph__tag { font-size: var(--fs-label); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; opacity: 0.8; }
.ph__label { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 1.125rem; line-height: 1.25; max-width: 22rem; }
.ph__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-chalk-10); border: 1px solid var(--color-chalk-16);
}
.ph__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }
/* Stand-in media: licensed Artlist stock behind the label until the Oct 20 shoot replaces it */
.ph--media { background: var(--color-indigo-deep); color: var(--color-chalk); border-color: transparent; }
.ph__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.ph--media::after { content: ""; position: absolute; inset: 0; background: var(--scrim-media); pointer-events: none; }
.ph--media > .ph__tag, .ph--media > .ph__label { position: relative; z-index: 1; }
.ph--media > .ph__play, .media-toggle { z-index: 2; }
.media-toggle {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--color-chalk); background: var(--scrim-flat); border: 1px solid var(--color-chalk-16);
}
.media-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.media-toggle .i-pause, .media-toggle[data-state="playing"] .i-play { display: none; }
.media-toggle[data-state="playing"] .i-pause { display: block; }
.media-mute {
  position: absolute; top: var(--space-3); right: calc(var(--space-3) + 52px);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; z-index: 2;
  color: var(--color-chalk); background: var(--scrim-flat); border: 1px solid var(--color-chalk-16);
}
.media-mute svg { width: 18px; height: 18px; fill: currentColor; }
.media-mute .i-sound, .media-mute[data-muted="false"] .i-mute { display: none; }
.media-mute[data-muted="false"] .i-sound { display: block; }
.mile { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.mile li { padding-top: var(--space-3); border-top: 1px solid var(--s-line, var(--color-chalk-16)); color: var(--s-soft); }
.mile li.mile__next { border-top-style: dashed; }
.beat--ask .btn-row { margin-top: var(--space-5); }
.beat--ask .btn-row .btn { margin-top: 0; }
.photo { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.photo figcaption { position: absolute; left: var(--space-3); bottom: var(--space-3); right: var(--space-3); font-size: var(--fs-label); line-height: 1.5; }

/* ---------- Hero ---------- */
.hero { padding-block: calc(var(--space-8) + var(--space-2)) var(--space-8); overflow: hidden; }
.hero__grid { display: grid; gap: var(--space-5); align-items: start; }
.hero h1 { font-size: var(--fs-display); font-weight: var(--weight-display); line-height: var(--lh-tight); max-width: 11ch; }
.hero .donor-line { color: var(--s-accent-text); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__lead { font-size: var(--fs-lead); color: var(--s-soft); max-width: 36rem; }
.you-line { display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-display); font-size: 1.3em; line-height: 1.15; letter-spacing: -0.01em; color: var(--s-ink); }
.hero__private { margin-top: var(--space-4); font-size: var(--fs-small); font-weight: var(--weight-strong); max-width: 36rem; }
.hero .btn-row { margin-top: var(--space-6); }
.hero__alt .hero__lead + .hero__lead { margin-top: calc(var(--hgap) * 0.6); }
.hero__lead--soft { color: var(--s-soft); }
.hero__assure { display: flex; align-items: center; gap: 0.45em; margin-top: var(--hgap); font-size: var(--fs-small); font-weight: var(--weight-strong); color: var(--s-soft); }
.hero__assure svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.4; }
.assurance { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); list-style: none; font-size: var(--fs-small); color: var(--s-soft); }
.assurance li { display: inline-flex; align-items: center; gap: 0.45em; }
.assurance svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.4; }
.hero__media { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.hero__video { aspect-ratio: 4 / 5; max-width: 360px; width: 100%; }
.hero__handle { color: var(--s-ink); }
.hero__handle p { font-size: var(--fs-body); }
.social-links { display: flex; gap: var(--space-2); margin-top: var(--space-2); list-style: none; padding: 0; }
.social-links a { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--s-line, var(--color-chalk-16)); color: var(--s-ink); }
.social-links a:hover { background: var(--s-chip); }
.social-links svg { width: 22px; height: 22px; fill: currentColor; }

/* Hero 1: split, vertical video */
@media (min-width: 900px) {
  .hero[data-layout="1"] .hero__grid { grid-template-columns: 1.2fr 0.8fr; grid-template-areas: "copy media" "body media"; column-gap: var(--space-8); align-items: center; }
  .hero[data-layout="1"] .hero__copy { grid-area: copy; align-self: end; }
  .hero[data-layout="1"] .hero__body { grid-area: body; align-self: start; }
  .hero[data-layout="1"] .hero__media { grid-area: media; justify-items: end; margin: 0; }
  .hero[data-layout="1"] .hero__video { aspect-ratio: 9 / 16; }
  .hero[data-layout="1"] .hero__handle { max-width: 360px; }
}
/* Hero 2: the lead mark leads, centered */
/* Hero 3: poster headline, wide video */
.hero[data-layout="3"] h1 { font-size: var(--fs-poster); max-width: none; }
.hero[data-layout="3"] .hero__video { aspect-ratio: 16 / 9; max-width: none; }
@media (min-width: 900px) {
  .hero[data-layout="3"] .hero__grid { grid-template-columns: 0.9fr 1.1fr; grid-template-areas: "copy copy" "body media"; column-gap: var(--space-8); }
  .hero[data-layout="3"] .hero__copy { grid-area: copy; }
  .hero[data-layout="3"] .hero__body { grid-area: body; }
  .hero[data-layout="3"] .hero__media { grid-area: media; margin: 0; }
}

/* Signature motion: the donor line settles in under its own weight */
@media (prefers-reduced-motion: no-preference) {
  .js [data-signature-motion] .donor-line {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat; background-position: 0 94%; background-size: 0% var(--donor-mark, 0.07em);
    animation: donor-underline var(--dur-slow) var(--ease-settle) 600ms forwards;
  }
  .js [data-signature-motion] h1 {
    opacity: 0; transform: translateY(0.25em);
    animation: settle var(--dur-med) var(--ease-settle) 80ms forwards;
  }
  @keyframes settle { to { opacity: 1; transform: none; } }
  @keyframes donor-underline { to { background-size: 100% var(--donor-mark, 0.07em); } }
}
@media (prefers-reduced-motion: reduce) {
  [data-signature-motion] .donor-line { background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 94%; background-size: 100% var(--donor-mark, 0.07em); }
}

/* ---------- Meet Mike ---------- */
.story__grid { display: grid; gap: var(--space-6); }
.story__head h2 { font-size: var(--fs-h2); }
.story__head .lead { margin-top: var(--space-5); max-width: var(--measure); }
.story__body { display: grid; gap: var(--space-4); max-width: var(--measure); }
.story__media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.story__media > * { aspect-ratio: 1 / 1; }
.story__media .story__portrait { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* The family photo is tall with the faces near the top; keep them in frame in every crop */
.story__portrait.photo img { object-position: var(--focus, 50% 0%); }
.story__media > .ph--soft { padding: var(--space-3); }
.story__media > .ph--soft .ph__label { font-size: 0.875rem; }
.story__traits { list-style: none; display: grid; gap: var(--space-4); }
.trait h3 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.trait p { color: var(--s-soft); font-size: var(--fs-small); }
.story__quote p { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--fs-h3); line-height: 1.3; }
.story__quote p.eyebrow { font-family: var(--font-body); font-size: var(--fs-label); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--s-soft); margin-bottom: var(--space-3); }
.story__quote footer { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--s-soft); }

/* Meet Mike 1: photos beside the story, cards */
.story[data-layout="1"] .trait { padding: var(--space-5); background: var(--s-card); border-radius: var(--radius-md); border: 1px solid var(--s-card-line); }
.story[data-layout="1"] .story__quote { padding-left: var(--space-5); border-left: 3px solid var(--s-ink); }
@media (min-width: 720px) { .story[data-layout="1"] .story__traits { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) {
  .story[data-layout="1"] .story__grid { grid-template-columns: 0.95fr 1.05fr; grid-template-areas: "media head" "media body" "media traits" "media quote"; grid-template-rows: auto auto auto 1fr; column-gap: var(--space-8); }
  .story[data-layout="1"] .story__head { grid-area: head; }
  .story[data-layout="1"] .story__body { grid-area: body; }
  .story[data-layout="1"] .story__traits { grid-area: traits; grid-template-columns: 1fr; }
  .story[data-layout="1"] .story__quote { grid-area: quote; }
  .story[data-layout="1"] .story__media { grid-area: media; position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; }
  .story[data-layout="1"] .story__portrait { aspect-ratio: 4 / 5; }
}
@media (min-width: 1180px) { .story[data-layout="1"] .story__traits { grid-template-columns: repeat(3, 1fr); } }

/* Meet Mike 2: editorial, wide portrait, centered */
.story[data-layout="2"] .story__grid { max-width: 980px; margin-inline: auto; }
.story[data-layout="2"] .story__head { text-align: center; }
.story[data-layout="2"] .story__head .lead { margin-inline: auto; }
.story[data-layout="2"] .story__media .story__portrait { aspect-ratio: 16 / 9; }
.story[data-layout="2"] .story__media > *:not(.story__portrait) { aspect-ratio: 4 / 3; }
.story[data-layout="2"] .story__body { max-width: none; }
.story[data-layout="2"] .story__quote { order: 4; text-align: center; padding-block: var(--space-6); border-block: 1px solid var(--s-line); }
.story[data-layout="2"] .story__quote p { font-size: var(--fs-h2); line-height: 1.15; }
.story[data-layout="2"] .story__quote p.eyebrow { font-size: var(--fs-label); }
.story[data-layout="2"] .story__traits { order: 5; }
.story[data-layout="2"] .trait { border-top: 2px solid var(--s-ink); padding-top: var(--space-4); }
@media (min-width: 720px) {
  .story[data-layout="2"] .story__body { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); }
  .story[data-layout="2"] .story__traits { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* Meet Mike 3: the family's words first, then a photo strip */
.story[data-layout="3"] .story__quote { order: -1; }
.story[data-layout="3"] .story__head { order: -2; }
.story[data-layout="3"] .story__quote { position: relative; padding-top: var(--space-6); }
.story[data-layout="3"] .story__quote::before { content: "“"; position: absolute; top: -0.2em; left: 0; font-family: var(--font-display); font-weight: var(--weight-display); font-size: 5rem; line-height: 1; color: var(--s-soft); }
.story[data-layout="3"] .story__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story[data-layout="3"] .story__media > * { aspect-ratio: 3 / 4; grid-column: auto; }
.story[data-layout="3"] .trait { border-left: 3px solid var(--s-ink); padding-left: var(--space-4); }
@media (min-width: 960px) {
  .story[data-layout="3"] .story__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "head quote" "media media" "body traits"; column-gap: var(--space-8); row-gap: var(--space-7); align-items: end; }
  .story[data-layout="3"] .story__head { grid-area: head; }
  .story[data-layout="3"] .story__quote { grid-area: quote; }
  .story[data-layout="3"] .story__media { grid-area: media; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .story[data-layout="3"] .story__body { grid-area: body; align-self: start; }
  .story[data-layout="3"] .story__traits { grid-area: traits; align-self: start; }
}

/* ---------- Mike's Story, part 2: why a living donor, then the ask ---------- */
.beats { list-style: none; display: grid; gap: var(--space-4); }
.beat { position: relative; }
.beat h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.beat__text p { color: var(--s-soft); }
.beat__text p + p { margin-top: var(--space-3); }
.beat__text strong { color: var(--s-ink); }
.beat--ask .btn { margin-top: var(--space-5); }
.need__note { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--s-soft); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.need .need__title { font-size: var(--fs-h2); }

/* Need 1: two cards side by side, the same height */
.need[data-layout="1"] .beat { padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--s-card-line); }
.need[data-layout="1"] .beat:not(.beat--ask) { background: var(--s-card); }
@media (min-width: 900px) {
  .need[data-layout="1"] .beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .need[data-layout="1"] .beat { padding: var(--space-7); }
}

/* Need 2: one reading column, the ask as a band underneath */
.need[data-layout="2"] .section-head,
.need[data-layout="2"] .beat--why,
.need[data-layout="2"] .need__note { max-width: 46rem; margin-inline: auto; }
.need[data-layout="2"] .beat--ask { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); margin-top: var(--space-5); }
@media (min-width: 800px) {
  .need[data-layout="2"] .beat--ask { padding: var(--space-7); }
  .need[data-layout="2"] .beat--ask .beat__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: var(--space-7); align-items: start; }
  .need[data-layout="2"] .beat--ask h3 { grid-row: 1 / span 3; }
  .need[data-layout="2"] .beat--ask .beat__text > :not(h3) { grid-column: 2; }
}

/* Need 3: sticky heading beside a story rail */
.need[data-layout="3"] .beats { gap: var(--space-6); }
.need[data-layout="3"] .beat:not(.beat--ask) { padding-left: var(--space-6); border-left: 2px solid var(--s-line); }
.need[data-layout="3"] .beat:not(.beat--ask)::before { content: ""; position: absolute; left: -7px; top: 0.3em; width: 12px; height: 12px; border-radius: 50%; background: var(--s-ink); }
.need[data-layout="3"] .beat--ask { padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); }
@media (min-width: 960px) {
  .need[data-layout="3"] .need__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; column-gap: var(--space-8); align-items: start; }
  .need[data-layout="3"] .section-head { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
  .need[data-layout="3"] .need__note { grid-column: 2; }
  .need[data-layout="3"] .beat--ask { padding: var(--space-7); }
}

/* ---------- Action Hub ---------- */
.paths { display: grid; gap: var(--space-5); }
.path { border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); border: 1px solid var(--s-card-line); }
.path__intro, .path__detail { display: flex; flex-direction: column; gap: var(--space-4); }
.path__detail { flex: 1; }
.path__detail > .btn-row:last-child { margin-top: auto; }
.path--share .path__detail > .btn-row:last-child { margin-top: var(--space-2); }
.social-links--steps { margin-top: var(--space-3); }
.path__label { font-size: var(--fs-label); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--s-soft); }
.path__letter { display: none; }
.path h3 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.06; }
.path__intro > p { max-width: 34rem; color: var(--s-soft); }
.steps { list-style: none; display: grid; gap: var(--space-3); }
.steps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--space-3); align-items: start; }
.steps .n {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 0.95rem;
  background: var(--s-chip); color: var(--s-ink);
}
.steps strong { display: block; font-weight: var(--weight-strong); }
.steps span.sub { display: block; font-size: var(--fs-small); color: var(--s-soft); }
.fine-print { border: 1px solid var(--s-line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--fs-small); color: var(--s-soft); }
.fine-print h4 { font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--s-ink); margin-bottom: var(--space-2); }
.fine-print ul { list-style: none; display: grid; gap: var(--space-2); }
.fine-print li { display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--space-2); }
.fine-print svg { width: 16px; height: 16px; margin-top: 4px; stroke: var(--s-ink); fill: none; stroke-width: 2.4; }
.path .draft-tag { align-self: flex-start; }
.ext-note { font-size: var(--fs-label); color: var(--s-soft); }
.path--share { box-shadow: var(--shadow-card); }

/* Help 1: two cards side by side */
@media (min-width: 900px) {
  .help[data-layout="1"] .paths { grid-template-columns: 1fr 1fr; }
  .help[data-layout="1"] .path { padding: var(--space-7); }
}
/* Help 2: full-width bands */
.help[data-layout="2"] .paths { gap: 0; margin-inline: calc(var(--gutter) * -1); }
.help[data-layout="2"] .path { border-radius: 0; border-inline: 0; box-shadow: none; padding-inline: var(--gutter); }
@media (min-width: 900px) {
  .help[data-layout="2"] .path { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); padding: var(--space-7) var(--space-8); }
  .help[data-layout="2"] .path h3 { font-size: clamp(2.2rem, 1.4rem + 2vw, 3.2rem); }
}
/* Help 3: two equal doors */
.help[data-layout="3"] .section-head { text-align: center; margin-inline: auto; }
.help[data-layout="3"] .section-head p { margin-inline: auto; }
.help[data-layout="3"] .path__letter { display: block; font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--s-ink); margin-bottom: var(--space-4); text-transform: none; }
.help[data-layout="3"] .path { box-shadow: none; }
@media (min-width: 900px) {
  .help[data-layout="3"] .paths { grid-template-columns: 1fr 1fr; }
  .help[data-layout="3"] .path { padding: var(--space-7); }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: var(--space-6); }
.faq-list { border-top: 1px solid var(--s-line); }
.faq-item { border-bottom: 1px solid var(--s-line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 64px; padding: var(--space-4) 0;
  font-family: var(--font-display); font-weight: var(--weight-heading); font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem); line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--s-line);
  display: grid; place-items: center; transition: transform var(--dur-fast) var(--ease-settle), background-color var(--dur-fast);
}
.faq-item summary .icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.faq-item[open] summary .icon { transform: rotate(45deg); background: var(--s-chip); }
.faq-item summary:hover .icon { background: var(--s-chip); }
.faq-answer { padding: 0 0 var(--space-5); max-width: var(--measure); color: var(--s-soft); }
.faq-answer p + p { margin-top: var(--space-3); }
.faq-answer .draft-tag { margin-top: var(--space-4); }
.faq__more { margin-top: var(--space-5); }

/* FAQ 1: heading beside the questions */
@media (min-width: 960px) {
  .faq[data-layout="1"] .faq__grid { grid-template-columns: 0.75fr 1.25fr; gap: var(--space-8); align-items: start; }
  .faq[data-layout="1"] .section-head { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
/* FAQ 2: one centered column */
.faq[data-layout="2"] .faq__grid { max-width: 50rem; margin-inline: auto; }
.faq[data-layout="2"] .section-head { text-align: center; margin-inline: auto; margin-bottom: var(--space-4); }
.faq[data-layout="2"] .faq__more { justify-content: center; }
.faq[data-layout="2"] .section-head p { margin-inline: auto; }
.faq[data-layout="2"] .faq-list { border-top: 0; display: grid; gap: var(--space-3); }
.faq[data-layout="2"] .faq-item { border: 1px solid var(--s-card-line); border-radius: var(--radius-md); background: var(--s-card); padding-inline: var(--space-5); }
.faq[data-layout="1"] .faq-list { border-top: 0; display: grid; gap: var(--space-2); }
.faq[data-layout="1"] .faq-item { border: 1px solid var(--s-card-line); border-radius: var(--radius-lg); background: var(--s-card); padding-inline: var(--space-5); }
.faq[data-layout="1"] .faq-item[open] { border-color: var(--s-ink); }
/* FAQ 3: every answer open, two columns */
.faq[data-layout="3"] .faq-list { border-top: 0; display: grid; gap: var(--space-5); }
.faq[data-layout="3"] .faq-item { border: 1px solid var(--s-card-line); border-top: 3px solid var(--s-ink); border-radius: var(--radius-md); background: var(--s-card); padding: var(--space-2) var(--space-5) var(--space-4); }
.faq[data-layout="3"] .faq-item summary { cursor: default; pointer-events: none; }
.faq[data-layout="3"] .faq-item summary .icon { display: none; }
.faq[data-layout="3"] .section-head { margin-bottom: var(--space-4); }
@media (min-width: 900px) { .faq[data-layout="3"] .faq-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); row-gap: var(--space-6); } }

/* ---------- Video updates ---------- */
.updates__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.updates__top .section-head { margin-bottom: 0; }
.carousel__track { list-style: none; }
.carousel__track > li { list-style: none; }
.carousel__track .ph { height: 100%; aspect-ratio: 9 / 16; }
.vtile__hit { position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: inherit; }
.vtile__hit:focus-visible { outline: 3px solid var(--color-chalk); outline-offset: -5px; }
/* While a video loads (on Safari the whole file loads first), a ring turns around the play button */
.vtile.is-loading .ph__play::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-chalk-16); border-top-color: var(--color-chalk); }
@media (prefers-reduced-motion: no-preference) {
  .vtile.is-loading .ph__play::before { animation: vtile-spin 0.9s linear infinite; }
}
@keyframes vtile-spin { to { transform: rotate(1turn); } }
.vtile.is-playing::after, .vtile.is-playing > .vtile__hit, .vtile.is-playing > .ph__play, .vtile.is-playing > .ph__tag, .vtile.is-playing > .ph__label { display: none; }
.vtile.is-playing .ph__media { object-fit: contain; z-index: 2; }
/* Family photos sit behind the tiles, so the play button moves to the corner, off the faces */
.carousel__track .ph__play { top: auto; left: auto; right: var(--space-4); bottom: var(--space-4); transform: none; width: 48px; height: 48px; }
.carousel__track .ph__play svg { width: 18px; height: 18px; }
.carousel__track .ph--media > .ph__tag, .carousel__track .ph--media > .ph__label { padding-right: 56px; }
/* Layout 2 on phones and tablets: small tiles, so the play button goes top-right and the title takes the full width */
@media (max-width: 899px) {
  .updates[data-layout="2"] .carousel__track .ph__play { top: 6px; right: 6px; bottom: auto; width: 32px; height: 32px; }
  .updates[data-layout="2"] .carousel__track .ph--media > .ph__tag { display: none; }
  .updates[data-layout="2"] .carousel__track .ph--media > .ph__label { padding-right: 0; font-size: 0.9375rem; }
}
/* Small phones: every layout gets the same treatment, so titles never climb over faces */
@media (max-width: 479px) {
  .carousel__track .ph__play { top: 6px; right: 6px; bottom: auto; width: 32px; height: 32px; }
  .carousel__track .ph--media > .ph__tag { display: none; }
  .carousel__track .ph--media > .ph__label { padding-right: 0; font-size: 0.9375rem; }
}
.carousel__controls { display: flex; gap: var(--space-2); }
.carousel__btn {
  width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--s-line);
  background: transparent; color: var(--s-ink); display: grid; place-items: center; cursor: pointer;
}
.carousel__btn:hover { background: var(--s-chip); }
.carousel__btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.follow-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); align-items: center; }
.follow-row span { color: var(--s-soft); font-size: var(--fs-small); margin-right: var(--space-2); }
.follow-note { margin-top: var(--space-4); max-width: var(--measure); color: var(--s-soft); font-size: var(--fs-small); }

/* Updates 1: swipe row */
.updates[data-layout="1"] .carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: var(--space-4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) var(--space-4); margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
/* The progress line under the row replaces the browser scrollbar, so there is only one */
.updates[data-layout="1"] .carousel__track::-webkit-scrollbar { display: none; }
.updates[data-layout="1"] .carousel__track > li { scroll-snap-align: start; }
@media (min-width: 640px) { .updates[data-layout="1"] .carousel__track { grid-auto-columns: minmax(220px, 40%); } }
@media (min-width: 1000px) { .updates[data-layout="1"] .carousel__track { grid-auto-columns: calc((100% - 3 * var(--space-4) - 2 * var(--gutter)) / 4); } }
.updates:not([data-layout="1"]) .carousel__controls { display: none; }
/* Updates 2: one featured video */
/* Updates 2: the newest video featured, then a grid of eight, every tile the same shape */
.updates[data-layout="2"] .carousel__track { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.updates[data-layout="2"] .carousel__track .ph { padding: var(--space-4); }
.updates[data-layout="2"] .carousel__track > li:first-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .updates[data-layout="2"] .carousel__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .updates[data-layout="2"] .carousel__track > li:first-child { grid-column: span 2; grid-row: span 2; }
  .updates[data-layout="2"] .carousel__track > li:first-child .ph { aspect-ratio: auto; height: 100%; }
}
/* Updates 3: all five in a grid */
.updates[data-layout="3"] .carousel__track { display: flex; flex-wrap: wrap; justify-content: center; --cols: 2; --gap: var(--space-3); gap: var(--gap); }
.updates[data-layout="3"] .carousel__track > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.updates[data-layout="3"] .carousel__track .ph { padding: var(--space-4); }
.updates[data-layout="3"] .carousel__track .ph__label { font-size: 1rem; }
@media (min-width: 700px) { .updates[data-layout="3"] .carousel__track { --cols: 3; } }
@media (min-width: 1040px) { .updates[data-layout="3"] .carousel__track { --cols: 5; --gap: var(--space-4); } }

/* ---------- Supporter messages ---------- */
.messages { display: grid; gap: var(--space-4); list-style: none; }
.message p { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.4; }
.message footer { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--s-soft); }
/* Messages 1: three cards */
.messages-sec[data-layout="1"] .message { background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: var(--radius-md); padding: var(--space-5); }
@media (min-width: 800px) { .messages-sec[data-layout="1"] .messages { grid-template-columns: repeat(3, 1fr); } }
/* Messages 2: one featured message */
.messages-sec[data-layout="2"] .message { border-radius: var(--radius-md); padding: var(--space-5); border: 1px solid var(--s-card-line); background: var(--s-card); }
.messages-sec[data-layout="2"] .message:first-child { padding: var(--space-6); }
.messages-sec[data-layout="2"] .message:first-child p { font-size: var(--fs-h3); line-height: 1.3; }
@media (min-width: 800px) {
  .messages-sec[data-layout="2"] .messages { grid-template-columns: 1fr 1fr; }
  .messages-sec[data-layout="2"] .message:first-child { grid-column: 1 / -1; padding: var(--space-7); text-align: center; }
}
/* Messages 3: open typographic wall */
.messages-sec[data-layout="3"] .section-head { text-align: center; margin-inline: auto; }
.messages-sec[data-layout="3"] .section-head p { margin-inline: auto; }
.messages-sec[data-layout="3"] .message { position: relative; padding-top: var(--space-7); text-align: center; }
.messages-sec[data-layout="3"] .message::before { content: "“"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: var(--weight-display); font-size: 4rem; line-height: 1; color: var(--s-soft); }
@media (min-width: 800px) {
  .messages-sec[data-layout="3"] .messages { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .messages-sec[data-layout="3"] .message { padding-inline: var(--space-6); }
  .messages-sec[data-layout="3"] .message + .message { border-left: 1px solid var(--s-line); }
}
/* Approved family quotes: curly quote marks in layouts 1 and 2 (layout 3 has its big decorative mark) */
.message blockquote { margin: 0; }
.messages-sec:not([data-layout="3"]) .message blockquote p::before { content: "“"; }
.messages-sec:not([data-layout="3"]) .message blockquote p::after { content: "”"; }
/* Five quotes in a three-across grid: the second row of two sits centred */
@media (min-width: 800px) {
  .messages-sec[data-layout="1"] .messages, .messages-sec[data-layout="3"] .messages { grid-template-columns: repeat(6, 1fr); }
  .messages-sec[data-layout="1"] .message, .messages-sec[data-layout="3"] .message { grid-column: span 2; }
  .messages-sec[data-layout="1"] .message:nth-child(4):nth-last-child(2), .messages-sec[data-layout="3"] .message:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .messages-sec[data-layout="3"] .message:nth-child(3n+1) { border-left: 0; }
  .messages-sec[data-layout="3"] .message:nth-child(n+4) { margin-top: var(--space-6); }
}

/* ---------- Share and media ---------- */
.share__grid { display: grid; gap: var(--space-8); }
.share__grid .section-head { margin-bottom: 0; }
.share-block h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.share-block > p { color: var(--s-soft); margin-bottom: var(--space-5); max-width: var(--measure); }
.posts { list-style: none; display: grid; gap: var(--space-4); }
.post { background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.post__label { font-size: var(--fs-label); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--s-soft); }
.post__text { white-space: pre-line; font-size: var(--fs-small); line-height: 1.6; flex: 1; }
.post .btn { align-self: flex-start; padding: 0.55em 1.1em; font-size: 0.9375rem; }
.copy-status { font-size: var(--fs-label); color: var(--s-soft); min-height: 1.2em; }
@media (min-width: 900px) { .posts { grid-template-columns: repeat(3, 1fr); } }

.kit { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.kit__item { background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.kit__art { --pad: var(--space-3); position: relative; aspect-ratio: 4 / 3; background: var(--s-chip); border-radius: var(--radius-sm); overflow: hidden; }
.kit__art img { position: absolute; top: var(--pad); left: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); object-fit: contain; }
.kit__art--pad { --pad: var(--space-5); }
.kit__item--dark .kit__art { background: var(--color-indigo); }
.kit__item h4 { font-family: var(--font-display); font-size: 1.0625rem; margin-top: var(--space-1); }
.kit__item p { font-size: var(--fs-label); color: var(--s-soft); }
.kit__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--fs-small); color: var(--s-soft); }
/* Six Round 4 pieces per layout: 2 across on phones, 3 across from 900px.
   Share 3 leads with a large yard sign; the wide car sticker gets its own row on phones. */
.share[data-layout="3"] .kit__item--feature,
.share[data-layout="3"] .kit__item--wide { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .share[data-layout="3"] .kit__item--wide { grid-column: auto; }
  .share[data-layout="3"] .kit__item--feature { grid-column: span 2; grid-row: span 2; }
  .share[data-layout="3"] .kit__item--feature .kit__art { aspect-ratio: auto; flex: 1; min-height: 0; }
}
.press-card { border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-5); }
.press-card h3 { font-size: var(--fs-h3); }
.press-card p:not(.eyebrow) { color: var(--s-soft); max-width: var(--measure); margin-top: var(--space-3); }
@media (min-width: 900px) { .press-card { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-7); } }

/* Share 3 puts the yard sign first */
.share[data-layout="3"] .kit__item--feature { order: -1; }

/* ---------- Sign-up, partners, contact ---------- */
.contact__grid { display: grid; gap: var(--space-8); }
.signup { border: 1px solid var(--s-card-line); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-5); }
.signup h2 { font-size: var(--fs-h3); }
.signup p { color: var(--s-soft); margin-top: var(--space-2); }
.signup__form { display: grid; gap: var(--space-3); }
.signup__field {
  min-height: 52px; width: 100%; border: 2px solid var(--color-indigo); border-radius: var(--radius-button);
  padding: 0 var(--space-5); background: var(--color-chalk); color: var(--color-indigo); font: inherit;
}
.signup__field::placeholder { color: var(--color-indigo); opacity: 0.7; }
.signup__field:focus-visible { outline: 3px solid var(--color-tangerine); outline-offset: 2px; }
.signup__form .btn { justify-content: center; }
.signup__form .btn:disabled { opacity: 0.7; cursor: progress; }
/* Off-screen field only bots fill in */
.signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact__head { margin-bottom: var(--space-6); }
.contact__head h2 { font-size: var(--fs-h2); }
.contacts { list-style: none; display: grid; gap: var(--space-5); }
.contact-item { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-item h3 { font-size: 1.25rem; }
.contact-item p { color: var(--s-soft); font-size: var(--fs-small); }
.contact-item .btn { align-self: flex-start; }
.partners { text-align: center; }
.partners__intro { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--s-soft); }
.section-head .section-tag { margin-top: var(--space-3); }
.boilerplate { padding-left: var(--space-4); border-left: 3px solid var(--s-line); }
.partners h2 { font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--s-soft); font-weight: var(--weight-strong); }
.partners ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-5); }
.partners li { min-height: 84px; display: grid; place-items: center; padding: var(--space-3); border: 1px dashed var(--s-line); border-radius: var(--radius-md); color: var(--s-soft); font-size: var(--fs-small); }
@media (min-width: 800px) {
  .partners ul { grid-template-columns: repeat(5, 1fr); }
  .signup { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--space-7); }
  .signup__form { grid-template-columns: 1fr auto; }
  .signup__form .copy-status { grid-column: 1 / -1; }
}
/* Contact 1: sign-up, then three contacts */
.contact[data-layout="1"] .contact-item { border-top: 2px solid var(--s-ink); padding-top: var(--space-4); }
@media (min-width: 800px) { .contact[data-layout="1"] .contacts { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
/* Contact 2: contact rows first, sign-up band after */
.contact[data-layout="2"] .contact__people { order: -1; }
.contact[data-layout="2"] .contacts { gap: 0; border-top: 1px solid var(--s-line); }
.contact[data-layout="2"] .contact-item { padding-block: var(--space-5); border-bottom: 1px solid var(--s-line); }
@media (min-width: 800px) {
  .contact[data-layout="2"] .contact-item { display: grid; grid-template-columns: 1fr 1.3fr 17rem; gap: var(--space-6); align-items: center; }
}
/* Contact 3: contacts beside the sign-up */
.contact[data-layout="3"] .contact-item { border-left: 3px solid var(--s-ink); padding-left: var(--space-4); }
.contact[data-layout="3"] .contact__people { order: -1; }
@media (min-width: 960px) {
  .contact[data-layout="3"] .contact__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "people signup" "partners partners"; column-gap: var(--space-7); }
  .contact[data-layout="3"] .contact__people { grid-area: people; }
  .contact[data-layout="3"] .signup { grid-area: signup; grid-template-columns: 1fr; align-content: center; }
  .contact[data-layout="3"] .signup__form { grid-template-columns: 1fr; }
  .contact[data-layout="3"] .partners { grid-area: partners; }
}

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-9) var(--space-6); position: relative; }
.footer__grid { display: grid; gap: var(--space-7); }
.footer__brand img { width: 240px; }
.footer__brand p { margin-top: var(--space-5); color: var(--s-soft); font-size: var(--fs-small); max-width: 26rem; }
.footer__nav h2 { font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--s-soft); font-weight: var(--weight-strong); margin-bottom: var(--space-3); }
.footer__nav ul { list-style: none; }
.footer__nav a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; }
.footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.footer__legal { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--s-line); display: grid; gap: var(--space-2); font-size: var(--fs-label); color: var(--s-soft); }
/* Footer 1: lead mark with the donor line */
@media (min-width: 900px) {
  .site-footer[data-layout="1"] .footer__grid { grid-template-columns: 1.2fr 1fr; }
  .site-footer[data-layout="1"] .footer__brand img { width: 300px; }
}
/* Footer 2: star mark, centered */
.site-footer[data-layout="2"] .footer__grid { justify-items: center; text-align: center; }
.site-footer[data-layout="2"] .footer__brand img { margin-inline: auto; width: 260px; }
.site-footer[data-layout="2"] .footer__brand p { margin-inline: auto; }
.site-footer[data-layout="2"] .footer__legal { justify-items: center; text-align: center; }
@media (min-width: 900px) { .site-footer[data-layout="2"] .footer__brand img { width: 320px; } .site-footer[data-layout="2"] .footer__cols { gap: var(--space-9); } }
/* Footer 3: no star, compact row */
.site-footer[data-layout="3"] .footer__brand img { width: 240px; }
@media (min-width: 900px) {
  .site-footer[data-layout="3"] .footer__grid { grid-template-columns: auto 1fr auto; column-gap: var(--space-8); align-items: start; }
  .site-footer[data-layout="3"] .footer__brand { display: contents; }
  .site-footer[data-layout="3"] .footer__brand p { margin-top: 0; }
  .site-footer[data-layout="3"] .footer__legal { grid-template-columns: 1fr auto; }
}

/* ---------- Subpages ---------- */
.page-hero { padding-block: var(--space-8); }
.page-hero h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.25rem); font-weight: var(--weight-display); line-height: var(--lh-tight); max-width: 16ch; }
.page-hero .page-lede { margin-top: var(--space-5); font-size: var(--fs-lead); color: var(--s-soft); max-width: 40rem; }
.page-hero .btn-row { margin-top: var(--space-6); }
.breadcrumb { font-size: var(--fs-small); margin-bottom: var(--space-5); }
.breadcrumb a { color: var(--s-soft); display: inline-flex; min-height: var(--tap); align-items: center; }
.doc { display: grid; gap: var(--space-7); }
.doc__toc { list-style: none; display: grid; gap: var(--space-1); }
.doc__toc a { display: flex; align-items: center; min-height: var(--tap); text-decoration: none; color: var(--s-soft); font-weight: var(--weight-strong); border-left: 2px solid var(--s-line); padding-left: var(--space-4); }
.doc__toc a:hover { color: var(--s-ink); border-left-color: var(--s-ink); }
.doc__body > section + section { margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--s-line); }
.doc__body h2 { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); margin-bottom: var(--space-4); }
.doc__body h3 { font-size: 1.25rem; margin: var(--space-6) 0 var(--space-2); }
.doc__body p, .doc__body li { max-width: var(--measure); color: var(--s-soft); }
.doc__body p + p { margin-top: var(--space-3); }
.doc__body ul.bullets, .doc__body ol.bullets { padding-left: 1.25em; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.doc__body .draft-tag { margin-top: var(--space-4); }
.doc__body .ph { margin-top: var(--space-5); }
.card-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); list-style: none; }
.card { background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: var(--radius-md); padding: var(--space-5); }
.card h3 { margin: 0 0 var(--space-2); font-size: 1.125rem; }
.card p { font-size: var(--fs-small); }
.card .btn { margin-top: var(--space-4); }
.download__img { background: var(--s-chip); border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center; }
.download__img img { width: 100%; height: 100%; object-fit: contain; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
  .doc { grid-template-columns: 240px 1fr; gap: var(--space-8); }
  .doc__toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Textures ----------
   Two layers behind every section: ::before carries the section texture,
   ::after a paper grain. Both are masks filled with --tx-color, so they take
   the color of the surface in every theme. Each section sets them per layout below. */
[data-layouts] { isolation: isolate; overflow: clip; }
[data-layouts]::before, [data-layouts]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--tx-color);
}
[data-layouts]::before {
  opacity: calc(var(--tx-o, 0) * var(--tx-k, 1) * var(--tx-m, 1));
  -webkit-mask-image: var(--tx-img, none), var(--tx-fade, linear-gradient(#000 0 0));
  mask-image: var(--tx-img, none), var(--tx-fade, linear-gradient(#000 0 0));
  -webkit-mask-size: var(--tx-size, auto), 100% 100%; mask-size: var(--tx-size, auto), 100% 100%;
  -webkit-mask-repeat: var(--tx-repeat, repeat), no-repeat; mask-repeat: var(--tx-repeat, repeat), no-repeat;
  -webkit-mask-position: var(--tx-pos, 0 0), 0 0; mask-position: var(--tx-pos, 0 0), 0 0;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
[data-layouts]::after { opacity: calc(var(--grain-o, 0) * var(--grain-k, 1)); -webkit-mask-image: var(--tx-grain); mask-image: var(--tx-grain); -webkit-mask-size: 180px; mask-size: 180px; }

/* Header: 2 and 3 grain (kept quiet behind the logo) */
.site-header[data-layout="1"] { --grain-o: 0.1; }
.site-header[data-layout="3"] { --grain-o: 0.08; }
/* Hero: 1 oversized lead mark, 2 ripple rings behind the mark, 3 halftone */
.hero[data-layout="1"] { --tx-img: var(--tx-lettering); --tx-size: min(56vw, 780px) auto; --tx-repeat: no-repeat; --tx-pos: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 60%; --tx-o: 0.06; --grain-o: 0.08; }
.hero[data-layout="2"] { --tx-o: 0; --grain-o: 0; }
.hero[data-layout="3"] { --tx-img: var(--tx-dots); --tx-size: 14px; --tx-fade: radial-gradient(ellipse at 100% 100%, #000, transparent 62%); --tx-o: 0.2; --grain-o: 0.07; }
/* Meet Mike: 1 paper, 2 linen, 3 halftone corner */
.story[data-layout="1"] { --grain-o: 0.11; }
.story[data-layout="2"] { --tx-img: var(--tx-weave); --tx-size: 6px; --tx-fade: linear-gradient(#000, transparent 55%); --tx-o: 0.07; }
.story[data-layout="3"] { --tx-img: var(--tx-dots); --tx-size: 14px; --tx-fade: radial-gradient(ellipse at 0 0, #000, transparent 55%); --tx-o: 0.16; --grain-o: 0.06; }
/* The Need: 1 halftone, 2 paper, 3 linen */
.need[data-layout="1"] { --tx-img: var(--tx-dots); --tx-size: 14px; --tx-fade: radial-gradient(ellipse at 100% 0, #000, transparent 60%); --tx-o: 0.16; }
.need[data-layout="2"] { --grain-o: 0.11; }
.need[data-layout="3"] { --tx-img: var(--tx-weave); --tx-size: 6px; --tx-fade: linear-gradient(90deg, #000, transparent 50%); --tx-o: 0.07; }
/* I want to help: 1 halftone, 2 ripple from Path A, 3 Dallas streets */
.help[data-layout="1"] { --tx-img: var(--tx-dots); --tx-size: 14px; --tx-fade: radial-gradient(ellipse at 100% 0, #000, transparent 55%); --tx-o: 0.15; }
.help[data-layout="2"] { --tx-img: var(--tx-rings); --tx-size: 1600px; --tx-repeat: no-repeat; --tx-pos: 0% 40%; --tx-fade: radial-gradient(circle at 0 40%, #000, transparent 65%); --tx-o: 0.1; }
.help[data-layout="3"] { --tx-img: var(--tx-streets); --tx-size: cover; --tx-repeat: no-repeat; --tx-pos: 50% 50%; --tx-fade: radial-gradient(ellipse at 50% 0, #000, transparent 70%); --tx-o: 0.09; --grain-o: 0.06; }
/* FAQ: 1 paper, 2 halftone, 3 linen */
.faq[data-layout="1"] { --grain-o: 0.1; }
.faq[data-layout="2"] { --tx-img: var(--tx-dots); --tx-size: 14px; --tx-fade: radial-gradient(ellipse at 0 100%, #000, transparent 55%); --tx-o: 0.15; }
.faq[data-layout="3"] { --tx-img: var(--tx-weave); --tx-size: 6px; --tx-fade: linear-gradient(#000, transparent 40%); --tx-o: 0.07; }
/* Video updates: 1 Dallas streets, 2 halftone, 3 paper and rings */
.updates[data-layout="1"] { --tx-img: var(--tx-streets); --tx-size: cover; --tx-repeat: no-repeat; --tx-pos: 50% 50%; --tx-o: 0.1; }
.updates[data-layout="2"] { --tx-img: var(--tx-dots); --tx-size: 14px; --tx-fade: radial-gradient(ellipse at 0 100%, #000, transparent 60%); --tx-o: 0.16; }
.updates[data-layout="3"] { --tx-img: var(--tx-rings); --tx-size: 1600px; --tx-repeat: no-repeat; --tx-pos: 100% 0%; --tx-fade: radial-gradient(circle at 100% 0, #000, transparent 60%); --tx-o: 0.1; --grain-o: 0.08; }
/* Messages: 1 linen, 2 paper, 3 rings behind the wall */
.messages-sec[data-layout="1"] { --tx-img: var(--tx-weave); --tx-size: 6px; --tx-fade: linear-gradient(0deg, #000, transparent 60%); --tx-o: 0.07; }
.messages-sec[data-layout="2"] { --grain-o: 0.11; }
.messages-sec[data-layout="3"] { --tx-img: var(--tx-rings); --tx-size: 1500px; --tx-repeat: no-repeat; --tx-pos: 50% 50%; --tx-fade: radial-gradient(circle at 50% 50%, #000 20%, transparent 70%); --tx-o: 0.09; }
/* Share: 1 ripple, 2 Dallas streets, 3 halftone print */
.share[data-layout="1"] { --tx-img: var(--tx-rings); --tx-size: 1800px; --tx-repeat: no-repeat; --tx-pos: 100% 0%; --tx-fade: radial-gradient(circle at 100% 0, #000, transparent 55%); --tx-o: 0.11; }
.share[data-layout="2"] { --tx-img: var(--tx-streets); --tx-size: cover; --tx-repeat: no-repeat; --tx-pos: 50% 50%; --tx-fade: linear-gradient(#000, transparent 55%); --tx-o: 0.09; }
.share[data-layout="3"] { --tx-img: var(--tx-dots); --tx-size: 14px; --tx-fade: radial-gradient(ellipse at 100% 0, #000, transparent 50%); --tx-o: 0.17; --grain-o: 0.07; }
/* Contact: 1 Dallas streets, 2 paper, 3 linen */
.contact[data-layout="1"] { --tx-img: var(--tx-streets); --tx-size: cover; --tx-repeat: no-repeat; --tx-pos: 50% 50%; --tx-fade: linear-gradient(0deg, #000, transparent 70%); --tx-o: 0.08; }
.contact[data-layout="2"] { --grain-o: 0.1; }
.contact[data-layout="3"] { --tx-img: var(--tx-weave); --tx-size: 6px; --tx-fade: linear-gradient(90deg, transparent 40%, #000); --tx-o: 0.07; }
/* Footer: 1 oversized lead mark, 2 rings, 3 Dallas streets */
.site-footer[data-layout="1"] { --tx-img: var(--tx-lettering); --tx-size: min(88%, 1100px) auto; --tx-repeat: no-repeat; --tx-pos: 50% 50%; --tx-o: 0.06; --grain-o: 0.07; }
.site-footer[data-layout="2"] { --tx-img: var(--tx-rings); --tx-size: 1600px; --tx-repeat: no-repeat; --tx-pos: 50% 0%; --tx-fade: radial-gradient(circle at 50% 0, #000, transparent 65%); --tx-o: 0.1; }
.site-footer[data-layout="3"] { --tx-img: var(--tx-streets); --tx-size: cover; --tx-repeat: no-repeat; --tx-pos: 50% 50%; --tx-o: 0.09; }
/* The oversized lettering stays faint on light surfaces and is left off on phones */
:root[data-theme="light"] .hero[data-layout="1"] { --tx-o: 0.024; }
@media (max-width: 719px) { .hero[data-layout="1"] { --tx-o: 0; } }

/* ---------- Movement ----------
   Each layout enters differently: 1 rises, 2 slides in, 3 scales up.
   Lists reveal one item after another. All of it switches off for reduced motion. */
[data-layout="1"] { --rv-from: translateY(var(--move-sm)); }
[data-layout="2"] { --rv-from: translateX(calc(var(--move-md) * -1)); }
[data-layout="3"] { --rv-from: scale(0.93); }
.help[data-layout="2"] .path--share { --rv-from: translateX(var(--move-md)); }
@keyframes rv-in { from { opacity: 0; transform: var(--rv-from); } }
@keyframes fade-up { from { opacity: 0; translate: 0 var(--move-sm); } }
@keyframes slide-in { from { opacity: 0; translate: var(--move-md) 0; } }
@keyframes grow-in { from { opacity: 0; scale: 0.9; } }
@keyframes ripple-out { from { opacity: 0; scale: 0.6; } }
@keyframes step-on { from { background: transparent; box-shadow: inset 0 0 0 2px var(--s-line); color: var(--s-soft); scale: 0.7; } }
@keyframes pop { from { opacity: 0; scale: 0.4; } }
@keyframes draw-down { from { scale: 1 0; } }
@keyframes zoom-settle { from { scale: 1.1; } }
@keyframes drift-x { from { translate: 4% 0; } to { translate: -4% 0; } }
@keyframes tx-drift { from { translate: 0 -6%; } to { translate: 0 6%; } }

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .rv:not(.is-in), .reveal-ready .rv-i:not(.is-in) { opacity: 0; }
  .reveal-ready .rv.is-in, .reveal-ready .rv-i.is-in { animation: rv-in var(--dur-med) var(--ease-settle) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }

  /* Hero: each layout arrives its own way (the headline settle is the signature) */
  .hero[data-layout="1"] .hero__media { animation: slide-in var(--dur-enter) var(--ease-settle) var(--delay-1) backwards; }
  .hero[data-layout="3"] .hero__media { animation: fade-up var(--dur-enter) var(--ease-settle) var(--delay-2) backwards; }
  .hero[data-layout="3"] .hero__body { animation: fade-up var(--dur-enter) var(--ease-settle) var(--delay-1) backwards; }

  /* Help: the three steps light up in order; in layout 3 the letters rise */
  .reveal-ready .path.is-in .steps .n { animation: step-on 0.5s var(--ease-settle) backwards; animation-delay: calc(450ms + var(--n, 0) * 180ms); }
  .steps li:nth-child(2) { --n: 1; }
  .steps li:nth-child(3) { --n: 2; }
  .reveal-ready .help[data-layout="3"] .path.is-in .path__letter { animation: fade-up 0.8s var(--ease-settle) 0.15s backwards; }

  /* Messages 3: the quote marks pop in */
  .reveal-ready .messages-sec[data-layout="3"] .message.is-in::before { animation: pop 0.6s var(--ease-settle) backwards; animation-delay: calc(var(--i, 0) * var(--stagger) + 200ms); }

  /* Header movement never changes its height: 1 frosts with a shadow, 2 slides away while scrolling down, 3 shrinks the logo */
  .site-header { transition: box-shadow var(--dur-fast), transform var(--dur-med) var(--ease-settle), background-color var(--dur-fast); }
  .site-header.is-scrolled { box-shadow: 0 8px 26px var(--shadow-color); }
  .site-header[data-layout="2"].is-scrolled { background-color: color-mix(in srgb, var(--s-bg) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .site-header[data-layout="1"].is-down:not(:focus-within) { transform: translateY(-100%); box-shadow: none; }
  .brand-link .lg--stack img { transition: scale var(--dur-med) var(--ease-settle); }
  .site-header[data-layout="3"].is-scrolled .brand-link .lg--stack img { scale: 0.72; }

  /* Hover: cards lift, video tiles wake up */
  @media (hover: hover) {
    .path, .post, .kit__item, .message, .trait, .beat, .partners li, .carousel__track .ph, .contact-item, .faq-item { transition: transform var(--dur-fast) var(--ease-settle), box-shadow var(--dur-fast), background-size 0.35s var(--ease-settle); }
    .path:hover, .post:hover, .share:not([data-layout="2"]) .kit__item:hover, .need[data-layout="1"] .beat:hover,
    .messages-sec:not([data-layout="3"]) .message:hover, .story[data-layout="1"] .trait:hover, .faq[data-layout="2"] .faq-item:hover, .partners li:hover {
      transform: translateY(var(--lift)); box-shadow: 0 16px 34px var(--shadow-color);
    }
    .carousel__track li:hover .ph { transform: translateY(var(--lift)); }
    .ph__play { transition: scale var(--dur-fast) var(--ease-settle), background-color var(--dur-fast); }
    .ph:hover .ph__play { scale: 1.15; background: var(--color-chalk-16); }
    .kit__art img { transition: scale 0.4s var(--ease-settle); }
    .share[data-layout="3"] .kit__item:hover .kit__art img { scale: 1.07; }
    .contact[data-layout="2"] .contact-item { background: linear-gradient(var(--s-chip), var(--s-chip)) no-repeat 0 0 / 0% 100%; padding-inline: var(--space-3); }
    .contact[data-layout="2"] .contact-item:hover { background-size: 100% 100%; }
  }
  /* Share 2: tiles tilt toward the pointer (set by site.js) */
  .share[data-layout="2"] .kit__item { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s var(--ease-settle), box-shadow 0.25s; }
  .share[data-layout="2"] .kit__item:hover { box-shadow: 0 18px 36px var(--shadow-color); }

  /* FAQ: answers open and close smoothly where the browser supports it */
  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--ease-settle), content-visibility 0.4s allow-discrete; }
    .faq-item[open]::details-content { block-size: auto; }
  }

  /* Scroll-driven: textures drift, the Need rail draws, photos settle and slide */
  @supports (animation-timeline: view()) {
    [data-layouts]:not(.site-header, .hero[data-layout="2"])::before { inset: -8% 0; animation: tx-drift linear both; animation-timeline: view(); }
    .need[data-layout="3"] .beat:not(.beat--ask)::after { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--s-ink); transform-origin: top; animation: draw-down linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .need[data-layout="3"] .beat:not(.beat--ask)::before { animation: pop linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .story[data-layout="2"] .story__portrait { animation: zoom-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .story[data-layout="3"] .story__media { animation: drift-x linear both; animation-timeline: view(); }
  }
}

/* Video row progress and drag (layout 1) */
.carousel__progress { height: 3px; margin-top: var(--space-4); background: var(--s-line); border-radius: 3px; overflow: hidden; }
.carousel__progress span { display: block; height: 100%; width: 100%; background: var(--s-ink); transform-origin: left; transform: scaleX(var(--p, 0.25)); transition: transform 0.15s linear; }
.updates[data-layout="1"] .carousel__track { cursor: grab; }
.updates[data-layout="1"] .carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* ---------- The hero fills the first screen ----------
   --chrome-h is the review bar plus the header, measured by site.js (fallback below).
   Everything in the hero scales with the height left over, so the whole hero,
   button included, is on screen when the page opens. */
:root { --chrome-h: 160px; }
.hero {
  --fold: calc(100svh - var(--chrome-h));
  --hgap: clamp(8px, calc(var(--fold) * 0.024), 22px);
  --hpad: clamp(12px, calc(var(--fold) * 0.042), 56px);
  min-height: var(--fold);
  display: flex; align-items: center;
}
.hero[data-layout] { padding-block: var(--hpad); }
.hero > .container { width: 100%; }
.hero__grid { row-gap: var(--hgap); }
.hero .eyebrow { margin-bottom: var(--hgap); }
.hero h1 { font-size: min(var(--fs-display), calc(var(--fold) * 0.095)); }
.hero__lead { font-size: clamp(15px, calc(var(--fold) * 0.028), 20px); }
.you-line { margin-bottom: calc(var(--hgap) * 0.4); }
.hero__private { margin-top: calc(var(--hgap) * 0.8); }
.hero .btn-row { margin-top: calc(var(--hgap) * 1.2); }
.assurance { margin-top: var(--hgap); }
.hero__media { margin-top: 0; }

@media (min-width: 900px) {
  /* Hero 1: headline on two lines where it fits, vertical video as tall as the screen allows */
  .hero[data-layout="1"] h1 { max-width: 14ch; }
  .hero[data-layout="1"] .hero__video { height: min(640px, calc(var(--fold) - 2 * var(--hpad) - 104px)); width: auto; max-width: none; aspect-ratio: 9 / 16; }
  .hero[data-layout="1"] .hero__handle { max-width: 22rem; }
  /* Hero 3: poster headline scaled to the screen, wide video capped by height */
  .hero[data-layout="3"] h1 { font-size: min(var(--fs-poster), calc(var(--fold) * 0.12)); }
  .hero[data-layout="3"] .hero__video { width: 100%; max-height: calc(var(--fold) * 0.4); }
  .hero[data-layout="3"] .hero__media { justify-items: end; }
  .hero[data-layout="3"] .hero__media .hero__video { width: auto; height: min(calc(var(--fold) * 0.4), 360px); aspect-ratio: 16 / 9; }
}
/* Hero 2: the lead mark and headline share the height */

/* Phones: the video becomes a slim play strip, so the button stays on screen */
@media (max-width: 899px) {
  .hero[data-layout]:not([data-layout="3"]) .hero__video {
    aspect-ratio: auto; height: 60px; width: 100%; max-width: none;
    flex-direction: row; align-items: center; justify-content: flex-start;
    padding: 0 var(--space-4) 0 64px; border-radius: var(--radius-button);
  }
  .hero[data-layout]:not([data-layout="3"]) .hero__video { padding-left: 112px; }
  .hero[data-layout]:not([data-layout="3"]) .hero__video .ph__play,
  .hero[data-layout]:not([data-layout="3"]) .hero__video .media-toggle { width: 44px; height: 44px; left: 8px; right: auto; top: 50%; transform: translateY(-50%); }
  .hero[data-layout]:not([data-layout="3"]) .hero__video .media-mute { width: 44px; height: 44px; left: 56px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%); }
  .hero:not([data-layout="3"]) .hero__video.ph--media::after { background: var(--scrim-flat); }
  .hero[data-layout]:not([data-layout="3"]) .hero__video .ph__tag { display: none; }
  .hero[data-layout]:not([data-layout="3"]) .hero__video .ph__label { font-size: 0.9375rem; }
  .hero__handle { display: none; }
  .hero__lead { font-size: clamp(15px, calc(var(--fold) * 0.024), 17px); }
  .hero[data-layout="3"] h1 { font-size: min(var(--fs-poster), calc(var(--fold) * 0.068)); }
}
/* Hero 3 on tablets and narrow laptop windows: the square video stays beside the copy, as on desktop */
@media (min-width: 600px) and (max-width: 899px) {
  .hero[data-layout="3"] .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: ". media" "star media" "copy media" "body media" ". media"; grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--space-5); align-items: start; }
  .hero[data-layout="3"] .hero__star { grid-area: star; }
  .hero[data-layout="3"] .hero__copy { grid-area: copy; }
  .hero[data-layout="3"] .hero__body { grid-area: body; }
  .hero[data-layout="3"] .hero__media { grid-area: media; align-self: center; justify-items: end; margin: 0; }
  .hero[data-layout="3"] .hero__media .hero__video { width: min(100%, 460px, calc(var(--fold) - 2 * var(--hpad) - 48px)); max-width: none; height: auto; max-height: none; aspect-ratio: 1 / 1; }
  .hero[data-layout="3"] .hero__video.ph--media::after { background: none; }
}

/* Short phones: keep the essentials (the lead already says confidential and non-binding) */
@media (max-width: 899px) and (max-height: 740px) {
  .hero .assurance, .hero:not([data-layout="3"]) .hero__media { display: none; }
}

/* Review bar on laptops: keep it to one line */
@media (min-width: 1040px) and (max-width: 1239px) {
  .pb__sub { display: none; }
  .pb__controls { column-gap: var(--space-2); }
}
@media (min-width: 1040px) and (max-width: 1099px) {
  .pb__title { display: none; }
}

/* ---------- Review bar on phones and tablets: one line, options in a drop-down ---------- */
.pb__toggle { display: none; }
@media (max-width: 1039px) {
  .preview-bar { position: relative; z-index: 60; flex-wrap: nowrap; justify-content: space-between; padding-block: var(--space-1); }
  .pb__title { text-align: left; font-size: 0.75rem; line-height: 1.35; }
  .pb__toggle {
    display: inline-flex; align-items: center; flex: none; min-height: var(--tap); padding: 0 1em;
    border-radius: var(--radius-button); border: 1px solid var(--color-indigo); background: var(--color-chalk); color: var(--color-indigo);
    font-family: var(--font-body); font-weight: var(--weight-strong); font-size: 0.875rem; cursor: pointer;
  }
  .pb__toggle[aria-expanded="true"] { background: var(--color-indigo); color: var(--color-chalk); }
  .pb__controls {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4) var(--gutter) var(--space-5);
    background: var(--preview-bar-bg); border-bottom: 1px dashed var(--review-line); box-shadow: 0 12px 24px var(--shadow-color);
  }
  .preview-bar.is-open .pb__controls { display: flex; }
  .pb__group { justify-content: flex-start; }
}

/* ---------- Phones: compact review selector, scannable sections ---------- */
@media (max-width: 899px) {
  /* The layout selector is a slim pill; each number keeps a 44px-tall touch area */
  .lt { top: var(--space-2); }
  .lt__panel { height: 30px; padding-left: var(--space-2); box-shadow: 0 2px 6px var(--shadow-color); }
  .lt__label { font-size: 0.5625rem; padding-right: 2px; }
  .lt button { position: relative; width: 30px; height: 30px; }
  .lt button::before { content: ""; position: absolute; inset: -7px 0; }
  .lt button span { width: 22px; height: 22px; font-size: 0.6875rem; }
  /* The hero centres its content, so keep the selector's strip clear on short screens */
}
@media (max-width: 599px) {
  .kit__item p { font-size: 0.875rem; }
  .partners ul { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  /* Long ready-made messages open on demand; Copy text still copies the whole message */
  .post__text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
  /* Ready-made messages swipe sideways, one card at a time with the next one peeking in */
  .posts { grid-auto-flow: column; grid-auto-columns: 86%; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) var(--space-3); scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
  .posts > li { scroll-snap-align: start; }
  .share__grid > *, .share-block { min-width: 0; }
}
.post__more { display: none; align-self: flex-start; min-height: var(--tap); padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--fs-small); font-weight: var(--weight-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.post__more.is-needed { display: inline-flex; align-items: center; }
a, button, summary, [role="button"] { touch-action: manipulation; }

/* ---------- Hero 2: the Dallas footage fills the hero, the copy sits on a fade over it ----------
   The fade is made from the section's own background, so it reads Indigo in Classic and Bold, Chalk in Light. */
.hero[data-layout="2"] { isolation: isolate; }
.hero[data-layout="2"] .hero__copy, .hero[data-layout="2"] .hero__body { position: relative; z-index: 1; max-width: 40rem; }
.hero[data-layout="2"] h1 { max-width: 13ch; }
.hero[data-layout="2"] .hero__media { display: block; position: absolute; inset: 0; z-index: 0; margin: 0; }
.hero[data-layout="2"] .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  aspect-ratio: auto; padding: 0; border: 0; border-radius: 0;
}
.hero[data-layout="2"] .hero__video::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--s-bg) 94%, transparent) 0%, color-mix(in srgb, var(--s-bg) 82%, transparent) 42%, color-mix(in srgb, var(--s-bg) 18%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--s-bg) 55%, transparent) 0%, transparent 35%);
}
.hero[data-layout="2"] .hero__video .ph__label, .hero[data-layout="2"] .hero__handle { display: none; }
.hero[data-layout="2"] .hero__video .ph__tag { position: absolute; z-index: 1; right: var(--gutter); bottom: var(--space-4); }
.hero[data-layout="2"] .hero__video .media-toggle { top: auto; left: auto; right: var(--gutter); bottom: calc(var(--space-4) + 28px); transform: none; }
.hero[data-layout="2"] .hero__video .media-mute { top: var(--space-4); right: var(--gutter); bottom: auto; left: auto; transform: none; }
.hero[data-layout="2"] .hero__video .ph__media { object-position: 70% 50%; }
@media (max-width: 899px) {
  .hero[data-layout="2"] .hero__video::after { background: color-mix(in srgb, var(--s-bg) 84%, transparent); }
  .hero[data-layout="2"] .hero__video .ph__tag { display: none; }
  .hero[data-layout="2"] .hero__video .media-toggle { bottom: var(--space-3); right: var(--space-3); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero[data-layout="2"] .hero__video .ph__media { animation: zoom-settle 2.4s var(--ease-settle) backwards; }
}

/* ---------- Hero 3: the blue star mark above the headline, the video in a square on the right ---------- */
.hero__star { justify-self: start; }
.hero__star img { width: auto; height: min(60px, calc(var(--fold) * 0.08)); }
@media (min-width: 900px) {
  .hero[data-layout="3"] .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "star media" "copy media" "body media"; column-gap: var(--space-8); align-items: start; }
  .hero[data-layout="3"] .hero__star { grid-area: star; }
  .hero[data-layout="3"] .hero__media { grid-area: media; align-self: center; justify-items: end; }
  .hero[data-layout="3"] .hero__media .hero__video { width: min(100%, 560px, calc(var(--fold) - 2 * var(--hpad) - 48px)); max-width: none; height: auto; max-height: none; aspect-ratio: 1 / 1; }
  .hero[data-layout="3"] h1 { font-size: min(var(--fs-display), calc(var(--fold) * 0.085)); }
  .hero__star img { height: min(112px, calc(var(--fold) * 0.13)); }
}
/* Hero 3 keeps it short: logo, headline, the YOU line, the button and the three ticks */
.hero[data-layout="3"] .eyebrow,
.hero[data-layout="3"] .hero__more,
.hero[data-layout="3"] .hero__private,
.hero[data-layout="3"] .hero__handle,
.hero[data-layout="3"] .hero__video .ph__label { display: none; }
.hero[data-layout="3"] .you-line { margin-bottom: 0; }
@media (min-width: 900px) {
  /* Spacer rows above and below share any extra height, so the short copy sits centred beside the square video */
  .hero[data-layout="3"] .hero__grid { grid-template-areas: ". media" "star media" "copy media" "body media" ". media"; grid-template-rows: 1fr auto auto auto 1fr; }
}
/* The logo adds height above the headline, so tablets and phones get a slightly smaller headline and mark */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero[data-layout="3"] h1 { font-size: min(var(--fs-display), calc(var(--fold) * 0.068)); }
  .hero[data-layout="3"] .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: var(--space-6); }
  .hero__star img { height: min(84px, calc(var(--fold) * 0.1)); }
}
@media (max-width: 899px) {
  .hero[data-layout="3"] h1 { font-size: min(var(--fs-poster), calc(var(--fold) * 0.056)); }
  .hero__star img { height: min(50px, calc(var(--fold) * 0.064)); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero[data-layout="3"] .hero__star { animation: fade-up var(--dur-enter) var(--ease-settle) backwards; }
}


/* ---------- Section titles: each section's name is the big title, the line under it the subtitle ---------- */
.section h2.sec-title { font-size: var(--fs-title); font-weight: var(--weight-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.section .sec-sub { margin-top: var(--space-3); font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--fs-sub); line-height: 1.25; color: var(--s-ink); max-width: 40rem; }
.story[data-layout="2"] .story__head .sec-sub { margin-inline: auto; }

/* ---------- Share: the social post image sits with the ready-made messages ---------- */
.ready { display: grid; gap: var(--space-5); }
.post-image { margin: 0; background: var(--s-card); border: 1px solid var(--s-card-line); border-radius: var(--radius-md); padding: var(--space-4); display: grid; gap: var(--space-4); align-items: center; }
.post-image__art img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.post-image figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.post-image figcaption p { color: var(--s-soft); font-size: var(--fs-small); max-width: 32rem; }
.post-image .btn { padding: 0.55em 1.1em; font-size: 0.9375rem; }
/* Share 1: message cards first, the image beside its caption underneath */
.share[data-layout="1"] .post-image { order: 1; }
@media (min-width: 600px) {
  .share[data-layout="1"] .post-image,
  .share[data-layout="3"] .post-image { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
}
@media (min-width: 900px) {
  /* Share 2: the image on the left, the messages stacked beside it */
  .share[data-layout="2"] .ready { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .share[data-layout="2"] .post-image { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .share[data-layout="2"] .posts { grid-template-columns: 1fr; }
  /* Share 3: the image first as a wide card, then the messages as rows */
  .share[data-layout="3"] .post-image { grid-template-columns: 260px minmax(0, 1fr); }
  .share[data-layout="3"] .posts { grid-template-columns: 1fr; }
  .share[data-layout="3"] .post { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; column-gap: var(--space-6); align-items: start; }
  .share[data-layout="3"] .post .copy-status { grid-column: 3; }
}

/* ---------- Hero video: Mike, in his own words (vertical 9:16, no captions burned in, so it can be cropped) ---------- */
.hero__video .ph__media { object-position: 50% 20%; }
.hero__video.is-loading .media-toggle::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid transparent; border-top-color: currentColor; animation: spin 0.8s linear infinite; }
@media (min-width: 900px) {
  /* Hero 2: Mike fills the right side of the hero and fades into the background behind the copy */
  .hero[data-layout="2"] .hero__media { inset: 0 0 0 auto; width: 58%; }
  .hero[data-layout="2"] .hero__video::after {
    background:
      linear-gradient(90deg, var(--s-bg) 0%, color-mix(in srgb, var(--s-bg) 55%, transparent) 24%, transparent 50%),
      linear-gradient(0deg, color-mix(in srgb, var(--s-bg) 45%, transparent) 0%, transparent 30%);
  }
  .hero[data-layout="2"] .hero__video .ph__media { object-position: 50% 22%; }
}
@media (max-width: 899px) {
  /* Heroes 1 and 3: the slim strip opens into the whole video when someone taps play */
  .hero[data-layout] .hero__video.is-open { height: auto; width: min(100%, calc(72svh * 9 / 16)); aspect-ratio: 9 / 16; margin-inline: auto; padding: 0; border-radius: var(--radius-md); }
  .hero[data-layout] .hero__video.is-open .ph__label { display: none; }
  .hero[data-layout] .hero__video.is-open.ph--media::after { background: none; }
  .hero[data-layout] .hero__video.is-open .media-toggle { top: auto; bottom: var(--space-3); left: var(--space-3); transform: none; }
  .hero[data-layout] .hero__video.is-open .media-mute { top: auto; bottom: var(--space-3); left: calc(var(--space-3) + 52px); transform: none; }
  /* Hero 2: Mike fills the screen behind the copy, which sits low so his face stays clear */
  .hero[data-layout="2"] { align-items: flex-end; }
  .hero[data-layout="2"] .hero__video::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--s-bg) 8%, transparent) 0%, color-mix(in srgb, var(--s-bg) 35%, transparent) 26%, color-mix(in srgb, var(--s-bg) 90%, transparent) 46%, var(--s-bg) 100%);
  }
  .hero[data-layout="2"] .hero__video .ph__media { object-position: 50% 10%; }
  .hero[data-layout="2"] .hero__video .media-toggle { top: var(--space-3); bottom: auto; right: calc(var(--space-3) + 52px); left: auto; transform: none; }
  .hero[data-layout="2"] .hero__video .media-mute { top: var(--space-3); bottom: auto; right: var(--space-3); left: auto; transform: none; }
}
@media (max-width: 899px) and (max-height: 740px) {
  .hero[data-layout="2"] .hero__media { display: block; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Mike’s Story: every paragraph, in both parts, matches the size of the opening paragraph */
.story__body p, .need .beat__text p { font-size: var(--fs-lead); }

/* ---------- Family picks (Oct 28): white and cream sections are plain, with no texture ---------- */
:root[data-theme="classic"] [data-layouts][data-t1="light"], :root[data-theme="classic"] [data-layouts][data-t1="alt"],
:root[data-theme="bold"] [data-layouts][data-t2="light"], :root[data-theme="bold"] [data-layouts][data-t2="alt"],
:root[data-theme="light"] [data-layouts][data-t3="light"], :root[data-theme="light"] [data-layouts][data-t3="alt"] { --tx-o: 0 !important; --grain-o: 0 !important; }
/* FAQ 2 without the dotted background */
.faq[data-layout="2"] { --tx-o: 0; }

/* ---------- The picks are locked in: the review options stay closed until the floating button opens them ---------- */
.pb__hide { display: none; }
.donor-fab {
  position: fixed; z-index: 60; right: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.5em; min-height: var(--tap); padding: 0 1.2em;
  border: 2px solid var(--color-indigo); border-radius: var(--radius-button); background: var(--color-tangerine); color: var(--color-indigo);
  font-size: 0.9375rem; font-weight: var(--weight-strong); text-decoration: none; box-shadow: var(--shadow-card);
}
.donor-fab svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.donor-fab:hover { background: var(--color-indigo); color: var(--color-chalk); border-color: var(--color-chalk); }
.donor-fab:focus-visible { outline: 3px solid var(--color-indigo); outline-offset: 3px; }
/* Room at the bottom of the page so the floating link never covers the last line of the footer */
.site-footer { padding-bottom: calc(var(--tap) + var(--space-8)); }

/* Hero 3 (the family pick): Mike’s video shows clean, with no placeholder shade at the bottom */
.hero[data-layout="3"] .hero__video.ph--media::after { background: none; }

/* ---------- Social: solid buttons in Video updates, icons in the header, phone menu and footer (Alison, Oct 28) ---------- */
.btn--social { background: var(--s-ink); color: var(--s-bg); border-color: var(--s-ink); gap: var(--space-2); }
.btn--social svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn--social:hover { background: var(--color-tangerine); border-color: var(--color-tangerine); color: var(--color-indigo); }
.header-social { display: none; margin: 0; }
@media (min-width: 1200px) { .site-header[data-layout="2"] .header-social { display: flex; gap: var(--space-1); } }
.header-social a { width: 40px; height: 40px; }
.header-social svg { width: 20px; height: 20px; }
.mobile-social { margin-top: var(--space-4); }
.footer-social { margin-top: var(--space-3); }

/* Ready-made messages: the website stands out and is clickable (Dan, Oct 28). Indigo on Tangerine, the brand button pairing. */
.post__text .site-link { color: var(--color-indigo); background: var(--color-tangerine); font-weight: var(--weight-strong); text-decoration: underline; text-underline-offset: 2px; padding: 0 0.25em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post__text .site-link:hover { background: var(--color-indigo); color: var(--color-chalk); }
.post__text .site-link:focus-visible { outline: 3px solid var(--s-focus, var(--color-indigo)); outline-offset: 2px; }

/* ---------- Phones match desktop: the family's hero keeps its logo and shows Mike's video ---------- */
@media (max-width: 599px) {
  .hero[data-layout="3"] { align-items: stretch; }
  .hero[data-layout="3"] .hero__grid { display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
  .hero__star { align-self: flex-start; }
  .hero__star img { height: min(64px, calc(var(--fold) * 0.1)); }
  /* Both buttons on one row, so the video gets the height */
  .hero[data-layout="3"] .btn-row { flex-wrap: nowrap; gap: var(--space-2); }
  .hero[data-layout="3"] .btn-row .btn { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); justify-content: center; font-size: 0.9375rem; white-space: nowrap; }
  /* The video is a square, as on desktop, sized to the height left on the first screen */
  .hero[data-layout="3"] .hero__media { display: grid; place-items: center; flex: 1 1 auto; min-height: 190px; container-type: size; }
  .hero[data-layout="3"] .hero__media .hero__video { width: min(100cqw, 100cqh); height: auto; max-width: none; max-height: none; aspect-ratio: 1 / 1; padding: 0; border-radius: var(--radius-md); }
  .hero[data-layout="3"] .hero__video .ph__media { object-position: 50% 40%; }
  /* Paused (iPhones until tapped): a clear play button in the middle */
  .hero[data-layout="3"] .media-toggle[data-state="paused"] { top: 50%; right: auto; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); background: var(--color-tangerine); color: var(--color-indigo); border-color: var(--color-tangerine); }
  .hero[data-layout="3"] .media-toggle[data-state="paused"] svg { width: 26px; height: 26px; }
}
/* Phones and tablets: the header logo sits on the same deep-Indigo base as desktop */
@media (max-width: 899px) {
  .site-header[data-layout="2"] .site-header__inner { align-items: stretch; padding-block: 0; }
  .site-header[data-layout="2"] .site-header__inner > :not(.brand-link) { align-self: center; }
  .site-header[data-layout="2"] .brand-link { display: flex; align-items: center; margin: 0 auto 0 calc(var(--gutter) * -1); padding: var(--space-2) var(--space-4) var(--space-2) var(--gutter); background: var(--plate-bg); }
}

/* Agency credit: last item in the footer */
.footer__credit { font-size: 0.75rem; }
.footer__credit a { color: inherit; }