/* Archival — theme styles.
 *
 * Rules of the house:
 *   - Tokens live in theme.json. Reference them, never hardcode a hex.
 *   - Brass is a hairline, a numeral, a rule. Never a fill.
 *   - No border-radius. No box-shadow. Ever.
 */

/* --- Measure ----------------------------------------------------------- */

.archival-prose p { max-width: 68ch; }

/* --- Quality floor ----------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	/* Kill travel and looping decoration, keep state feedback.
	   A blanket 0.01ms also erases hover/focus response, which these visitors
	   still need — so colour and opacity transitions stay, just quicker. */
	*, *::before, *::after {
		animation-iteration-count: 1 !important;
		animation-duration: 0.01ms !important;
		transition-duration: 120ms !important;
		transition-property: color, background-color, border-color, outline-color, opacity !important;
		scroll-behavior: auto !important;
	}
}

/* ——— Site chrome: sticky header + topbar (canon 2026-07-23) ——— */
/*
 * The pinning has to happen on WordPress's own <header class="wp-block-template-part">
 * wrapper, not on .arch-sticky inside it: a sticky box can only travel within its
 * parent, and that wrapper is exactly the header's own height — so sticking it to
 * the inner div did nothing and the bar scrolled away.
 */
header.wp-block-template-part:has(> .arch-sticky) {
	position: sticky;
	top: 0;
	z-index: 50;
}
.arch-sticky {
	position: relative;
	z-index: 50;
}
/* Cream stock, oxblood lettering (Mike, 2026-08-31) — the label's own colours,
   in place of the gold plate. It reads as a strip of paper above the ink bar
   rather than a third gold element competing with the CTA buttons, and the
   pairing is the one the entry numbers already use. 9.5:1, comfortably AA. */
.arch-topbar {
	margin: 0;
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--oxblood);
	text-align: center;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 7px var(--wp--preset--spacing--30, 24px);
}
/* Dark bar again (Mike, 2026-08-20 — reverting the 2026-08-13 white-header
   ask). Dark-heroes is the locked canon, and a solid white plate sat wrong
   over a dark hero photo anyway. The wordmark asset is opaque (no alpha),
   so it can't just be dropped onto ink the way `mix-blend-mode: multiply`
   dropped it onto white — see .arch-wordmark img below for how it's flipped. */
.arch-bar {
	background: var(--wp--preset--color--ink);
	border-bottom: 1px solid rgba(156, 122, 44, 0.35);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
/* Three equal columns keep the wordmark optically centred regardless of how
   wide the nav or the cart/login group happens to be. */
.arch-bar-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 24px);
	padding: var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--40, 40px);
}
.arch-nav-left { justify-self: start; }
.arch-nav-right { justify-self: end; }

.arch-wordmark {
	display: block;
	justify-self: center;
	line-height: 0;
	text-decoration: none;
}
.arch-wordmark img {
	/* large on load, condensed once scrolled — see .is-condensed below */
	width: 260px;
	height: auto;
	display: block;
	/* The file is dark type on an opaque white plate with no alpha channel.
	   invert() flips it to white type on a black plate; screen() then drops
	   that black plate into the ink bar behind it, same job multiply did
	   against a white bar, leaving only the (now white) letterforms. */
	filter: invert(1);
	mix-blend-mode: screen;
	transition: width 220ms ease;
}
.arch-sticky.is-condensed .arch-wordmark img { width: 150px; }
.arch-sticky.is-condensed .arch-bar-inner { padding-block: 10px; }

.arch-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 16px);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Cart */
.arch-cart {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	gap: 7px;
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	font-weight: 700;
}
.arch-cart:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* The mark is a Burgundy bottle silhouette with the count beside it, so the
   number reads as a tally in the ledger face rather than a filled chip. */
.arch-cart-mark {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.arch-cart-bottle {
	height: 24px;
	width: auto;
	flex: none;
	display: block;
	fill: var(--wp--preset--color--gold-light);
}
.arch-cart-count {
	font-size: 11px;
	color: var(--wp--preset--color--gold-light);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.arch-cart:not(.has-items) .arch-cart-bottle { fill: var(--wp--preset--color--paper); opacity: 0.5; }
.arch-cart:not(.has-items) .arch-cart-count { color: var(--wp--preset--color--paper); opacity: 0.75; }
/* 44px minimum hit area. These read as text but they are the primary nav, and
   at 17px tall they were the easiest thing on the page to mis-tap on a phone. */
.arch-nav a {
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.arch-nav a:hover { text-decoration: underline; text-underline-offset: 0.2em; color: var(--wp--preset--color--gold-light); }
.arch-sep { color: var(--wp--preset--color--gold); }
.arch-login {
	background: var(--wp--preset--color--gold);
	border: 1px solid var(--wp--preset--color--gold);
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 18px;
	font-size: 12px;
	font-weight: 700;
}
.arch-nav a.arch-login { color: var(--wp--preset--color--ink); }
.arch-nav a.arch-login:hover {
	background: var(--wp--preset--color--gold-dark);
	border-color: var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

/* ——— Site chrome: footer (canon 2026-07-23) ——— */
.arch-footer {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-top: 1px solid rgba(156, 122, 44, 0.30);
	padding-top: var(--wp--preset--spacing--60, 104px);
	margin-top: 0;
}
/* Root block gap otherwise opens linen strips between header/main/footer. */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main { margin-block-start: 0; }
.arch-footer-grid {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--50, 64px);
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50, 64px);
}
.arch-f-wordmark {
	font-family: var(--wp--preset--font-family--display);
	color: var(--wp--preset--color--ivory);
	font-size: 24px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
/* Replaced by the join form (Mike, 2026-08-22) — kept in case the mission
   line comes back; nothing currently in the footer markup uses this. */
.arch-f-mission {
	font-style: italic;
	max-width: 36ch;
	opacity: 0.88;
	margin: 0;
	line-height: 1.6;
}
.arch-f-cta {
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 var(--wp--preset--spacing--10, 8px);
	max-width: 30ch;
}
.arch-f-cta-sub {
	max-width: 34ch;
	opacity: 0.85;
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
	line-height: 1.5;
}
/* The join-form block's "foot" variant defaults to a centered layout — it
   was built for the old full-width signup band. Flush it left instead, to
   match every other column in this footer grid. */
/* !important: `.join-foot .join-form { margin-inline: auto }` further down
   this file is equal specificity and later in the cascade, so it was
   silently winning over this without it — the form kept centering itself
   under the left-aligned heading above it. */
.arch-f-brand .join-form,
.arch-f-brand .join-reward { margin-inline: 0 !important; max-width: 320px; }
.arch-f-brand .join-fine,
.arch-f-brand .jr-fine,
.arch-f-brand .jr-lede,
.arch-f-brand .jr-status { text-align: left; }
.arch-f-col h3 {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
.arch-f-col a {
	display: block;
	color: var(--wp--preset--color--paper);
	opacity: 0.85;
	text-decoration: none;
	margin-bottom: var(--wp--preset--spacing--20, 16px);
}
.arch-f-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.2em; color: var(--wp--preset--color--paper); }
/* Wax-seal stamp closing the footer. Decorative — the wordmark above already
   names the brand, so the img is aria-hidden with an empty alt. */
.arch-f-stamp {
	text-align: center;
	padding: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--20, 16px);
}
.arch-f-stamp img {
	width: 104px;
	height: auto;
	opacity: 0.75;
	transition: opacity 300ms ease;
}
.arch-footer:hover .arch-f-stamp img { opacity: 1; }

/* Nested under the copyright line now (Mike, 2026-08-22) — no longer its
   own full-width row, so no independent box model of its own. */
.arch-f-fine {
	margin: 4px 0 0;
	padding: 0;
	max-width: none;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oak);
}
.arch-f-legal-text { display: flex; flex-direction: column; }
.arch-f-legal { border-top: 1px solid rgba(156, 122, 44, 0.30); }
.arch-f-legal-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--30, 24px) var(--wp--preset--spacing--40, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 24px);
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
}
.arch-f-legal-inner p { margin: 0; }
.arch-f-legal-inner a { color: inherit; text-decoration: none; margin-left: var(--wp--preset--spacing--30, 24px); }
.arch-f-legal-inner a:first-child { margin-left: 0; }
.arch-f-legal-inner a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 782px) {
	/* Phone: the wordmark takes its own centred row so the nav and the
	   cart/login pair below it both get room to breathe. */
	.arch-bar-inner {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"brand brand"
			"left  right";
		row-gap: 12px;
		column-gap: 10px;
		padding: 12px var(--wp--preset--spacing--20, 16px);
	}
	.arch-wordmark { grid-area: brand; }
	.arch-wordmark img { width: 190px; margin: 0 auto; }
	.arch-nav-left { grid-area: left; }
	.arch-nav-right { grid-area: right; }
	.arch-sticky.is-condensed .arch-wordmark img { width: 130px; }
	.arch-sticky.is-condensed .arch-bar-inner { row-gap: 8px; padding-block: 8px; }
	.arch-nav { font-size: 11px; gap: 10px; }
	/* short labels like "About" fell under 44px wide on a phone */
	.arch-nav-left { gap: 6px; }
	.arch-nav a { padding-inline: 4px; }
	.arch-login { padding: 8px 12px; font-size: 11px; }
	.arch-cart-bottle { height: 21px; }
	.arch-topbar { font-size: 10px; padding: 6px var(--wp--preset--spacing--20, 16px); }
	.arch-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40, 40px); padding: 0 var(--wp--preset--spacing--30, 24px) var(--wp--preset--spacing--40, 40px); }
	.arch-f-brand { grid-column: 1 / -1; }
	.arch-f-legal-inner { flex-direction: column; align-items: flex-start; }
	.arch-f-legal-inner a { margin-left: 0; margin-right: var(--wp--preset--spacing--30, 24px); }
}

/* ——— Base register ——— */
.archival-meta,
.ledger-no, .ledger-appellation, .ledger-vintage, .ledger-price,
.pdp-meta {
	font-family: var(--wp--preset--font-family--ledger);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--meta);
	font-variant-numeric: tabular-nums;
}

/* Button canon rev 3 (Mike, 2026-08-27, the A5 component set; ported to the
   theme 2026-09-01 — until now the theme was still running rev 2's Courier
   gold-fill from July). Labels are Cinzel letterspaced caps, not Courier:
   Courier stays the metadata face, and a button label is a voice, not a datum.
   PRIMARY on paper = ink fill + gold text + gold hairline, hover inverts to
   gold fill + ink text. PRIMARY on ink = gold fill + ink text + pale hairline,
   hover inverts to paper — set further down, scoped to the dark grounds.
   The reference card this was drawn from carries a drop shadow; it does not
   ship. No box-shadow is a hard rule, and theme.json disables shadow presets. */
button, .wp-block-button__link, .ledger-atc button, .pdp-atc button {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	/* the trailing letterspace is real width, so a centred label sits half a
	   space left of true centre without this */
	text-indent: 0.24em;
	/* Set the size explicitly: <button> was falling back to the browser's own
	   13.33px, which left every button 36-41px tall — under the 44px touch floor. */
	font-size: var(--wp--preset--font-size--meta);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* border-box so the 44px floor counts padding instead of stacking on top of it */
	box-sizing: border-box;
	min-height: 44px;
	/* The plate is read from inherited variables, not from a descendant selector
	   per dark section. A band only has to declare --btn-* once and every button
	   inside it — however deeply nested, whoever adds it later — comes out right.
	   Unset, they fall back to PRIMARY on paper. */
	background: var(--btn-bg, var(--wp--preset--color--ink));
	color: var(--btn-ink, var(--wp--preset--color--gold));
	border: 1px solid var(--btn-edge, var(--wp--preset--color--gold));
	border-radius: 0;
	padding: 0.75em 2em;
	cursor: pointer;
	/* The fill itself is the ::before below, so only the edge and the lettering
	   transition here. */
	transition: border-color 200ms ease, color 200ms ease;
	/* the liquid needs a box to be trapped in, and a stacking context so the
	   fill can sit behind the lettering without wrapping it in a span */
	position: relative;
	overflow: hidden;
	z-index: 0;
	/* what the hover pours in. Rev 2 poured ink into a gold button; rev 3 starts
	   from ink, so the liquid is gold. */
	--btn-fill: var(--btn-pour, var(--wp--preset--color--gold));
}
/* Hover pours the button full rather than cutting to the inverted state
   (Mike, 2026-08-29). The fill is one oversized blob with deliberately uneven
   corner radii, parked below the button and raised on hover — so the leading
   edge arrives as a meniscus that tips and rolls, not as a straight line. It is
   still just a rectangle of ink by the time it settles, so the end state, and
   its contrast, are exactly what they were. */
button::before, .wp-block-button__link::before, .ledger-atc button::before, .pdp-atc button::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* wider and taller than the button on every side, so no amount of sway or
	   tilt can uncover a corner */
	left: -30%;
	width: 160%;
	top: 100%;
	height: 260%;
	background: var(--btn-fill);
	/* the whole trick: an elliptical crown on the top edge. Split radii keep it
	   a shallow dome (~20px on a 44px button) rather than a bubble. */
	border-radius: 50% 50% 0 0 / 20% 20% 0 0;
	transition: top 460ms cubic-bezier(0.32, 0.72, 0.3, 1);
}
button:hover::before, .wp-block-button__link:hover::before, .ledger-atc button:hover::before, .pdp-atc button:hover::before,
button:focus-visible::before, .wp-block-button__link:focus-visible::before, .ledger-atc button:focus-visible::before, .pdp-atc button:focus-visible::before {
	top: -140%;
	/* the sway is what sells it as liquid — the crest drifts and tips while the
	   level rises, so the surface is never level and never in the same place */
	animation: btn-slosh 2.8s ease-in-out infinite;
}
@keyframes btn-slosh {
	0%, 100% { transform: translateX(-5%) rotate(-1.2deg); }
	50%      { transform: translateX(5%) rotate(1.2deg); }
}
button:hover, .wp-block-button__link:hover, .ledger-atc button:hover, .pdp-atc button:hover,
button:focus-visible, .wp-block-button__link:focus-visible, .ledger-atc button:focus-visible, .pdp-atc button:focus-visible {
	/* Hover inverts the plate the other way now: the ink fill fills with gold and
	   the lettering drops to ink. Gold on ink at rest is 6.9:1, ink on gold at
	   hover is 8.4:1 — both clear AA at this size, which the retired
	   paper-on-gold-dark (3.5:1) never did. The lettering waits ~half the pour
	   before it flips, so it changes under the gold rather than ahead of it. */
	border-color: var(--btn-edge-hover, var(--wp--preset--color--gold));
	color: var(--btn-ink-hover, var(--wp--preset--color--ink));
	transition: border-color 200ms ease, color 180ms ease 200ms;
}

/* PRIMARY on ink — every dark band on the site. The gold plate stays here,
   because an ink-filled button on an ink ground has no shape at all. Rev 3:
   gold fill, ink text, pale hairline, hover inverts to paper.
   Add a new dark section? Add it to this list and its buttons are handled. */
.arch-bar, .arch-footer,
.home-hero, .home-proof, .home-signup, .home-manifesto, .home-vitrine,
.pdpx-hero, .pdpx-hero6, .pdpx-dark, .pdpx-archiveband, .pdpx-quote-band,
.pdpx-gallery, .pdpx-buybar, .pdp-specimen {
	--btn-bg: var(--wp--preset--color--gold);
	--btn-ink: var(--wp--preset--color--ink);
	--btn-edge: var(--wp--preset--color--gold-light);
	--btn-pour: var(--wp--preset--color--paper);
	--btn-edge-hover: var(--wp--preset--color--paper);
	--btn-ink-hover: var(--wp--preset--color--ink);
}
@media (prefers-reduced-motion: reduce) {
	button::before, .wp-block-button__link::before, .ledger-atc button::before, .pdp-atc button::before {
		transition: none;
		border-radius: 0;
	}
	button:hover::before, .wp-block-button__link:hover::before, .ledger-atc button:hover::before, .pdp-atc button:hover::before,
	button:focus-visible::before, .wp-block-button__link:focus-visible::before, .ledger-atc button:focus-visible::before, .pdp-atc button:focus-visible::before {
		top: 0;
		animation: none;
	}
}
hr, .archival-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--brass);
}

