/*
 * Hollywood Jaycees: the episode-title-card world.
 * Flat fields of night navy, coral, sunset orange and cream sliced by hard diagonals,
 * print grain over everything, Anton set tight enough to collide, JCI cyan kept
 * for the action bar. Hero geometry is measured from the approved comp
 * (.impeccable/mocks/comp-1.png) in cqw, so the composition scales with the phone width.
 */

@font-face {
	font-family: 'Anton';
	src: url('/fonts/anton.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Archivo';
	src: url('/fonts/archivo.woff2') format('woff2');
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}

:root {
	--navy: #091c40;
	--night: #0b2350;
	--cream: #f3e5cd;
	--orange: #f89037;
	--coral: #f85249;
	--cyan: #089ddc;
	--display: 'Anton', 'Arial Narrow', sans-serif;
	--body: 'Archivo', system-ui, sans-serif;
	color-scheme: dark;
	scrollbar-color: var(--orange) var(--navy);
}

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

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

body {
	margin: 0;
	background: var(--navy);
	color: var(--cream);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.5;
	caret-color: var(--orange);
}

::selection {
	background: var(--orange);
	color: var(--navy);
}

a {
	color: inherit;
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 3px solid var(--cyan);
	outline-offset: 3px;
}

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

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.6rem 1rem;
	background: var(--cream);
	color: var(--navy);
	font: 400 1.1rem/1 var(--display);
	text-transform: uppercase;
	text-decoration: none;
}
.skip:focus {
	top: 1rem;
}


/* The page frame: every cqw below is a percent of this width. */
.frame {
	container-type: inline-size;
	position: relative;
	background: var(--navy);
	overflow-x: clip;
	isolation: isolate;
}

/* Print grain over every field, as on a printed title card. */
.frame::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 40;
	pointer-events: none;
	background: url('/assets/plates/grain.png') repeat 0 0 / 512px 512px;
	background-image: image-set(url('/assets/plates/grain-512.webp') type('image/webp') 1x, url('/assets/plates/grain.webp') type('image/webp') 2x, url('/assets/plates/grain.png') type('image/png') 2x);
	mix-blend-mode: overlay;
	opacity: 0.5;
}

/* ---------- Top bar ---------- */

.topbar {
	position: relative;
	z-index: 10;
	height: 12.7cqw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4cqw 0 5.3cqw;
	background: var(--cream);
}

.brand img {
	width: 21.2cqw;
	height: auto;
}

.index {
	display: flex;
	gap: 2.6cqw;
}
.index a {
	font: 400 3cqw/1 var(--display);
	letter-spacing: 0.02em;
	color: var(--navy);
	text-decoration: none;
}
.index a:hover {
	color: var(--coral);
}

/* ---------- Title card (card y = page y - 12.7cqw) ---------- */

.title-card {
	position: relative;
	height: 105.3cqw;
	background: var(--navy);
}

.field {
	position: absolute;
	inset: 0;
}
.field-coral {
	background: var(--coral);
	clip-path: polygon(0 19.9cqw, 100% -1.8cqw, 100% 26.9cqw, 0 46.6cqw);
}
.field-orange {
	background: var(--orange);
	clip-path: polygon(21.8% 81.6cqw, 100% 8.1cqw, 100% 73cqw);
}
.field-cyan {
	z-index: 4;
	background: var(--cyan);
	clip-path: polygon(0 84cqw, 100% 73cqw, 100% 95.7cqw, 0 105.3cqw);
}

.beach {
	position: absolute;
	left: 10cqw;
	top: 2.5cqw;
	width: 90cqw;
	height: 88.4cqw;
}
/* Decorative, so it is a background: WebP for browsers that take it, the PNG plate otherwise. */
.beach {
	background: url('/assets/plates/beach-scene.png') center / cover no-repeat;
	background-image: image-set(url('/assets/plates/beach-scene.webp') type('image/webp'), url('/assets/plates/beach-scene.png') type('image/png'));
}

.headline {
	margin: 0;
	font: 400 21cqw/0.859 var(--display);
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: var(--cream);
}
.headline .line {
	position: absolute;
	z-index: 2;
	left: 5.5cqw;
	white-space: nowrap;
	transform-origin: 0 100%;
}
/* Each line's box spans cap top to baseline (line-height = cap height), so top = baseline - cap. */
.line-1 {
	top: 21.3cqw;
	transform: rotate(-9.5deg);
}
.line-2 {
	top: 40cqw;
	left: 5.7cqw;
	transform: rotate(-7deg);
}

.session {
	position: absolute;
	z-index: 2;
	left: 5.5cqw;
	top: 63.2cqw;
	margin: 0;
	font: 400 4.8cqw/0.859 var(--display);
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	transform: rotate(-7deg);
	transform-origin: 0 100%;
}
.session .now {
	font-size: 1.18em;
}
/* arrow-bold's head spans about 80% of its box, so 1.1em sets it near cap height (0.859em) with a
   0.2em stroke, Anton's stem weight, as in the comp; the negative block margins keep it from growing
   the line box. Three classes so it outranks .pictogram.glyph further down. */
