/*
 * Landing page styles — Shoffner Microsite ("Too Liberal For Arkansas").
 *
 * Loaded after style.css (the untouched _s base). Design source:
 * Figma "Shoffner Microsite", 1440px reference frame (node 2:2).
 *
 * Display stack: Kanit (400/700/800, self-hosted). Body stack: Inter
 * (variable, self-hosted). The comp's oversized quote marks use IT Roughlin,
 * a licensed face not committed with the theme — inc/landing-page.php
 * declares its @font-face only when assets/fonts/it-roughlin.woff2 exists;
 * a serif fallback renders until then.
 */

/* --------------------------------------------------------------------------
 * Fonts + tokens
 * ------------------------------------------------------------------------ */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kanit";
	src: url("../fonts/kanit-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kanit";
	src: url("../fonts/kanit-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Kanit";
	src: url("../fonts/kanit-800.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--c-paper: #fff;
	--c-ink: #0b0b0b;
	--c-ink-raised: #1a1a18;
	--c-alarm: #e02b1d;
	--c-alarm-hover: #c42418;
	--c-hairline: #deddd8;
	--c-steel: #9a9a94;
	--c-frame: #333330;
	--c-grid-line: rgba(255, 255, 255, 0.08);
	--font-display: "Kanit", "Arial Narrow", sans-serif;
	--font-body: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, sans-serif;
	--font-quotemark: "IT Roughlin", georgia, serif;
	--pad-x: clamp(20px, 6.667vw, 96px);
	--pad-section: clamp(88px, 12.222vw, 176px);
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--c-ink);
	background: var(--c-paper);
	overflow-x: clip;
	/* Grayscale smoothing — macOS subpixel AA fattens light-on-dark type
	   versus the Figma comp's rendering. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
 * Shared
 * ------------------------------------------------------------------------ */

/* The _s base sets royalblue / purple-when-visited; its `a:visited` outranks
   any lone class, so brand colors are pinned globally and buttons re-pin
   :visited with a type selector (see a.btn--* below). */
a {
	color: var(--c-alarm);
}

a:visited {
	color: var(--c-alarm);
}

a:hover,
a:focus,
a:active {
	color: var(--c-alarm-hover);
}

.landing section {
	padding-left: var(--pad-x);
	padding-right: var(--pad-x);
}

/* Anchor jumps land below the sticky CTA banner. */
.landing section[id] {
	scroll-margin-top: 64px;
}

/* --------------------------------------------------------------------------
 * Sticky CTA banner
 * ------------------------------------------------------------------------ */

.cta-banner {
	position: sticky;
	top: 0;
	z-index: 90;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
}

.cta-banner__link,
a.cta-banner__link:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 20px;
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-paper);
	transition: background-color 0.15s ease;
}

.cta-banner__link:hover,
.cta-banner__link:focus,
.cta-banner__link:active {
	color: var(--c-paper);
}

.cta-banner__link--alarm {
	background: var(--c-alarm);
}

.cta-banner__link--alarm:hover,
.cta-banner__link--alarm:focus {
	background: var(--c-alarm-hover);
}

.cta-banner__link--ink {
	background: var(--c-ink);
}

.cta-banner__link--ink:hover,
.cta-banner__link--ink:focus {
	background: var(--c-ink-raised);
}

.cta-banner__link:focus-visible {
	outline: 2px solid var(--c-paper);
	outline-offset: -4px;
}

/* Clear WP's fixed admin bar. */
body.admin-bar .cta-banner {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .cta-banner {
		top: 46px;
	}
}

.section--ink {
	background: var(--c-ink);
	color: var(--c-paper);
}

/* 104px layout-grid overlay on the dark sections, vertical lines offset to
   the content gutter, as in the comp. */
.section--grid {
	background-image:
		repeating-linear-gradient(to right, var(--c-grid-line) 0 1px, transparent 1px 104px),
		repeating-linear-gradient(to bottom, var(--c-grid-line) 0 1px, transparent 1px 104px);
	background-position: var(--pad-x) 0, 0 0;
}

.section--grid > * {
	position: relative;
}

.kicker {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.222vw, 2rem);
	line-height: 1.1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-alarm);
	margin: 0 0 14px;
}

