/* Galleria — screens.css · reserved enqueue slot (handle galleria-screens). Per-screen CSS lands in Phase 3. */

/* =====================================================================
 * SCR-01 · Voices landing
 * Reference: design-reference/screens/Voices Landing.dc.html (1:1 structure/
 * spacing/type, translated from its inline-style design-runtime artifact
 * into these classes). Near-still: every hover below is a plain,
 * durationless :hover rule — no transition, no !important, no --gl-h/--gl-bw
 * indirection (CODE-STAGE-NOTES §7.2). radius 0 throughout (editorial-sharp).
 * ===================================================================== */

.gl-vx-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Masthead frame ---- */

.gl-vx-masthead {
	padding-top: clamp( 28px, 4vw, 48px );
}

.gl-vx-frame {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-vx-frame-left,
.gl-vx-frame-right {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gl-vx-frame-left {
	color: var( --gl-ink );
}

.gl-vx-frame-right {
	color: var( --gl-text-2 );
}

.gl-vx-h1-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 40px;
	padding: clamp( 28px, 4vw, 44px ) 0 clamp( 22px, 3vw, 32px );
}

.gl-vx-h1 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-bold );
	font-size: clamp( 2.1rem, 4vw, 3.25rem );
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

/* ---- The columnist index · 3x2 press grid ---- */

.gl-vx-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 1px;
	background: var( --gl-line );
	border: 1px solid var( --gl-line );
	border-radius: var( --gl-radius );
}

.gl-vx-tile,
.gl-vx-statement {
	background: var( --gl-bg );
	display: flex;
	flex-direction: column;
}

.gl-vx-tile-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var( --gl-ink );
}

.gl-vx-tile-band {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var( --gl-line );
}

.gl-vx-tile-no {
	font-family: var( --gl-font-kicker );
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-vx-tile-theme {
	font-family: var( --gl-font-kicker );
	font-size: 0.72rem;
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

/* The statement band's right-hand "Vol. {n}" is NOT the red theme label — the
   reference keeps it at the same weight/size/color as "The Index" left side. */
.gl-vx-tile-theme--muted {
	font-size: 0.66rem;
	font-weight: var( --gl-fw-body );
	color: var( --gl-text-2 );
}

.gl-vx-portrait {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	filter: grayscale( 1 );
	border-radius: var( --gl-radius-media );
}

.gl-vx-portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Per-columnist focal point (FIX 3 / G41). The 3/4 slot crops top+bottom on a
	   tall source; --gl-vx-focus (set inline per columnist_no in page-voices.php)
	   biases the crop so no crown is cut. Defaults to centre when unset (Zocchi
	   and any future columnist frame fine at centre — left untouched). */
	object-position: var( --gl-vx-focus, 50% 50% );
}

/* Placeholder slot (until real portraits land): a dark photographic vignette
   DISTINCT from the 1px hairline tone, so the tile-to-tile seams stay visible in
   the portrait band (a flat --gl-line fill made adjacent portraits read as one
   stuck mass). Neutral grays — grayscale(1) at rest reveals only the light->dark
   gradient, matching the reference's dark placeholder (Voices Landing.dc.html:141). */
.gl-vx-portrait-ph {
	position: absolute;
	inset: 0;
	background: radial-gradient( 58% 50% at 50% 30%, #9a9a9a 0%, #6a6a6a 55%, #2b2b2b 100% );
}

.gl-vx-ph-label {
	position: absolute;
	left: 12px;
	bottom: 10px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-slot-label );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.5 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

/* Name block: the wrapper carries the hairline + padding + margin-top:auto (pins
   it to the tile foot for parity); the inner text carries min-height 2.2em so a
   one- or two-line name reserves the same vertical space and leaves breathing
   room below (reference Voices Landing.dc.html:144-146). */
.gl-vx-name {
	display: block;
	padding: 13px 16px 16px;
	border-top: 1px solid var( --gl-line );
	margin-top: auto;
}

.gl-vx-name-text {
	display: block;
	min-height: 2.2em;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.5rem, 2.1vw, 2rem );
	line-height: 1.08;
	letter-spacing: -0.008em;
	color: var( --gl-ink );
}

/* Combined hover: the whole tile is the target (portrait -> color, name -> red),
   instantaneous — ordinary :hover, no transition (near-still). */
.gl-vx-tile:hover .gl-vx-portrait {
	filter: grayscale( 0 );
}

.gl-vx-tile:hover .gl-vx-name-text {
	color: var( --gl-red );
}

/* ---- The statement — the grid's closing type tile (static, not a link) ---- */

.gl-vx-statement-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 20px 16px 16px;
}

.gl-vx-statement-text {
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-bold );
	font-size: clamp( 1.6rem, 2.5vw, 2.35rem );
	line-height: 1.18;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-vx-red {
	color: var( --gl-red );
}

.gl-vx-mark {
	font-family: var( --gl-font-kicker );
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

/* ---- <=1000 equal-tile rail (STATIC resting state; the carousel motion is a
   later feature — no JS/animation here). Base-then-override: this block sits
   AFTER the base .gl-vx-grid rule so equal-specificity overrides win by source
   order (the THM-04 cascade lesson). ---- */
@media ( max-width: 1000px ) {
	.gl-vx-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min( 78vw, 340px );
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	/* MOT-01: suspend snap while the carousel auto-drifts so the fractional rAF
	   sub-stride writes are not re-snapped (D60 — the ONLY mechanism that beats
	   snap; the D57 raw-rAF and D58 scrollTo-per-cycle attempts are proven dead
	   ends). 0,2,0 over the 0,1,0 base rule + source-order-after (THM-04/D56). */
	.gl-vx-grid.is-drifting {
		scroll-snap-type: none;
	}

	.gl-vx-grid::-webkit-scrollbar {
		display: none;
	}

	.gl-vx-tile,
	.gl-vx-statement {
		scroll-snap-align: start;
	}
}

/* ---- The Latest · feed ---- */

.gl-vx-feed {
	padding-top: clamp( 48px, 6vw, 84px );
	/* G37 footer-clear — the feed is the last section (FIX 5 / the QA-01 sweep). */
	padding-bottom: clamp( 64px, 8vw, 110px );
	/* Scroll-anchor pagination target (#feed): land the paged reload CLEAR of the
	   sticky masthead. --gl-hh is the real header height (chrome.js); +16px gap. */
	scroll-margin-top: calc( var( --gl-hh ) + 16px );
}

.gl-vx-feed-head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-top: 3px solid var( --gl-ink );
	padding-top: 18px;
	margin-bottom: clamp( 24px, 3vw, 40px );
}

.gl-vx-eyebrow {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-vx-feed-h2 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 2.8vw, 2.5rem );
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
}

.gl-vx-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 420px ), 1fr ) );
	gap: clamp( 32px, 4vw, 56px ) clamp( 28px, 3.5vw, 48px );
}

.gl-vx-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.gl-vx-card-stretch {
	position: absolute;
	inset: 0;
	z-index: var( --gl-z-base );
}

.gl-vx-card-media {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	filter: grayscale( 1 );
	border-radius: var( --gl-radius-media );
}

.gl-vx-card-media:hover {
	filter: grayscale( 0 );
}

.gl-vx-card-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vx-card-media-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 42% 38%, #9a9a9a 0%, #6a6a6a 48%, #2b2b2b 100% );
}

.gl-vx-card-no {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-corner-no );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.85 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-vx-card-body {
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.gl-vx-card-kicker {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-vx-card-title {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-card );
	line-height: 1.18;
	letter-spacing: -0.006em;
	color: var( --gl-ink );
	text-decoration: none;
}

.gl-vx-card-title:hover {
	color: var( --gl-red );
}

.gl-vx-card-dek {
	margin: 0;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-dek );
	line-height: var( --gl-lh-dek );
	color: var( --gl-text-2 );
	max-width: 46ch;
}

.gl-vx-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

/* Chip hover (G28 owner extension): a WHOLE-CHIP combined target — the photo
   colourises (grayscale(1)->0) AND the name reddens, together, instantaneous — the
   same grammar the columnist tile uses (MOTION #12). Deliberately overrides the
   .dc.html static-grayscale feed chip. Rest state stays grayscale (below). The card
   media and title remain their own SEPARATE hover targets; the chip is the third. */
.gl-vx-chip {
	position: relative;
	z-index: var( --gl-z-raised );
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var( --gl-ink );
}

.gl-vx-chip-portrait {
	flex: none;
	display: block;
	width: 30px;
	height: 30px;
	overflow: hidden;
	filter: grayscale( 1 );
}

