/*
 * A Letter to Diabetes: main stylesheet.
 *
 * Mobile is the design; the desktop composition starts at 64rem (LTD_CONFIG.desktopMin).
 * Values come from handoff docs 02 and 03 and the prototype CSS.
 * Sections: fonts · tokens · base · type · buttons · header · chapter dots · chapters (paper, 1–6) · motion states
 */

/* ---------- Fonts (web licence pending: handoff 10, item 3) ---------- */
@font-face { font-family: "Dexcom Display"; src: url(../fonts/DexcomDisplay0930-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Dexcom Display"; src: url(../fonts/DexcomDisplay0930-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Dexcom Sans"; src: url(../fonts/DexcomSans0930-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Dexcom Sans"; src: url(../fonts/DexcomSans0930-LightItalic.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Dexcom Sans"; src: url(../fonts/DexcomSans0930-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Dexcom Sans"; src: url(../fonts/DexcomSans0930-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* Placeholder handwriting for the sheet and placeholder letters only. Real letters are scans. */
@font-face { font-family: "LTD Hand"; src: url(../fonts/caveat.woff2) format("woff2"); font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	/* One "lead" size for intro and sub copy: hero sub, Listen intro, sheet body, Join subhead (brief B2). */
	--lead-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.25rem);
	--green: #137D00;          /* the one brand green */
	--menu-bg: #0B3300;        /* Menu panel: deeper than every chapter, so the reveal shows on Join too (brief B4; CD to confirm) */
	--menu-accent: #7be05a;    /* current chapter's arrow on the Menu panel */
	--green-focus: #0b4d00;    /* focus ring around the white outline */
	--ink: #1b2420;
	--sage: #5b665f;
	--blue-ink: #26377a;
	--sheet-hand: var(--ink);   /* Module 3's "Diabetes," line and caret: ink #1b2420, the Listen statement's colour (owner, Oct 16; MLR item 24 asked for grey instead of blue) */
	--haze: #e9eee8;
	--haze-2: #e3e9e4;
	--haze-deep: #d9e2da;
	--white: #fff;
	--legal-bg: #F4F4F4;
	--legal-ink: #4f5753;
	--pale: #d3d9d4;           /* Listen words before they turn to ink */
	--line: #c3ccc5;
	--rule: #d8e3ee;
	--margin: rgba(214, 110, 110, .55);
	--thread: rgba(27, 36, 32, .28);

	--font-display: "Dexcom Display", "Dexcom Sans", system-ui, sans-serif;
	--font-sans: "Dexcom Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-hand: "LTD Hand", cursive;

	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-scene: cubic-bezier(.7, 0, .2, 1);
	--ease-roll: cubic-bezier(.25, 1, .33, 1);

	--gutter: 1.25rem;
	--header-top: 1.625rem;
	--paper-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 .5rem 1rem -4px rgba(30, 45, 35, .22), 0 1.625rem 2.25rem -18px rgba(30, 45, 35, .2);

	color-scheme: light;
}
@media (min-width: 1024px) {
	:root {
		--gutter: max(4rem, calc((100vw - 94.5rem) / 2 + 4rem));   /* beyond the 26px cap (ultrawide) the content stays a centred block */
		--header-top: 2.375rem;
	}
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Large screens (staging review item 10): 1512 x ~860 is the reference design. Every size is in rem, so the
   whole layout scales with this root size: 16px up to 1512 wide (nothing changes on laptops, tablets or phones),
   then up to 26px on large monitors. Hairlines (<= 2px) and media-query breakpoints stay in px. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: clamp(16px, min(1.058vw, 1.85vh), 26px); }
body {
	margin: 0;
	background: var(--haze);
	color: var(--ink);
	font: 400 1rem/1.45 var(--font-sans);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
	position: fixed; left: .75rem; top: .75rem; z-index: 1000;
	padding: .625rem 1rem; border-radius: 1.375rem; background: var(--ink); color: #fff;
	font: 500 .875rem var(--font-sans); text-decoration: none;
	transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* Focus: .1875rem white outline plus a .3125rem deep-green ring, visible on light and on green. */
:focus-visible { outline: .1875rem solid #fff; outline-offset: 2px; box-shadow: 0 0 0 .3125rem var(--green-focus); }
/* Headings and panels focused by script (to move screen readers along) don't need the control ring. */
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

/* ---------- Type ---------- */
.eyebrow { font: 400 .7188rem/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.label { font: 500 .5938rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
/* Set as font: weight size/line-height so the shorthand never resets line-height (handoff 02). */
.h1 { font: 300 3.625rem/1 var(--font-display); letter-spacing: -.01em; text-rendering: optimizeLegibility; }
.h1__line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.h1__line > * { display: inline-block; }
.h1 em, .h2 em { font-family: var(--font-sans); font-style: italic; font-weight: 300; font-size: 1em; line-height: inherit; letter-spacing: -.02em; color: var(--green); }
.h2 { font: 300 2.375rem/1.05 var(--font-display); letter-spacing: -.01em; }
.lead { font: 400 var(--lead-size)/1.5 var(--font-sans); text-rendering: optimizeLegibility; text-wrap: balance; }
.note { font: 400 .6875rem/1.4 var(--font-sans); color: var(--sage); }
.hand { font-family: var(--font-hand); color: var(--blue-ink); }

@media (min-width: 1024px) {
	.eyebrow { font-size: .875rem; }
	.h1 { font-size: 7rem; }
	.h2 { font-size: 4rem; }
	.note { font-size: .8125rem; }
}

/* ---------- Buttons ---------- */
/* Rolling label: the visible label slides up, an aria-hidden copy rolls in. */
.roll { position: relative; display: block; min-width: 0; overflow: hidden; line-height: 1.3; white-space: nowrap; }
.roll__a, .roll__b { display: block; overflow: hidden; text-overflow: ellipsis; transition: transform .55s var(--ease-roll); }
.roll__b { position: absolute; left: 0; right: 0; top: 110%; }

.btn {
	position: relative;
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	width: 100%; height: 3.5rem; padding: 0 .5rem 0 1.5rem;
	border: 0; border-radius: 1.75rem;
	font: 500 1rem/1 var(--font-sans); text-align: left; text-decoration: none;
	transition: transform .35s var(--ease-out), translate .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .3s, background-color .3s;
	will-change: transform;
}
.btn__icon {
	flex: none; display: grid; place-items: center;
	width: 2.5rem; height: 2.5rem; border-radius: 50%;
	transition: transform .45s var(--ease-out), background-color .3s;
}
.btn__icon svg { width: 1.25rem; height: 1.25rem; transition: transform .45s var(--ease-out); }
.btn:active { transform: scale(.975); }
.btn.is-disabled { cursor: not-allowed; }   /* full colour: the Join button waits for its URL (lead, Oct 12) */

.btn--primary { background: var(--green); color: #fff; box-shadow: 0 .5rem 1.25rem -8px rgba(19, 125, 0, .6); }
.btn--primary .btn__icon { background: rgba(255, 255, 255, .18); }

.btn--secondary {
	background: rgba(255, 255, 255, .45); color: var(--ink);
	box-shadow: inset 0 0 0 1.5px rgba(27, 36, 32, .35);
	-webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem);
}
.btn--secondary .btn__icon { box-shadow: inset 0 0 0 1.5px rgba(27, 36, 32, .4); }

/* White outline on dark: the video end card. */
.btn--ghost { background: rgba(255, 255, 255, .15); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.btn--ghost .btn__icon { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }

/* White button with a green label: Join screen. */
.btn--inverse { background: #fff; color: var(--green); box-shadow: 0 .625rem 1.5rem -10px rgba(0, 0, 0, .35); }
.btn--inverse .btn__icon { background: rgba(19, 125, 0, .12); }

@media (hover: hover) {
	.btn:hover .roll__a, .btn:hover .roll__b, .pill--share:hover .roll__a, .pill--share:hover .roll__b { transform: translateY(-110%); }
	.btn:hover .btn__icon svg { transform: translateX(2px) rotate(-8deg); }
	.btn--primary:hover { filter: brightness(1.06); box-shadow: 0 .875rem 1.75rem -10px rgba(19, 125, 0, .75); }
	.btn--primary:hover .btn__icon { background: rgba(255, 255, 255, .28); }
	.btn--secondary:hover { background: rgba(255, 255, 255, .75); }
	.btn--inverse:hover { background: var(--legal-bg); }
	.btn--ghost:hover { background: rgba(255, 255, 255, .25); }
}

@media (min-width: 1024px) {
	.btn { display: inline-flex; width: auto; height: 4rem; gap: 2.25rem; padding: 0 .625rem 0 2rem; border-radius: 2rem; font-size: 1.125rem; }
	.btn__icon { width: 2.75rem; height: 2.75rem; }
}

/* ---------- Header ---------- */
.site-header {
	position: fixed; z-index: 60;
	left: var(--gutter); right: var(--gutter); top: var(--header-top);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	color: var(--ink);
	transition: color .5s var(--ease-out), opacity .4s;
}
.site-logo { display: flex; align-items: center; height: 1.875rem; color: var(--green); transition: color .5s var(--ease-out); }
.site-logo__svg { width: 7rem; height: auto; }

.site-nav { display: none; }
.site-header__tools { display: flex; align-items: center; gap: .625rem; }

.pill {
	display: inline-flex; align-items: center; gap: .5rem;
	min-height: 2.5rem; padding: .5rem 1rem;
	border: 1.5px solid currentColor; border-radius: 1.25rem; background: none;
	font: 400 .875rem/1.3 var(--font-sans); text-decoration: none; color: inherit;
	transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out), filter .3s;
}
.pill:active { transform: scale(.97); }
.pill--icon { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border-radius: 50%; }
.pill--icon svg { width: 1rem; height: 1rem; }

@media (hover: hover) {
	.pill--share:hover { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 .625rem 1.375rem -8px rgba(19, 125, 0, .7); filter: brightness(1.06); }
	.pill--icon:hover { background: rgba(27, 36, 32, .08); }
}

.motion-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.motion-toggle__icon--play, .is-paused .motion-toggle__icon--pause { display: none; }
.is-paused .motion-toggle__icon--play { display: block; }

@media (min-width: 1024px) {
	.site-logo__svg { width: 9.75rem; }
	.site-nav { display: flex; align-items: center; gap: 2.125rem; margin-left: auto; font: 400 1rem/1.3 var(--font-sans); }
	.site-nav__link { position: relative; padding: .25rem 0; text-decoration: none; }
	.site-nav__link::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
		background: currentColor; transform: scaleX(0); transform-origin: left;
		transition: transform .4s var(--ease-out);
	}
	.site-nav__link:hover::after { transform: scaleX(1); }
	.site-header__tools { margin-left: 1.25rem; }
}

/* On the green Join screen (and while the video plays) the header turns white. */
.site-header.is-on-dark, .site-header.is-on-dark .site-logo { color: #fff; }
@media (hover: hover) {
	.site-header.is-on-dark .pill--share:hover { background: #fff; border-color: #fff; color: var(--green); box-shadow: 0 .625rem 1.375rem -8px rgba(0, 0, 0, .35); filter: none; }
	.site-header.is-on-dark .pill--icon:hover { background: rgba(255, 255, 255, .14); }
}

/* ---------- Menu (phones; handoff 02 and 04, pending lead/CD approval) ---------- */
/* A deep green panel revealed as a circle from the Menu button; the header stays on top in white. */
.site-menu {
	position: fixed; z-index: 58; inset: 0;
	display: flex; flex-direction: column;
	padding: calc(var(--header-top) + 4.875rem) 1.5rem max(1.75rem, env(safe-area-inset-bottom));
	background: var(--menu-bg); color: #fff;
	visibility: hidden; pointer-events: none;
	clip-path: circle(0px at var(--mx, 20.625rem) var(--my, 2.75rem));
	transition: clip-path .45s var(--ease-scene), visibility 0s linear .45s;
}
.site-menu.is-on {
	visibility: visible; pointer-events: auto;
	clip-path: circle(var(--mr, 75rem) at var(--mx, 20.625rem) var(--my, 2.75rem));
	transition: clip-path .6s var(--ease-scene), visibility 0s;
}
.site-menu__list { margin: 0; padding: 0; list-style: none; }
.site-menu__list li { overflow: hidden; border-top: 1px solid rgba(255, 255, 255, .22); }
.site-menu__list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.site-menu__link {
	display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2px;
	font: 300 2.125rem/1.1 var(--font-sans); letter-spacing: -.02em; color: #fff; text-decoration: none;
	transform: translateY(105%); transition: transform .45s var(--ease-out);
}
.site-menu.is-on .site-menu__link { transform: none; transition: transform .8s var(--ease-out) calc(.18s + var(--i, 0) * .07s); }
.site-menu__link svg { flex: none; width: 1.375rem; height: 1.375rem; opacity: .7; transition: transform .4s var(--ease-out), opacity .3s; }
.site-menu__link:hover svg, .site-menu__link:focus-visible svg { transform: translateX(.3125rem); opacity: 1; }
/* The chapter you're on: italic, solid arrow. */
.site-menu__link[aria-current] { font-style: italic; }
.site-menu__link[aria-current] svg { opacity: 1; stroke-width: 2.4; color: var(--menu-accent); }
/* A 1px lighter edge that grows with the circle (the clip would cut a border on the panel itself). */
.site-menu-ring {
	position: fixed; z-index: 58; left: var(--mx, 20.625rem); top: var(--my, 2.75rem);
	width: calc(var(--mr, 75rem) * 2); height: calc(var(--mr, 75rem) * 2);
	margin: calc(var(--mr, 75rem) * -1) 0 0 calc(var(--mr, 75rem) * -1);
	border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; pointer-events: none;
	visibility: hidden; transform: scale(0); transition: transform .45s var(--ease-scene), visibility 0s linear .45s;
}
.is-menu-open .site-menu-ring { visibility: visible; }
.site-menu.is-on + .site-menu-ring { transform: scale(1); transition: transform .6s var(--ease-scene), visibility 0s; }
.site-menu :focus-visible { outline: .1875rem solid #fff; outline-offset: .1875rem; box-shadow: none; }

.site-menu__foot {
	display: flex; flex-direction: column; gap: 1.125rem; margin-top: auto;
	opacity: 0; transform: translateY(.875rem); transition: opacity .25s, transform .25s;
}
.site-menu.is-on .site-menu__foot { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) .45s, transform .7s var(--ease-out) .45s; }
/* On close, the content hides at once while the circle closes. */
.site-menu:not(.is-on) .site-menu__nav, .site-menu:not(.is-on) .site-menu__foot { opacity: 0; transition: none; }

.site-menu__share {
	display: flex; align-items: center; justify-content: space-between; height: 3.5rem; padding: 0 .5rem 0 1.5rem;
	border-radius: 1.75rem; background: #fff; color: var(--green); font: 500 1rem/1 var(--font-sans); text-decoration: none;
}
.site-menu__share-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(19, 125, 0, .12); }
.site-menu__share-icon svg { width: 1.25rem; height: 1.25rem; }
.site-menu__cookies {
	align-self: flex-start; min-height: 2.75rem; padding: .375rem 2px; border: 0; background: none;
	color: #fff; font: 400 .875rem/1.3 var(--font-sans); text-decoration: underline; text-underline-offset: .1875rem; cursor: pointer;
}
.site-menu__cookies:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-menu__pause {
	display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; padding: .375rem 2px;
	border: 0; background: none; color: #fff; font: 400 .9375rem/1.3 var(--font-sans); text-align: left;
}
.site-menu__pause i { position: relative; flex: none; width: 2.75rem; height: 1.625rem; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: .8125rem; transition: background-color .3s; }
.site-menu__pause i::after {
	content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.0625rem; height: 1.0625rem; border-radius: 50%;
	background: #fff; transition: transform .35s var(--ease-out), background-color .3s;
}
.site-menu__pause[aria-checked="true"] i { background: #fff; }
.site-menu__pause[aria-checked="true"] i::after { transform: translateX(1.125rem); background: var(--menu-bg); }

/* While the menu is open: the header sits on the green in white, the dots step aside, nothing scrolls. */
.is-menu-open .site-header, .is-menu-open .site-logo { color: #fff; }
.is-menu-open .chapter-dots { opacity: 0; pointer-events: none; }
.is-menu-open, .is-menu-open body { overflow: hidden; }

/* Browsers without clip-path circle(): fade and a .75rem slide. */
@supports not (clip-path: circle(0px at 0 0)) {
	.site-menu-ring { display: none; }
	.site-menu { clip-path: none; opacity: 0; transform: translateY(-12px); transition: opacity .35s, transform .35s, visibility 0s linear .35s; }
	.site-menu.is-on { opacity: 1; transform: none; transition: opacity .35s, transform .35s, visibility 0s; }
}
/* Reduced motion: a 250ms cross-fade, no reveal or stagger. */
@media (prefers-reduced-motion: reduce) {
	.site-menu-ring { display: none; }
	.site-menu { clip-path: none !important; opacity: 0; transition: opacity .25s linear, visibility 0s linear .25s !important; }
	.site-menu.is-on { opacity: 1; transition: opacity .25s linear, visibility 0s !important; }
	.site-menu__link, .site-menu__foot { transform: none !important; opacity: 1; transition: none !important; }
}

/* Phones: Menu replaces the separate pause button in the header. Desktop: nav links, no Menu. */
.site-header__tools .motion-toggle { display: none; }
.site-menu-toggle { min-height: 2.75rem; }   /* 2.75rem touch target (handoff 08, QA N10) */
html:not(.js) .site-menu-toggle { display: none; }
@media (min-width: 1024px) {
	.site-menu-toggle, .site-menu { display: none; }
	.site-header__tools .motion-toggle { display: inline-flex; }
}

/* ---------- Chapter dots ---------- */
/* Chapter dots (staging review item 7). Above the page, below every dialog (z 60). Desktop: a way to jump, 1.75rem
   from the edge, with the chapter name on hover/focus. Phones: a quiet progress cue only (no tap target),
   smaller, fading out after a second without scrolling (site.js). Hidden while a dialog, the menu or the film is open. */
.chapter-dots {
	position: fixed; z-index: 60; transition: opacity .4s; right: .25rem; top: 50%; transform: translateY(-50%);
	display: flex; flex-direction: column; align-items: center;
}
/* The visible dot is .4375rem; the link is a 1.5rem hit area around it (handoff 08, WCAG 2.2 target size). */
.chapter-dots__dot { position: relative; display: grid; place-items: center; width: 1.5rem; min-height: 1.5rem; }
.chapter-dots__dot > span:first-child {
	display: block; width: .4375rem; height: .4375rem; border-radius: .25rem;
	/* A light ring keeps inactive dots visible on the photo as well as on the haze. */
	background: rgba(27, 36, 32, .42); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
	transition: height .5s var(--ease-out), background-color .4s;
}
.chapter-dots__dot[aria-current] > span:first-child { height: 1.625rem; background: var(--green); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.chapter-dots.is-on-dark .chapter-dots__dot > span:first-child { background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(11, 51, 0, .25); }
.chapter-dots.is-on-dark .chapter-dots__dot[aria-current] > span:first-child { background: #fff; }
.chapter-dots__label {
	position: absolute; right: calc(100% + .375rem); top: 50%; transform: translate(.25rem, -50%);
	padding: .375rem .6875rem; border-radius: 62.4375rem; background: var(--ink); color: #fff;
	font: 500 .8125rem/1 var(--font-sans); white-space: nowrap; pointer-events: none;
	opacity: 0; transition: opacity .2s, transform .2s;
}
.chapter-dots.is-on-dark .chapter-dots__label { background: #fff; color: var(--ink); }
.chapter-dots__dot:hover .chapter-dots__label, .chapter-dots__dot:focus-visible .chapter-dots__label { opacity: 1; transform: translate(0, -50%); }
.is-amb-open .chapter-dots { opacity: 0; pointer-events: none; }
@media (max-width: 1023px) {
	.chapter-dots { pointer-events: none; transition: opacity .6s; }
	.chapter-dots__dot { width: .875rem; min-height: .875rem; }
	.chapter-dots__dot > span:first-child { width: .3125rem; height: .3125rem; }
	.chapter-dots__dot[aria-current] > span:first-child { height: 1.125rem; }
	.chapter-dots__label { display: none; }
	.chapter-dots.is-idle { opacity: 0; }
}
@media (min-width: 1024px) { .chapter-dots { right: 28px; } }
@media (prefers-reduced-motion: reduce) { .chapter-dots__label { transition: opacity .2s; transform: translate(0, -50%); } }

/* ---------- Chapters (normal-scroll layout; the director adds .js-director in build step 3) ---------- */
/* Each chapter is at least one screen tall and lays out in flow, so text can zoom to 200% and the page
   still reads top to bottom without JavaScript (handoff 08). */
.chapter {
	position: relative;
	display: flex; flex-direction: column;
	min-height: 100vh; min-height: 100svh;
	overflow: hidden;
	padding: 7rem var(--gutter) 1.625rem;
}
.chapter__cta { position: relative; margin-top: auto; padding-top: 2.5rem; }

/* Haze: soft vertical gradient with a diagonal light streak. */
.haze {
	background:
		linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 46%, transparent 58%),
		linear-gradient(180deg, var(--haze) 0%, var(--haze-deep) 100%);
}

/* Floating blurred papers behind content. */
.floaters { position: absolute; inset: 0; pointer-events: none; }
.floater {
	position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1 / 1.3;
	transform: rotate(var(--r));
	background: #fff; opacity: .7; filter: blur(2px);
	box-shadow: 0 .5rem 1.25rem -8px rgba(30, 60, 35, .2);
}
@media (min-width: 1024px) {
	.floater { left: var(--dx); top: var(--dy); width: var(--dw); transform: rotate(var(--dr)); }
}

/* ---------- Paper, thread, eyelet ---------- */
.paper { position: relative; background: #fff; border-radius: .375rem; box-shadow: var(--paper-shadow); }
.paper--ruled { background-image: repeating-linear-gradient(transparent 0 1.4375rem, var(--rule) 1.4375rem 1.5rem); }
.paper--ruled::before { content: ""; position: absolute; left: 1.875rem; top: 0; bottom: 0; width: 1px; background: var(--margin); }
.thread { position: absolute; left: 50%; bottom: 100%; width: 1px; height: 87.5rem; background: var(--thread); }
.eyelet {
	position: absolute; left: 50%; top: .4375rem; width: .4375rem; height: .4375rem; margin-left: -3.5px;
	border-radius: 50%; background: #e6ebe6; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25);
}

/* ---------- 1 · Hero ---------- */
.hero { justify-content: space-between; background: var(--haze); }
.hero__bg {
	/* 26.875rem tall from 15.625rem (handoff 02), but never under the buttons on short phones (QA S8):
	   250 top + 26 bottom + 124 for the two buttons + 14 air = 414. */
	position: absolute; left: -4%; right: -4%; top: 15.625rem;
	height: min(26.875rem, calc(100vh - 25.875rem)); height: min(26.875rem, calc(100svh - 25.875rem));
	background: url(../img/chair.jpg) 49% 100% / auto 100% no-repeat;
	background-image: image-set(url(../img/chair.webp) type("image/webp"), url(../img/chair.jpg) type("image/jpeg"));
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 74%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 74%, transparent 100%);
}
.hero__copy, .hero__ctas { position: relative; }
.hero .h1 { margin-top: .875rem; font-family: var(--font-sans); letter-spacing: -.02em; }   /* both lines in Dexcom Sans (Oct 28): no Display in the hero */
.hero .lead { max-width: 18.75rem; margin-top: 1.375rem; }
.hero__ctas { display: grid; gap: .75rem; margin-top: auto; padding-top: 2.5rem; }
.hero .btn--secondary { background: rgba(255, 255, 255, .64); }   /* over the chair seat on phones: a touch more solid */
@media (hover: hover) { .hero .btn--secondary:hover { background: rgba(255, 255, 255, .8); } }

@media (min-width: 1024px) {
	.hero { display: block; padding-top: 11rem; }
	.hero__bg {
		inset: -4%; height: auto;
		-webkit-mask-image: none; mask-image: none;
		background: url(../img/chair.jpg) 50% 100% / cover no-repeat #d9e2dc;
		background-image: image-set(url(../img/chair.webp) type("image/webp"), url(../img/chair.jpg) type("image/jpeg"));
	}
	.hero__bg::after {
		content: ""; position: absolute; inset: 0; opacity: var(--wash, 1);   /* --wash: the page turn dims it (director.js) */
		background:
			linear-gradient(90deg, rgba(233, 238, 232, .95) 0%, rgba(233, 238, 232, .82) 30%, rgba(233, 238, 232, 0) 58%),
			linear-gradient(180deg, rgba(233, 238, 232, .5), rgba(233, 238, 232, 0) 25%);
	}
	.hero__copy { width: 37.5rem; }
	/* Lifted text block (staging review item 4, board "HeroSpaced"): at 1311x760 the eyebrow sits at ~176,
	   the H1 at ~204, the one-line subhead at ~454 and the CTAs at ~528. */
	.hero .h1 { margin-top: .625rem; }
	.hero .lead { max-width: 35rem; margin-top: 1.625rem; text-wrap: wrap; }
	.hero__ctas { display: flex; gap: 1rem; margin-top: 2.75rem; padding-top: 0; }
}

/* Letters hanging in the air (master brief Part 4, boards "Hero A"). Real letters on threads in front of the
   photo: phones 2 (upper right, lower left, short threads), desktop 3 (threads to the top edge). A slow drift,
   none with reduced motion, frozen by Pause motion. Hidden while letters are closed (the letter of the day
   takes that corner). Positions keep clear of the headline, the buttons and the chair. */
/* Hero scroll cues, desktop only (review item 17, Oct 14; mock at 1280x800, so sizes are shares of the width in
   --hu, 1vw capped at the large-screen root size). They show 2.5 s after the hero entrance (site.js adds .is-on)
   and leave on the first wheel, key or touch. B: a sliver of the white Listen page rises from the bottom edge and
   bobs; A: "Scroll" and a thread with a white pulse, above it. Never over the headline or the buttons. */
.hero-cues { display: none; }
@media (min-width: 1024px) {
	.hero-cues { --hu: min(1vw, 1.5356rem); display: block; position: absolute; z-index: 2; inset: 0; pointer-events: none; transition: opacity .3s; }
	.hero-peek {
		position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--hu) * 3.8);
		border-radius: calc(var(--hu) * 1.4) calc(var(--hu) * 1.4) 0 0; background: #fff;
		box-shadow: 0 calc(var(--hu) * -.5) calc(var(--hu) * 1.8) rgba(20, 40, 20, .16);
		transform: translateY(110%); transition: transform .5s cubic-bezier(.7, 0, .2, 1);
	}
	.hero-cues.is-on .hero-peek { transform: translateY(0); transition-duration: 1s; animation: ltd-peek-bob 3.4s ease-in-out 1s infinite; }
	.hero-cue {
		position: absolute; left: 50%; bottom: calc(var(--hu) * 7.2); transform: translateX(-50%);   /* clears the bobbing edge */
		display: flex; flex-direction: column; align-items: center; gap: calc(var(--hu) * .7);
		opacity: 0; transition: opacity .4s;
	}
	.hero-cues.is-on .hero-cue { opacity: 1; transition-duration: .9s; }
	.hero-cue__label {
		font: 500 calc(var(--hu) * .95)/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase;
		color: #fff; text-shadow: 0 0 calc(var(--hu) * .8) rgba(0, 0, 0, .45);
	}
	.hero-cue__thread { position: relative; width: 1px; height: calc(var(--hu) * 5.2); overflow: hidden; background: rgba(255, 255, 255, .4); }
	.hero-cue__thread::after {
		content: ""; position: absolute; left: 0; top: -45%; width: 100%; height: 45%;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
		animation: ltd-thread-pulse 2.6s cubic-bezier(.7, 0, .2, 1) infinite;
	}
	.is-form-open .hero-cues { opacity: 0; }
	/* Pause motion: no pulse, no bob, and the peek fades instead of sliding. */
	.is-paused .hero-cue__thread::after { animation: none; top: 0; height: 100%; opacity: .5; }
	.is-paused .hero-peek { transform: none; opacity: 0; transition: opacity .6s; animation: none; }
	.is-paused .hero-cues.is-on .hero-peek { opacity: 1; animation: none; }
}
/* Short screens (the mock is 800 tall): a shorter thread, lower, so the cue stays clear of the buttons. */
@media (min-width: 1024px) and (max-height: 760px) {
	.hero-cue { bottom: calc(var(--hu) * 4.4 + 1.2svh); }
	.hero-cue__thread { height: min(calc(var(--hu) * 5.2), 6svh); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	.hero-cue__thread::after { animation: none !important; top: 0; height: 100%; opacity: .5; }
	.hero-peek { transform: none; opacity: 0; transition: opacity .6s !important; }
	.hero-cues.is-on .hero-peek { opacity: 1; animation: none !important; }
	.hero-cue, .hero-cues.is-on .hero-cue { transition: opacity .6s !important; }
}
@keyframes ltd-peek-bob { 50% { transform: translateY(calc(var(--hu) * -.5)); } }
@keyframes ltd-thread-pulse { 0% { top: -45%; } 70%, 100% { top: 100%; } }

.hero__air { position: absolute; z-index: 1; left: 0; right: 0; top: 15.625rem; height: min(26.875rem, calc(100svh - 25.875rem)); pointer-events: none; }
.is-closed .hero__air { display: none; }
@media (max-width: 1023px) and (max-height: 640px) { .hero__air { display: none; } }   /* e.g. 320x568: they would cover the buttons */
.air-card {
	position: absolute; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; pointer-events: auto;
	width: var(--w, 10rem); -webkit-tap-highlight-color: transparent;
}
.air-card::after { content: ""; position: absolute; inset: -12px; }   /* hit area .75rem larger on every side */
.air-card:focus-visible { outline: none; }
.air-card:focus-visible .air-card__paper, .air-card:focus-visible .air-card__print { outline: .1875rem solid var(--green); outline-offset: .25rem; }
.air-card__sway {
	position: relative; display: block; transform: rotate(var(--r, 0deg)); transform-origin: 50% -40px;
	animation: ltd-air var(--dur, 10s) var(--delay, 0s) ease-in-out infinite alternate;
}
@keyframes ltd-air {
	from { transform: translateY(-6px) rotate(calc(var(--r, 0deg) - .75deg)); }
	to { transform: translateY(.375rem) rotate(calc(var(--r, 0deg) + .75deg)); }
}
.is-paused .air-card__sway { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .air-card__sway { animation: none; } }
.air-card__thread {
	position: absolute; left: 50%; bottom: 100%; width: 1px; height: var(--air-thread, 4.125rem); margin-left: -.5px;
	/* Soft white, fading in at the top; a faint dark edge so it reads on the light haze too. Never tinted. */
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 40%);
	box-shadow: 0 0 2px rgba(20, 30, 25, .35);
}
.air-card__paper, .air-card__print { display: block; box-shadow: 0 2px .25rem rgba(20, 30, 25, .2), 0 1.125rem 2.125rem -14px rgba(15, 22, 18, .5); transition: transform .3s var(--ease-out); }
.air-card:hover .air-card__paper, .air-card:hover .air-card__print { transform: translateY(-3px); }
.air-card__paper {
	position: relative; padding: .875rem .75rem .625rem 1.875rem;
	background: #FBFAF6 repeating-linear-gradient(to bottom, transparent 0 1.3125rem, rgba(110, 140, 120, .13) 1.3125rem 1.375rem) 0 .375rem;
}
.air-card__paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.25rem; width: 1px; background: rgba(200, 95, 95, .38); }
.air-card__text {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
	font: 300 italic .9375rem/1.375rem var(--font-sans); color: #23281f;
}
.air-card__by { display: block; margin-top: .375rem; overflow: hidden; font: 400 .6562rem/1.3 var(--font-sans); color: #5b665f; white-space: nowrap; text-overflow: ellipsis; }
.air-card__by-long { display: none; }
@media (min-width: 1024px) { .air-card__by-long { display: inline; } .air-card__by-short { display: none; } }
.air-card__print { position: relative; padding: .375rem .375rem 0; background: #fff; }
.air-card__print::before {
	content: ""; position: absolute; z-index: 1; left: 50%; top: -9px; width: 58%; max-width: 4rem; height: 1.125rem; margin-left: -29%;
	background: rgba(236, 226, 190, .82); transform: rotate(-4deg);
}
.air-card__print img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
.air-card__print .air-card__by { margin: 0; padding: .375rem 2px .5rem; color: #1b2420; }
/* Phones: one paper upper right, one print lower left; short threads. */
/* The hero sub copy ends about 4.875rem into this box on phones, so the cards start below it. */
.air-card--1 { --w: 9.875rem; --r: -3deg; right: 2.75rem; top: 6rem; }   /* 1rem+ clear of the chapter dots */
.air-card--2 { --w: 7rem; --r: -6deg; left: .5rem; top: 9.75rem; }
@media (max-height: 740px) {   /* short phones: smaller, so the buttons stay clear */
	.air-card--1 { --w: 7.375rem; top: 6.125rem; }
	.air-card--1 .air-card__text { -webkit-line-clamp: 3; }
	.air-card--2 { --w: 5.375rem; top: 6rem; }
}
.air-card--3 { display: none; }
@media (min-width: 1024px) {
	/* One cluster on the right (board "HeroSpaced", staging check Oct 13): three cards of the same width, level with
	   the headline and CTAs (about y250-570 at 1311x760), 5.125rem from the edge (1rem+ clear of the chapter dots).
	   The print overlaps card 1's right edge by ~1.75rem; card 3 overlaps the print's lower-right corner by ~1.5625rem
	   across, never its caption (bottom left). Later cards on top; mixed tilts; threads start below the
	   header band (gallery.js). */
	.hero__air { inset: 0; height: auto; --air-w: clamp(9.375rem, 13.6vw, 13.125rem); --air-r: calc(var(--gutter) + 1.125rem); --air-top: max(33%, 11.875rem); }
	.air-card { --w: var(--air-w); width: var(--air-w); }
	/* Offsets a little under the visible overlaps: the tilts add the rest (measured ~1.75rem and ~1.5625rem). */
	.air-card--1 { --r: -4deg; z-index: 1; left: auto; right: calc(var(--air-r) + 2 * var(--air-w) - 1.8125rem - 2px); top: var(--air-top); }
	.air-card--2 { --r: 3deg; z-index: 2; left: auto; right: calc(var(--air-r) + var(--air-w) - 1.8125rem); top: calc(var(--air-top) + 1.625rem); }
	.air-card--3 { --r: -3deg; z-index: 3; display: block; left: auto; right: var(--air-r); top: calc(var(--air-top) + 1.625rem + (var(--air-w) * 1.05 + 2.5rem) * .55); }
	.air-card__paper { padding: 1rem .875rem .6875rem 2.125rem; background-size: auto; background-image: repeating-linear-gradient(to bottom, transparent 0 1.4375rem, rgba(110, 140, 120, .13) 1.4375rem 1.5rem); }
	.air-card__paper::before { left: 1.5rem; }
	.air-card__text { font-size: .9688rem; line-height: 1.5rem; }
	.air-card__by { font-size: .7188rem; }
	.air-card__print { padding: .5625rem .5625rem 0; }
	.air-card__print::before { max-width: 5.25rem; height: 1.625rem; top: -.8125rem; }
	.air-card__print img { aspect-ratio: 1 / 1.05; }
	/* A caption that doesn't fit its card switches to the short form (gallery.js), never an ellipsis. */
	.air-card.is-short-by .air-card__by-long { display: none; }
	.air-card.is-short-by .air-card__by-short { display: inline; }
}
@media (min-width: 1024px) and (max-width: 1099px) { .hero__air { --air-r: 74px; } }
/* Three cards need about 80rem across to keep 10rem+ clear of the headline. Narrower desktops, and screens
   under 35rem tall: two cards (the print overlapping the paper). */
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 1024px) and (max-height: 559px) {
	.hero__air { --air-w: clamp(7.5rem, 12vw, 13.125rem); }
	.air-card--3 { display: none; }
	.air-card--1 { right: calc(var(--air-r) + var(--air-w) - 2px); }
	.air-card--2 { right: var(--air-r); }
}

/* Hero lead letter (review item 22): always in front and about 1.15x the other cards. Desktop: the middle slot,
   growing leftward over card 1's right side (never its caption, bottom left); card 3 hangs a little lower so the
   lead's lower edge stays off its caption. Phones: a printed lead takes the lower-left print slot, a typed lead
   the upper-right paper slot (the other card swaps to the print slot). */
.air-card--lead { z-index: 4; }
@media (max-width: 1023px) {
	.air-card--lead { --w: 9rem; }
	.has-lead-paper .air-card--lead { --w: 10.75rem; --r: -3deg; left: auto; right: 2.75rem; top: 5.5rem; }
	.has-lead-paper .air-card--1 { --w: 7rem; --r: -6deg; right: auto; left: .5rem; top: 9.75rem; }
}
@media (max-width: 1023px) and (max-height: 740px) {
	.air-card--lead { --w: 6.75rem; }
	.has-lead-paper .air-card--lead { --w: 8.25rem; top: 5.75rem; }
	.has-lead-paper .air-card--1 { --w: 5.375rem; top: 6rem; }
}
@media (min-width: 1024px) {
	.air-card--lead { --w: calc(var(--air-w) * 1.15); width: var(--w); top: calc(var(--air-top) + .75rem); }
	.has-lead .air-card--3 { top: calc(var(--air-top) + .75rem + (var(--air-w) * 1.15 * 1.05 + 2.5rem) * .66); }
	.has-lead .air-card--1 { right: calc(var(--air-r) + 2.12 * var(--air-w) - 1.8125rem - 2px); }   /* room for the wider lead */
}
@media (min-width: 1024px) and (max-width: 1279px), (min-width: 1024px) and (max-height: 559px) {
	.has-lead .air-card--1 { right: calc(var(--air-r) + 1.15 * var(--air-w) - 2px); }
}

/* Open / closed hero (QA S6). Closed variants show under .is-closed (html when the page notices, body
   when the server says so); open variants and every "Share your story" hide. */
.hero__sub--closed, .hero__ctas--closed { display: none; }
.is-closed .hero__sub--open, .is-closed .hero__ctas--open { display: none; }
.is-closed .hero__sub--closed { display: block; }
.is-closed .hero__ctas--closed { display: grid; }
.is-closed [data-ltd-share], .is-closed [data-ltd-menu-share], .is-closed [data-ltd-amb-share],
.is-closed .listen__cta, .is-closed .sheet__cta { display: none; }
@media (min-width: 1024px) {
	.is-closed .hero__ctas--closed { display: flex; }
}

/* Letter of the day (letters closed): one compact paper card under the subhead. */
.lotd {
	position: relative; max-width: 20rem; margin-top: 1.25rem; padding: .75rem .875rem .75rem;
	border-radius: .1875rem; background: #fff; box-shadow: var(--paper-shadow); transform: rotate(-.8deg);
}
.lotd__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.lotd__label { font: 500 .5938rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.lotd__next {
	display: inline-flex; align-items: center; gap: .375rem; min-height: 2rem; margin: -6px -6px -6px auto; padding: 0 .5rem;
	border: 0; border-radius: 1rem; background: none; color: var(--ink); font: 500 .7812rem/1 var(--font-sans);
}
.lotd__next svg { width: .875rem; height: .875rem; }
.lotd__open { display: block; width: 100%; margin-top: .375rem; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: #2a332e; }
.lotd__text {
	display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
	font: 400 .875rem/1.45 var(--font-sans);
}
.lotd__by { display: block; margin-top: .375rem; font: 400 .6875rem/1.35 var(--font-sans); color: var(--sage); }
@media (hover: hover) {
	.lotd__next:hover { background: rgba(27, 36, 32, .06); }
	.lotd__open:hover .lotd__text { text-decoration: underline; text-underline-offset: .1875rem; }
}
@media (min-width: 1024px) {
	/* Top right of the hero, over the photo wall, clear of the copy column and the buttons (QA S7). */
	.lotd {
		position: absolute; top: 11rem; right: var(--gutter); z-index: 1;
		width: min(25rem, calc(100vw - 47rem)); max-width: none; margin: 0; padding: 1rem 1.125rem .875rem;
	}
	.lotd__text { font-size: 1rem; }
	.lotd__by { font-size: .75rem; }
}

/* ---------- 2 · Listen (white, type only) ---------- */
.listen { padding-top: 6.5rem; background: #fff; }
.listen__copy { flex: 1; display: flex; flex-direction: column; padding: 0 .875rem 0 .25rem; }   /* right: clear of the chapter dots (QA N3) */
.listen__para { font: 400 var(--lead-size)/1.5 var(--font-sans); color: var(--sage); text-wrap: pretty; }
.listen__statement { margin-top: 2.75rem; font: 300 2.875rem/1.06 var(--font-display); letter-spacing: -.005em; color: var(--ink); }
.listen__cta { margin: auto -.875rem 0 -.25rem; padding-top: 2.5rem; }   /* phones: at the bottom and full gutter width, like every other chapter's button (owner, Oct 14) */
/* Copy V3: the whole lead line in italic (Dexcom Sans Light Italic), at the statement size. */
.listen__statement--italic { font-family: var(--font-sans); font-style: italic; font-weight: 300; letter-spacing: -.01em; }
.listen__statement em { font-family: var(--font-sans); font-style: italic; font-weight: 300; font-size: 1em; line-height: inherit; color: var(--green); }

@media (min-width: 1024px) {
	.listen { padding-top: 11rem; padding-bottom: 2.75rem; }
	/* Paragraph column 17.5rem at 1024 growing to 20rem from 1280 (lead size text sits in 6 lines there, brief B2),
	   then a wide gap so the two blocks read separately (about 6.25rem at 1280, 7.1875rem at 1440, 7.5rem from 1500 up). */
	/* Review 13c (Oct 14): a smaller gap so the statement starts further left and fits in four lines. */
	.listen__copy {
		--stmt: clamp(3rem, 5.7vw, 6rem);
		flex: none; display: grid; grid-template-columns: clamp(17.5rem, 25vw, 20rem) minmax(0, 1fr); grid-template-rows: auto 1fr;
		column-gap: clamp(2.5rem, 4vw, 4rem); align-items: start; padding: 0;
	}
	.listen__para { grid-area: 1 / 1; }
	.listen__statement { grid-area: 1 / 2 / 3 / 3; }
	.listen__para { margin-top: .375rem; }
	/* 5.25rem at the 1280 design width (6.56vw), 3.5rem minimum, 7rem maximum. */
	/* Desktop: the last word stays with "whole story." so the ending reads as one line. Phones wrap freely. */
	.listen__tail { white-space: nowrap; }
	/* Measure in em so the lines break the same way at every width (four lines, as at 1280). */
	/* Balanced lines, so keeping the ending together never strands a short line above it. */
	/* Copy V3 lead line (13c): about 13% smaller than before (86px at 1512), four lines. */
	/* text-wrap: pretty (not balance) so the lines break at the phrases: "This is about everything / you’ve wanted to
	   say, / but haven’t found / the words." (balance evened them out to "you’ve wanted to / say, but haven’t"). */
	.listen__statement { max-width: 10.4em; margin-top: 0; font-size: var(--stmt); line-height: 1.05; text-wrap: pretty; }
	/* Under the paragraph, its bottom edge on the statement's last baseline: the line box ends about .155em
	   below the baseline at this font and line height. */
	.listen__cta { grid-area: 2 / 1; align-self: end; margin: 0 0 calc(var(--stmt) * .155); }
}

/* ---------- 3 · The sheet ---------- */
.sheet { padding: 9.375rem 1.125rem 1.5rem; }
.sheet__paper { flex: 1; display: flex; flex-direction: column; padding: 1.625rem 1.5rem 1.25rem 2.625rem; }
.sheet__hand { color: var(--sheet-hand); min-height: 1.2em; margin: .625rem 0 1.125rem; font-size: 2.125rem; line-height: 1.1; }
.sheet__body p { font: 400 var(--lead-size)/1.5rem var(--font-sans); color: #26302b; }   /* line height = the ruling */
.sheet__body p + p { margin-top: 1.5rem; }
.sheet__cta { margin-top: auto; padding-top: 1.5rem; text-align: center; }
.sheet__cta .note { margin-top: .75rem; }
/* Share, then "Download a letter template" (review item 19): stacked full width on phones, side by side on desktop;
   the review note under both. */
.sheet__buttons { display: grid; gap: .75rem; }
/* Short phones (375x667 and the like): tighter, so Share, the template button and the note all fit on the paper. */
@media (max-width: 1023px) and (max-height: 760px) {
	.sheet { padding-top: 6.25rem; }
	.sheet__paper { padding-top: 1.25rem; padding-bottom: 1rem; }
	.sheet__hand { margin: .375rem 0 .75rem; font-size: 1.875rem; }
	.sheet__cta { padding-top: 1rem; }
	.sheet__buttons { gap: .5rem; }
	.sheet__cta .note { margin-top: .5rem; }
}
.btn--outline {
	justify-content: center; gap: .625rem; padding: 0 1.5rem;
	background: transparent; color: var(--green); box-shadow: inset 0 0 0 1.5px var(--green);
}
.btn--outline .btn__glyph { display: grid; place-items: center; flex: none; }
.btn--outline .btn__glyph svg { width: 1.125rem; height: 1.125rem; transition: transform .45s var(--ease-out); }
.btn--outline .roll { flex: none; }
.btn--outline:focus-visible { outline: .1875rem solid #fff; outline-offset: 2px; box-shadow: inset 0 0 0 1.5px var(--green), 0 0 0 .3125rem var(--green-focus); }
@media (hover: hover) {
	.btn--outline:hover { background: rgba(19, 125, 0, .08); }
	.btn--outline:hover .roll__a, .btn--outline:hover .roll__b { transform: translateY(-110%); }
	.btn--outline:hover .btn__glyph svg { transform: translateY(2px); }
}
.sheet__sizes { display: flex; justify-content: center; gap: 1.25rem; margin-top: .75rem; font: 500 .875rem/1.3 var(--font-sans); }
.sheet__sizes a { color: var(--green); text-underline-offset: .15em; }
.sheet__help { margin-top: .75rem; font: 400 .875rem/1.45 var(--font-sans); color: #37433c; }

@media (min-width: 1024px) {
	/* The paper runs off the bottom edge of the screen. */
	.sheet { align-items: center; padding: 9.375rem 0 0; }
	/* 45rem (was 42.5): room for Share and the template button side by side. */
	.sheet__paper { width: 45rem; flex: 1 0 auto; margin-bottom: -2.5rem; padding: 3rem 3.75rem 5rem 6.25rem; }
	.sheet__hand { font-size: 3.75rem; }
	.sheet__body p { line-height: 2.125rem; }
	.sheet__body p + p { margin-top: 2.125rem; }
	.sheet__cta { margin-top: 2.125rem; padding-top: 0; text-align: left; }
	.sheet__buttons { display: flex; align-items: center; gap: .875rem; margin-right: -2.75rem; }   /* into the paper's right margin, 1rem short of the edge */
	.sheet__cta .btn { flex: none; }
	.sheet__cta .note { margin-top: 1rem; }
	.sheet__sizes { justify-content: flex-start; }
	.btn--outline { padding: 0 2rem; }
}

/* ---------- 4 · Nick's message ---------- */
/* Nick's message (master brief Part 2, replaces B3). Phones: heading right under the header, the film cropped to
   4:5 (60% 30%), full width in the page gutter, at most 62svh. Desktop (≥ 56.25rem): the film fills the gutters and
   the height left under the header (min 30rem, about 2:1 on a laptop); the heading sits on it, top left, in white. */
/* Staging review item 9: even padding. Phones: the gap under the header and at the bottom match the side gutter,
   and the card fills between them. Desktop: 4rem left, right, bottom and below the header band; the card fills
   the rest, capped at 16:9 of its width; the film covers it (50% 40%). The title is placed from the card. */
.video { justify-content: flex-start; padding: calc(var(--header-top) + 2.75rem + var(--gutter)) var(--gutter) var(--gutter); background: linear-gradient(180deg, #eaf0e8, #d7e1d8); }
.video__frame { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.video__heading { position: relative; z-index: 2; }
.video__title { text-wrap: balance; }
/* Not the all-caps eyebrow style: sentence case at the site's body-copy size (owner, Oct 14). */
.video__eyebrow { margin-bottom: .5rem; font: 400 var(--lead-size)/1.4 var(--font-sans); letter-spacing: 0; text-transform: none; }
.video__card {
	position: relative; z-index: 1; flex: 1 1 auto; width: 100%; min-height: 15rem; margin-top: 1.25rem;
	border-radius: 1.375rem; overflow: hidden; background: #5d6a61;
	box-shadow: 0 1.25rem 2.5rem -18px rgba(20, 40, 30, .5);
}
.video__card::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(10, 20, 15, .6));
}
.video__poster { position: absolute; inset: -6%; background: 60% 30% / cover no-repeat; translate: var(--px, 0) var(--py, 0); scale: var(--pz, 1); }   /* hover parallax: video.js */
/* Review item 15 (Oct 14): a green "Play video" pill in the bottom-right corner; the whole card plays too. */
.video__card { cursor: pointer; }
.video__play.btn { position: absolute; z-index: 3; right: 1.5rem; bottom: 1.5rem; display: inline-flex; width: auto; }
.video__play:focus-visible { outline: .1875rem solid #fff; outline-offset: .1875rem; box-shadow: 0 0 0 .375rem var(--green-focus); }
/* Hovering anywhere on the card plays the button's hover too (the whole card plays). */
@media (hover: hover) {
	.video__card:hover .video__play .roll__a, .video__card:hover .video__play .roll__b { transform: translateY(-110%); }
	.video__card:hover .video__play .btn__icon svg { transform: translateX(2px) rotate(-8deg); }
	.video__card:hover .video__play { filter: brightness(1.06); box-shadow: 0 .875rem 1.75rem -10px rgba(19, 125, 0, .75); }
	.video__card:hover .video__play .btn__icon { background: rgba(255, 255, 255, .28); }
}
/* Captions note and duration on the left, level with the pill. */
.video__meta {
	position: absolute; z-index: 3; left: 1.5rem; bottom: 1.5rem; height: 3rem;
	display: flex; align-items: center; gap: 1rem;
	font: 400 .8125rem/1.3 var(--font-sans); color: #fff; pointer-events: none;
}
.video__native { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; background: #000; }
.video__transcript { margin-top: .875rem; font-size: .875rem; }
.video__transcript summary { cursor: pointer; color: var(--green); }
.video__transcript p { margin-top: .625rem; }

@media (min-width: 900px) {
	.video { --vpad: 4rem; padding: calc(var(--header-top) + 2.75rem + var(--vpad)) var(--vpad) var(--vpad); }
	.video__frame {
		flex: none; width: 100%;
		height: calc(100svh - var(--header-top) - 2.75rem - 2 * var(--vpad));
		max-height: calc((100vw - 2 * var(--vpad)) * 9 / 16);   /* taller screens: never past 16:9 */
	}
	.video__card { flex: none; height: 100%; min-height: 0; margin-top: 0; border-radius: 1.5rem; }
	.video__poster { background-position: 50% 12%; }   /* the Oct 15 still is framed wide with Nick high; keep his head in on wide cards */
	/* Review item 15 (Oct 14, supersedes 13b): the heading on the film, left aligned and centred vertically in the
	   left of the card (3rem top and bottom, 3.5rem left, at most 45% of the card), over a scrim from the left. */
	.video__heading {
		position: absolute; top: 3rem; bottom: 3rem; left: 3.5rem; max-width: 45%;
		display: flex; flex-direction: column; justify-content: center;
		color: #fff; pointer-events: none; text-shadow: 0 1px 1.125rem rgba(0, 0, 0, .25);
	}
	/* The module's h2 size, down to 10% smaller where "Your story deserves" (8.8em) would not fit 45% of the card on
	   one line, so it stays two lines (about 58px at 1280). */
	.video__title { font-size: clamp(3.6rem, calc((100vw - 2 * var(--vpad)) * .45 / 8.8), 4rem); }
}
@media (min-width: 900px) and (max-width: 1279px) {
	/* Narrow desktops and tablets: smaller still, so it stays two lines (three is not allowed). */
	.video__title { font-size: clamp(2.5rem, calc((100vw - 2 * var(--vpad)) * .45 / 8.8), 3.6rem); }
}
@media (min-width: 900px) {
	/* Eyebrow white like the headline, over the scrim from the left (these sat inside the 900-1279 range by mistake,
	   so wider screens had grey text on the pale film; owner, Oct 15). */
	.video__eyebrow { color: #fff; }
	.video__card::before {
		content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
		background: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .34) 30%, rgba(0, 0, 0, .12) 50%, rgba(0, 0, 0, 0) 65%);   /* lighter for the Oct 15 still: text ~8:1 */
	}
}
@media (min-width: 900px) and (max-height: 650px) {
	.video { --vpad: 2.5rem; }   /* short screens */
}
@media (min-width: 1024px) {
	.video__meta { height: 3.5rem; }   /* level with the play button (btn--sm is 3.5rem tall here) */
}

/* ---------- 5 · Gallery ---------- */
.gallery { padding: 5.75rem var(--gutter) 1.5rem; }
.gallery__room { position: absolute; inset: 0; overflow: hidden; }
/* Fade the top of the room so the header and title stay readable. */
.gallery__room::after {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9.375rem; pointer-events: none;
	background: linear-gradient(var(--haze) 0, rgba(233, 238, 232, .9) 40%, rgba(233, 238, 232, 0));
}
.gallery__head { position: relative; z-index: 2; width: 14.375rem; }
.gallery__head::before {
	content: ""; position: absolute; z-index: -1; inset: -40px -60px -30px -50px; pointer-events: none;
	background: radial-gradient(closest-side, rgba(233, 238, 232, .92) 55%, rgba(233, 238, 232, 0));
}
.gallery__title { font: 300 1.75rem/1.08 var(--font-display); letter-spacing: -.01em; }
/* The site's body-copy size (owner, Oct 14). */
.gallery__sub { max-width: 21rem; margin-top: .5rem; font: 400 var(--lead-size)/1.45 var(--font-sans); color: var(--ink); text-wrap: balance; }
.gallery__head { width: auto; }
.gallery__title { max-width: 14.375rem; }
.gallery__count { margin-top: .375rem; font: 400 .75rem/1.4 var(--font-sans); color: var(--sage); }
.seg.gallery__toggle--desktop { display: none; }

.gallery__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: .625rem; margin-top: auto; }
.gallery__actions { flex: 1; display: flex; gap: .625rem; min-width: 0; }
.gallery__actions .btn { flex: 1; min-width: 0; }
.gallery__share { display: none; }

.btn--sm { height: 3rem; gap: .5rem; padding-left: 1rem; padding-right: .375rem; border-radius: 1.5rem; font-size: .875rem; }
.btn--sm .btn__icon { width: 2.125rem; height: 2.125rem; }
.btn--sm .btn__icon svg { width: 1.125rem; height: 1.125rem; }
/* Narrow phones (375 and below): a tighter bar so "Surprise me" isn't cut off (QA N2). */
@media (max-width: 380px) {
	.gallery__bar { gap: .5rem; }
	.gallery__bar .seg__btn { padding: 0 .5625rem; }
	.gallery__bar .btn--sm { gap: .375rem; padding-left: .75rem; font-size: .8438rem; }
}
/* The smallest phones (20rem): "Surprise me" drops its arrow so the words fit. */
@media (max-width: 340px) {
	.gallery__bar .btn--sm { justify-content: center; padding-right: .75rem; }
	.gallery__bar .btn--sm .btn__icon { display: none; }
}

.icon-btn {
	flex: none; display: grid; place-items: center;
	width: 3rem; height: 3rem; padding: 0;
	border: 1.5px solid rgba(27, 36, 32, .4); border-radius: 50%;
	background: rgba(255, 255, 255, .45); color: var(--ink);
}
.icon-btn svg { width: 1.125rem; height: 1.125rem; }

/* Segmented toggle (Room / List). */
.seg {
	flex: none; display: inline-flex; padding: .1875rem;
	border: 1.5px solid rgba(27, 36, 32, .35); border-radius: 1.5rem;
	background: rgba(255, 255, 255, .45);
}
.seg__btn { min-height: 2.375rem; padding: 0 .75rem; border: 0; border-radius: 1.25rem; background: none; font: 400 .8125rem/1 var(--font-sans); color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

@media (min-width: 1024px) {
	.gallery { padding: 8.125rem var(--gutter) 2.5rem; }
	.gallery__room::after { height: 11.875rem; }
	.gallery__head { width: 26rem; }
	.gallery__title { max-width: 22.5rem; }
	.gallery__title { font-size: 3rem; }
	.gallery__sub { max-width: 26rem; margin-top: .75rem; }
	.gallery__count { margin-top: .625rem; font-size: .875rem; }
	.seg.gallery__toggle--desktop { display: inline-flex; margin-top: 1.125rem; }
	.seg.gallery__toggle--mobile { display: none; }
	.gallery__bar { justify-content: space-between; }
	.gallery__actions { flex: none; gap: .875rem; }
	.gallery__actions .btn { flex: none; }
	.gallery__share { display: inline-flex; }
	.btn--sm { height: 3.5rem; padding: 0 .5rem 0 1.5rem; gap: 1.5rem; border-radius: 1.75rem; font-size: 1rem; }
	.btn--sm .btn__icon { width: 2.5rem; height: 2.5rem; }
	.icon-btn { width: 3.5rem; height: 3.5rem; }
}

/* ---------- 6 · Join ---------- */
.join { padding-bottom: 3rem; background: var(--green); color: #fff; text-align: center; }
.join .floater { background: rgba(255, 255, 255, .08); box-shadow: none; opacity: 1; }
.join__trail { position: absolute; inset: 0; pointer-events: none; }
.join__copy { position: relative; max-width: 34em; margin: auto auto 0; }
.join__title { max-width: 16.875rem; margin: 0 auto; }
.join__title { font: 300 2.25rem/1.05 var(--font-display); letter-spacing: -.01em; }
.join__body { text-wrap: balance; max-width: 34em; margin: 1.5rem auto 0; font: 400 var(--lead-size)/1.5 var(--font-sans); color: rgba(255, 255, 255, .9); }
.join__cta { position: relative; margin-top: auto; padding-top: 2.5rem; }

/* ---------- Legal footnotes (template-parts/legal.php; review 13a, Oct 14): their own section after Join ---------- */
/* Dexcom's standard footnote style: plain regular-weight paragraphs, label inline in capitals, a blank line between
   paragraphs, underlined links, dark grey on light grey, left aligned in the site gutters. 10px phones, 12-13px desktop. */
.legal {
	position: relative; z-index: 5;
	padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
	background: var(--legal-bg); color: var(--legal-ink);
	font: 400 10px/1.5 var(--font-sans); text-align: left;
}
.legal p + p, .legal__col + .legal__col { margin-top: 1em; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.legal__links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 1.5em 0 0; padding: 0; list-style: none; }

/* Join trail photos (review item 18, Oct 14; Salient Signal reference): landscape 4:3, rounded 10px, no frame, a
   light shadow. No overflow:hidden on the photo (it would clip the shadow); the image rounds itself. */
.join-photo {
	position: absolute; left: 0; top: 0; width: var(--tw, clamp(120px, 12.3vw, 230px)); aspect-ratio: 4 / 3;
	border-radius: 10px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35);
}
.join-photo img, .join-photo__tint { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: inherit; }
.join__trail { z-index: 3; }
.join-photo--trail { display: none; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
.join__copy, .join__cta { z-index: 4; }
/* Trail photos pass under the copy (owner, Oct 14): a soft glow in the Join green keeps the white type readable over
   a light photo, and is invisible on the plain green. */
.join__title, .join__body { text-shadow: 0 0 .25rem rgba(19, 125, 0, .9), 0 0 1rem rgba(19, 125, 0, .75), 0 0 2rem rgba(19, 125, 0, .5); }

/* The still strip: the fallback for reduced motion, Pause motion and no JavaScript. Same photos and sizes, in a
   row in the empty band under the button, never over the copy. Phones: three, 26vw each. */
.join__stills {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: max(2rem, 4%);
	display: flex; justify-content: center; gap: 3vw; margin: 0; padding: 0; list-style: none; pointer-events: none;
}
.join-photo--still { position: relative; flex: none; width: 26vw; }
.join-photo--still:nth-child(n+4) { display: none; }
.join-photo--still:nth-child(odd) { transform: rotate(-3deg); }
.join-photo--still:nth-child(even) { transform: rotate(2.5deg) translateY(.5rem); }
.join.has-trail .join__stills { display: none; }
.is-paused .join.has-trail .join__stills { display: flex; }   /* Pause motion: the still strip (QA N12) */
@media (prefers-reduced-motion: reduce) {
	.join.has-trail .join__stills { display: flex; }
}
/* Phones: the button sits at the bottom of Join, so the strip goes in the empty space between the copy and it. */
@media (max-width: 1023px) {
	.join__stills { position: relative; order: 1; left: auto; right: auto; bottom: auto; margin: auto 0; padding: 1.5rem 0; }
	.join__copy { order: 0; }
	.join__cta { order: 2; }
}

@media (min-width: 1024px) {
	.join__stills { gap: 2rem; bottom: max(2.5rem, 6%); }
	.join-photo--still { width: clamp(120px, 12.3vw, 230px); }
	.join-photo--still:nth-child(n+4) { display: block; }
	.join { justify-content: center; padding-top: 0; padding-bottom: 0; }
	.join__copy { margin: 0 auto; }
	.join__title { max-width: 26.875rem; }
	.join__title { font-size: 3.5rem; }
	.join__cta { margin-top: 1.875rem; padding-top: 0; }
	/* Footnotes: two columns (safety + Stelo | indications + trademark + MAT), the links row underneath. */
	.legal { padding: 2.5rem var(--gutter) calc(2.25rem + env(safe-area-inset-bottom, 0px)); font-size: clamp(12px, .75rem, 13px); }
	.legal__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
	.legal__col + .legal__col { margin-top: 0; }
}

/* ---------- Gallery: the room (assets/js/gallery.js) ---------- */
.gallery__room { touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.gallery__room.is-grabbing { cursor: grabbing; }
.room-world { position: absolute; inset: 0; }
.room-layer { position: absolute; left: 50%; top: 50%; width: 0; height: 0; will-change: transform; }
.lt { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .7s ease; }
.lt.is-in { opacity: 1; }
.lt.is-focus { z-index: 6; }
.lt.is-taken { visibility: hidden; }
.lt__thread {
	position: absolute; left: 50%; bottom: 100%; width: 1px; height: 900px; pointer-events: none;
	background: linear-gradient(rgba(27, 36, 32, 0), rgba(27, 36, 32, .2) 72%);
}
.lt__sway { transform-origin: 50% 0; will-change: transform; }
.lt.is-dropping .lt__drop { animation: ltd-drop 1.3s var(--d, 0s) both; }
/* Falls on its thread, lands about .375rem low, then settles: a slight overshoot, not a bounce. */
@keyframes ltd-drop {
	0% { transform: translateY(-110vh); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
	82% { transform: translateY(.375rem); animation-timing-function: cubic-bezier(.4, 0, .4, 1); }
	100% { transform: none; }
}

/* Cards: typed paper, a scan, a photo, or a film/voice card. One frame, hung by thread and eyelet. */
.card {
	position: relative; display: block; margin: 0; padding: 16px 16px 14px;
	border: 0; border-radius: 3px; background: #fff; color: #2a332e; text-align: left;
	font: 400 13px/1.5 var(--font-sans); cursor: pointer;
	box-shadow: 0 22px 44px -18px rgba(20, 30, 25, .55), 0 1px 3px rgba(20, 30, 25, .12);
}
.card::before {
	content: ""; position: absolute; z-index: 2; left: 50%; top: 6px; width: 7px; height: 7px; margin-left: -3.5px;
	border-radius: 50%; background: #e6ebe6; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .25);
}
.card--typed, .card--audio { background-color: #FBFAF6; }   /* the reader's paper (Part 3) */
.card:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; box-shadow: 0 22px 44px -18px rgba(20, 30, 25, .55); }
.card__text { display: block; }
.card__by { display: block; margin-top: 10px; font: 400 10.499px/1.35 var(--font-sans); color: var(--sage); }
/* Until the image arrives, its reserved box (width/height attributes) shows a soft tint, not a gap. */
.card__img { display: block; width: 100%; height: auto; background: linear-gradient(135deg, #eef1ee, #e2e8e2); }
.card--scan { padding: 8px 8px 10px; }
.card--photo { padding: 8px 8px 12px; }
.card--photo .card__text, .card--photo .card__by { padding: 0 4px; }
.card--photo .card__text { margin-top: 9px; font-size: 12.499px; }
.card--video { background: #2a322d; color: #fff; }
.card--video .card__by { color: rgba(255, 255, 255, .7); }
.card__media {
	display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px;
	border-radius: 50%; background: rgba(255, 255, 255, .94); color: #111;
}
.card__media svg { width: 15px; height: 15px; margin-left: 2px; }
.card__media--audio { background: var(--green); color: #fff; }
.card--blank {
	padding: 0; cursor: default; background-color: #f4f6f2;
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(120, 150, 205, .28) 31px, rgba(120, 150, 205, .28) 32px);
	background-position: 0 44px; box-shadow: 0 30px 60px -24px rgba(20, 30, 25, .4);
}

/* Ambassador card: a portrait, the "Ambassador" tag, their approved line, name · role, and the CTA. One link.
   Phones: a 4:3 portrait so the card fits a letter cell in the tighter phone room (owner, Oct 14). */
@media (max-width: 599px) { .room-layer .card--amb .card__portrait { aspect-ratio: 4 / 3; } }
.card--amb {
	padding: 9px 9px 0; background: #fafbf8; color: var(--ink); text-decoration: none;
	box-shadow: 0 30px 56px -20px rgba(20, 30, 25, .6), 0 1px 3px rgba(20, 30, 25, .2);
}
.card__portrait { display: block; aspect-ratio: 4 / 5; background: #4b463e center 25% / cover no-repeat; }
.card__portrait--initial {
	display: grid; place-items: center;
	background: radial-gradient(ellipse at 50% 30%, #8a8478, #4b463e);
	font: 300 72px/1 var(--font-sans); color: rgba(255, 255, 255, .72);
}
.card__tag {
	display: flex; align-items: center; gap: 6px; margin: 12px 6px 6px;
	font: 500 10.499px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.card__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.card__head { display: block; margin: 0 6px 8px; font: 300 19px/1.14 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.card--amb .card__by { margin: 0 6px; font-size: 12px; }
.card--amb .card__by b { font-weight: 500; color: var(--ink); }
.card__cta {
	display: inline-flex; gap: 6px; margin: 9px 6px 12px; padding: 5px 11px;
	border: 1px solid rgba(27, 36, 32, .4); border-radius: 999px; font: 400 12px/1.3 var(--font-sans); color: var(--ink);
}

/* "Scroll to continue" at the bottom edge of the room. */
.gallery__cue {
	position: absolute; z-index: 3; left: 50%; bottom: 6rem; transform: translate(-50%, .5rem);
	display: flex; flex-direction: column; align-items: center; gap: .3125rem;
	padding: .5rem .875rem; border-radius: 1rem;
	background: rgba(250, 251, 248, .78); -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem);
	font: 500 .625rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sage);
	opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s;
}
.gallery__cue.is-on { opacity: 1; transform: translate(-50%, 0); }
.gallery__cue i { width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: ltd-nudge 1.4s ease-in-out infinite; }
/* Fills as you push past the edge; full = leaving the room. */
.gallery__cue-bar { display: block; width: 3.5rem; height: 2px; border-radius: 1px; background: rgba(27, 36, 32, .15); overflow: hidden; }
.gallery__cue-bar span { display: block; height: 100%; background: var(--green); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.gallery__cue--top { top: 6.5rem; bottom: auto; transform: translate(-50%, -8px); }
.gallery__cue--top.is-on { transform: translate(-50%, 0); }
.gallery__cue--top i { transform: rotate(-135deg); animation-name: ltd-nudge-up; }
@keyframes ltd-nudge-up { 50% { transform: rotate(-135deg) translate(.1875rem, .1875rem); } }
@keyframes ltd-nudge { 50% { transform: rotate(45deg) translate(.1875rem, .1875rem); } }

/* Keyboard: a way past the room's cards (QA N11). Visible only when focused. */
.gallery__skip { position: absolute; z-index: 5; left: -9999px; top: 5.25rem; background: #fff; }
.gallery__skip:focus { left: var(--gutter); }

/* First-visit hint. Touch wording on touch screens, pointer wording elsewhere. */
.gallery__hint {
	position: absolute; z-index: 3; left: 50%; bottom: 5.75rem; transform: translate(-50%, .375rem);
	max-width: calc(100% - 2.5rem); padding: .5rem 1rem; border-radius: 62.4375rem;
	background: rgba(250, 251, 248, .78); -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem);
	font: 400 .8125rem/1.35 var(--font-sans); color: var(--ink); text-align: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), visibility 0s .6s;
}
.gallery__hint.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.gallery__hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
	.gallery__hint-touch { display: inline; }
	.gallery__hint-pointer { display: none; }
}
/* Phones and tablets (owner, Oct 14): the hint stays on above the controls in the room, like desktop's. */
@media (max-width: 1023px) {
	.gallery__hint { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .4s; white-space: nowrap; }
}
.gallery[data-view="list"] .gallery__hint, .is-reading .gallery__hint { opacity: 0; visibility: hidden; }
/* Its own visibility: visible would show through a hidden chapter: on phones in Room view it floated over every
   other chapter (QA Oct 28). */
.js-director .gallery:not(.is-visible) .gallery__hint { visibility: hidden; }
.is-paused .gallery__hint { transition: none; }
html:not(.js) .gallery__hint { display: none; }
/* Desktop keeps the hint in the bar, next to pause, the whole time; the fading version is for phones. */
.gallery__bar-hint { display: none; }
@media (min-width: 1024px) {
	.gallery__hint { display: none; }
	/* Frosted pill so it stays readable when letters drift behind it. */
	.gallery__bar-hint {
		display: block; flex: 0 1 auto; min-width: 0; margin: 0 auto 0 .25rem; padding: .5rem 1rem;
		border-radius: 62.4375rem; background: rgba(250, 251, 248, .72);
		-webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem);
		font: 400 .875rem/1.35 var(--font-sans); color: var(--ink);
	}
	.gallery[data-view="list"] .gallery__bar-hint { visibility: hidden; }
}

/* Phones (master brief Part 2): a calm room. Nothing under the header, count and Menu (top 10rem) or over the
   controls and the hint (bottom 10.625rem): the room fades out there. Threads at 30%; blank sheets read as background. */
@media (max-width: 599px) {
	/* Owner, Oct 14: shorter fades. The room shows from just under the heading block (--head-b, measured by
	   gallery.js) and fades out just above the hint and the controls. */
	.gallery__room {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--head-b, 14rem) + .25rem), #000 calc(var(--head-b, 14rem) + 2.25rem), #000 calc(100% - 8.75rem), transparent calc(100% - 6.75rem));
		mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--head-b, 14rem) + .25rem), #000 calc(var(--head-b, 14rem) + 2.25rem), #000 calc(100% - 8.75rem), transparent calc(100% - 6.75rem));
	}
	.lt__thread { opacity: .3; }
	.card--filler { opacity: .5; box-shadow: none; filter: blur(1px); }
}

/* ---------- Gallery: List view ---------- */
.gallery__list {
	display: none; position: absolute; z-index: 2;
	left: var(--gutter); right: var(--gutter); top: calc(var(--head-b, 14rem) + .75rem); bottom: 6rem;
	overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	padding: .25rem .25rem .5rem;   /* room for the cards' shadows and focus rings */
}
.gallery[data-view="list"] .gallery__list { display: block; }
.gallery[data-view="list"] .gallery__room { display: none; }
/* A grid of letter cards: 1 column on phones, 2 on tablets, 3 on desktop (brief B7). Each card is one link. */
.letter-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem; margin: 0; padding: 0; list-style: none; }
.letter-list > li { display: flex; }
.letter-row {
	display: flex; flex-direction: column; width: 100%; overflow: hidden;
	border-radius: .5rem; background: #fff; color: var(--ink); text-decoration: none;
	box-shadow: 0 1px 2px rgba(20, 40, 30, .08), 0 .625rem 1.5rem -16px rgba(20, 40, 30, .35);
	transition: transform .3s var(--ease-out), box-shadow .3s;
}
@media (hover: hover) { .letter-row:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(20, 40, 30, .08), 0 16px 30px -16px rgba(20, 40, 30, .45); } }
.letter-row:focus-visible { outline: .1875rem solid var(--green); outline-offset: .1875rem; }
/* Fixed ratio, so images loading later never move the grid. The scan shows from its top. */
.letter-row__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, #eef1ee, #e2e8e2); }
.letter-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.letter-row__thumb--media { display: grid; place-items: center; background: #2a322d; color: #fff; }
.letter-row__thumb--media svg { width: 2.75rem; height: 2.75rem; padding: .75rem; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.letter-row__thumb--initial { display: grid; place-items: center; background: #dfe7dc; font: 300 4rem/1 var(--font-display); color: var(--green); }
.letter-row__body { display: flex; flex: 1; flex-direction: column; gap: .375rem; padding: .875rem 1rem 1rem; }
.letter-row__tag { font: 500 .6562rem/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.letter-row__text {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	font: 400 1rem/1.45 var(--font-sans); color: var(--ink);
}
.letter-row__by { margin-top: auto; padding-top: .25rem; font: 400 .8125rem/1.4 var(--font-sans); color: var(--sage); }
/* Typed letters: no image slot, a soft tinted card with the excerpt larger, in the display face. */
.letter-row--typed { background: #eef3ea; }
.letter-row--typed .letter-row__body { padding: 1.25rem 1.25rem 1.125rem; }
.letter-row--typed .letter-row__text { font: 300 1.3125rem/1.3 var(--font-display); letter-spacing: -.005em; }
@media (min-width: 600px) { .letter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .letter-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.letter-list__more { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1.25rem 0; }
.letter-list__empty { padding: 1.25rem 0; color: var(--sage); }

/* Without JavaScript the gallery is the list. */
html:not(.js) .gallery__room, html:not(.js) .seg, html:not(.js) [data-ltd-surprise], html:not(.js) .gallery__bar .motion-toggle { display: none; }
html:not(.js) .gallery__list { display: block; position: relative; inset: auto; margin: 1.5rem 0 2rem; overflow: visible; }

@media (min-width: 1024px) {
	.gallery__list { left: 30rem; top: 8.125rem; bottom: 7.5rem; }
	.gallery__cue:not(.gallery__cue--top) { bottom: 6.875rem; }
	html:not(.js) .gallery__list { margin-left: 0; }
}

/* ---------- Reader: paper pop-up (master brief Part 3) ---------- */
/* Paper #FBFAF6, ruled lines one per line-height (aligned to the text), a red margin line, no pins or holes;
   tape only on prints. Letter text in Dexcom Display Light (owner's call: no Newsreader), UI in Dexcom Sans. */
.reader {
	--paper: #FBFAF6;
	--rule: rgba(110, 140, 120, .11);
	--margin-line: rgba(200, 95, 95, .38);
	--tape: rgba(236, 226, 190, .82);
	--paper-shadow: 0 2px .25rem rgba(20, 30, 25, .25), 0 2.125rem 3.75rem -20px rgba(15, 22, 18, .6);
	--lh: 2rem; --fs: 1.25rem; --margin-x: 3rem; --head: 4rem;
	position: fixed; z-index: 150; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: max(1.25rem, env(safe-area-inset-top)) 1rem 6.25rem;
}
.reader__scrim {
	/* Review item 20 (Oct 15): a little more of the gallery shows through, as soft colour (85% both stops, 12px blur
	   at the reference size). Without backdrop-filter, or with reduced transparency: solid #7D867F, no blur. */
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 50% 42%, rgba(125, 134, 127, .85), rgba(104, 113, 106, .85));
	-webkit-backdrop-filter: blur(.75rem); backdrop-filter: blur(.75rem);
	opacity: 0; transition: opacity .45s;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.reader__scrim { background: #7D867F; }
}
@media (prefers-reduced-transparency: reduce) {
	.reader__scrim { background: #7D867F; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.reader.is-on .reader__scrim { opacity: 1; }
/* Nothing animates under the blurred backdrop while a story is open (each frame would re-blur the whole screen
   and the letter's scrolling stuttered, Oct 15): the hero's hanging letters, scroll cues and peek pause. */
.is-reading .air-card__sway, .is-reading .hero-peek, .is-reading .hero-cue *, .is-reading .gallery__cue i { animation-play-state: paused !important; }
/* The pop-up is a layout box; the sheet and the print carry the paper. */
.reader__paper {
	position: relative; display: flex; flex-direction: column;
	width: min(100%, 43.75rem); height: min(100%, 45rem);
	color: #23281f; outline: none; transform-origin: 0 0;
}
.reader__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.reader__by { display: none; }   /* the name is on the print caption and the sheet's sign-off */

/* The sheet */
.reader__sheet {
	position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column;
	background: var(--paper) repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh));
	box-shadow: var(--paper-shadow);
}
.reader__sheet::after {
	content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--margin-x); width: 1px;
	background: var(--margin-line); pointer-events: none;
}
.reader__sheet-head {
	flex: none; height: var(--head); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0 1.25rem 0 calc(var(--margin-x) + 1rem);
}
.reader__sheet-label { font: 600 .6875rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.reader__sheet-kind { font: 400 .8125rem/1.2 var(--font-sans); color: #5b665f; }
/* Read aloud (Part 5, boards "Pop-up with audio"): under the label, a 2.75rem green play button, a waveform that
   fills green as it plays, and the time. The row is two ruled lines tall so the rules still meet the text. */
.reader__sheet--audio .reader__sheet-head { height: var(--lh); align-items: flex-end; }
.reader__audio {
	flex: none; height: calc(var(--lh) * 2); display: flex; align-items: center; gap: .75rem;
	padding: 0 1.25rem 0 calc(var(--margin-x) + 1rem); position: relative; z-index: 3;
}
.reader__audio-btn {
	flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%;
	background: var(--green); color: #fff; cursor: pointer; box-shadow: 0 .25rem .625rem -4px rgba(19, 125, 0, .6);
}
.reader__audio-btn svg { width: 1.25rem; height: 1.25rem; }
.reader__audio-btn:focus-visible { outline: 2px solid var(--green); outline-offset: .1875rem; }
.reader__wave { flex: 1; min-width: 0; height: 1.875rem; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.reader__wave i { flex: 1; max-width: .1875rem; height: var(--h); border-radius: 2px; background: rgba(35, 40, 31, .22); transition: background-color .2s; }
.reader__wave i.is-played { background: var(--green); }
.reader__audio-time { flex: none; font: 500 .8125rem/1 var(--font-sans); font-variant-numeric: tabular-nums; color: #5b665f; }
.reader__audio audio { display: none; }
.reader__s.is-reading-now { background: rgba(19, 125, 0, .13); box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .3s; }
/* Phones: the label is just "Hear Lina read it", and only the elapsed time shows. */
@media (max-width: 899px) {
	.reader__sheet--audio .reader__sheet-label-main, .reader__sheet--audio .reader__sheet-label-sep { display: none; }
	.reader__audio-dur { display: none; }
}

/* The scroller is plain paper: no mask, no background-attachment: local (each made the browser repaint the whole
   scroller every frame, and fast scrolling went blank). The rules live on the inner block, which scrolls with
   the text in the usual way, so they stay under the words. */
.reader__sheet { contain: paint; }
.reader__sheet-text {
	flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
	background: var(--paper);
	font: 300 var(--fs)/var(--lh) var(--font-display); color: #23281f;
}
.reader__sheet-lines {
	min-height: 100%; padding: 0 1.25rem 4.25rem calc(var(--margin-x) + 1rem);
	background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh));
}
.reader__sheet-text p { margin: 0; }
.reader__sheet-text p + p { margin-top: var(--lh); }   /* a blank ruled line between paragraphs */
.reader__sign { font-style: italic; font-size: calc(var(--fs) + 2px); color: #3a4136; }
/* MLR disclaimer (item 25): directly under the sign-off, on the next ruled line; ink grey, upright, never cut. */
.reader__disc { font: 400 max(.875rem, 14px)/var(--lh) var(--font-sans); color: #4f5753; }
.reader__sheet-text .reader__sign + .reader__disc { margin-top: 0; }
.reader__sheet-text:focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
/* More below: a fade that doesn't scroll, and the "Keep reading" pill (staging review item 5). */
.reader__sheet-fade {
	position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4.375rem; pointer-events: none;
	background: linear-gradient(180deg, rgba(251, 250, 246, 0), #FBFAF6 85%);
	opacity: 0; transition: opacity .3s;
}
.reader__sheet.has-more .reader__sheet-fade { opacity: 1; }
.reader__keep {
	position: absolute; z-index: 4; left: 50%; bottom: .875rem; transform: translateX(-50%);
	display: inline-flex; align-items: center; gap: .375rem; height: 2.125rem; padding: 0 .75rem 0 1rem;
	border: 1px solid var(--green); border-radius: 62.4375rem; background: #FBFAF6;
	font: 500 .8125rem/1 var(--font-sans); color: var(--green); cursor: pointer; white-space: nowrap;
}
.reader__keep[hidden] { display: none; }
.reader__keep svg { width: .875rem; height: .875rem; animation: ltd-bob 1.6s ease-in-out 3; }
@keyframes ltd-bob { 50% { transform: translateY(.375rem); } }
@media (prefers-reduced-motion: reduce) { .reader__keep svg { animation: none; } }
.reader__keep:focus-visible { outline: .1875rem solid #fff; outline-offset: 2px; box-shadow: 0 0 0 .3125rem var(--green-focus); }
/* Desktop: a thin, always-visible scroll thumb so the sheet reads as scrollable. */
@media (min-width: 900px) {
	.reader__sheet-text { scrollbar-width: thin; scrollbar-color: rgba(19, 125, 0, .4) transparent; }
	.reader__sheet-text::-webkit-scrollbar { width: .375rem; }
	.reader__sheet-text::-webkit-scrollbar-track { background: transparent; }
	.reader__sheet-text::-webkit-scrollbar-thumb { border-radius: .1875rem; background: rgba(19, 125, 0, .4); }
}

/* The print: white border, sized to the image (no letterbox), slightly turned; tape on scans and photos only. */
.reader__print {
	position: relative; display: inline-flex; flex-direction: column; max-width: 100%; margin: 0;
	padding: .75rem .75rem 0; background: #fff; box-shadow: var(--paper-shadow); transform: rotate(-2deg);
}
.reader__print--taped::before {
	content: ""; position: absolute; z-index: 2; left: 50%; top: -.8125rem; width: 5rem; height: 1.6875rem; margin-left: -2.5rem;
	background: var(--tape); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.reader__zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.reader__zoom:focus-visible { outline: 2px solid var(--green); outline-offset: .1875rem; }
.reader__img { display: block; width: auto; height: auto; max-width: calc(100vw - 6rem); max-height: calc(100svh - 20.625rem); }   /* fixed limits, so the frame shrink-wraps the image */
.reader__media { display: block; width: 100%; background: #000; }
audio.reader__media { min-width: 16.25rem; background: none; }
.reader__print-cap {
	display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .75rem 2px .875rem;
	font: 400 .9375rem/1.3 var(--font-sans); color: #1b2420;
}
.reader__print-kind { font: 600 .6562rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.reader__print-kind--long { display: none; }
.reader__print-disc { margin: -.5rem 2px 0; padding-bottom: .875rem; font: 400 max(.875rem, 14px)/1.4 var(--font-sans); color: #4f5753; }
/* The caption never sets the frame's width: it wraps to the image's (a tall photo on a phone is height-limited and
   a long disclaimer had widened the frame past it, Oct 28). */
.reader__print-cap { width: 0; min-width: 100%; }
.reader__print-disc { width: 0; min-width: calc(100% - 4px); }   /* 2px side margins */
/* Print and sheet side by side: the sheet carries the disclaimer once. */
.reader__pair[data-view="both"] .reader__print-disc { display: none; }

/* Two forms (gallery.js pairHTML). Phones: the toggle sits on the backdrop above; the text REPLACES the print
   in the same box, so nothing moves. Desktop: print and sheet side by side, the same height. */
.reader__tabs {
	align-self: center; flex: none; display: inline-flex; gap: .25rem; margin-bottom: 1.125rem; padding: .1875rem;
	border: 1px solid rgba(255, 255, 255, .28); border-radius: 62.4375rem; background: rgba(30, 36, 33, .28);
}
.reader__tabs button {
	display: inline-flex; align-items: center; justify-content: center; gap: .375rem; min-height: 2.75rem; padding: 0 1.25rem;
	border: 1px solid transparent; border-radius: 62.4375rem; background: transparent;
	font: 500 .9375rem/1 var(--font-sans); color: #fff; cursor: pointer;
	transition: background-color .18s, color .18s;
}
/* Selected: Dexcom green, white, 600, check icon; a 1px white edge keeps the green clear of the dark backdrop. */
.reader__tabs button[aria-selected="true"] { background: var(--green); border-color: #fff; font-weight: 600; }
.reader__tab-check { display: none; width: .875rem; height: .875rem; flex: none; }
.reader__tabs button[aria-selected="true"] .reader__tab-check { display: block; }
.reader__tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }   /* white: green would not clear 3:1 on the backdrop */
.reader__pair { position: relative; flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.reader__panel { grid-area: 1 / 1; min-height: 0; display: flex; transition: opacity .18s ease, visibility 0s; }
.reader__panel--media { align-items: flex-start; justify-content: center; padding-top: 1.125rem; }
.reader__panel[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s .18s; }
@media (prefers-reduced-motion: reduce) {
	.reader__panel, .reader__panel[aria-hidden="true"] { transition: none; }
	.reader__print, .reader__panel--text .reader__sheet { transform: none; }   /* no tilt */
}

/* Buttons: 3rem round pills. Prev · Close · Share (green, icon chip) · Next. */
.reader__explore {
	position: absolute; z-index: 1; left: 50%; bottom: calc(max(1.625rem, env(safe-area-inset-bottom)) + 3.875rem); transform: translateX(-50%);
	padding-bottom: 2px; font: 500 .875rem/1.3 var(--font-sans); color: #fff; text-decoration: none; white-space: nowrap;
	/* A quiet underline at rest; on hover a full white one draws in from the left (.4s). */
	background: linear-gradient(#fff, #fff) 0 100% / 0 1px no-repeat, linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) 0 100% / 100% 1px no-repeat;
	transition: background-size .4s var(--ease-roll);
}
.reader__explore[hidden] { display: none; }
.reader.has-explore { padding-bottom: 8.75rem; }
.reader__bar {
	position: absolute; left: 0; right: 0; bottom: max(1.625rem, env(safe-area-inset-bottom));
	display: flex; justify-content: center; gap: .75rem;
	opacity: 0; transition: opacity .4s .25s;
}
.reader.is-on .reader__bar { opacity: 1; }
.reader__nav, .reader__close { height: 3rem; border: 1.5px solid rgba(255, 255, 255, .6); color: #fff; cursor: pointer; }
.reader__nav { display: grid; place-items: center; width: 3rem; padding: 0; border-radius: 50%; background: rgba(40, 46, 42, .35); }
/* The dark backing (review item 20): the lighter backdrop lets pale cards show through, and over a white card right
   behind an arrow, the white arrow and ring would only reach about 3:1. With it they stay well above. */
.reader__nav svg { width: 1.125rem; height: 1.125rem; transform: rotate(180deg); }
.reader__nav--next svg { transform: none; }
.reader__close { padding: 0 1.625rem; border-radius: 1.5rem; background: rgba(40, 47, 43, .55); font: 500 1rem/1 var(--font-sans); }
.reader__share {
	display: inline-flex; align-items: center; gap: .75rem; height: 3rem; padding: 0 .4375rem 0 1.375rem;
	border: 0; border-radius: 1.5rem; background: var(--green); color: #fff; font: 500 1rem/1 var(--font-sans); cursor: pointer;
}
.reader__share-icon { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.reader__share-icon svg { width: 1.125rem; height: 1.125rem; }
/* The site's button behaviour (staging review item 6): label roll on Close and Share, arrow nudge on the circles,
   lighter fill and full white border on hover, Share's icon nudge and green glow, press .975, the site focus ring.
   Hover only where there is hover (no sticky hover on touch); reduced motion keeps the colours, drops the motion. */
.reader__nav, .reader__close, .reader__share {
	transition: background-color .3s var(--ease-roll), border-color .3s var(--ease-roll), box-shadow .3s var(--ease-roll),
		filter .3s var(--ease-roll), transform .3s var(--ease-roll), translate .3s var(--ease-roll);
}
.reader__close .roll, .reader__share .roll { line-height: 1.2; }
.reader__nav svg, .reader__share-icon svg { transition: transform .3s var(--ease-roll); }
.reader__nav:active, .reader__close:active, .reader__share:active { transform: scale(.975); }
.reader__nav:focus-visible, .reader__close:focus-visible, .reader__share:focus-visible, .reader__explore:focus-visible {
	outline: .1875rem solid #fff; outline-offset: 2px; box-shadow: 0 0 0 .3125rem var(--green-focus);
}
@media (hover: hover) {
	.reader__nav:hover, .reader__close:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
	.reader__nav:hover { background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)), rgba(40, 46, 42, .35); }
	.reader__nav:hover svg { transform: rotate(180deg) translateX(.1875rem); }
	.reader__nav--next:hover svg { transform: translateX(.1875rem); }
	.reader__close:hover .roll__a, .reader__close:hover .roll__b, .reader__share:hover .roll__a, .reader__share:hover .roll__b { transform: translateY(-110%); }
	.reader__share:hover { filter: brightness(1.06); box-shadow: 0 .625rem 1.375rem -8px rgba(19, 125, 0, .7); }
	.reader__share:hover .reader__share-icon svg { transform: translateY(-2px) rotate(-8deg); }
	.reader__explore:hover { background-size: 100% 1px; }
}
@media (prefers-reduced-motion: reduce) {
	.reader .roll__a, .reader .roll__b { transition: none; transform: none !important; }
	.reader__nav svg, .reader__share-icon svg { transform: none !important; }
	.reader__nav:hover svg { transform: rotate(180deg) !important; }
	.reader__nav--next:hover svg { transform: none !important; }
}
/* Narrow phones (320–22.4375rem): the four buttons fit in one row; the sheet's kind label steps aside. */
@media (max-width: 359px) {
	.reader__bar { gap: .5rem; }
	.reader__close { padding: 0 1.125rem; }
	.reader__share { gap: .5rem; padding-left: 1rem; }
	.reader__share-icon { width: 1.875rem; height: 1.875rem; }
	.reader__sheet-kind { display: none; }
}

/* Full-size scan: pinch, drag, wheel; tap or Esc closes. */
.reader-zoom {
	position: fixed; z-index: 180; inset: 0; display: grid; place-items: center; overflow: hidden;
	background: rgba(10, 14, 12, .94); touch-action: none; cursor: grab;
	opacity: 0; transition: opacity .25s;
}
.reader-zoom.is-on { opacity: 1; }
.reader-zoom img { max-width: 100vw; max-height: 100vh; max-height: 100svh; object-fit: contain; -webkit-user-select: none; user-select: none; }
.reader-zoom__close {
	position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; height: 2.75rem; padding: 0 1.25rem;
	border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 1.375rem; background: rgba(0, 0, 0, .35);
	color: #fff; font: 400 .875rem/1 var(--font-sans); cursor: pointer;
}
.reader-zoom__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (min-width: 900px) {
	.reader { --lh: 2.25rem; --fs: 1.4375rem; --margin-x: 5rem; --head: 4.5rem; padding-bottom: 6.875rem; }
	.reader__sheet-head { padding-right: 2.5rem; }
	.reader__sheet-lines { padding-right: 3.75rem; }
	.reader__print-kind--long { display: inline; }
	.reader__print-kind--short { display: none; }
	/* Handwritten (and photo, video, audio): print left, sheet right, matched heights, a little turned. */
	.reader__paper--pair { width: min(65rem, 94vw); height: auto; max-height: 100%; }
	.reader__tabs { display: none; }
	.reader__pair { grid-template: auto / auto minmax(0, 29.375rem); justify-content: center; align-items: stretch; gap: 2.75rem; }
	.reader__pair--solo { grid-template-columns: auto; }
	.reader__pair .reader__panel--media { grid-area: 1 / 1; padding-top: 0; }
	.reader__pair .reader__panel--text { grid-area: 1 / 2; height: 0; min-height: 100%; }   /* takes the print's height */
	.reader__panel--text .reader__sheet { transform: rotate(.6deg); }
	.reader__print { transform: rotate(-1.2deg); padding: .875rem .875rem 0; }
	.reader__img { max-width: 27.5rem; max-height: calc(100svh - 18.75rem); }
	.reader__print--video, .reader__print--audio { width: 29.375rem; }
}


/* While a letter is open, the page chrome steps aside. */
.is-reading .site-header, .is-reading .chapter-dots, .is-reading .gallery__head, .is-reading .gallery__bar { opacity: 0; pointer-events: none; }
.gallery__head, .gallery__bar { transition: opacity .4s; }
.is-reading, .is-reading body { overflow: hidden; }

/* ---------- Story form pop-up (Jotform), closed dialog (assets/js/form.js) ---------- */
/* Phones: nearly full screen (8px of the page shows around it). Desktop: up to 45rem (720px at 16px) wide.
   The body scrolls; Jotform's script grows the frame to the form's height. */
.form-modal, .closed-dialog { position: fixed; z-index: 170; inset: 0; opacity: 0; transition: opacity .45s; }
.form-modal.is-on, .closed-dialog.is-on { opacity: 1; }
.form-modal__scrim, .closed-dialog__scrim {
	position: absolute; inset: 0; background: rgba(27, 36, 32, .42);
	-webkit-backdrop-filter: blur(.375rem); backdrop-filter: blur(.375rem);
}
.form-modal__paper {
	position: absolute; overflow: hidden; background: #fff; border-radius: .75rem;
	top: max(.5rem, env(safe-area-inset-top)); bottom: max(.5rem, env(safe-area-inset-bottom)); left: .5rem; right: .5rem;
	box-shadow: 0 1.875rem 4.375rem -24px rgba(0, 0, 0, .5);
	transform: translateY(2.125rem) scale(.97); transition: transform .9s var(--ease-out);
}
.form-modal.is-on .form-modal__paper { transform: none; }
.form-modal__close {
	position: absolute; z-index: 3; right: .75rem; top: .75rem;
	min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--ink); border-radius: 1.375rem;
	background: #fff; color: var(--ink); font: 400 .875rem/1 var(--font-sans);
}
.form-modal__body {
	position: absolute; left: 0; right: 0; top: 4.25rem; bottom: 0;
	overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.form-modal__body:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
/* Until Jotform's script sets the height (or without it: .is-fixed) the frame fills the body. */
.form-modal__frame { display: block; width: 100%; min-width: 100%; height: 100%; border: 0; }
.form-modal__frame.is-fixed { height: 100% !important; }

.closed-dialog { display: grid; place-items: center; padding: 1rem; }
.closed-dialog__card { position: relative; width: min(27.5rem, 100%); padding: 2rem 1.75rem 1.75rem; transform: translateY(1rem); transition: transform .6s var(--ease-out); }
.closed-dialog.is-on .closed-dialog__card { transform: none; }
.closed-dialog__text { font: 300 1.75rem/1.15 var(--font-display); outline: none; }
.closed-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }

.is-form-open, .is-form-open body { overflow: hidden; }
.is-form-open .site-header, .is-form-open .chapter-dots { opacity: 0; pointer-events: none; }

@media (min-width: 1024px) {
	.form-modal__paper { left: 0; right: 0; top: 2.25rem; bottom: 2.25rem; width: min(45rem, calc(100vw - 4rem)); margin: 0 auto; }
	.form-modal__close { right: 1.25rem; top: 1.25rem; }
	.form-modal__body { top: 5rem; }
	.closed-dialog__text { font-size: 2.125rem; }
}

/* ---------- Ambassador page (handoff 06): over the room, or standalone at /a/<slug>/ ---------- */
.amb-overlay {
	position: fixed; z-index: 160; inset: 0; overflow-y: auto; overscroll-behavior: contain;
	background: #eceee9; visibility: hidden; opacity: 0; transform: translateY(1.75rem);
	transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.amb-overlay.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .45s var(--ease-out), transform .7s var(--ease-out), visibility 0s; }
.is-amb-open, .is-amb-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.amb-overlay { transform: none !important; transition: opacity .25s linear, visibility 0s linear .25s !important; }
	.amb-overlay.is-on { transition: opacity .25s linear, visibility 0s !important; }
}
/* The standalone page has its own top bar, so the site header steps aside. */
.is-ambassador-page .site-header { display: none; }
.amb-page { background: #eceee9; color: var(--ink); }

.amb-page__bar { position: sticky; z-index: 6; top: 0; height: 0; padding: 0 1.25rem; }
.amb-page__back {
	position: relative; top: max(1.375rem, env(safe-area-inset-top));
	display: inline-flex; align-items: center; gap: .375rem; min-height: 2.5rem; padding: .5rem 1rem .5rem .75rem;
	border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 1.25rem;
	background: rgba(21, 23, 26, .5); -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem);
	color: #fff; font: 400 .875rem/1 var(--font-sans); text-decoration: none; white-space: nowrap;
}
.amb-page__back svg { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) { .amb-page__back:hover { background: #fff; color: #15171a; } }

/* 1 · Opener: full-height portrait (or initial) under a dark gradient. */
.amb-open { position: relative; display: flex; align-items: flex-end; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #15171a; color: #eef0ec; }
.amb-open__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.amb-open__initial {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(ellipse at 50% 30%, #3a4340, #15171a 70%);
	font: 300 min(70vw, 26.25rem)/1 var(--font-sans); color: rgba(238, 240, 236, .14);
}
.amb-open__shade { position: absolute; inset: 0; background: linear-gradient(rgba(21, 23, 26, .45), rgba(21, 23, 26, .05) 35%, rgba(21, 23, 26, .92)); }
.amb-open__in { position: relative; width: 100%; padding: 0 1.25rem 2.25rem; }
.amb-open__name { margin: 0 0 .75rem; font: 300 3rem/.98 var(--font-sans); letter-spacing: -.025em; }
.amb-open__role { margin: 0 0 1rem; font: 400 .875rem/1.4 var(--font-sans); color: rgba(238, 240, 236, .8); }
.amb-open__line { max-width: 24ch; margin: 0 0 1.5rem; font: italic 300 1.5rem/1.2 var(--font-sans); letter-spacing: -.01em; }
.amb-open__btns { display: flex; flex-direction: column; gap: .625rem; max-width: 21.25rem; }
.amb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .75rem; height: 3.25rem; padding: 0 1.375rem;
	border-radius: 1.625rem; font: 500 1rem/1 var(--font-sans); text-decoration: none;
}
.amb-btn svg { width: .875rem; height: .875rem; }
.amb-btn--white { background: #fff; color: var(--green); }
.amb-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; }
@media (hover: hover) { .amb-btn--ghost:hover { background: rgba(255, 255, 255, .14); } }

/* 2–4 · Sections. */
.amb-sec { padding: 3.5rem 1.25rem; background: #eceee9; outline: none; }
.amb-sec--paper { background: #f6f4ee; }
.amb-sec > * { max-width: 45rem; }
.amb-sec__label { margin: 0 0 .625rem; font: 500 .6875rem/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.amb-sec__title { margin: 0 0 1.25rem; font: 300 2rem/1.08 var(--font-sans); letter-spacing: -.02em; }
.amb-film { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: .375rem; background: #0e120f; }
.amb-transcript { margin-top: .75rem; font: 400 .9375rem/1.5 var(--font-sans); }
.amb-transcript summary { padding: .25rem 0; color: var(--green); cursor: pointer; }
.amb-transcript p { margin-top: .6em; }
.amb-tabs { margin-bottom: 1.375rem; }
.amb-letter p { margin: 0 0 1rem; font: 400 1.125rem/1.6 var(--font-sans); }
.amb-scan img { width: 100%; max-width: 21.25rem; height: auto; box-shadow: 0 1.125rem 2.25rem -24px rgba(20, 30, 25, .5); }
.amb-sec > .amb-reel { max-width: none; }
.amb-reel { display: flex; gap: .75rem; margin: 0 -1.25rem; padding: 0 1.25rem .625rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem; }
.amb-reel figure { flex: none; width: 72%; margin: 0; scroll-snap-align: start; }
.amb-reel img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .25rem; background: #e4e9e5; }
.amb-reel figcaption { margin-top: .375rem; font: 400 .75rem/1.4 var(--font-sans); color: var(--sage); }

/* 5 · Prompt, 6 · next. */
.amb-prompt { padding: 4rem 1.25rem; background: #15171a; color: #eef0ec; }
.amb-prompt .amb-sec__title { max-width: 16ch; margin-bottom: 1rem; }
.amb-prompt p { max-width: 34ch; margin: 0 0 1.5rem; font: 400 1.0625rem/1.5 var(--font-sans); color: rgba(238, 240, 236, .82); }
.amb-prompt .btn { max-width: 21.25rem; }
.amb-next { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; padding: 2.125rem 1.25rem 3rem; background: #eceee9; }
.amb-next__link { display: block; color: var(--ink); text-decoration: none; }
.amb-next__link small { display: block; margin-bottom: .25rem; font: 400 .75rem/1.3 var(--font-sans); color: var(--sage); }
.amb-next__link strong { font: 300 1.875rem/1.1 var(--font-sans); letter-spacing: -.02em; }
@media (hover: hover) { .amb-next__link:hover strong { color: var(--green); } }
.amb-next__all { padding: .375rem 0; font: 400 .9375rem/1.3 var(--font-sans); color: var(--ink); text-underline-offset: .25rem; }
.amb-disclosure { margin: 0; padding: 0 1.25rem 2.25rem; background: #eceee9; font: 400 .6875rem/1.5 var(--font-sans); color: var(--sage); }

/* List view: the ambassadors group above the letters. */
.letter-list__heading { margin: .25rem 0 .5rem; font: 500 .6875rem/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.letter-list--amb { margin-bottom: 1.75rem; }
/* Phones: ambassadors as compact rows (portrait beside the text), so the letters start on the first screen. */
@media (max-width: 599px) {
	.letter-list--amb .letter-row { flex-direction: row; }
	.letter-list--amb .letter-row__thumb { flex: none; width: 6rem; aspect-ratio: 4 / 5; }
	.letter-list--amb .letter-row__thumb--initial { font-size: 2.5rem; }
	.letter-list--amb .letter-row__body { padding: .75rem .875rem; gap: .25rem; }
	.letter-list--amb .letter-row__text { -webkit-line-clamp: 2; font-size: .9375rem; }
	.letter-list--amb .letter-row__by { font-size: .75rem; }
}

@media (min-width: 1024px) {
	.amb-page__bar { padding: 0 4rem; }
	.amb-page__back { top: 2.125rem; }
	.amb-open__in { max-width: 56.25rem; padding: 0 4rem 3.5rem; }
	.amb-open__name { font-size: 5.75rem; }
	.amb-open__line { font-size: 2.125rem; }
	.amb-open__btns { flex-direction: row; max-width: none; }
	.amb-sec { padding: 5.625rem 4rem; }
	.amb-sec__title { font-size: 3rem; }
	.amb-reel { margin: 0 -4rem; padding: 0 4rem .625rem; scroll-padding-inline: 4rem; }
	.amb-reel figure { width: 21.25rem; }
	.amb-prompt { padding: 6.25rem 4rem; }
	.amb-next { flex-direction: row; justify-content: space-between; align-items: center; padding: 3.125rem 4rem 4.375rem; }
	.amb-disclosure { padding: 0 4rem 2.75rem; }
}

/* ---------- All-letters page and 404 ---------- */
.page-letters { max-width: 70rem; margin: 0 auto; padding: 8.75rem var(--gutter) 5rem; }
.page-letters .letter-list { margin-top: 1.75rem; }
.page-letters > p { margin-top: 1.5rem; }

/* A letter's page without JavaScript (SEO review, Oct 29). With JavaScript the reader shows it instead. */
.letter-static { max-width: 40rem; margin: 0 auto; padding: 8.75rem var(--gutter) 4rem; }
.js .letter-static { display: none; }
.letter-static img, .letter-static video { display: block; width: 100%; height: auto; margin-top: 1.5rem; border-radius: .625rem; }
.letter-static audio { display: block; width: 100%; margin-top: 1.5rem; }
.letter-static__text { margin-top: 1.5rem; font-size: var(--lead-size); }
.letter-static__text p + p { margin-top: 1em; }
.letter-static__disc { margin-top: 1rem; font-size: .875rem; }
.letter-static > p:last-child { margin-top: 2rem; }
.pager { display: flex; gap: .5rem; margin-top: 1.5rem; }
.pager .page-numbers { padding: .5rem .75rem; border-radius: 1.125rem; text-decoration: none; }
.pager .current { background: var(--ink); color: #fff; }

/* ---------- Video: expanded player and end card (assets/js/video.js) ---------- */
.video__holder { flex: none; width: 100%; margin-top: 1.25rem; }   /* keeps the card's place while it plays */
.video__frame .video__holder ~ .video__card { flex: none; }
@media (min-width: 900px) { .video__holder { margin-top: 0; } }
.video__card.is-expanded { position: fixed; z-index: 200; margin: 0; }
/* Items 26 + 27 (Oct 20). The film has burned-in captions and a legal line in its bottom 6%, so it is never cropped
   (contain) and nothing of ours sits on it: the picture box ends above a 4rem controls strip. The <video> is sized
   to the film's own shape (--ar, set from its metadata) so its left and right edges can be feathered (horizontal
   only, never the bottom 12%) into the poster, blurred and darkened, which fills the rest of the screen (option A:
   reads edge to edge, crops nothing). Outside the open player the film is never shown: the card is the poster. */
.video__card { --vstrip: calc(4rem + env(safe-area-inset-bottom, 0px)); }
.video__card.is-expanded::before, .video__card.is-expanded::after { display: none; }   /* the card's scrims never sit on the film */
.video__media { position: absolute; z-index: 1; inset: 0 0 var(--vstrip) 0; container-type: size; transition: opacity .3s; }
.video__card:not(.is-expanded) .video__media,
.video__card.is-resetting .video__media,
.video__card.is-ended .video__media { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.video__media video {
	position: absolute; inset: 0; margin: auto;
	width: min(100cqw, 100cqh * var(--ar, 1.7778)); height: min(100cqh, 100cqw / var(--ar, 1.7778));
	object-fit: contain; background: transparent;
	/* Side feather (4%) everywhere, unioned with a solid bottom 12% that eases into the feather by 20%, so the
	   burned-in lines are never faded and the corners have no step. */
	-webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(0deg, #000 12%, transparent 20%);
	mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(0deg, #000 12%, transparent 20%);
}
.video__card.is-expanded:not(.is-resetting) .video__poster { filter: blur(48px) brightness(.7) saturate(1.1); scale: 1.2; translate: 0 0; }
/* The blur/zoom eases only as the player opens and closes; never on the card, where the hover parallax sets the
   zoom every frame (an always-on ease made the first hover lag and then jump, Oct 21). */
.video__card.is-expanded .video__poster { transition: filter .5s, scale .5s; }
@media (prefers-reduced-motion: reduce) { .video__media, .video__poster { transition: none; } }
.video__card.is-expanded .video__play,
.video__card.is-expanded .video__meta { opacity: 0; visibility: hidden; }

.video__close, .video__controls, .video__missing { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.video__card.is-expanded .video__close,
.video__card.is-expanded .video__controls,
.video__card.is-expanded .video__missing { opacity: 1; visibility: visible; transition: opacity .4s .5s; }
.video__card[data-src=""] .video__toggle, .video__card[data-src=""] .video__progress,
.video__card.is-ended .video__toggle, .video__card.is-ended .video__progress { visibility: hidden; }

.video__close {
	flex: none; min-height: 2.75rem; padding: 0 1rem;
	border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 1.375rem;
	background: rgba(0, 0, 0, .2); color: #fff; font: 400 .875rem/1 var(--font-sans);
}
.video__controls {
	position: absolute; z-index: 7; left: 1rem; right: 1rem; bottom: env(safe-area-inset-bottom, 0px); height: 4rem;
	display: flex; align-items: center; gap: .875rem;
}
.video__toggle {
	flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 50%; background: rgba(0, 0, 0, .2); color: #fff;
}
.video__toggle svg { width: 1rem; height: 1rem; }
/* Optional real full screen (owner, Oct 21): the open only fills the window; this asks for the whole display. */
.video__fs {
	flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 50%; background: rgba(0, 0, 0, .2); color: #fff;
}
.video__fs[hidden] { display: none; }
.video__fs svg { width: 1.125rem; height: 1.125rem; }
.video__fs-off, .video__fs[aria-pressed="true"] .video__fs-on { display: none; }
.video__fs[aria-pressed="true"] .video__fs-off { display: block; }
.video__toggle-play, .is-paused-video .video__toggle-pause { display: none; }
.is-paused-video .video__toggle-play { display: block; }
/* The timeline: a 3px track inside a 2.75rem hit area; the handle shows on hover, focus and while dragging. */
.video__progress { position: relative; flex: 1; display: flex; align-items: center; height: 2.75rem; cursor: pointer; touch-action: none; }
.video__progress-track { position: relative; flex: 1; height: .1875rem; border-radius: 2px; background: rgba(255, 255, 255, .35); transition: height .15s; }
.video__progress i { position: relative; display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; }
.video__progress i::after {
	content: ""; position: absolute; right: -.4375rem; top: 50%; width: .875rem; height: .875rem; margin-top: -.4375rem;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transform: scale(0); transition: transform .15s;
}
.video__progress:hover .video__progress-track, .video__progress:focus-visible .video__progress-track, .video__progress.is-seeking .video__progress-track { height: .3125rem; }
.video__progress:hover i::after, .video__progress:focus-visible i::after, .video__progress.is-seeking i::after { transform: scale(1); }
.video__progress:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: .25rem; }
@media (hover: none) { .video__progress i::after { transform: scale(1); } }   /* touch: the handle is always there to grab */
.video__missing {
	position: absolute; z-index: 4; left: 50%; bottom: 5.625rem; transform: translateX(-50%);
	width: max-content; max-width: calc(100% - 2.5rem);
	padding: .5rem .875rem; border-radius: .375rem; background: rgba(10, 14, 12, .78);
	color: #fff; font: 400 .8125rem/1.4 var(--font-sans); text-align: center;
}

.video__end {
	position: absolute; z-index: 6; inset: 0;
	display: flex; flex-direction: column; justify-content: center; gap: 1.375rem;
	padding: 1.75rem var(--gutter);
	background: rgba(18, 24, 20, .78); -webkit-backdrop-filter: blur(.375rem); backdrop-filter: blur(.375rem); color: #fff;
	opacity: 0; visibility: hidden; transition: opacity .9s var(--ease-out), visibility 0s .9s;
}
.video__card.is-ended .video__end { opacity: 1; visibility: visible; transition: opacity .9s var(--ease-out); }
.video__end-q { font: 300 2.125rem/1.1 var(--font-display); }
.video__end-row { display: grid; gap: .75rem; }

/* While the film plays the header and dots step aside. */
.is-video-playing .site-header, .is-video-playing .chapter-dots { opacity: 0; pointer-events: none; }
.is-video-playing, .is-video-playing body { overflow: hidden; }

@media (min-width: 1024px) {
	.video__end-q { max-width: 43.75rem; font-size: 3.5rem; }
	.video__end-row { display: flex; flex-wrap: wrap; gap: 1rem; }
	.video__controls { left: 1.5rem; right: 1.5rem; }
}

/* ---------- Scene director (assets/js/director.js) ---------- */
/* Chapters stack as full-screen layers; transforms come from the script. Without .js-director the page scrolls. */
html.js-director, .js-director body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.js-director .chapters { position: fixed; inset: 0; overflow: hidden; }
.js-director .chapter { position: absolute; inset: 0; min-height: 0; visibility: hidden; }
.js-director .chapter.is-visible { visibility: visible; }
.js-director .chapter::after {
	content: ""; position: absolute; z-index: 40; inset: 0; pointer-events: none;
	background: #0b130d; opacity: var(--dim, 0);
}
/* Page-turn edge so white Listen still reads over the light hero. */
.js-director .listen { box-shadow: 0 -24px 3.75rem -24px rgba(20, 40, 30, .28); }
/* Desktop: Listen peeking at the bottom of the hero and during the page turn (director.js; review item 17). */
.js-director .listen.is-peek {
	--hu: min(1vw, 1.5356rem);
	box-shadow: 0 calc(var(--hu) * -.4) calc(var(--hu) * 1.6) rgba(20, 40, 20, .18), 0 calc(var(--hu) * -.08) calc(var(--hu) * .2) rgba(20, 40, 20, .12);
	background-image: linear-gradient(180deg, rgba(20, 40, 20, .07), rgba(20, 40, 20, 0) calc(var(--hu) * 1.1));
}
.js-director .hero-peek { display: none; }   /* the director uses the real Listen page instead */
.js-director .hero__bg { will-change: transform; }
/* With the director: desktop, the band waits below the screen and slides up once Join settles (director.js);
   phones, Join scrolls (its content at the top, the band after it in flow). */
/* The footnotes wait below the screen; the director slides them up after Join and lifts Join by their height.
   Taller than the screen (small phones): they scroll inside, then hand back to Join from their top. */
.js-director .legal {
	position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: calc(100% - 5.5rem);   /* never under the header */
	overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	transform: translateY(100%);
}
.js-director .legal.is-visible { box-shadow: 0 -10px 1.875rem -12px rgba(0, 0, 0, .25); }
/* While Join is lifted, its copy passes under the header: a green backing behind the header hides it there. */
.site-header::before {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: calc(-1 * var(--header-top)); bottom: -1.25rem;
	background: var(--green); opacity: 0; transition: opacity .25s;
}
.is-legal-open .site-header::before { opacity: 1; }

/* ---------- Entrances (keyed on .is-arrived; skipped entirely with reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
	/* Hero: headline lines rise, then eyebrow, subhead and buttons fade up. */
	.hero .h1__line > * { transition: transform 1.1s var(--ease-out); }
	.hero .h1__line + .h1__line > * { transition-delay: .12s; }
	.hero .eyebrow, .hero .lead, .hero .lotd, .hero__ctas { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
	.hero .lead { transition-delay: .35s; }
	.hero .lotd { transition-delay: .42s; }
	.hero__ctas { transition-delay: .5s; }
	.js .hero:not(.is-arrived) .h1__line > * { transform: translateY(112%); }
	.js .hero:not(.is-arrived) .eyebrow,
	.js .hero:not(.is-arrived) .lead,
	.js .hero:not(.is-arrived) .lotd,
	.js .hero:not(.is-arrived) .hero__ctas { opacity: 0; transform: translateY(1rem); }

	/* Listen: words rise, then turn from pale grey to ink one after another; "whole story." ends green. */
	.listen__para { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
	.js .listen:not(.is-arrived) .listen__para { opacity: 0; transform: translateY(1rem); }
	.listen__statement .w > span {
		transition: transform .9s var(--ease-out) calc(var(--k) * .06s), color .7s ease calc(.5s + var(--k) * .12s);
	}
	.js .listen:not(.is-arrived) .listen__statement .w > span { transform: translateY(112%); color: var(--pale); }
	.js .listen:not(.is-arrived) .listen__statement em .w > span { color: #cfe3cb; }

	/* Join: copy and button rise in as the mark opens. */
	.join__copy, .join__cta { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
	.join__cta { transition-delay: .15s; }
	.js .join:not(.is-arrived) .join__copy,
	.js .join:not(.is-arrived) .join__cta { opacity: 0; transform: translateY(1rem); }
}
/* Each word rises inside its own clip. The italic lean overhangs the word box (the top of "d", the foot of "f"),
   so the clip gets room on both sides, given back by negative margins so spacing doesn't change (Oct 15). */
.listen__statement .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .16em .1em .08em; margin: 0 -.16em -.1em -.08em; }
.listen__statement .w > span { display: inline-block; }

/* Sheet: blinking caret while "Diabetes," types in. */
.sheet__hand.is-typing::after {
	content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 2px; vertical-align: -.1em;
	background: var(--sheet-hand); animation: ltd-blink 1s steps(1) infinite;
}
@keyframes ltd-blink { 50% { opacity: 0; } }

/* Reduced motion: the paper drop becomes a 400 ms fade, no travel, no sway (review item 14d). The duration beats the
   global reduced-motion rule below on purpose. */
@media (prefers-reduced-motion: reduce) {
	.js .sheet:not(.is-arrived) .sheet__paper { opacity: 0; }
	.js .sheet.is-arrived .sheet__paper { animation: ltd-fade-in .4s ease-out both; animation-duration: .4s !important; }
}
@keyframes ltd-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Motion states ---------- */
/* Pause motion (header toggle) and the reduced-motion preference both stop non-essential movement. */
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}