/* ——— Ledger ——— */
.archival-ledger {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ledger-row {
	border-bottom: 1px solid var(--wp--preset--color--brass);
}
.archival-ledger .ledger-row:first-child {
	border-top: 1px solid var(--wp--preset--color--brass);
}
.ledger-line {
	display: grid;
	/* First column holds the enlarged label (see the label-thumb block). */
	grid-template-columns: 80px minmax(0, 1fr) 16ch 6ch 9ch;
	gap: var(--wp--preset--spacing--30, 24px);
	align-items: baseline;
	padding: var(--wp--preset--spacing--30, 24px) 0;
}
.ledger-no { color: var(--wp--preset--color--brass); }
.ledger-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ledger-name:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ledger-appellation, .ledger-vintage { color: var(--wp--preset--color--umber); }
.ledger-price { text-align: right; }
.ledger-sold { color: var(--wp--preset--color--signal-red); }

.is-sold .ledger-line { opacity: 0.48; }

.ledger-detail {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 200ms ease;
}
.ledger-detail-inner { overflow: hidden; }
.ledger-row:hover .ledger-detail,
.ledger-row:focus-within .ledger-detail {
	grid-template-rows: 1fr;
}
.ledger-note {
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
	color: var(--wp--preset--color--umber);
	font-style: italic;
}
.ledger-detail-inner { padding-left: calc(80px + var(--wp--preset--spacing--30, 24px)); }
.ledger-atc { padding-bottom: var(--wp--preset--spacing--30, 24px); }

@media (max-width: 782px) {
	.ledger-line { grid-template-columns: 56px minmax(0, 1fr) 9ch; }
	.ledger-appellation, .ledger-vintage { display: none; }
	.ledger-detail { grid-template-rows: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ledger-detail { transition: none; }
	.label-thumb { transition: none; }
}

/* ——— Flat pricing: comparables are stated, never struck through ——— */
.price del, .ledger-price del { display: none; }
.price ins, .ledger-price ins { text-decoration: none; }

/* ——— PDP v4: plate layout (canon 2026-08-01, Mike's mock) ———
   Lifted shadow on the plate frame is a DELIBERATE canon exception (Mike). */
.pdpx-archbar {
	border-bottom: 1px solid var(--wp--preset--color--brass);
	background: var(--wp--preset--color--paper);
	margin: 0;
}
.pdpx-archbar-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 24px);
	padding: 12px var(--wp--preset--spacing--40, 40px);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pdpx-archbar p { margin: 0; }
.pdpx-archbar a { text-decoration: none; }
.pdpx-archbar a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pdpx-archbar .crumb .sep { margin: 0 10px; color: var(--wp--preset--color--umber); }
.pdpx-archbar .pn { color: var(--wp--preset--color--umber); }
.pdpx-archbar .pn .sep { margin: 0 10px; }

.pdpx-plate {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 64px);
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--40, 40px) 0;
}
.pdpx-frame {
	margin: 0;
	padding: var(--wp--preset--spacing--40, 40px);
}
.pdpx-frame-img {
	background: var(--wp--preset--color--ivory);
	padding: var(--wp--preset--spacing--40, 40px);
	border: 1px solid rgba(156, 122, 44, 0.35);
}
.pdpx-frame-img img { width: 100%; height: auto; display: block; }
.pdpx-frame figcaption {
	margin-top: var(--wp--preset--spacing--30, 24px);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
}

.pdpx-buy { padding: var(--wp--preset--spacing--40, 40px) 0 var(--wp--preset--spacing--50, 64px); max-width: 620px; }
.pdpx-chiprow { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--30, 24px); margin-bottom: var(--wp--preset--spacing--30, 24px); }
.pdpx-chip {
	border: 1px solid var(--wp--preset--color--ink);
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.pdpx-chip strong { font-weight: 700; }
.pdpx-cases {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal-red);
}
.pdpx-appellation {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-accent);
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.pdpx-codename {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(40px, 4.6vw, 64px);
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.pdpx-varline {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
.pdpx-varline span { color: var(--wp--preset--color--brass); letter-spacing: -0.1em; }
.pdpx-shortdesc {
	font-size: var(--wp--preset--font-size--lead);
	font-style: italic;
	line-height: 1.55;
	max-width: 46ch;
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
}

.pdpx-details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--40, 40px);
}
.pdpx-details .cell { padding: var(--wp--preset--spacing--20, 16px); border-right: 1px solid var(--wp--preset--color--brass); border-bottom: 1px solid var(--wp--preset--color--brass); }
.pdpx-details .cell:nth-child(3n) { border-right: 0; }
.pdpx-details .cell:nth-last-child(-n+3) { border-bottom: 0; }
.pdpx-details .k {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	display: block;
	margin-bottom: 5px;
}
.pdpx-details .v { font-family: var(--wp--preset--font-family--display); font-size: 15px; letter-spacing: 0.04em; }

/* ——— Buy box: comparable price sits above ours, then the quantity tiers ——— */
.pdpx-pricing { margin: 0 0 var(--wp--preset--spacing--30, 24px); max-width: 460px; }
.pdpx-comparable {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--ledger);
	color: var(--wp--preset--color--umber);
}
.pdpx-comparable .k {
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
/* Stated flat, never struck through (DIRECTION.md price-gap rule). */
.pdpx-comparable .v { font-size: 21px; letter-spacing: 0.04em; }
.pdpx-comparable-why {
	margin: 6px 0 0;
	font-size: 13px;
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--umber);
}
.pdpx-comparable-why a { color: var(--wp--preset--color--gold-dark); text-underline-offset: 0.2em; }
.pdpx-price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(36px, 3.4vw, 48px);
	line-height: 1;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}
.pdpx-price .per {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
}

.pdpx-order { max-width: 460px; }
.pdpx-tiers { border: 0; padding: 0; margin: 0 0 var(--wp--preset--spacing--30, 24px); display: flex; flex-direction: column; gap: 10px; }
.pdpx-tier {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 16px);
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--brass);
	background: transparent;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.pdpx-tier:hover { border-color: var(--wp--preset--color--gold-dark); background: rgba(156, 122, 44, 0.05); }
.pdpx-tier input { appearance: none; margin: 0; flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--wp--preset--color--gold-dark); border-radius: 50%; }
.pdpx-tier input:checked { background: radial-gradient(circle, var(--wp--preset--color--ink) 0 5px, transparent 6px); border-color: var(--wp--preset--color--ink); }
.pdpx-tier:has(input:checked) { border-color: var(--wp--preset--color--ink); border-width: 2px; padding: 15px 17px; background: var(--wp--preset--color--paper-deep); }
.pdpx-tier:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--brass); outline-offset: 2px; }
.tier-main { flex: 1 1 auto; min-width: 0; }
.tier-label {
	display: block;
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.tier-sub { display: block; margin-top: 3px; font-size: 13px; color: var(--wp--preset--color--umber); }
.tier-money { flex: 0 0 auto; text-align: right; }
.tier-total { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 21px; line-height: 1.1; }
/* The case row's figure is a saving, not a price. Set in the ledger face at
   label size so the column still reads as one thing at a glance and the word
   does the disambiguating rather than the number's size. */
.tier-save-lab {
	display: block;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin-bottom: 2px;
}

/* The money button is rev 3's one stated exception: it stays GOLD FILL on the
   cream buy panel while every other primary on paper went to ink fill. It is the
   loudest thing on the page and it should be — the rest of the page went quieter
   around it, which makes the exception read as emphasis rather than as a stray.
   Its pour runs the old direction, ink rising into gold. */
.pdpx-atc {
	width: 100%;
	text-align: center;
	padding: 18px 24px;
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	font-size: 14px;
	--btn-fill: var(--wp--preset--color--ink);
	--btn-edge-hover: var(--wp--preset--color--gold);
	--btn-ink-hover: var(--wp--preset--color--gold-light);
}
.pdpx-atc-note {
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--umber);
	text-align: center;
}

/* ——— Alternate buy box: `?buybox=stepper` ———
   A conventional quantity stepper plus two quick-add shortcuts, built to be
   compared against the three-tier fieldset. Everything below is scoped so the
   default buy box is untouched while both versions exist. */
.pdpx-qtyrow {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
}
.pdpx-stepper {
	display: grid;
	grid-template-columns: 44px 56px 44px;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--brass);
	background: var(--wp--preset--color--paper);
}
/* Opted out of the global <button> treatment: these are utility controls, not
   calls to action. Without the reset they inherit the gold plate and the ink
   "pour" on hover, which turned a plus sign into a black square competing with
   Add to cart beside it. ::before is neutralised rather than the rule reordered,
   since the pour is painted by that pseudo-element. */
.pdpx-step {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--ink);
	padding: 0;
	min-height: 0;
	transition: background-color 160ms ease;
}
.pdpx-step::before { content: none; }
.pdpx-step:hover, .pdpx-step:focus-visible {
	background: var(--wp--preset--color--paper-deep);
	color: var(--wp--preset--color--ink);
	border-color: transparent;
}
/* The number sits in the ledger face, like every other figure on the page. */
.pdpx-qty {
	appearance: textfield;
	-moz-appearance: textfield;
	border: 0;
	border-inline: 1px solid var(--wp--preset--color--brass);
	background: none;
	text-align: center;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	padding: 0;
	min-width: 0;
}
.pdpx-qty::-webkit-outer-spin-button,
.pdpx-qty::-webkit-inner-spin-button { appearance: none; margin: 0; }
.pdpx-qty:focus-visible { outline: 2px solid var(--wp--preset--color--brass); outline-offset: -2px; }
/* The row's Add to cart sizes itself against the stepper rather than the full
   panel width the standalone button assumes. */
.pdpx-qtyrow .pdpx-atc { width: auto; padding: 16px 24px; }

.pdpx-quickadds {
	display: grid;
	gap: 10px;
	margin-top: var(--wp--preset--spacing--30, 24px);
}
/* Outlined, not gold: these are alternatives to the primary action, and two
   more gold blocks under it would leave the page with three equal asks. */
.pdpx-quickadd-btn {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	padding: 14px 18px;
	background: none;
	border: 1px solid var(--wp--preset--color--brass);
	color: var(--wp--preset--color--ink);
	transition: background-color 160ms ease, border-color 160ms ease;
}
/* Same opt-out as the steppers: a full ink pour here would give the page three
   equally loud asks instead of one. */
.pdpx-quickadd-btn::before { content: none; }
.pdpx-quickadd-btn:hover, .pdpx-quickadd-btn:focus-visible {
	background: var(--wp--preset--color--paper-deep);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}
.qa-label {
	display: block;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.qa-note {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--wp--preset--color--umber);
}
/* The pick: six bottles. Selected look borrowed from the tier fieldset's
   checked row — ink border doubled, deep paper — plus a small oxblood tag
   sitting on the top edge. Padding drops a pixel so the thicker border does
   not shift the text against its neighbour. */
.pdpx-quickadd.is-pick .pdpx-quickadd-btn {
	position: relative;
	border: 2px solid var(--wp--preset--color--ink);
	padding: 13px 17px;
	background: var(--wp--preset--color--paper-deep);
}
.pdpx-quickadd.is-pick .pdpx-quickadd-btn:hover,
.pdpx-quickadd.is-pick .pdpx-quickadd-btn:focus-visible {
	background: rgba(156, 122, 44, 0.12);
}
.qa-pick {
	position: absolute;
	top: 13px;
	right: 17px;
	padding: 3px 9px;
	background: var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	pointer-events: none;
}
/* The cart-wide rule, stated where the buy box can only speak for one wine. */
.pdpx-mixnote {
	margin: var(--wp--preset--spacing--30, 24px) 0 0;
	padding-top: var(--wp--preset--spacing--20, 16px);
	border-top: 1px solid var(--wp--preset--color--brass);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.6;
	color: var(--wp--preset--color--umber);
}
.pdpx-fine {
	margin: var(--wp--preset--spacing--30, 24px) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	max-width: 460px;
}
.pdpx-fine li { padding: 7px 0 7px 20px; position: relative; border-bottom: 1px solid var(--wp--preset--color--custom-rule-faint, rgba(156, 122, 44, 0.18)); margin: 0 !important; }
.pdpx-fine li:last-child { border-bottom: 0; }
.pdpx-fine li::before { content: "+"; position: absolute; left: 2px; color: var(--wp--preset--color--gold-dark); font-weight: 700; }
/* ——— Included with every order: the ticket under the buy box ———
   (Mike, 2026-09-05; relisted 2026-09-14.) One hairline frame, a titled header
   row with the entry number as the document's reference, then one benefit per
   line. Each line opens with a small brass check in the ledger face — a tick on
   a manifest, not an icon set. Hairlines only — no fills, no radius, no shadow. */
.pdpx-bill {
	margin: var(--wp--preset--spacing--30, 24px) 0 0;
	border: 1px solid var(--wp--preset--color--brass);
	text-align: left;
}
.pdpx-bill-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20, 16px);
	padding: 9px 12px 8px;
	border-bottom: 2px dotted var(--wp--preset--color--brass);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--gold-dark);
}
.pdpx-bill-no {
	color: var(--wp--preset--color--red-accent);
	font-weight: 700;
	white-space: nowrap;
}
.pdpx-bill-list {
	list-style: none;
	margin: 0;
	padding: 6px 12px 8px;
}
.pdpx-bill-list li {
	position: relative;
	padding: 7px 0 7px 26px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--custom-rule-faint, rgba(156, 122, 44, 0.18));
}
.pdpx-bill-list li:last-child { border-bottom: 0; }
.pdpx-bill-list li::before {
	content: "\2713";
	position: absolute;
	left: 2px;
	top: 7px;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--gold-dark);
}
/* ——— The record table now sits under the plate, not in the buy column ——— */
.pdpx-platecol { min-width: 0; }
.pdpx-platecol .pdpx-details { margin: 0; }

/* ——— "How the Archive works": full-width dark band under the split ——— */
.pdpx-archiveband {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	margin-top: var(--wp--preset--spacing--60, 104px);
	padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--40, 40px);
}
.pdpx-archiveband-inner { max-width: 1160px; margin: 0 auto; }
.pdpx-archiveband h2 {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
}
.pdpx-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 40px);
}
.pdpx-steps li { margin: 0; padding-top: var(--wp--preset--spacing--20, 16px); border-top: 1px solid var(--wp--preset--color--gold-dark); }
.pdpx-steps .n {
	display: block;
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--gold);
	margin-bottom: 10px;
}
.pdpx-steps .t {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	line-height: 1.2;
	color: var(--wp--preset--color--ivory);
	margin-bottom: 8px;
}
.pdpx-steps .d { display: block; font-size: var(--wp--preset--font-size--base); line-height: 1.55; color: var(--wp--preset--color--paper); }
.pdpx-archiveband .pdpx-mix { margin-top: var(--wp--preset--spacing--40, 40px); color: var(--wp--preset--color--oak); }
.pdpx-archiveband .pdpx-mix a { color: var(--wp--preset--color--gold-light); }

/* ——— "Read the full entry": jumps to the writeup, which is the real pitch ——— */
.pdpx-readmore { margin: calc(-1 * var(--wp--preset--spacing--20, 16px)) 0 var(--wp--preset--spacing--30, 24px); }
.pdpx-readmore a {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--gold-dark);
	padding-bottom: 3px;
}
.pdpx-readmore a:hover { color: var(--wp--preset--color--ink); border-bottom-color: var(--wp--preset--color--ink); }
/* clears the sticky header so in-page jumps don't land under it */
#entry-note, #join, #join-hero { scroll-margin-top: 120px; }

/* ——— Related entries: photo cards, not the text ledger ——— */
.pdpx-related { max-width: 1240px; margin: var(--wp--preset--spacing--60, 104px) auto 0; padding: 0 var(--wp--preset--spacing--40, 40px); }
.pdpx-related-title {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
	padding-bottom: var(--wp--preset--spacing--20, 16px);
	border-bottom: 1px solid var(--wp--preset--color--brass);
}
.pdpx-relgrid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 40px);
}
.pdpx-relgrid li { margin: 0; }
.pdpx-relcard a { display: block; text-decoration: none; color: inherit; }
/* Grid stretches every card in a row to the tallest, so making the card and its
   link flex columns lets the price take the leftover space above it. Prices —
   and the buttons under them — then line up across the row no matter how many
   lines a name or an appellation runs to. Before this, one two-line name
   dropped that card's whole lower half out of step with its neighbours. */
/* The card itself is an ivory sheet with a hairline edge (Mike, 2026-09-02,
   decision session 3) — before this the card was borderless and only the picture
   panel had a ground, so a row read as four floating bottles rather than four
   filed records. */
.pdpx-relcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--ivory);
	border: 1px solid rgba(156, 122, 44, 0.3);
	padding: var(--wp--preset--spacing--20, 16px);
}
.pdpx-relcard > a { display: flex; flex-direction: column; flex: 1 1 auto; }
/* The picture panel holds two images on top of each other: the label flat at
   rest and the bottle, which fades in on hover or focus. Both are fitted with
   contain — flats vary in shape and are never cropped or nudged by a fixed
   amount. A card with no flat (`data-fallback`) shows the bottle alone. */