.gl-vx-chip-portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vx-chip-portrait-ph {
	display: block;
	width: 100%;
	height: 100%;
	background: radial-gradient( 60% 55% at 50% 32%, #9a9a9a 0%, #6a6a6a 60%, #2b2b2b 100% );
}

.gl-vx-chip-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gl-vx-chip-name {
	font-family: var( --gl-font-body );
	font-weight: var( --gl-fw-bold );
	font-size: var( --gl-fs-chip );
	line-height: 1.1;
}

.gl-vx-chip-theme {
	font-family: var( --gl-font-kicker );
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

/* G28 combined chip hover: photo -> colour + name -> red, together, instantaneous. */
.gl-vx-chip:hover .gl-vx-chip-portrait {
	filter: grayscale( 0 );
}

.gl-vx-chip:hover .gl-vx-chip-name {
	color: var( --gl-red );
}

.gl-vx-card-date {
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	color: var( --gl-text-2 );
}

/* ---- Pagination — three-zone: [← Prev] · [1 2 …] · [Next →] ----
   Reference Voices Landing.dc.html:324-332: a space-between flex row, Etna-caps
   edges (disabled = 0.35 ink), Garamond numbers (current = red 700). Server-
   rendered <a>/<span> from page-voices.php, not a client component. */

.gl-vx-pag {
	margin-top: clamp( 36px, 4.5vw, 64px );
	border-top: 1px solid var( --gl-line );
	padding-top: 20px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.gl-vx-pag-edge {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	color: var( --gl-ink );
}

a.gl-vx-pag-edge:hover {
	color: var( --gl-red );
}

.gl-vx-pag-edge.is-disabled {
	color: rgba( 22, 22, 22, 0.35 );
}

.gl-vx-pag-nums {
	display: flex;
	align-items: baseline;
	gap: 26px;
}

.gl-vx-pag-num {
	font-family: var( --gl-font-body );
	font-size: 1.3rem;
	text-decoration: none;
	color: var( --gl-ink );
}

a.gl-vx-pag-num:hover {
	color: var( --gl-red );
}

.gl-vx-pag-num.is-current {
	color: var( --gl-red );
	font-weight: var( --gl-fw-bold );
}

/* =====================================================================
 * SCR-03 · Voices open post
 * Reference: design-reference/screens/Voices Open Post.dc.html (1:1 structure/
 * spacing/type, translated from its inline-style design-runtime artifact into
 * these classes). Near-still: every hover below is a plain, durationless
 * :hover rule — no transition, no !important, no --gl-h/--gl-bw indirection
 * (CODE-STAGE-NOTES §7.2). radius 0 throughout (editorial-sharp). Hero + inline
 * figure REST IN COLOR (no grayscale, no hover — MOTION §3 #17); related cards
 * are separate B&W->color / ink->red hover targets (MOTION §3 #18); the byline
 * chip is static (no hover — parity with the SCR-01 feed-card chip).
 * ===================================================================== */

.gl-vo-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Breadcrumb stamp (shared grammar with .gl-vx-frame) ---- */

.gl-vo-crumbwrap {
	padding-top: clamp( 48px, 6vw, 64px );
	margin-bottom: clamp( 40px, 5vw, 64px );
}

.gl-vo-crumb {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-vo-crumb-nav {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.gl-vo-crumb-link {
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.gl-vo-crumb-link:hover {
	color: var( --gl-red );
}

.gl-vo-crumb-sep {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	color: rgba( 22, 22, 22, 0.35 );
	line-height: 1;
}

.gl-vo-crumb-tail {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
	line-height: 1.4;
}

.gl-vo-crumb-clock {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
	white-space: nowrap;
}

/* ---- Post head ---- */

.gl-vo-head {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
	padding-bottom: clamp( 36px, 4.5vw, 48px );
}

.gl-vo-kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp( 20px, 2.5vw, 28px );
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: var( --gl-fw-bold );
	color: var( --gl-red-small );
}

.gl-vo-kicker::before,
.gl-vo-kicker::after {
	content: '';
	width: 32px;
	height: 1px;
	background: var( --gl-ink );
}

.gl-vo-title {
	margin: 0 0 clamp( 20px, 2.5vw, 28px );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-post );
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
	text-wrap: balance;
}

.gl-vo-dek {
	margin: 0 auto clamp( 32px, 4vw, 44px );
	max-width: 52ch;
	font-family: var( --gl-font-body );
	font-style: normal;
	font-size: clamp( 1.3rem, 1.9vw, 1.6rem );
	line-height: 1.5;
	color: var( --gl-text-2 );
}

.gl-vo-byline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 24px, 4vw, 48px );
	flex-wrap: wrap;
}

/* Byline chip — COLOUR at rest, NO hover (G28 owner extension: the author photo
   shows in full colour inside the open post; deliberately overrides the .dc.html
   static-grayscale byline chip, dc.html:155-157). */
.gl-vo-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var( --gl-ink );
	text-align: left;
}

.gl-vo-chip-portrait {
	flex: none;
	display: block;
	width: 30px;
	height: 30px;
	overflow: hidden;
}

.gl-vo-chip-portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vo-chip-portrait-ph {
	display: block;
	width: 100%;
	height: 100%;
	background: radial-gradient( 60% 55% at 50% 32%, #9a9a9a 0%, #6a6a6a 60%, #2b2b2b 100% );
}

.gl-vo-chip-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}

.gl-vo-chip-name {
	font-family: var( --gl-font-body );
	font-weight: var( --gl-fw-bold );
	font-size: var( --gl-fs-chip );
	line-height: 1.1;
}

.gl-vo-chip-theme {
	font-family: var( --gl-font-kicker );
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-vo-meta {
	display: flex;
	/* Seat the single-line SHARE on the value row as a peer of PUBLISHED / READ
	   TIME / DISPATCH (G45 alignment fix). `last baseline` seats it exactly on the
	   value baseline; `flex-end` is the progressive-enhancement fallback for engines
	   without flex last-baseline support (older Safari) — close enough now the
	   button is value-sized. Two declarations, last valid one wins. */
	align-items: flex-end;
	align-items: last baseline;
	gap: clamp( 20px, 3vw, 36px );
}

.gl-vo-meta-cell {
	text-align: left;
}

.gl-vo-meta-label {
	display: block;
	margin-bottom: 3px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-meta-label );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-vo-meta-value {
	font-family: var( --gl-font-body );
	font-weight: var( --gl-fw-bold );
	font-size: var( --gl-fs-caption );
	color: var( --gl-ink );
}

/* ---- SHARE control (G45) — ONE shared component in every post meta row
   (.gl-vo-meta / .gl-bo-meta / .gl-gp-meta). Matches the meta VALUE register
   (Garamond body, bold, --gl-fs-caption, ink) so it reads as a harmonious peer
   of the values (No. 018 / Jul 8—Jul 15), NOT the tiny Etna label line; it seats
   on the value baseline via the rows' `align-items: last baseline`. Ink → red on
   hover (the site hover language). The copied state is an instant text swap — no
   animation (near-still). Bound by js/share.js. (G45 alignment fix.) ---- */

.gl-share-cell {
	display: flex;
	/* Expose the button's baseline to the row's last-baseline alignment. */
	align-items: baseline;
}

.gl-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var( --gl-font-body );
	font-weight: var( --gl-fw-bold );
	font-size: var( --gl-fs-caption );
	line-height: 1;
	color: var( --gl-ink );
	-webkit-appearance: none;
	appearance: none;
}

.gl-share:hover,
.gl-share.is-copied {
	color: var( --gl-red );
}

.gl-share-ico {
	display: inline-flex;
}

.gl-share-ico-svg {
	display: block;
	width: 1.2em;
	height: 1.2em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Hero — FULL-BLEED, outside .gl-vo-inner. Rests in color: no grayscale,
   no hover (MOTION #17 — you are inside the post, not a hover target). ---- */

.gl-vo-hero {
	width: 100%;
	aspect-ratio: 21 / 9;
	position: relative;
	overflow: hidden;
}

.gl-vo-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vo-hero-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 40% 35%, #c9a76b 0%, #8a6a3c 45%, #3a2e1c 100% );
}

.gl-vo-herocap {
	margin: 16px auto clamp( 64px, 8vw, 96px );
	max-width: 60ch;
	text-align: center;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	line-height: 1.5;
	color: var( --gl-text-2 );
}

/* ---- Article body ---- */

.gl-vo-article {
	max-width: 720px;
	margin-inline: auto;
}

.gl-vo-body p {
	margin: 0 0 28px;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-body-serif );
	line-height: var( --gl-lh-body-serif );
	color: var( --gl-ink );
}

/* Drop cap — the lead paragraph (first <p> in the body; the <h2> section marker
   precedes it but :first-of-type still selects the first <p>). Values VERBATIM
   from the design reference helmet (Voices Open Post.dc.html:30). */
.gl-vo-body > p:first-of-type::first-letter {
	font-family: "Garamond", Georgia, serif;
	font-weight: 700;
	font-size: 4.6em;
	line-height: 0.8;
	float: left;
	padding-top: 6px;
	margin-right: 14px;
	color: var( --gl-ink );
}

/* Section marker (the body's in-content <h2>, e.g. "I · The Premise") — reset
   default h2 sizing, retype as a tracked Etna label with a flanking rule. */
.gl-vo-body h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 clamp( 28px, 3.5vw, 40px );
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	color: var( --gl-text-2 );
}

.gl-vo-body h2::before {
	content: '';
	width: 24px;
	height: 1px;
	background: rgba( 22, 22, 22, 0.66 );
	flex: none;
}

/* Inline figure — float right 52%, rests in color (no grayscale, no hover). */
.gl-vo-fig {
	float: right;
	width: 52%;
	margin: 6px 0 26px 36px;
	padding: 0;
}

.gl-vo-fig-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.gl-vo-fig-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vo-figcap {
	margin-top: 12px;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	line-height: 1.5;
	color: var( --gl-text-2 );
}

/* ---- Endnote — the working-register italic (the only italic on the page) ---- */

.gl-vo-endnote {
	clear: both;
	border-top: 1px solid var( --gl-line );
	margin-top: clamp( 48px, 6vw, 64px );
	padding-top: clamp( 24px, 3vw, 32px );
}

.gl-vo-endnote-label {
	display: block;
	margin-bottom: 14px;
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-vo-endnote-text {
	margin: 0;
	font-family: var( --gl-font-body );
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.6;
	color: var( --gl-text-2 );
}

/* ---- Related (shared grammar with .gl-vx-feed-head / .gl-vx-card) ---- */

.gl-vo-related-sec {
	margin-top: clamp( 64px, 8vw, 110px );
	padding-bottom: clamp( 64px, 8vw, 110px );
}

.gl-vo-related-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	border-top: 3px solid var( --gl-ink );
	padding-top: 18px;
	margin-bottom: clamp( 24px, 3vw, 40px );
}

.gl-vo-related-head-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gl-vo-eyebrow {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-vo-related-h2 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 2.8vw, 2.5rem );
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
}

.gl-vo-related-all {
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

.gl-vo-related-all:hover {
	color: var( --gl-red );
}

.gl-vo-related {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 28px, 4vw, 52px );
}

.gl-vo-rcard {
	position: relative;
	display: flex;
	flex-direction: column;
}

.gl-vo-rcard-stretch {
	position: absolute;
	inset: 0;
	z-index: var( --gl-z-base );
}

.gl-vo-rcard-media {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	filter: grayscale( 1 );
	border-radius: var( --gl-radius-media );
}

.gl-vo-rcard-media:hover {
	filter: grayscale( 0 );
}

.gl-vo-rcard-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vo-rcard-media-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 42% 38%, #9a9a9a 0%, #6a6a6a 48%, #2b2b2b 100% );
}

.gl-vo-rcard-no {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-corner-no );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.85 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-vo-rcard-body {
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.gl-vo-rcard-kicker {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-vo-rcard-title {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-card );
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.gl-vo-rcard-title:hover {
	color: var( --gl-red );
}

/* ---- <=768: figure unfloats, related grid -> 1 col (base-then-override: this
   block sits AFTER the base rules it overrides — the THM-04 cascade lesson). ---- */
@media ( max-width: 768px ) {
	.gl-vo-fig {
		float: none;
		width: 100%;
		margin: 32px 0;
	}

	.gl-vo-related {
		grid-template-columns: 1fr;
		gap: clamp( 32px, 5vw, 48px );
	}
}

/* =====================================================================
 * single-post.php fallback arm (B&L / "neither" — bare, safe, ZERO author
 * machinery; SCR-05 replaces this with the real B&L interior). Minimal
 * reading-column styling only, so an early B&L publish isn't unstyled raw HTML.
 * ===================================================================== */

.gl-post-fallback-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: clamp( 48px, 6vw, 64px ) var( --gl-gutter ) clamp( 64px, 8vw, 96px );
}

.gl-post-fallback-inner h1 {
	max-width: 800px;
	margin: 0 auto clamp( 24px, 3vw, 32px );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-post );
	line-height: 1.1;
	color: var( --gl-ink );
}

.gl-post-fallback-content {
	max-width: 720px;
	margin: 0 auto;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-body-serif );
	line-height: var( --gl-lh-body-serif );
	color: var( --gl-ink );
}

.gl-post-fallback-content p {
	margin: 0 0 28px;
}

/* =====================================================================
 * SCR-02 · Voices profile (single gl_columnist)
 * Reference: design-reference/screens/Voices Profile.dc.html (1:1 structure/
 * spacing/type). Near-still: every hover below is a plain, durationless :hover
 * rule — no transition, no !important, no --gl-h/--gl-bw indirection
 * (CODE-STAGE-NOTES §7.2). radius 0 throughout (editorial-sharp).
 * TWO OPPOSITE PHOTO TREATMENTS ON ONE SCREEN: the hero PORTRAIT rests in COLOUR
 * and is NOT a hover target (§6.1 LOCKED / MOTION #17 — you have entered the
 * columnist); the ARCHIVE photos rest B&W (grayscale(1)) and colourise on hover,
 * title -> red as a SEPARATE target (normal feed policy, MOTION #5-6). NO chip
 * anywhere (the page is the author). Stamp forks .gl-vx-frame; archive head forks
 * .gl-vo-related-head; archive card forks .gl-vx-card (16/9 media, no chip).
 * ===================================================================== */

.gl-vp-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Hero section + stamp frame (shared grammar with .gl-vx-frame) ---- */

.gl-vp-hero-sec {
	padding-top: clamp( 48px, 6vw, 64px );
}

.gl-vp-stamp {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
	margin-bottom: clamp( 28px, 4vw, 44px );
}