.session .pictogram.glyph {
	width: 1.1em;
	height: 1.1em;
	margin: -0.15em 0.12em;
	vertical-align: -0.12em;
}

.action-bar {
	position: absolute;
	z-index: 5;
	left: 0;
	top: 89.5cqw;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3cqw;
	padding: 0 8.5cqw 0 12cqw;
	transform: translateY(-50%) rotate(-5.9deg);
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	height: 13cqw;
	padding: 0 4cqw;
	font-family: var(--display);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transform: skewX(-13deg);
	transition: background-color 0.12s, color 0.12s;
}
.btn-solid {
	font-size: 7.4cqw;
	line-height: 1;
	background: var(--cream);
	color: var(--navy);
}
.btn-solid:hover {
	background: var(--navy);
	color: var(--cream);
}
.action-bar .btn-solid {
	width: 31.5cqw;
}
.btn-outline {
	flex: 1;
	height: 10.5cqw;
	font-size: 5.4cqw;
	line-height: 1;
	color: var(--cream);
	border: 0.55cqw solid var(--cream);
}
.btn-outline:hover {
	background: var(--cream);
	color: var(--navy);
}
.pictogram.glyph {
	flex-shrink: 0; /* an empty element: without this a tight flex row squeezes it to nothing */
	width: 0.62em;
	height: 0.62em;
	vertical-align: 0.04em;
}
.action-bar .btn-solid {
	padding: 0 2.6cqw;
}
/* the outlined button's arrow matches its letters' weight, as on JOIN US */
.btn-outline .glyph {
	width: 0.78em;
	height: 0.78em;
}

/* Worn screen-print ink on the title card's lettering: an alpha mask from the ink-wear plate.
   The mask clips to the border box; "Room for the ink" below keeps the glyphs inside it. */
.headline .line,
.session,
.tile-num,
.tile-label {
	-webkit-mask: url('/assets/plates/ink-wear.png') 0 0 / 170cqw 170cqw repeat;
	mask: url('/assets/plates/ink-wear.png') 0 0 / 170cqw 170cqw repeat;
	-webkit-mask-image: image-set(url('/assets/plates/ink-wear.webp') type('image/webp'), url('/assets/plates/ink-wear.png') type('image/png'));
	mask-image: image-set(url('/assets/plates/ink-wear.webp') type('image/webp'), url('/assets/plates/ink-wear.png') type('image/png'));
}

/* ---------- Action tiles ---------- */
/* Four hand-cut quads measured from the comp (actions y = page y - 110cqw). */

.actions {
	position: relative;
	z-index: 3;
	margin-top: -8cqw;
	height: 67cqw;
}