.headline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(3rem, 8.333vw, 7.5rem);
	line-height: 0.88;
	letter-spacing: -0.01em;
	margin: 0;
}

.headline--xl {
	font-size: clamp(3rem, 9.028vw, 8.125rem);
	text-transform: uppercase;
}

.body-copy {
	font-weight: 400;
	font-size: clamp(1.125rem, 2.083vw, 1.875rem);
	line-height: 1.6;
	margin: 0;
}

.section--ink .body-copy {
	color: var(--c-steel);
}

/* "Too liberal for Arkansas." sign-offs. The comp sets the ICE one in Inter
   Black and the rest in Kanit Bold. */
.tagline {
	font-size: clamp(1.25rem, 2.222vw, 2rem);
	line-height: 1.1;
	color: var(--c-alarm);
	margin: 0;
}

.tagline--inter {
	font-weight: 900;
	letter-spacing: -0.025em;
}

.tagline--kanit {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.attribution {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin: 0;
}

.attribution__name {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}

.attribution__source {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-steel);
	margin: 0;
}

.attribution__rule {
	width: 56px;
	height: 3px;
	background: var(--c-alarm);
}

.attribution__source a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.attribution__source a:hover,
.attribution__source a:focus {
	color: var(--c-paper);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 22px 32px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.btn:hover,
.btn:focus {
	opacity: 0.85;
}

.btn--ink,
a.btn--ink:visited {
	background: var(--c-ink);
	color: var(--c-paper);
}

.btn--ink:hover,
.btn--ink:focus,
.btn--ink:active {
	color: var(--c-paper);
}

.btn--paper,
a.btn--paper:visited {
	background: var(--c-paper);
	color: var(--c-ink);
}

.btn--paper:hover,
.btn--paper:focus,
.btn--paper:active {
	color: var(--c-ink);
}

.btn:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------ */

.hero {
	padding-top: clamp(72px, 9.167vw, 132px);
	padding-bottom: clamp(72px, 8.889vw, 128px);
	background: var(--c-paper);
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(3.25rem, 8.611vw, 7.75rem);
	line-height: 0.86;
	letter-spacing: -0.01em;
	margin: 0 0 clamp(32px, 3.333vw, 48px);
}

.hero__title .text-accent {
	display: block;
}

.hero__rule {
	border: 0;
	height: 1px;
	background: var(--c-hairline);
	margin: 0 0 clamp(32px, 3.4vw, 49px);
}

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 37.2%) minmax(0, 1fr);
	gap: clamp(40px, 6.667vw, 96px);
	align-items: start;
}

.hero__collage {
	position: relative;
	aspect-ratio: 464 / 624;
	overflow: hidden;
}

.hero__collage img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__quotes-label {
	font-weight: 500;
	font-size: clamp(1.125rem, 1.667vw, 1.5rem);
	line-height: 0.94;
	letter-spacing: 0.01em;
	color: var(--c-alarm);
	margin: 0 0 40px;
}

.quote-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.quote-list__item {
	border-top: 1px solid var(--c-hairline);
	padding: 28px 0;
}

.quote-list__item:last-child {
	border-bottom: 1px solid var(--c-hairline);
}

.quote-list__text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.375rem, 2.917vw, 2.625rem);
	line-height: 1.38;
	letter-spacing: -0.02em;
	margin: 0;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

/* Hover/tap reveals the full-strength quote and its receipts link. */
.quote-list__reveal {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.25s ease, margin-top 0.25s ease;
}

.quote-list__reveal > div {
	overflow: hidden;
}

@media (hover: hover) {
	.quote-list__item:hover .quote-list__text,
	.quote-list__item:focus-within .quote-list__text {
		opacity: 1;
	}

	.quote-list__item:hover .quote-list__reveal,
	.quote-list__item:focus-within .quote-list__reveal {
		grid-template-rows: 1fr;
		margin-top: 16px;
	}
}

.quote-list__item.is-open .quote-list__text {
	opacity: 1;
}

.quote-list__item.is-open .quote-list__reveal {
	grid-template-rows: 1fr;
	margin-top: 16px;
}

.receipt-link,
a.receipt-link:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-alarm);
}

.receipt-link:hover,
.receipt-link:focus {
	color: var(--c-alarm-hover);
	text-decoration: underline;
}