.rc-shot {
	display: block;
	position: relative;
	flex: none;
	background: var(--wp--preset--color--paper);
	/* a hand's width of paper around the label, not a mat — the flats carry
	   their own margin once finish_flat.py has been over them */
	padding: 12px;
	margin-bottom: var(--wp--preset--spacing--20, 16px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	transition: background-color 200ms ease;
}
.rc-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.has-flat .rc-shot img {
	position: absolute;
	top: 12px;
	left: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	transition: opacity 220ms ease;
}
.has-flat .rc-bottle { opacity: 0; }
.has-flat a:hover .rc-flat, .has-flat a:focus-visible .rc-flat { opacity: 0; }
.has-flat a:hover .rc-bottle, .has-flat a:focus-visible .rc-bottle { opacity: 1; }
/* Canon: no shadows, no transforms — hover speaks in the ledger's language. */
.pdpx-relcard a:hover .rc-shot, .pdpx-relcard a:focus-visible .rc-shot { background: var(--wp--preset--color--paper-deep); }
@media (prefers-reduced-motion: reduce) { .has-flat .rc-shot img { transition: none; } }
/* CENTERED layout (Mike, 2026-09-02): the name goes up top on its own line and
   every line of type centres under the picture. The link is already a flex
   column, so `order` moves the name without touching the markup or the tab
   order of anything interactive. Switch: archival_card_layout(). */
/* Type block centred by default (Mike, 2026-09-03), so the switch now only
   decides whether the name rides above the picture. */
.pdpx-relcard { text-align: center; }
.rc-actions { justify-content: center; }
body.cards-centered .rc-name {
	order: -1;
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
	padding-bottom: var(--wp--preset--spacing--10, 8px);
	border-bottom: 1px solid rgba(156, 122, 44, 0.3);
	text-wrap: balance;
}
/* The entry number leads the type block and is set as the label sets it
   (Mike, 2026-09-03): the digits in the ledger face and the label's red, on
   their own line, with "Entry No." small and spaced beneath. */
.rc-no {
	display: block;
	font-family: var(--wp--preset--font-family--ledger);
	color: var(--wp--preset--color--umber);
	margin-bottom: 10px;
}
.rc-no-num {
	display: block;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.1;
	color: var(--wp--preset--color--oxblood);
	font-variant-numeric: tabular-nums;
}
.rc-no-cap {
	display: block;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin-top: 3px;
}
.rc-name { display: block; font-family: var(--wp--preset--font-family--display); font-size: 26px; line-height: 1.15; margin-bottom: 4px; text-wrap: balance; }
.pdpx-relcard a:hover .rc-name { color: var(--wp--preset--color--gold-dark); }
.rc-app, .rc-sub { display: block; font-size: 14px; color: var(--wp--preset--color--umber); line-height: 1.45; }
/* Prices in the ledger face, as every other figure on the site is — the
   display face made it a second headline (decision session 3). Two lines:
   the comparable stated flat above, ours below. Never a strikethrough. */
.rc-pricing { display: block; margin-top: auto; padding-top: 10px; }
.rc-compare { display: block; font-family: var(--wp--preset--font-family--ledger); font-size: 13px; letter-spacing: 0.06em; color: var(--wp--preset--color--umber); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.rc-compare .k { text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; margin-right: 2px; }
.rc-price { display: block; font-family: var(--wp--preset--font-family--ledger); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pdpx-relcard.is-sold .rc-shot img { opacity: 0.55; }
.pdpx-relcard.is-sold.has-flat .rc-bottle { opacity: 0; }
.pdpx-relcard.is-sold.has-flat a:hover .rc-bottle, .pdpx-relcard.is-sold.has-flat a:focus-visible .rc-bottle { opacity: 0.55; }
.rc-sold { font-family: var(--wp--preset--font-family--ledger); font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--signal-red); }

/* ── Card actions (Mike, 2026-08-31) ──────────────────────────────────────
   Two buttons per card: a filled primary and an outline secondary. They sit
   outside the card's link — see archival_entry_card() for why. On a sold-out
   card only the outline renders, so the row is set to stretch rather than to
   a fixed two-column split; a lone "View entry" then fills the width instead
   of leaving a hole where the buy button would have been. */
.rc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--wp--preset--spacing--20, 16px);
}
.rc-atc { flex: 1 1 132px; margin: 0; }
.rc-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	/* Never break "Add to cart" across two lines — at three columns the label was
	   wrapping mid-phrase and the two buttons ended up different heights. If the
	   pair genuinely cannot fit side by side, the flex-basis below lets the second
	   wrap onto its own full-width line instead, which reads as a deliberate stack. */
	white-space: nowrap;
	padding: 11px 8px;
	border: 1px solid var(--wp--preset--color--brass);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}
.rc-btn--solid {
	flex: 1 1 132px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}
.rc-btn--solid:hover, .rc-btn--solid:focus-visible {
	background: var(--wp--preset--color--gold-dark);
	color: var(--wp--preset--color--ivory);
}
.rc-btn--outline {
	flex: 1 1 132px;
	background: transparent;
	color: var(--wp--preset--color--ink);
}
.rc-btn--outline:hover, .rc-btn--outline:focus-visible {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ivory);
	border-color: var(--wp--preset--color--ink);
}
.rc-btn:focus-visible { outline: 2px solid var(--wp--preset--color--gold-dark); outline-offset: 2px; }
/* The whole card is a link AND carries buttons, so the hover cue has to come
   from the card, not from the anchor alone — otherwise moving onto a button
   drops the highlight and the card looks like it lost focus. */
.pdpx-relcard:hover .rc-shot { background: var(--wp--preset--color--paper-deep); }

/* ── The Archive index (was a list until 2026-08-31) ──────────────────────
   Same card, three up instead of the PDP strip's four, because this page has
   no buy panel stealing width and a wider card lets the label read. */
/* The grid takes the whole page, not the 720px prose measure (Mike, 2026-09-02:
   "the boxes are hard to see on my laptop"). Three across at up to 1600px puts
   a card at ~500px on a wide screen, wide enough for the label to read. The
   `>` keeps this above the constrained layout's own child rule. */
.archive-index > .archive-grid {
	max-width: min(1600px, 100%);
	margin-inline: auto;
}
.archive-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--50, 64px);
	margin-bottom: var(--wp--preset--spacing--60, 104px);
}

/* ——— Archive filter bar (Mike, 2026-09-06) ———
   A ledger line above the grid, not a sidebar: labels and chips in the metadata
   face between two brass hairlines, the same voice as Terms of Carriage. Chips are
   radio inputs dressed as text — the chosen one gets the ink border and deep paper
   the tier rows and quick-adds use for "selected", so one selected look holds
   across the site. No fills, no pills. */
.archive-index > .af-bar { max-width: min(1600px, 100%); margin-inline: auto; }
.af-bar {
	margin-top: calc(-1 * var(--wp--preset--spacing--30, 24px));
	padding: var(--wp--preset--spacing--30, 24px) 0 var(--wp--preset--spacing--20, 16px);
	border-top: 1px solid var(--wp--preset--color--brass);
	border-bottom: 1px solid var(--wp--preset--color--brass);
	font-family: var(--wp--preset--font-family--ledger);
}
.af-bar + .archive-grid { margin-top: var(--wp--preset--spacing--40, 40px); }
/* The disclosure line. A ledger heading with a caret, the active choices set
   quietly after it so a closed bar still says what it is doing. */
.af-summary {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20, 16px);
	cursor: pointer;
	list-style: none;
	padding: 4px 0 12px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}
.af-summary::-webkit-details-marker { display: none; }
.af-summary::marker { content: ""; }
.af-summary:hover .af-summary-label { color: var(--wp--preset--color--gold-dark); }
.af-summary:focus-visible { outline: 2px solid var(--wp--preset--color--gold-dark); outline-offset: 2px; }
.af-summary-label { flex: 0 0 auto; }
.af-summary-state {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--umber);
}
.af-disclosure[open] .af-summary-state { visibility: hidden; }
.af-caret {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 1px solid var(--wp--preset--color--gold-dark);
	border-bottom: 1px solid var(--wp--preset--color--gold-dark);
	transform: translateY(-3px) rotate(45deg);
	transition: transform 160ms ease;
}
.af-disclosure[open] .af-caret { transform: translateY(1px) rotate(-135deg); }
.af-disclosure[open] .af-summary { border-bottom: 1px dotted rgba(156, 122, 44, 0.45); }
.af-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px var(--wp--preset--spacing--20, 16px);
	padding: 8px 0;
}
.af-row + .af-row { border-top: 1px dotted rgba(156, 122, 44, 0.45); }
.af-label {
	flex: 0 0 88px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
}
.af-chips { display: flex; flex-wrap: wrap; gap: 8px 6px; flex: 1 1 auto; min-width: 0; }
.af-chip {
	position: relative;
	display: inline-block;
	cursor: pointer;
	margin: 0;
	padding: 5px 12px;
	border: 1px solid transparent;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.af-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.af-chip:hover { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--brass); }
.af-chip:has(input:checked) {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper-deep);
}
.af-chip:has(input:focus-visible) { outline: 2px solid var(--wp--preset--color--gold-dark); outline-offset: 2px; }
/* "All" is the resting state: shown as a chip so a facet can be undone, but quiet
   when it is the one that is on — a highlighted "All" would read as a filter. */
.af-chip:has(input[value=""]:checked) { border-color: var(--wp--preset--color--brass); background: none; }
.af-row--tail { justify-content: flex-start; gap: 8px var(--wp--preset--spacing--30, 24px); }
.af-toggle { padding-left: 0; padding-right: 12px; }
.af-toggle span::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	vertical-align: -1px;
	border: 1px solid var(--wp--preset--color--brass);
	background: none;
}
.af-toggle:has(input:checked) { border-color: transparent; background: none; }
.af-toggle:has(input:checked) span::before { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }
.af-sort { display: inline-flex; align-items: baseline; gap: 12px; margin-left: auto; }
.af-sort .af-label { flex: 0 0 auto; }
.af-sort select {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--brass);
	padding: 4px 22px 4px 0;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239C7A2C' stroke-width='1.2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
}
.af-sort select:focus-visible { outline: 2px solid var(--wp--preset--color--gold-dark); outline-offset: 2px; }
/* Apply is the no-script path. Once the script is live every change applies
   itself, so the button goes. */
.af-apply {
	min-height: 0;
	padding: 6px 14px;
	font-size: 11px;
	letter-spacing: 0.16em;
}
.af-bar[data-ready] .af-apply { display: none; }
/* The card is display:flex, which outranks the browser's own rule for the
   `hidden` attribute — so a filtered-out card has to be told again. Same for
   anything else the script hides by attribute. */
.pdpx-relcard[hidden], .af-empty[hidden], .af-clear[hidden] { display: none; }
.af-count {
	display: flex;
	gap: var(--wp--preset--spacing--20, 16px);
	align-items: baseline;
	margin: 12px 0 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
}
.af-clear {
	color: var(--wp--preset--color--oxblood);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.af-clear:hover { color: var(--wp--preset--color--ink); }
.af-empty {
	text-align: center;
	font-style: italic;
	font-size: 19px;
	color: var(--wp--preset--color--umber);
	margin: var(--wp--preset--spacing--50, 64px) 0 var(--wp--preset--spacing--60, 104px);
}
.af-empty a { color: var(--wp--preset--color--ink); }
/* "Running low" on the card: a ledger line under the price, in the record's gold,
   not the signal red that marks Sold — the wine is still here. */
.rc-low {
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
}
@media (max-width: 900px) {
	/* Two up on a phone. One up wastes the screen — these cards are label-shaped,
	   not landscape — and the buttons still clear 44px of touch target at this width. */
	.archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30, 24px); }
	/* Filter bar on a phone: the label takes its own line above the chips, the
	   sort drops under the toggle. Chips stay 44px tall to the touch via padding. */
	.af-label { flex-basis: 100%; }
	.af-chip { padding: 9px 12px; }
	.af-sort { margin-left: 0; flex-basis: 100%; }
	.af-summary-state { flex-basis: 100%; order: 3; }
	.af-summary { flex-wrap: wrap; }
	.af-sort .af-label { flex-basis: auto; }
	/* Stacked here. The 132px flex-basis that keeps the pair side by side on a wide
	   card becomes a 132px HEIGHT once the axis flips, which inflated the outline
	   button into an empty box. Basis back to content in the column direction. */
	.rc-actions { flex-direction: column; }
	.rc-actions .rc-btn, .rc-actions .rc-atc { flex: 0 0 auto; }
	.rc-name { font-size: 22px; }
}

/* ——— Winemaker's note: Bobby's voice, cream, distinct from the dark Scribe ——— */
.pdpx-maker {
	max-width: 760px;
	margin: var(--wp--preset--spacing--60, 104px) auto 0;
	padding: 0 var(--wp--preset--spacing--40, 40px);
}
.pdpx-maker-head {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin-bottom: var(--wp--preset--spacing--10, 8px);
}
.pdpx-maker-title { font-size: clamp(28px, 3vw, 38px); margin: 0 0 var(--wp--preset--spacing--30, 24px); }
.pdpx-maker-body { font-size: var(--wp--preset--font-size--lead); line-height: 1.6; }
.pdpx-maker-body p { margin: 0 0 1em; }
.pdpx-maker .pdpx-sig {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
}
.pdpx-mix {
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--umber);
}
.pdpx-mix a { color: var(--wp--preset--color--gold-dark); text-decoration: underline; text-underline-offset: 0.2em; }

.pdpx-dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	margin: var(--wp--preset--spacing--60, 104px) 0 0;
	padding: var(--wp--preset--spacing--60, 104px) var(--wp--preset--spacing--40, 40px);
}
.pdpx-dark .pdpx-note-head { color: var(--wp--preset--color--oak); }
.pdpx-dark .pdpx-note-head .no { color: var(--wp--preset--color--gold-light); }
.pdpx-dark .pdpx-note-title { color: var(--wp--preset--color--ivory); }
.pdpx-dark .pdpx-note-body { color: var(--wp--preset--color--paper); max-width: 94ch; margin-inline: auto; }

/* ——— Producer's note: Scribe / Winemaker's Addendum tabs ———
   Server-rendered visible, upgraded by JS. Until the block's script sets
   `data-ready` the tablist stays hidden and both panels are simply stacked
   headed sections, which is also what a reader with scripts off gets. */
.pdpx-tablist { display: none; }
.pdpx-tabs[data-ready] .pdpx-tablist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: clamp(20px, 4vw, 48px);
	margin: 0 0 var(--wp--preset--spacing--50, 64px);
}
.pdpx-tab {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 2px 10px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--oak);
	border-bottom: 2px solid transparent;
	transition: color 160ms ease, border-color 160ms ease;
	/* 44px hit area — these are the only controls in the band and they sit on
	   a dark ground where a mis-tap is easy. */
	min-height: 44px;
}
.pdpx-tab:hover { color: var(--wp--preset--color--paper); }
.pdpx-tab[aria-selected="true"] {
	color: var(--wp--preset--color--ivory);
	border-bottom-color: var(--wp--preset--color--gold);
}
.pdpx-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 4px;
}
/* With tabs live the tab label already names the panel, so the in-panel
   heading would be a duplicate — kept in the DOM for the accessible name and
   for the no-JS rendering, hidden visually only. */
.pdpx-tabs[data-ready] .pdpx-panel-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.pdpx-panel:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-light);
	outline-offset: 8px;
}
/* Bobby's kicker. The cream band that used to mark his voice is gone, so this
   line and the signature are what carry the attribution now. */
.pdpx-panel-kicker {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
/* Without JS the two panels stack, so they need a rule between them. */
.pdpx-tabs:not([data-ready]) .pdpx-panel + .pdpx-panel {
	margin-top: var(--wp--preset--spacing--60, 104px);
	padding-top: var(--wp--preset--spacing--50, 64px);
	border-top: 1px solid rgba(156, 122, 44, 0.35);
}
.pdpx-quote { text-align: center; padding: var(--wp--preset--spacing--50, 64px) 0; max-width: 94ch; margin: 0 auto; }
.pdpx-quote .score {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
.pdpx-quote blockquote { font-style: italic; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; max-width: 36ch; margin: 0 auto; border: 0; padding: 0; }

/* ——— PDP v3: classic split (canon 2026-07-24) ——— */
.pdp-v3 { margin-top: 0; }
.archival-pdp .pdpx-hero { margin-top: 0; }
.wp-site-blocks > .pdpx-hero, .wp-site-blocks > .home-hero { margin-block-start: 0; }
.pdpx-hero {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-align: center;
	padding: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--30, 24px);
	min-height: 200px;
	display: grid;
	place-items: center;
	margin: 0 calc(-50vw + 50%) var(--wp--preset--spacing--50, 64px);
}
.pdpx-hero-no {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.pdpx-hero h1 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); }
.pdpx-hero-sub { font-style: italic; font-size: var(--wp--preset--font-size--lead); opacity: 0.9; margin-top: var(--wp--preset--spacing--20, 16px); }

.pdpx-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: stretch;
	width: 100vw;
	margin: 0 calc(-50vw + 50%);
	max-width: none;
}
.pdpx-gallery { position: relative; min-height: 720px; background: var(--wp--preset--color--ink); }
.pdpx-main {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}
.pdpx-main img { width: 100%; height: 100%; object-fit: cover; }
.pdpx-thumbs { position: absolute; left: var(--wp--preset--spacing--30, 24px); bottom: var(--wp--preset--spacing--30, 24px); display: flex; gap: var(--wp--preset--spacing--20, 16px); z-index: 2; }
.pdpx-thumb { margin: 0; width: 72px; height: 72px; background: var(--wp--preset--color--ink); border: 1px solid rgba(243, 235, 220, 0.5); overflow: hidden; }
.pdpx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdpx-buy { padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--50, 64px); max-width: 720px; }

