/**
 * Home page redesign sections (2026-08).
 *
 * Five sections that sit between the hero and the FAQ: the upcoming drops
 * rail, the "How Stakt works" flow, the value ledger, the EQL ballot
 * explainer and the review wall.
 *
 * Every section is full-bleed (its background and 2px rules reach the screen
 * edge) while its CONTENT is held to --stakt-shell. Constraining the whole
 * section instead would leave stripes of page background either side and
 * break the banded look the design depends on.
 *
 * Colour tokens come from home.css, which is enqueued first — this file only
 * adds what those sections need. Note home.css sets --accent to red at :root
 * and flips it green for the branded body classes, so anything here that uses
 * --accent inherits the correct one automatically.
 *
 * @package Stakt
 */

:root {
	--stakt-shell: 1440px;
	--stakt-paper: #f4f1ea;
	--stakt-paper-2: #ebe7dc;
	--stakt-paper-w: #fff;
	--stakt-hair: rgba( 10, 10, 10, .16 );
	--stakt-hair-soft: rgba( 10, 10, 10, .09 );
	--stakt-muted: #57534a;
	--stakt-muted-2: #9d968a;
}

.stakt-shell {
	width: 100%;
	max-width: var( --stakt-shell );
	margin-inline: auto;
	padding-inline: 56px;
}

@media ( max-width: 900px ) {
	.stakt-shell { padding-inline: 28px; }
}

@media ( max-width: 640px ) {
	.stakt-shell { padding-inline: 20px; }
}

/* Left for any .sec section still outside the shared shell. Pillars and the
   FAQ used to need it; both now use .ssec, which caps its own shell. */
.hf .sec--shell > * {
	max-width: var( --stakt-shell );
	margin-inline: auto;
}

/* ------------------------------------------------------- section shell */

/*
 * The frame every banded section shares: a 2px ink rule at the top, content
 * held to --stakt-shell, and a head of title-left / lead-right sitting on a
 * 2px rule of its own. Only the background and what goes under the rule change
 * between them.
 *
 * It exists because .svalue and .seql had grown near-identical copies of all
 * of it — drifting apart on gaps, padding and title size as they went — while
 * .pillars and .faq used a second, older frame (.sec / .sec-head) that was a
 * different width again. Four sections that should read as one system were
 * four independent definitions of it.
 */