.gl-vp-stamp-left,
.gl-vp-stamp-right {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gl-vp-stamp-left {
	color: var( --gl-ink );
}

.gl-vp-stamp-right {
	color: var( --gl-text-2 );
}

/* ---- Hero grid — regrouped-TOP: name (a) + bio (c) left, portrait (b) spans
   both rows right. The OpenHouse bottom-anchor gap is dropped (owner review). ---- */

.gl-vp-hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: "a b" "c b";
	column-gap: clamp( 28px, 4vw, 56px );
	row-gap: clamp( 24px, 3.5vh, 36px );
}

.gl-vp-hero-name {
	grid-area: a;
	display: flex;
	flex-direction: column;
	gap: clamp( 16px, 2vw, 24px );
}

.gl-vp-hero-portrait {
	grid-area: b;
	position: relative;
	overflow: hidden;
	height: clamp( 620px, 78vh, 880px );
}

.gl-vp-hero-bio {
	grid-area: c;
	display: flex;
	flex-direction: column;
	align-self: start;
	gap: clamp( 18px, 2.5vw, 28px );
}

/* Name + theme subtitle */

.gl-vp-name {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-bold );
	font-size: clamp( 2.75rem, 7vw, 6rem );
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase; /* nameCase feel-gate; production default = uppercase. */
	color: var( --gl-ink );
}

.gl-vp-theme {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.gl-vp-theme-eyebrow {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: var( --gl-fw-bold );
	color: var( --gl-red-small );
}

.gl-vp-theme-value {
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.2rem, 2vw, 1.7rem );
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

/* Portrait — COLOUR at rest (NO grayscale), NOT a hover target. Height-driven. */

.gl-vp-portrait-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vp-portrait-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 58% 50% at 50% 30%, #c99a66 0%, #7a5a38 55%, #2b2014 100% );
}

.gl-vp-portrait-ph-label {
	position: absolute;
	left: 12px;
	bottom: 10px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-slot-label );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.5 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

/* Bio (wysiwyg) + No. rule row */

.gl-vp-bio {
	max-width: 52ch;
	font-family: var( --gl-font-body );
	font-size: clamp( 1.2rem, 1.5vw, 1.35rem );
	line-height: 1.6;
	color: var( --gl-ink );
}

.gl-vp-bio p {
	margin: 0 0 0.8em;
}

.gl-vp-bio p:last-child {
	margin-bottom: 0;
}

.gl-vp-rule {
	display: flex;
	align-items: center;
	gap: 16px;
}

.gl-vp-rule-no {
	flex: none;
	font-family: var( --gl-font-kicker );
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-vp-rule-line {
	flex: 1;
	height: 1px;
	background: var( --gl-line );
}

/* ---- The Archive (head grammar shared with .gl-vo-related-head) ---- */

.gl-vp-archive {
	padding-top: clamp( 48px, 6vw, 84px );
	/* G37 footer-clear — the archive is the profile's last section (FIX 2 / the
	   footer-clear sweep completed across ALL screens). */
	padding-bottom: clamp( 64px, 8vw, 110px );
	/* Scroll-anchor pagination target (#feed): land the ?apage reload CLEAR of the
	   sticky masthead. --gl-hh is the real header height (chrome.js); +16px gap. */
	scroll-margin-top: calc( var( --gl-hh ) + 16px );
}

.gl-vp-arch-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	border-top: 3px solid var( --gl-ink );
	padding-top: 18px;
	margin-bottom: clamp( 24px, 3vw, 40px );
}

.gl-vp-arch-head-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gl-vp-arch-eyebrow {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-vp-arch-h2 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 2.8vw, 2.5rem );
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
}

.gl-vp-arch-count {
	font-family: var( --gl-font-kicker );
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-vp-arch {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: clamp( 32px, 4vw, 56px ) clamp( 28px, 3.5vw, 48px );
}

/* Archive card — forks .gl-vx-card: 16/9 media, corner No., kicker + title + dek +
   date. NO chip. Media B&W at rest -> hover colour; title -> red — SEPARATE targets. */

.gl-vp-acard {
	position: relative;
	display: flex;
	flex-direction: column;
}

.gl-vp-acard-stretch {
	position: absolute;
	inset: 0;
	z-index: var( --gl-z-base );
}

.gl-vp-acard-media {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	filter: grayscale( 1 );
	border-radius: var( --gl-radius-media );
}

.gl-vp-acard-media:hover {
	filter: grayscale( 0 );
}

.gl-vp-acard-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-vp-acard-media-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 40% 35%, #9a9a9a 0%, #6a6a6a 48%, #2b2b2b 100% );
}

.gl-vp-acard-no {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-corner-no );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.85 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-vp-acard-body {
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gl-vp-acard-kicker {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

/* Archive title — DELIBERATE LITERAL clamp( 1.1rem, 1.5vw, 1.4rem ), the profile-
   local size from Voices Profile.dc.html; it is SMALLER than --gl-fs-title-card
   ( clamp( 1.25rem, 1.8vw, 1.7rem ) ). Do NOT replace it with the token. */
.gl-vp-acard-title {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	text-decoration: none;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.1rem, 1.5vw, 1.4rem );
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var( --gl-ink );
}

.gl-vp-acard-title:hover {
	color: var( --gl-red );
}

.gl-vp-acard-dek {
	margin: 0;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-dek );
	line-height: var( --gl-lh-dek );
	color: var( --gl-text-2 );
	max-width: 46ch;
}

.gl-vp-acard-date {
	margin-top: 4px;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	color: var( --gl-text-2 );
}

/* ---- Responsive (base-then-override: these blocks sit AFTER the base rules they
   override — the THM-04 cascade lesson). <=900: hero stacks name -> portrait ->
   bio, portrait height reduces. <=768: archive grid -> 1 col. ---- */
@media ( max-width: 900px ) {
	.gl-vp-hero {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: "a" "b" "c";
	}

	.gl-vp-hero-portrait {
		height: clamp( 440px, 68vh, 580px );
	}
}

@media ( max-width: 768px ) {
	.gl-vp-arch {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * SCR-04 · B&L landing
 * Reference: design-reference/screens/BL Landing.dc.html (1:1 structure/
 * spacing/type). Forks the .gl-vx landing grammar MINUS all author machinery
 * (no chip): the card kicker is the binary category, the meta is a single
 * date·read string. Near-still: every hover is a plain, durationless :hover
 * rule — no transition, no !important, no --gl-h indirection (CODE-STAGE-NOTES
 * §7.2). Paginator reuses the shared .gl-vx-pag component (G29). radius 0.
 * ===================================================================== */

.gl-bx-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Masthead frame (BL Landing.dc.html:106-113) ---- */

.gl-bx-masthead {
	padding-top: clamp( 28px, 4vw, 48px );
}

.gl-bx-frame {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-bx-frame-left,
.gl-bx-frame-right {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gl-bx-frame-left {
	color: var( --gl-ink );
}

.gl-bx-frame-right {
	color: var( --gl-text-2 );
}

/* h1 wrapper bottom pad = 10-16px (the switch section follows), NOT the Voices
   h1-row's 22-32px. */
.gl-bx-h1-row {
	padding: clamp( 28px, 4vw, 44px ) 0 clamp( 10px, 1.5vw, 16px );
}

.gl-bx-h1 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-bold );
	font-size: clamp( 2.1rem, 4vw, 3.25rem );
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

/* ---- D1 masthead switch (BL Landing.dc.html:121-128, SYSTEM-MAP §6 #23) ----
   Active word = the red state; inactive = dimmed ink -> hover raises to full ink
   (red is NEVER the tease). The .dc.html's --gl-h/!important indirection is a
   design-runtime artifact — dropped for ordinary :hover here (§7.2). */

.gl-bx-switch-sec {
	padding-top: clamp( 16px, 2vw, 24px );
}

.gl-bx-switch {
	border-top: 3px solid var( --gl-ink );
	padding: clamp( 16px, 2vw, 24px ) 0 clamp( 6px, 1vw, 10px );
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: clamp( 14px, 2.2vw, 30px );
}

.gl-bx-filter {
	font-family: var( --gl-font-kicker );
	font-size: clamp( 1.5rem, 3vw, 2.5rem );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	color: rgba( 22, 22, 22, 0.55 );
}

a.gl-bx-filter:hover {
	color: var( --gl-ink );
}

.gl-bx-filter.is-active {
	color: var( --gl-red );
}

.gl-bx-switch-sep {
	font-family: var( --gl-font-kicker );
	font-size: clamp( 1.5rem, 3vw, 2.5rem );
	line-height: 1;
	color: var( --gl-line );
}

/* ---- The feed (BL Landing.dc.html:133-152) ----
   padding-top 36-60 (NOT the Voices 48-84); NO eyebrow/H2 head — the switch is
   the feed's header. */

.gl-bx-feed {
	padding-top: clamp( 36px, 4.5vw, 60px );
	/* G37 footer-clear — the feed is the last section (FIX 5 / the QA-01 sweep). */
	padding-bottom: clamp( 64px, 8vw, 110px );
}

.gl-bx-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 420px ), 1fr ) );
	gap: clamp( 32px, 4vw, 56px ) clamp( 28px, 3.5vw, 48px );
}

.gl-bx-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.gl-bx-card-stretch {
	position: absolute;
	inset: 0;
	z-index: var( --gl-z-base );
}

.gl-bx-card-media {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	filter: grayscale( 1 );
	border-radius: var( --gl-radius-media );
}

.gl-bx-card-media:hover {
	filter: grayscale( 0 );
}

.gl-bx-card-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-bx-card-media-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 42% 38%, #9a9a9a 0%, #6a6a6a 48%, #2b2b2b 100% );
}

.gl-bx-card-no {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-corner-no );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.85 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-bx-card-body {
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* kicker = the binary CATEGORY display name (Business/Lifestyle) — red; the B&L
   analogue of the Voices owner-theme kicker, NO author read. */
.gl-bx-card-kicker {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-bx-card-title {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-card );
	line-height: 1.18;
	letter-spacing: -0.006em;
	color: var( --gl-ink );
	text-decoration: none;
}

.gl-bx-card-title:hover {
	color: var( --gl-red );
}

.gl-bx-card-dek {
	margin: 0;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-dek );
	line-height: var( --gl-lh-dek );
	color: var( --gl-text-2 );
	max-width: 46ch;
}

/* NO chip/byline — the defining B&L trait. Meta = a single date·read string. */
.gl-bx-card-meta {
	margin-top: 8px;
}

.gl-bx-card-metatext {
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	color: var( --gl-text-2 );
}

/* =====================================================================
 * SCR-05 · B&L open post
 * Reference: design-reference/screens/BL Open Post.dc.html (1:1 structure/
 * spacing/type). Forks the SCR-03 .gl-vo interior byte-for-byte MINUS all
 * author machinery: NO byline chip; the kicker is the binary category; the
 * stamp-right is the post date (NOT the clock — B&L is non-Voices); the
 * endnote is a desk boilerplate. Near-still: every hover is a plain,
 * durationless :hover rule (CODE-STAGE-NOTES §7.2). Hero + inline figure REST
 * IN COLOR (inert, MOTION #17); related cards are separate B&W->color /
 * ink->red targets (#18). radius 0 throughout.
 * ===================================================================== */

.gl-bo-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Breadcrumb stamp (shared grammar with .gl-vx-frame) ---- */

.gl-bo-crumbwrap {
	padding-top: clamp( 48px, 6vw, 64px );
	margin-bottom: clamp( 40px, 5vw, 64px );
}