.pdpx-entry {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-accent);
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.pdpx-codename {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--10, 8px);
}
.pdpx-title {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.4;
	color: var(--wp--preset--color--umber);
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.pdpx-stars { display: flex; align-items: center; gap: var(--wp--preset--spacing--20, 16px); margin-bottom: var(--wp--preset--spacing--30, 24px); }
.pdpx-stars .star-rating { color: var(--wp--preset--color--gold); }
.pdpx-stars a {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
}
.pdpx-shortdesc { font-size: var(--wp--preset--font-size--lead); line-height: 1.55; max-width: 46ch; margin-bottom: var(--wp--preset--spacing--30, 24px); }
.pdpx-shortdesc p { margin: 0; }
/* Legacy .pdpx-comparable / .pdpx-price / .pdpx-buttons rules removed here —
   they belonged to the pre-v5 buy box, no markup used them, and being later in
   the file they were overriding the current pricing block above. */
.pdpx-perks { list-style: none; margin: var(--wp--preset--spacing--40, 40px) 0 0; padding: 0; }
.pdpx-perks li {
	line-height: 1.5;
	padding: var(--wp--preset--spacing--20, 16px) 0 var(--wp--preset--spacing--20, 16px) 26px;
	border-bottom: 1px solid var(--wp--preset--color--brass);
	position: relative;
	max-width: 48ch;
}
.pdpx-perks li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: calc(var(--wp--preset--spacing--20, 16px) + 7px);
	width: 9px;
	height: 9px;
	border: 1px solid var(--wp--preset--color--brass);
	background: var(--wp--preset--color--gold);
}
.pdpx-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: var(--wp--preset--spacing--40, 40px);
	border-top: 1px solid var(--wp--preset--color--brass);
}
.pdpx-specs .cell { padding: var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--20, 16px) 0; border-bottom: 1px solid var(--wp--preset--color--brass); }
.pdpx-specs .cell-wide { grid-column: 1 / -1; }
.pdpx-specs .k {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	display: block;
	margin-bottom: 4px;
}
.pdpx-specs .v { font-size: var(--wp--preset--font-size--base); line-height: 1.35; }

.pdpx-dossier { max-width: 1240px; margin: var(--wp--preset--spacing--60, 104px) auto 0; }
.pdpx-dossier-head {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
.pdpx-dossier-head .no { color: var(--wp--preset--color--red-accent); }
.pdpx-dossier-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border: 1px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}
.pdpx-dossier-grid .cell {
	padding: var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--30, 24px) var(--wp--preset--spacing--30, 24px);
	border-right: 1px solid var(--wp--preset--color--brass);
	border-bottom: 1px solid var(--wp--preset--color--brass);
}
.pdpx-dossier-grid .cell:nth-child(3n) { border-right: 0; }
.pdpx-dossier-grid .cell-wide { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.pdpx-dossier-grid .k {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	display: block;
	margin-bottom: var(--wp--preset--spacing--10, 8px);
}
.pdpx-dossier-grid .v { font-size: var(--wp--preset--font-size--lead); line-height: 1.3; }

.pdpx-writeup { padding: var(--wp--preset--spacing--60, 104px) var(--wp--preset--spacing--30, 24px) 0; }
.pdpx-writeup:last-of-type { padding-bottom: var(--wp--preset--spacing--60, 104px); }
.pdpx-note-head {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--umber);
	margin-bottom: var(--wp--preset--spacing--20, 16px);
}
.pdpx-note-head .no { color: var(--wp--preset--color--red-accent); }
.pdpx-note-title { text-align: center; letter-spacing: 0.08em; margin: 0 0 var(--wp--preset--spacing--50, 64px); }
.pdpx-note-body { font-size: 19px; line-height: 1.7; max-width: 94ch; margin: 0 auto; }
.pdpx-note-body p + p { margin-top: var(--wp--preset--spacing--30, 24px); }
.pdpx-sig { font-style: italic; margin-top: var(--wp--preset--spacing--40, 40px); }

.pdpx-quote-band {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-align: center;
	padding: var(--wp--preset--spacing--60, 104px) var(--wp--preset--spacing--40, 40px);
	margin: var(--wp--preset--spacing--60, 104px) calc(-50vw + 50%) 0;
}
.pdpx-quote-band .score {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
}
.pdpx-quote-band blockquote {
	font-style: italic;
	font-size: clamp(24px, 3.2vw, 40px);
	line-height: 1.45;
	max-width: 34ch;
	margin: 0 auto;
	border: 0;
	padding: 0;
}
.pdpx-quote-band .score:last-child { margin-bottom: 0; font-size: var(--wp--preset--font-size--title); }

.pdpx-buybar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	background: rgba(43, 39, 32, 0.96);
	border-top: 1px solid var(--wp--preset--color--brass);
	transform: translateY(102%);
	transition: transform 0.25s ease;
}
.pdpx-buybar.show { transform: none; }
.pdpx-buybar-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px var(--wp--preset--spacing--40, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30, 24px);
}
.pdpx-buybar .bb-name {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	margin: 0;
}
.pdpx-buybar .bb-price { color: var(--wp--preset--color--gold-light); font-weight: 700; margin-left: var(--wp--preset--spacing--20, 16px); }
.pdpx-buybar form { margin: 0; }
/* Solid ink, not 96% espresso over a near-identical section — the bar was
   permanently covering ~66px of running body copy in the Scribe writeup. */
.pdpx-buybar { background: var(--wp--preset--color--ink); border-top: 1px solid var(--wp--preset--color--gold-dark); }
/* and give the document somewhere for that last 66px to go */
body:has(#pdpxBuybar) .archival-pdp { padding-bottom: 80px; }
.pdpx-buybar[inert] { pointer-events: none; }
.pdpx-redaction-note {
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--umber);
	max-width: 52ch;
}
.pdpx-buybar button { padding: 10px 20px; font-size: 12px; }

/* A regular quantity stepper (Mike, 2026-08-22) — replaces the button whose
   label used to just mirror whichever tier was picked above it. */
.bb-form { display: flex; align-items: center; gap: var(--wp--preset--spacing--20, 16px); }
.bb-qty { display: flex; align-items: center; border: 1px solid var(--wp--preset--color--brass); flex: none; }
.bb-qty-step {
	background: transparent;
	border: 0;
	width: 32px;
	height: 36px;
	padding: 0 !important;
	font-size: 16px;
	line-height: 1;
	color: var(--wp--preset--color--paper);
	cursor: pointer;
}
.bb-qty-step:hover { color: var(--wp--preset--color--gold-light); }
#bbQty {
	width: 40px;
	height: 36px;
	text-align: center;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--wp--preset--color--brass);
	border-right: 1px solid var(--wp--preset--color--brass);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 14px;
	-moz-appearance: textfield;
}
#bbQty::-webkit-inner-spin-button, #bbQty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 782px) {
	.pdpx-split { grid-template-columns: 1fr; gap: 0; }
	.pdpx-plate { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30, 24px); padding-top: var(--wp--preset--spacing--30, 24px); }
	/* Read order on a phone: photo, then who/what/how much, then the record.
	   Left-column-first stacking put a table of redaction bars above the wine's
	   own name and pushed the CTA past two screens. */
	.pdpx-platecol { display: contents; }
	.pdpx-frame { order: 1; }
	.pdpx-buy { order: 2; }
	.pdpx-platecol .pdpx-details { order: 3; margin: 0 var(--wp--preset--spacing--20, 16px); }
	.pdpx-redaction-note { order: 4; padding: 0 var(--wp--preset--spacing--20, 16px); }
	/* Not .bb-qty-step — those are the compact +/- steppers, not the submit
	   button this rule was written for. */
	.pdpx-buybar button:not(.bb-qty-step) { width: 100%; }
	.pdpx-frame { padding: var(--wp--preset--spacing--20, 16px); }
	.pdpx-frame-img { padding: var(--wp--preset--spacing--20, 16px); }
	.pdpx-buy { padding: 0 var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--40, 40px); max-width: none; }
	.pdpx-details { grid-template-columns: 1fr 1fr; }
	.pdpx-details .cell:nth-child(3n) { border-right: 1px solid var(--wp--preset--color--brass); }
	.pdpx-details .cell:nth-child(2n) { border-right: 0; }
	/* the record table lives under the plate, so give it the same side gutters */
	.pdpx-platecol .pdpx-details { margin: 0 var(--wp--preset--spacing--20, 16px); }
	.pdpx-archiveband { margin-top: var(--wp--preset--spacing--50, 64px); padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--30, 24px); }
	.pdpx-steps { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30, 24px); }
	.pdpx-maker { margin-top: var(--wp--preset--spacing--50, 64px); padding: 0 var(--wp--preset--spacing--30, 24px); }
	/* the header is two rows on phones, so anchors need more clearance */
	#entry-note, #join, #join-hero { scroll-margin-top: 150px; }
	.pdpx-related { margin-top: var(--wp--preset--spacing--50, 64px); padding: 0 var(--wp--preset--spacing--30, 24px); }
	.pdpx-relgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30, 24px); }
	.rc-name { font-size: 22px; }
	.rc-shot { padding: var(--wp--preset--spacing--20, 16px); }
	.pdpx-tier { padding: 14px; gap: 12px; }
	.pdpx-tier:has(input:checked) { padding: 13px; }
	.tier-total { font-size: 19px; }
	.pdpx-archbar-inner { flex-direction: column; gap: 6px; padding: 10px var(--wp--preset--spacing--30, 24px); }
	.pdpx-dark { padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--30, 24px); }
	.pdpx-gallery { min-height: 60vh; }
	.pdpx-buy { padding: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--30, 24px); max-width: none; }
	.pdpx-specs { grid-template-columns: 1fr 1fr; }
	.pdpx-hero { min-height: 160px; margin-bottom: var(--wp--preset--spacing--40, 40px); }
	.pdpx-dossier-grid { grid-template-columns: 1fr 1fr; }
	.pdpx-dossier-grid .cell:nth-child(3n) { border-right: 1px solid var(--wp--preset--color--brass); }
	.pdpx-dossier-grid .cell:nth-child(2n) { border-right: 0; }
	.pdpx-dossier-grid .cell-wide { border-right: 0; }
	.pdpx-writeup { padding-top: var(--wp--preset--spacing--50, 64px); }
	.pdpx-quote-band { padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--30, 24px); }
	.pdpx-buybar-inner { padding: 10px var(--wp--preset--spacing--30, 24px); }
}

/* ——— PDP: vitrine ——— */
.archival-pdp.vitrine { padding-block: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--60, 104px); }

.pdp-strip {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30, 24px);
	border-top: 1px solid var(--wp--preset--color--brass);
	border-bottom: 1px solid var(--wp--preset--color--brass);
	padding-block: var(--wp--preset--spacing--20, 16px);
	margin-bottom: var(--wp--preset--spacing--40, 40px);
}
.pdp-strip-no {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--brass);
	font-variant-numeric: tabular-nums;
}
.pdp-strip-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--title);
	margin: 0;
	flex: 1;
	min-width: 0;
}
.pdp-strip-meta {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--umber);
	white-space: nowrap;
}

.pdp-vitrine {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.1fr);
	gap: var(--wp--preset--spacing--40, 40px);
	align-items: start;
}

.pdp-card {
	background: var(--wp--preset--color--paper-deep);
	padding: var(--wp--preset--spacing--30, 24px);
}
.pdp-meta { width: 100%; border-collapse: collapse; }
.pdp-meta th, .pdp-meta td {
	text-align: left;
	padding: var(--wp--preset--spacing--20, 16px) 0;
	border-bottom: 1px solid var(--wp--preset--color--brass);
}
.pdp-meta th { color: var(--wp--preset--color--umber); font-weight: 400; }
/* The redaction is the label's marker scribble, not a box. Two shapes traced
   from the Entry 021 label (design/mockups/redaction-marker.html, variant C);
   masked so the colour stays the ink token. The second row of a group gets the
   shorter shape, as on the label. Mike, 2026-09-06. */
.pdp-redacted {
	display: inline-block;
	height: 1.15em;
	aspect-ratio: 461 / 82;
	background: var(--wp--preset--color--ink);
	vertical-align: -0.28em;
	transform: rotate(-1.2deg);
	-webkit-mask: url(../img/redact-a.png) center / 100% 100% no-repeat;
	mask: url(../img/redact-a.png) center / 100% 100% no-repeat;
}
dd:nth-of-type(2) > .pdp-redacted {
	aspect-ratio: 321 / 80;
	transform: rotate(0.8deg);
	-webkit-mask-image: url(../img/redact-b.png);
	mask-image: url(../img/redact-b.png);
}
.pdp-card-note {
	font-family: var(--wp--preset--font-family--text);
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--umber);
	margin: var(--wp--preset--spacing--30, 24px) 0 0;
}

.pdp-specimen {
	margin: 0;
	background: var(--wp--preset--color--ink);
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--40, 40px);
	min-height: 60vh;
}
.pdp-specimen img { max-width: 100%; height: auto; border-radius: 0; }

.pdp-buy { position: sticky; top: var(--wp--preset--spacing--30, 24px); }
.pdp-price { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--display); margin: 0; }
.pdp-cases {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin: var(--wp--preset--spacing--10, 8px) 0 var(--wp--preset--spacing--30, 24px);
}
.pdp-atc button { width: 100%; }
.pdp-ship-note {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--umber);
	margin-top: var(--wp--preset--spacing--20, 16px);
}
.pdp-sold { color: var(--wp--preset--color--signal-red); font-size: var(--wp--preset--font-size--title); font-family: var(--wp--preset--font-family--ledger); letter-spacing: 0.14em; }

.pdp-narrative {
	max-width: 68ch;
	margin: var(--wp--preset--spacing--60, 104px) auto 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}
.pdp-atc-quiet { margin-top: var(--wp--preset--spacing--40, 40px); }
.pdp-atc-quiet button { width: auto; }

.pdp-adjacent { margin: var(--wp--preset--spacing--60, 104px) auto 0; max-width: 1240px; padding-inline: var(--wp--preset--spacing--40, 40px); }
.pdp-adjacent-title {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
}

@media (max-width: 782px) {
	.pdp-vitrine { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30, 24px); }
	/* Mobile order: specimen, buy, card. (Strip already above.) Buy above the card — hot traffic buys in 90 seconds. */
	.pdp-specimen { order: 1; min-height: 0; padding: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--30, 24px); margin-inline: calc(-1 * var(--wp--preset--spacing--30, 24px)); }
	.pdp-buy { order: 2; position: static; }
	.pdp-card { order: 3; }
	.pdp-strip { flex-wrap: wrap; }
	.pdp-strip-meta { white-space: normal; }
}

/* ——— Home v5 (canon 2026-07-24) ——— */
/* The root block gap otherwise opens a linen strip between the sticky header and the hero. */
.wp-site-blocks > .home-hero { margin-block-start: 0; }
.home-hero {
	position: relative;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	min-height: 88vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.home-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(35, 32, 26, 0.82) 0%, rgba(35, 32, 26, 0.55) 38%, rgba(35, 32, 26, 0) 65%);
	pointer-events: none;
}
/* Every homepage section below the hero lines up against this same value
   (Mike, 2026-08-22) — the hero governs the alignment, not the other way
   around. It grows past the 64px floor on wide viewports because the hero
   copy caps itself to a virtual ~1180px column and centers that column; a
   plain fixed 64px would drift left of it on a wide screen. */
:root { --home-gutter-left: max(var(--wp--preset--spacing--50, 64px), calc(50vw - 590px)); }
.home-hero-copy {
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 0;
	max-width: 640px;
	padding: var(--wp--preset--spacing--70, 168px) var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--60, 104px) var(--home-gutter-left);
}
.home-hero .eyebrow {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
/* 68px left "isn't." alone on a third line in the 640px column (Mike,
   2026-09-04: "a bit smaller so it fits"). 58px is the largest size that holds
   the line to two; balance splits it at the comma. */
.home-hero h1 {
	font-size: clamp(34px, 3.9vw, 58px);
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
	overflow-wrap: break-word;
	text-wrap: balance;
}
.home-hero .sub {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
	max-width: 46ch;
	margin: 0 0 var(--wp--preset--spacing--50, 64px);
	opacity: 0.92;
}
.home-hero .wp-block-button__link { text-decoration: none; }
/* Torn label edge where the hero meets the page — the label's own deckle. */
.hero-tear {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 36px;
	z-index: 2;
	color: var(--wp--preset--color--paper);
	pointer-events: none;
}
.hero-tear .t-main, .hero-tear .t-fiber { fill: currentColor; }
.hero-tear .t-shadow { stroke: rgba(20, 16, 12, 0.10); stroke-width: 1.5; fill: none; }
.hero-tear .t-dirt { fill: var(--wp--preset--color--ink); }
/* Flipped tear: cream page tearing over the dark closing band. */
.tear-flip {
	top: -1px;
	bottom: auto;
	transform: scaleY(-1);
}
.home-signup { position: relative; }

/* Label reel: crossfading catalog close-ups in the operate row. */
.label-reel { position: relative; }
.label-reel .reel-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12);
	opacity: 0;
	transition: opacity 0.9s ease;
}
.label-reel .reel-img.on { opacity: 1; }