.tiles {
	position: absolute;
	inset: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tiles li {
	position: absolute;
	transition: translate 0.12s;
}
.tiles li:nth-child(1) { left: 1.9cqw; top: 5.4cqw; width: 47.3cqw; height: 31.8cqw; --cut: polygon(2.1cqw 4cqw, 47.3cqw 0, 42.8cqw 29.6cqw, 0 31.8cqw); }
.tiles li:nth-child(2) { left: 46.9cqw; top: 0.5cqw; width: 51.1cqw; height: 34.1cqw; --cut: polygon(4.4cqw 4.4cqw, 51.1cqw 0, 48.6cqw 31.9cqw, 0 34.1cqw); }
.tiles li:nth-child(3) { left: 1.9cqw; top: 36.3cqw; width: 45.4cqw; height: 28.8cqw; --cut: polygon(1.6cqw 2.2cqw, 45.4cqw 0, 41.2cqw 27.4cqw, 0 28.8cqw); }
.tiles li:nth-child(4) { left: 45.1cqw; top: 33.7cqw; width: 52.9cqw; height: 29.6cqw; --cut: polygon(4cqw 2.2cqw, 52.2cqw 0, 52.9cqw 28.7cqw, 0 29.6cqw); }
.tiles li:hover {
	translate: 0 -0.8cqw;
}

.tile {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template: 'num icon' auto 'label label' 1fr / auto 1fr;
	align-items: start;
	padding: 4.6cqw 3.6cqw 3.4cqw 4.2cqw;
	clip-path: var(--cut);
	text-decoration: none;
}
.tile > * {
	transform: rotate(-4.5deg);
	transform-origin: 0 100%;
}
.tile:focus-visible {
	outline: none;
}
.tiles li:has(.tile:focus-visible) {
	filter: drop-shadow(0 0 0 var(--cyan)) drop-shadow(0 0 0.6cqw var(--cyan));
}
.tile-num {
	grid-area: num;
	font: 400 9cqw/0.8 var(--display);
}
.pictogram {
	display: inline-block;
	width: 1em;
	height: 1em;
	background: currentColor;
	mask: var(--icon) center / contain no-repeat;
}
.tile .pictogram {
	grid-area: icon;
	justify-self: center;
	font-size: 13cqw;
}
.tile-label {
	grid-area: label;
	align-self: end;
	font: 400 6.9cqw/0.86 var(--display);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tile-coral {
	background: var(--coral);
	color: var(--cream);
}
.tile-coral .pictogram {
	color: var(--navy);
}
.tile-orange {
	background: var(--orange);
	color: var(--navy);
	padding-top: 6.4cqw;
	padding-left: 6.6cqw;
}
.tile-orange .tile-label {
	font-size: 6.2cqw;
}
.tile-cream {
	background: var(--cream);
	color: var(--navy);
	padding-left: 3cqw;
}
.tile-cream .tile-label {
	/* measured from the comp: cap top at page (5.3, 163.9)cqw; tile origin (1.9, 146.3) */
	position: absolute;
	grid-area: auto; /* else the grid area, not the tile, is its containing block */
	left: 3.4cqw;
	top: 17cqw;
	font-size: 7.2cqw;
}
/* measured from the comp: the donate pictogram sits right of the number, above the label */
.tile-cream .pictogram {
	position: absolute;
	grid-area: auto;
	left: 20cqw;
	top: 3.6cqw;
	font-size: 12.4cqw;
}
/* In the comp the cream tile's lettering sits level; the others tilt with their tile. */
.tile-cream > * {
	transform: rotate(-1deg);
}

/* Room for the ink. These line heights (0.8 to 0.86em) are at or under Anton's glyph height, and the
   negative letter-spacing ends the box before the last letter's ink, so the ink-wear mask, which
   clips to the border box, cut the tops off the tile numbers and the S off JAYCEES. The padding grows
   the box past the ink on every side; the negative margin and the shifted origin keep the lettering
   where the comp put it. It sits after .tile > * so its origin wins. */
.headline .line,
.session,
.tile-num,
.tile-label {
	padding: 0.15em;
	margin: -0.15em;
	transform-origin: 0.15em calc(100% - 0.15em);
}
.tile-night {
	background: var(--night);
	color: var(--cream);
	padding-left: 6cqw;
}
.tile-night .tile-label {
	font-size: 6.2cqw;
}

/* ---------- Bands: every section below the hero ---------- */
/* Each band overlaps the one above with a hard diagonal seam, like the next title card cutting in. */

.band {
	position: relative;
	margin-top: -3rem;
	padding: 5.5rem clamp(1rem, 5.5cqw, 4rem) 4.5rem;
	clip-path: polygon(0 3rem, 100% 0, 100% 100%, 0 100%);
}
.band-cream {
	background: var(--cream);
	color: var(--navy);
}
.band-navy {
	background: var(--navy);
	color: var(--cream);
}
.band-orange {
	background: var(--orange);
	color: var(--navy);
}
.band-coral {
	background: var(--coral);
	color: var(--navy);
}

.band-title {
	margin: 0 0 1.25rem;
	max-width: 12ch;
	font: 400 clamp(2.8rem, 13.5cqw, 5.2rem) / 0.92 var(--display);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	transform: rotate(-3deg);
	transform-origin: 0 100%;
}
.band-cream .band-title {
	color: var(--navy);
}
.band-navy .band-title {
	color: var(--cream);
}

.band-lede {
	max-width: 34rem;
	margin: 0 0 2rem;
	font-size: 1.125rem;
}

.btn-small {
	height: auto;
	border-width: min(0.55cqw, 3px); /* outline variant: the hero's cqw border, capped on wide screens */
	padding: 0.7rem 1.3rem 0.65rem;
	font-size: clamp(1.2rem, 5.4cqw, 1.7rem);
	line-height: 1;
}
.btn-night {
	height: auto;
	padding: 0.8rem 1.5rem 0.75rem;
	font-size: clamp(1.3rem, 6cqw, 1.9rem);
	line-height: 1;
	background: var(--navy);
	color: var(--cream);
}
.btn-night:hover {
	background: var(--coral);
	color: var(--navy);
}
.band-cream .btn-outline,
.band-cream .btn-outline:hover {
	background: var(--navy);
	color: var(--cream);
}

/* ---------- Matcher ---------- */

.matcher fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}
.matcher legend {
	margin-bottom: 1rem;
	font-size: 1.125rem;
	font-weight: 600;
}
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 0.6rem;
}
.chip {
	position: relative;
	cursor: pointer;
}
.chip input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}
.chip span {
	display: block;
	padding: 0.55rem 1rem 0.5rem;
	border: 2px solid var(--navy);
	font: 400 clamp(1.1rem, 5cqw, 1.45rem) / 1 var(--display);
	text-transform: uppercase;
	transform: skewX(-12deg);
	transition: background-color 0.1s, color 0.1s;
}
.chip:hover span {
	background: color-mix(in srgb, var(--coral) 18%, transparent);
}
.chip input:checked + span {
	background: var(--coral);
	border-color: var(--coral);
	color: var(--navy);
}
.chip input:focus-visible + span {
	outline: 3px solid var(--cyan);
	outline-offset: 3px;
}