.gl-bo-crumb {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-bo-crumb-nav {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.gl-bo-crumb-link {
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.gl-bo-crumb-link:hover {
	color: var( --gl-red );
}

.gl-bo-crumb-sep {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	color: rgba( 22, 22, 22, 0.35 );
	line-height: 1;
}

.gl-bo-crumb-tail {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
	line-height: 1.4;
}

/* Stamp-right = the POST DATE (the document's own date, #22) — NOT the Voices
   edition clock. Same type treatment as the Voices .gl-vo-crumb-clock. */
.gl-bo-crumb-date {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
	white-space: nowrap;
}

/* ---- Post head (centered, max 860) — NO byline/chip (the B&L trait) ---- */

.gl-bo-head {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
	padding-bottom: clamp( 36px, 4.5vw, 48px );
}

.gl-bo-kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp( 20px, 2.5vw, 28px );
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: var( --gl-fw-bold );
	color: var( --gl-red-small );
}

.gl-bo-kicker::before,
.gl-bo-kicker::after {
	content: '';
	width: 32px;
	height: 1px;
	background: var( --gl-ink );
}

.gl-bo-title {
	margin: 0 0 clamp( 20px, 2.5vw, 28px );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-post );
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
	text-wrap: balance;
}

.gl-bo-dek {
	margin: 0 auto clamp( 32px, 4vw, 44px );
	max-width: 52ch;
	font-family: var( --gl-font-body );
	font-style: normal;
	font-size: clamp( 1.3rem, 1.9vw, 1.6rem );
	line-height: 1.5;
	color: var( --gl-text-2 );
}

/* Meta row — the whole head identity block minus the author. Self-centers
   (the Voices .gl-vo-byline wrapper that centered it is gone). */
.gl-bo-meta {
	display: flex;
	justify-content: center;
	/* Value-baseline align — seats the single-line SHARE on the value row (G45);
	   flex-end is the fallback for engines without flex last-baseline (older Safari). */
	align-items: flex-end;
	align-items: last baseline;
	gap: clamp( 20px, 3vw, 36px );
}

.gl-bo-meta-cell {
	text-align: left;
}

.gl-bo-meta-label {
	display: block;
	margin-bottom: 3px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-meta-label );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-bo-meta-value {
	font-family: var( --gl-font-body );
	font-weight: var( --gl-fw-bold );
	font-size: var( --gl-fs-caption );
	color: var( --gl-ink );
}

/* ---- Hero — FULL-BLEED, outside .gl-bo-inner. Rests in color, inert. ---- */

.gl-bo-hero {
	width: 100%;
	aspect-ratio: 21 / 9;
	position: relative;
	overflow: hidden;
}

.gl-bo-hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-bo-hero-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 42% 38%, #8fa6b8 0%, #57708a 45%, #1f2a38 100% );
}

.gl-bo-herocap {
	margin: 16px auto clamp( 64px, 8vw, 96px );
	max-width: 60ch;
	text-align: center;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	line-height: 1.5;
	color: var( --gl-text-2 );
}

/* ---- Article body ---- */

.gl-bo-article {
	max-width: 720px;
	margin-inline: auto;
}

.gl-bo-body p {
	margin: 0 0 28px;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-body-serif );
	line-height: var( --gl-lh-body-serif );
	color: var( --gl-ink );
}

/* Drop cap — the lead paragraph (first <p> in the body; the <h2> section marker
   precedes it but :first-of-type still selects the first <p>). Values VERBATIM
   from the design reference helmet (BL Open Post.dc.html:29). */
.gl-bo-body > p:first-of-type::first-letter {
	font-family: "Garamond", Georgia, serif;
	font-weight: 700;
	font-size: 4.6em;
	line-height: 0.8;
	float: left;
	padding-top: 6px;
	margin-right: 14px;
	color: var( --gl-ink );
}

/* Section marker (the body's in-content <h2>, e.g. "I · The Signals") — reset
   default h2 sizing, retype as a tracked Etna label with a flanking rule. */
.gl-bo-body h2 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 clamp( 28px, 3.5vw, 40px );
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	color: var( --gl-text-2 );
}

.gl-bo-body h2::before {
	content: '';
	width: 24px;
	height: 1px;
	background: rgba( 22, 22, 22, 0.66 );
	flex: none;
}

/* Inline figure — float right 52%, rests in color (no grayscale, no hover). */
.gl-bo-fig {
	float: right;
	width: 52%;
	margin: 6px 0 26px 36px;
	padding: 0;
}

.gl-bo-fig-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.gl-bo-fig-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-bo-figcap {
	margin-top: 12px;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	line-height: 1.5;
	color: var( --gl-text-2 );
}

/* ---- Endnote — the desk boilerplate italic (the only italic on the page).
   Label "End of dispatch"; the note is the desk's, NO author (#12). ---- */

.gl-bo-endnote {
	clear: both;
	border-top: 1px solid var( --gl-line );
	margin-top: clamp( 48px, 6vw, 64px );
	padding-top: clamp( 24px, 3vw, 32px );
}

.gl-bo-endnote-label {
	display: block;
	margin-bottom: 14px;
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-bo-endnote-text {
	margin: 0;
	font-family: var( --gl-font-body );
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.6;
	color: var( --gl-text-2 );
}

/* ---- Related (shared grammar with .gl-vx-feed-head / .gl-vx-card) ---- */

.gl-bo-related-sec {
	margin-top: clamp( 64px, 8vw, 110px );
	padding-bottom: clamp( 64px, 8vw, 110px );
}

.gl-bo-related-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	border-top: 3px solid var( --gl-ink );
	padding-top: 18px;
	margin-bottom: clamp( 24px, 3vw, 40px );
}

.gl-bo-related-head-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gl-bo-eyebrow {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-bo-related-h2 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 2.8vw, 2.5rem );
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
}

.gl-bo-related-all {
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

.gl-bo-related-all:hover {
	color: var( --gl-red );
}

.gl-bo-related {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 28px, 4vw, 52px );
}

.gl-bo-rcard {
	position: relative;
	display: flex;
	flex-direction: column;
}

.gl-bo-rcard-stretch {
	position: absolute;
	inset: 0;
	z-index: var( --gl-z-base );
}

.gl-bo-rcard-media {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	filter: grayscale( 1 );
	border-radius: var( --gl-radius-media );
}

.gl-bo-rcard-media:hover {
	filter: grayscale( 0 );
}

.gl-bo-rcard-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gl-bo-rcard-media-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 42% 38%, #9a9a9a 0%, #6a6a6a 48%, #2b2b2b 100% );
}

.gl-bo-rcard-no {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-corner-no );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.85 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-bo-rcard-body {
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.gl-bo-rcard-kicker {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-bo-rcard-title {
	position: relative;
	z-index: var( --gl-z-raised );
	display: block;
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-card );
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.gl-bo-rcard-title:hover {
	color: var( --gl-red );
}

/* ---- Responsive (base-then-override; ≤768 = the .dc.html content breakpoint) ---- */

@media ( max-width: 768px ) {
	.gl-bo-fig {
		float: none;
		width: 100%;
		margin: 32px 0;
	}

	.gl-bo-related {
		grid-template-columns: 1fr;
		gap: clamp( 32px, 5vw, 48px );
	}
}

/* =====================================================================
 * SCR-06 · GL landing
 * Reference: design-reference/screens/GL Landing.dc.html (1:1 structure/
 * spacing/type). Masthead/frame/h1/year-switch forked from the .gl-bx
 * grammar (SCR-04) — same frame, same h1 rhythm, minus the switch-sep glyph
 * (the year row has none — gap only). The cover tile is BUILD-FRESH at
 * poster scale (no OpenHouse equivalent). Paginator reuses the shared
 * .gl-vx-pag component verbatim (G29) — no new paginator CSS. THE COVER
 * RULE (SYSTEM-MAP §6.1 / #26): covers are ALWAYS GRAY — a real cover's art
 * is authored black-and-white already (the red wordmark is part of the art
 * itself), so a CSS grayscale() on the real image would desaturate the
 * brand — the image runs UNFILTERED; only the placeholder slot keeps
 * filter:grayscale(1) as enforcement until a real cover is set. Title->red
 * is the ONLY hover (#24). Near-still: a plain, durationless :hover rule —
 * no transition, no !important, no --gl-h indirection (CODE-STAGE-NOTES
 * §7.2). radius 0.
 * ===================================================================== */

.gl-gx-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Masthead frame (forked from .gl-bx-masthead) ---- */

.gl-gx-masthead {
	padding-top: clamp( 28px, 4vw, 48px );
}

.gl-gx-frame {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-gx-frame-left,
.gl-gx-frame-right {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gl-gx-frame-left {
	color: var( --gl-ink );
}

.gl-gx-frame-right {
	color: var( --gl-text-2 );
}

.gl-gx-h1-row {
	padding: clamp( 28px, 4vw, 44px ) 0 clamp( 10px, 1.5vw, 16px );
}

.gl-gx-h1 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-bold );
	font-size: clamp( 2.1rem, 4vw, 3.25rem );
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

/* ---- Year switch (forked from .gl-bx-switch — no separator glyph) ---- */

.gl-gx-years-sec {
	padding-top: clamp( 16px, 2vw, 24px );
}

.gl-gx-years {
	border-top: 3px solid var( --gl-ink );
	padding: clamp( 16px, 2vw, 24px ) 0 clamp( 6px, 1vw, 10px );
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: clamp( 14px, 2.2vw, 30px );
}

.gl-gx-year {
	font-family: var( --gl-font-kicker );
	font-size: clamp( 1.5rem, 3vw, 2.5rem );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	color: rgba( 22, 22, 22, 0.55 );
}

a.gl-gx-year:hover {
	color: var( --gl-ink );
}

.gl-gx-year.is-active {
	color: var( --gl-red );
}

/* ---- Cover grid (GL Landing.dc.html:139-163) ---- */

.gl-gx-grid-sec {
	padding-top: clamp( 36px, 4.5vw, 60px );
	/* G37 footer-clear — the cover grid is the last section; clears the footer
	   with the same rhythm as About/Subscribe (FIX 5 / the QA-01 sweep). */
	padding-bottom: clamp( 64px, 8vw, 110px );
}

.gl-gx-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 430px ), 1fr ) );
	gap: clamp( 48px, 6vw, 88px ) clamp( 36px, 4.5vw, 64px );
}

.gl-gx-tile {
	position: relative;
	display: flex;
	flex-direction: column;
}