.home-sec { padding-top: var(--wp--preset--spacing--60, 104px); }
/* Why the headings never lined up (Mike, 2026-08-22, take 2): .home-sec is
   an `alignwide` block, and WordPress's own global styles centre every
   alignwide block with `margin-left/right: auto !important` — this
   stylesheet can't out-specificity that, only out-important it. The dark
   bands (Our Belief, the proof strip) are `alignfull` instead, escape root
   padding themselves, and set a fixed 40px inset of their own, which is why
   those already looked right. This cancels the forced centering the same
   way, then applies the identical 40px — so every section's left edge is
   the same fixed value instead of one drifting with viewport width.
   First attempt at this undid the row's own padding (a second inset on top
   of this one) and produced a fixed-but-still-not-matching offset; the
   `.hr-summary` padding fix a few lines down is the other half of this. */
.home-sec.alignwide {
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
	max-width: none;
	/* Left matches the hero's own gutter (--home-gutter-left, defined on
	   .home-hero-copy) — the hero governs alignment, so this follows it
	   rather than using its own fixed number that could drift from it. */
	padding-left: var(--home-gutter-left);
	padding-right: var(--wp--preset--spacing--50, 64px);
}
.home-sec.alignwide > * { max-width: 1240px; }
/* Left-aligned heading (Mike, 2026-08-22) — simpler than the old centered
   stack. Stripped back twice on 2026-08-29: the leading section numeral
   ("01 / 02 / 03") came off sitewide because it repeated the entry numbering
   without meaning the same thing, and the trailing hairline came off with it.
   The label is now just the title. Entry numbers on wines are unaffected. */
.home-label {
	display: flex;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20, 16px);
	font-size: clamp(26px, 2.6vw, 36px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
	text-align: left;
}
.home-label .sec-title { flex: none; }
.home-intro { max-width: 56ch; margin: calc(-1 * var(--wp--preset--spacing--20, 16px)) 0 var(--wp--preset--spacing--40, 40px); text-align: left; font-size: var(--wp--preset--font-size--lead); line-height: 1.55; }

/* 01 featured */
/* ——— The Latest Entry (Mike's reference, 2026-08-29) ———
   Label flat on a deep-paper panel at the left, the entry read out beside it.
   The label is the photograph — the bottle mockup was never the intent. */
.home-featured {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 64px);
	align-items: stretch;
}
/* The panel is a ground for the sheet, not a frame around it: deep paper, no
   border, the label whole and centred with even paper around it (Mike's rev 2:
   "the label flat, realistic, with padding around it on the deep-parchment
   half"). It used to be pinned to the bottom edge and pulled 13% past it, on
   the theory that every flat was a square canvas with a third of dead margin
   baked in. They are not: dev carries 1200x1200 squares with a small even
   margin, three 896x1200 files, and a few odd sizes, and the sandbox carries
   tight ~520x720 crops. A fixed pull-down chops the script block off some and
   floats others, and because the panel stretches to the copy's height the
   label also moved with the blurb's length. Centring it whole is the one
   treatment that lands the same for every file shape (2026-09-02). */
.hf-img {
	margin: 0;
	background: var(--wp--preset--color--paper-deep);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
}
.hf-img img { width: 100%; height: auto; display: block; }
/* Natural shape, never cropped. A square file reads at 460px; a taller 3:4
   file makes the panel taller and the copy re-centres beside it. The height
   cap only bites on a freak file (024 Felicity is 517x1162) so it can't blow
   the section up. */
.hf-img.is-flat > a { display: block; width: min(100%, 460px); }
.hf-img.is-flat img { max-height: 640px; object-fit: contain; margin: 0; }
/* No flat on this entry — the product shot gets the old hairline back, since a
   bottle photograph has no paper edge of its own to read against the panel. */
.hf-img:not(.is-flat) { align-items: center; padding: clamp(24px, 3vw, 40px); }
.hf-img:not(.is-flat) img { border: 1px solid var(--wp--preset--color--brass); }

.hf-copy { align-self: center; }
/* Same .hr-no component as the ledger/PDP/How We Do It, a size up and left
   aligned. The rule that used to sit above the number is gone (Mike,
   2026-08-31) — the dotted rule under it is the only one wanted. */
/* Scoped to .home-featured on purpose: the shared .hr-no component is defined
   further down this file and centres itself, so an unscoped .hf-no of equal
   weight loses on source order and the marker silently re-centres. */
.home-featured .hf-no { text-align: left; margin: 0 0 var(--wp--preset--spacing--30, 24px); }
.home-featured .hf-no .no { font-size: clamp(34px, 4vw, 46px); letter-spacing: 0.12em; }
.home-featured .hf-no .dots { width: 250px; max-width: 100%; margin: 10px 0 8px; }
.home-featured .hf-no .lab { font-size: 11px; letter-spacing: 0.2em; text-indent: 0.2em; }
/* Cinzel renders lowercase as small capitals, so the composed name arrives in
   the reference's two-tier caps on its own — no text-transform. */
.hf-name {
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.2;
	max-width: 20ch;
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.hf-meta {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--umber);
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}
.hf-blurb { max-width: 46ch; margin: 0 0 var(--wp--preset--spacing--40, 40px); font-size: var(--wp--preset--font-size--base); line-height: 1.7; }
.hf-comparable {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-accent);
	margin: 0 0 var(--wp--preset--spacing--10, 8px);
}
.hf-price {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: clamp(24px, 2.2vw, 30px);
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
}
.hf-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--20, 16px); margin: 0; }
.hf-actions .wp-block-button__link { text-decoration: none; }
/* GHOST tier (rev 3) — text and an arrow, no box. Cinzel like the other two
   tiers: the three button tiers share one voice, and Courier stays on metadata. */
.hf-archive-link {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	text-decoration: none;
}
.hf-archive-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* 02 current archives */
/* ——— Current Archives: a plain ledger, full width, rows expand in place
   (Mike, 2026-08-22) — taller rows, a descriptor column, and a chevron that
   opens onto the tasting note + flat label instead of a hover-grow thumb. ——— */
.hr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--brass); }
.hr-row { margin: 0; border-bottom: 1px solid var(--wp--preset--color--brass); }

/* padding-inline: 0 (Mike, 2026-08-22, take 2) — .home-sec already puts a
   fixed 40px on the section; adding 16px more here was a second inset
   stacked on top of that, so the row text landed 16px right of the
   heading above it instead of lining up with it. */
/* The whole row is one link to the entry (Mike, 2026-08-31) — it was a
   <summary> opening a panel, which is why the disclosure resets below are
   gone along with the chevron column the marker used to need. */
.hr-summary {
	display: grid;
	grid-template-columns: 84px minmax(0, 1.3fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 24px);
	padding: var(--wp--preset--spacing--40, 40px) 0;
	text-decoration: none;
	color: inherit;
	transition: background-color 160ms ease;
}
.hr-summary:hover, .hr-summary:focus-visible { background: var(--wp--preset--color--paper-deep); }
.hr-summary:hover .hr-name, .hr-summary:focus-visible .hr-name { color: var(--wp--preset--color--gold-dark); }

/* Same component as the PDP hero's entry marker (.pdpx-lp-entry), scaled
   down to sit inline in a row instead of stacked at the top of a hero. */
.hr-no { text-align: center; }
.hr-no .no {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--red-accent);
	margin: 0;
}
.hr-no .dots {
	border: 0;
	border-top: 1px dotted var(--wp--preset--color--red-accent);
	opacity: 0.6;
	width: 44px;
	margin: 4px auto;
}
.hr-no .lab {
	font-family: var(--wp--preset--font-family--display);
	font-size: 8px;
	letter-spacing: 0.28em;
	text-indent: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin: 0;
}
.hr-name {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.15;
	text-decoration: none;
	color: inherit;
}
.hr-name:hover, .hr-name:focus-visible { color: var(--wp--preset--color--gold-dark); }
.hr-mid {
	font-family: var(--wp--preset--font-family--text);
	font-size: 18px;
	line-height: 1.4;
	color: var(--wp--preset--color--umber);
}
.hr-price {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 19px;
	text-align: right;
	white-space: nowrap;
}
.hr-comparable {
	display: block;
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin-top: 3px;
}
.hr-row.is-sold .hr-no, .hr-row.is-sold .hr-name, .hr-row.is-sold .hr-mid { opacity: 0.55; }

/* ——— Flat-label thumbs in the lists (home record + shop ledger) ———
   The image replaces the entry number. On hover or keyboard focus the row
   itself opens: the label's height animates and the row grows with it, so the
   larger label never covers the name, the meta or the price.

   This is the one place the lists animate a layout property. A transform grow
   would be cheaper, but a transform cannot make the row's neighbours move out
   of the way, which is the whole point here. One row animates at a time.

   The number column is sized to hold the *enlarged* label (80px), so the grow
   is purely vertical — no horizontal reflow, and the columns stay aligned
   across rows whether a row has a label or only its number. */
.label-thumb {
	display: block;
	height: 48px;
	width: auto;
	filter: drop-shadow(0 1px 3px rgba(22, 18, 14, 0.28));
	transition: height 220ms ease, filter 220ms ease;
}
/* Rows carrying a label centre their columns, so the name and price sit
   against the middle of the open label rather than riding its top edge.
   (Home Record's own list stopped using this hover-grow thumb 2026-08-22 —
   its label now opens in the row's expand panel instead — so this is the
   shop ledger's rule only now.) */
.ledger-line:has(.label-thumb) { align-items: center; }

.ledger-row:hover .label-thumb,
.ledger-row:focus-within .label-thumb {
	height: 96px;
	filter: drop-shadow(0 4px 12px rgba(22, 18, 14, 0.30));
}
.is-sold .label-thumb { opacity: 0.55; }

.hr-soldout {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--signal-red);
	text-align: right;
	white-space: nowrap;
	padding-right: 0 !important;
}
/* Left-aligned stat cells (Mike, 2026-08-22): a thin rule above a small
   label, a big number underneath — order in the markup is label then
   number to match. Count varies (2-4 depending which stats have data), so
   auto-fit rather than a fixed 3-up grid. */
.hr-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
	gap: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--50, 64px);
	margin-top: var(--wp--preset--spacing--50, 64px);
	text-align: left;
}
.hr-stats .stat {
	border-top: 1px solid var(--wp--preset--color--brass);
	padding-top: var(--wp--preset--spacing--20, 16px);
}
.hr-stats .n {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1;
	/* fixed-width digits — without this a counting number shivers as the
	   glyph widths change on every frame */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.hr-stats .l {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	max-width: 22ch;
}
.hr-foot { margin-top: var(--wp--preset--spacing--40, 40px); text-align: center; }
.hr-foot .wp-block-button__link { text-decoration: none; }

/* ——— The record so far: proof strip, merged with Our Belief above ———
   Renders after the thesis now (Mike, 2026-08-20), not before it — the
   belief, then the proof of it, same ink band, no seam between them. */
.home-proof {
	background: var(--wp--preset--color--ink);
	padding: 64px var(--wp--preset--spacing--50, 64px);
}
/* rev 3 (2026-09-03): centred under the oxblood belief band, like the mockup.
   Number first, label beneath, no top rules — the stats read as three figures,
   not a table. */
.home-proof-inner { max-width: 1240px; margin: 0 auto; }
.home-proof .hr-stats {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	max-width: 900px;
	margin: 0 auto;
	gap: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--30, 24px);
	text-align: center;
	color: var(--wp--preset--color--ivory);
}
.home-proof .hr-stats .stat { display: flex; flex-direction: column; border-top: 0; padding-top: 0; }
.home-proof .hr-stats .n { order: 1; color: var(--wp--preset--color--gold); font-size: clamp(40px, 4.5vw, 56px); letter-spacing: 0.04em; }
.home-proof .hr-stats .l {
	order: 2;
	margin: 12px auto 0;
	font-size: 10px;
	letter-spacing: 0.3em;
	color: var(--wp--preset--color--paper);
	opacity: 0.7;
}
.home-proof-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--20, 16px);
	margin: 44px auto 0;
	max-width: 1240px;
}
.home-proof-cta .next {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(21px, 2vw, 28px);
	line-height: 1.3;
	color: var(--wp--preset--color--ivory);
}
.home-proof-cta .wp-block-button__link { text-decoration: none; }
/* Same ink ground, no gap — the thesis and the stats below it read as one band.
   A darker "cellar" ground with a gold hairline was tried on 2026-08-29 to make
   the numbers their own block, and cut: two dark bands meeting looked worse than
   one. The numbers stay here. */
.home-manifesto + .home-proof { margin-top: 0; }

/* manifesto — rev 3 (Mike, 2026-09-03: "I like this style/layout/design for
   the belief part better than what we have"). Ported from the Linen & Oxblood
   mockup (design/mockups/home-linen-oxblood.html): everything centred, the body
   line at reading size and the thesis in Cinzel caps. The washed tasting-bench
   photograph (rev 2, 2026-08-29 → 09-01) came off with it; belief-tasting.webp
   stays in assets/img, unused.
   rev 4 (Mike, 2026-09-03, later): the ground is ink, not red. The mockup's
   oxblood band was tried at 80/20 and then 50/50 red-to-ink and both read as
   "jarring red"; Mike asked for "one of the blacks". Ink also lets the band run
   straight into the proof stats beneath it with no seam, which is how the two
   were first designed (see .home-manifesto + .home-proof below). */
.home-manifesto {
	position: relative;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	margin-top: var(--wp--preset--spacing--60, 104px);
	padding: 96px var(--wp--preset--spacing--50, 64px);
	text-align: center;
}
/* gold hairline along the top edge, where the band meets the paper */
.home-manifesto::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: var(--wp--preset--color--gold);
	opacity: 0.5;
}
.home-manifesto-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
/* rev 4: "Our Belief" is a heading, not an eyebrow (Mike: "should be a heading,
   not so small"). Same Cinzel size as every other section label, centred, set
   in gold-light so it reads as the title over the paper body and ivory thesis. */
.home-manifesto .home-label {
	display: block;
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--gold-light);
}
.home-manifesto p {
	font-size: clamp(19px, 1.7vw, 24px);
	line-height: 1.45;
	margin: 26px auto 0;
	max-width: 30em;
	opacity: 0.92;
}
.home-manifesto p.thesis {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(21px, 2vw, 28px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.35;
	max-width: none;
	margin-top: 34px;
	opacity: 1;
	color: var(--wp--preset--color--ivory);
}

/* ——— Join form: hero inline capture and the coupon reveal ——— */
/* stacked: field, then button beneath it */
.join-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.join-form input[type="email"] {
	width: 100%;
	min-width: 0;
	/* without this the 16px padding sits outside the width and the field
	   renders 34px wider than the button stacked beneath it */
	box-sizing: border-box;
	background: rgba(245, 239, 226, 0.10);
	border: 1px solid var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
	padding: 0 16px;
	min-height: 52px;
	font-size: 16px; /* under 16px iOS zooms the page on focus */
	border-radius: 0;
}
.join-form input[type="email"]::placeholder { color: var(--wp--preset--color--paper); opacity: 0.8; }
.join-form button { min-height: 52px; width: 100%; }
.join-fine {
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	opacity: 0.75;
	max-width: 52ch;
}
/* Hero: the $50 CTA is the page's primary ask, sized above the shared button
   floor, with its fine print centred under the full width of the button.
   The width has to be restated (Mike, 2026-08-31): .join-fine is a sibling of
   .join-form, not a child, so `max-width: none` had it centring on the whole
   hero column and sitting visibly right of the button it belongs to. */
.join-hero .join-form button { min-height: 64px; font-size: var(--wp--preset--font-size--base); padding: 0.9em 2em; }
.join-hero .join-fine { text-align: center; max-width: 420px; }

.join-reward { max-width: 480px; }
.jr-lede { margin: 0 0 var(--wp--preset--spacing--20, 16px); font-size: var(--wp--preset--font-size--lead); }
.jr-codebox {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px dashed var(--wp--preset--color--gold);
	background: rgba(210, 166, 60, 0.10);
}
.jr-code {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 0.24em;
	text-indent: 0.24em; /* balance the trailing letter-space */
	color: var(--wp--preset--color--gold-light);
	padding: 14px 16px;
	min-height: 56px;
	word-break: break-all;
}
.jr-copy { min-height: 56px; border-left: 1px solid var(--wp--preset--color--gold); flex: 0 0 auto; }
.jr-fine {
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	opacity: 0.8;
}
.jr-status { margin: 8px 0 0; font-size: 12px; color: var(--wp--preset--color--gold-light); min-height: 1em; }

/* the foot instance sits on ink and is centred with the rest of that section */
.join-foot .join-form, .join-foot .join-reward { margin-inline: auto; }
.join-foot .join-fine, .join-foot .jr-fine, .join-foot .jr-lede, .join-foot .jr-status { text-align: center; }

/* section CTAs — quieter than the gold signup button so it stays the loudest action */
.home-sec-cta { text-align: center; margin-top: var(--wp--preset--spacing--40, 40px); }
/* SECONDARY tier (rev 3) — gold outline on transparent. The edge was brass,
   which is a hairline colour and never an affordance; the lettering is gold-dark
   because plain gold on cream is 2.4:1 and unreadable at this size. */
.home-sec-cta .wp-block-button__link {
	display: inline-block;
	background: transparent;
	color: var(--wp--preset--color--gold-dark);
	border: 1px solid var(--wp--preset--color--gold);
	text-decoration: none;
}
.home-sec-cta .wp-block-button__link:hover, .home-sec-cta .wp-block-button__link:focus-visible {
	/* Same invert as every other button so hover reads as one language — the
	   gold fill arrives from --btn-fill, so the lettering has to go to ink, not
	   to gold-light, or it disappears into the pour. */
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
}

/* archivists — left-aligned (Mike, 2026-08-22), matching the rest of the page */
.home-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50, 64px); text-align: left; }
/* Square, hairline-framed — a filed portrait, not a social-app circle. */
.home-founders .avatar { margin: 0 0 var(--wp--preset--spacing--30, 24px); max-width: 300px; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid rgba(156, 122, 44, 0.35); border-radius: 50%; }
.home-founders .avatar img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.home-founders h3 { font-size: clamp(26px, 2.6vw, 34px); margin: 0 0 var(--wp--preset--spacing--10, 8px); }
.home-founders .role {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-accent);
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.home-founders .bio { max-width: 44ch; margin: 0; font-size: var(--wp--preset--font-size--lead); line-height: 1.55; }