.receipt-link__icon {
	width: 16px;
	height: 22px;
}

/* --------------------------------------------------------------------------
 * Feature sections (ICE / Kamala / Meat / Parade)
 * ------------------------------------------------------------------------ */

.feature {
	padding-top: var(--pad-section);
	padding-bottom: var(--pad-section);
}

.feature__columns {
	display: grid;
	grid-template-columns: minmax(0, 49.7%) minmax(0, 1fr);
	gap: clamp(40px, 7.222vw, 104px);
	align-items: start;
}

.feature__columns--spaced {
	margin-top: clamp(48px, 6.667vw, 96px);
}

.feature__body {
	display: grid;
	gap: clamp(28px, 3.056vw, 44px);
	justify-items: start;
}

/* ICE pull quote */
.pull-quote {
	border-left: 4px solid var(--c-alarm);
	padding-left: clamp(20px, 2.5vw, 36px);
	display: grid;
	gap: 32px;
}

.pull-quote__text {
	font-weight: 500;
	font-size: clamp(1.375rem, 2.5vw, 2.25rem);
	line-height: 1.3;
	letter-spacing: -0.015em;
	margin: 0;
}

.pull-quote .attribution {
	display: grid;
	gap: 8px;
	justify-items: start;
}

/* Video embed frame */
.video-frame {
	margin-top: clamp(56px, 7.778vw, 112px);
	border: 1px solid var(--c-frame);
	background: var(--c-ink-raised);
	position: relative;
	aspect-ratio: 1248 / 480;
	min-height: 260px;
	/* Keep the min-height from transferring width past the viewport when
	   the aspect ratio can't be honored on small screens. */
	max-width: 100%;
	overflow: hidden;
}

/* When real footage is set, honor the player's 16:9 instead of the
   comp's 2.6:1 poster crop — object-fit can't rescue an iframe. */
.video-frame--playable {
	aspect-ratio: 16 / 9;
	min-height: 0;
}

.video-frame > img,
.video-frame > video,
.video-frame > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

/* Kamala donation band */
.stat-band {
	border-top: 1px solid var(--c-hairline);
	border-bottom: 1px solid var(--c-hairline);
	padding: clamp(32px, 3.611vw, 52px) 0;
	margin: clamp(56px, 7.222vw, 104px) 0 clamp(56px, 7.778vw, 112px);
}

.stat-band__text {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.125rem, 5vw, 4.5rem);
	line-height: 0.86;
	color: var(--c-alarm);
	margin: 0;
}

.photo-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	width: 100%;
}

.photo-pair__cell {
	position: relative;
	overflow: hidden;
	background: var(--c-ink);
	aspect-ratio: 252 / 340;
}

.photo-pair--wide .photo-pair__cell {
	aspect-ratio: 608 / 443;
}

.photo-pair__cell img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-pair__cell--fade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(11, 11, 11, 0) 48%, #0b0b0b 120%);
}

/* Meat quote */
.big-quote {
	display: grid;
	gap: clamp(24px, 2.778vw, 40px);
	justify-items: start;
	margin-top: clamp(56px, 7.222vw, 104px);
}

.big-quote__marks {
	font-family: var(--font-quotemark);
	font-size: clamp(4.5rem, 9.722vw, 8.75rem);
	line-height: 0.7;
	color: var(--c-alarm);
	white-space: nowrap;
}

.big-quote__text {
	font-weight: 500;
	font-size: clamp(1.5rem, 3.194vw, 2.875rem);
	line-height: 1.28;
	letter-spacing: -0.02em;
	max-width: 24.35em; /* 1120 / 46 — preserves the comp's line breaks. */
	margin: 0;
}

.feature__body-row {
	display: flex;
	justify-content: flex-end;
	margin-top: clamp(56px, 7.778vw, 112px);
}

.feature__body-row .feature__body {
	max-width: min(700px, 56.1%);
}

/* Parade */
.parade__body {
	display: grid;
	gap: 40px;
	justify-items: start;
	margin-top: clamp(56px, 7.222vw, 104px);
}

/* --------------------------------------------------------------------------
 * Closing CTA
 * ------------------------------------------------------------------------ */