.gl-gx-tile-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Cover slot is INERT — no link, no hover rule, no filter on the real image (#26). */
.gl-gx-cover {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.gl-gx-cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Placeholder keeps grayscale as ENFORCEMENT (real covers are authored B&W already). */
.gl-gx-cover-ph {
	position: absolute;
	inset: 0;
	display: block;
	filter: grayscale( 1 );
	background: radial-gradient( 60% 50% at 50% 34%, #a9a9a9 0%, #5e5e5e 55%, #1b1b1b 100% );
}

.gl-gx-cover-ph-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var( --gl-font-kicker );
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.5 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-gx-tile-body {
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.gl-gx-tile-meta {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.gl-gx-tile-no {
	font-family: var( --gl-font-kicker );
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-gx-tile-range {
	font-family: var( --gl-font-body );
	font-size: 1.2rem;
	color: var( --gl-text-2 );
}

.gl-gx-tile-title {
	position: relative;
	z-index: 2;
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.5rem, 2.4vw, 2.15rem );
	line-height: 1.14;
	letter-spacing: -0.008em;
}

.gl-gx-tile-title:hover {
	color: var( --gl-red );
}

/* =====================================================================
 * SCR-07 · GL cover post
 * Reference: design-reference/screens/GL Cover Post.dc.html (1:1 structure/
 * spacing/type). Forks the SCR-05 .gl-bo interior into .gl-gp for the shell
 * (crumb / head / meta / body / drop-cap / related-head) — VERBATIM where it
 * repeats. THREE GL differences, each a drift-trap:
 *   (1) NO 21/9 hero — a BUILD-FRESH FLOAT COVER (.gl-gp-cover) at poster
 *       scale with a left-gutter overhang (>=1100 / >=1400). The cover is
 *       INERT (no link, no hover) and UNFILTERED (authored B&W, #26). The
 *       .gl-gp-article uses display:flow-root (NOT overflow) so it CONTAINS
 *       the float for .gl-gp-related to clear, WITHOUT clipping the negative-
 *       margin overhang into the left gutter.
 *   (2) NO endnote (sample scope) — dropped.
 *   (3) Related tiles fork the GL LANDING tile grammar (.gl-gx-tile): 4/5 gray
 *       slot + No./range meta row + title->red the ONLY hover (#24/#9) — NOT
 *       the .gl-bo corner-No/kicker rcard grammar. The cover person is the
 *       SUBJECT (alt/label only), never a byline. radius 0; near-still.
 * ===================================================================== */

.gl-gp-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Breadcrumb stamp (forked from .gl-bo — 2 segments: no middle category) ---- */

.gl-gp-crumbwrap {
	padding-top: clamp( 48px, 6vw, 64px );
	margin-bottom: clamp( 40px, 5vw, 64px );
}

.gl-gp-crumb {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-gp-crumb-nav {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.gl-gp-crumb-link {
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.gl-gp-crumb-link:hover {
	color: var( --gl-red );
}

.gl-gp-crumb-sep {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	color: rgba( 22, 22, 22, 0.35 );
	line-height: 1;
}

.gl-gp-crumb-tail {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
	line-height: 1.4;
}

/* Stamp-right = Issue.dateRange (the document's own week, #22) — NOT the clock,
   NOT the post date. Same type treatment as .gl-bo-crumb-date. */
.gl-gp-crumb-range {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
	white-space: nowrap;
}

/* ---- Post head (centered, max 860) — NO byline (person is the SUBJECT) ---- */

.gl-gp-head {
	max-width: 860px;
	margin-inline: auto;
	text-align: center;
	padding-bottom: clamp( 36px, 4.5vw, 48px );
}

.gl-gp-kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp( 20px, 2.5vw, 28px );
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: var( --gl-fw-bold );
	color: var( --gl-red-small );
}

.gl-gp-kicker::before,
.gl-gp-kicker::after {
	content: '';
	width: 32px;
	height: 1px;
	background: var( --gl-ink );
}

.gl-gp-title {
	margin: 0 0 clamp( 20px, 2.5vw, 28px );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-post );
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
	text-wrap: balance;
}

.gl-gp-dek {
	margin: 0 auto clamp( 32px, 4vw, 44px );
	max-width: 52ch;
	font-family: var( --gl-font-body );
	font-style: normal;
	font-size: clamp( 1.3rem, 1.9vw, 1.6rem );
	line-height: 1.5;
	color: var( --gl-text-2 );
}

/* Meta row — Cover week / Issue (GL has NO Published / Read time / Dispatch),
   plus the shared SHARE cell (G45). */
.gl-gp-meta {
	display: flex;
	justify-content: center;
	/* Value-baseline align — seats the single-line SHARE on the value row (G45);
	   flex-end is the fallback for engines without flex last-baseline (older Safari). */
	align-items: flex-end;
	align-items: last baseline;
	gap: clamp( 20px, 3vw, 36px );
}

.gl-gp-meta-cell {
	text-align: left;
}

.gl-gp-meta-label {
	display: block;
	margin-bottom: 3px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-meta-label );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-gp-meta-value {
	font-family: var( --gl-font-body );
	font-weight: var( --gl-fw-bold );
	font-size: var( --gl-fs-caption );
	color: var( --gl-ink );
}

/* ---- The float body (BUILD-FRESH — the one post with NO 21/9 hero) ----
   display:flow-root CONTAINS the float so .gl-gp-related clears it; it does
   NOT clip (unlike overflow), so the poster overhang into the left gutter
   (negative margin at >=1100/>=1400) stays visible. */

.gl-gp-article {
	max-width: 760px;
	margin-inline: auto;
	display: flow-root;
}

/* Section marker "I · The Subject" — a template CONST (mirrors the .gl-bo body
   <h2> treatment, here a standalone element). Full-width, ABOVE the float. */
.gl-gp-marker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: clamp( 28px, 3.5vw, 40px );
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-gp-marker::before {
	content: '';
	width: 24px;
	height: 1px;
	background: rgba( 22, 22, 22, 0.66 );
	flex: none;
}

/* The float cover — poster scale, floats LEFT; INERT + UNFILTERED (#26). Base
   52% of the 760 column; the lead wraps to its right and reflows full width
   once cleared. Overhang into the left gutter at wide widths; unfloats <=768. */
.gl-gp-cover {
	float: left;
	width: 52%;
	margin: 8px clamp( 28px, 3vw, 40px ) 26px 0;
	padding: 0;
}

.gl-gp-cover-slot {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	position: relative;
	overflow: hidden;
}

.gl-gp-cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Placeholder keeps grayscale as ENFORCEMENT (a real cover is authored B&W and
   renders UNFILTERED via .gl-gp-cover-img above). */
.gl-gp-cover-ph {
	position: absolute;
	inset: 0;
	display: block;
	filter: grayscale( 1 );
	background: radial-gradient( 60% 50% at 50% 34%, #a9a9a9 0%, #5e5e5e 55%, #1b1b1b 100% );
}

/* ---- Article body (forked from .gl-bo-body — token-parity confirmed) ---- */

.gl-gp-body p {
	margin: 0 0 28px;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-body-serif );
	line-height: var( --gl-lh-body-serif );
	color: var( --gl-ink );
}

.gl-gp-body > p:first-of-type::first-letter {
	font-family: "Garamond", Georgia, serif;
	font-weight: 700;
	font-size: 4.6em;
	line-height: 0.8;
	float: left;
	padding-top: 6px;
	margin-right: 14px;
	color: var( --gl-ink );
}

/* ---- Prose links (the authored end-of-body CTA / reference link; near-still ink->red) ---- */

.gl-gp-body a {
	color: var( --gl-ink );
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.gl-gp-body a:hover,
.gl-gp-body a:focus-visible {
	color: var( --gl-red-small );
	text-decoration-color: var( --gl-red-small );
}

/* ---- Related (head forked from .gl-bo-related-head; tiles fork .gl-gx-tile) ---- */

.gl-gp-related-sec {
	margin-top: clamp( 64px, 8vw, 110px );
	padding-bottom: clamp( 64px, 8vw, 110px );
}

.gl-gp-related-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	border-top: 3px solid var( --gl-ink );
	padding-top: 18px;
	margin-bottom: clamp( 24px, 3vw, 40px );
}

.gl-gp-related-head-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gl-gp-eyebrow {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-gp-related-h2 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 2.8vw, 2.5rem );
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
}

.gl-gp-related-all {
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

.gl-gp-related-all:hover {
	color: var( --gl-red );
}

.gl-gp-related {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 28px, 4vw, 52px );
}

.gl-gp-rcard {
	position: relative;
	display: flex;
	flex-direction: column;
}

.gl-gp-rcard-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Cover slot is INERT — no hover, no filter on a real image (#26/#24). */
.gl-gp-rcover {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.gl-gp-rcover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.gl-gp-rcover-ph {
	position: absolute;
	inset: 0;
	display: block;
	filter: grayscale( 1 );
	background: radial-gradient( 60% 50% at 50% 34%, #a9a9a9 0%, #5e5e5e 55%, #1b1b1b 100% );
}

.gl-gp-rcover-ph-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var( --gl-font-kicker );
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.5 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-gp-rcard-body {
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.gl-gp-rcard-meta {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}

.gl-gp-rcard-no {
	font-family: var( --gl-font-kicker );
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-gp-rcard-range {
	font-family: var( --gl-font-body );
	font-size: 1.2rem;
	color: var( --gl-text-2 );
}

.gl-gp-rcard-title {
	position: relative;
	z-index: 2;
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-card );
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.gl-gp-rcard-title:hover {
	color: var( --gl-red );
}

/* ---- Responsive (base-then-override; poster overhang first, then unfloat) ---- */

@media ( min-width: 1100px ) {
	.gl-gp-cover {
		width: 520px;
		margin: 8px 44px 28px -140px;
	}
}

@media ( min-width: 1400px ) {
	.gl-gp-cover {
		width: 620px;
		margin: 8px 52px 30px -240px;
	}
}

@media ( max-width: 768px ) {
	.gl-gp-cover {
		float: none;
		width: 100%;
		margin: 0 0 32px;
	}

	.gl-gp-related {
		grid-template-columns: 1fr;
		gap: clamp( 32px, 5vw, 48px );
	}
}

/* =====================================================================
 * SCR-08 · Home (front-page.php) — the aggregator
 * Reference: design-reference/screens/Home.dc.html (1:1). The ONLY
 * fixed-side-column layout (DESIGN §8): side pins are position:fixed under
 * the sticky header, center column is the sole scroller, footer rises OVER
 * the pins at scroll end (z-45, .home-scoped below). Home-LOCAL component
 * grammars (the s-i-l-o feed item, GL tile, Voices row, magazine tile,
 * clock instrument) — values forked from the .dc.html, classes NOT shared
 * with the landing cards (the SCR-07 fork-values-not-classes rule).
 * Drift-traps held here: silo item is NOT .gl-bx-card; Voices row hover =
 * portrait→color + NAME→red, TITLE stays ink (MOTION #36); clocks have NO
 * label, NO hover, NO transition (#38); mag cover height BOUND to the GL
 * cover via --gl-coverh (GL leads, #28); items 5–6 + clocks hidden <=1000.
 * Hovers are plain instantaneous :hover (CODE-STAGE-NOTES §7.2 — no
 * !important, no --gl-bw/--gl-t indirection). Media/swap rules sit AFTER
 * the base rules they override (the G22 cascade-order lesson).
 * ===================================================================== */

.gl-hm {
	width: 100%;
}

/* Container bg = the line color; the 1px column gaps (>=1001) read as
   full-height vertical hairlines; the cells are opaque cream spacers. */
.gl-hm-grid {
	--gl-cl: clamp( 260px, 23vw, 460px );
	--gl-cr: clamp( 300px, 25vw, 500px );
	display: block;
	background: var( --gl-line );
}

.gl-hm-cell-c {
	background: var( --gl-bg );
	/* Bottom = the canonical G37 footer-clear clamp(64px,8vw,110px) — the scrolling
	   centre column's last feed item clears the footer with the same rhythm as
	   About/Subscribe (FIX 4). */
	padding: clamp( 22px, 2.4vw, 38px ) clamp( 20px, 2.6vw, 48px ) clamp( 64px, 8vw, 110px );
}

.gl-hm-cell-l,
.gl-hm-cell-r {
	background: var( --gl-bg );
}

.gl-hm-pin {
	position: static;
	background: var( --gl-bg );
	padding: clamp( 22px, 2.4vw, 38px ) clamp( 20px, 2.6vw, 44px ) clamp( 24px, 2.6vw, 40px );
}

.gl-hm-fit {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Quadrant labels + section heads (Etna register, #22) */

.gl-hm-feedhead,
.gl-hm-sechead {
	border-bottom: 1px solid var( --gl-line );
	padding-bottom: 9px;
}

.gl-hm-sechead--gap {
	margin-bottom: clamp( 14px, 1.8vw, 22px );
}

.gl-hm-label {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-kicker );
	letter-spacing: var( --gl-track-kicker );
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-hm-sec {
	flex: none;
}

.gl-hm-sec--gl {
	min-height: 0;
}

.gl-hm-sec--voices {
	min-width: 0;
}

/* --- Center feed: the s-i-l-o item (Home.dc.html:152-168) --- */

.gl-hm-item {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 150px, 330px ) minmax( 0, 1fr );
	gap: clamp( 18px, 2.4vw, 40px );
	border-bottom: 1px solid var( --gl-line );
	padding: clamp( 24px, 2.8vw, 44px ) 0;
}

.gl-hm-item-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.gl-hm-item-media {
	position: relative;
	z-index: 2;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	filter: grayscale( 1 );
}

/* SEPARATE hover targets (§6.1 / MOTION #35): photo→color… */
.gl-hm-item-media:hover {
	filter: grayscale( 0 );
}

.gl-hm-item-media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gl-hm-item-media-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 70% 80% at 42% 38%, #9a9a9a 0%, #6a6a6a 48%, #2b2b2b 100% );
}

.gl-hm-item-no {
	position: absolute;
	top: 10px;
	left: 10px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-corner-no );
	letter-spacing: var( --gl-track-kicker );
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.85 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-hm-item-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.gl-hm-item-title {
	position: relative;
	z-index: 2;
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: var( --gl-fs-title-card );
	line-height: 1.15;
	letter-spacing: -0.008em;
}

/* …and title→red, independent. */
.gl-hm-item-title:hover {
	color: var( --gl-red );
}

.gl-hm-item-dek {
	margin: 0;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-dek );
	line-height: var( --gl-lh-dek );
	color: var( --gl-text-2 );
	max-width: 62ch;
}

.gl-hm-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var( --gl-line );
}

.gl-hm-item-kicker {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-kicker );
	letter-spacing: var( --gl-track-kicker );
	text-transform: uppercase;
	font-weight: var( --gl-fw-bold );
	color: var( --gl-red-small );
}

.gl-hm-item-metatext {
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	color: var( --gl-text-2 );
}

/* --- Right pin, top: the GL cover tile (Home.dc.html:183-193) --- */

.gl-hm-gltile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gl-hm-gltile-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Height is the #28 fit factor × the dc clamp; 4/5 = the real cover ratio. */
.gl-hm-glcover {
	/* position:relative hosts the ph label (a slot the dc never needed —
	   real art only there); z-index:0 keeps the slot BELOW the tile's z-1
	   stretch anchor, byte-matching the dc stacking (static cover under the
	   stretch): the cover area clicks through to the cover POST while
	   carrying no hover of its own (#37 — hover title-only, slot inert). */
	position: relative;
	z-index: 0;
	align-self: flex-start;
	height: calc( var( --gl-fit, 1 ) * clamp( 220px, 34vh, 520px ) );
	max-width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

.gl-hm-glcover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder keeps grayscale as ENFORCEMENT (#26); real covers UNFILTERED. */
.gl-hm-glcover-ph {
	position: absolute;
	inset: 0;
	display: block;
	filter: grayscale( 1 );
	background: radial-gradient( 60% 50% at 50% 34%, #a9a9a9 0%, #5e5e5e 55%, #1b1b1b 100% );
}

.gl-hm-glcover-ph-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-slot-label );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.5 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-hm-glmeta,
.gl-hm-magmeta {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.gl-hm-glno,
.gl-hm-magno {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-kicker );
	letter-spacing: var( --gl-track-kicker );
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-hm-glrange,
.gl-hm-magrange {
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	color: var( --gl-text-2 );
}

.gl-hm-gltitle,
.gl-hm-magtitle {
	position: relative;
	z-index: 2;
	text-decoration: none;
	color: var( --gl-ink );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.3rem, 1.7vw, 1.8rem );
	line-height: 1.15;
}

/* Title→red is the ONLY hover on both cover tiles (#9 / MOTION #37). */
.gl-hm-gltitle:hover,
.gl-hm-magtitle:hover {
	color: var( --gl-red );
}

/* --- Right pin, bottom: Voices latest rows (Home.dc.html:201-212) --- */

.gl-hm-vrow {
	display: grid;
	grid-template-columns: 64px minmax( 0, 1fr );
	gap: 16px;
	align-items: start;
	text-decoration: none;
	border-bottom: 1px solid var( --gl-line );
	padding: clamp( 14px, 1.6vh, 20px ) 0;
}

.gl-hm-vport {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	filter: grayscale( 1 );
}

.gl-hm-vport-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Bias the 64px square crop toward the top so the head shows on a tall
	   portrait (the columnist faces sit in the upper third) — no crown cut
	   (FIX 3 / G41). Pairs with the 'medium' soft-cropped size in front-page.php. */
	object-position: 50% 18%;
}

.gl-hm-vport-ph {
	position: absolute;
	inset: 0;
	display: block;
	background: radial-gradient( 60% 55% at 50% 32%, #9a9a9a 0%, #6a6a6a 60%, #2b2b2b 100% );
}

.gl-hm-vtext {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.gl-hm-vname {
	font-family: var( --gl-font-body );
	font-weight: var( --gl-fw-bold );
	font-size: var( --gl-fs-caption );
	line-height: 1.1;
	color: var( --gl-ink );
}

.gl-hm-vtitle {
	/* 1.12rem is the dc-literal Home-local size (no token maps to it). */
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: 1.12rem;
	line-height: 1.25;
	color: var( --gl-ink );
}

/* COMBINED whole-row hover (MOTION #36, the G28 grammar): portrait→color +
   NAME→red together, instantaneous — the column TITLE stays ink. */
.gl-hm-vrow:hover .gl-hm-vport {
	filter: grayscale( 0 );
}

.gl-hm-vrow:hover .gl-hm-vname {
	color: var( --gl-red );
}

/* --- Left pin, top: the capital-clock instruments (Home.dc.html:235-255).
   NO label, NO hover, NOT clickable, NO transition — the 30s re-render is
   DATA (#38); the needle's left:% is a per-row inline style (server-rendered,
   re-written by js/home.js). --- */

.gl-hm-clocks {
	flex: none;
}

.gl-hm-clkpanel {
	border-top: 3px solid var( --gl-ink );
}

.gl-hm-clkrow {
	border-bottom: 1px solid var( --gl-line );
	padding: calc( var( --gl-fitpad, 1 ) * clamp( 14px, 2vh, 24px ) ) 0 calc( var( --gl-fitpad, 1 ) * clamp( 16px, 2.2vh, 26px ) );
	display: flex;
	flex-direction: column;
	gap: calc( var( --gl-fitpad, 1 ) * 11px );
}

.gl-hm-clkhead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.gl-hm-clkcity {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-kicker );
	letter-spacing: var( --gl-track-kicker );
	text-transform: uppercase;
	color: var( --gl-ink );
	white-space: nowrap;
}

.gl-hm-clktime {
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	line-height: 1;
	color: var( --gl-text-2 );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gl-hm-clkruler {
	position: relative;
	height: 15px;
	margin-top: 4px;
}

.gl-hm-clkticks {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 7px;
	background-image: repeating-linear-gradient( 90deg, rgba( 22, 22, 22, 0.35 ) 0, rgba( 22, 22, 22, 0.35 ) 1px, transparent 1px, transparent calc( 100% / 24 ) );
}

.gl-hm-clkcards {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 15px;
	background-image: repeating-linear-gradient( 90deg, var( --gl-ink ) 0, var( --gl-ink ) 1px, transparent 1px, transparent 25% );
}

.gl-hm-clkedge {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1px;
	height: 15px;
	background: var( --gl-ink );
}

.gl-hm-clkbase {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: rgba( 22, 22, 22, 0.45 );
}

.gl-hm-clkneedle {
	position: absolute;
	bottom: -3px;
	width: 2px;
	height: 21px;
	margin-left: -1px;
	background: var( --gl-red );
}

.gl-hm-clknums {
	position: relative;
	height: 10px;
}

.gl-hm-clknum {
	position: absolute;
	font-family: var( --gl-font-kicker );
	font-size: 0.55rem;
	letter-spacing: 0.08em;
	color: rgba( 22, 22, 22, 0.45 );
	line-height: 1;
}

.gl-hm-clknum--0 {
	left: 0;
}

.gl-hm-clknum--6 {
	left: 25%;
	transform: translateX( -50% );
}

.gl-hm-clknum--12 {
	left: 50%;
	transform: translateX( -50% );
}

.gl-hm-clknum--18 {
	left: 75%;
	transform: translateX( -50% );
}

.gl-hm-clknum--24 {
	right: 0;
}

/* --- Left pin, bottom: the magazine tile (Home.dc.html:266-278) --- */

.gl-hm-mag {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gl-hm-mag-stretch {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Height BOUND to the GL cover's rendered height (--gl-coverh — GL leads,
   the mag matches, never the reverse; #28 owner rule). 17/22 = print ratio. */
.gl-hm-magcover {
	align-self: flex-start;
	height: var( --gl-coverh, clamp( 220px, 34vh, 520px ) );
	max-width: 100%;
	aspect-ratio: 17 / 22;
	overflow: hidden;
	background: #E7DECF;
	border: 1px solid var( --gl-line );
	display: flex;
	align-items: center;
	justify-content: center;
}

.gl-hm-magcover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gl-hm-magcover-label {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-slot-label );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 22, 22, 22, 0.4 );
	text-align: center;
	padding: 0 12px;
}

/* --- Home-scoped chrome delta: the footer rises OVER the fixed pins at the
   end of the center scroll (z-45 sits between the pins' z-10 and the header's
   z-50) and spans the full site width. Opaque so it covers the pins. --- */

.home .gl-footer {
	position: relative;
	z-index: 45;
	background: var( --gl-bg );
}

/* --- Breakpoints (AFTER all base rules — the G22 cascade-order lesson) --- */

/* >=1001: the fixed-pin triple-feed grid (DESIGN §8) */
@media ( min-width: 1001px ) {
	.gl-hm-grid {
		display: grid;
		grid-template-columns: var( --gl-cl ) minmax( 0, 1fr ) var( --gl-cr );
		column-gap: 1px;
		grid-template-areas: "left center right";
		align-items: stretch;
	}

	.gl-hm-cell-c {
		grid-area: center;
		min-height: calc( 100vh - var( --gl-hh, 196px ) );
	}

	.gl-hm-cell-r {
		grid-area: right;
	}

	.gl-hm-cell-l {
		grid-area: left;
	}

	/* The pins are truly FIXED — they do not scroll with the page. */
	.gl-hm-pin {
		position: fixed;
		top: var( --gl-hh, 196px );
		bottom: 0;
		z-index: var( --gl-z-base );
		overflow: hidden;
	}

	.gl-hm-pin-l {
		left: 0;
		width: var( --gl-cl );
	}

	.gl-hm-pin-r {
		right: 0;
		width: var( --gl-cr );
	}

	/* Top item anchored high, bottom item anchored low, no dead void. */
	.gl-hm-fit {
		height: 100%;
		justify-content: space-between;
		gap: 24px;
		min-height: 0;
	}
}

/* FIX 4 — the G37 footer-clear for the FIXED side pins. At scroll-end the footer
   (z-45) rises OVER the pins (z-base); this pad lifts each pin's bottom-anchored
   section (Voices right / magazine left) clear of the rising footer so its last
   row is not occluded. The #28 fill (js/home.js) re-fits the covers to the reduced
   content box — self-consistent. HEIGHT-GATED at 1000px: a fixed pin's height is
   viewport-bound, so below ~1000px the column cannot BOTH show all its rows AND
   reserve footer clearance (it would push the 3rd Voices row out). Above the gate
   the covers have the slack to absorb the pad (verified 3/3 rows, clears the
   footer, 1280–1920 wide); below it the pins keep the proven SCR-08 behaviour. */
@media ( min-width: 1001px ) and ( min-height: 1000px ) {
	.gl-hm-pin {
		padding-bottom: clamp( 64px, 8vw, 110px );
	}
}

/* <=1000: single column in DOM (mobile content) order; clocks + feed items
   5–6 hidden (a content contract, not reflow — DESIGN §8). */
@media ( max-width: 1000px ) {
	.gl-hm-clocks {
		display: none;
	}

	.gl-hm-item.gl-hm-extra {
		display: none;
	}

	/* Stacked (pins un-fixed): the left cell (magazine) is the DOM-last block
	   before the footer, so it carries the G37 footer-clear clamp — the same
	   breathing the fixed pins get on desktop (FIX 4). */
	.gl-hm-cell-l .gl-hm-pin {
		padding-bottom: clamp( 64px, 8vw, 110px );
	}
}

/* <=900: the silo item stacks — image full-width on top, text below. */
@media ( max-width: 900px ) {
	.gl-hm-item {
		grid-template-columns: 1fr;
	}
}

/* FIX 5 — the compact-pins band (owner correction, 2026-07 / G47). On short
   desktop viewports the #28 fill inverted the image-first hierarchy — the covers
   bottomed out at the fit floors (96×120px @1366×768) while the display titles
   kept their full vw register, and the 3rd Voices row clipped below the fixed
   pin. In this band the pins drop to a COMPACT text register so the covers
   reclaim the height: display titles step down to the Voices-row register, the
   rows tighten, the 3rd Voices row and the 4th clock row yield (the DESIGN §8
   hide-at-a-gate precedent), the section rhythm compresses. Text yields to the
   image — amends the dc:310-311 "only media shrinks" doctrine at this band only.
   Complementary to the FIX-4 height gate (min-height:1000px above): max-height:999px
   is its exact complement, so no feel-gated tall-viewport state changes.
   NB: this is a POST-LAUNCH fix — NOT the Batch-1 "FIX 5" footer-clear sweep
   (a separate label reused by coincidence; this one is the G47 compact-pins band). */
@media ( min-width: 1001px ) and ( max-height: 999px ) {

	.gl-hm-fit {
		gap: 16px;
	}

	.gl-hm-sechead--gap {
		margin-bottom: 12px;
	}

	.gl-hm-gltile,
	.gl-hm-mag {
		gap: 8px;
	}

	.gl-hm-gltitle,
	.gl-hm-magtitle {
		font-size: clamp( 1rem, 1.15vw, 1.2rem );
	}

	.gl-hm-vrow {
		grid-template-columns: 48px minmax( 0, 1fr );
		gap: 12px;
		padding: 10px 0;
	}

	.gl-hm-vport {
		width: 48px;
		height: 48px;
	}

	/* Content contract at the band (owner-gated): the 3rd Voices row and the
	   4th clock row yield to the covers — DESIGN §8 precedent (feed items 5–6 +
	   clocks already hide at <=1000w). The vrows are the only <a>-type children
	   of the section (the sechead is a <div>) so nth-of-type(3) is the 3rd of the
	   3 rows; the clkrows are the only children of .gl-hm-clkpanel so nth-child(n+4)
	   is the 4th of the 4 clocks — both verified against the current DOM. */
	.gl-hm-sec--voices .gl-hm-vrow:nth-of-type( 3 ) {
		display: none;
	}

	.gl-hm-clkpanel .gl-hm-clkrow:nth-child( n+4 ) {
		display: none;
	}
}

/* =====================================================================
 * SCR-09 · About (institutional, archetype D) — About.dc.html
 * The imprint page: stamp · statement (sample) + imprint · #contact ·
 * the masthead role STACK. No family query, no author machinery, no chip.
 * Chrome is shared (header.php/footer.php, G35 0.6.0) — NOT restyled here.
 * ===================================================================== */

.gl-ab-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Stamp (About.dc.html:102-109) — same frame grammar as .gl-bx-frame.
   Right = galleria_site_dateline() ("July 2026"), NOT the edition clock. ---- */
.gl-ab-stamp {
	padding-top: clamp( 48px, 6vw, 64px );
}

.gl-ab-stamp-frame {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-ab-stamp-left,
.gl-ab-stamp-right {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gl-ab-stamp-left {
	color: var( --gl-ink );
}

.gl-ab-stamp-right {
	color: var( --gl-text-2 );
}

/* ---- Statement (About.dc.html:112-116) — Futura 500; ONE red clause. ---- */
.gl-ab-statement {
	padding-top: clamp( 44px, 6vw, 72px );
}

.gl-ab-h1 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 3.4vw, 2.9rem );
	line-height: 1.18;
	letter-spacing: -0.01em;
	max-width: 44ch;
	color: var( --gl-ink );
}

.gl-ab-h1-red {
	color: var( --gl-red );
}

/* Imprint (About.dc.html:114-115). */
.gl-ab-imprint {
	margin: clamp( 32px, 5vw, 52px ) 0 0;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

/* The ISSN is BUILT BUT HIDDEN (owner decision, SCR-09): "Published by Pyper
   Publishing" shows; nothing ISSN renders yet. The element sits in the DOM,
   structured and ready. When the real ISSN is issued: delete this display:none
   rule (one-line unhide) and fill the 0000-0000 placeholder in page-about.php.
   Deliberate — a fidelity audit must NOT flag the absent ISSN as drift. */
.gl-ab-issn {
	display: none;
}

/* ---- Section eyebrow — the red Etna label on a 3px rule (Contact + The
   Masthead; About.dc.html:120-121, 129-130). ---- */
.gl-ab-eyebrow {
	display: flex;
	align-items: baseline;
	gap: 16px;
	border-top: 3px solid var( --gl-ink );
	padding-top: 16px;
}

.gl-ab-eyebrow-label {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

/* ---- Contact (#contact — the sitewide footer CONTACT target). ---- */
.gl-ab-contact {
	padding-top: clamp( 56px, 7vw, 88px );
	/* Land the footer-CONTACT jump CLEAR of the sticky masthead: --gl-hh is the
	   real header height, self-measured by chrome.js (synchronous, before the
	   browser's fragment scroll). +16px breathing gap. */
	scroll-margin-top: calc( var( --gl-hh ) + 16px );
}

.gl-ab-contact .gl-ab-eyebrow {
	margin-bottom: 20px;
}

.gl-ab-contact-lede {
	margin: 0 0 20px;
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-dek );
	line-height: 1.6;
	color: var( --gl-ink );
	max-width: 52ch;
}

.gl-ab-contact-link {
	display: inline-block;
	border: 1px solid var( --gl-ink );
	padding: 12px 18px;
	font-family: var( --gl-font-body );
	font-size: 1.25rem;
	color: var( --gl-ink );
	text-decoration: none;
}

.gl-ab-contact-link:hover {
	color: var( --gl-red );
}

/* ---- The Masthead — a SINGLE-COLUMN STACK of 4 role/name blocks
   (About.dc.html:128-150). NOT a 2x2 grid (the feature_list "2×2" is informal
   shorthand; the .dc.html governs — G27). Role = Futura 500 caps, name =
   Garamond (the .dc.html + SYSTEM-MAP §10; the FIELDS §3 "role Etna/name Futura"
   line is stale). The blocks are NOT links — no hover. ---- */
.gl-ab-masthead {
	padding-top: clamp( 56px, 7vw, 88px );
	/* Clear the shared footer. In About.dc.html the main->footer gap is the
	   footer's own margin-top clamp(64px,8vw,110px) (dc:155); the shared
	   .gl-footer carries NO margin-top, so block-4's faithful padding-bottom:0
	   would sit flush against the footer hairline. Restoring that exact gap on
	   the SECTION reproduces the .dc.html main->footer rhythm (total = this +
	   border + footer padding-top, identical to the dc) — a justified functional
	   addition (the footer was not in the .dc.html's own composition context;
	   the G29/G30 pattern), NOT a drift. Block-4 stays byte-faithful (pad-btm 0). */
	padding-bottom: clamp( 64px, 8vw, 110px );
}

.gl-ab-roles {
	display: flex;
	flex-direction: column;
}

.gl-ab-role {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp( 24px, 3.5vw, 40px ) 0;
	border-top: 1px solid var( --gl-line );
}

/* First block: no top rule (it sits under the eyebrow's own 3px rule). */
.gl-ab-role:first-child {
	border-top: 0;
}

/* Last block: no bottom padding (About.dc.html:145 — "clamp(...) 0 0"). */
.gl-ab-role:last-child {
	padding-bottom: 0;
}

.gl-ab-role-title {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.4rem, 2.4vw, 2rem );
	line-height: 1.05;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-ab-role-name {
	font-family: var( --gl-font-body );
	font-size: 1.35rem;
	line-height: 1.4;
	color: var( --gl-ink );
}

/* =====================================================================
 * SCR-10 · Subscribe (institutional, archetype D) — Subscribe.dc.html
 * The offer page: stamp · statement (full) + plan + the ONE subscribe
 * link · magazine cover slot · In Print spreads · the FAQ accordion.
 * No family query, no author machinery, no chip. Chrome is shared
 * (header.php/footer.php, G35 0.6.0) — NOT restyled here.
 *
 * The FAQ is native <details>/<summary> (zero JS): independent open
 * state, static swap, +/− glyph via CSS ::after, whole-row hover→red
 * (MOTION #33/#34). Near-still — the only transitions on the page are
 * the shared burger's; nothing here animates.
 * ===================================================================== */

.gl-sb-inner {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: 0 var( --gl-gutter );
}

/* ---- Stamp (Subscribe.dc.html:116-122) — the .gl-ab-stamp frame grammar.
   Right = galleria_site_dateline() ("July 2026"), NOT the edition clock. ---- */
.gl-sb-stamp {
	padding-top: clamp( 48px, 6vw, 64px );
}

.gl-sb-stamp-frame {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 24px;
	border: 1px solid var( --gl-line );
	padding: 10px 16px;
}

.gl-sb-stamp-left,
.gl-sb-stamp-right {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.gl-sb-stamp-left {
	color: var( --gl-ink );
}

.gl-sb-stamp-right {
	color: var( --gl-text-2 );
}

/* ---- Hero: statement + plan (left) · magazine cover (right).
   Subscribe.dc.html:126 — grid 1.05fr 0.95fr, stacks 1-col ≤900. ---- */
.gl-sb-hero {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp( 36px, 5vw, 72px );
	align-items: start;
	padding-top: clamp( 44px, 6vw, 72px );
}

/* H1 = galleria_subscribe_statement() IN FULL; Futura 500, ONE red clause
   ("made to be kept.") — the page's single intervention. max-width 40ch
   (NOT the About 44ch — a drift-trap). Subscribe.dc.html:129. */
.gl-sb-h1 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 3.4vw, 2.9rem );
	line-height: 1.18;
	letter-spacing: -0.01em;
	max-width: 40ch;
	color: var( --gl-ink );
}

.gl-sb-h1-red {
	color: var( --gl-red );
}

/* Supporting paragraph (Subscribe.dc.html:131). */
.gl-sb-lede {
	margin: clamp( 24px, 3vw, 36px ) 0 0;
	font-family: var( --gl-font-body );
	font-size: 1.3rem;
	line-height: 1.65;
	color: var( --gl-ink );
	max-width: 52ch;
}

/* Price + plan block (Subscribe.dc.html:134-148). */
.gl-sb-plan {
	margin-top: clamp( 32px, 4.5vw, 56px );
	border-top: 1px solid var( --gl-line );
	padding-top: clamp( 24px, 3vw, 36px );
}

.gl-sb-price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
}

/* Price — Futura 700; "$XX" is a literal placeholder (price not set). */
.gl-sb-price {
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-bold );
	font-size: clamp( 1.6rem, 2.6vw, 2.4rem );
	line-height: 1;
	color: var( --gl-ink );
}

.gl-sb-price-tag {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-text-2 );
}

.gl-sb-plan-lines {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gl-sb-plan-line {
	font-family: var( --gl-font-body );
	font-size: 1.3rem;
	line-height: 1.5;
	color: var( --gl-ink );
}

/* The ONE subscribe action → Stripe [pending]. Border reads currentColor,
   so it reddens WITH the label on hover — one color swap (MOTION #34). */
.gl-sb-action {
	display: inline-block;
	margin-top: clamp( 28px, 3.5vw, 40px );
	border: 1px solid currentColor;
	padding: 16px 34px;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.1rem, 1.6vw, 1.5rem );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	color: var( --gl-ink );
	text-decoration: none;
}

.gl-sb-action:hover {
	color: var( --gl-red );
}

.gl-sb-fine {
	margin: clamp( 20px, 2.5vw, 28px ) 0 0;
	font-family: var( --gl-font-body );
	font-size: 1.15rem;
	line-height: 1.6;
	color: var( --gl-text-2 );
	max-width: 52ch;
}

.gl-sb-fine-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gl-sb-fine-link:hover {
	color: var( --gl-red );
}

/* ---- Magazine cover slot (Subscribe.dc.html:153-160) — 17/22 print ratio,
   max-width 520px, INERT (no link, no hover). Reads the gl_magazine_cover option
   (the SAME source as SCR-08's Home tile — QA-04). G40 (owner override of the
   .dc.html archival-grayscale): every Subscribe photo renders in FULL COLOR with
   ZERO CSS filter — the imported art shows as-is; the blur on the teaser art is
   baked into the image, so no CSS filter is stacked. Empty-safe: the dark
   placeholder gradient + label (shown only when unset). ---- */
.gl-sb-coverwrap {
	width: 100%;
	max-width: 520px;
	justify-self: end;
}

.gl-sb-cover {
	position: relative;
	aspect-ratio: 17 / 22;
	overflow: hidden;
	background: radial-gradient( 62% 48% at 50% 32%, #ABABAB 0%, #5E5E5E 55%, #1B1B1B 100% );
}

.gl-sb-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gl-sb-cover-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-slot-label );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 255, 255, 255, 0.5 );
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.5 );
}

.gl-sb-cover-meta {
	padding-top: 14px;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 14px;
}

.gl-sb-cover-meta-label {
	font-family: var( --gl-font-kicker );
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-ink );
}

.gl-sb-cover-meta-range {
	font-family: var( --gl-font-body );
	font-size: 1.2rem;
	color: var( --gl-text-2 );
}

/* ---- Section eyebrow — red Etna label on a 3px rule (In Print + FAQ;
   Subscribe.dc.html:167-168, 188-189). The .gl-ab-eyebrow grammar. ---- */
.gl-sb-eyebrow {
	display: flex;
	align-items: baseline;
	gap: 16px;
	border-top: 3px solid var( --gl-ink );
	padding-top: 16px;
}

.gl-sb-eyebrow-label {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

/* ---- The spreads (Subscribe.dc.html:165-184) — INERT. G40 (owner override):
   FULL COLOR, zero CSS filter — the imported open-book art shows as-is. ---- */
.gl-sb-spreads {
	padding-top: clamp( 56px, 7vw, 88px );
}

.gl-sb-spreads .gl-sb-eyebrow {
	margin-bottom: clamp( 24px, 3vw, 36px );
}

.gl-sb-spreads-stack {
	display: flex;
	flex-direction: column;
	gap: clamp( 16px, 2.5vw, 28px );
}

.gl-sb-spread {
	position: relative;
	overflow: hidden;
	/* ONE uniform light archival-grey slot field behind ALL THREE spreads (G43):
	   the mockup PNGs have transparent margins, so a single flat grey makes the set
	   read consistently (was three distinct gradients). The book ART stays full
	   COLOUR (G40) — this is only the slot background behind the transparent
	   margins, never a filter over the photo. Empty-safe: also the placeholder. */
	background: #D5D1C8;
}

/* The wide (first) spread is re-aspected to the source art's own ratio (the
   in-print mockups are 2200x1500 = 22/15 ≈ 3:2) so object-fit:cover shows the
   FULL open-book with zero crop and zero bars — harmonious with the 4/3 halves
   below (FIX 2 / G40). Was 21/9, which cropped the book into a thin middle band. */
.gl-sb-spread--wide {
	aspect-ratio: 22 / 15;
}

.gl-sb-spreads2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp( 16px, 2.5vw, 28px );
}

.gl-sb-spread--half {
	aspect-ratio: 4 / 3;
}

.gl-sb-spread-label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-slot-label );
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba( 22, 22, 22, 0.55 );
}

/* Real spread images fill the slot in full color (G40 — no filter). Empty-safe:
   the .gl-sb-spread-label fallback shows only if the option is unset. */
.gl-sb-spread-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Subscribe coming-soon (pre-launch — subscriptions open Aug 20, 2026):
   the offer (price + plan lines) is present-but-HIDDEN (the About-ISSN pattern),
   this block + the inert action stand in. A DISTINCT voice from the Home tile. ---- */
.gl-sb-offer-body--hidden {
	display: none;
}

.gl-sb-soon {
	margin-top: clamp( 32px, 4.5vw, 56px );
	border-top: 1px solid var( --gl-line );
	padding-top: clamp( 24px, 3vw, 36px );
}

.gl-sb-soon-kicker {
	display: block;
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-sb-soon-lead {
	margin: 18px 0 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.5rem, 2.4vw, 2.1rem );
	line-height: 1.2;
	color: var( --gl-ink );
	max-width: 26ch;
}

.gl-sb-soon-red {
	color: var( --gl-red );
}

.gl-sb-soon-note {
	margin: clamp( 16px, 2vw, 22px ) 0 0;
	font-family: var( --gl-font-body );
	font-size: 1.2rem;
	line-height: 1.6;
	color: var( --gl-text-2 );
	max-width: 46ch;
}

/* The subscribe action, present but INERT pre-launch (goes nowhere): muted, and
   NO hover reddening — it is not a live control. Source-ordered after
   .gl-sb-action:hover so the equal-specificity override wins (D56). */
.gl-sb-action--soon {
	margin-top: clamp( 24px, 3vw, 34px );
	color: var( --gl-text-2 );
	border-color: var( --gl-line );
	cursor: default;
}

.gl-sb-action--soon:hover {
	color: var( --gl-text-2 );
}

/* ---- FAQ (Subscribe.dc.html:187-208) — heading left · accordion right. ---- */
.gl-sb-faqsec {
	padding-top: clamp( 56px, 7vw, 88px );
	/* Land the in-copy "answered below" (#faq) jump CLEAR of the sticky
	   masthead — --gl-hh is chrome.js's measured header height (the About
	   #contact precedent, G37). A justified functional addition, NOT drift. */
	scroll-margin-top: calc( var( --gl-hh ) + 16px );
	/* Clear the shared footer — the LAST section on the page. In Subscribe.dc.html
	   the main->footer gap is the footer's OWN margin-top clamp(64px,8vw,110px)
	   (dc:213); the shared .gl-footer carries NO margin-top, so the FAQ's closing
	   hairline would sit flush against the footer border. Restoring that exact gap
	   on the SECTION reproduces the .dc.html main->footer rhythm — the SAME
	   justified functional addition as SCR-09's .gl-ab-masthead (G37); the footer
	   was not in the .dc.html's own composition context. NOT a drift. */
	padding-bottom: clamp( 64px, 8vw, 110px );
}

.gl-sb-faq {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: clamp( 28px, 4vw, 64px );
	padding-top: clamp( 24px, 3vw, 40px );
	align-items: start;
}

.gl-sb-faq-h2 {
	margin: 0;
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 3vw, 2.6rem );
	line-height: 1.15;
	letter-spacing: -0.01em;
	max-width: 14ch;
	color: var( --gl-ink );
}