/* three release types — the answer to "what is this?", stated once, flat */
.home-types { margin-top: var(--wp--preset--spacing--50, 64px); border-top: 1px solid var(--wp--preset--color--brass); padding-top: var(--wp--preset--spacing--30, 24px); }
.home-types-lede {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
	text-align: center;
}
.home-types dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40, 40px); margin: 0; }
.home-types .type { text-align: center; }
.home-types dt { font-family: var(--wp--preset--font-family--display); font-size: 24px; line-height: 1.2; margin-bottom: 8px; }
.home-types dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--umber); max-width: 34ch; margin-inline: auto; }

/* reassurance — the guarantee was on this page zero times before now */
.signup-assure {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--wp--preset--color--umber);
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
}
.signup-assure { color: var(--wp--preset--color--oak); text-align: center; max-width: 60ch; margin-inline: auto; }
.signup-assure a { color: var(--wp--preset--color--gold-light); text-underline-offset: 0.2em; }

/* the comparable price, carried onto every ledger row */
.hr-comparable {
	display: block;
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin-top: 3px;
}



/* drinking */
.home-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30, 24px); }
.home-shots .frame { margin: 0 0 var(--wp--preset--spacing--20, 16px); aspect-ratio: 4 / 5; border: 1px solid var(--wp--preset--color--brass); background: var(--wp--preset--color--paper-deep); overflow: hidden; }
.home-shots .frame img { width: 100%; height: 100%; object-fit: cover; }
.home-shots .shot { text-align: center; }
.home-shots blockquote { font-style: italic; font-size: var(--wp--preset--font-size--lead); line-height: 1.5; margin: 0 auto var(--wp--preset--spacing--10, 8px); border: 0; padding: 0; max-width: 34ch; }
.home-shots cite {
	font-family: var(--wp--preset--font-family--ledger);
	font-style: normal;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
}
.home-shots .ph-credit { display: block; font-size: 11px; margin-top: 2px; }

/* signup */
.home-signup {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	margin-top: var(--wp--preset--spacing--60, 104px);
	margin-bottom: 0;
	padding: var(--wp--preset--spacing--60, 104px) var(--wp--preset--spacing--40, 40px);
}
/* Bottom CTA stays centered (Mike, 2026-08-22) — everything else on the page
   went left-aligned except this closing signup block. */
.home-signup-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.home-signup h2 { margin: 0 0 var(--wp--preset--spacing--30, 24px); }
.home-signup .offer { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; max-width: 52ch; margin: 0 auto var(--wp--preset--spacing--40, 40px); }
.signup-form { display: flex; gap: var(--wp--preset--spacing--20, 16px); max-width: 520px; flex-wrap: wrap; margin: 0 auto; justify-content: center; }
.signup-form input[type="email"] {
	flex: 1 1 260px;
	padding: 16px 24px;
	border: 1px solid var(--wp--preset--color--paper);
	background: transparent;
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	border-radius: 0;
}
.signup-form input[type="email"]::placeholder { color: var(--wp--preset--color--paper); opacity: 0.8; }
.signup-thanks {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--gold-light);
	margin: 0;
}
.home-signup .fine {
	margin: var(--wp--preset--spacing--30, 24px) 0 0;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
}

@media (max-width: 782px) {
	.home-hero { min-height: 70vh; }
	.home-hero::after { background: rgba(35, 32, 26, 0.62); }
	.home-hero-bg { object-position: 68% center; }
	.home-hero-copy { padding: var(--wp--preset--spacing--60, 104px) var(--wp--preset--spacing--30, 24px) var(--wp--preset--spacing--50, 64px); max-width: none; }
	.home-sec { padding-top: var(--wp--preset--spacing--50, 64px); }
	.home-featured, .home-founders { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--40, 40px); }
	/* stacked: the panel is only as tall as the label plus its padding */
	.hf-img.is-flat > a { width: min(100%, 340px); }
	.home-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hr-stats { gap: var(--wp--preset--spacing--30, 24px); }
	.hr-summary { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; padding: var(--wp--preset--spacing--30, 24px) 0; }
	.hr-mid { display: none; }
	/* The dotted rule and "Entry No" label are the hero treatment's flourish —
	   at this width just the number earns its place. */
	.hr-no .dots, .hr-no .lab { display: none; }
	.hr-no .no { font-size: 17px; }
	.hr-name { font-size: 23px; }
	.hr-price { font-size: 17px; }
	.home-manifesto { margin-top: var(--wp--preset--spacing--50, 64px); padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--30, 24px); }
	.home-proof { padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--30, 24px); }
	.jr-code { font-size: 18px; letter-spacing: 0.18em; text-indent: 0.18em; }
	.home-types dl { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30, 24px); }
	.home-signup { margin-top: var(--wp--preset--spacing--50, 64px); padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--30, 24px); }
}

/* ——— Home (legacy masthead — superseded by home v5, kept for older pages) ——— */
.masthead {
	padding-block: var(--wp--preset--spacing--50, 64px);
	max-height: 40vh; /* caps height so the ledger is visible on 1080p; uncapped on mobile where the h1 wraps */
}
@media (max-width: 782px) {
	.masthead { max-height: none; }
}
.masthead h1 {
	font-size: var(--wp--preset--font-size--display);
	max-width: 18ch;
}
.recently-filed h2 {
	font-family: var(--wp--preset--font-family--ledger);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--umber);
}
.archive-link { margin-top: var(--wp--preset--spacing--40, 40px); }

/* ——— Archive page hero reuses the PDP strip hero ——— */
.arch-page-hero { margin-bottom: var(--wp--preset--spacing--50, 64px); }
.archive-index { padding-bottom: var(--wp--preset--spacing--60, 104px); }

/* ——— Woo surfaces: cart, checkout, account, notices (canon pass 2026-07-24) ——— */
/* Notices: flat linen, brass rule, no traffic-light colors. */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner {
	background: var(--wp--preset--color--paper-deep);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--brass);
	border-radius: 0;
}
.wc-block-components-notice-banner.is-error { border-color: var(--wp--preset--color--red-accent); }

/* Block cart/checkout: our type, our rules. */
.wc-block-cart, .wc-block-checkout, .wc-block-components-sidebar-layout {
	font-family: var(--wp--preset--font-family--text);
}
.wc-block-cart-items__header,
.wc-block-components-checkout-step__title,
.wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--wp--preset--font-family--ledger);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.wc-block-cart-items__row, .wc-block-components-totals-item {
	border-color: var(--wp--preset--color--brass);
}
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-quantity-selector,
select {
	border-radius: 0 !important;
	border-color: var(--wp--preset--color--brass);
}

/* Classic account area. */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--wp--preset--color--brass);
}
.woocommerce-MyAccount-navigation a {
	display: block;
	padding: var(--wp--preset--spacing--20, 16px) 0;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation .is-active a { color: var(--wp--preset--color--gold-dark); font-weight: 700; }
.woocommerce-MyAccount-content table.shop_table {
	border-collapse: collapse;
	width: 100%;
	border: 0;
}
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--brass);
	padding: var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--20, 16px) var(--wp--preset--spacing--20, 16px) 0;
	text-align: left;
}
.woocommerce-MyAccount-content table.shop_table thead th {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	font-weight: 400;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text {
	border: 1px solid var(--wp--preset--color--brass);
	border-radius: 0;
	background: var(--wp--preset--color--paper);
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--text);
}
.woocommerce-form-login, .woocommerce-form-register {
	border: 1px solid var(--wp--preset--color--brass) !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--paper);
}

/* ——— Woo block controls ———
 * The global `button { … }` rule above gives every <button> the ink-outline
 * treatment (ledger uppercase, 1px border, 0.75em/2em padding). WooCommerce's
 * own block CSS already resets border/padding/margin to 0 on the cart
 * quantity stepper and the remove-item link (those declarations carry a
 * class selector, which outranks our bare element selector), but neither
 * Woo nor our button rule touches typography for them, so the ledger
 * font-family/uppercase/letter-spacing still leaks through onto the +/-/×
 * glyphs. The "Add a coupon" / "Order summary" disclosure toggle
 * (.wc-block-components-panel__button) gets no reset from Woo at all, so it
 * was rendering as a full boxed ink-outline button instead of a plain text
 * toggle. Primary CTAs (Proceed to Checkout, Place Order, Apply coupon) use
 * WooCommerce's Button component, which carries the `wp-element-button`
 * class and picks up the same ink-outline look from theme.json — left as-is
 * on purpose.
 */
.wc-block-components-quantity-selector__button,
.wc-block-cart-item__remove-link,
.wc-block-components-panel__button {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}
.wc-block-components-panel__button {
	border: 0;
	background: transparent;
	padding: 0;
}

/* ——— Block cart + checkout: layout (2026-08-31) ———
 * Both blocks were sitting at the theme's 720px contentSize, which left the
 * checkout sidebar 252px wide and the order-summary name column 46px — wide
 * enough to stack a wine name one or two letters per line. Woo splits the
 * sidebar layout by percentage, so the only real fix is to let the block have
 * the page's wide measure. 1000px is the same measure WooCommerce's own block
 * theme stylesheet gives the cart/checkout/account page title, so the form
 * column lines up with the heading above it.
 */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
	width: 100%;
	max-width: 1000px;
	margin-inline: auto;
}

/* ——— Checkout order summary ——— */
/* The panel is a paper record laid on the desk: brass rule, square corners. */
.wp-block-woocommerce-checkout-order-summary-block {
	background: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--brass);
	border-radius: 0;
}
.wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
}
.wc-block-components-order-summary-item:not(:last-child) {
	border-bottom: 1px solid var(--wp--preset--color--brass);
}
/* The line item is image | name | price. Only the middle column should absorb
 * the leftover space, and it needs min-width:0 or the long product name sets
 * the column's floor and squeezes everything. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 12px 16px 16px;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	width: 56px;
	flex: 0 0 56px;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	width: 56px;
	max-width: 56px;
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	flex: 0 1 auto;
	max-width: 40%;
	font-size: var(--wp--preset--font-size--base);
}
/* Courier Prime never sets a wine name — it is the metadata face. The name is
 * body type; the per-unit price beneath it is the metadata. */
.wc-block-components-order-summary .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}
.wc-block-cart-item__prices {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--umber);
}
/* Woo prints the product short description under every cart and summary line,
 * cut off mid-sentence with an ellipsis. It is sell copy for a decision made
 * two pages ago, and in the checkout sidebar it is a wall of it. */
.wc-block-components-product-metadata__description {
	display: none;
}
/* Stock sale badge is a filled grey pill. Ours is a ledger annotation. */
.wc-block-components-sale-badge {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
}
/* The quantity bubble inherits `background: currentColor` from Woo, which
 * paints it in whatever the surrounding text colour happens to be. Pin it. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--ledger);
}
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: var(--wp--preset--color--ivory);
}
/* Coupon disclosure sits between the items and the totals; give it the same
 * brass rule the rows use instead of Woo's grey. */
.wc-block-components-totals-wrapper {
	border-color: var(--wp--preset--color--brass);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PDP v6 — torn-label hero (2026-08-16)
   Built from design/mockups/pdp-v5-torn-label.html. Replaces the .pdpx-plate
   split. The older .pdpx-plate / .pdpx-dark rules above are now unused by the
   PDP and are kept only until the mockups that still reference them are retired.
   ═══════════════════════════════════════════════════════════════════════════ */

.pdpx-hero6 {
	position: relative;
	background: var(--wp--preset--color--ink);
	min-height: min(76vh, 760px);
	display: flex;
	align-items: stretch;
	overflow: hidden;
	isolation: isolate;
}
/*
 * The art holds the left ~62%; the panel lives in the remaining span. object-fit
 * keeps the bottle from stretching when the viewport is wider than the file.
 * Width is also capped to a 16:9-ish ceiling: past roughly a 2190px viewport,
 * 62% of full width would otherwise grow wider than the pinned min-height, and
 * object-fit:cover would crop the photo's top and bottom instead of its sides.
 *
 * Selector is qualified as `.pdpx-hero6 .pdpx-hero6-bg`, not the bare class
 * (Mike, 2026-08-21 fix) — WooCommerce's own woocommerce-layout.css ships
 * `.woocommerce img { height: auto; max-width: 100% }`, which has one more
 * class in its selector than a bare `.pdpx-hero6-bg` and so wins on
 * specificity regardless of source order. `height: 100%` was silently losing
 * to that `height: auto`, so the photo sized itself by its own aspect ratio
 * instead of filling the section — confirmed against the live DOM, where the
 * rendered height exactly equalled width ÷ 1.79 (the photo's own ratio) at
 * every viewport width tested, never the section's actual height. It went
 * unnoticed on Taplin's photo only because its squarer aspect ratio happened
 * to overshoot the section and get trimmed by overflow:hidden — masking the
 * bug rather than avoiding it. Qualifying the selector adds a class, which
 * outranks WooCommerce's rule without needing !important. Verified against
 * the live page with a headless browser before shipping this fix.
 */
/*
 * object-position is anchored to the SUBJECT, not the centre (Mike, 2026-08-30).
 *
 * The section stretches to whatever height the buy panel needs, which on a
 * laptop is around 1500px. The art column is ~1240px wide, so the container
 * ends up close to square while the photograph is 21:9. object-fit:cover then
 * scales the image to fill that height and throws away about a third of the
 * frame off EACH side. Centred, that crop keeps the middle — which is the one
 * part of a hero that is deliberately empty, because the buy panel sits over
 * the right and the bottle stands left of centre. Entry 031 lost its bottle
 * entirely this way; 029 survived only because its bottle happens to be centred.
 *
 * Anchoring at 24% keeps the crop window over the bottle at every height, with
 * margin on both sides from 1280x800 up to 2560x1440 (checked by calculation
 * against the panel-driven section height, not by eye).
 *
 * That number is a contract with the artwork: a hero image places its bottle in
 * the left third, centred near 28% of frame width, with the right half empty for
 * the buy panel. The `hero_image` field says so, and it is how they are generated.
 * A hero composed some other way needs --hero-focus set to match, or it will crop
 * to the wrong part of the frame.
 */
.pdpx-hero6 .pdpx-hero6-bg {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(62%, 136vh, 1360px);
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-focus, 24%) 50%;
	z-index: 0;
}
/* Desktop-portrait mode (inc/pdp-hero.php): the 4:5 frame has the bottle centred,
   so the crop anchors on the centre, a touch high so the cork survives. */
.pdpx-hero6-pic.is-portrait-desktop .pdpx-hero6-bg { object-position: 50% 42%; }
/* The <picture> wrapper must not take part in layout: the <img> inside it is
   the positioned element, and an inline wrapper would add a line box under it
   on phones. A hero video, when set, is a second .pdpx-hero6-bg layered over
   the still; until its first frame decodes it is transparent, so the still
   shows through. */
.pdpx-hero6 .pdpx-hero6-pic { display: contents; }
/* Two jobs: darken the ink side so the paper panel has something to sit against,
   and feather the photo's right edge into it so there is no hard seam. */
