/*
 * THSA Membership Landing
 * Full-screen, mobile-first, scoped to .thsa-ml / .thsa-ml-body.
 * Dark theatre ground (not pure black), ivory text on solid panels,
 * gold and oxblood as accents only. Text contrast >= 4.5:1 everywhere.
 */

/* ---------- Tokens ---------- */
.thsa-ml-html {
	--ml-ground: #17120f;
	--ml-panel: #201915;
	--ml-panel-2: #2b221d;
	--ml-text: #f4ede1;
	--ml-muted: #d3c6b5;
	--ml-line: #6f6152;        /* decorative rules */
	--ml-control: #9a8a76;     /* control borders, >= 3:1 on panel */
	--ml-gold: #d8b25e;
	--ml-gold-hi: #ecd08e;
	--ml-on-gold: #17120f;
	--ml-oxblood: #7d2830;
	--ml-focus: #f7dd98;

	--ml-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
	--ml-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;

	--ml-gutter: 1.25rem;
	--ml-top-h: 3.75rem;
	--ml-dock-h: 4.75rem;
	--ml-dock-space: var(--ml-dock-h); /* landing.js replaces this with the dock's measured height */
	--ml-admin: var(--wp-admin--admin-bar--height, 0px);
	--ml-ease: cubic-bezier(.65, 0, .35, 1);

	background: var(--ml-ground);
}

@media (min-width: 64em) {
	.thsa-ml-html {
		--ml-gutter: clamp(2rem, 4vw, 4.5rem);
		--ml-top-h: 4.5rem;
		--ml-dock-h: 5.5rem;
	}
}