.gl-sb-faq-list {
	display: flex;
	flex-direction: column;
}

/* Each row = a native <details>. Independent open state (several may be open
   at once); a border-top hairline per row (Subscribe.dc.html:195). */
.gl-sb-faq-item {
	border-top: 1px solid var( --gl-line );
}

/* The question row = <summary>: flex, marker removed, whole-row hover→red. */
.gl-sb-faq-q {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding: 22px 0;
	cursor: pointer;
	color: var( --gl-ink );
	list-style: none;
}

.gl-sb-faq-q::-webkit-details-marker {
	display: none;
}

.gl-sb-faq-q:hover {
	color: var( --gl-red );
}

.gl-sb-faq-qt {
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.15rem, 1.6vw, 1.45rem );
	line-height: 1.3;
	color: inherit;
}

/* The +/− glyph — a pure-CSS text swap (MOTION #33: static, zero motion).
   "+" collapsed → "−" (U+2212 MINUS SIGN) when the row is open. Inherits the
   row's ink→red hover. */
.gl-sb-faq-q::after {
	content: "+";
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-body );
	font-size: 1.6rem;
	line-height: 1;
	color: inherit;
	flex: none;
}

.gl-sb-faq-item[open] .gl-sb-faq-q::after {
	content: "−";
}