.match-card {
	position: relative;
	margin-top: 2.25rem;
	padding: 2rem 1.4rem 1.4rem;
	background: var(--navy);
	color: var(--cream);
	border: 4px solid var(--cyan);
	transform: rotate(-2deg);
}
.match-stamp {
	position: absolute;
	top: -1.4rem;
	left: 0.8rem;
	margin: 0;
	padding: 0.3rem 0.9rem 0.25rem;
	background: var(--coral);
	color: var(--navy);
	font: 400 1.7rem/1 var(--display);
	text-transform: uppercase;
	transform: rotate(-5deg);
	visibility: hidden;
}
.match-card.is-match .match-stamp {
	visibility: visible;
}
.match-title {
	margin: 0 0 0.5rem;
	font: 400 clamp(1.8rem, 8.5cqw, 2.6rem) / 0.95 var(--display);
	text-transform: uppercase;
}
.match-why {
	max-width: 30rem;
	margin: 0 0 1.4rem;
}
.match-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1rem;
}
.match-card .btn-outline {
	flex: 0 1 auto;
}

/* ---------- Sessions deck ---------- */

.deck {
	list-style: none;
	margin: 0 0 0 0.4rem;
	padding: 0;
}
.deck-card {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin-top: -0.35rem;
	padding: 0.55rem 1.1rem 0.5rem;
	font-family: var(--display);
	text-transform: uppercase;
	transform: rotate(-6deg) skewX(-8deg);
}
.deck-card:nth-child(odd) {
	margin-left: 0.8rem;
}
.deck-0 { background: var(--coral); color: var(--navy); }
.deck-1 { background: var(--orange); color: var(--navy); }
.deck-2 { background: var(--cyan); color: var(--navy); }
.deck-3 { background: var(--cream); color: var(--navy); }
.deck-year {
	font-size: clamp(2rem, 11cqw, 3.4rem);
	line-height: 0.9;
}
.deck-name {
	font-size: clamp(1.2rem, 6cqw, 1.9rem);
	line-height: 1;
}

.you-card {
	margin: 2.5rem 0 0;
	padding: 1.4rem 1.2rem 1.4rem;
	border: 4px solid var(--cyan);
	transform: rotate(-3deg);
}
.you-head {
	margin: 0 0 0.9rem;
	font: 400 clamp(2.4rem, 13cqw, 4.2rem) / 0.95 var(--display);
	color: var(--cyan);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.you-name {
	color: var(--cream);
}
.you-label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}
.you-row {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
}
.you-row input {
	flex: 1 1 10rem;
	min-width: 0;
	padding: 0.65rem 0.9rem;
	border: 2px solid var(--cream);
	background: transparent;
	color: var(--cream);
	font: 500 1.125rem/1.2 var(--body);
}
.you-row input::placeholder {
	color: color-mix(in srgb, var(--cream) 70%, transparent);
}
.locked {
	margin-top: 0; /* the first band under the top bar: nothing above it to overlap */
	min-height: 70svh;
}
.locked-wrong {
	margin: 0.9rem 0 0;
	font-weight: 600;
	color: var(--orange);
}
.locked-wrong:empty {
	display: none;
}
.locked-back {
	margin: 2.5rem 0 0;
}
.locked-back a {
	color: var(--cyan);
	text-underline-offset: 0.2em;
}
.you-save {
	margin-top: 1rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cyan);
	font: 600 1rem/1.4 var(--body);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.roster {
	margin-top: 2.5rem;
}
.roster summary {
	cursor: pointer;
	font: 400 1.4rem/1 var(--display);
	text-transform: uppercase;
	color: var(--orange);
}
.roster ol {
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
	columns: 2 12rem;
	column-gap: 1.5rem;
	font-size: 0.95rem;
}
.roster li {
	break-inside: avoid;
	padding: 0.2rem 0;
}
.roster-term {
	display: inline-block;
	min-width: 4.6em;
	color: var(--orange);
	font-variant-numeric: tabular-nums;
}

/* ---------- Photos ---------- */
/* Duotone: the grayscale photo multiplies onto the highlight ink, then navy lightens into the shadows,
   so a soft phone snapshot prints like the rest of the title card. Grain from .frame::after sits on top. */

.duo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--orange);
}
.duo-coral {
	background: var(--coral);
}
.duo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.25) brightness(1.05);
	mix-blend-mode: multiply;
}
.duo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--navy);
	mix-blend-mode: lighten;
}