.ssec { border-top: 2px solid var( --ink, #0a0a0a ); padding: 76px 0 84px; }
.ssec__shell { container-type: inline-size; }

.ssec__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 48px;
	padding-bottom: 34px;
	border-bottom: 2px solid var( --ink, #0a0a0a );
}

.ssec__hd {
	font-family: var( --display, 'Anton', sans-serif );
	text-transform: uppercase;
	font-size: clamp( 48px, 5.4cqi, 76px );
	line-height: 1.02;
	letter-spacing: .01em;
	margin: 0;
	color: var( --ink, #0a0a0a );
}

.ssec__lead {
	font-size: 16px;
	line-height: 1.6;
	color: var( --stakt-muted );
	max-width: 44ch;
	margin: 0;
	text-wrap: pretty;
}

.ssec__lead b { color: var( --ink, #0a0a0a ); font-weight: 600; }

/* The right half of the head when it carries more than a lead — a lead with an
   action under it. .ssec__top aligns on flex-end, so the stack's LAST item
   sits level with the baseline of the title opposite it: the button, which is
   what should line up with it. */
.ssec__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.ssec__lead a { color: inherit; }

.ssec__body { margin-top: 34px; }

/* --- four reasons ------------------------------------------------------ */

.spillars { background: var( --stakt-paper ); }

/* The grid used to be an inline style on the element, which is why it had no
   base rule here and the two responsive overrides in home.css both needed
   !important to beat it. Declared properly, they no longer do — but they are
   left as they are rather than touched from this file. */
.hf .spillars .pillar-grid {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 20px;
}

/* --- faq --------------------------------------------------------------- */

.sfaq { background: var( --stakt-paper-2 ); }

/* The head owns the rule under the title now, so the first row must not draw
   a second one three pixels below it. */
.hf .sfaq .faq-row:first-child { border-top: none; }

/* The head stacks before the title has to start hyphenating itself. */
@container ( max-width: 780px ) {
	.ssec__top { flex-direction: column; align-items: flex-start; gap: 18px; }
}

@media ( max-width: 900px ) {
	.ssec { padding: 48px 0 56px; }
}

/* ---------------------------------------------------------------- drops rail */

.sdrops {
	background: var( --stakt-paper );
	border-bottom: 2px solid var( --ink, #0a0a0a );
	padding: 34px 0 40px;
}

.sdrops__shell { container-type: inline-size; }

.sdrops__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 2px solid var( --ink, #0a0a0a );
}

.sdrops__head {
	font-family: var( --display, 'Anton', sans-serif );
	font-weight: 400;
	font-size: clamp( 22px, 2.6cqi, 30px );
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0;
	color: var( --ink, #0a0a0a );
}

.sdrops__nav { display: flex; gap: 8px; }

.sdrops__nav button {
	width: 42px;
	height: 42px;
	border: 2px solid var( --ink, #0a0a0a );
	background: transparent;
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 15px;
	cursor: pointer;
	color: var( --ink, #0a0a0a );
}

.sdrops__nav button:hover:not( :disabled ) { background: var( --ink, #0a0a0a ); color: var( --stakt-paper ); }
.sdrops__nav button:focus-visible { outline: 3px solid var( --accent ); outline-offset: 2px; }
.sdrops__nav button:disabled { opacity: .28; cursor: default; }

.sdrops__win {
	overflow: hidden;
	margin-top: 24px;
	/* Wider cards than a browse grid wants: each one carries a photo, a price,
	   a saving and a countdown, and at five-up they compress into a strip.
	   Under three-up so the art has width to fill — the card is short now, so
	   the picture has to grow sideways rather than down. */
	--sdrops-per: 2.6;
}

.sdrops__track {
	display: flex;
	gap: 16px;
	width: 100%;
	transition: transform .42s cubic-bezier( .4, 0, .1, 1 );
	cursor: grab;
	touch-action: pan-y;
}

.sdrops__track.is-drag { cursor: grabbing; transition: none; user-select: none; }

/* The fractional per-view is load-bearing: the sliver of the next card is what
   tells people the rail scrolls, without needing to notice the arrows.

   The slide sizes the track cell and nothing else — the vault card inside it
   owns every pixel of the card's own look, which is the point of reusing it. */
.sdrops__slide {
	flex: 0 0 calc( ( 100% - ( var( --sdrops-per ) - 1 ) * 16px ) / var( --sdrops-per ) );
	display: flex;
	min-width: 0;
}

.sdrops__slide > .dcard { width: 100%; }

/* ------------------------------------------------------- the drop card */

.dcard {
	display: flex;
	flex-direction: column;
	background: var( --stakt-paper-w );
	border: 1px solid var( --stakt-hair );
	color: var( --ink, #0a0a0a );
	text-decoration: none;
	transition: transform .1s ease, box-shadow .1s ease, border-color .15s ease;
}

.dcard:hover { transform: translate( -2px, -2px ); box-shadow: 4px 4px 0 var( --ink, #0a0a0a ); border-color: var( --ink, #0a0a0a ); }
.dcard:focus-visible { outline: 3px solid var( --accent ); outline-offset: 3px; }

/* The plate is the product's own stage: flat white, because the box art is
   itself shot on white — a warm ground put a visible grey rectangle behind
   every cut-out. 4:3 against a wider card: object-fit: contain sizes portrait
   art off the shorter axis, so height is what the art gets to use, and a
   square plate on a card this wide made a column too tall to scan. */
.dcard__plate {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var( --stakt-paper-w );
	overflow: hidden;
}

/* The shot box carries the inset so the image can be absolutely positioned
   against it. A percentage height on a grid or flow child of an auto-sized
   track does not resolve, which is how the box art ended up at its intrinsic
   size and overflowed the plate. */
.dcard__shot { position: absolute; inset: 6px; }
.dcard__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }

.dcard__ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; }

.dcard__ph { background: repeating-linear-gradient( -45deg, transparent 0 12px, rgba( 10, 10, 10, .05 ) 12px 13px ); }
.dcard__ph span {
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 10px;
	letter-spacing: .16em;
	text-align: center;
	color: var( --stakt-muted-2 );
}

.dcard__body { padding: 22px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }

.dcard__title { font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: 0; text-wrap: balance; }

.dcard__meta {
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 10.5px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var( --stakt-muted-2 );
	margin-top: 9px;
}

.dcard__price { display: flex; align-items: baseline; gap: 11px; margin-top: 16px; margin-bottom: auto; flex-wrap: wrap; }
.dcard__price b { font-family: var( --display, 'Anton', sans-serif ); font-size: 32px; font-weight: 400; line-height: 1; letter-spacing: .01em; }
.dcard__price s { font-family: var( --mono, 'Space Mono', monospace ); font-size: 12.5px; color: var( --stakt-muted-2 ); }

/* The price takes the slack, so the action lands at the same height on every
   card in the row however long the title ran. The rule is the card's only
   horizontal division and it stays put whether the action is a button or a
   countdown. */
.dcard__foot {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var( --stakt-hair );
}

.dcard__cta {
	display: block;
	text-align: center;
	padding: 15px 12px;
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: var( --ink, #0a0a0a );
	color: #fff;
	border: 1px solid var( --ink, #0a0a0a );
}

.dcard--upcoming .dcard__cta { background: transparent; color: var( --ink, #0a0a0a ); }
.dcard--sold .dcard__cta,
.dcard--restock .dcard__cta { background: transparent; color: var( --stakt-muted ); border-color: var( --stakt-hair ); }
.dcard:hover .dcard__cta { background: var( --accent ); border-color: var( --accent ); color: var( --accent-ink, #0a0a0a ); }

/* Not a button: a pre-launch drop has nothing to press, so this reads as a
   readout of the same weight and height rather than a disabled control. */
.dcard__count {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 14px;
	border: 1px solid var( --stakt-hair );
	background: var( --stakt-paper );
}

.dcard__count-k {
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --stakt-muted-2 );
}

.dcard__count-v {
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

/* Sold out is stated once in the badge; the rest of the card recedes rather
   than repeating it. */
.dcard--sold .dcard__title,
.dcard--restock .dcard__title,
.dcard--sold .dcard__price b,
.dcard--restock .dcard__price b { color: var( --stakt-muted-2 ); }
.dcard--sold .dcard__shot,
.dcard--restock .dcard__shot { opacity: .55; }

@container ( max-width: 1100px ) { .sdrops__win { --sdrops-per: 2.05; } }
@container ( max-width: 700px ) { .sdrops__win { --sdrops-per: 1.15; } }
@media ( max-width: 900px ) { .sdrops { padding: 26px 0 32px; } .sdrops__nav button { width: 38px; height: 38px; } }
@container ( max-width: 520px ) { .dcard__body { padding: 18px; } .dcard__title { font-size: 19px; } .dcard__price b { font-size: 28px; } }
@media ( prefers-reduced-motion: reduce ) { .sdrops__track { transition: none; } }

/* ------------------------------------------------------------ how it works */

.sflow {
	background: var( --ink, #0a0a0a );
	color: #fff;
	border-block: 2px solid var( --ink, #0a0a0a );

	/* The drops band above is also --ink, so the two ran together as one black
	   field with no seam. The same hairline the rows use inside the section,
	   rather than the 2px ink rule — that one is for edges against the paper
	   sections, where it reads; on black it would be invisible again. */
	border-top: 1px solid rgba( 255, 255, 255, .16 );

	/* The container lives here, not on .sflow__grid: an element is never
	   matched by a container query it declares itself, so with container-type
	   on the grid the @container rules below silently skipped every
	   .sflow__grid declaration and the 40%/1fr split survived to 320px — a
	   118px heading column beside a 177px note column. Descendant rules did
	   apply, which is why the rows restyled and the split did not. */
	container-type: inline-size;
}

/* Not held to --stakt-shell like its neighbours: the drops band above it runs
   to a 40px gutter, and at a 1440 cap this section's title started 256px
   further in than the first drop card — the two read as different pages. The
   gutter matches .store's so the title and the first card share an edge. */
.sflow__grid {
	display: grid;
	grid-template-columns: 40% 1fr;
	padding-inline: 40px;
}

.sflow__left {
	padding: 34px 48px 34px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-right: 1px solid rgba( 255, 255, 255, .16 );
}

.sflow__lede {
	margin: 26px 0 0;
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, .6 );
	text-wrap: pretty;
}

.sflow__title {
	font-family: var( --display, 'Anton', sans-serif );
	font-size: clamp( 48px, 6.6cqi, 88px );
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin: 0;
}

.sflow__rows { display: flex; flex-direction: column; }

/* Marker, name, note across one row. The rows are deliberately tall: the
   section is three lines of content and the height is what gives it presence,
   the same way the left column's title does. */
.sflow__row {
	position: relative;
	flex: 1;
	display: grid;
	/* The note column is the smaller of the two: it holds one short line, and
	   the earlier even-ish split starved the step name badly enough that
	   "Create an account" wrapped to two lines at desktop width. */
	grid-template-columns: 76px minmax( 0, 1fr ) minmax( 0, .62fr );
	align-items: center;
	column-gap: 34px;
	row-gap: 9px;

	/* Right inset matches the left. With none, the note sat flush against the
	   section's edge and read as text falling off the page. The border-bottom
	   is on the row box, so the hairline still runs the full width. */
	padding: 62px 56px 62px 56px;
	border-bottom: 1px solid rgba( 255, 255, 255, .16 );
	transition: background .18s ease;
}

.sflow__row:last-child { border-bottom: none; }
.sflow__row:hover { background: rgba( 255, 255, 255, .035 ); }

/* A thin ring, not a heavy badge: at this size a 2px border read as a filled
   button and competed with the step name next to it. */
.sflow__num {
	grid-row: 1;
	align-self: center;
	width: 76px;
	height: 76px;
	border: 1.5px solid rgba( 255, 255, 255, .34 );
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: var( --display, 'Anton', sans-serif );
	font-size: 30px;
	line-height: 1;
	color: rgba( 255, 255, 255, .82 );
	transition: border-color .18s ease, color .18s ease;
}

.sflow__row:hover .sflow__num { border-color: var( --accent ); color: var( --accent ); }
.sflow__name { font-family: var( --display, 'Anton', sans-serif ); font-size: 52px; line-height: 1; letter-spacing: .015em; text-transform: uppercase; margin: 0; }

/* Colour, not opacity: 45% white on near-black is under 4.5:1 for body text,
   and opacity would also fade any state we add later. */
.sflow__note {
	grid-column: 3;
	line-height: 1.55;
	color: rgba( 255, 255, 255, .72 );
	margin: 0;
	max-width: 38ch;
	font-size: 16px;

	/* Starts at its column rather than ending at the row's edge. Right-aligned
	   it hugged the section border with a wide gap between it and the step
	   name, so it read as a stray caption pinned to the edge instead of the
	   note belonging to that step. */
	justify-self: start;
	text-wrap: pretty;
}

@container ( max-width: 900px ) {
	.sflow__grid { grid-template-columns: minmax( 0, 1fr ); padding-inline: 28px; }
	/* Side by side needs width. Back to the marker + stacked text stack, which
	   means the marker spans both rows again and the note returns to column 2. */
	.sflow__num { grid-row: 1 / span 2; width: 58px; height: 58px; font-size: 24px; }
	.sflow__note { grid-column: 2; max-width: 60ch; justify-self: stretch; }
	.sflow__left { padding-right: 0; }
	.sflow__left { padding: 48px 0; border-right: none; border-bottom: 1px solid rgba( 255, 255, 255, .16 ); }
	.sflow__title { font-size: clamp( 44px, 7.6cqi, 56px ); }
	.sflow__row { grid-template-columns: 58px minmax( 0, 1fr ); column-gap: 18px; padding: 40px 0 32px; }
	.sflow__name { font-size: clamp( 26px, 5.2cqi, 32px ); }
}

@container ( max-width: 560px ) {
	.sflow__grid { padding-inline: 20px; }
	.sflow__row { grid-template-columns: 44px minmax( 0, 1fr ); column-gap: 14px; row-gap: 7px; padding: 34px 0 24px; }
	.sflow__num { width: 44px; height: 44px; font-size: 20px; border-width: 1.5px; }
	.sflow__note { font-size: 13.5px; line-height: 1.58; }
}

@media ( prefers-reduced-motion: reduce ) { .sflow__row, .sflow__num { transition: none; } }

/* ---------------------------------------------------------------- value bar */

.svalue { background: var( --stakt-paper ); }
.svalue__body {
	--svalue-row: 131px;
	--svalue-gap: 20px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 300px, 340px );
	gap: 44px;
}
/* align-content: start is load-bearing. The body grid stretches this column to
   the stats panel's height, and a grid's auto rows stretch to fill by default —
   with six cards over three rows that is invisible, but with two the single row
   grew to the panel's full height and each card became a 370px-tall box with
   100px of content and a 270px white gap under it. The art column, being
   height:100%, turned into a narrow vertical slice of a landscape photo.
   Rows keep their content height; short lists now sit at the top of the
   column instead of being stretched down it. */
/* Three rows deep, then it scrolls. The ledger takes up to twenty drops and a
   ten-row column would run past everything beside it; three rows is the most
   the section can show while still reading as a proof point rather than a
   catalogue.

   Rows are a fixed height and have to be: the art is an img at height: 100%,
   which has nothing to resolve against in an auto row — let the row size
   itself and the image contributes nothing, the row collapses to 62px and the
   card clips its own name. So the height is set, and set to what the content
   actually measures (141px plus borders) rather than to a padded-out 168 that
   left 25px of dead space under every price.

   That makes the ceiling real: category is clamped to two lines and name to
   one, so the tallest card the data can produce is the height of the row.
   Raise --svalue-row and relax the name clamp together if longer names ever
   need to wrap.

   align-content: start still matters — with fewer rows than the cap they keep
   their height instead of stretching to fill it. */
.svalue__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: var( --svalue-row );
	align-content: start;
	gap: var( --svalue-gap );
	max-height: calc( 3 * var( --svalue-row ) + 2 * var( --svalue-gap ) );
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba( 10, 10, 10, .32 ) transparent;
}

.svalue__cards::-webkit-scrollbar { width: 8px; }
.svalue__cards::-webkit-scrollbar-track { background: transparent; }
.svalue__cards::-webkit-scrollbar-thumb { background: rgba( 10, 10, 10, .28 ); }

.svalue__card {
	background: var( --stakt-paper-w );
	border: 1px solid var( --stakt-hair );
	display: grid;
	grid-template-columns: 150px minmax( 0, 1fr );

	/* One row, floored at zero, so the art cannot size it. The img is
	   height: 100%, but an auto row still takes the image's intrinsic height
	   into account — a 1024x1024 shot in a 150px column asked for a 155px row
	   inside a 144px card, which overflowed into the hidden overflow and left
	   a different amount of slack under each price depending on the photo's
	   aspect ratio. Pinned to the card, every card measures the same. */
	grid-template-rows: minmax( 0, 1fr );
	overflow: hidden;
}

.svalue__card img { width: 100%; height: 100%; object-fit: cover; display: block; border-right: 1px solid rgba( 10, 10, 10, .14 ); }

/*
 * No art yet: the art column stays — every card is the same two-column object
 * — and gets a hatched paper tile so the absence reads as a missing photo
 * rather than as a card that lost its layout.
 */
.svalue__art {
	background: repeating-linear-gradient( 135deg, var( --stakt-paper-2 ) 0 7px, var( --stakt-paper ) 7px 14px );
	border-right: 1px solid rgba( 10, 10, 10, .14 );
}
.svalue__c { padding: 16px 18px; min-width: 0; }
/* A date and nothing else, so one line is the whole story — no clamp and no
   reserved second line, both of which existed to tame the category that used
   to sit here. min-height keeps an undated row's name and price in step with
   its neighbours', since the row height is fixed. */
.svalue__d {
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --stakt-muted-2 );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
	min-height: 1.3em;
}
.svalue__n {
	font-weight: 600;
	font-size: 17px;
	margin-top: 7px;
	letter-spacing: -.01em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.svalue__p { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.svalue__p b { font-family: var( --display, 'Anton', sans-serif ); font-size: 26px; font-weight: 400; }

/* Sold out: the tag states it and nothing else changes. The card is
   deliberately NOT dimmed — this ledger is a record of drops that landed, and
   fading most of it turned the section into a wall of grey. Greying out a
   sold-out box is the store page's job, where it is still a thing you might
   have been about to buy. */
.svalue__out {
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --stakt-muted-2 );
	border: 1px solid var( --stakt-hair );
	padding: 3px 7px;
	white-space: nowrap;
}

/* Stretches to the body row, which is what lines its bottom edge up with the
   card column's. That was only safe once the column was capped: before it, a
   twenty-drop ledger stretched the panel to its full height and pinned the CTA
   (margin-top: auto) a thousand pixels below the figure it belongs to. Now the
   row is bounded by three card rows, so the CTA lands at the foot of the panel
   opposite the last visible drop. */
.svalue__panel {
	background: var( --ink, #0a0a0a );
	color: #fff;
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
}
.svalue__big { font-family: var( --display, 'Anton', sans-serif ); font-size: clamp( 60px, 5.4cqi, 86px ); line-height: .9; letter-spacing: .05em; }
.svalue__k { align-self: flex-start; text-align: left; font-family: var( --mono, 'Space Mono', monospace ); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #7e7e7e; margin-top: 20px; }
.svalue__rule { height: 1px; background: #2a2a2a; margin: 24px 0; }

.svalue__mini {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a8a8a;
	padding: 9px 0;
	border-bottom: 1px solid #1e1e1e;
}

.svalue__mini:last-of-type { border-bottom: none; }
.svalue__mini b { color: #fff; font-weight: 400; font-variant-numeric: tabular-nums; }

.svalue__cta {
	margin-top: auto;
	background: var( --accent );
	color: var( --ink, #0a0a0a );
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 18px 24px;
	text-align: center;
	text-decoration: none;
	display: block;
}

.svalue__cta:hover { background: #fff; color: var( --ink, #0a0a0a ); }
.svalue__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* No figures yet: collapse rather than hold a 340px gap open for a panel
   that is not rendering. */
.svalue__body--solo { grid-template-columns: minmax( 0, 1fr ); }

@container ( max-width: 1180px ) { .svalue__body, .svalue__cards { grid-template-columns: minmax( 0, 1fr ); } }
@container ( max-width: 520px ) {
	.svalue__card { grid-template-columns: 116px minmax( 0, 1fr ); }
	.svalue__c { padding: 13px 14px; }
	.svalue__n { font-size: 15px; }
	.svalue__p b { font-size: 22px; }
	.svalue__cta { letter-spacing: .13em; padding: 16px 14px; font-size: 11.5px; }
}

/* ------------------------------------------------------------- EQL explainer */

.seql { background: var( --stakt-paper-2 ); }
.seql__row { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 20px; }
.seql__c { background: var( --stakt-paper-w ); border: 1px solid var( --stakt-hair ); padding: 24px 24px 26px; }
.seql__n { font-family: var( --display, 'Anton', sans-serif ); font-size: 56px; line-height: .86; color: var( --ink, #0a0a0a ); }
.seql__h { font-weight: 600; font-size: 19px; letter-spacing: -.01em; margin-top: 18px; }
.seql__d { font-size: 14px; line-height: 1.55; color: var( --stakt-muted ); margin-top: 9px; text-wrap: pretty; }

/* Ink rather than the accent the shop CTA uses: this one leaves the site for
   EQL, and giving it the same green would read as the same kind of action. */
.seql__cta {
	display: inline-block;
	background: var( --ink, #0a0a0a );
	color: #fff;
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 15px 22px;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.seql__cta:hover { background: var( --accent ); color: var( --accent-ink, #0a0a0a ); }
.seql__cta:focus-visible { outline: 3px solid var( --ink, #0a0a0a ); outline-offset: 3px; }

@container ( max-width: 900px ) { .seql__row { grid-template-columns: minmax( 0, 1fr ); } }
@media ( max-width: 900px ) { .seql__n { font-size: 46px; } }

/* ------------------------------------------------------------------ the wall */

.swall { background: var( --stakt-paper-2 ); border-top: 2px solid var( --ink, #0a0a0a ); padding: 62px 0 70px; }
.swall__shell { container-type: inline-size; }

.swall__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding-bottom: 26px; border-bottom: 2px solid var( --ink, #0a0a0a ); }
.swall__hd { font-family: var( --display, 'Anton', sans-serif ); text-transform: uppercase; font-size: clamp( 38px, 4.2cqi, 56px ); line-height: 1.02; letter-spacing: .01em; margin: 0; color: var( --ink, #0a0a0a ); }

.swall__filters { display: flex; align-items: baseline; gap: 10px; }
.swall__flab { font-family: var( --mono, 'Space Mono', monospace ); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8a8477; }

.swall__sel {
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --ink, #0a0a0a );
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba( 10, 10, 10, .35 );
	padding: 4px 20px 5px 2px;
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, #0a0a0a 50% ), linear-gradient( 135deg, #0a0a0a 50%, transparent 50% );
	background-position: calc( 100% - 8px ) 10px, calc( 100% - 4px ) 10px;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}

.swall__sel:focus-visible { outline: 2px solid var( --accent ); outline-offset: 3px; }

.swall__wall { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 16px; height: 660px; margin-top: 26px; }
.swall__col { display: grid; gap: 16px; min-height: 0; }
.swall__i { background: var( --stakt-paper-w ); border: 1px solid var( --stakt-hair ); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* The photo is a fixed 4:3 block, not the leftover space under the quote.
   With `flex: 1` a wordy review squeezed its own picture down to a 90px
   sliver while a short one next to it got a 200px photo, so the same
   component rendered at two completely different shapes depending on how
   much its author typed. A declared ratio makes every photo the same
   shape; the text takes whatever the row has left. */
.swall__ph { flex: 0 0 auto; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; border-bottom: 1px solid var( --stakt-hair ); }
.swall__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swall__bd { padding: 15px 17px 16px; display: flex; flex-direction: column; min-height: 0; }
.swall__i.is-text .swall__bd,
.swall__i:not( .is-text ) .swall__bd { flex: 1; }
.swall__stars { font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: .1em; color: var( --ink, #0a0a0a ); margin-bottom: 11px; }
.swall__stars .is-off { color: #c9c2b3; }
.swall__q { font-size: 14.5px; line-height: 1.55; margin: 0; text-wrap: pretty; overflow: hidden; }
.swall__who { margin-top: auto; padding-top: 13px; }
.swall__n { font-weight: 600; font-size: 13px; letter-spacing: -.005em; }
.swall__c { font-family: var( --mono, 'Space Mono', monospace ); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var( --stakt-muted-2 ); margin-top: 2px; }

.swall__foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	margin-top: 14px;
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8a8477;
}

.swall__foot a { background: var( --ink, #0a0a0a ); color: var( --stakt-paper ); font-weight: 700; padding: 15px 26px; letter-spacing: .2em; font-size: 11px; text-decoration: none; }
.swall__foot a:hover { background: var( --accent ); color: var( --ink, #0a0a0a ); }

/* Pre-JS fallback heights only: the script sizes the wall from the heaviest
   column once it runs, so a thinly curated wall does not stretch its cards.
   These figures are the 12-tile case at each column count. */
@container ( max-width: 1100px ) { .swall__wall { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); height: 1220px; } }
@container ( max-width: 640px ) {
	.swall__wall { grid-template-columns: minmax( 0, 1fr ); height: auto; }
	.swall__col { grid-template-rows: none !important; }
	.swall__i { min-height: 190px; }
	.swall__i:not( .is-text ) { min-height: 330px; }
	.swall__ph { min-height: 200px; aspect-ratio: auto; }
	.swall__top { flex-direction: column; align-items: flex-start; gap: 18px; }
	.swall__foot { justify-content: flex-start; }
}
@media ( max-width: 900px ) { .swall { padding: 40px 0 48px; } }

/* ── Ballot slide blurb + pre-open EQL link ──────────────────────────────
   The blurb sits between the slide title and the price block, so it is capped
   narrow: full hero width would run it to ~90 characters and pull the eye off
   the prices underneath. The link below it is deliberately not a .btn — the
   open-state slide already carries a full-size accent button lower down, and
   two competing buttons on one slide is the thing this replaces. */
.hf .hero__ballot-blurb {
	margin: 10px 0 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, .72 );
	text-wrap: pretty;
}

.hf .hero__ballot-peek {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 18px;
	padding: 0 0 3px;
	border-bottom: 1px solid rgba( 255, 255, 255, .3 );
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --paper-white, #fff );
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease;
}

.hf .hero__ballot-peek:hover,
.hf .hero__ballot-peek:focus-visible {
	color: var( --accent );
	border-bottom-color: var( --accent );
}

.hf .hero__ballot-peek .arr { transition: transform .18s ease; }
.hf .hero__ballot-peek:hover .arr { transform: translateX( 3px ); }

@media ( prefers-reduced-motion: reduce ) {
	.hf .hero__ballot-peek,
	.hf .hero__ballot-peek .arr { transition: none; }
}

/* ── Upcoming drops rail head ────────────────────────────────────────────
   Small on purpose: the cards below it are the section, and a display-size
   heading here would compete with the two full-size section headings that
   follow it down the page. */
.hf .store__head { margin: 0 0 28px; }

.hf .store .store__title {
	margin: 0;
	font-family: var( --mono, 'Space Mono', monospace );
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --accent );
}

.hf .store .store__lede {
	margin: 10px 0 0;
	max-width: 52ch;
	font-size: 15px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, .68 );
	text-wrap: pretty;
}

@media ( max-width: 600px ) {
	.hf .store__head { margin-bottom: 20px; }
}