.closing {
	background: var(--c-alarm);
	color: var(--c-paper);
	padding-top: clamp(80px, 11.111vw, 160px);
	padding-bottom: clamp(80px, 11.111vw, 160px);
}

.closing__heading {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 5vw, 4.5rem);
	line-height: 0.94;
	letter-spacing: -0.01em;
	margin: 0 0 clamp(32px, 3.333vw, 48px);
	max-width: 15.28em; /* 1100 / 72 */
}

.closing__subheading {
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw, 2.25rem);
	line-height: 1.55;
	margin: 0 0 clamp(40px, 4.444vw, 64px);
	max-width: 24.4em; /* 880 / 36 */
}

.closing__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 clamp(72px, 9.722vw, 140px);
}

.closing__tagline {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(3.5rem, 11.389vw, 10.25rem);
	line-height: 0.84;
	letter-spacing: -0.01em;
	color: var(--c-ink);
	margin: 0 0 clamp(64px, 8.333vw, 120px);
}

.closing__visual {
	position: relative;
	aspect-ratio: 1248 / 460;
	min-height: 220px;
	max-width: 100%;
	overflow: hidden;
}

.closing__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}

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

.site-footer {
	background: var(--c-ink);
	padding: clamp(40px, 5vw, 72px) var(--pad-x);
}

.footer-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}

.footer-bar__fine-print {
	font-weight: 500;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-steel);
	max-width: 820px;
	margin: 0;
}

.footer-bar__privacy,
a.footer-bar__privacy:visited {
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-paper);
	text-decoration: none;
	white-space: nowrap;
}