/* ---------- Reset inside the overlay ---------- */
.thsa-ml-body {
	margin: 0;
	background: var(--ml-ground);
	color: var(--ml-text);
	font-family: var(--ml-body);
	font-size: 1.125rem;          /* 18px base for an older audience */
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.thsa-ml *, .thsa-ml *::before, .thsa-ml *::after { box-sizing: border-box; }
.thsa-ml img { display: block; max-width: 100%; }
.thsa-ml p, .thsa-ml h1, .thsa-ml h2, .thsa-ml h3, .thsa-ml ul, .thsa-ml fieldset { margin: 0; }
.thsa-ml fieldset { border: 0; padding: 0; min-width: 0; }

.thsa-ml .screen-reader-text,
.thsa-ml-body .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

:where(.thsa-ml) a { color: inherit; } /* zero-specificity default, so button and link classes win */
.thsa-ml :focus-visible {
	outline: 3px solid var(--ml-focus);
	outline-offset: 3px;
	border-radius: 4px;
}
.thsa-ml [tabindex="-1"]:focus { outline: none; }

.thsa-ml-i {
	width: 1.25em; height: 1.25em;
	fill: none; stroke: currentColor; stroke-width: 1.75;
	stroke-linecap: round; stroke-linejoin: round;
	flex: none;
}

/* Keyboard and screen-reader users need this to jump the header, so it
   stays in the markup; it is simply out of sight until it has focus.
   translateY(-200%) was cutting it fine — 200% of its own height barely
   cleared the top edge, and the taller admin bar on phones left a sliver
   of gold showing above the page. Now it moves a distance that accounts
   for the admin bar, and opacity makes the result independent of the
   geometry either way. */
.thsa-ml-skip {
	position: fixed; left: 1rem; top: calc(var(--ml-admin) + .75rem);
	z-index: 100002;
	padding: .75rem 1rem;
	background: var(--ml-gold); color: var(--ml-on-gold);
	font-weight: 700; text-decoration: none; border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transform: translateY( calc( -100% - var(--ml-admin) - 2rem ) );
}
.thsa-ml-skip:focus {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* ---------- Top bar ---------- */
.thsa-ml-top {
	/* Static on phones and tablets: a fixed bar costs vertical room on the
	   screens with least of it, and the page is short enough to scroll
	   back to. It becomes fixed at 64em, below. */
	position: relative; z-index: 100000;
	left: 0; right: 0;
	height: var(--ml-top-h);
	padding: 0 var(--ml-gutter);
	display: flex; align-items: center; gap: 1rem;
	background: rgba(23, 18, 15, .9);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid rgba(111, 97, 82, .45);
}

.thsa-ml-brand {
	display: inline-flex; align-items: center; gap: .75rem;
	min-height: 44px;
	text-decoration: none;
}
.thsa-ml-brand__mark {
	font-family: var(--ml-display);
	font-weight: 700; font-size: 1.375rem; letter-spacing: .04em;
	color: var(--ml-gold);
}
.thsa-ml-brand__text {
	font-size: .8125rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--ml-muted);
	padding-left: .75rem;
	border-left: 1px solid var(--ml-line);
}

.thsa-ml .thsa-ml-counter {
	display: none;
	margin: 0 auto;
	font-variant-numeric: tabular-nums;
	font-size: .875rem; letter-spacing: .12em;
	color: var(--ml-muted);
	align-items: center; gap: .75rem;
}
.thsa-ml-counter__now { color: var(--ml-text); font-weight: 600; }
.thsa-ml-counter__sep { width: 3rem; height: 1px; background: var(--ml-line); }

.thsa-ml-top__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.thsa-ml-iconbtn,
.thsa-ml-account {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-width: 44px; min-height: 44px;
	padding: 0 .75rem;
	border: 1px solid var(--ml-control);
	border-radius: 999px;
	background: transparent;
	color: var(--ml-text);
	font: 600 .9375rem/1 var(--ml-body);
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.thsa-ml-iconbtn { padding: 0; }
.thsa-ml-iconbtn:hover, .thsa-ml-account:hover { border-color: var(--ml-gold); color: var(--ml-gold-hi); }
.thsa-ml-motion .thsa-ml-i--play { display: none; }
.thsa-ml-motion[aria-pressed="true"] .thsa-ml-i--pause { display: none; }
.thsa-ml-motion[aria-pressed="true"] .thsa-ml-i--play { display: block; }

/* Section counter removed from the top bar (v1.1.9). */

/* ---------- Scenes ---------- */
.thsa-ml-main { outline: none; }

.thsa-ml-scene {
	position: relative;
	/* No full-viewport floor on small screens. Below the split breakpoint
	   the panel and the photo stack, and forcing 100svh left a band of
	   empty ground under short sections. The scene takes its height from
	   its content here; the full-screen treatment starts at 64em, where
	   the two-column layout actually needs it. */
	padding-top: calc(var(--ml-top-h) + var(--ml-admin));
	padding-bottom: calc(var(--ml-dock-space) + 1.5rem);
	background: var(--ml-ground);
	overflow: hidden;
	isolation: isolate;
}
.thsa-ml-scene + .thsa-ml-scene { border-top: 1px solid rgba(111, 97, 82, .35); }

/* Image stage */
.thsa-ml-media {
	position: relative;
	height: 42svh; min-height: 15rem;
	overflow: hidden;
	background: var(--ml-panel-2);
}
.thsa-ml-media__stage { position: relative; height: 100%; }
.thsa-ml-media__pic { position: absolute; inset: 0; }
.thsa-ml-media__pic, .thsa-ml-media img {
	width: 100%; height: 100%;
}
.thsa-ml-media img {
	object-fit: cover;
	transform: scale(1.06);
	transform-origin: 60% 40%;
	/* No will-change here on purpose: see the motion block below. */
}
.thsa-ml-media::after {             /* soft seam into the panel (decorative only) */
	content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
	background: linear-gradient(to bottom, rgba(23, 18, 15, 0), var(--ml-panel));
	pointer-events: none;
}

.thsa-ml-numeral {
	position: absolute;
	right: var(--ml-gutter); bottom: -.12em;
	z-index: 1;
	font-family: var(--ml-display);
	font-weight: 500;
	font-size: clamp(6rem, 30vw, 19rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(236, 208, 142, .9);
	pointer-events: none;
	user-select: none;
}

/* Text panel (always a solid surface, never text-on-photo) */
.thsa-ml-panel {
	position: relative; z-index: 2;
	background: var(--ml-panel);
	padding: 2rem var(--ml-gutter) 3rem;
	display: flex; flex-direction: column; gap: 1.25rem;
}

.thsa-ml-kicker {
	display: flex; align-items: center; gap: .75rem;
	font-size: .875rem; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--ml-gold);
}
.thsa-ml-kicker__num {
	font-variant-numeric: tabular-nums;
	color: var(--ml-muted);
	padding-right: .75rem;
	border-right: 1px solid var(--ml-line);
}

.thsa-ml-display,
.thsa-ml-title {
	font-family: var(--ml-display);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.015em;
	color: var(--ml-text);
	text-wrap: balance;
}
.thsa-ml-display { font-size: clamp(2.5rem, min(11vw, 10.5svh), 6.5rem); }
.thsa-ml-title   { font-size: clamp(3rem, 13vw, 7.5rem); }

.thsa-ml-lede { max-width: 38rem; color: var(--ml-muted); font-size: 1.1875rem; }
.thsa-ml-welcome { font-size: 1.25rem; color: var(--ml-gold-hi); font-weight: 600; }

.thsa-ml-price {
	display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
	padding: .25rem 0 .5rem;
	border-bottom: 1px solid var(--ml-line);
}
.thsa-ml-price__amount {
	font-family: var(--ml-display);
	font-size: clamp(2.5rem, 9vw, 3.75rem);
	font-weight: 500; line-height: 1;
	color: var(--ml-gold);
	font-variant-numeric: lining-nums;
}
.thsa-ml-price__period { font-size: 1.125rem; color: var(--ml-muted); }

.thsa-ml-benefits { list-style: none; padding: 0; display: grid; gap: .625rem; }
.thsa-ml-benefits li {
	position: relative; padding-left: 1.75rem;
}
.thsa-ml-benefits li::before {
	content: ""; position: absolute; left: .125rem; top: .6em;
	width: .75rem; height: .375rem;
	border-left: 2px solid var(--ml-gold); border-bottom: 2px solid var(--ml-gold);
	transform: rotate(-45deg);
}
.thsa-ml-benefits--compact { gap: .375rem; font-size: 1.0625rem; }

.thsa-ml-note { font-size: 1rem; color: var(--ml-muted); max-width: 36rem; }

.thsa-ml-link {
	color: var(--ml-gold-hi);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
	font-weight: 600;
}
.thsa-ml-link:hover { color: var(--ml-text); }

/* Buttons */
.thsa-ml-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .25rem; }
.thsa-ml-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
	min-height: 3.25rem;
	padding: .75rem 1.5rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font: 700 1.0625rem/1.2 var(--ml-body);
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ml-ease);
}
.thsa-ml-btn--gold { background: var(--ml-gold); color: var(--ml-on-gold); }
.thsa-ml-btn--gold:hover { background: var(--ml-gold-hi); }
.thsa-ml-btn--ghost { border-color: var(--ml-control); color: var(--ml-text); background: transparent; }
.thsa-ml-btn--ghost:hover { border-color: var(--ml-gold); color: var(--ml-gold-hi); }
.thsa-ml-btn:active { transform: translateY(1px); }
.thsa-ml-actions .thsa-ml-btn { flex: 1 1 auto; }