/* ---------- Previously on: dated stills ---------- */
/* Cream-framed stills that scroll sideways on phones, ending on a blank card for the visitor. */

.reel {
	display: flex;
	gap: 1.2rem;
	margin: 0 calc(-1 * clamp(1rem, 5.5cqw, 4rem));
	padding: 1rem clamp(1rem, 5.5cqw, 4rem) 2rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--navy) transparent;
	list-style: none;
}
.still {
	flex: 0 0 min(70cqw, 19rem);
	scroll-snap-align: center;
	transform: rotate(-2deg);
}
.still:nth-child(even) {
	transform: rotate(1.5deg) translateY(0.7rem);
}
.still figure {
	margin: 0;
	padding: 0.6rem 0.6rem 0;
	background: var(--cream);
	color: var(--navy);
}
.still img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.still figcaption {
	padding: 0.65rem 0.15rem 0.9rem;
	font: 500 0.95rem/1.3 var(--body);
}
.still-year {
	display: block;
	margin-bottom: 0.2rem;
	font: 400 2.1rem/1 var(--display);
	color: var(--coral);
}
.still-frame {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	border: 3px dashed var(--navy);
	font: 400 4.5rem/1 var(--display);
	text-transform: uppercase;
}
.still-blank a {
	color: inherit;
	font-weight: 700;
}

/* ---------- About ---------- */

.about-copy p {
	max-width: 34rem;
	margin: 0 0 1rem;
	font-size: 1.125rem;
}
.names {
	max-width: 30rem;
	margin-top: 2rem;
}
.names ul {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font: 400 1.6rem/1.15 var(--display);
	text-transform: uppercase;
	color: var(--orange);
}
.names p {
	margin: 0;
}

/* ---------- Projects and donate ---------- */

.projects-grid {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.project,
.names {
	padding: 1.4rem 1.3rem;
	background: var(--navy);
	color: var(--cream);
	transform: rotate(-1.5deg);
}
.project + .project {
	transform: rotate(1deg);
}
.project h3,
.names h3 {
	margin: 0 0 0.6rem;
	font: 400 clamp(1.7rem, 8.5cqw, 2.4rem) / 1 var(--display);
	text-transform: uppercase;
}
.project p {
	margin: 0 0 0.8rem;
}
.project-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	font-weight: 600;
}
.project-links a {
	color: var(--orange);
}
.project-note {
	font-size: 0.9rem;
	opacity: 0.85;
}

.donate {
	margin-top: 2.6rem;
}
.donate-title {
	margin: 0 0 1rem;
	font: 400 clamp(2rem, 10cqw, 3.4rem) / 0.95 var(--display);
	text-transform: uppercase;
}
.amounts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 1.2rem;
	padding: 0;
	list-style: none;
}
.amount {
	display: block;
	min-width: 4.2rem;
	padding: 0.5rem 0.9rem 0.45rem;
	background: var(--navy);
	color: var(--cream);
	font: 400 1.5rem/1 var(--display);
	text-align: center;
	text-decoration: none;
	transform: skewX(-12deg);
}
.amount:hover {
	background: var(--cream);
	color: var(--navy);
}
.donate-note {
	max-width: 32rem;
	margin: 1rem 0 0;
	font-size: 0.95rem;
}

.numbers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.3rem 1.4rem;
	margin: 0 0 2.4rem;
	padding: 0;
	list-style: none;
}
.num-fig {
	display: block;
	font: 400 clamp(2.6rem, 12cqw, 4.4rem) / 0.9 var(--display);
	letter-spacing: -0.01em;
}
.num-label {
	display: block;
	margin-top: 0.3rem;
	font: 600 0.9rem/1.25 var(--body);
}
/* The photo runs edge to edge across the top of the panel; the text keeps the panel's inset. */
.project-photo {
	padding-top: 0;
	padding-inline: 0;
}
.project-photo > :not(.duo) {
	margin-inline: 1.3rem;
}
.project-photo .duo {
	aspect-ratio: 16 / 10;
	margin-bottom: 1.1rem;
}
.proof {
	font-weight: 700;
	color: var(--orange);
}

/* ---------- Join ---------- */