.footer-bar__privacy:hover,
.footer-bar__privacy:focus {
	color: var(--c-paper);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Entrance animations
 *
 * Elements carry .reveal (+ optional .reveal-d1/-d2 for stagger); landing.js
 * flips on .is-visible as they enter the viewport, once. Hidden state is
 * gated on the .js root class (set by an inline head script) so nothing
 * disappears without JavaScript.
 * ------------------------------------------------------------------------ */

.js .reveal {
	opacity: 0;
	transform: translateY(28px);
}

.js .reveal.is-visible {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal-d1.is-visible {
	transition-delay: 0.12s;
}

.js .reveal-d2.is-visible {
	transition-delay: 0.24s;
}

/* Quote list ripples in when several rows arrive together. */
.js .quote-list .quote-list__item.is-visible:nth-child(2) {
	transition-delay: 0.08s;
}

.js .quote-list .quote-list__item.is-visible:nth-child(3) {
	transition-delay: 0.16s;
}

.js .quote-list .quote-list__item.is-visible:nth-child(4) {
	transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Accents + responsive
 * ------------------------------------------------------------------------ */

.text-accent {
	color: var(--c-alarm);
}

@media (max-width: 900px) {
	.hero__grid,
	.feature__columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__collage {
		max-width: 464px;
	}

	.feature__body-row .feature__body {
		max-width: none;
	}

	.footer-bar {
		flex-direction: column;
	}
}

@media (max-width: 560px) {
	.photo-pair {
		grid-template-columns: 1fr;
	}

	.photo-pair__cell {
		aspect-ratio: 3 / 2;
	}

	/* Stacked cells go landscape, so portrait sources overflow vertically and
	   the default centered crop takes the top of the head with it. Anchor the
	   crop to the top, where a portrait subject's head sits. Landscape sources
	   overflow horizontally instead, so they're unaffected. */
	.photo-pair__cell img {
		object-position: center top;
	}

	.btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
 * Focused words
 *
 * Headline phrases wrapped in .headline__focus (server-side) read red at all
 * times — visible with or without JS, in step with the page's red-accent
 * language. landing-motion.js additionally punches them as they rise in.
 * ------------------------------------------------------------------------ */

.headline__focus {
	color: var(--c-alarm);
}

/* --------------------------------------------------------------------------
 * Motion layer — enhanced entrance + scroll choreography.
 *
 * Everything here is gated on html.motion-on, a flag landing-motion.js sets
 * only after it confirms it can run (and never under prefers-reduced-motion).
 * If that script is absent or fails, none of this applies and the plain
 * .reveal system in the block above takes over — content is never stranded
 * hidden. The word/line/scrub hooks (.wd, .ln, [data-scrub]) are created by
 * the same script, so these selectors only ever match once JS is live.
 * ------------------------------------------------------------------------ */

:root {
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-rise: 0.72s;
}

/* Word split: individual words ride up + fade, staggered by --wi. */
.motion-on .headline .wd {
	display: inline-block;
	transform: translateY(0.9em);
	opacity: 0;
}

.motion-on .is-visible .wd {
	animation: wd-rise var(--dur-rise) var(--ease-out) both;
	animation-delay: calc(var(--wi, 0) * 0.045s);
}

@keyframes wd-rise {
	from {
		transform: translateY(0.9em);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Focused words rise the same, then punch: an overshoot scale as they land. */
.motion-on .is-visible .headline__focus .wd {
	animation-name: wd-rise-focus;
	animation-timing-function: var(--ease-pop);
	transform-origin: center 60%;
}

@keyframes wd-rise-focus {
	0% {
		transform: translateY(0.9em) scale(1);
		opacity: 0;
	}

	55% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}

	72% {
		transform: translateY(0) scale(1.16);
		opacity: 1;
	}

	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

/* Line split (masked): whole lines rise from behind a hard edge. */
.motion-on .ln {
	display: block;
	overflow: hidden;
	/* Room for descenders — display line-heights run 0.84–0.94. */
	padding: 0.12em 0.02em;
	margin: -0.12em -0.02em;
}

.motion-on .ln__i {
	display: block;
	transform: translateY(110%);
}

.motion-on .ln.is-lit .ln__i {
	transform: translateY(0);
	transition: transform 0.8s var(--ease-out);
	transition-delay: calc(var(--li, 0) * 0.1s);
}

/* The accent/payoff line is unmasked so it can overshoot and settle — a stamp. */
.motion-on .ln--stamp {
	overflow: visible;
}

.motion-on .ln--stamp .ln__i {
	transform: translateY(0.5em) scale(1.12) rotate(-1.4deg);
	opacity: 0;
}

.motion-on .ln--stamp.is-lit .ln__i {
	transform: translateY(0) scale(1) rotate(0deg);
	opacity: 1;
	transition:
		transform 0.7s var(--ease-pop),
		opacity 0.45s ease-out;
	transition-delay: calc(var(--li, 0) * 0.1s);
}

/* ---- Hero load timeline (driven by .hero.is-in, gated on fonts) ---- */

.hero {
	--d-rule: 0.5s;
	--d-collage: 0.62s;
	--d-label: 0.72s;
	--d-cards: 0.82s;
	--d-card-step: 0.09s;
}

/* hr rule draws left→right. */
.motion-on .hero__rule {
	transform: scaleX(0);
	transform-origin: left center;
}

.motion-on .hero.is-in .hero__rule {
	transform: scaleX(1);
	transition: transform 0.7s var(--ease-out) var(--d-rule);
}

/* Collage wipes open while the photo inside counter-scales. */
.motion-on .hero__collage {
	clip-path: inset(0 100% 0 0);
}

.motion-on .hero.is-in .hero__collage {
	clip-path: inset(0 0 0 0);
	transition: clip-path 0.9s var(--ease-out) var(--d-collage);
}

.motion-on .hero__collage img {
	transform: scale(1.15);
}

.motion-on .hero.is-in .hero__collage img {
	transform: scale(1);
	transition: transform 1s var(--ease-out) var(--d-collage);
}

/* Quotes label + cards. Higher specificity than .reveal.is-visible so
   landing.js can't reveal them before the timeline starts. */
.motion-on .hero:not(.is-in) .hero__quotes-label {
	opacity: 0;
	transform: translateY(16px);
}

.motion-on .hero.is-in .hero__quotes-label {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s ease-out var(--d-label),
		transform 0.5s var(--ease-out) var(--d-label);
}

/* Receipts deal in from the right, alternating tilt. */
.motion-on .hero:not(.is-in) .quote-list__item {
	opacity: 0;
	transform: translateX(34px) rotate(1.4deg);
}

.motion-on .hero .quote-list__item:nth-child(even) {
	--tilt: -1.4deg;
}

.motion-on .hero:not(.is-in) .quote-list__item:nth-child(even) {
	transform: translateX(34px) rotate(-1.4deg);
}

.motion-on .hero.is-in .quote-list__item {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s ease-out,
		transform 0.7s var(--ease-pop);
	transition-delay: calc(var(--d-cards) + var(--qi, 0) * var(--d-card-step));
}

/* ---- Kicker marker swipe ---- */

.motion-on .kicker__mark {
	position: relative;
	display: inline-block;
}

.motion-on .kicker__mark::before {
	content: "";
	position: absolute;
	inset: -0.05em -0.18em;
	z-index: -1;
	background: color-mix(in srgb, var(--c-alarm) 15%, transparent);
	transform: scaleX(0);
	transform-origin: left center;
}

.motion-on .is-visible .kicker__mark::before {
	animation: mark-swipe 0.5s var(--ease-out) 0.05s both;
}

@keyframes mark-swipe {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ---- Tagline underline draw (the repeated "Too liberal" beat) ---- */

.motion-on .tagline__mark {
	position: relative;
	white-space: nowrap;
}

.motion-on .tagline__mark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.1em;
	height: 0.08em;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
}

.motion-on .is-visible .tagline__mark::after {
	animation: mark-swipe 0.6s var(--ease-out) 0.35s both;
}

/* ---- ICE pull quote: red bar draws down ---- */

.motion-on .pull-quote {
	border-left-color: transparent;
	position: relative;
}

.motion-on .pull-quote::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 0;
	width: 4px;
	height: 100%;
	background: var(--c-alarm);
	transform: scaleY(0);
	transform-origin: top center;
}

.motion-on .pull-quote.is-visible::before {
	transform: scaleY(1);
	transition: transform 0.7s var(--ease-out) 0.1s;
}

/* ---- Kamala stat band: hairlines draw, then count-up ---- */

.motion-on .stat-band {
	border-top-color: transparent;
	border-bottom-color: transparent;
	position: relative;
}

.motion-on .stat-band::before,
.motion-on .stat-band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--c-hairline);
	transform: scaleX(0);
	transform-origin: left center;
}

.motion-on .stat-band::before {
	top: 0;
}

.motion-on .stat-band::after {
	bottom: 0;
}

.motion-on .stat-band.is-visible::before {
	transform: scaleX(1);
	transition: transform 0.7s var(--ease-out);
}

.motion-on .stat-band.is-visible::after {
	transform: scaleX(1);
	transition: transform 0.7s var(--ease-out) 0.08s;
}

/* The counting number sits in a span sized to its final value (min-width set
   in JS) and right-aligned, so the sentence never reflows as digits are added. */
.motion-on .stat-count {
	display: inline-block;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* ---- Photo-pair cells clip-wipe in opposite directions ---- */

.motion-on .photo-pair__cell {
	clip-path: inset(0 0 0 0);
}

.motion-on .is-visible .photo-pair__cell:nth-child(odd) {
	animation: wipe-from-left 0.85s var(--ease-out) both;
}

.motion-on .is-visible .photo-pair__cell:nth-child(even) {
	animation: wipe-from-right 0.85s var(--ease-out) 0.12s both;
}

@keyframes wipe-from-left {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes wipe-from-right {
	from {
		clip-path: inset(0 0 0 100%);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

/* ---- Meat big quote marks: bounce in (inner), slow rotate on scroll (outer) ---- */

.motion-on .big-quote__marks {
	display: inline-block;
}

.motion-on .big-quote__marks-inner {
	display: inline-block;
	transform: translateY(-40px) scale(1.3) rotate(-6deg);
	opacity: 0;
}

.motion-on .big-quote.is-visible .big-quote__marks-inner {
	animation: marks-drop 0.75s var(--ease-pop) 0.1s both;
}

@keyframes marks-drop {
	from {
		transform: translateY(-40px) scale(1.3) rotate(-6deg);
		opacity: 0;
	}

	to {
		transform: translateY(0) scale(1) rotate(0deg);
		opacity: 1;
	}
}

/* Meat attribution rule draws out. */
.motion-on .big-quote .attribution__rule {
	transform: scaleX(0);
	transform-origin: left center;
}

.motion-on .big-quote.is-visible .attribution__rule {
	transform: scaleX(1);
	transition: transform 0.6s var(--ease-out) 0.5s;
}

/* ---- Scrub targets: initial states the rAF engine then drives ----
   Gated on (min-width: 901px) because the scrub engine only tracks these on
   desktop; on smaller screens they fall back to a plain fade so nothing is
   left stuck at a partial scroll state. */

@media (min-width: 901px) {
	.motion-on .photo-pair__cell img {
		transform: scale(1.08);
		will-change: transform;
	}

	/* The .is-visible variants outrank landing.js's `.js .reveal.is-visible`
	   so it can't flash these to full opacity before the scroll engine, which
	   writes inline styles, takes ownership. */
	.motion-on [data-scrub="grow"],
	.motion-on .reveal[data-scrub="grow"].is-visible {
		opacity: 0;
		transform: scale(0.94);
		will-change: transform, opacity;
	}

	.motion-on [data-scrub="finale"],
	.motion-on .reveal[data-scrub="finale"].is-visible {
		opacity: 0.15;
		transform: scale(0.7);
		transform-origin: left center;
		will-change: transform, opacity;
	}
}

/* Below the scrub breakpoint, scrub elements just ease in on reveal. */
@media (max-width: 900px) {
	.motion-on [data-scrub="grow"],
	.motion-on [data-scrub="finale"] {
		opacity: 0;
		transform: translateY(24px);
	}

	.motion-on [data-scrub="grow"].is-visible,
	.motion-on [data-scrub="finale"].is-visible {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.7s var(--ease-out),
			transform 0.7s var(--ease-out);
	}

	/* Word stagger gets heavy on small screens with big type — flatten it. */
	.motion-on .is-visible .wd {
		animation-delay: calc(var(--wi, 0) * 0.025s);
	}
}

/* --------------------------------------------------------------------------
 * Interior pages (Privacy Policy, 404)
 *
 * The landing page runs edge-to-edge with no masthead, so interior pages fall
 * through to the untouched _s base — which ships no container, and ran the
 * legal copy the full width of the viewport. Scoped on the `interior` body
 * class (inc/template-functions.php): `.page` can't stand in, because the front
 * page is itself a Page and carries `.page` + `.page-template-default`.
 * ------------------------------------------------------------------------ */

.interior .site-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 22px var(--pad-x);
	border-bottom: 1px solid var(--c-hairline);
}

.interior .site-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(0.9375rem, 1.389vw, 1.125rem);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.interior .site-title a {
	color: var(--c-ink);
	text-decoration: none;
}

.interior .site-title a:hover,
.interior .site-title a:focus {
	color: var(--c-alarm);
}

.interior .site-description {
	margin: 6px 0 0;
	font-size: 0.875rem;
	color: var(--c-steel);
}

.interior .site-main {
	max-width: 78ch;
	margin: 0 auto;
	padding: clamp(48px, 6.667vw, 88px) var(--pad-x) clamp(64px, 8.889vw, 120px);
}

.interior .entry-title {
	margin: 0 0 clamp(28px, 3.333vw, 48px);
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.444vw, 3rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.interior .entry-content h2 {
	margin: clamp(40px, 4.444vw, 64px) 0 16px;
	font-family: var(--font-display);
	font-size: clamp(1.1875rem, 2.222vw, 1.5rem);
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.interior .entry-content p {
	margin: 0 0 1.3em;
	line-height: 1.65;
}

.interior .entry-content p:last-child {
	margin-bottom: 0;
}

/* Bare URLs and long e-mail addresses appear inline in the SMS terms. */
.interior .entry-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/* 404 — shares the interior container above, adds the oversized code + CTA. */
.error-404 {
	display: grid;
	justify-items: start;
	gap: 0;
	padding-block: clamp(16px, 3.333vw, 48px);
}

.error-404__code {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(5rem, 13.889vw, 12.5rem);
	line-height: 0.82;
	letter-spacing: -0.03em;
	color: var(--c-alarm);
}

.error-404__title {
	margin: clamp(16px, 2.222vw, 32px) 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.75rem, 4.444vw, 3rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.error-404__body {
	margin: 16px 0 0;
	max-width: 46ch;
	font-size: clamp(1rem, 1.389vw, 1.125rem);
	line-height: 1.6;
	color: var(--c-frame);
}

.error-404 .btn {
	margin-top: clamp(28px, 3.333vw, 44px);
}