/* Member ribbon */
.thsa-ml-ribbon {
	display: flex; gap: .75rem; align-items: flex-start;
	padding: 1rem 1.125rem;
	background: var(--ml-oxblood);
	color: #fff7ec;
	border-radius: 10px;
}
.thsa-ml-ribbon .thsa-ml-i { margin-top: .2em; color: var(--ml-gold-hi); }
.thsa-ml-ribbon .thsa-ml-link { display: inline-block; margin-top: .25rem; color: #fff7ec; }
.thsa-ml-ribbon p { margin: 0; }

/* The member band sits directly under the header, full width, so it reads
   the same on a phone as it does on a desktop. Square corners because it
   meets the header's bottom edge. */
.thsa-ml-ribbon--top {
	/* Not a flex row: the check, the sentence and the link should wrap as
	   one piece of running text rather than break onto lines of their own. */
	display: block;
	/* The header scrolls away at this width, so the band takes the top
	   edge of the viewport and stays there. */
	position: sticky; z-index: 99999;
	top: var(--ml-admin);
	padding: .625rem var(--ml-gutter);
	border-radius: 0;
	border-bottom: 1px solid rgba(111, 97, 82, .45);
	font-size: .9375rem;
	text-align: center;
}
.thsa-ml-ribbon--top p { display: inline; }
.thsa-ml-ribbon--top .thsa-ml-i { display: inline-block; vertical-align: -.2em; margin: 0 .375rem 0 0; }
.thsa-ml-ribbon--top .thsa-ml-link { display: inline; margin: 0 0 0 .375rem; }

@media (min-width: 64em) {
	/* The header is fixed at this width, so it already owns the top edge:
	   the band pins directly beneath it with nothing in between. The margin
	   is the room the out-of-flow header takes up, not padding above the
	   band. */
	.thsa-ml-ribbon--top {
		top: calc(var(--ml-admin) + var(--ml-top-h));
		margin-top: var(--ml-top-h);
	}
	/* The hero already reserves the header's height; the band has now taken
	   that space, so it does not need to a second time. */
	.thsa-ml-ribbon--top + .thsa-ml-main .thsa-ml-scene--intro { padding-top: 0; }
}

/* A membership cannot be bought twice: the call to action stays in place
   and legible, but is plainly not usable. */
.thsa-ml-btn[disabled] {
	cursor: not-allowed;
	background: transparent;
	border-color: var(--ml-line);
	color: var(--ml-muted);
	/* The gold button's light halo is drawn for dark letters on a gold
	   fill. With the fill gone it just blurs the muted text. */
	text-shadow: none;
}
.thsa-ml-btn[disabled] .thsa-ml-i { filter: none; }
.thsa-ml-btn[disabled]:hover { background: transparent; }
.thsa-ml-btn[disabled]:active { transform: none; }

/* ---------- Optional recurring gift (a native disclosure) ---------- */

/* <details> rather than a scripted panel: the control still opens with
   JavaScript off, and because no amount is pre-checked a closed panel adds
   nothing to the total either way. */
.thsa-ml-gift { border-top: 1px solid var(--ml-line); padding-top: 1.25rem; }
.thsa-ml-gift__toggle {
	display: inline-flex; align-items: center; gap: .625rem;
	padding: .5rem .875rem .5rem .5rem;
	border: 1.5px solid var(--ml-control);
	border-radius: 999px;
	color: var(--ml-text);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: border-color .2s, color .2s;
}
.thsa-ml-gift__toggle::-webkit-details-marker { display: none; }
.thsa-ml-gift__toggle:hover { border-color: var(--ml-gold); color: var(--ml-gold-hi); }
.thsa-ml-gift__toggle:focus-visible { outline: 2px solid var(--ml-focus); outline-offset: 2px; }
.thsa-ml-gift__plus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.75rem; height: 1.75rem;
	border-radius: 999px;
	background: var(--ml-panel-2);
	color: var(--ml-gold);
	transition: transform .2s var(--ml-ease);
}
.thsa-ml-gift[open] .thsa-ml-gift__plus { transform: rotate(45deg); }
.thsa-ml-gift__intro { margin: 1rem 0 0; color: var(--ml-muted); font-size: .9375rem; }
.thsa-ml-gift .thsa-ml-amounts { margin-top: 1rem; }

/* ---------- Forms: segmented control, amount chips ---------- */
.thsa-ml-form { display: flex; flex-direction: column; gap: 1.25rem; }
.thsa-ml-legend {
	padding: 0; margin-bottom: .625rem;
	font-size: 1rem; font-weight: 600; color: var(--ml-text);
}