.steps {
	counter-reset: step;
	max-width: 32rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	align-items: baseline;
	padding: 0.5rem 0;
	font-size: 1.125rem;
}
.steps li::before {
	content: counter(step);
	font: 400 2.2rem/1 var(--display);
	color: var(--orange);
}
.steps a {
	color: var(--orange);
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- Contact form, in the Join band ---------- */
/* Fields drawn like the name card's input: a cream stroke on navy, square, no fill. */

.contact {
	margin-top: 2.6rem;
	max-width: 40rem;
}
.contact-title {
	margin: 0 0 1rem;
	font: 400 clamp(1.8rem, 8cqw, 2.6rem) / 1 var(--display);
	text-transform: uppercase;
}
.contact-fields {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.4rem;
}
.contact-field span {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
}
.contact-field input,
.contact-field textarea {
	display: block;
	width: 100%;
	padding: 0.65rem 0.9rem;
	border: 2px solid var(--cream);
	border-radius: 0;
	background: transparent;
	color: var(--cream);
	font: 500 1.125rem/1.3 var(--body);
}
.contact-field textarea {
	min-height: 8rem;
	resize: vertical;
}
/* Off screen rather than display:none, which some bots skip. */
.contact-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.contact-status {
	margin: 1rem 0 0;
	font-weight: 600;
	color: var(--orange);
}
.contact-status:empty {
	display: none;
}

/* ---------- In our own words ---------- */
/* Real lines from the chapter's posts on slabs in the sessions deck's inks. */

.voices .duo {
	aspect-ratio: 4 / 3;
	margin: 0 0 2rem;
	transform: rotate(-1.5deg);
}
.quotes {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.quotes li {
	padding: 1.1rem 1.2rem 1rem;
	color: var(--navy);
	transform: rotate(-2deg);
}
.quotes li:nth-child(4n + 1) { background: var(--coral); }
.quotes li:nth-child(4n + 2) { background: var(--orange); transform: rotate(1deg); }
.quotes li:nth-child(4n + 3) { background: var(--cream); }
.quotes li:nth-child(4n + 4) { background: var(--cyan); transform: rotate(1.5deg); }
.quotes blockquote {
	margin: 0;
	font: 400 clamp(1.5rem, 6.4cqw, 2.1rem) / 1.02 var(--display);
	text-transform: uppercase;
}
.quotes blockquote p {
	margin: 0;
}
.quote-src {
	display: block;
	margin-top: 0.55rem;
	font: 600 0.85rem/1.2 var(--body);
}

/* ---------- Built by members: the hall ---------- */

.hall-copy p {
	max-width: 34rem;
	margin: 0 0 1rem;
	font-size: 1.125rem;
}
.hall-copy .btn {
	margin-top: 0.6rem;
}
.hall-fig {
	margin: 2.4rem 0 0;
	padding: 0.6rem;
	background: var(--navy);
	color: var(--cream);
	transform: rotate(-1.5deg);
}
.hall-fig img {
	display: block;
	width: 100%;
	height: auto;
}
.hall-fig figcaption {
	padding: 0.6rem 0.2rem 0.2rem;
	font-size: 0.9rem;
}

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

.site-footer {
	position: relative;
	margin-top: -3rem;
	padding: 5rem clamp(1rem, 5.5cqw, 4rem) 6.5rem;
	background: var(--cream);
	color: var(--navy);
	clip-path: polygon(0 3rem, 100% 0, 100% 100%, 0 100%);
	font-size: 0.95rem;
}
.footer-logo {
	width: 9rem;
	height: auto;
	margin-bottom: 1rem;
}
.site-footer p {
	max-width: 32rem;
	margin: 0 0 1rem;
}
.footer-address {
	margin: 0 0 1rem;
	font-style: normal;
}
.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-weight: 600;
}
.footer-fine {
	font-size: 0.85rem;
	opacity: 0.8;
}

/* ---------- Thumb bar: the two main actions under the thumb on phones ---------- */

.thumb-bar {
	position: fixed;
	z-index: 60;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 0.6rem;
	padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
	background: var(--cyan);
}
.thumb-bar[hidden] {
	display: none;
}
.thumb-bar .btn {
	flex: 1;
	height: auto;
	padding: 0.7rem 0.4rem 0.65rem;
	font-size: 1.15rem;
	line-height: 1;
	transform: skewX(-10deg);
}
.btn-on-cyan {
	color: var(--navy);
	border-color: var(--navy);
	border-width: 3px;
}

.join .btn-solid {
	height: auto;
	padding: 0.8rem 1.5rem 0.75rem;
	font-size: clamp(1.3rem, 6cqw, 1.9rem);
}
.join .btn-solid:hover,
.locked .btn-solid:hover {
	background: var(--orange);
	color: var(--navy);
}

/* ---------- Motion: hard cuts on the beat, never soft drifts ---------- */
/* Everything is visible by default; the .motion class (added only when motion is allowed) arms the cuts. */

.band-title {
	transition: clip-path 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.motion .band-title:not(.in) {
	clip-path: inset(0 100% 0 0);
}

.deck-card {
	transition: translate 0.3s steps(3, end);
}
.motion .deck:not(.in) .deck-card {
	translate: -115% 0;
}
.deck-card:nth-child(2) { transition-delay: 0.08s; }
.deck-card:nth-child(3) { transition-delay: 0.16s; }
.deck-card:nth-child(4) { transition-delay: 0.24s; }
.deck-card:nth-child(5) { transition-delay: 0.32s; }

/* The freeze-frame slam for the match card and the name card: scale only, so each keeps its own tilt. */
@keyframes slam {
	0% { scale: 1.14; filter: contrast(1.5) saturate(1.3); }
	40% { scale: 0.97; }
	100% { scale: 1; filter: none; }
}
.cut {
	animation: slam 0.32s steps(4, end);
}

/* Past presidents: each whole deck card (year, name and colour) crawls with scroll in stop-motion
   steps, so phones see it move without hover, and on hover replays a short version of its step-in.
   Cards move by `left` because `translate` belongs to the entrance cut above. Roster rows crawl too.
   Alternate cards and rows run opposite ways. */
.deck-card { position: relative; --crawl: 1.2rem; }
.roster li { --crawl: 0.5em; } /* smaller: two columns share a 1.5rem gap */
@keyframes deck-crawl {
	from { left: var(--crawl); }
	to { left: calc(var(--crawl) * -1); }
}
@keyframes deck-step {
	from { left: -2.5rem; }
	to { left: 0; }
}
@keyframes crawl {
	from { translate: var(--crawl) 0; }
	to { translate: calc(var(--crawl) * -1) 0; }
}
@media (hover: hover) {
	.deck-card:hover {
		animation: deck-step 0.3s steps(3, end);
	}
	.roster li:hover {
		animation: slam 0.32s steps(4, end);
		color: var(--orange);
	}
	.roster li:hover .roster-term {
		color: var(--cream);
	}
}
/* Without scroll timelines (Firefox today) a crawl would jump straight to its end, so it is gated. */
@supports (animation-timeline: view()) {
	.deck-card {
		animation: deck-crawl steps(10, end) both;
		animation-timeline: view();
	}
	.roster li {
		animation: crawl steps(10, end) both;
		animation-timeline: view();
	}
	.deck-card:nth-child(even),
	.roster li:nth-child(even) {
		animation-direction: reverse;
	}
	@media (hover: hover) {
		/* the step-in adds to wherever the crawl has the card */
		.deck-card:hover {
			animation: deck-crawl steps(10, end) both, deck-step 0.3s steps(3, end);
			animation-timeline: view(), auto;
			animation-composition: replace, add;
		}
		.roster li:hover {
			animation: crawl steps(10, end) both, slam 0.32s steps(4, end);
			animation-timeline: view(), auto;
		}
		.deck-card:nth-child(even):hover,
		.roster li:nth-child(even):hover {
			animation-direction: reverse, normal;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Wide screens: the same title card, recomposed landscape ---------- */
/* Phones keep the measured portrait composition above. From 900px the card is laid out
   across the width: headline left, beach right, action bar under both, tiles in one row. */

@container (min-width: 900px) {
	.topbar {
		height: 76px;
		padding: 0 4cqw;
	}
	.brand img {
		width: 150px;
	}
	.index {
		gap: 22px;
	}
	.index a {
		font-size: 22px;
	}

	.title-card {
		height: 47cqw;
	}
	.field-coral {
		clip-path: polygon(0 15cqw, 100% 0, 100% 13cqw, 0 31cqw);
	}
	.field-orange {
		clip-path: polygon(46% 34.7cqw, 100% 4cqw, 100% 31.5cqw);
	}
	.field-cyan {
		clip-path: polygon(0 37.5cqw, 100% 31.5cqw, 100% 42cqw, 0 48cqw);
	}
	.beach {
		left: 54cqw;
		top: -7cqw;
		width: 44cqw;
		height: 40cqw;
	}
	.headline {
		font-size: 12cqw;
	}
	.line-1 {
		top: 7cqw;
		left: 4cqw;
		transform: rotate(-8deg);
	}
	.line-2 {
		top: 18.4cqw;
		left: 4.2cqw;
		transform: rotate(-6deg);
	}
	.session {
		left: 4.6cqw;
		top: 30.6cqw;
		font-size: 2.4cqw;
		transform: rotate(-5deg);
	}
	.action-bar {
		top: 40cqw;
		justify-content: flex-start;
		gap: 2.5cqw;
		padding: 0 4cqw 0 6cqw;
		transform: translateY(-50%) rotate(-3.4deg);
	}
	/* hero buttons only: unscoped, these sizes grew every button on the page with the width */
	.action-bar .btn {
		height: 6.4cqw;
		padding: 0 2.4cqw;
	}
	.action-bar .btn-solid {
		width: auto;
		font-size: 3.9cqw;
	}
	.action-bar .btn-outline {
		flex: 0 0 auto;
		height: 5.2cqw;
		font-size: 2.9cqw;
		border-width: 0.3cqw;
	}

	.actions {
		margin-top: -3cqw;
		height: 22cqw;
	}
	.tiles {
		transform: rotate(-2deg);
	}
	.tiles li:nth-child(n) {
		top: 2.5cqw;
		width: 23cqw;
		height: 15.5cqw;
		--cut: polygon(1.6cqw 0, 100% 0, calc(100% - 1.6cqw) 100%, 0 100%);
	}
	.tiles li:nth-child(1) { left: 3cqw; }
	.tiles li:nth-child(2) { left: 26.6cqw; }
	.tiles li:nth-child(3) { left: 50.2cqw; }
	.tiles li:nth-child(4) { left: 73.8cqw; }
	.tile {
		padding: 1.8cqw 2cqw 1.6cqw 2.6cqw;
	}
	.tile > *,
	.tile-cream > * {
		transform: none;
	}
	.tile-num {
		font-size: 4.2cqw;
	}
	.tile .pictogram,
	.tile-cream .pictogram {
		position: static;
		grid-area: icon;
		font-size: 6.4cqw;
	}
	.tile-label,
	.tile-cream .tile-label {
		position: static;
		grid-area: label;
		font-size: 3.3cqw;
	}
	.tile-orange .tile-label {
		font-size: 2.9cqw;
	}
	.tile-night .tile-label {
		font-size: 3.3cqw;
	}
	.tile-night {
		padding-left: 2.6cqw;
	}
	.tile-cream {
		padding-left: 2.6cqw;
	}

	.band,
	.site-footer {
		padding-inline: max(4cqw, calc((100cqw - 1100px) / 2));
	}
	.matcher {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		column-gap: 4rem;
		align-items: start;
	}
	.matcher .band-title {
		grid-column: 1 / -1;
	}
	.match-card {
		margin-top: 0;
	}
	.sessions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 4rem;
	}
	.sessions .band-title,
	.sessions .band-lede,
	.roster {
		grid-column: 1 / -1;
	}
	.you-card {
		margin-top: 0;
		align-self: center;
	}
	.thumb-bar {
		display: none;
	}
}

/* Native button chrome off: the comp's buttons are flat printed shapes. */
button.btn {
	border: 0;
	cursor: pointer;
	font-family: var(--display);
}

/* Keeps a term like 501(c)(3) from breaking at a parenthesis. */
.nowrap {
	white-space: nowrap;
}

/* Placeholder marker: shown on the page until David confirms the fact. */
.tbc {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.15em 0.45em 0.1em;
	border: 1.5px dashed currentColor;
	font: 600 0.72rem/1 var(--body);
	letter-spacing: 0.02em;
	vertical-align: middle;
}

@container (min-width: 900px) {
	/* Every still at once: two rows of five, nothing to discover by scrolling sideways. */
	.reel {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 2.2rem 1.4rem;
		margin: 0;
		padding: 1rem 0 0;
		overflow: visible;
	}
	.numbers {
		grid-template-columns: repeat(4, 1fr);
	}
	.projects-grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.voices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 3.5rem;
		align-items: start;
	}
	.voices .band-title {
		grid-column: 1 / -1;
	}
	.voices .duo {
		margin: 0;
	}
	.hall {
		display: grid;
		grid-template-columns: 1fr 1.2fr;
		column-gap: 3.5rem;
		align-items: center;
	}
	.hall .band-title {
		grid-column: 1 / -1;
	}
	.hall-fig {
		margin: 0;
	}
	.about {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		column-gap: 4rem;
		align-items: start;
	}
	.about .band-title {
		grid-column: 1 / -1;
	}
	.names {
		margin-top: 0;
	}
	.join {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 4rem;
		align-items: center;
	}
	.join .band-title { grid-column: 1; }
	.join .steps { grid-column: 1; }
	.join > .btn { grid-column: 2; grid-row: 1 / span 2; justify-self: start; }
	.join .contact { grid-column: 1 / -1; max-width: none; }
	.contact-fields { grid-template-columns: repeat(3, 1fr); }
	.contact-field-wide { grid-column: 1 / -1; }
}

/* The match card is a navy panel inside the cream band: its outline button goes cream. */
.band-cream .match-card .btn-outline {
	color: var(--cream);
	border-color: var(--cream);
}
.band-cream .match-card .btn-outline:hover {
	background: var(--cream);
	color: var(--navy);
}

/* The headline wears lighter than the small lettering (David, 2026-10-11: "a little less worn"). */
.headline .line {
	-webkit-mask-image: image-set(url('/assets/plates/ink-wear-light.webp') type('image/webp'), url('/assets/plates/ink-wear-light.png') type('image/png'));
	mask-image: image-set(url('/assets/plates/ink-wear-light.webp') type('image/webp'), url('/assets/plates/ink-wear-light.png') type('image/png'));
}

/* The blank year stays visible once a name fills the card: "20__ · ALEX". */
.you-blank {
	display: inline-block;
	width: 0.85em;
	height: 0.09em;
	margin-left: 0.06em;
	background: currentColor;
	vertical-align: baseline;
}

/* One grain texel per device pixel on 3x screens too (the 1024 tile at 341 CSS px). */
@media (min-resolution: 2.75dppx) {
	.frame::after {
		background-size: 341px 341px;
	}
}