.gl-sb-faq-a {
	margin: 0;
	padding: 0 0 26px;
	font-family: var( --gl-font-body );
	font-size: 1.25rem;
	line-height: 1.65;
	color: var( --gl-ink );
	max-width: 56ch;
}

/* The closing hairline under the last row (Subscribe.dc.html:205). */
.gl-sb-faq-end {
	border-top: 1px solid var( --gl-line );
}

/* ---- Responsive re-flow (Subscribe.dc.html:39-46). Overrides AFTER the base
   rules (equal specificity → source order wins; the THM-04 lesson). ---- */
@media ( max-width: 900px ) {
	.gl-sb-hero {
		grid-template-columns: 1fr;
	}

	.gl-sb-coverwrap {
		justify-self: start;
	}

	.gl-sb-faq {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 768px ) {
	.gl-sb-spreads2 {
		grid-template-columns: 1fr;
	}
}

/* ==================== 404 (QA batch A / NH-3) ====================
   The themed not-found page. Minimal, composed from existing registers: the
   Etna eyebrow (small-red for AA at this ≤19px register, H1/G50), a display
   title, a muted body line, and an ink→red link home. Centered column; the top
   padding clears the sticky masthead, the bottom padding is the G37 footer-clear
   rhythm. No new motion (near-still). */
.gl-404 {
	max-width: var( --gl-maxw );
	margin: 0 auto;
	padding: clamp( 80px, 12vh, 160px ) var( --gl-gutter ) clamp( 64px, 8vw, 110px );
}

.gl-404-inner {
	max-width: 42ch;
}

.gl-404-eyebrow {
	margin: 0 0 clamp( 16px, 2vw, 24px );
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	font-weight: var( --gl-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --gl-red-small );
}

.gl-404-title {
	margin: 0 0 clamp( 16px, 2vw, 22px );
	font-family: var( --gl-font-display );
	font-weight: var( --gl-fw-medium );
	font-size: clamp( 1.7rem, 3.4vw, 2.9rem );
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var( --gl-ink );
}

.gl-404-body {
	margin: 0 0 clamp( 28px, 3.5vw, 40px );
	font-family: var( --gl-font-body );
	font-size: var( --gl-fs-caption );
	line-height: 1.6;
	color: var( --gl-text-2 );
}

.gl-404-home {
	font-family: var( --gl-font-kicker );
	font-size: var( --gl-fs-eyebrow );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var( --gl-ink );
}

.gl-404-home:hover {
	color: var( --gl-red );
}