.thsa-ml-seg__track {
	display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
	padding: 4px;
	border: 1px solid var(--ml-control);
	border-radius: 999px;
}
.thsa-ml-seg__opt, .thsa-ml-amt { position: relative; }
.thsa-ml-seg__opt input, .thsa-ml-amt input {
	position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.thsa-ml-seg__opt span {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 0 1.25rem;
	border-radius: 999px;
	font-weight: 600; color: var(--ml-muted);
	transition: background-color .2s, color .2s;
}
.thsa-ml-seg__opt input:checked + span { background: var(--ml-text); color: var(--ml-ground); }
.thsa-ml-seg__opt input:focus-visible + span,
.thsa-ml-amt input:focus-visible + span { outline: 3px solid var(--ml-focus); outline-offset: 2px; }

.thsa-ml-chips {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
}
.thsa-ml-amt span {
	display: flex; align-items: center; justify-content: center;
	min-height: 3rem; padding: 0 .5rem;
	border: 1px solid var(--ml-control);
	border-radius: 10px;
	font-weight: 700; font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	color: var(--ml-text);
	transition: background-color .2s, border-color .2s, color .2s;
}
.thsa-ml-amt:hover span { border-color: var(--ml-gold); }
.thsa-ml-amt input:checked + span { background: var(--ml-gold); border-color: var(--ml-gold); color: var(--ml-on-gold); }

.thsa-ml-other { margin-top: .75rem; display: grid; gap: .375rem; }
.thsa-ml-other label { font-size: 1rem; font-weight: 600; }
.thsa-ml-other__wrap { position: relative; display: block; max-width: 14rem; }
.thsa-ml-other__cur {
	position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
	color: var(--ml-muted); font-weight: 600;
}
.thsa-ml-other input {
	width: 100%; min-height: 3rem;
	padding: .5rem 1rem .5rem 2rem;
	background: var(--ml-ground);
	color: var(--ml-text);
	border: 1px solid var(--ml-control);
	border-radius: 10px;
	font: 600 1.125rem/1 var(--ml-body);
}
.thsa-ml-other input:focus { border-color: var(--ml-gold); }
.thsa-ml-other input[aria-invalid="true"] { border-color: #f2a097; }
.js .thsa-ml-other { display: none; }
.js .thsa-ml-other.is-open { display: grid; }

.thsa-ml-total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	padding: 1rem 0 .25rem;
	border-top: 1px solid var(--ml-line);
}
.thsa-ml-total__label { font-weight: 600; color: var(--ml-muted); }
.thsa-ml-total__value {
	font-family: var(--ml-display);
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	color: var(--ml-gold);
	font-variant-numeric: lining-nums tabular-nums;
}

.thsa-ml-impact {
	min-height: 3.2em;
	padding-left: 1rem;
	border-left: 2px solid var(--ml-oxblood);
	color: var(--ml-muted);
	font-style: italic;
}

/* ---------- Intro scene ---------- */
.thsa-ml-scene--intro { display: flex; flex-direction: column; justify-content: flex-end; }
.thsa-ml-media.thsa-ml-media--full { position: absolute; inset: 0; height: auto; min-height: 0; z-index: -1; }
.thsa-ml-media--full::after {
	height: 55%;
	background: linear-gradient(to bottom, rgba(23, 18, 15, 0), rgba(23, 18, 15, .85));
}
.thsa-ml-intro {
	display: flex; flex-direction: column; gap: 1rem;
	padding: 16svh var(--ml-gutter) 1.5rem;
}
.thsa-ml-panel--intro {
	padding: 1.75rem 1.5rem;
	border-radius: 16px;
	background: rgba(32, 25, 21, .95);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.thsa-ml-notice {
	padding: 1.25rem 1.5rem;
	border-radius: 16px;
	background: var(--ml-oxblood);
	color: #fff7ec;
	display: grid; gap: .5rem;
}
.thsa-ml-notice__title { font-family: var(--ml-display); font-size: 1.375rem; font-weight: 600; line-height: 1.2; }
.thsa-ml-notice p { font-size: 1.0625rem; }
.thsa-ml-notice .thsa-ml-link { color: #fff7ec; }

/* ---------- FAQ scene ---------- */
.thsa-ml-scene--faq { display: flex; flex-direction: column; background: var(--ml-panel); }
.thsa-ml-faq {
	flex: 1;
	padding: 2.5rem var(--ml-gutter);
	display: grid; gap: 2rem; align-content: center;
}
.thsa-ml-faq__head { display: grid; gap: 1.25rem; align-content: start; }
.thsa-ml-faq__list { display: grid; }
.thsa-ml-q { border-top: 1px solid var(--ml-line); }
.thsa-ml-q:last-child { border-bottom: 1px solid var(--ml-line); }
.thsa-ml-q summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 3.5rem; padding: .875rem 0;
	font-weight: 600; font-size: 1.1875rem;
	cursor: pointer; list-style: none;
}
.thsa-ml-q summary::-webkit-details-marker { display: none; }
.thsa-ml-q summary .thsa-ml-i { color: var(--ml-gold); transition: transform .3s var(--ml-ease); }
.thsa-ml-q[open] summary .thsa-ml-i { transform: rotate(45deg); }
.thsa-ml-q p { padding: 0 0 1.25rem; color: var(--ml-muted); max-width: 44rem; }

.thsa-ml-foot {
	padding: 1.5rem var(--ml-gutter) 2rem;
	border-top: 1px solid var(--ml-line);
	display: grid; gap: .375rem;
	font-size: .9375rem; color: var(--ml-muted);
}

/* ---------- Dock ---------- */
.thsa-ml-dock {
	position: fixed; z-index: 100000;
	left: 0; right: 0; bottom: 0;
	min-height: var(--ml-dock-h);
	padding-bottom: env(safe-area-inset-bottom, 0);
	background: rgba(23, 18, 15, .94);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	border-top: 1px solid rgba(111, 97, 82, .55);
}
.thsa-ml-dock__progress { position: absolute; left: 0; right: 0; top: -1px; height: 2px; }
.thsa-ml-dock__progress span {
	display: block; height: 100%; width: 100%;
	background: var(--ml-gold);
	transform-origin: left; transform: scaleX(0);
}
.thsa-ml-dock__list {
	list-style: none; margin: 0;
	padding: .5rem calc(var(--ml-gutter) - .25rem);
	display: flex; gap: .25rem;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.thsa-ml-dock__list::-webkit-scrollbar { display: none; }
.thsa-ml-dock__item { flex: none; scroll-snap-align: start; }

/* There is no scrollbar to say the dock scrolls, so a shadow banked against
   the right edge does it instead. landing.js clears `is-scrollable` when
   there is nothing left to reach. */
.thsa-ml-dock { overflow: hidden; }
.thsa-ml-dock::after {
	content: "";
	position: absolute; top: 0; bottom: 0; right: 0;
	width: 4rem;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
	background: linear-gradient(to right, rgba(12, 9, 7, 0), rgba(12, 9, 7, .85));
}
.thsa-ml-dock.is-scrollable::after { opacity: 1; }

.thsa-ml-chip {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: .5rem;
	align-content: center;
	min-height: 3.5rem;
	padding: .375rem .875rem;
	border-radius: 10px;
	text-decoration: none;
	color: var(--ml-muted);
	white-space: nowrap;
	transition: background-color .25s, color .25s;
}
.thsa-ml-chip__num {
	grid-row: 1 / span 2; align-self: center;
	font-variant-numeric: tabular-nums;
	font-size: .8125rem; letter-spacing: .08em;
	color: var(--ml-muted);
}
.thsa-ml-chip__label { font-weight: 700; font-size: 1rem; color: var(--ml-text); line-height: 1.25; }
.thsa-ml-chip__sub { font-size: .875rem; line-height: 1.25; }
.thsa-ml-chip:hover { background: var(--ml-panel-2); }
.thsa-ml-chip[aria-current="true"] { background: #43362c; box-shadow: inset 0 0 0 1px rgba(216, 178, 94, .28); }
.thsa-ml-chip[aria-current="true"]::after {
	content: ""; position: absolute; left: .875rem; right: .875rem; bottom: 4px;
	height: 2px; border-radius: 2px; background: var(--ml-gold);
}
.thsa-ml-chip[aria-current="true"] .thsa-ml-chip__num { color: var(--ml-gold); }

@media (min-width: 64em) {
	/* One row at every width. A grid of fixed columns wrapped once the
	   sections outgrew it; scrolling sideways keeps the dock a single band
	   however many sections there are. */
	.thsa-ml-dock__list {
		gap: .5rem;
		padding: .75rem var(--ml-gutter);
	}
	/* Chips keep the roomy proportions they had as grid columns. Seven of
	   them no longer fit across, which is the point: the row runs past the
	   right edge and the shadow invites the reader to push it along. */
	.thsa-ml-chip { min-height: 4rem; min-width: 12rem; padding: .5rem 1rem; column-gap: .875rem; }
	.thsa-ml-chip__num { font-size: .9375rem; }
	.thsa-ml-chip__label { font-size: 1.0625rem; }
}

/* ---------- Tablet ---------- */
@media (min-width: 40em) {
	.thsa-ml-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.thsa-ml-chips--gift { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.thsa-ml-actions .thsa-ml-btn { flex: 0 0 auto; }
	.thsa-ml-intro { padding-top: 40svh; max-width: 44rem; }
	.thsa-ml-media { height: 48svh; }
}

/* ---------- Desktop: split scenes, magazine spreads ---------- */
@media (min-width: 64em) {
	.thsa-ml-scene {
		min-height: 100vh;
		min-height: 100svh;
		/* The admin bar pushes the page down, so a scene asking for the
		   whole viewport overshoots the bottom of the screen by its height.
		   The scenes justify their content to the end, so that overshoot
		   landed underneath the fixed dock. Zero for logged-out visitors. */
		min-height: calc(100svh - var(--ml-admin));
	}
	.thsa-ml-scene--split {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		align-items: stretch;
		padding-top: 0;
		padding-bottom: 0;
	}
	.thsa-ml-scene--split .thsa-ml-media {
		grid-column: 2; grid-row: 1;
		/* Fills the section however tall it grows. The stickiness moved to
		   the stage inside: pinning the box itself at one viewport height
		   left a strip of bare ground whenever the panel beside it got
		   taller than the screen. */
		align-self: stretch;
		height: auto;
	}
	.thsa-ml-scene--split .thsa-ml-media__stage {
		/* Fills the column, whatever height the section grows to. This was
		   sticky at one viewport height so the photo would hold still as a
		   tall panel scrolled past, but the scene sets `overflow: hidden`,
		   which gives sticky no scrolling ancestor to work against -- so it
		   never stuck, and simply left bare ground below the photo once the
		   gift options opened. For a section that fits the screen 100% and
		   100svh come to the same thing, so nothing else changes. */
		position: relative;
		height: 100%;
	}
	.thsa-ml-scene--split .thsa-ml-media::after {
		inset: 0 auto 0 0; width: 22%; height: auto;
		background: linear-gradient(to right, var(--ml-panel), rgba(32, 25, 21, 0));
	}
	.thsa-ml-scene--split .thsa-ml-panel {
		grid-column: 1; grid-row: 1;
		justify-content: center;
		padding: calc(var(--ml-top-h) + var(--ml-admin) + 2rem) var(--ml-gutter) calc(var(--ml-dock-space) + 2rem);
		gap: 1rem;
	}
	.thsa-ml-scene--split .thsa-ml-numeral {
		left: -.08em; right: auto; bottom: calc(var(--ml-dock-space) - .1em);
	}

	/* Mirror every other spread */
	.thsa-ml-scene--left { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
	.thsa-ml-scene--left .thsa-ml-media { grid-column: 1; }
	.thsa-ml-scene--left .thsa-ml-panel { grid-column: 2; }
	.thsa-ml-scene--left .thsa-ml-media::after {
		inset: 0 0 0 auto;
		background: linear-gradient(to left, var(--ml-panel), rgba(32, 25, 21, 0));
	}
	.thsa-ml-scene--left .thsa-ml-numeral { left: auto; right: -.06em; }

	.thsa-ml-title { font-size: clamp(3.5rem, min(7.5vw, 12svh), 8rem); }

	/* The title reaches across the seam, like a magazine headline. */
	.thsa-ml-scene--right .thsa-ml-title { margin-right: -12vw; }
	.thsa-ml-scene--left .thsa-ml-title { margin-left: -12vw; }
	.thsa-ml-scene--split .thsa-ml-title {
		position: relative;
		isolation: isolate;
		width: max-content; max-width: calc(100% + 12vw);
		padding: .1em .2em .15em 0;
		/* A soft pool of the panel colour behind the letters instead of a hard box.
		   It stays near-solid under the text (so it reads over the photo) and
		   fades out well past the letters. */
		text-shadow: 0 0 .18em rgba(23, 18, 15, .7);
	}
	.thsa-ml-scene--split .thsa-ml-title::before {
		content: "";
		position: absolute;
		inset: -.05em -.45em;
		z-index: -1;
		pointer-events: none;
		background: radial-gradient(closest-side,
			rgba(32, 25, 21, 1) 0%,
			rgba(32, 25, 21, .95) 60%,
			rgba(32, 25, 21, .6) 85%,
			rgba(32, 25, 21, 0) 100%);
	}
	.thsa-ml-scene--left .thsa-ml-title { padding: .1em 0 .15em .2em; }
	/* Everything else in the panel sits above the heading's glow, so the glow can
	   never dim the label above it or the paragraph below it. */
	.thsa-ml-scene--split .thsa-ml-panel > :not(.thsa-ml-title) { position: relative; z-index: 1; }

	.thsa-ml-intro {
		flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem;
		max-width: none;
		/* No padding above at all: the scene already reserves the header's
		   full height, and `align-items: flex-end` pools any slack over the
		   card, so every pixel added here came straight off the bottom and
		   pushed the box under the dock on a laptop screen. */
		padding: 0 var(--ml-gutter) 1.25rem;
	}
	/* The hero has to be read whole on arrival, so it keeps a clear margin
	   over the dock rather than stopping right on it. */
	.thsa-ml-scene--intro { padding-bottom: calc(var(--ml-dock-space) + 1.5rem); }
	.thsa-ml-panel--intro { max-width: 46rem; padding: 2.5rem 2.75rem; }
	.thsa-ml-notice { max-width: 24rem; }

	.thsa-ml-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; padding-top: calc(var(--ml-top-h) + 3rem); }
}

@media (min-width: 64em) and (max-height: 56em) {
	.thsa-ml-scene--split .thsa-ml-panel { gap: .875rem; }
	.thsa-ml-title { font-size: clamp(3.25rem, min(6vw, 11svh), 6rem); }
	.thsa-ml-lede { font-size: 1.0625rem; }
	.thsa-ml-panel--intro { padding: 2rem 2.25rem; gap: 1rem; }
	.thsa-ml-notice { padding: 1rem 1.25rem; }
}

/* ---------- Motion (only when allowed and the scene is on screen) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .thsa-ml-scene.is-active .thsa-ml-media__pic--top img {
		animation: thsa-ml-drift 24s ease-in-out infinite alternate;
		/* Promoted only while it drifts. Hinting every image instead kept a
		   dozen full-bleed compositor layers alive at once; once Chrome hit
		   its layer budget it evicted and re-rastered them, and the two
		   backdrop-filter bars above had to re-sample their backdrop each
		   time -- which is what made the header and dock flicker. */
		will-change: transform;
	}
	.js .thsa-ml.is-still .thsa-ml-media img { animation-play-state: paused; }

	.js .thsa-ml-scene .thsa-ml-panel > *,
	.js .thsa-ml-scene .thsa-ml-intro > * {
		opacity: 0; transform: translateY(18px);
		transition: opacity .9s var(--ml-ease), transform .9s var(--ml-ease);
	}
	.js .thsa-ml-scene.is-seen .thsa-ml-panel > *,
	.js .thsa-ml-scene.is-seen .thsa-ml-intro > * { opacity: 1; transform: none; }
	.js .thsa-ml-scene.is-seen .thsa-ml-panel > :nth-child(2) { transition-delay: .08s; }
	.js .thsa-ml-scene.is-seen .thsa-ml-panel > :nth-child(3) { transition-delay: .16s; }
	.js .thsa-ml-scene.is-seen .thsa-ml-panel > :nth-child(4) { transition-delay: .24s; }
	.js .thsa-ml-scene.is-seen .thsa-ml-panel > :nth-child(n+5) { transition-delay: .32s; }
	.js .thsa-ml-scene.is-seen .thsa-ml-intro > :nth-child(2) { transition-delay: .25s; }

	.js .thsa-ml-numeral { opacity: 0; transform: translateY(6%); transition: opacity 1.2s var(--ml-ease), transform 1.2s var(--ml-ease); }
	.js .thsa-ml-scene.is-seen .thsa-ml-numeral { opacity: 1; transform: none; }

	.thsa-ml-dock__progress span { transition: transform .15s linear; }
}

/* Slow push-in, then back out again.
   This used to fade to opacity 0 at the end of every loop so it could snap
   back to the starting frame unseen. The header sits over this photo with a
   backdrop-filter, so that fade handed it a backdrop that changed completely
   once every 24 seconds, and the bar flickered on that cycle. Drifting out
   again instead of resetting removes the fade: the motion never needs to
   jump, so it never needs to hide. */
@keyframes thsa-ml-drift {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.16) translate3d(-2.5%, -1.5%, 0); }
}



@media (prefers-reduced-motion: reduce) {
	.thsa-ml *, .thsa-ml *::before, .thsa-ml *::after { transition: none !important; animation: none !important; }
	.thsa-ml-html { scroll-behavior: auto; }
}

/* ---------- Windows High Contrast ---------- */
@media (forced-colors: active) {
	.thsa-ml-amt input:checked + span,
	.thsa-ml-seg__opt input:checked + span { outline: 2px solid CanvasText; }
	.thsa-ml-chip[aria-current="true"] { outline: 2px solid CanvasText; }
}

/* ---------- Print ---------- */
@media print {
	.thsa-ml-top, .thsa-ml-dock, .thsa-ml-media { display: none; }
	.thsa-ml-scene { min-height: 0; padding: 0; }
}

/* Narrow phones: keep the Sign in label, drop the "Membership" label beside the wordmark. */
@media (max-width: 29.99em) {
	.thsa-ml-brand__text { border-left: 0; padding-left: 0; }
	.thsa-ml-brand__label { display: none; }
}

/* Welcome has no number: let the chip label take the full width. */
.thsa-ml-chip__label, .thsa-ml-chip__sub { grid-column: -2 / -1; }
.thsa-ml-chip:not(:has(.thsa-ml-chip__num)) { grid-template-columns: 1fr; }
.thsa-ml .thsa-ml-counter.is-empty { visibility: hidden; }

/* Desktop: keep each spread's text inside the frame between the top bar and the dock. */
@media (min-width: 64em) {
	.thsa-ml-scene--split .thsa-ml-panel { max-width: 46rem; }
	.thsa-ml-scene--left .thsa-ml-panel { justify-self: end; width: 100%; }
	.thsa-ml-benefits { gap: .375rem; }
	.thsa-ml-price { padding: 0 0 .375rem; }
	.thsa-ml-form { gap: .875rem; }
	.thsa-ml-legend { margin-bottom: .375rem; }
	.thsa-ml-total { padding-top: .625rem; }
	.thsa-ml-actions { padding-top: 0; }
	/* Member + Gift is the tallest spread: compact benefits, and a form laid out in rows. */
	.thsa-ml-scene--split .thsa-ml-benefits--compact {
		display: flex; flex-wrap: wrap; gap: .25rem 1.5rem;
		font-size: 1rem;
	}
	.thsa-ml-form[data-thsa-ml-plus] {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "seg seg" "amt amt" "total actions" "note note";
		column-gap: 1.5rem;
	}
	.thsa-ml-form[data-thsa-ml-plus] .thsa-ml-seg { grid-area: seg; display: flex; align-items: center; gap: 1rem; }
	.thsa-ml-form[data-thsa-ml-plus] .thsa-ml-seg .thsa-ml-legend { float: left; margin: 0; }
	.thsa-ml-form[data-thsa-ml-plus] .thsa-ml-amounts { grid-area: amt; }
	.thsa-ml-form[data-thsa-ml-plus] .thsa-ml-total { grid-area: total; align-self: center; justify-content: flex-start; }
	.thsa-ml-form[data-thsa-ml-plus] .thsa-ml-actions { grid-area: actions; align-self: end; }
	.thsa-ml-form[data-thsa-ml-plus] [data-thsa-ml-renew] { grid-area: note; }
}
@media (min-width: 64em) and (max-height: 60em) {
	.thsa-ml-title { font-size: clamp(3rem, min(6vw, 10svh), 5.5rem); }
	.thsa-ml-price__amount { font-size: 2.75rem; }
	.thsa-ml-lede { font-size: 1.0625rem; line-height: 1.5; }
	.thsa-ml-benefits { font-size: 1.0625rem; line-height: 1.45; }
	.thsa-ml-amt span { min-height: 2.75rem; }
	.thsa-ml-total__value { font-size: 1.875rem; }
	.thsa-ml-note { font-size: .9375rem; }
}

/* Desktop spreads: the text column's colour runs the full width of its half,
   so no strip of page background shows between the text and the photo. */
@media (min-width: 64em) {
	.thsa-ml-scene--split { background: var(--ml-panel); }
}

/* ---------- Toggle menu (Settings > THSA Donor Hub > Membership Landing) ---------- */
.thsa-ml-menubtn { gap: .5rem; }
@media (max-width: 29.99em) {
	.thsa-ml-menubtn { padding: 0; }
	.thsa-ml-menubtn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.thsa-ml-menu {
	position: fixed; inset: 0;
	z-index: 100001;
}
.thsa-ml-menu[hidden] { display: none; }
.thsa-ml-menu__backdrop {
	position: absolute; inset: 0;
	background: rgba(23, 18, 15, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.thsa-ml-menu__panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(28rem, 100%);
	padding: calc(var(--ml-admin) + 1rem) var(--ml-gutter) 2rem;
	background: var(--ml-panel);
	border-left: 1px solid var(--ml-line);
	box-shadow: -30px 0 80px rgba(0, 0, 0, .45);
	display: flex; flex-direction: column; gap: 1.5rem;
	overflow-y: auto; overscroll-behavior: contain;
}
.thsa-ml-menu__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--ml-top-h); }
.thsa-ml-menu__list, .thsa-ml-menu__list .sub-menu { list-style: none; margin: 0; padding: 0; }
.thsa-ml-menu__list > li { border-top: 1px solid var(--ml-line); }
.thsa-ml-menu__list > li:last-child { border-bottom: 1px solid var(--ml-line); }
.thsa-ml-menu__list a {
	display: flex; align-items: center;
	min-height: 3.5rem; padding: .5rem 0;
	font-family: var(--ml-display);
	font-size: 1.625rem; font-weight: 500; line-height: 1.2;
	color: var(--ml-text);
	text-decoration: none;
}
.thsa-ml-menu__list a:hover,
.thsa-ml-menu__list .current-menu-item > a { color: var(--ml-gold-hi); }
.thsa-ml-menu__list .sub-menu { padding: 0 0 .75rem 1rem; }
.thsa-ml-menu__list .sub-menu a {
	min-height: 2.75rem;
	font-family: var(--ml-body);
	font-size: 1.0625rem; font-weight: 600;
	color: var(--ml-muted);
}
.thsa-ml-menu__list .sub-menu a:hover { color: var(--ml-gold-hi); }

@media (prefers-reduced-motion: no-preference) {
	.thsa-ml-menu.is-open .thsa-ml-menu__panel { animation: thsa-ml-slide .45s var(--ml-ease); }
	.thsa-ml-menu.is-open .thsa-ml-menu__backdrop { animation: thsa-ml-fade .35s ease; }
}
@keyframes thsa-ml-slide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes thsa-ml-fade { from { opacity: 0; } to { opacity: 1; } }

.thsa-ml-body.thsa-ml-menu-open { overflow: hidden; }

/* Gold buttons: a soft light halo under the dark lettering crisps its edges
   against the light gold fill. */
.thsa-ml-btn--gold {
	text-shadow: 0 1px 0 rgba(255, 246, 222, .55), 0 0 6px rgba(255, 240, 205, .35);
}
.thsa-ml-btn--gold .thsa-ml-i { filter: drop-shadow(0 1px 0 rgba(255, 246, 222, .55)); }

/* ---------- Contact form pop-up (Questions section) ---------- */
.no-js .thsa-ml-js-only { display: none !important; }

.thsa-ml-modal {
	width: min(40rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	border: 1px solid var(--ml-line);
	border-radius: 16px;
	background: var(--ml-panel);
	color: var(--ml-text);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
	overflow: hidden;
}
.thsa-ml-modal::backdrop {
	background: rgba(23, 18, 15, .78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.thsa-ml-modal[open] { display: flex; flex-direction: column; }
.thsa-ml-modal__inner { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.thsa-ml-modal__head {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.25rem 1.5rem 1rem;
	border-bottom: 1px solid var(--ml-line);
}
.thsa-ml-modal__title {
	margin: 0;
	font-family: var(--ml-display);
	font-size: clamp(1.625rem, 4vw, 2.25rem);
	font-weight: 600; line-height: 1.1;
}
.thsa-ml-modal__body { padding: 1.5rem; overflow-y: auto; overscroll-behavior: contain; }
body.thsa-ml-dialog-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	.thsa-ml-modal[open] { animation: thsa-ml-pop .35s var(--ml-ease); }
	.thsa-ml-modal[open]::backdrop { animation: thsa-ml-fade .3s ease; }
}
@keyframes thsa-ml-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* Without JavaScript the form simply shows in the Questions section. */
.no-js .thsa-ml-modal { display: block; position: static; margin: 2rem var(--ml-gutter); width: auto; max-height: none; }

/* BuddyForms fields, restyled to the landing palette. */
.thsa-ml-contact-form label,
.thsa-ml-contact-form .bf_field_label,
.thsa-ml-contact-form legend {
	display: block;
	margin-bottom: .375rem;
	color: var(--ml-text);
	font-weight: 600; font-size: 1rem;
}
.thsa-ml-contact-form .form-group,
.thsa-ml-contact-form .bf_field_group { margin-bottom: 1.125rem; }
.thsa-ml-contact-form input[type="text"],
.thsa-ml-contact-form input[type="email"],
.thsa-ml-contact-form input[type="tel"],
.thsa-ml-contact-form input[type="url"],
.thsa-ml-contact-form input[type="number"],
.thsa-ml-contact-form select,
.thsa-ml-contact-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: .625rem .875rem;
	background: var(--ml-ground) !important;
	color: var(--ml-text) !important;
	border: 1px solid var(--ml-control) !important;
	border-radius: 10px;
	box-shadow: none !important;
	font: 500 1.0625rem/1.4 var(--ml-body);
}
.thsa-ml-contact-form textarea { min-height: 8rem; resize: vertical; }
.thsa-ml-contact-form input:focus,
.thsa-ml-contact-form select:focus,
.thsa-ml-contact-form textarea:focus { border-color: var(--ml-gold) !important; outline: 3px solid var(--ml-focus); outline-offset: 2px; }
.thsa-ml-contact-form .help-block,
.thsa-ml-contact-form .description,
.thsa-ml-contact-form small { color: var(--ml-muted); font-size: .9375rem; }
.thsa-ml-contact-form .error,
.thsa-ml-contact-form label.error { color: #f2a097; font-weight: 600; }
.thsa-ml-contact-form input[type="submit"],
.thsa-ml-contact-form button[type="submit"],
.thsa-ml-contact-form .bf-submit {
	min-height: 52px;
	padding: .75rem 1.75rem;
	border: 0 !important;
	border-radius: 999px;
	background: var(--ml-gold) !important;
	color: var(--ml-on-gold) !important;
	font: 700 1.0625rem/1.2 var(--ml-body);
	text-shadow: 0 1px 0 rgba(255, 246, 222, .55), 0 0 6px rgba(255, 240, 205, .35);
	cursor: pointer;
}
.thsa-ml-contact-form input[type="submit"]:hover,
.thsa-ml-contact-form button[type="submit"]:hover,
.thsa-ml-contact-form .bf-submit:hover { background: var(--ml-gold-hi) !important; }
.thsa-ml-contact-form .bf-alert,
.thsa-ml-contact-form .alert,
.thsa-ml-contact-form .bf-alert-success {
	padding: 1rem 1.125rem;
	background: var(--ml-panel-2) !important;
	border: 0 !important; border-left: 4px solid var(--ml-gold) !important;
	border-radius: 10px;
	color: var(--ml-text) !important;
}


/* No transform on these two on purpose. translateZ(0) was added here to
   force a compositor layer, but on an element with backdrop-filter a
   transform applies to the sampled backdrop as well, which is its own source
   of artefacts in Chrome. The layer promotion was not what fixed the earlier
   flicker either -- scoping will-change to the one photo that actually
   animates was. */

/* ---------- Topbar is only fixed on large screens ---------- */
@media (min-width: 64em) {
	.thsa-ml-top {
		position: fixed;
		top: var(--ml-admin);
	}
}

/* Below the split breakpoint the sections stack and should read as one
   continuous column: no fixed bar to clear at the top, and no dock gap
   between one panel and the next photo. Only the last scene keeps room
   for the dock, which is still fixed to the bottom of the viewport. */
@media (max-width: 63.99em) {
	.thsa-ml-scene {
		padding-top: 0;
		padding-bottom: 0;
	}
	.thsa-ml:not(.thsa-ml--coming-soon) .thsa-ml-main > .thsa-ml-scene:last-child {
		padding-bottom: calc(var(--ml-dock-space) + 1.5rem);
	}
	.thsa-ml-scene--intro .thsa-ml-intro {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

/* ---------- Coming soon ---------- */

/* The way back to the main site, in the header's right corner. Sized to sit
   inside the bar rather than to stand on its own in a panel. */
.thsa-ml-btn--top {
	min-height: 2.5rem;
	padding: .4375rem 1rem;
	font-size: .9375rem;
	white-space: nowrap;
}

@media (min-width: 64em) {
	/* The holding page is one tall section, not a run of full-height ones:
	   its panel can outgrow the viewport, and a sticky 100svh photo then
	   stops short and leaves a band of bare ground beneath it. Here the
	   photo fills whatever height the section ends up being. */
	.thsa-ml-scene--cs .thsa-ml-media {
		position: static;
		align-self: stretch;
		height: auto;
	}
}


/* No sign-in on the holding page: accounts are not open yet, which is
   exactly what the FAQ says. */
.thsa-ml--coming-soon .thsa-ml-account { display: none; }

.thsa-ml-notice--cs {
	background: var(--ml-oxblood, #6d1f2c);
	border-radius: 14px;
	padding: 1.25rem 1.375rem;
	margin: 1.75rem 0 0;
	/* The base notice is a narrow aside. This one is the page's main
	   message, so it runs the full width of the panel like the lede. */
	max-width: none;
}
.thsa-ml-notice--cs .thsa-ml-notice__title {
	font-family: var(--ml-display, Georgia, serif);
	font-size: 1.3rem;
	margin: 0 0 .5rem;
}
.thsa-ml-notice--cs .thsa-ml-notice__text { margin: 0; line-height: 1.6; }
.thsa-ml-notice--cs .thsa-ml-link { color: inherit; text-decoration: underline; }

.thsa-ml-scene--cs .thsa-ml-actions { margin-top: 1.75rem; }

/* The holding page has no dock, so nothing needs reserving for it. Only
   at the split width, though: stacked, that padding reads as a gap between
   the hero and the questions below it. */
@media (min-width: 64em) {
	/* No dock to reserve for, and no padding either: the photo column is
	   full bleed, so anything under it shows as a strip of bare ground.
	   The panel brings its own bottom padding from the split rule. */
	.thsa-ml--coming-soon .thsa-ml-scene { padding-bottom: 0; }
}

.thsa-ml-scene--cs-faq { padding-bottom: 0; }

.thsa-ml-foot {
	border-top: 1px solid rgba(111, 97, 82, .35);
	margin-top: 3rem;
	padding: 1.75rem var(--ml-gutter) 2.5rem;
}
.thsa-ml-foot__legal,
.thsa-ml-foot__meta { margin: 0; font-size: .9rem; color: var(--ml-muted, #b6a894); }
.thsa-ml-foot__meta { margin-top: .75rem; }