.pdpx-hero6-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(35, 32, 26, 0.55) 0%, rgba(35, 32, 26, 0) 28%,
			rgba(35, 32, 26, 0.72) 54%, var(--wp--preset--color--ink) 66%),
		linear-gradient(0deg, rgba(35, 32, 26, 0.6) 0%, rgba(35, 32, 26, 0) 42%);
}
.pdpx-hero6-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	/* Wider buy box (Mike, 2026-08-20) — matches the board's own 50/50 split
	   rather than the narrower fixed column this had settled into. The left
	   column used to hold the vintage/appellation caption; with that gone
	   (Mike, 2026-08-31) the panel is the only child, so the track is declared
	   at 50% and pushed right rather than left as a lone 1fr column would. */
	grid-template-columns: minmax(0, 50%);
	justify-content: end;
	gap: var(--wp--preset--spacing--50, 64px);
	align-items: end;
	padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--40, 40px);
}
/* ── The label panel: the buy box, cut like a label ── */
.pdpx-lp {
	position: relative;
	align-self: center;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	padding: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--40, 40px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
/* Torn top and bottom, straight die-cut sides — the shipped label's edge.
   The two polygons are TRACED FROM THE REAL DIE LINE (the bottleshot skill's
   assets/label_dieline_mask.png, extracted from the 035 artwork's DIE CUT layer):
   160 samples across the width, nick depth kept in proportion, corners squared.
   The real edge is nearly straight with a slow waver, one deeper bite and a few
   small nicks — its deepest nick is 1.85% of the label width, so the 14px band
   below is that depth on an ~760px panel. Mike, 2026-09-14: the earlier 48-tooth
   zigzag read as a scalloped border, "make it look like what we have on our real
   labels". Regenerate with scratch/die_profile.json → polygon if the die changes. */
.pdpx-lp::before,
.pdpx-lp::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 14px;
	background: var(--wp--preset--color--paper);
	pointer-events: none;
}
.pdpx-lp::before {
	top: -13px;
	clip-path: polygon(0% 100%, 0.31% 16.69%, 0.93% 14.26%, 1.54% 11.89%, 2.18% 11.89%, 2.8% 11.89%, 3.42% 10.7%, 4.06% 5.94%, 4.67% 3.57%, 5.29% 2.38%, 5.93% 3.57%, 6.55% 4.75%, 7.16% 5.94%, 7.8% 8.32%, 8.42% 9.51%, 9.04% 8.32%, 9.68% 7.13%, 10.29% 7.13%, 10.91% 7.13%, 11.55% 7.13%, 12.17% 7.13%, 12.81% 7.13%, 13.42% 7.13%, 14.04% 8.32%, 14.68% 8.32%, 15.3% 10.7%, 15.91% 11.89%, 16.55% 13.07%, 17.17% 11.89%, 17.79% 13.07%, 18.43% 26.2%, 19.04% 17.88%, 19.66% 14.26%, 20.3% 11.89%, 20.92% 10.7%, 21.53% 9.51%, 22.17% 8.32%, 22.79% 7.13%, 23.41% 7.13%, 24.05% 7.13%, 24.66% 8.32%, 25.3% 9.51%, 25.92% 9.51%, 26.54% 8.32%, 27.18% 5.94%, 27.79% 4.75%, 28.41% 5.94%, 29.05% 5.94%, 29.67% 7.13%, 30.28% 8.32%, 30.92% 8.32%, 31.54% 8.32%, 32.16% 9.51%, 32.8% 15.51%, 33.41% 28.58%, 34.03% 29.77%, 34.67% 28.58%, 35.29% 35.71%, 35.91% 61.91%, 36.54% 100.0%, 37.16% 77.42%, 37.8% 34.52%, 38.42% 22.64%, 39.03% 20.26%, 39.67% 30.96%, 40.29% 16.69%, 40.91% 15.51%, 41.55% 16.69%, 42.16% 25.01%, 42.78% 14.26%, 43.42% 10.7%, 44.04% 9.51%, 44.66% 7.13%, 45.29% 5.94%, 45.91% 4.75%, 46.53% 4.75%, 47.17% 4.75%, 47.78% 4.75%, 48.4% 4.75%, 49.04% 5.94%, 49.66% 4.75%, 50.3% 5.94%, 50.91% 19.07%, 51.53% 29.77%, 52.17% 25.01%, 52.79% 16.69%, 53.41% 8.32%, 54.05% 9.51%, 54.66% 14.26%, 55.28% 19.07%, 55.92% 19.07%, 56.53% 17.88%, 57.15% 17.88%, 57.79% 17.88%, 58.41% 20.26%, 59.03% 23.82%, 59.66% 29.77%, 60.28% 36.9%, 60.9% 27.39%, 61.54% 27.39%, 62.16% 28.58%, 62.8% 28.58%, 63.41% 27.39%, 64.03% 26.2%, 64.67% 26.2%, 65.28% 23.82%, 65.9% 19.07%, 66.54% 11.89%, 67.16% 0.0%, 67.78% 0.0%, 68.42% 1.19%, 69.03% 4.75%, 69.65% 10.7%, 70.29% 15.51%, 70.91% 14.26%, 71.52% 13.07%, 72.16% 13.07%, 72.78% 13.07%, 73.4% 9.51%, 74.04% 7.13%, 74.65% 5.94%, 75.29% 4.75%, 75.91% 4.75%, 76.53% 4.75%, 77.17% 5.94%, 77.78% 7.13%, 78.4% 9.51%, 79.04% 9.51%, 79.66% 8.32%, 80.27% 5.94%, 80.91% 4.75%, 81.53% 4.75%, 82.15% 5.94%, 82.79% 5.94%, 83.4% 7.13%, 84.02% 7.13%, 84.66% 7.13%, 85.28% 5.94%, 85.89% 5.94%, 86.53% 5.94%, 87.15% 5.94%, 87.79% 5.94%, 88.41% 5.94%, 89.02% 5.94%, 89.66% 5.94%, 90.28% 7.13%, 90.9% 8.32%, 91.54% 9.51%, 92.15% 10.7%, 92.77% 11.89%, 93.41% 14.26%, 94.03% 17.88%, 94.64% 15.51%, 95.28% 15.51%, 95.9% 21.45%, 96.52% 30.96%, 97.16% 27.39%, 97.77% 15.51%, 98.39% 5.94%, 99.03% 4.75%, 99.65% 8.32%, 100% 100%);
}
.pdpx-lp::after {
	bottom: -13px;
	clip-path: polygon(0% 0%, 0.31% 96.83%, 0.93% 96.83%, 1.54% 88.91%, 2.18% 79.34%, 2.8% 90.50%, 3.42% 92.08%, 4.06% 92.08%, 4.67% 93.66%, 5.29% 95.25%, 5.93% 95.25%, 6.55% 96.83%, 7.16% 98.42%, 7.8% 98.42%, 8.42% 100.00%, 9.04% 100.00%, 9.68% 100.00%, 10.29% 100.00%, 10.91% 100.00%, 11.55% 100.00%, 12.17% 100.00%, 12.81% 98.42%, 13.42% 98.42%, 14.04% 98.42%, 14.68% 96.83%, 15.3% 96.83%, 15.91% 96.83%, 16.55% 95.25%, 17.17% 95.25%, 17.79% 95.25%, 18.43% 95.25%, 19.04% 95.25%, 19.66% 95.25%, 20.3% 95.25%, 20.92% 95.25%, 21.53% 95.25%, 22.17% 95.25%, 22.79% 96.83%, 23.41% 92.08%, 24.05% 96.83%, 24.66% 96.83%, 25.3% 96.83%, 25.92% 96.83%, 26.54% 96.83%, 27.18% 96.83%, 27.79% 96.83%, 28.41% 96.83%, 29.05% 96.83%, 29.67% 96.83%, 30.28% 96.83%, 30.92% 96.83%, 31.54% 96.83%, 32.16% 96.83%, 32.8% 96.83%, 33.41% 96.83%, 34.03% 96.83%, 34.67% 96.83%, 35.29% 96.83%, 35.91% 96.83%, 36.54% 96.83%, 37.16% 96.83%, 37.8% 96.83%, 38.42% 96.83%, 39.03% 96.83%, 39.67% 96.83%, 40.29% 96.83%, 40.91% 96.83%, 41.55% 96.83%, 42.16% 96.83%, 42.78% 96.83%, 43.42% 96.83%, 44.04% 96.83%, 44.66% 96.83%, 45.29% 96.83%, 45.91% 96.83%, 46.53% 96.83%, 47.17% 96.83%, 47.78% 96.83%, 48.4% 96.83%, 49.04% 96.83%, 49.66% 96.83%, 50.3% 96.83%, 50.91% 96.83%, 51.53% 96.83%, 52.17% 90.50%, 52.79% 77.75%, 53.41% 42.91%, 54.05% 27.00%, 54.66% 0.00%, 55.28% 30.17%, 55.92% 46.08%, 56.53% 46.08%, 57.15% 63.50%, 57.79% 80.99%, 58.41% 87.33%, 59.03% 87.33%, 59.66% 92.08%, 60.28% 98.42%, 60.9% 100.00%, 61.54% 98.42%, 62.16% 96.83%, 62.8% 96.83%, 63.41% 96.83%, 64.03% 98.42%, 64.67% 95.25%, 65.28% 92.08%, 65.9% 93.66%, 66.54% 93.66%, 67.16% 95.25%, 67.78% 95.25%, 68.42% 95.25%, 69.03% 95.25%, 69.65% 96.83%, 70.29% 98.42%, 70.91% 98.42%, 71.52% 98.42%, 72.16% 98.42%, 72.78% 96.83%, 73.4% 96.83%, 74.04% 96.83%, 74.65% 96.83%, 75.29% 96.83%, 75.91% 90.50%, 76.53% 76.17%, 77.17% 52.41%, 77.78% 66.67%, 78.4% 66.67%, 79.04% 61.92%, 79.66% 55.58%, 80.27% 54.00%, 80.91% 69.83%, 81.53% 77.75%, 82.15% 84.16%, 82.79% 87.33%, 83.4% 88.91%, 84.02% 90.50%, 84.66% 93.66%, 85.28% 95.25%, 85.89% 96.83%, 86.53% 96.83%, 87.15% 96.83%, 87.79% 95.25%, 88.41% 95.25%, 89.02% 95.25%, 89.66% 96.83%, 90.28% 98.42%, 90.9% 98.42%, 91.54% 98.42%, 92.15% 95.25%, 92.77% 93.66%, 93.41% 90.50%, 94.03% 88.91%, 94.64% 85.75%, 95.28% 71.42%, 95.9% 77.75%, 96.52% 96.83%, 97.16% 96.83%, 97.77% 96.83%, 98.39% 96.83%, 99.03% 96.83%, 99.65% 96.83%, 100% 0%);
}

.pdpx-lp-entry { text-align: center; margin-bottom: var(--wp--preset--spacing--30, 24px); }
.pdpx-lp-entry .no {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(34px, 4vw, 46px);
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--red-accent);
	margin: 0;
}
.pdpx-lp-entry .dots {
	border: 0;
	border-top: 1px dotted var(--wp--preset--color--red-accent);
	opacity: 0.6;
	width: 110px;
	margin: 6px auto;
}
.pdpx-lp-entry .lab {
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin: 0;
}
.pdpx-lp-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--ink);
	margin: 0 0 8px;
}
.pdpx-lp-sub {
	text-align: center;
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--umber);
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.pdpx-lp-desc {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	margin: 0;
}
.pdpx-lp-more { margin: 8px 0 0; font-size: 14px; }
.pdpx-lp-more a { color: var(--wp--preset--color--gold-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.pdpx-lp-rule {
	border: 0;
	border-top: 1px solid rgba(156, 122, 44, 0.4);
	margin: var(--wp--preset--spacing--30, 24px) 0;
}
.pdpx-lp-score {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
/* The pricing block, tier fieldset, cart button and fine print keep their
   existing rules — they came across from the old buy column unchanged, and those
   selectors are unscoped, so they apply here as-is. Only the widths need
   releasing: they carried a 460px cap sized for the old wide column, which
   inside a 430px panel would leave the tier rows short of its right edge. */
.pdpx-lp .pdpx-pricing,
.pdpx-lp .pdpx-order { max-width: none; }
.pdpx-lp .pdpx-pricing { text-align: center; }
.pdpx-lp .pdpx-fine { margin-bottom: 0; }
.pdpx-lp .pdpx-bill { margin-bottom: 0; }

/* ── Writeup and Record: paper sections under the dark hero ── */
.pdpx-sec-label {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
}
.pdpx-sec-label .no {
	color: var(--wp--preset--color--red-accent);
	margin-right: 12px;
	font-weight: 700;
}
/* Ivory, not paper (Mike, 2026-08-31). He read the cream topbar as "white" and
   wanted this to match it — but the two were already the identical #F5EFE2. The
   topbar only looks brighter because it is a thin strip pinned between the ink
   header and the page, and a light band framed by dark reads lighter than the
   same value spread over a whole section. Matching the measured colour would
   have changed nothing, so the section takes the genuinely lighter token and
   lifts off the paper ground instead. */
/* The hero tears onto this ivory, so the tear is inked in the same value —
   paper (the home page's tear colour) would leave a visible seam. */
.pdpx-hero6 .hero-tear { color: var(--wp--preset--color--ivory); }
.pdpx-writeup,
.pdpx-record {
	background: var(--wp--preset--color--ivory);
	padding: var(--wp--preset--spacing--60, 104px) var(--wp--preset--spacing--40, 40px) 0;
}
.pdpx-writeup-inner,
.pdpx-record-inner { max-width: 1080px; margin: 0 auto; }
.pdpx-record { padding-bottom: var(--wp--preset--spacing--50, 64px); }
.pdpx-record h2 {
	font-size: clamp(28px, 3vw, 38px);
	letter-spacing: 0.06em;
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
}
.pdpx-record-grid {
	display: grid;
	/* Even 50/50 split (Mike, 2026-08-20) — the label flat is a full column,
	   not a fixed-width thumbnail beside the specs. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 64px);
	align-items: start;
}
.pdpx-record-grid.is-specs-only { grid-template-columns: minmax(0, 1fr); }
.pdpx-flat { margin: 0; }
.pdpx-flat img { width: 100%; height: auto; display: block; border: 1px solid rgba(156, 122, 44, 0.35); }
.pdpx-flat figcaption {
	font-size: 14px;
	font-style: italic;
	color: var(--wp--preset--color--umber);
	margin-top: 12px;
}
.pdpx-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 40px);
	/* The older .pdpx-specs rule (~line 1083) still hands this element a brass
	   border-top from the retired .cell layout. It drew a hairline immediately
	   above "The Wine", doubling up with the heading's own underline. Off, per
	   Mike 2026-08-31. Overridden here rather than edited there so the old rule
	   stays intact for anything else still using it. */
	border-top: 0;
}
.pdpx-spec-group h3 {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(156, 122, 44, 0.3);
}
.pdpx-spec-group dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.pdpx-spec-group dt {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	align-self: center;
}
.pdpx-spec-group dd { margin: 0; text-align: right; font-size: 16px; color: var(--wp--preset--color--ink); }
.pdpx-specs .pdpx-redaction-note { grid-column: 1 / -1; margin: 0; }

/* Tabs were coloured for the ink band. On paper they need ink-on-paper values;
   without this the labels are oak-on-cream and the active one is near-invisible. */
.pdpx-writeup .pdpx-tab { color: var(--wp--preset--color--umber); }
.pdpx-writeup .pdpx-tab:hover { color: var(--wp--preset--color--ink); }
.pdpx-writeup .pdpx-tab[aria-selected="true"] {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--gold-dark);
}
.pdpx-writeup .pdpx-tab:focus-visible,
.pdpx-writeup .pdpx-panel:focus-visible { outline-color: var(--wp--preset--color--gold-dark); }
.pdpx-writeup .pdpx-note-title { color: var(--wp--preset--color--ink); }
/* Head row: section label left, tabs right, one baseline (Mike, 2026-09-05).
   The writeup's own tablist overrides the centred, display-size version above
   and, more to the point, the site-wide button plate — a tab is a switch, not
   a call to action, so no fill, no pour, no hairline box. */
.pdpx-writeup .pdpx-note-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px var(--wp--preset--spacing--30, 24px);
	margin: 0 0 var(--wp--preset--spacing--40, 40px);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--brass);
}
.pdpx-writeup .pdpx-note-head .pdpx-sec-label { margin: 0; }
.pdpx-writeup .pdpx-tabs[data-ready] .pdpx-tablist {
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30, 24px);
	margin: 0;
}
.pdpx-writeup .pdpx-tablist .pdpx-tab {
	display: inline-block;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 4px 0 6px;
	min-height: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-indent: 0;
	overflow: visible;
	color: var(--wp--preset--color--umber);
	transition: color 160ms ease, border-color 160ms ease;
}
.pdpx-writeup .pdpx-tablist .pdpx-tab::before { content: none; }
.pdpx-writeup .pdpx-tablist .pdpx-tab:hover,
.pdpx-writeup .pdpx-tablist .pdpx-tab:focus-visible { color: var(--wp--preset--color--ink); }
.pdpx-writeup .pdpx-tablist .pdpx-tab[aria-selected="true"] {
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--gold-dark);
}
/* Scribe says: its own two-column band (Mike, 2026-08-20), not a single
   centred measure — the note runs the section's full width, split into two
   columns so no line stretches past a readable measure. */
.pdpx-writeup .pdpx-note-body {
	color: var(--wp--preset--color--ink);
	max-width: none;
	margin-inline: 0;
	columns: 2;
	column-gap: var(--wp--preset--spacing--60, 104px);
}
.pdpx-writeup .pdpx-note-body p { orphans: 2; widows: 2; }
.pdpx-writeup .pdpx-note-body p:last-child,
.pdpx-writeup .pdpx-note-body .pdpx-sig { break-before: avoid; }
.pdpx-writeup .pdpx-panel-kicker { color: var(--wp--preset--color--gold-dark); }
.pdpx-writeup .pdpx-sig { color: var(--wp--preset--color--umber); }

@media (max-width: 900px) {
	/* The panel stops floating and becomes the block under the art. The photo
	   takes a fixed slice of the viewport so the bottle still reads before the
	   fold instead of collapsing to a letterbox. */
	.pdpx-hero6 { display: block; min-height: 0; }
	/* Same specificity fix as the desktop rule — .pdpx-hero6-bg alone still
	   loses to WooCommerce's `.woocommerce img { height: auto }`. */
	.pdpx-hero6 .pdpx-hero6-bg { position: relative; width: 100%; height: 46vh; }
	/* Phones get the still, never the video (2026-09-05). The <video> ships with
	   preload="none" and no autoplay attribute; a script in render.php turns it
	   on only above the stack breakpoint, so this rule is belt to that braces. */
	.pdpx-hero6 .pdpx-hero6-video { display: none; }
	.pdpx-hero6-scrim {
		background: linear-gradient(0deg, rgba(35, 32, 26, 0.75) 0%, rgba(35, 32, 26, 0) 46%);
	}
	/* The buy panel goes edge to edge on phones (Mike, 2026-09-05: the inset
	   panel left a strip of ink down one side and spilled off the other). It is
	   no longer a label floating over the art; it is the paper block under it,
	   with the torn top edge biting into the photo and no ink gap below, so the
	   page runs photo → paper → paper without a dark seam. The panel's own
	   padding drops to the phone gutter so the stepper and button have room. */
	.pdpx-hero6-inner {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
		gap: 0;
		padding: 0;
	}
	.pdpx-lp {
		margin-top: 0;
		min-width: 0;
		/* Let the grid track size it. `width: 100%` here was the spill Mike saw:
		   the panel is content-box, so 100% + its side padding overran the
		   viewport by the padding, leaving a gutter on the left and a cut-off
		   right edge. */
		width: auto;
		max-width: none;
		box-sizing: border-box;
		padding: var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--30, 24px) var(--wp--preset--spacing--40, 40px);
		box-shadow: none;
	}
	.pdpx-lp::after { display: none; }
	.pdpx-writeup, .pdpx-record { padding-left: var(--wp--preset--spacing--30, 24px); padding-right: var(--wp--preset--spacing--30, 24px); }
	.pdpx-writeup .pdpx-note-body { columns: 1; }
	/* Narrow: label above, tabs below it, both flush left. */
	.pdpx-writeup .pdpx-note-head { flex-direction: column; align-items: flex-start; }
	.pdpx-writeup .pdpx-tabs[data-ready] .pdpx-tablist { justify-content: flex-start; }
	.pdpx-record-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40, 40px); }
	.pdpx-specs { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--30, 24px); }
}

/* ── 2026-08-19 design-review fixes ─────────────────────────────────── */

/* The entry numeral never disappears: on rows with a flat label the thumb
   rides above the number as an addition, not a replacement. */
.hr-no .hr-num { display: block; }
.hr-no.has-label { display: grid; gap: 6px; justify-items: start; }

/* Sticky buybar: the button never wraps, the name truncates instead. */
.pdpx-buybar button { white-space: nowrap; }
.pdpx-buybar .bb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Woo notices used to render raw inside the styled panel. */
.pdpx-lp .woocommerce-message,
.pdpx-lp .woocommerce-info,
.pdpx-lp .woocommerce-error {
	list-style: none;
	margin: var(--wp--preset--spacing--20, 16px) 0 0;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ivory);
	border: 1px solid rgba(156, 122, 44, 0.4);
}
.pdpx-lp .woocommerce-error li { margin: 0; }
.pdpx-lp .woocommerce-message a,
.pdpx-lp .woocommerce-info a,
.pdpx-lp .woocommerce-error a { color: var(--wp--preset--color--gold-dark); }

/* Sold entries: the list capture that used to exist only on the homepage. */
.pdpx-sold-next { margin-top: var(--wp--preset--spacing--20, 16px); }
.pdpx-sold-next > p {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--umber);
}
/* The join form was styled for dark bands; on the paper panel the field
   flips to ink-on-ivory. */
.pdpx-lp .join-block { margin: 0; }
.pdpx-lp .join-form input[type="email"] {
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink);
	border: 1px solid rgba(156, 122, 44, 0.4);
}
.pdpx-lp .join-form input[type="email"]::placeholder { color: var(--wp--preset--color--umber); opacity: 1; }
.pdpx-lp .join-fine { color: var(--wp--preset--color--umber); }
/* The panel reuses the footer variant, which centres itself under the footer's
   centred heading. Here the line above it is set left, so the form, the fine
   print and the reward state line up with it (Mike, 2026-09-06). */
.pdpx-lp .join-foot .join-form,
.pdpx-lp .join-foot .join-reward { margin-inline: 0; }
.pdpx-lp .join-foot .join-fine,
.pdpx-lp .join-foot .jr-fine,
.pdpx-lp .join-foot .jr-lede,
.pdpx-lp .join-foot .jr-status { text-align: left; }

/* A specs-only Record (no flat label uploaded yet) centres instead of
   leaving the right half of the section blank. */
.pdpx-record-grid.is-specs-only .pdpx-specs { max-width: 860px; }

@media (max-width: 782px) {
	/* Once scrolled, the announcement bar yields — chrome was eating ~130px
	   of an 844px viewport before any wine appeared. */
	.arch-sticky.is-condensed .arch-topbar { display: none; }
	/* Guard rails: no paragraph runs edge-to-edge on a phone. */
	/* .home-sec.alignwide (needed above to out-!important WP's centering) is
	   more specific than plain .home-sec, so this has to match it or the
	   padding gets ignored below 782px. */
	.home-sec.alignwide { padding-inline: var(--wp--preset--spacing--30, 24px); }
	.pdpx-archiveband-inner, .pdpx-related { padding-inline: var(--wp--preset--spacing--30, 24px); }
}

@media (max-width: 480px) {
	/* The ledger stops squeezing names into 10-character columns:
	   price files under the name instead of holding a column. */
	.hr-summary { grid-template-columns: 40px minmax(0, 1fr); }
	.hr-price, .hr-soldout { grid-column: 2; text-align: left; margin-top: 2px; }
}

/* Ledger score line — oxblood on cream, per the ledger-with-snippets canon. */
.hr-score {
	display: block;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-accent);
}

/* ── PDP body (Mike, 2026-08-20 — reverting the 2026-08-19 side-by-side
   attempt): Scribe and the Record are each their own full-width paper
   section, stacked — Scribe split into two text columns, the Record split
   50/50 (label left, specs right). Neither section sits beside the other
   at any width. The specs-only fallback (no flat label) keeps its own
   860px-centred treatment further down — nothing extra needed here. */
/* Ivory, matching the two sections it holds — otherwise the wrapper's own
   paper ground shows as a seam under the record. */
.pdpx-body { background: var(--wp--preset--color--ivory); }

/* ── The Critics band (Mike, 2026-09-06): score, critic and quote under the
   writeup. Paper-deep, never ink — the hero already spent the dark. The figure
   reuses the hero's entry-number device (.pdpx-lp-entry: number, dotted rule,
   caption) at a larger size, so the score sits in the record as one more
   catalogued figure rather than a badge. Figure left, quote right; phones
   stack and centre. `.is-brief` = a score with no quote. ── */
.pdpx-critics {
	background: var(--wp--preset--color--paper-deep);
	margin-top: var(--wp--preset--spacing--60, 104px);
	padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--40, 40px) var(--wp--preset--spacing--60, 104px);
	border-top: 1px solid rgba(156, 122, 44, 0.3);
	border-bottom: 1px solid rgba(156, 122, 44, 0.3);
}
.pdpx-critics + .pdpx-record { padding-top: var(--wp--preset--spacing--50, 64px); }
.pdpx-critics-inner { max-width: 1080px; margin: 0 auto; }
.pdpx-critics-grid {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50, 64px);
	align-items: start;
	margin-top: var(--wp--preset--spacing--40, 40px);
}
.pdpx-critics-fig { text-align: center; padding-top: 0.2em; }
.pdpx-critics-fig .no {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(64px, 8vw, 104px);
	line-height: 0.95;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--red-accent);
	margin: 0;
}
.pdpx-critics-fig .dots {
	border: 0;
	border-top: 1px dotted var(--wp--preset--color--red-accent);
	opacity: 0.6;
	width: 110px;
	margin: 10px auto;
}
.pdpx-critics-fig .lab {
	font-family: var(--wp--preset--font-family--display);
	font-size: 11px;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--umber);
	margin: 0;
}
/* A score typed as prose ("Highly recommended") rather than a number. */
.pdpx-critics-typed {
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red-accent);
	margin: 0;
}
.pdpx-critics-quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--text);
	font-style: italic;
	font-size: clamp(22px, 2.4vw, 31px);
	line-height: 1.45;
	color: var(--wp--preset--color--ink);
	max-width: 40ch;
}
.pdpx-critics-quote p { margin: 0; }
.pdpx-critics-quote p + p { margin-top: 0.7em; }
/* The field holds the review bare; the page supplies the marks, and hangs the
   opening one so the first letter lines up with the lines below. */
.pdpx-critics-quote p:first-child { text-indent: -0.42em; }
.pdpx-critics-quote p:first-child::before { content: "\201C"; }
.pdpx-critics-quote p:last-child::after { content: "\201D"; }
.pdpx-critics-by {
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dark);
	margin: var(--wp--preset--spacing--30, 24px) 0 0;
}
.pdpx-critics-by::before { content: "\2014\00a0"; }
.pdpx-critics.is-brief { padding-bottom: var(--wp--preset--spacing--50, 64px); }
.pdpx-critics.is-brief .pdpx-critics-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
.pdpx-critics.is-brief .pdpx-critics-by { margin-top: var(--wp--preset--spacing--20, 16px); text-align: center; }
.pdpx-critics.is-brief .pdpx-critics-by::before { content: none; }
@media (max-width: 900px) {
	.pdpx-critics { padding-left: var(--wp--preset--spacing--30, 24px); padding-right: var(--wp--preset--spacing--30, 24px); }
	.pdpx-critics-grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40, 40px); justify-items: center; text-align: center; }
	.pdpx-critics-quote p:first-child { text-indent: 0; }
}

/* ── Current Archives vitrine: flat labels on ink (Mike, 2026-08-19) ──
   The Print Loft reference: documents floating on a dark ground, name and
   price beneath, the whole card one link. */
.home-vitrine {
	background: var(--wp--preset--color--ink);
	border-top: 1px solid var(--wp--preset--color--brass);
	border-bottom: 1px solid var(--wp--preset--color--brass);
	margin-top: var(--wp--preset--spacing--60, 104px);
	padding: var(--wp--preset--spacing--60, 104px) var(--wp--preset--spacing--40, 40px);
}
.home-vitrine-inner { max-width: 1240px; margin: 0 auto; }
.home-vitrine .home-label { color: var(--wp--preset--color--ivory); }

.hr-flatrow {
	list-style: none;
	margin: var(--wp--preset--spacing--50, 64px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--40, 40px);
	align-items: end;
}
.hr-flatrow li { margin: 0; }
.hr-flatrow a {
	display: block;
	text-decoration: none;
	text-align: center;
	color: inherit;
}
.fr-label { display: block; }
.fr-label img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
	transition: filter 160ms ease;
}
.fr-name {
	display: block;
	margin-top: var(--wp--preset--spacing--30, 24px);
	font-family: var(--wp--preset--font-family--display);
	font-size: 19px;
	line-height: 1.35;
	color: var(--wp--preset--color--ivory);
	transition: color 160ms ease;
}
.fr-price {
	display: block;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--ledger);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--gold-light);
}
.hr-flatrow a:hover .fr-name,
.hr-flatrow a:focus-visible .fr-name { color: var(--wp--preset--color--gold-light); }
.hr-flatrow a:hover .fr-label img,
.hr-flatrow a:focus-visible .fr-label img { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6)) brightness(1.05); }

/* Stats and CTA inherit the band: numerals go ivory, labels stay brass. */

@media (max-width: 900px) {
	.hr-flatrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) {
	.home-vitrine { padding: var(--wp--preset--spacing--50, 64px) var(--wp--preset--spacing--30, 24px); }
	.fr-name { font-size: 17px; }
}

/* Archive greeting (Mike, 2026-09-02): the hero's italic line is picked once per
   page load from a small pool, see assets/js/archive-greeting.js. The min-height
   keeps the hero from jumping when the script swaps the printed line. */
#archive-greeting { min-height: 1.5em; }

/* ——— Landers and thank-you pages (templates/page-lander.html) ———
   Rebuilt 2026-09-05 from nine Flatsome page-builder pages that would have
   printed raw shortcodes the moment the theme switched. Each opens on the
   .home-signup ink band (already in the dark-band button list, so the join
   form and its plate come out right), then reuses the front page's own
   blocks — archival/home-record for the latest entry and the proof stats —
   so nothing on them can go stale the way the 2025 release dates did. */
.lp-main > .home-signup.lp-open { margin-top: 0; }
.home-signup .lp-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
	font-family: var(--wp--preset--font-family--ledger);
	font-size: var(--wp--preset--font-size--meta);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-light);
}
.home-signup h1 {
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
	font-size: clamp(34px, 3.9vw, 58px);
	line-height: 1.15;
	text-wrap: balance;
}
.home-signup .join-block { max-width: 420px; margin: 0 auto; }
/* the coupon box on the thank-you pages, same dashed gold box as the join reveal */
.home-signup .lp-code { max-width: 420px; margin: var(--wp--preset--spacing--30, 24px) auto; }
.home-signup .lp-fine {
	margin: 0;
	font-family: var(--wp--preset--font-family--ledger);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	opacity: 0.8;
}
.home-signup .lp-actions { margin: var(--wp--preset--spacing--40, 40px) 0 0; }
.home-signup .lp-actions .wp-block-button__link { text-decoration: none; }
/* "How we do it": three short points on paper */
.lp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40, 40px); }
.lp-points h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin: 0 0 var(--wp--preset--spacing--20, 16px); }
.lp-points p { margin: 0; line-height: 1.55; }
.lp-intro { max-width: 56ch; margin: calc(-1 * var(--wp--preset--spacing--20, 16px)) 0 var(--wp--preset--spacing--40, 40px); font-size: var(--wp--preset--font-size--lead); line-height: 1.55; }
@media (max-width: 782px) {
	.lp-points { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30, 24px); }
}
/* Standard pages (templates/page.html): the title used to sit flush under the
   header bar; give it the same breathing room a section gets. The lede below
   it is a plain paragraph — the constrained layout already caps it at the
   720px column, so it needs no max-width of its own (a narrower one would be
   centred by WordPress's auto margins and read as indented). */
main.wp-block-group > .wp-block-post-title { margin: var(--wp--preset--spacing--60, 104px) 0 var(--wp--preset--spacing--40, 40px); }
.lp-lede { font-size: var(--wp--preset--font-size--lead); line-height: 1.55; margin-bottom: var(--wp--preset--spacing--40, 40px); }
/* Reading copy inside a wide section stays a column. `.home-sec.alignwide > *`
   sets 1240px with more specificity than the classes' own 56ch, so restate it
   here at the same level. Fixes About's mission body running ~140 characters
   a line once page.html let post-content go full width (2026-09-05). */
.home-sec.alignwide > .home-intro,
.home-sec.alignwide > .lp-intro,
.home-sec.alignwide > .about-body { max-width: 56ch; }
/* The 56ch above is measured in the element's OWN font size. .about-body is a
   div at the 16px body size while its paragraphs run at lead (21px), so the
   column came out ~430px — forty characters a line — on the live About page
   (Mike, 2026-09-14: "halfway presentable"). Set the size on the wrapper so
   56ch means 56 characters of the text that actually sits in it. */
.home-sec.alignwide > .about-body { font-size: var(--wp--preset--font-size--lead); }
.home-sec.alignwide > .about-body p { font-size: inherit; line-height: 1.55; margin: 0 0 1em; }
.home-sec.alignwide > .about-body .about-close { font-style: italic; color: var(--wp--preset--color--umber); }
/* A standard page whose content is built from wide sections (About) lines its
   title up with those sections' left edge instead of the 720px column. */
main.wp-block-group:has(.home-sec.alignwide) > .wp-block-post-title {
	max-width: none;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
	padding-left: var(--home-gutter-left);
	padding-right: var(--wp--preset--spacing--50, 64px);
}