/*
Theme Name:  Rhinory v4
Theme URI:   https://rhinory.com
Description: Active build of the Rhinory block theme — v4 "Reserve" direction. Cinematic safari-lodge with midnight reserve green, horn ivory, and acacia gold. Lora body + Cormorant Garamond display + Josefin Sans detail (v12 token/font system, Port 01 Phase 0). Built against prototypes/12/.
Author:      Rhinory
Version:     0.152.1
Requires at least: 6.3
Tested up to: 6.9
Requires PHP: 8.0
License:     Proprietary
Text Domain: rhinory-v4
*/

/* ===================================================================
   Foundation only. Section-specific CSS arrives commit-by-commit as
   each homepage section gets ported from prototypes/4/. theme.json
   owns the design tokens that map cleanly to block-supports (palette,
   font sizes, spacing scale); this file owns the cross-section
   primitives that don't — extra tokens, layout helpers, type classes,
   buttons, section background variants, and the scroll-reveal hook.
   =================================================================== */

:root {
	/* ============================================================
	   v12 TOKEN PORT (Port 01, Phase 0) — ported verbatim from
	   prototypes/12/styles.css `:root` (lines 4-68) + its v6-additions
	   `:root` (lines 2808-2829). AA-contrast comment annotations
	   (R1 / R1d / R4 accessibility passes) are preserved verbatim from
	   source. Solid brand colors alias to their theme.json palette twin
	   (see the "Prototype-port bare-token aliases" note below); rule/
	   shadow/font tokens without a theme.json palette entry are
	   declared directly with the prototype's literal value. */

	/* Reserve scale — primary brand dark.
	   Green for hero, marquee features, pull quotes, and CTA bands;
	   warm ink for connective passages and card chrome (via --ink*). */
	--reserve:    var(--wp--preset--color--reserve);
	--reserve-2:  var(--wp--preset--color--reserve-2);
	--reserve-3:  var(--wp--preset--color--reserve-3);
	--ink:        var(--wp--preset--color--ink);
	--ink-2:      var(--wp--preset--color--ink-2);
	--ink-3:      var(--wp--preset--color--ink-3);
	--green:      var(--wp--preset--color--green);
	--green-2:    var(--wp--preset--color--green-2);
	--green-3:    var(--wp--preset--color--green-3);
	--ivory:      var(--wp--preset--color--ivory);
	--ivory-2:    var(--wp--preset--color--ivory-2);
	--paper:      var(--wp--preset--color--paper);
	--acacia:     var(--wp--preset--color--acacia);
	--acacia-dk:  var(--wp--preset--color--acacia-dk);
	--burgundy:   var(--wp--preset--color--burgundy);
	/* --rhino: muted/secondary text on the DARK register. Lightened in the
	   R1 a11y pass (was #6E6A62, ~2.7-3.7:1) to clear WCAG AA 4.5:1 as small
	   text on every dark + green-tinted card background (now ~5:1 on the
	   lightest dark card #24272A through ~6.8:1 on the darkest #0A0807).
	   Still reads as a muted taupe-grey vs the --ivory/--bone body tokens. */
	--rhino:      var(--wp--preset--color--rhino);
	--bone:       var(--wp--preset--color--bone);
	--rule:        rgba(243,242,237,0.16);
	--rule-soft:   rgba(243,242,237,0.08);
	--rule-dk:     rgba(45,41,38,0.14);
	--shadow-deep: 0 30px 80px -30px rgba(0,0,0,0.55);

	/* Warm paper variant — used by Shop.html (PLP).
	   Distinct from cool reserve/ivory above; both palettes coexist. */
	--paper-warm:    var(--wp--preset--color--paper-warm);
	--paper-warm-2:  var(--wp--preset--color--paper-warm-2);
	--ivory-warm:    var(--wp--preset--color--ivory-warm);
	--ink-warm:      var(--wp--preset--color--ink-warm);
	--ink-warm-2:    var(--wp--preset--color--ink-warm-2);
	--ink-warm-3:    var(--wp--preset--color--ink-warm-3);
	/* --rhino-warm: muted/secondary text on the LIGHT (warm/paper) register.
	   R1d (2026-05-29): darkened #6E665B -> #655F57 so card-meta (e.g. 11's
	   .bcard vintage line) clears WCAG AA 4.5:1 on every light card surface
	   (paper / ivory / paper-warm / the #ece4d4 card-image bed) without
	   leaning on opacity blending. Still reads as a muted taupe vs ink. */
	--rhino-warm: var(--wp--preset--color--rhino-warm);
	--gold-soft:  var(--wp--preset--color--gold-soft);
	/* clay ramp retired 2026-08-27 (client direction): clay-dk->burgundy, clay/clay-text->acacia, clay-text-dk->gold-soft. */
	--moss-dk:      var(--wp--preset--color--moss-dk);
	--rule-warm:    rgba(45,41,38,0.10);
	--rule-warm-2:  rgba(45,41,38,0.18);

	/* === v8.2 BRAND TOKENS (v6-additions :root, amendments, locked) ===
	   These coexist with the --reserve / --ivory / --acacia / --clay
	   tokens above. Texas-gold ~= acacia-dark (slightly cooler); off-white
	   is the Foundation paper; accent-green is partner-name + EIN only;
	   tonal-black is the type-on-light register. */
	--texas-gold:   var(--wp--preset--color--texas-gold);
	--texas-gold-2: var(--wp--preset--color--texas-gold-2); /* hover only */
	--tonal-black:  var(--wp--preset--color--tonal-black);
	--rich-black:   var(--wp--preset--color--rich-black);
	--off-white:    var(--wp--preset--color--off-white);
	--accent-green: var(--wp--preset--color--accent-green);

	--rule-v6:         rgba(36,39,42,0.14);
	--rule-strong-v6:  rgba(36,39,42,0.32);
	--rule-inverse-v6: rgba(243,242,237,0.16);
	/* --muted-v6: muted/secondary text on the LIGHT (Off-White/cream) register.
	   Darkened in the R1 a11y pass (was 0.55 alpha, ~3.3-3.4:1) to clear AA
	   4.5:1 as small text on both --off-white (#F3F2ED) and the cream
	   (#EDEAE0) card backgrounds (now ~5.3-5.9:1). */
	--muted-v6:         rgba(36,39,42,0.74);
	--muted-inverse-v6: rgba(243,242,237,0.62);

	/* Font-family tokens — theme enqueues Cormorant Garamond / Lora /
	   Josefin Sans via Google Fonts (see functions.php). */
	--ff-display: var(--wp--preset--font-family--display);
	--ff-body:    var(--wp--preset--font-family--body);
	--ff-mono:    var(--wp--preset--font-family--mono);

	/* Theme-owned layout vars (not part of the v12 token port) referenced
	   by hero/sticky chrome. The hero pulls itself up under the
	   ticker+nav using --chrome-h, which JS measures live. */
	--rhinory-nav-h:  88px;
	--chrome-h:       135px;
	--rhinory-max-w:  1360px;
	--rhinory-px:     40px;
	--rhinory-px-mob: 22px;
	--rhinory-section-py: clamp(84px, 9vw, 120px); /* v6 section rhythm (was undefined -> 0 padding on .rhinory-visit .section) */

	/* Treatment composites — named pcard background recipes that surface
	   templates reference by token, not by literal gradient. Treatment C
	   (catalog / editorial) is the warm-ink vertical gradient bottle
	   stage; Treatment B (fully-dark surfaces) is the warm-paper card
	   with a soft natural drop shadow. The from/to atoms are exposed
	   separately so a surface can build a sibling gradient (e.g., the
	   gift-sets section override) without re-typing the hex values.
	   Source palette: theme.json `ink` / `ink-2` / `paper-warm`. */
	--treatment-c-from:   var(--wp--preset--color--ink);
	--treatment-c-to:     var(--wp--preset--color--ink-2);
	--treatment-c-grad:   linear-gradient(180deg, var(--treatment-c-from) 0%, var(--treatment-c-to) 100%);
	--treatment-b-bg:     var(--wp--preset--color--paper-warm);
	--treatment-b-shadow: 0 8px 24px rgba(10, 8, 7, 0.12);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--rhinory-nav-h);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* WebP <picture> wrapper from rhinory-core's render_block filter is
   transparent to the box model, so absolutely-positioned images keep
   their layout when wrapped. */
picture { display: contents; }

::selection {
	background: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--reserve);
}


/* ===================================================================
   TYPE PRIMITIVES — the four classes the prototype reuses everywhere.
   Block style variations register `is-style-display` / `is-style-mono`
   later so they're pickable from the editor without typing classNames.
   =================================================================== */

.display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	line-height: 1.0;
	letter-spacing: -0.01em;
}

.display.italic {
	font-style: italic;
	font-weight: 300;
}

.mono {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.02em;
}

.eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--acacia);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--wp--preset--color--acacia);
}

/* On warm-paper sections the gold flips to clay — same logic as v1. */
.eyebrow.dark { color: var(--wp--preset--color--acacia-dk); }
.eyebrow.dark::before { background: var(--wp--preset--color--acacia-dk); }


/* ===================================================================
   LAYOUT WRAPPER — content-width container the prototype calls .wrap.
   We keep the class because patterns are easier to author against a
   stable selector than against Gutenberg's auto-generated layout
   classes. theme.json's contentSize handles core blocks; .wrap handles
   custom pattern markup.
   =================================================================== */

.wrap {
	max-width: var(--rhinory-max-w);
	margin: 0 auto;
	padding: 0 var(--rhinory-px);
}

@media (max-width: 720px) {
	.wrap { padding: 0 var(--rhinory-px-mob); }
}


/* ===================================================================
   SECTION SHELL — every homepage band gets `<section class="section …">`
   with one of the background variants below. Color choice drives the
   eyebrow tint (gold on dark, clay on paper) so sub-patterns inherit
   the right palette without per-section overrides.
   =================================================================== */

.section { padding: 120px 0; }
.section.tight { padding: 88px 0; }

.section.dark      { background: var(--wp--preset--color--reserve);  color: var(--wp--preset--color--ivory); }
.section.darker    { background: #000;                                color: var(--wp--preset--color--ivory); }
.section.ink       { background: var(--wp--preset--color--ink);      color: var(--wp--preset--color--ivory); }
.section.charcoal  { background: var(--wp--preset--color--ink-2);    color: var(--wp--preset--color--ivory); }
.section.green     { background: var(--wp--preset--color--reserve);  color: var(--wp--preset--color--ivory); }
.section.reserve   { background: var(--wp--preset--color--reserve);  color: var(--wp--preset--color--ivory); }
.section.reserve-2 { background: var(--wp--preset--color--reserve-2);color: var(--wp--preset--color--ivory); }
.section.ivory     { background: var(--wp--preset--color--ivory);    color: var(--wp--preset--color--reserve); }
.section.paper     { background: var(--wp--preset--color--paper);    color: var(--wp--preset--color--reserve); }

/* Composed wp:group sections — the .section + variant classes apply to
   wp-block-group, but root-padding-aware alignments would otherwise add
   theme.json gutters on top of the section's own 120px vertical
   padding. Strip horizontal padding here; .wrap inside owns content
   gutters (40px desktop / 22px mobile). */
.section.wp-block-group {
	padding-left: 0;
	padding-right: 0;
}

/* The .wrap container — when used as a wp:group it picks up
   wp-block-group margins. Reset to inherit the .wrap's intended
   max-width + auto centering. */
.wrap.wp-block-group {
	max-width: var(--rhinory-max-w);
	margin-left: auto;
	margin-right: auto;
	padding: 0 var(--rhinory-px);
}

@media (max-width: 720px) {
	.wrap.wp-block-group { padding: 0 var(--rhinory-px-mob); }
}

/* Light-on-light sections re-tint the eyebrow rule + word to clay so
   it doesn't disappear into the paper. */
.section.ivory .eyebrow,
.section.paper .eyebrow         { color: var(--burgundy); }
.section.ivory .eyebrow::before,
.section.paper .eyebrow::before { background: var(--burgundy); }


/* ===================================================================
   SECTION-HEAD — the canonical 1fr/1.6fr eyebrow→headline+lede block
   that opens almost every section in the prototype. Headlines are
   fluid Cormorant; em fragments get the gold-italic accent.
   =================================================================== */

.section-head {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 60px;
	/* start-aligned per prototypes/12/styles.css:1426 — end-alignment sank
	   the short eyebrow column to the bottom, next to the lede, instead of
	   the top of the section. */
	align-items: start;
	margin-bottom: 60px;
}

.section-head .eyebrow { padding-top: .5em; }

.section-head h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(40px, 5.4vw, 76px);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0;
}

.section-head h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--acacia);
}

.section.ivory .section-head h2 em,
.section.paper .section-head h2 em {
	color: var(--acacia);
}

.section-head .lede {
	font-size: 17px;
	line-height: 1.6;
	max-width: 54ch;
	opacity: .86;
}

@media (max-width: 880px) {
	.section-head { grid-template-columns: 1fr; gap: 24px; }
	.section { padding: 84px 0; }
}


/* ===================================================================
   BUTTONS — three variants the prototype uses across every CTA row.
   The animated arrow glyph is built from a 1px line + rotated chevron,
   no SVG — keeps patterns easy to author and small to ship.
   =================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: transform .2s, background .2s, color .2s, border-color .2s;
}

.btn-primary { background: var(--wp--preset--color--acacia); color: var(--wp--preset--color--reserve); }
.btn-primary:hover { background: var(--wp--preset--color--ivory); transform: translateY(-1px); }

.btn-ghost { border: 1px solid var(--wp--preset--color--ivory); color: var(--wp--preset--color--ivory); }
.btn-ghost:hover { background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--reserve); }

.btn-dark { background: var(--wp--preset--color--reserve); color: var(--wp--preset--color--ivory); }
.btn-dark:hover { background: #000; }

.btn-sm { padding: 8px 14px; font-size: 10px; }

/* Button-as-CTA reset — when cta-button has reserveAsTrigger:true,
   render.php emits <button data-rhinory-reserve> instead of <a href>.
   The global button[data-rhinory-reserve] reset at line ~9583 zeros
   background + padding for the visit-page CTAs that don't restate them
   via class CSS, which then shadows the .btn / .btn-primary / .btn-ghost
   / .btn-dark class rules for any cta-button rendered as a button-trigger.
   Higher-specificity (button + attr + class = 0,2,1) selectors restate
   the pill styles so cta-button buttons render identically to anchor
   cta-buttons — closes Erik defect #6 (Book a Rhino Encounter showed as
   plain text instead of acacia pill). Mirrors the prior now-card fix at
   line 2244. */
button[data-rhinory-reserve].btn {
	padding: 16px 28px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: transform .2s, background .2s, color .2s, border-color .2s;
}
button[data-rhinory-reserve].btn-primary { background: var(--wp--preset--color--acacia); color: var(--wp--preset--color--reserve); }
button[data-rhinory-reserve].btn-primary:hover { background: var(--wp--preset--color--ivory); transform: translateY(-1px); }
button[data-rhinory-reserve].btn-ghost { border: 1px solid var(--wp--preset--color--ivory); color: var(--wp--preset--color--ivory); }
button[data-rhinory-reserve].btn-ghost:hover { background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--reserve); }
button[data-rhinory-reserve].btn-dark { background: var(--wp--preset--color--reserve); color: var(--wp--preset--color--ivory); }
button[data-rhinory-reserve].btn-dark:hover { background: #000; }
button[data-rhinory-reserve].btn-sm { padding: 8px 14px; font-size: 10px; }

.btn .arrow {
	width: 16px;
	height: 1px;
	background: currentColor;
	position: relative;
	transition: width .2s;
}

.btn .arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.btn:hover .arrow { width: 22px; }


/* ===================================================================
   SCROLL REVEAL — opt-in fade-up triggered by IntersectionObserver in
   assets/js/rhinory-scroll.js (lands with a later commit). Class is
   declared here so patterns can carry it from day one without the JS
   present — element just stays opacity:1 if no observer is running.
   `:not(.visible)` would invert that; we want graceful degradation.
   =================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .9s ease, transform .9s ease;
}

.reveal.visible {
	opacity: 1;
	transform: none;
}

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


/* ===================================================================
   WP LAYOUT-FLOW MARGIN RESET — load-bearing.
   WordPress auto-applies `:where(.wp-block-group.is-layout-flow) > * + *
   { margin-block-start: 24px; }` to every wp:group with default layout.
   That adds 24px top margin to all children EXCEPT the first, which in
   a CSS grid (or our flex card layouts) offsets cards 2..N below card 1
   and creates the "cards don't line up" misalignment we ship.

   Reset margin-block on direct children of every grid/flex container
   we use so the cards align uniformly. Our own gap/padding handles
   spacing.

   `!important` is required because the Gutenberg editor canvas (iframe)
   generates per-container `wp-container-{hash} > * + *` inline rules
   with the same 0,1,1 specificity as ours, and depending on cascade
   order in the editor those win — so the homepage looks right on the
   live site but reverts to the broken-grid + black-section-bar layout
   in the editor. Source-order alone isn't reliable cross-context;
   !important is the only fix that holds in both. The `:where(...)`
   in WP's frontend rule has 0 specificity, so this still wouldn't be
   needed for frontend alone — but the editor needs it.
   =================================================================== */

.rhinory-front    > *,
.rhinory-visit    > *,
.paths            > *,
.now-grid         > *,
.diff-grid        > *,
.wine-grid        > *,
.exp-grid         > *,
.club-grid        > *,
.dash-tiles       > *,
.impact-grid      > *,
.species-list     > *,
.blake-stats      > *,
.welfare-chips    > *,
.welfare-note     > *,
.donate-pills     > *,
.ledger-rows      > *,
.map-layer-stack  > *,
.exp-meta-row     > *,
.faqs             > *,
.now-head         > *,
.now-head-l       > *,
.now-head-r       > *,
.section-head     > *,
.dash             > *,
.urgency-grid     > *,
.urgency-l        > *,
.urgency-r        > *,
.donate-row       > *,
.wine-foot-row    > *,
.wine-foot-row__ctas > *,
.gift-copy__ctas  > *,
.blake-ctas       > *,
.urgency-cta      > *,
.nw-ctas          > *,
.hero-ctas        > *,
.rhinory-nav         > *,
.rhinory-nav__cluster > *,
.rhinory-nav__cluster--right > *,
.rhinory-nav__links   > *,
.rhinory-nav__icons   > *,
.ce-stats         > *,
.club-circle-head > *,
.audit-stamp      > *,
.audit-stamp__copy > *,
.lc-stamp         > *,
.ledger-head      > *,
.ledger-head__l   > *,
.ledger-foot      > *,
.impact-head-row  > *,
.impact-head-row__l > *,
.impact-cell      > *,
.dash-tile        > *,
.diff-card        > *,
.path-card        > *,
.now-card         > *,
.exp-card         > *,
.exp-body         > *,
.wine-card        > *,
.wine-meta        > *,
.club-card        > *,
.club-entry       > *,
.club-estate      > *,
.ce-meta          > *,
.ce-stat          > *,
.species-row      > *,
.map-layer-card   > *,
.faq              > *,
.nw-num-block     > *,
.nw-copy          > *,
.blake-img        > *,
.blake-copy       > *,
.gift-img         > *,
.gift-copy        > *,
.newsletter-grid  > *,
.newsletter-l     > *,
.newsletter-r     > *,
.newsletter-form  > *,
.ourstory-grid    > *,
.cellar-hero      > *,
.vexp-grid        > *,
.vcities          > *,
.visit-cta-row    > *,
.rhinos-grid      > *,
.wwmap            > *,
.wwmap-figs       > *,
.wwmap-legend     > *,
.wwsite           > *,
.v12-funfact      > *,
.v12-paths        > * {
	margin-block-start: 0 !important;
	margin-block-end:   0 !important;
}

/* NOTE (editor-fidelity pass, 2026-07-14): the hero pull-up re-enable that
   lived here is retired. prototypes/12 SHIPS pull-under CSS but its
   measureChrome() runs before partials.js injects the chrome, so the
   rendered prototype has --chrome-h:0px — the hero starts BELOW the
   cbar+nav and the translucent header bar rests on the dark page
   background (that dark carbon look is what Erik signed off on; the
   pulled-under build put the hero's bright sky behind the 82%-alpha bar
   and read "much brighter than design"). The `.rhinory-front > *` reset
   above zeroing the hero's margin is now the WANTED behavior. */

/* Flex-column foot pinning — the `> * { margin-block: 0 !important }`
   reset above zeros every block-axis margin including `margin-top: auto`
   used by prototype-port classes to push a foot row to the bottom of a
   flex-column card. Re-enable margin-top:auto with matching !important
   on the specific foot/CTA-wrap classes that need it, scoped via the
   parent flex container so we don't paint generic margin-block back on.
   Pattern lifted from prototypes/6/styles.css 1722 (.now-card .now-foot),
   2580 (.wine-meta .wine-foot), 10761 (.bk5-cta-wrap), etc. */
.now-card    > .now-foot,
.wine-card   > .wine-meta .wine-foot,
.exp-card    > .exp-body .exp-foot,
.bk5-origin  > .bk5-cta-wrap,
.bk5-around  > .bk5-cta-wrap,
.diff-card   > .diff-foot,
.club-card   > .club-foot,
.r-press-card > .r-press-attr {
	margin-top: auto !important;
}

/* Prose paragraph spacing — same `> * { margin-block: 0 !important }`
   reset zeros the bottom-margin between body paragraphs the prototype
   relies on for breathing room (nw-copy IVF + coda, urgency body, etc.).
   Restore matching !important; selector list scoped to the prototype's
   prose blocks so we don't paint generic margin back on grids/cards. */
.nw-copy        > p,
.nw-copy        > .nw-coda,
.urgency-r      > p,
.bk5-origin-prose > p,
.bk5-around-prose > p,
.bk5-around-welfare > p {
	margin-block-end: 18px !important;
}
/* Source attribution top spacing — prototype inlines `margin-top: 18px`
   on the species/source attribution paragraph below the species list
   (prototypes/6/01-homepage.html:1607). The same > * margin-block reset
   zeros it; restore via !important. */
.urgency-r      > .species-source {
	margin-block-start: 18px !important;
}

/* WP wraps every template in <div class="wp-site-blocks"> with the
   is-layout-flow stylesheet, which injects margin-block-start: 24px
   between siblings. That puts a 24px band of body-bg between <main>
   and <footer> on every page — visible as a slightly darker bar
   wherever the last section's bg differs from the body bg. Reset it
   so footer always butts directly against the last main content. */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}


/* ===================================================================
   CHROME — TICKER (top marquee, infinite scroll)
   The track contains the message set DUPLICATED so the keyframe can
   translate -50% and loop seamlessly. Two duplicates = ten <span>s
   total. Pure CSS; respects prefers-reduced-motion by pausing.
   =================================================================== */

.rhinory-ticker {
	position: relative;
	/* Sits above the page in normal flow and never overlaps anything
	   geometrically (scrolls away on scroll), so no stacking context
	   needed. The previous z-index: 81 was specifically above the nav's
	   80, which had the side-effect of also rising above the SDK cart
	   drawer (drawer's z-index 1000 is scoped INSIDE the nav's stacking
	   context, so at the outer level the drawer ranks at the nav's 80).
	   Dropping the z-index lets the cart drawer paint over the ticker
	   when the drawer is open near the top of the page. */
	background: #000;
	color: var(--wp--preset--color--ivory);
	border-block: 1px solid var(--rule);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0;
}

.rhinory-ticker__track {
	display: flex;
	gap: 56px;
	padding: 11px 0;
	white-space: nowrap;
	width: max-content;
	animation: rhinory-marque-slide 80s linear infinite;
}

.rhinory-ticker__track span {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--wp--preset--color--ivory);
}

.rhinory-ticker__sep { color: var(--wp--preset--color--acacia); }

@keyframes rhinory-marque-slide {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.rhinory-ticker__track { animation: none; }
}


/* ===================================================================
   CHROME — ANNOUNCEMENT BAR (v12 `.cbar`, source: prototypes/12/
   v12-shared.css). Static single line, burgundy register. Replaces
   the scrolling `.rhinory-ticker` marquee per Cowork memory
   v12_campaign_bar_retire_marquee.
   z-index must sit ABOVE the pulled-up hero (the hero rides
   margin-top:-var(--chrome-h) under the chrome, and its .film-shot
   images + .hero-inner (z-index:2) otherwise paint over the bar — the
   bar read as a black strip) but BELOW 80: the C7 cart drawer's own
   z-index:1000 is scoped inside .rhinory-nav's stacking context, so
   at page level the drawer ranks at the nav's 80 and must keep
   painting over the bar when open. The prototype's 81 (v12-shared.css)
   would cover the drawer here; 10 satisfies both constraints.
   =================================================================== */
.cbar {
	position: relative;
	z-index: 10;
	background: #520000;
	color: var(--wp--preset--color--ivory);
	border-block: 1px solid rgba(185, 119, 39, 0.32);
}
.cbar-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 9px 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: center;
}
.cbar-msg {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--ivory);
}
.cbar-mark { color: var(--wp--preset--color--acacia); margin-right: 8px; }
.cbar-sep { color: var(--wp--preset--color--ivory); opacity: .4; margin: 0 8px; }
.cbar-tel {
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid rgba(241, 232, 214, .35);
	transition: border-color .18s ease, color .18s ease;
}
.cbar-tel:hover { color: var(--wp--preset--color--acacia); border-bottom-color: var(--wp--preset--color--acacia); }
.cbar-close {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ivory);
	opacity: .6;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: opacity .18s ease, transform .12s ease;
}
.cbar-close:hover { opacity: 1; }
.cbar-close:active { transform: translateY(-50%) scale(.9); }
.cbar.is-dismissed { display: none; }
@media (max-width: 600px) {
	.cbar-inner { flex-direction: column; gap: 6px; padding: 11px 40px; }
	.cbar-msg { font-size: 13px; }
}


/* ===================================================================
   CHROME — NAV (Phase 1: simple 3+logo+2+icons row)
   The full editorial mega-drawer is deferred to a later phase. This
   nav is sticky, frosted, compresses on scroll (later — `.is-stuck`
   wired in commit 12 alongside the side-scroll nav). Layout uses CSS
   grid: left cluster | logo well | right cluster — left/right are
   1fr each so triggers distribute symmetrically around the well.
   =================================================================== */

/* The <header class="rhinory-chrome"> wrapper from the header
   template-part would otherwise be the nav's containing block —
   sticky elements only stick while their containing block is in view,
   so the nav would un-stick and scroll away as soon as the (135px)
   header scrolled past. display: contents flattens the header out of
   layout so the nav's containing block is .wp-site-blocks (the whole
   page) and sticky tracks the full scroll. The <header> landmark is
   preserved for accessibility — modern browsers retain implicit ARIA
   roles on display:contents elements. */
.rhinory-chrome {
	display: contents;
}

/* Logged-in users see the WP admin bar at the top of the viewport
   (32px wide screens, 46px below 783px). The nav and drawer would
   otherwise tuck behind it. .admin-bar on <body> is the standard
   signal; offset both surfaces by the bar height. */
.admin-bar .rhinory-nav { top: 32px; }
.admin-bar .dd-scrim,
.admin-bar .dd-panel {
	/* Drawer anchors at the live nav.bottom via the JS-written CSS
	   var, so it tracks automatically once the nav itself is shifted.
	   No additional offset needed here — kept as a comment for the
	   next person reading these rules. */
}
@media (max-width: 782px) {
	.admin-bar .rhinory-nav { top: 46px; }
}

.rhinory-nav {
	position: sticky;
	top: 0;
	z-index: 80;
	border-bottom: 1px solid var(--rule);
	transition: border-color .22s ease-out, box-shadow .22s ease-out;
	padding: 0;
	margin: 0;
}

/* Backdrop blur lives on a pseudo-element instead of the nav itself.
   `backdrop-filter` on .rhinory-nav was creating a CSS containing block
   for any position:fixed descendant — and the SDK-hydrated side-cart
   drawer (rendered under #c7-cart inside .rhinory-nav__icons) is one,
   so the drawer was being clipped to the nav's ~100px bounding box
   instead of filling the viewport. Pushing the filter onto ::before
   keeps the frosted-glass look without trapping fixed descendants.

   The nav's BACKGROUND rides on the same pseudo, not on .rhinory-nav.
   In the prototype filter + background sit on one element, so the
   filter only processes the hero BEHIND the bar and the tint paints
   over the blurred result. With the background on the parent, the
   pseudo's backdrop includes that tint, and saturate(140%) re-saturates
   the tint itself — pixel-measured +20 RGB brighter than the prototype
   bar ("header brown much brighter than design"). Background-on-pseudo
   restores the prototype's compositing order. */
.rhinory-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 26, 20, 0.78);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transition: background .22s ease-out;
	pointer-events: none;
	z-index: -1;
}

/* Reset wp-block-group defaults that fight the grid. The outer nav
   IS a wp-block-group (template part), but we need our own grid + own
   padding rather than the theme.json root padding. */
/* Nav is full-viewport-width so the frosted background covers the
   whole sticky bar. The grid inside is constrained — but rather than
   adding an extra wrapper div, we use padding-inline that scales the
   inner content area to match max-w + gutters at the viewport center.
   Browsers don't have a "max-width-content-only" property, so the
   trick is to set padding-inline = max((100vw - max-w) / 2, gutter),
   which keeps content centered at large viewports while preserving
   the gutter at narrow ones. */
.rhinory-nav.wp-block-group {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 28px;
	padding-block: 18px;
	padding-inline: max( calc((100vw - var(--rhinory-max-w)) / 2), var(--rhinory-px) );
	max-width: 100%;
	margin: 0;
}

@media (max-width: 720px) {
	.rhinory-nav.wp-block-group {
		padding-inline: var(--rhinory-px-mob);
	}
}

.rhinory-nav__cluster {
	display: flex;
	align-items: center;
	gap: 36px;
}

.rhinory-nav__cluster--left  { justify-content: flex-start; padding-left: 8px; }
.rhinory-nav__cluster--right { justify-content: flex-end;   padding-right: 8px; }

/* The right cluster is a wp:group so it picks up wp-block-group's
   margin. Zero it. Same for the icons sub-group. */
.rhinory-nav__cluster.wp-block-group,
.rhinory-nav__icons.wp-block-group {
	margin: 0;
	padding: 0;
}

.rhinory-nav__links {
	display: flex;
	align-items: center;
	gap: 36px;
}

.rhinory-nav__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	padding: 8px 0;
	opacity: .88;
	transition: opacity .2s, color .2s;
}

.rhinory-nav__link:hover {
	opacity: 1;
	color: var(--wp--preset--color--acacia);
}

/* Stuck state — flips after the page scrolls past 64px (driven by the
   sentinel observer in rhinory-scroll.js). Logo shrinks 64→48px, row
   padding tightens, bg darkens, gold-tinted underline + soft shadow
   replace the soft rule for a "stuck to the page" feel. */
.rhinory-nav.is-stuck {
	border-bottom: 1px solid rgba(216, 180, 79, 0.22);
	box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.4);
}

.rhinory-nav.is-stuck::before {
	background: rgba(10, 15, 12, 0.92);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	backdrop-filter: blur(20px) saturate(160%);
}

.rhinory-nav.is-stuck.wp-block-group { padding-block: 10px; }
.rhinory-nav.is-stuck .rhinory-nav__logo img { height: 48px; }

/* Homepage carbon chrome — v12 Pass 9 (Nicole, 2026-06-24) replaces the
   base green nav with DS carbon on the homepage: rest rgba(36,28,22,.82),
   stuck rgba(28,21,16,.94) (prototypes/12/01-homepage.html:1176-1177,
   "replace the leftover green chrome with DS carbon"). The override is
   homepage-inline in the prototype, so it's body.home-scoped here too —
   other surfaces keep the green base until their own v12 pass lands. */
body.home .rhinory-nav::before { background: rgba(36, 28, 22, 0.82); }
body.home .rhinory-nav.is-stuck::before { background: rgba(28, 21, 16, 0.94); }

/* Stub links (About, Events) are recognizable but not loud — small
   trailing dot in gold, slightly muted opacity. */
.rhinory-nav__link[data-stub="true"]::after {
	content: " ·";
	color: var(--wp--preset--color--acacia);
	margin-left: 4px;
	opacity: .6;
}

/* Logo well — center column. The wp:image figure adds default margin;
   reset to align with grid. Width lives here (not as a block width attr)
   so the logo stays a plain, non-resized core/image — a resized image
   bakes the dimension into the saved markup, which core's save() drifts
   on each bump and self-recovers in the editor (2026-08-31). Height/width
   are both CSS-owned now; the is-stuck + mobile rules only touch height. */
.rhinory-nav__logo {
	margin: 0;
	line-height: 1;
}

.rhinory-nav__logo a { display: block; }

.rhinory-nav__logo img {
	height: 64px;
	width: 180px;
	display: block;
	/* Source SVG renders dark; flip to gold via filter. Same recipe v1 used. */
	filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(548%) hue-rotate(1deg) brightness(95%) contrast(88%);
	transition: filter .25s, height .22s ease-out;
}

.rhinory-nav__logo a:hover img {
	filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(298%) hue-rotate(2deg) brightness(102%) contrast(91%);
}

/* Icon cluster — circular outline buttons, gold on hover. The plugin
   blocks (cart-icon, login-button) get the same treatment via the
   `.winery-c7-*` class hooks below. */
.rhinory-nav__icons {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: 24px;
}

.rhinory-nav__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	color: var(--wp--preset--color--ivory);
	opacity: .85;
	background: transparent;
	transition: opacity .2s, color .2s, border-color .2s, background .2s;
}

.rhinory-nav__icon svg { width: 16px; height: 16px; }

.rhinory-nav__icon:hover {
	opacity: 1;
	color: var(--wp--preset--color--acacia);
	border-color: var(--wp--preset--color--acacia);
}

/* SDK-mount c7 widgets — cart-icon (#c7-cart) + login-button (#c7-account).
   Plugin contract v0.4.1 (docs/contract.md): the frozen, theme-addressable
   surface is the OUTER wrapper class + the documented `--c7-*` variable
   surface (https://design-docs.commerce7.com/docs/css-overrides). The
   plugin emits a bare-empty mount inside the wrapper; the SDK hydrates
   all inner DOM post-load with `c7-*` BEM classes (`.c7-user-nav__cart`,
   `.c7-user-nav__cart__count`, `.c7-user-nav__account__login`,
   `.c7-user-nav__account__name` etc.) which are forbidden inner-class
   surface. So we style only the outer wrapper + variable cascade.

   SDK paints inline horizontal content inside both mounts:
     - Cart: <button class="c7-link"> with the cart SVG + an inline
       <span class="c7-user-nav__cart__count"> badge (`position:static`,
       `margin-left:-3px`, ~20×20 pill). NOT a corner overlay.
     - Login (logged-out): <a class="c7-user-nav__account__login">Log in</a>.
       (Logged-in): <div class="c7-user-nav__account__name">Hello {name}
       <svg chevron></svg></div> + an SDK-rendered dropdown panel.
     The C7 SDK applies a hardcoded `padding: 15px 0` to `.c7-link` and
     `.c7-user-nav__account > a`; not exposed as a variable.

   Prototype/6 designs both widgets as 36×36-circle nav-icons with a
   tight corner-overlay badge (cart) and an icon-only person glyph
   (account). That treatment is NOT achievable through the documented
   surface — badge position and inner padding aren't exposed as
   variables, and the v0.4.1 plugin removed `data-winery-c7-customer-state`
   so the theme can't sibling-swap a custom icon. Surfaced as a
   plugin-side ask in 2026-05-15-cart-count-account-icon-polish.md
   Review notes; tracked for a paired plugin brief.

   What this rule DOES scope through the documented surface:
     - The dark-luxury `--c7-*` skin bundle on BOTH wrappers (login was
       missing this entirely — commit e01ee1c only landed it on
       .winery-c7-cart-icon, leaving the SDK's "Log in" anchor to inherit
       the SDK's default header text color → low-contrast plain text).
     - The same cascade drives the side-cart drawer (cart-icon mount)
       and the account dropdown panel (login-button mount) when the SDK
       opens them, so the panels paint on-brand without inner-class hits.
     - Cart count colors via `--c7-cart-count-{bg,bg-focus,text-color}`.
     - Account dropdown radius + shadow via `--c7-dropdown-{border-radius,
       shadow}` (per Bible Part 7 §7.1.6 closed list).
*/
.rhinory-nav__icons .winery-c7-cart-icon,
.rhinory-nav__icons .winery-c7-login-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: transparent;

	--c7-bg: var(--wp--preset--color--reserve);
	--c7-bg-alt: var(--wp--preset--color--reserve-2);
	--c7-body-text-color: var(--wp--preset--color--ivory);
	--c7-heading-text-color: var(--wp--preset--color--ivory);
	--c7-alt-text-color: var(--wp--preset--color--bone);
	--c7-border-color: rgba(216, 162, 76, 0.18);
	/* --c7-link-color stays in the body-text register inside the
	   nav-icon scope. Setting it to acacia (the editorial accent)
	   cascades into the side-cart drawer + account dropdown — every
	   .c7-link descendant the SDK paints (wine titles, Remove
	   actions, in-line table links) inherits the gold paint. The
	   Upsun smoke 2026-05-15 reading was "hovering a wine title
	   re-paints from ivory to gold" — empirically the gold paint is
	   on .c7-link's rest-state color declaration (SDK has no
	   :hover color rule on these elements; only text-decoration),
	   and the wrapper-scope --c7-link-color override is what reaches
	   it. Production rhinory.com (same SDK) does not exhibit this,
	   confirming the cascade is theme-introduced.
	   Tradeoff: the side-cart Remove action also paints ivory rather
	   than acacia — loses the gold affordance but matches production
	   restraint. FINDING-8 (single global --c7-link-color, no
	   secondary discriminator) still routes to plugin v0.5.0 if the
	   gold-Remove read is wanted back. */
	--c7-link-color: var(--c7-body-text-color);
	--c7-primary-color: var(--wp--preset--color--acacia);
	--c7-primary-color-text: var(--wp--preset--color--acacia);
	--c7-primary-color-dark: var(--wp--preset--color--acacia-dk);
	--c7-primary-button-bg: var(--wp--preset--color--acacia);
	--c7-primary-button-bg-hover: var(--wp--preset--color--acacia-dk);
	--c7-primary-button-text-color: var(--wp--preset--color--reserve);
	--c7-alt-button-bg: var(--wp--preset--color--reserve-2);
	--c7-alt-button-bg-hover: var(--wp--preset--color--reserve-3);
	--c7-alt-button-text-color: var(--wp--preset--color--ivory);
	--c7-cart-count-bg: var(--wp--preset--color--acacia);
	--c7-cart-count-bg-focus: var(--wp--preset--color--acacia-dk);
	--c7-cart-count-text-color: var(--wp--preset--color--reserve);
	--c7-dropdown-border-radius: 0;
	--c7-dropdown-shadow: 0 30px 80px -30px rgba(0,0,0,0.55);
	--c7-header-text-color: rgba(241, 232, 214, 0.85);
	color: var(--c7-body-text-color);
}

/* ----- SDK-failure fallback banner (plugin v0.39.0, frozen surface) -----
   The plugin injects a minimal default <style> — a pale Bootstrap-warning
   strip, prepended to <head> — on a widget-bearing page when the Commerce7
   SDK fails to load. Against the obsidian reserve-cool register that default
   reads as a broken/injected element, so the theme dresses the outage notice
   to look intentional: a slim obsidian strip with a gold accent edge + cream
   message + restrained gold dismiss. Frozen class — additive restyle only,
   never renamed (plugin docs/contract.md § CSS class hooks). Equal-specificity
   single class wins on source order: the theme stylesheet is enqueued AFTER the
   plugin's prepended inline <style>. Layout essentials (flex) re-declared so
   the block is self-sufficient rather than leaning on the plugin default.
   Reserve-cool tokens per CLAUDE.md § Design tokens / brief §Canonical extracts;
   AA contrast — cream on #161210 ≈ 13:1, gold #C5913A on #161210 ≈ 5.9:1.
   Contract: ~/dev/wordpress-for-wineries/docs/contract.md § CSS class hooks — .winery-c7-sdk-fallback-banner
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   wp-commerce7/audience — wrapper wiring (plugin ^0.67.0)
   ---------------------------------------------------------------
   The audience block wraps arbitrary authored content in a bare
   <div class="winery-c7-audience">. Left alone, that wrapper becomes the
   grid/flex item wherever a gated pattern is placed, and the content it
   wraps loses its own layout role (a full-bleed promo collapses into one
   grid column, a flex child loses its basis, etc.). display:contents
   flattens the wrapper out of the box model — same treatment this theme
   already gives <picture> and the header — so a gated pattern lays out
   byte-for-byte like an ungated one and no per-surface span rules are
   needed as surfaces get built.

   Fail-closed is preserved: the block's own --pending / --hidden modifiers
   are `display:none !important` in the plugin's blocks/audience/style.css,
   so they still win over this rule. A block renders hidden and the plugin's
   audience-view.js REVEALS it per viewer; a dead customer bridge hides
   rather than leaks.

   The [hidden] guard matters: display:contents from an author sheet would
   otherwise defeat the UA stylesheet's [hidden]{display:none}, so any theme
   JS that toggles the `hidden` property on one of these wrappers would
   silently stop working.

   Frozen class — additive only, never renamed.
   Contract: ~/dev/wordpress-for-wineries/docs/contract.md § Block inventory — wp-commerce7/audience
   --------------------------------------------------------------- */
.winery-c7-audience { display: contents; }
.winery-c7-audience[hidden] { display: none !important; }

/* Theme-owned fail-closed, deliberately duplicating the plugin's
   blocks/audience/style.css rather than depending on it.
   WordPress only auto-enqueues a block's stylesheet when that block actually
   appears in rendered content, so any surface that hand-emits this wrapper
   (see blocks/wine-pdp/render.php) loads the markup WITHOUT the plugin CSS.
   In that state `display:contents` above is the only rule in play and every
   gated block renders VISIBLE — fail-open, on a visibility control. Verified
   happening on DDEV 2026-07-28. Gating is security-relevant, so the theme
   states the closed case itself and treats the plugin's copy as belt-and-braces.
   NOTE: `--hidden` is currently UNDOCUMENTED in the plugin's contract.md
   (only `--pending` is listed), so this rule leans on an unfrozen symbol —
   raised as a plugin-side documentation ask. */
.winery-c7-audience--pending,
.winery-c7-audience--hidden { display: none !important; }

.winery-c7-sdk-fallback-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 12px clamp(22px, 4vw, 40px);
	background: #161210;                              /* --rhinory-bg-mid obsidian */
	color: #F0E8DC;                                  /* --rhinory-cream */
	border-top: 2px solid #C5913A;                   /* --rhinory-gold accent edge */
	border-bottom: 1px solid rgba(197, 145, 58, 0.35); /* gold hairline */
	font-family: var(--ff-mono, "Josefin Sans", ui-monospace, monospace);
	font-size: 0.78rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
}

.winery-c7-sdk-fallback-banner__message {
	color: #F0E8DC;                                  /* cream — AA on obsidian */
}

.winery-c7-sdk-fallback-banner__dismiss {
	flex: 0 0 auto;
	color: #C5913A;                                  /* --rhinory-gold — AA on obsidian */
	font-size: 1.25rem;
	line-height: 1;
	padding: 0 6px;
	transition: color 120ms ease;
}

.winery-c7-sdk-fallback-banner__dismiss:hover,
.winery-c7-sdk-fallback-banner__dismiss:focus-visible {
	color: #E0B96A;                                  /* --rhinory-gold-lt hover */
}

/* ----- Account-dropdown brand-alignment (2026-05-17 brief) -----
   Scope: SDK-painted popover that hydrates inside .winery-c7-login-button
   when the logged-in trigger is hover/click activated. Brand fonts via
   the existing wrapper-scope --c7-* cascade (style.css:763-811) already
   cover most of the typography; this block adds editorial spacing +
   container framing + quieter Log out treatment.
   --------------------------------------------------------------- */

/* Container framing — subtle ivory-rule border, sharp corners per
   prototype/6 editorial register. The wrapper-scope already sets
   --c7-dropdown-border-radius: 0 + --c7-dropdown-shadow at style.css:807-808;
   add an explicit border on the dropdown panel via the SDK class.
   KNOWN DEBT: targets a c7-* inner class (volatile per Bible §7.9.2).
   F-D paired plugin brief scope expansion candidate to add
   --winery-c7-dropdown-border var; until then, !important on bridge-default
   surfaces this rule wins. */
.winery-c7-login-button .c7-user-nav__account__dropdown,
.winery-c7-login-button [class*="__account__dropdown"] {
  border: 1px solid var(--rule, rgba(241, 232, 214, 0.16)) !important;
  padding: 12px 0 !important;
}

/* Item spacing — tighter editorial register (~8-10px per item vs SDK
   default ~12-14px). Same volatile-class concern; same F-D scope
   expansion candidate. */
.winery-c7-login-button [class*="__account__dropdown"] a,
.winery-c7-login-button [class*="__account__dropdown"] button {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-family: var(--c7-font-family, "Lora", sans-serif) !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

/* F-E closure (plugin v0.5.6, 2026-05-22): plugin narrowed F-7 destructive
   bridge to .c7-account-details__delete-account only — Log out no longer
   inherits destructive paint. The theme-side revert workaround that
   previously lived here is retired. Polish-v2 specificity-fix at
   line ~931 + acacia-hover at ~986 carry Log out's visible state. */

/* Header (name + email) — preserve content per SDK, refine typography.
   The name renders as the SDK's display-text container; the email
   sits below. Brand register: name in heading register (Cormorant
   Garamond if SDK exposes the slot to --c7-heading-font-family, else
   matches body), email in alt-text register (--c7-alt-text-color). */
.winery-c7-login-button [class*="__account__dropdown"] [class*="__name"],
.winery-c7-login-button [class*="__account__dropdown"] [class*="__header"] {
  font-family: var(--c7-heading-font-family, "Cormorant Garamond", Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  padding-bottom: 4px !important;
}

/* ----- Account-dropdown specificity fix (2026-05-17 follow-up) -----
   v1 brand-alignment brief shipped 2026-05-17 (commit 40797db) had three
   specificity collisions: header anchor + email span got Inter Tight 14px
   instead of Cormorant Garamond 18px + alt-text 12px; logout font-size
   was 14px instead of 13px; logout padding was 8px/16px instead of
   12px/16px. All three caused by item-typography rule winning specificity
   over header + logout rules. This block re-targets at higher specificity
   AND places these rules AFTER the v1 block in cascade order.
   --------------------------------------------------------------- */

/* Header anchor (name display) — Cormorant Garamond 18px display register.
   Targets the <a> inside the __dropdown__header div directly (not just
   the wrapping div) so the rule beats the item-typography rule's anchor
   selector. */
.winery-c7-login-button [class*="__dropdown__header"] a,
.winery-c7-login-button .c7-user-nav__account__dropdown__header a {
  font-family: var(--c7-heading-font-family, "Cormorant Garamond", Georgia, serif) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  display: block !important;
  text-decoration: none !important;
  padding: 0 16px 4px 16px !important;
}

/* Header anchor inner span (email) — --ff-display 11.5px ivory@60% blurb
   register. The <span> sits inside the header anchor; SDK paints email
   content here. Brand register matches the .winery-c7-account-greeting
   slot below — both share the prototype `.acct-lead-blurb` register
   (prototypes/12/styles.css .acct-lead-blurb: `font-family:var(--ff-display)`)
   so the dropdown header reads as one editorial blurb stack inside the
   SDK anchor + greeting row. Stage-2 (2026-05-23) had shipped this in
   Fraunces; Port 01 Phase 0 (2026-07-09) retires Fraunces from the font
   stack and re-aligns to the prototype's actual --ff-display register. */
.winery-c7-login-button [class*="__dropdown__header"] a span,
.winery-c7-login-button .c7-user-nav__account__dropdown__header a span {
  display: block !important;
  font-family: var(--ff-display), Georgia, serif !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: rgba(241, 232, 214, 0.6) !important;
  line-height: 16.1px !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
  text-transform: none !important;
}

/* Logout button — boost specificity over the item-typography rule.
   Chained class + attribute selectors win specificity. Re-asserts the
   v1 brief's intended values (13px font + 12px padding) that lost
   the cascade collision. */
.winery-c7-login-button .c7-user-nav__account__dropdown__logout.c7-link,
.winery-c7-login-button [class*="__account__dropdown"] [class*="__dropdown__logout"],
.winery-c7-login-button [class*="__account__dropdown"] a[class*="__dropdown__logout"] {
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-family: var(--c7-font-family, "Lora", sans-serif) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--c7-body-text-color, #F1E8D6) !important;
  border-top: 1px solid var(--rule, rgba(241, 232, 214, 0.16)) !important;
  margin-top: 8px !important;
}

/* Container bottom-spacing — give the LOG OUT button breathing room
   from the dropdown's bottom edge. v1 set padding: 12px 0; the LOG OUT
   button's 12px padding (post-this-fix) combined with the container's
   12px bottom padding still feels cramped. Bump container bottom to
   16px for editorial breathing room without changing the top header
   spacing. */
.winery-c7-login-button .c7-user-nav__account__dropdown,
.winery-c7-login-button [class*="__account__dropdown"] {
  padding: 12px 0 16px 0 !important;
}

/* ----- Account-dropdown polish v2 (2026-05-17 follow-up to v1 + v1.1) -----
   Type-A tuning: item scale + spacing + header arrow + acacia hover. Brings
   dropdown from ~80% to ~85-87% brand alignment within SDK structural
   constraints. Type-B structural enhancements (avatar, blurbs, subheadings,
   custom items, label overrides) routed to plugin Cowork as bundled paired
   brief F-E through F-J — NOT in this theme brief's scope.
   --------------------------------------------------------------- */

/* Menu item scale + spacing — bump from v1's tight 14px/8px to more
   generous editorial 16px/12px + horizontal padding inset from container
   edge. Higher-specificity selector (chained class) to win cascade tie
   against v1's item-typography rule. */
.winery-c7-login-button [class*="__account__dropdown"] ul a,
.winery-c7-login-button [class*="__account__dropdown"] ul button,
.winery-c7-login-button .c7-user-nav__account__dropdown ul a,
.winery-c7-login-button .c7-user-nav__account__dropdown ul button {
  padding: 12px 16px !important;
  font-size: 16px !important;
}

/* Menu item acacia hover — mirrors the brand's micro-interaction pattern
   (nav-icon hover-flash, dropdown items, Log out hover all flip to acacia
   on hover). Subtle 200ms transition for editorial feel. */
.winery-c7-login-button [class*="__account__dropdown"] ul a,
.winery-c7-login-button [class*="__account__dropdown"] ul button,
.winery-c7-login-button .c7-user-nav__account__dropdown ul a,
.winery-c7-login-button .c7-user-nav__account__dropdown ul button {
  transition: color 200ms ease !important;
}

.winery-c7-login-button [class*="__account__dropdown"] ul a:hover,
.winery-c7-login-button [class*="__account__dropdown"] ul button:hover,
.winery-c7-login-button .c7-user-nav__account__dropdown ul a:hover,
.winery-c7-login-button .c7-user-nav__account__dropdown ul button:hover {
  color: var(--acacia, #D4A24C) !important;
}

/* Header bottom divider — creates visual symmetry with the Log out
   top divider. Header card sits at the top of the dropdown; menu items
   below have a clear visual break from the user identity above. */
.winery-c7-login-button [class*="__account__dropdown"] [class*="__dropdown__header"],
.winery-c7-login-button .c7-user-nav__account__dropdown .c7-user-nav__account__dropdown__header {
  border-bottom: 1px solid var(--rule, rgba(241, 232, 214, 0.16)) !important;
  margin-bottom: 8px !important;
  padding-bottom: 12px !important;
}

/* Header navigation affordance — small "→" arrow at right of header
   anchor indicating "click here to navigate to profile". Decorative
   pseudo-element via background-image data URI (same pattern as the
   nav-icon glyphs at c7-overrides.css:385-395). Not content; no i18n
   or a11y issues with this kind of decorative arrow. */
.winery-c7-login-button [class*="__dropdown__header"] a,
.winery-c7-login-button .c7-user-nav__account__dropdown__header a {
  position: relative !important;
  padding-right: 36px !important;  /* room for the arrow on the right */
}

.winery-c7-login-button [class*="__dropdown__header"] a::after,
.winery-c7-login-button .c7-user-nav__account__dropdown__header a::after {
  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23D4A24C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h8M6 2l4 4-4 4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 12px 12px !important;
  opacity: 0.85 !important;
  transition: opacity 200ms ease, transform 200ms ease !important;
}

.winery-c7-login-button [class*="__dropdown__header"] a:hover::after,
.winery-c7-login-button .c7-user-nav__account__dropdown__header a:hover::after {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(2px) !important;
}

/* Trigger-only cart-count nowrap. The 0.67.2 stop-gap applied
   `white-space: nowrap` at the wrapper to keep a 2-digit cart-count
   pill on the icon's baseline; Chrome MCP inspection on Upsun staging
   2026-05-15 measured that nowrap cascading into the SDK-hydrated
   side-cart drawer (same wrapper mount) — wine titles forced single-line,
   long titles pushed `<li>.c7-order-item` width to 685px against a
   490px pricing container, clipping qty + prices outside the 550px
   drawer.

   0.67.4 re-scoped nowrap to the trigger element only — but used a
   DEPTH-2 path (`> div > button` / `> div > a`) that matches nothing
   on the real DOM. Cowork's fourth-patch Chrome MCP re-inspection
   (Upsun staging 2026-05-15) walked `.winery-c7-cart-icon` and found
   the trigger button is DEPTH-3: the SDK injects an intermediate
   `<div class="c7-user-nav__cart">` between the bare-empty mount
   `<div id="c7-cart">` and the trigger `<button>`. Confirmed via
   SDK CSS at `cdn.commerce7.com/v2/commerce7.css` (rule
   `.c7-user-nav__cart > button { color: var(--c7-header-text-color); ... }`
   proves the button is a direct child of `.c7-user-nav__cart`).
   The 0.67.4 selector therefore matched nothing — cart-count "15"
   wrapping below the icon returned at 2-digit counts.

   Fixed at 0.67.5: depth-3 path through bare element types only —
   `> div` (= `<div id="c7-cart">`, plugin mount) → `> div` (=
   `<div class="c7-user-nav__cart">`, SDK middle wrapper) → `> button`.
   Both intermediate `> div` steps are bare element type, NOT the
   mount-id `#c7-cart` and NOT the inner SDK class `.c7-user-nav__cart`.
   Login-button parallel: `> div` (= `#c7-account`) → `> div` (=
   `.c7-user-nav__account`) → `> a`. The 0.67.2 patch documented the
   logged-in account trigger as a `<div>` (which would have required
   inner-class targeting and motivated FINDING-11's plugin-v0.5.0
   route for a stable logged-in-trigger hook). Cowork's Chrome MCP
   re-walk on Upsun staging 2026-05-15 found the prior diagnosis was
   wrong: the logged-in trigger is `<a class="c7-user-nav__account__name"
   href="/profile/">` — a bare anchor at the same depth-3 path as the
   logged-out anchor. The depth-3 `> a` selector therefore lights up
   BOTH logged-out and logged-in trigger states automatically. F-11
   is closeable theme-side; no plugin v0.5.x work is needed for the
   hover affordance. */
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button,
.rhinory-nav__icons .winery-c7-login-button > div > div > a {
	white-space: nowrap;
}

/* Trigger-only acacia hover-flash. Same depth-3 path correction as the
   trigger-nowrap rule above (0.67.5). Both rules were added in 0.67.2
   with the same depth-2 path that never matched the real DOM —
   meaning the trigger gold-flash never fired post-0.67.2 either.
   Cosmetic affordance, not a filed defect — but fixing the parallel
   rule alongside the nowrap regression because it's the same
   selector shape and same DOM-walk correction. */
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button:hover,
.rhinory-nav__icons .winery-c7-login-button > div > div > a:hover {
	--c7-header-text-color: var(--wp--preset--color--acacia);
}

/* =============================================================
   Nav-icon v2 — state-aware visual parity (account + cart)
   Brief: docs/briefs/2026-05-15-nav-account-cart-icon-state-design.md
   Spec table: prototypes/6/nav-icon-state-design.html §05 (v2).

   Three behavior categories (v2.1 — hover-reveal dropped):
     A · Shared 36×36 envelope (icon-replacement + ivory→acacia
         hover flash, parallel to the theme-native hamburger /
         search circles at .nav-icon).
     B · Account ring color-shift on logged-in (one rule on the
         [data-winery-c7-customer-state="logged-in"] discriminator
         shipped in plugin v0.5.1).
     C · Cart count badge style (positioning shipped via the F-G1
         atomic 4-var override at c7-overrides.css:219-222).

   v2.1 scope reduction (Cowork interrupt, post-empirical test):
   The hover-reveal tooltip flap (former category C) was DROPPED.
   Erik tested the v2 hover-reveal against the live SDK and surfaced
   two issues: (1) the SDK's logged-in dropdown panel z-index wins
   over the tooltip flap (tooltip can't be seen when both fire), and
   (2) the SDK dropdown already shows "Erik Bodor / email" at top,
   making the tooltip's revealed "Hello Erik..." redundant. Clean
   separation: ring color-shift is the at-rest state signal; SDK
   dropdown is the deeper-info surface. Account anchor stays icon-
   only via text-indent:-9999px; no growth, no flap. Architecture
   simplifies to in-flow 36×36 circle parallel to the cart button.

   Surface discipline:
     - Zero c7-* class targeting from this block. Selectors hit the
       plugin-owned .winery-c7-* wrappers, bare HTML elements
       (a / button / svg / span) at depth-3 paths verified against
       Upsun staging (style.css:825-851 has the depth-3 walk), and
       the [data-winery-c7-customer-state] attribute.
     - The cart count badge selector .winery-c7-cart-icon > div > div
       > button > span:last-child is structural-position targeting
       (last child of the trigger button), NOT a c7-* class — robust
       against SDK class renames.
     - Token convention: var(--name, hex-fallback) so the rules paint
       correctly whether or not the brand-token --name is defined at
       this scope (parallel to c7-overrides.css convention).

   F-D (cart count badge style via plugin --winery-c7-cart-count-{bg,
   text-color,font-family,font-size,padding} vars) is a clean
   follow-up for plugin v0.5.x — surfaces in the structured handoff
   as a paired-brief candidate. Until then the bare-element
   structural selector below carries badge appearance. */

/* ----- A · Shared 36×36 envelope (account + cart parallel) --- */

/* Account anchor — in-flow 36×36 circle, parallel to cart button.
   SDK text "Log in" / "Hello Erik, view your account." hidden via
   text-indent:-9999px (more AT-friendly than font-size:0 — preserves
   the accessible name "Log in" / "Hello Erik..." for screen readers
   while collapsing the visible glyph to icon-only). */
.rhinory-nav__icons .winery-c7-login-button > div > div > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--rule, rgba(241, 232, 214, 0.16));
	border-radius: 50%;
	background: transparent;
	color: var(--c7-header-text-color);
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}
.rhinory-nav__icons .winery-c7-login-button > div > div > a:hover,
.rhinory-nav__icons .winery-c7-login-button > div > div > a:focus-visible {
	opacity: 1;
	color: var(--acacia, #D4A24C);
	border-color: var(--acacia, #D4A24C);
}

/* Hide the volatile SDK chevron-down (paints in logged-in state) */
.rhinory-nav__icons .winery-c7-login-button > div > div > a > svg {
	display: none;
}

/* Person glyph — absolutely centered (single-child layout). */
.rhinory-nav__icons .winery-c7-login-button > div > div > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23F1E8D6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='8' r='3.5'/><path d='M4 19c1.4-3.2 4.2-5 7-5s5.6 1.8 7 5'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: 0;
	pointer-events: none;
	transition: background-image 0.2s linear;
}

/* Glyph color flip on hover (matches hamburger / search ivory→acacia
   envelope established at .nav-icon — Q3 unchanged from v1). */
.rhinory-nav__icons .winery-c7-login-button > div > div > a:hover::before,
.rhinory-nav__icons .winery-c7-login-button > div > div > a:focus-visible::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23D4A24C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='8' r='3.5'/><path d='M4 19c1.4-3.2 4.2-5 7-5s5.6 1.8 7 5'/></svg>");
}

/* Cart trigger — button BE the 36×36 circle (parallel to account
   anchor architecture; v1's button-as-row split was retired by v2
   once corner-overlay positioning shipped via F-G1). */
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--rule, rgba(241, 232, 214, 0.16));
	border-radius: 50%;
	background: transparent;
	color: var(--c7-header-text-color);
	cursor: pointer;
	padding: 0;
	overflow: visible;
	text-indent: -9999px;
	white-space: nowrap;
	opacity: 0.85;
	transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button:hover,
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button:focus-visible {
	opacity: 1;
	color: var(--acacia, #D4A24C);
	border-color: var(--acacia, #D4A24C);
}

/* Hide SDK cart-title-wrap span + any direct child svg (the SVG is
   replaced by the ::before glyph below; the title wrap is text only
   that has no editorial value at this register). */
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button > span:first-child,
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button > svg {
	display: none;
}

/* Cart glyph — absolutely centered (single-child layout). */
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	transform: translate(-50%, -50%);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23F1E8D6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h2.5l2.2 10.4a2 2 0 0 0 2 1.6h6.4a2 2 0 0 0 2-1.6L20.5 8H7'/><circle cx='10' cy='20' r='1'/><circle cx='17' cy='20' r='1'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: 0;
	pointer-events: none;
	transition: background-image 0.2s linear;
}
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button:hover::before,
.rhinory-nav__icons .winery-c7-cart-icon > div > div > button:focus-visible::before {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23D4A24C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h2.5l2.2 10.4a2 2 0 0 0 2 1.6h6.4a2 2 0 0 0 2-1.6L20.5 8H7'/><circle cx='10' cy='20' r='1'/><circle cx='17' cy='20' r='1'/></svg>");
}

/* ----- B · Account ring color-shift on logged-in ------------- */

/* One rule on the discriminator. Replaces v1's ::after dot + halo.
   Pending state (briefly-visible hydration window) reads as
   logged-out (default rule above) — explicit no-flash. */
.rhinory-nav__icons
	.winery-c7-login-button[data-winery-c7-customer-state="logged-in"]
	> div > div > a {
	border-color: var(--acacia, #D4A24C);
}
.rhinory-nav__icons
	.winery-c7-login-button[data-winery-c7-customer-state="pending"]
	> div > div > a {
	border-color: var(--rule, rgba(241, 232, 214, 0.16));
}

/* ----- C · Cart count badge appearance ---------------------- */

/* F-D closure (plugin v0.5.6, 2026-05-22): cart-count badge appearance
   now flows through plugin-owned --winery-c7-cart-count-{bg, text-color,
   font-family, font-size, height, min-width, padding, border-radius,
   box-shadow, box-shadow-hover, margin} var surface declared in
   c7-overrides.css :root + @media block. Empty-state hide stays
   theme-side — F-D vars cover appearance when visible; the empty-state
   hide (v0.5.5 consumption brief) is a visibility toggle. Different
   concerns; both stay. */
.rhinory-nav__icons .winery-c7-cart-icon[data-winery-c7-cart-empty="true"] > div > div > button > span:last-child {
	display: none;
}

/* ----- Mobile step-down ------------------------------------- */

/* Theme-native .nav-icon mobile rule sits at 32×32 (style.css
   well above). Match here so the four-icon row stays a unified
   register at <=780px. */
@media (max-width: 780px) {
	.rhinory-nav__icons .winery-c7-login-button > div > div > a,
	.rhinory-nav__icons .winery-c7-cart-icon > div > div > button {
		width: 32px;
		height: 32px;
	}
	.rhinory-nav__icons .winery-c7-login-button > div > div > a::before,
	.rhinory-nav__icons .winery-c7-cart-icon > div > div > button::before {
		width: 14px;
		height: 14px;
	}
	/* Cart-count mobile step-down lives in c7-overrides.css @media block
	   (F-D var override surface — height/min-width/border-radius/font-size). */
}

/* Force outer plugin-owned wrappers to match inner-glyph dimensions —
   AND extend the same clamp to the SDK middle wrappers (`#c7-cart` /
   `.c7-user-nav__cart` and `#c7-account` / `.c7-user-nav__account`)
   so the button/anchor sits exactly at the wrapper's top edge.
   Without the middle-wrapper clamp, the cart middle wrapper paints
   intrinsically 42.34px tall (line-height-driven block height on an
   inline-block); the outer wrapper's `display: flex; align-items:
   center` (from style.css:763-811) then centers that 42-tall middle
   wrapper around the 36-tall outer wrapper's center, pushing the
   middle wrapper (and the button anchored to its top) 3.17px above
   the outer wrapper's top edge. Result: cart glyph painted 3.17px
   above the row centerline shared by hamburger/search/account.
   Cascading the 36×36 clamp through the middle wrappers normalizes
   the entire ancestor chain so the inner button/anchor inherits a
   consistent top:0 within its parent. The F-G1 corner-overlay badge
   still translates outside the chain (the cart button keeps
   `overflow: visible` from v2.1 so the badge remains paintable).
   Brief: docs/briefs/2026-05-17-nav-icon-wrapper-dimensions-fix.md */
.rhinory-nav__icons .winery-c7-login-button,
.rhinory-nav__icons .winery-c7-login-button > div,
.rhinory-nav__icons .winery-c7-login-button > div > div,
.rhinory-nav__icons .winery-c7-cart-icon,
.rhinory-nav__icons .winery-c7-cart-icon > div,
.rhinory-nav__icons .winery-c7-cart-icon > div > div {
  width: 36px;
  height: 36px;
}

@media (max-width: 780px) {
  .rhinory-nav__icons .winery-c7-login-button,
  .rhinory-nav__icons .winery-c7-login-button > div,
  .rhinory-nav__icons .winery-c7-login-button > div > div,
  .rhinory-nav__icons .winery-c7-cart-icon,
  .rhinory-nav__icons .winery-c7-cart-icon > div,
  .rhinory-nav__icons .winery-c7-cart-icon > div > div {
    width: 32px;
    height: 32px;
  }
}

/* Hamburger menu — same circular outline style as nav-search-button
   plus a slightly larger glyph because three stacked rules read smaller
   visually than the search circle.

   The button carries two SVGs (open / close); CSS swaps which one is
   visible based on whether the drawer is currently open. <html> gets
   data-mega-open from rhinory-mega.js — keying off that lets every
   trigger in the page react in lockstep without per-button JS state. */
.rhinory-nav__icon--menu { position: relative; }
.rhinory-nav__icon--menu svg { width: 18px; height: 18px; }
.rhinory-nav__icon--menu .rhinory-nav__icon-menu-close { display: none; }
html[data-mega-open] .rhinory-nav__icon--menu .rhinory-nav__icon-menu-open  { display: none; }
html[data-mega-open] .rhinory-nav__icon--menu .rhinory-nav__icon-menu-close { display: block; }

/* Mobile — the full 5-link nav doesn't fit. Stub links (About, Events)
   drop first; refinement of mobile nav lands with the drawer phase. */
@media (max-width: 1080px) {
	.rhinory-nav__cluster .rhinory-nav__link[data-stub="true"] { display: none; }
	.rhinory-nav__cluster { gap: 22px; }
	.rhinory-nav__icon { width: 32px; height: 32px; }
	.rhinory-nav__logo img { height: 48px; }
}

@media (max-width: 720px) {
	.rhinory-nav.wp-block-group {
		/* TWO tracks, not three. With the left cluster hidden the nav has
		   exactly two in-flow children (logo, icon row). Under the old
		   three-track template the empty third track still contributed its
		   12px gap, parking the icon row 12px shy of the right gutter while
		   the logo sat flush against the left one. */
		grid-template-columns: auto 1fr;
		padding: 12px var(--rhinory-px-mob);
		gap: 12px;
	}

	/* Scoped to .rhinory-nav for SPECIFICITY, not for narrowing — the class is
	   unique to this nav, so the extra qualifier excludes nothing.

	   Written at one class, this rule never applied. WordPress's global
	   block-layout rule `body .is-layout-flex { display: flex }` is (0,1,1) and
	   outranks a bare class at (0,1,0); media queries add no specificity. So the
	   three left-hand links have shipped on every mobile viewport since the
	   drawer landed, and the nav's grid tracks summed to a fixed 391px at every
	   width — which is why EVERY surface overflowed 31px at 360, 16px at 375 and
	   1px at 390, the last of which was long misread as sub-pixel rounding.
	   The logo's 1fr track was crushed to 0px in the process: there has been no
	   wordmark in the mobile header at all.

	   The sibling rule below is already two classes and has always won, which is
	   why only this half of the nav leaked.

	   Same bug class as the three instances in
	   docs/briefs/2026-08-03-mobile-horizontal-overflow.md — a collapse written
	   at lower specificity than the rule it must beat. Brief:
	   docs/briefs/2026-08-03-mobile-width-sweep.md */
	.rhinory-nav .rhinory-nav__cluster--left { display: none; } /* deferred to drawer */
	.rhinory-nav__cluster--right .rhinory-nav__links { display: none; }
}


/* ===================================================================
   CHROME — FOOTER
   Five-column grid (brand 1.4fr + 4 link columns), stacked on tablet,
   single column on mobile. Solid black (deeper than reserve-green) so
   it reads as page-bottom even after a dark .ink section.
   =================================================================== */

.rhinory-footer {
	background: #000;
	color: var(--wp--preset--color--ivory);
	border-top: 1px solid var(--rule);
	padding: 88px 0 40px 0;
}

.rhinory-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.rhinory-footer__grid h5 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin: 0 0 18px 0;
	font-weight: 500;
}

.rhinory-footer__grid ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rhinory-footer__grid a {
	font-size: 14px;
	opacity: .78;
	transition: opacity .2s, color .2s;
}

.rhinory-footer__grid a:hover {
	opacity: 1;
	color: var(--wp--preset--color--acacia);
}

.rhinory-footer__grid a[data-stub="true"]::after {
	content: " ·";
	color: var(--wp--preset--color--acacia);
	margin-left: 3px;
	opacity: .55;
}

/* Brand logo. Was a hand-authored `<a><img class="rhinory-footer__brand-img">`
   inside the footer's single Custom HTML block; now a native `core/image`
   (theme-asset src, custom link to "/") so an operator can swap it in the
   canvas. core/image puts the class hook on the `<figure>`, so the sizing +
   gold filter move onto `.rhinory-footer__logo img` (same recipe the header
   nav logo uses). Paint is unchanged: 60px tall, 14px below, gold-filtered. */
.rhinory-footer__logo {
	margin: 0;
	line-height: 1;
}

.rhinory-footer__logo a { display: block; }

.rhinory-footer__logo img {
	height: 60px;
	width: auto;
	display: block;
	margin-bottom: 14px;
	filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(548%) hue-rotate(1deg) brightness(95%) contrast(88%);
}

/* Brand blurb. Class-targeted rather than `.rhinory-footer__brand p`: after the
   footer dissolve the address, contact and social rows are core paragraphs too,
   so an element selector would leak this treatment (notably `opacity` — which
   would compound on the social links) onto them. */
.rhinory-footer__blurb {
	font-size: 14px;
	line-height: 1.6;
	opacity: .7;
	max-width: 36ch;
	margin: 0 0 18px 0;
}

.rhinory-footer__addr {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin-bottom: 8px;
}

.rhinory-footer__contact {
	font-size: 13px;
	opacity: .7;
	margin-bottom: 24px;
}

.rhinory-footer__social {
	display: flex;
	gap: 14px;
}

.rhinory-footer__social a {
	width: 36px;
	height: 36px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	letter-spacing: 0.08em;
	font-family: var(--wp--preset--font-family--mono);
	opacity: .7;
	transition: opacity .2s, border-color .2s, color .2s;
}

.rhinory-footer__social a:hover {
	opacity: 1;
	border-color: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--acacia);
}

.rhinory-footer__bottom {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .6;
}

/* The footer is native core blocks now (was one Custom HTML block). WP's
   block-layout emits a zero-specificity block-gap top-margin on non-first flow
   children (`:where(.is-layout-flow) > * + *`); null it on the grid, the brand
   column and the bottom row so vertical rhythm stays owned by the explicit
   `.rhinory-footer__*` margins above and the front-end paint is unchanged. Only
   the injected top-margin is reset — the intentional bottom-margins (blurb 18px,
   addr 8px, contact 24px, h5 18px) all outrank the zero-specificity reset and
   survive. */
.rhinory-footer__grid > *,
.rhinory-footer__brand > *,
.rhinory-footer__bottom > * {
	margin-block-start: 0;
}

@media (max-width: 1080px) {
	.rhinory-footer__grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 36px;
	}
	.rhinory-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
	.rhinory-footer { padding: 56px 0 32px 0; }
	.rhinory-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}


/* ===================================================================
   PAGE MAIN — strip WP's default wp-block-group padding/margin from
   the page-level <main> so full-bleed sections (heroes, impact strips)
   reach edge-to-edge. Without this the body bg leaks through as a
   horizontal bar between the sticky nav and the first section.
   =================================================================== */

.rhinory-front,
.rhinory-conservation,
.rhinory-visit {
	padding: 0;
	margin: 0;
	max-width: none;
}


/* ===================================================================
   SECTION 01 — IMPACT STRIP (#receipts)
   Full-bleed black band immediately after the hero. Heading row + 6
   equal cells separated by gold rule lines. Mono labels, Cormorant
   gold display numbers, mono source attribution. Collapses 6→3→2→1
   columns; rule lines flip from vertical to horizontal as it stacks.
   =================================================================== */

.impact-strip {
	background: #000;
	color: var(--wp--preset--color--ivory);
	border-block: 1px solid var(--rule);
}

/* Reset wp-block-group root-padding behavior on the impact-strip
   wrapper so the band reaches edge-to-edge; .impact-head + .impact-grid
   inside still have .wrap or full-width as the prototype did. */
.impact-strip.wp-block-group {
	padding: 0;
	margin: 0;
}

/* Inner head (.wrap.impact-head) — wp-block-group root-padding-aware
   alignment would otherwise add theme.json gutters on top of .wrap's
   own gutters. Strip them. */
.wp-block-group.wrap.impact-head {
	padding-top: 64px;
	padding-bottom: 36px;
	margin: 0 auto;
}

/* impact-head-row left col — composed wp:group needs zero margin so
   it aligns flush with the audit-stamp on the right. */
.impact-head-row__l.wp-block-group {
	margin: 0;
	padding: 0;
}

.impact-head {
	padding: 64px 0 36px 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-bottom: 1px solid var(--rule);
}

.impact-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.impact-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ivory);
	max-width: 22ch;
	margin: 0;
}

/* The eyebrow paragraph inside .impact-head-row__l also resets margin
   because core/paragraph defaults add space the prototype <span> didn't. */
.impact-head-row__l > .eyebrow { margin: 0 0 18px 0; }

.impact-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--acacia);
}

/* Audit stamp — gold-bordered tick + label + sub-label, anchors the
   501(c)(3) trust signal on the right side of the heading row. */
.audit-stamp {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid rgba(212, 162, 76, .45);
	border-radius: 2px;
	background: rgba(212, 162, 76, .05);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 243, 224, .85);
	align-self: flex-end;
	flex-shrink: 0;
}

.audit-tick {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--acacia);
	display: grid;
	place-items: center;
	font-size: 14px;
	font-family: inherit;
}

/* Composed from wp:paragraph blocks now, so target the explicit
   __title / __sub classNames instead of bare descendant tags
   (commit 14 editor-pass refactor — paragraphs are editable in
   Gutenberg). Margin reset is required because core/paragraph adds
   default block margins that the prototype's <strong>/<span> didn't. */
.audit-stamp__title {
	display: block;
	color: var(--wp--preset--color--acacia);
	font-weight: 500;
	margin: 0 0 2px 0;
	letter-spacing: 0.16em;
}

.audit-stamp__sub {
	display: block;
	opacity: .75;
	font-size: 9px;
	letter-spacing: 0.12em;
	margin: 0;
}

/* Reset wp-block-group default styles when used as the audit-stamp's
   inner copy column — group wrapper would otherwise add gap/padding
   from theme.json that breaks the inline layout. */
.audit-stamp__copy.wp-block-group {
	display: block;
	margin: 0;
	padding: 0;
}

/* The 6-cell grid. Cells share a vertical gold rule between them; the
   last cell drops its trailing rule. .src pins to the bottom via
   margin-top:auto so cells with shorter labels stay visually balanced. */
.impact-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: stretch;
}

.impact-cell {
	padding: 36px 26px;
	border-right: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

/* Reset core/paragraph margins inside cells — the prototype used <div>s
   which had no implicit margin; wp:paragraph adds default block margins
   from theme.json. Flex gap on the cell handles spacing. */
.impact-cell.wp-block-group { margin: 0; }
.impact-cell .num,
.impact-cell .lbl,
.impact-cell .src { margin: 0; }

/* Composed wp:group inside impact-grid — clear root padding behavior
   so the grid stays edge-to-edge. */
.impact-grid.wp-block-group { padding: 0; margin: 0; }

.impact-cell:last-child { border-right: none; }

.impact-cell .num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 44px;
	line-height: 1;
	color: var(--wp--preset--color--acacia);
	letter-spacing: -0.01em;
}

.impact-cell .lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--ivory);
	opacity: .74;
	line-height: 1.5;
}

.impact-cell .src {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: .7;
	padding-top: 18px;
}

@media (max-width: 1080px) {
	.impact-grid { grid-template-columns: repeat(3, 1fr); }
	.impact-cell:nth-child(3n) { border-right: none; }
	.impact-cell:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
}

@media (max-width: 640px) {
	.impact-grid { grid-template-columns: repeat(2, 1fr); }
	.impact-cell { padding: 28px 20px; }
	.impact-cell:nth-child(odd)  { border-right: 1px solid var(--rule); }
	.impact-cell:nth-child(even) { border-right: none; }
	.impact-cell:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--rule); }
	.impact-cell .num { font-size: 36px; }
}


/* ===================================================================
   HERO FILM (rhinory/hero-film custom block)
   Cinematic stage. Starts BELOW the sticky chrome — the prototype ships
   pull-under CSS but renders with --chrome-h:0 (its measure script runs
   before partials.js injects the chrome), so the approved design has
   the hero under the bar only after scroll. See the retired pull-up
   note near the .rhinory-front reset. Each .film-shot is absolutely
   positioned and cross-fades via the .is-active opacity flip; view JS
   drives a continuous KB transform across the full visible window so
   opacity transitions don't snap.
   =================================================================== */

.hero {
	position: relative;
	height: 100svh;
	background: var(--wp--preset--color--reserve);
	display: grid;
	align-items: end;
	overflow: hidden;
}

.hero-film {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0A0F0C;
}

/* The shot frame — transform + opacity live here so the cinematic timeline
   animates one element per shot. The <img>/<video> child fills the frame
   via object-fit:cover (was background-size:cover before commit 6.5).
   The change earned WebP delivery: <picture><source> wraps the <img> via
   rhinory_core_picture(), browsers fetch WebP when the sibling exists. */
.film-shot {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 2.0s ease-in-out;
	will-change: opacity, transform;
	transform: scale(1.08);
}

.film-shot.is-active { opacity: 1; }

/* The <picture> wrapper is display:contents so the <img> child positions
   directly against .film-shot — same behavior as before, no extra layer. */
.film-shot picture { display: contents; }

.film-shot__img,
.film-shot__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position is set per-shot via inline style from the editor's
	   focal control. Filter matches the prototype's cinematic grade. */
	filter: saturate(0.92) contrast(1.04);
}

/* Cinematic scrim — darker bottom for headline legibility, soft
   radial vignette to draw the eye toward the centered headline. */
.hero-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(10,15,12,0.55) 0%, rgba(10,15,12,0.18) 28%, rgba(10,15,12,0.20) 55%, rgba(10,15,12,0.78) 100%),
		radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(10,15,12,0.55) 100%);
}

/* Subtle film grain — SVG turbulence as data URL keeps it bandwidth-free. */
.hero-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: .22;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	/* bottom 172px per v12-rev "A1" (room above the 01–14 chapter
	   scrubber); base stylesheet's 124px is superseded. Top 24px = the
	   prototype's rendered calc(--chrome-h + 24px) with its runtime
	   --chrome-h of 0 (hero no longer pulled under the chrome). */
	padding: 24px 0 172px 0;
	max-height: 100%;
}

@media (max-width: 760px) {
	/* Phones: viewport-height responsive rather than hard 100svh — the
	   hero grows past 92svh if the stacked content needs it
	   (prototypes/12/styles.css 2585). */
	.hero { height: auto; min-height: 92svh; }
	.hero-inner { padding-bottom: 128px; } /* v12-rev A1 mobile value */
}

.hero-headline {
	font-family: var(--wp--preset--font-family--display);
	/* weight 600 per v12-pass4 "REFINEMENT 1" (heavier Cormorant survives
	   the photo overlay); max-width 20ch per the cd-n-alpha line-control
	   block so "where every bottle" holds on one line — the h1 is three
	   deliberate <br> lines (prototypes/12/01-homepage.html:1312). */
	font-weight: 600;
	font-size: clamp(40px, 5.0vw, 76px);
	color: var(--wp--preset--color--ivory);
	max-width: 20ch;
	line-height: 0.94;
	letter-spacing: -0.025em;
	margin: 0 0 22px 0;
}

.hero-headline em {
	font-style: italic;
	font-weight: 600; /* v12-pass4: em rides the same 600 as the headline */
	color: var(--wp--preset--color--acacia);
}

.hero-sub {
	font-size: 17px;
	line-height: 1.55;
	max-width: 520px;
	color: var(--wp--preset--color--ivory);
	opacity: .86;
	margin: 0 0 28px 0;
}

.hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

/* Slim 2-col meta row — open hours on the left, reservations on the right. */
.hero-meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	flex-wrap: wrap;
	border-top: 1px solid var(--rule);
	padding-top: 22px;
	margin-top: 32px;
}

.hero-meta-slim {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px 48px;
	padding-top: 20px;
	border-top: 1px solid rgba(212, 162, 76, .18);
}

.hero-meta-slim .hero-meta-col-end { text-align: right; }

.hero-meta-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12px;
	color: var(--wp--preset--color--ivory);
	opacity: .78;
}

.hero-meta-col .lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: 1;
}

/* "Live" status pip — green dot pulse next to the open hours line. */
.live-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.live-pip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #5fbf6f;
	box-shadow: 0 0 0 0 rgba(95, 191, 111, 0.6);
	animation: rhinory-pip-pulse 2.4s ease-in-out infinite;
}

@keyframes rhinory-pip-pulse {
	0%, 100% { box-shadow: 0 0 0 0   rgba(95, 191, 111, 0.5); }
	50%      { box-shadow: 0 0 0 6px rgba(95, 191, 111, 0); }
}

/* Vertical "Scroll · The Story" indicator at the right edge. */
.hero-scroll {
	position: absolute;
	right: 40px;
	bottom: 40px;
	z-index: 5;
	writing-mode: vertical-rl;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .7;
	display: flex;
	align-items: center;
	gap: 14px;
}

.hero-scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 48px;
	background: var(--wp--preset--color--ivory);
	opacity: .5;
	animation: rhinory-scroll-pulse 2.4s ease-in-out infinite;
}

@keyframes rhinory-scroll-pulse {
	0%, 100% { transform: scaleY(0.4); transform-origin: top; }
	50%      { transform: scaleY(1.0); transform-origin: top; }
}

/* Chapter HUD (reel/timeline scrubber) REMOVED 2026-07-13 — design override
   per fidelity-fix-3 goal; the pinned prototype still ships it, the current
   design does not. The shot montage itself is untouched. */

@media (max-width: 720px) {
	.hero-scroll { right: 20px; bottom: 28px; }
	.hero-meta-slim { grid-template-columns: 1fr; gap: 14px; }
	.hero-meta-slim .hero-meta-col-end { text-align: left; }
	.hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.film-shot { transition: none; }
	.hero-scroll::after,
	.live-pip { animation: none; }
}


/* ===================================================================
   PATHS — shared primitive (homepage + Visit page).
   Equal-width 4-column grid of anchor cards. Each card hovers to a
   reserve-green inverted state and the arrow chip flips gold.
   The CSS lives in style.css cross-section; each page contributes its
   own pattern with page-specific copy.
   =================================================================== */

.paths {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--rule-dk);
}

/* Composed wp:group container reset — wp-block-group adds default
   block flow margins/padding from theme.json that fight the grid. */
.paths.wp-block-group {
	margin: 0;
	padding: 0;
}

.path-card {
	position: relative;
	padding: 36px 28px 32px 28px;
	border-right: 1px solid var(--rule-dk);
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 300px;
	transition: background .25s, color .25s;
}

.path-card:last-child { border-right: none; }

.path-card:hover {
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--ivory);
}

.path-card:hover .path-arrow {
	background: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--reserve);
}

.path-card .path-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--acacia);
}

.path-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0;
}

.path-card h3 em {
	font-style: italic;
	font-weight: 300;
}

.path-card p {
	font-size: 14px;
	line-height: 1.55;
	opacity: .82;
	margin: 0;
	flex: 1;
}

.path-arrow {
	align-self: flex-start;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: grid;
	place-items: center;
	transition: background .2s, color .2s, border-color .2s;
}

.path-arrow svg { width: 14px; height: 14px; }

@media (max-width: 1080px) {
	.paths { grid-template-columns: repeat(2, 1fr); }
	.path-card:nth-child(2) { border-right: none; }
	.path-card:nth-child(-n+2) { border-bottom: 1px solid var(--rule-dk); }
}

@media (max-width: 560px) {
	.paths { grid-template-columns: 1fr; }
	.path-card { border-right: none; border-bottom: 1px solid var(--rule-dk); min-height: auto; }
	.path-card:last-child { border-bottom: none; }
	.path-card h3 { font-size: 34px; }
}


/* ===================================================================
   SECTION 03 — THIS WEEK (#now)
   Quarterly-curated 5-card grid on a reserve-2 background. Each card
   is a full-area anchor with mono tag, italic Cormorant title, body
   line, and a price+CTA foot pinned to the bottom via margin-top:auto.
   Last card ("give") gets a clay-tinted gradient variant to flag the
   foundation-gift differently from the commerce surface.
   =================================================================== */

.now-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 18px;
	align-items: end;
	padding-bottom: 32px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--rule);
}

/* Composed wp:group reset — flex layout still drives the row but
   wp-block-group adds default block flow margins/padding. Override
   so the head sits flush against the grid below. */
.now-head.wp-block-group { padding: 0; margin-bottom: 48px; }
.now-head-l.wp-block-group,
.now-head-r.wp-block-group { padding: 0; margin: 0; }
.now-head-l > .eyebrow { margin: 0 0 6px 0; }
.now-head-l > h2 { margin: 0; }
.now-head-r > .now-meta { margin: 0; }

.now-head h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(36px, 4.4vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.012em;
	margin: 6px 0 0 0;
	color: var(--wp--preset--color--ivory);
}

.now-head h2 em {
	color: var(--wp--preset--color--acacia);
	font-style: italic;
	font-weight: 400;
}

/* Mono pill on the right side of the head row — the "curated quarterly"
   meta. Outlined, no fill, low-opacity ivory. */
.now-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .55;
	padding: 8px 12px;
	border: 1px solid var(--rule);
}

/* 5-up grid; gap is 1px so the gold rule lines look like cell borders
   without doubling. Inner cards reset to reserve background. */
.now-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}

/* Composed wp:group reset — the gap+bg trick for the rule lines
   needs the group to behave as a clean grid container. */
.now-grid.wp-block-group { padding: 0; margin: 0; }

.now-card {
	background: var(--wp--preset--color--reserve);
	padding: 28px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--ivory);
	transition: background .25s ease;
	min-height: 280px;
}

/* Button-as-now-card reset — the reserveAsTrigger:true cards render as
   <button data-rhinory-reserve> (click opens the reservation drawer rather
   than navigating). The global `button[data-rhinory-reserve]` reset at
   line 9583 zeros padding/background — that's correct for surfaces like
   the visit-page CTAs whose class CSS doesn't restate them, but it
   shadows the .now-card class rule for the now-card-as-button case.
   This higher-specificity selector (button + attr + class = 0,2,1)
   wins over both `.now-card` (0,1,0) AND `button[data-rhinory-reserve]`
   (0,1,1) so the Sunset Sip card — only reserveAsTrigger now-card on the
   homepage — renders identically to its anchor-rendered row siblings.
   Without this, Sunset Sip renders transparent + zero-padding and is
   visibly misaligned. */
button[data-rhinory-reserve].now-card {
	background: var(--wp--preset--color--reserve);
	padding: 28px 22px 22px;
	width: 100%;
	color: var(--wp--preset--color--ivory);
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 280px;
}

.now-card:hover { background: rgba(212, 162, 76, 0.04); }

.now-card .now-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: .95;
	padding-bottom: 14px;
	border-bottom: 1px dashed rgba(212, 162, 76, 0.32);
}

.now-card .now-title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ivory);
}

.now-card .now-line {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ivory);
	opacity: .7;
}

.now-card .now-foot {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px dashed rgba(241, 232, 214, 0.14);
}

.now-card .now-price {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .62;
}

.now-card .now-cta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}

/* "Give" variant — clay-tinted gradient and clay-on-clay accents to
   read as a different beat than the commerce-pillar four. */
.now-card-give {
	background: linear-gradient(180deg, rgba(194, 106, 61, 0.10), var(--wp--preset--color--reserve) 75%);
}

.now-card-give .now-tag,
.now-card-give .now-cta { color: var(--acacia); }

@media (max-width: 1100px) {
	.now-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
	.now-grid { grid-template-columns: repeat(2, 1fr); }
	.now-head { grid-template-columns: 1fr; gap: 12px; align-items: start; }
}

@media (max-width: 520px) {
	.now-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   SECTION 04 — DIFFERENTIATOR (#different)
   3 cards on a reserve-green band. Gap is 1px so the gold rule reads
   as cell borders without doubling. Each card has a circular
   gold-stroke icon, mono key, display headline w/ gold-italic accent,
   body. Cards lift to reserve-2 on hover.
   =================================================================== */

.diff-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}

/* Composed wp:group reset — gap+bg trick needs a clean grid container. */
.diff-grid.wp-block-group { padding: 0; margin: 0; }

.diff-card {
	background: var(--wp--preset--color--reserve);
	padding: 48px 36px 44px 36px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	transition: background .25s;
}

.diff-card:hover { background: var(--wp--preset--color--reserve-2); }

.diff-icon {
	width: 54px;
	height: 54px;
	color: var(--wp--preset--color--acacia);
	border: 1px solid var(--rule);
	border-radius: 50%;
	display: grid;
	place-items: center;
}

.diff-icon svg { width: 24px; height: 24px; }

.diff-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}

.diff-card h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--wp--preset--color--ivory);
}

.diff-card h3 em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--acacia);
}

.diff-card p {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--wp--preset--color--ivory);
	opacity: .86;
	margin: 0;
}

@media (max-width: 1100px) {
	.diff-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   SECTION 05 — BLAKE (#blake)
   Full-bleed split: 1.1fr image + 1fr copy. Image is a CSS
   background (cover-fit) with a right-edge gradient that bleeds the
   reserve-green into the photo so the text column has clean contrast
   regardless of where the image's edge falls. Copy column hosts:
   eyebrow → italic-Cormorant headline → 2 body paras → 3-cell stats
   row → welfare chips → welfare-note callout → CTA row.
   =================================================================== */

/* v4-era .blake (image-left/copy-right hero) is superseded by v6 bk5-*
   structure (bk5-hero on top + bk5-slab full-width below). The v4 grid
   layout would force editor preview side-by-side (Erik defect #3) since
   the editor canvas can't match the `section.blake#blake` ID selector
   that overrides this rule on front-end. Background is unset here
   because section.blake#blake { background:var(--ink) } at line 10436
   takes precedence on both editor and front-end (selector specificity
   matches via class alone in editor since Gutenberg replaces the anchor
   id with its block-id; the .blake class still applies). */
.blake {
	background: var(--wp--preset--color--reserve);
}

/* Composed wp:group reset — section is full-bleed grid, no padding. */
.blake.wp-block-group { padding: 0; margin: 0; }
.blake-img.wp-block-group,
.blake-copy.wp-block-group { margin: 0; }
.blake-stats.wp-block-group,
.welfare-chips.wp-block-group,
.welfare-note.wp-block-group,
.blake-ctas.wp-block-group { padding: 0; }
.blake-stats.wp-block-group { margin-top: 38px; }
.welfare-chips.wp-block-group { margin-top: 28px; }
.welfare-note.wp-block-group { margin-top: 24px; }
.blake-ctas.wp-block-group { margin-top: 32px; }

/* Reset paragraph margins inside the copy column — h2 + 2 paras +
   stats/chips/note/ctas all want explicit spacing only via the
   parent group margins above, not theme.json paragraph defaults. */
.blake-copy > .eyebrow { margin: 0 0 18px 0; }
.blake-copy > h2 { margin: 0 0 28px 0; }
.blake-copy > p { margin: 0 0 18px 0; }
.welfare-note__copy { margin: 0; flex: 1; }
/* .welfare-note__lead style already declared above (commit 6) */

/* Container for the Blake portrait. Hosts a wp:image figure (commit 6.5
   change — was inline-style background-image) so the editor can swap the
   portrait via MediaUpload AND the rhinory_core_image_to_picture filter
   wraps the <img> with WebP. The figure positions absolutely inside this
   container with object-fit:cover to match the original cover behavior.
   The right-edge ::after gradient stays on .blake-img above the image. */
.blake-img {
	position: relative;
	min-height: 720px;
	overflow: hidden;
	background: var(--wp--preset--color--ink); /* fallback while the img loads */
}

.blake-img .wp-block-image,
.blake-img figure {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.blake-img picture { display: contents; }

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

/* Right-edge gradient — bleeds reserve-green into the photo so the
   image→copy seam reads as one composition, not a hard column break.
   Sits above the figure via z-index. */
.blake-img::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(15,26,20,0) 70%, rgba(15,26,20,0.5) 100%);
}

.blake-copy { padding: 96px 80px; }

.blake-copy h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(44px, 5vw, 72px);
	line-height: 1.05;
	margin: 18px 0 28px 0;
	color: var(--wp--preset--color--ivory);
}

/* "Reason this place exists" — semantic <strong> turned into the gold
   pull. Bypasses italic so the emphasized phrase reads as a fact, not
   a flourish. */
.blake-copy h2 strong {
	font-weight: 500;
	font-style: normal;
	color: var(--wp--preset--color--acacia);
}

.blake-copy p {
	font-size: 16px;
	line-height: 1.65;
	opacity: .86;
	max-width: 54ch;
	margin: 0 0 18px 0;
}

.blake-stats {
	margin-top: 38px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--rule);
}

.blake-stats .cell {
	padding: 24px 0;
	border-right: 1px solid var(--rule);
}

.blake-stats .cell:last-child { border-right: none; }

.blake-stats .num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 34px;
	color: var(--wp--preset--color--acacia);
	line-height: 1;
}

/* The "lb" suffix on Blake's weight stays in the same Cormorant family
   but at 18px so it reads as a unit, not part of the number. */
.blake-stats__unit {
	font-size: 18px;
	color: var(--wp--preset--color--rhino);
	margin-left: 4px;
}

.blake-stats .lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .7;
	margin-top: 6px;
}

.welfare-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.welfare-chips .wc-chip {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .78;
	padding: 8px 12px;
	border: 1px solid rgba(212, 162, 76, 0.32);
	background: rgba(212, 162, 76, 0.04);
}

.welfare-note {
	margin-top: 24px;
	padding: 18px 22px;
	border: 1px solid var(--rule);
	background: rgba(212, 162, 76, 0.06);
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ivory);
	opacity: .88;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.welfare-note .pip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--acacia);
	flex: 0 0 8px;
	margin-top: 7px;
}

.welfare-note__lead {
	color: var(--wp--preset--color--acacia);
	font-weight: 500;
}

.blake-ctas {
	margin-top: 32px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

@media (max-width: 1100px) {
	.blake { grid-template-columns: 1fr; }
	.blake-img { min-height: 480px; }
	.blake-copy { padding: 64px 40px; }
}

@media (max-width: 720px) {
	.blake-copy { padding: 48px 22px; }
	.blake-stats { grid-template-columns: 1fr; }
	.blake-stats .cell { border-right: none; border-bottom: 1px solid var(--rule); }
	.blake-stats .cell:last-child { border-bottom: none; }
}


/* ===================================================================
   PULL QUOTE — Bobko field-note (between Blake and the wine showcase).
   Reserve-green band with a giant gold curly-quote behind italic
   Cormorant copy and a mono attribution row. The decorative quote
   uses ::before so it stays out of the document flow / a11y tree.
   =================================================================== */

.pullquote {
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--ivory);
	padding: 120px 0;
	border-block: 1px solid var(--rule);
	position: relative;
	overflow: hidden;
}

/* Composed wp:group reset — full-bleed band with .wrap inside. */
.pullquote.wp-block-group { padding-left: 0; padding-right: 0; }

/* The blockquote text is now a wp:quote which wraps content in <p>.
   .pq-text styles applied to the blockquote; the inner <p> needs
   margin: 0 and inherits the typography. */
.pq-text.wp-block-quote { border-left: none; padding: 0; }
.pq-text.wp-block-quote > p { margin: 0; font: inherit; color: inherit; }
.pq-text.wp-block-quote > cite { display: none; }

/* pq-attr is now a flex group of 3 paragraphs — reset paragraph
   margins so they sit inline with the dot separator. */
.pq-attr.wp-block-group > p { margin: 0; }
.pq-attr.wp-block-group { margin-top: 0; }

.pullquote::before {
	content: "\201C";
	position: absolute;
	top: -40px;
	left: 6%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 380px;
	line-height: 1;
	color: var(--wp--preset--color--acacia);
	opacity: 0.10;
	pointer-events: none;
}

.pq-text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 18px 0 28px 0;
	max-width: 24ch;
	color: var(--wp--preset--color--ivory);
}

.pq-text em {
	font-style: italic;
	color: var(--wp--preset--color--acacia);
	font-weight: 400;
}

.pq-attr {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .7;
}

.pq-attr .pq-dot { color: var(--wp--preset--color--acacia); }

@media (max-width: 720px) {
	.pullquote { padding: 80px 0; }
	.pullquote::before { font-size: 240px; top: -20px; }
}


/* ===================================================================
   SECTION 06 — WINE SHOWCASE (#wine)
   4-up grid of wine cards on a paper background. Each card hosts a
   4:5-aspect bottle image area (with collection badge + optional
   scarcity flag) and a meta block (origin, title, description,
   impact line, price + Add-to-Cart). Card lifts and gold-accents on
   hover; image area zooms slightly via background-size growth.

   Phase-1 placeholder: bottle images use a colored solid background
   (no real photo referenced). Once the C7 catalog is live, this
   section becomes a core/query loop with wp-commerce7/wine-card and
   bundle-card blocks; the CSS below carries over because the plugin's
   render output uses the same .wine-card / .wine-img / .wine-meta
   structural shape.
   =================================================================== */

.wine-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* Composed wp:group reset — gap is the rule between cards. */
.wine-grid.wp-block-group { padding: 0; margin: 0; }
.wine-foot-row.wp-block-group { padding: 0; }
.wine-foot-row__ctas.wp-block-group { padding: 0; margin: 0; }
.wine-foot-row .wine-foot-row__caption { margin: 0; }

/* Real-image variant — when imageUrl is set the wine-img hosts a
   <picture><img>, positioned absolutely with object-fit:cover to
   match the placeholder's coverage behavior. */
.wine-img--media {
	position: relative;
}
.wine-img--media picture { display: contents; }
.wine-img--media .wine-img__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.wine-card {
	background: var(--wp--preset--color--reserve-2);
	border: 1px solid var(--rule);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s, border-color .25s;
	color: var(--wp--preset--color--ivory);
}

.wine-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--acacia);
}

.wine-img {
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	transition: background-size .8s ease;
}

.wine-card:hover .wine-img { background-size: 115% auto; }

/* Placeholder variant — used while bottle photography is in production.
   Reads as a deliberate solid silhouette (color is set inline per card),
   not as a "missing image". Once a real photo loads in, drop the modifier. */
.wine-img--placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.18) 100%),
		radial-gradient(60% 50% at 50% 50%, rgba(212,162,76,0.06), transparent 70%);
	pointer-events: none;
}

.wine-img .badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 10px;
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--acacia);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--acacia);
	z-index: 2;
}

/* Scarcity flag — bottom-left, frosted dark backdrop, gold border. Used
   on small-batch / limited releases (NV Keras Wijde, single-vineyard). */
.wine-img .scarcity {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: rgba(15, 15, 15, .78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(212, 162, 76, .5);
	color: var(--wp--preset--color--acacia);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 7px 10px;
	z-index: 3;
}

.wine-meta {
	padding: 22px 22px 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.wine-meta .origin {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}

.wine-meta h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	margin: 0;
	color: var(--wp--preset--color--ivory);
}

.wine-meta p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ivory);
	opacity: .92;
	margin: 0;
	flex: 1;
}

/* Conservation impact line — gold mono caps, dashed top border. The
   <strong> bumps to ivory + tighter letter-spacing for emphasis. */
.impact-line {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	padding: 10px 0;
	border-top: 1px dashed rgba(212, 162, 76, 0.32);
	margin-top: 6px;
}

.impact-line strong {
	color: var(--wp--preset--color--ivory);
	font-weight: 500;
	letter-spacing: 0.14em;
}

.wine-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
}

.wine-foot .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	color: var(--wp--preset--color--ivory);
}

.wine-foot .add {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

/* The .section.paper variant flips the badge + meta colors so they
   read on warm-paper background, not on the dark card. The card itself
   stays reserve-2 inside; only the surrounding section bg changes. */
.section.paper .wine-card { color: var(--wp--preset--color--ivory); }

/* Closing row beneath the grid — region tags on the left, dual CTAs
   on the right. Border-top ties it to the grid. */
.wine-foot-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--rule-dk);
}

.wine-foot-row__caption {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--acacia);
	margin: 0;
}

.wine-foot-row__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

@media (max-width: 1080px) {
	.wine-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.wine-grid { grid-template-columns: 1fr; }
	.wine-foot-row { flex-direction: column; align-items: flex-start; }
}


/* ===================================================================
   SECTION 07 — EXPERIENCES (#visit)
   Light-on-dark surprise: cards are ivory/cream against the section's
   ink background. 3-up grid, each card has a 4:3 image, mono meta row
   (price/capacity/age/duration), display title, body, foot with price
   + Reserve, plus a "Shop the wines from this flight" link below the
   foot border. .exp-img + .exp-grid are shared with Visit.html (which
   uses .exp-row for editorial 16:10 splits — same image primitive,
   different layout). .exp-card composition is homepage-only.
   =================================================================== */

.exp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* Composed wp:group reset — gap drives card spacing. */
.exp-grid.wp-block-group { padding: 0; margin: 0; }

.exp-card {
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--reserve);
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(15, 26, 20, 0.08);
	transition: transform .25s, box-shadow .25s;
}

.exp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-deep);
}

.exp-img {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: background-size .8s ease;
}

.exp-card:hover .exp-img { background-size: 115% auto; }

.exp-body {
	padding: 28px 28px 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.exp-body h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1.08;
	margin: 0;
	letter-spacing: -0.01em;
}

.exp-meta-row {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--acacia);
}

.exp-body p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--reserve);
	opacity: .82;
	margin: 0;
	flex: 1;
}

.exp-foot {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(15, 26, 20, 0.12);
	padding-top: 18px;
	margin-top: 6px;
}

.exp-foot .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
}

.exp-foot__sub {
	font-size: 11px;
	opacity: .6;
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-left: 4px;
}

.exp-foot a,
.exp-foot button,
.exp-foot button[data-rhinory-reserve] {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--acacia);
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}

/* "Shop the wines from this flight" — secondary link below the foot,
   dashed top border ties it to the card foot rather than floating free. */
.exp-shop-link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--reserve);
	opacity: .7;
	padding-top: 10px;
	border-top: 1px dashed rgba(15, 26, 20, 0.18);
}

.exp-shop-link:hover {
	opacity: 1;
	color: var(--acacia);
}

@media (max-width: 1080px) {
	.exp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.exp-grid { grid-template-columns: 1fr; }
}


/* ===================================================================
   SECTION 08 — MAP / FRONT LINES (#map)
   Reserve-2 background. Two-column layout: hand-drawn SVG world on the
   left, 4-card partner stack on the right. Map has a Texas + South
   Africa silhouette pair, a great-circle arc TX→Care for Wild, and a
   Kenya pin (Ol Pejeta) with leader-line labels in JetBrains Mono.
   Grid collapses to single column under 880px.
   =================================================================== */

.map-section {
	background: var(--wp--preset--color--reserve-2);
	color: var(--wp--preset--color--ivory);
	border-block: 1px solid var(--rule);
}

.map-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 60px;
	align-items: center;
}

/* Composed wp:group resets for the map section. */
.map-grid.wp-block-group { padding: 0; margin: 0; }
.map-vis.wp-block-group { padding: 32px; margin: 0; }
.map-layer-stack.wp-block-group { padding: 0; margin: 0; }

.map-vis {
	position: relative;
	aspect-ratio: 5 / 4;
	background: var(--wp--preset--color--reserve);
	border: 1px solid var(--rule);
	padding: 32px;
	overflow: hidden;
}

.map-vis__svg {
	width: 100%;
	height: 100%;
}

.map-layer-card {
	display: flex;
	gap: 18px;
	padding: 22px 0;
	border-bottom: 1px solid var(--rule);
	align-items: flex-start;
}

.map-layer-card:last-child { border-bottom: none; }

.map-layer-card .pin {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--acacia);
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--acacia);
}

.map-layer-card h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 22px;
	margin: 0 0 8px 0;
	color: var(--wp--preset--color--ivory);
}

.map-layer-card p {
	font-size: 14px;
	line-height: 1.55;
	opacity: .78;
	margin: 0;
}

@media (max-width: 880px) {
	.map-grid { grid-template-columns: 1fr; gap: 40px; }
}


/* ===================================================================
   SECTION 09 — IMPACT DASHBOARD (#impact)
   Foundation's audited 2024 ledger card + 6 partner tiles in a 3×2 grid.
   .ledger-card is shared with Conservation.html and WineClub.html
   (they use ledger-style cards in their own contexts). Same pattern:
   gold left-edge accent stripe, header row with title + 501(c)(3) stamp,
   line items with mono account number + name + animated bar + Cormorant
   amount, total row, methodology footnote, ghost CTA.
   =================================================================== */

/* Ledger — single card. Uses linear-gradient overlay rather than solid
   bg so it sits as a softer card on the surrounding green. */
.dash {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

/* Composed wp:group resets for the dashboard. */
.dash.wp-block-group { padding: 0; margin: 0; }
.ledger-card.wp-block-group { padding: 32px 32px 28px; margin: 0; }
.ledger-head.wp-block-group { padding: 0 0 18px 0; margin: 0 0 10px 0; }
.ledger-head__l.wp-block-group,
.lc-stamp.wp-block-group { padding: 0; margin: 0; }
.ledger-rows.wp-block-group { padding: 0; margin: 0; }
.ledger-foot.wp-block-group { padding: 16px 0 0 0; margin-top: 18px; }
.ledger-card .lc-title,
.ledger-card .lc-period,
.ledger-card .lf-meta,
.ledger-card .ledger-method { margin: 0; }
.ledger-card .lc-period { margin-top: 6px; }
.ledger-card .ledger-method { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-dk); }
.dash-tiles.wp-block-group { padding: 0; margin: 0; }

/* Editor stamp label override — was a <span> with .audit-stamp-style
   visual hooks; the lc-stamp__label class on the wp:paragraph picks up
   the same Cormorant gold treatment as the original lc-stamp <span>. */
.lc-stamp__label {
	color: var(--wp--preset--color--acacia);
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.ledger-card {
	background: linear-gradient(180deg, rgba(241, 232, 214, 0.04), rgba(241, 232, 214, 0.01));
	border: 1px solid var(--rule);
	padding: 32px 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
}

/* Gold left-edge accent — flags this as a primary-statement card. */
.ledger-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: var(--wp--preset--color--acacia);
}

.ledger-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	padding-bottom: 18px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--rule);
}

.lc-title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	color: var(--wp--preset--color--ivory);
	line-height: 1.1;
}

.lc-period {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .6;
	margin-top: 6px;
}

/* "501(c)(3)" stamp — slight rotation so it reads as a notarial stamp. */
.lc-stamp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid rgba(212, 162, 76, 0.45);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
	transform: rotate(-2deg);
}

.lc-stamp-tick {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--acacia);
	display: grid;
	place-items: center;
	font-size: 10px;
}

/* Each .lr line item — 4-col grid: account num, name, animated fill bar,
   amount. Bottom border is dotted so total row's solid border reads as
   the closure. */
.ledger-rows { display: flex; flex-direction: column; }

.lr {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) minmax(80px, 1.5fr) auto;
	gap: 14px;
	align-items: center;
	padding: 13px 0;
	border-bottom: 1px dotted rgba(241, 232, 214, 0.14);
}

.lr-acct {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--acacia);
	opacity: .75;
}

.lr-name {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .85;
}

.lr-bar {
	position: relative;
	height: 3px;
	background: rgba(241, 232, 214, 0.08);
	overflow: hidden;
}

/* Animated fill — scales from 0 to 1 over 1.4s on first reveal so the
   ledger feels "computed", not just rendered. inline-style `width` on
   the inner span sets the proportion of the fill. */
.lr-bar > span {
	position: absolute;
	inset: 0 auto 0 0;
	background: var(--wp--preset--color--acacia);
	transform-origin: left;
	transform: scaleX(0);
	animation: rhinory-lr-fill 1.4s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes rhinory-lr-fill {
	to { transform: scaleX(1); }
}

.lr-amt {
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	color: var(--wp--preset--color--ivory);
	text-align: right;
	min-width: 96px;
	letter-spacing: -0.01em;
}

.lr-total {
	border-top: 1px solid var(--rule);
	border-bottom: none;
	margin-top: 6px;
	padding-top: 18px;
}

.lr-total .lr-acct  { color: var(--wp--preset--color--acacia); opacity: 1; font-size: 14px; }
.lr-total .lr-name  { color: var(--wp--preset--color--ivory); opacity: 1; font-weight: 500; }
.lr-total .lr-amt   { color: var(--wp--preset--color--acacia); font-size: 28px; }

.ledger-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
}

.lf-meta {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .55;
}

.ledger-method {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--rule-dk);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino);
	line-height: 1.7;
}


/* Partner tiles — 3×2 grid with 1px gold rule between cells (gap+bg
   trick, same as .now-grid). RFP tile gets a gold-tinted gradient to
   read as the "open" tile, not just another partner. */
.dash-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}

.dash-tile {
	background: var(--wp--preset--color--reserve);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 160px;
}

.dash-tile .num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 48px;
	color: var(--wp--preset--color--acacia);
	line-height: 1;
}

.dash-tile .lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .78;
	line-height: 1.55;
}

.dash-tile .partner {
	margin-top: auto;
	font-size: 12px;
	color: var(--wp--preset--color--ivory);
	opacity: .6;
}

.dash-tile .dt-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 14px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(241, 232, 214, 0.12);
}

.dash-tile .dt-head .mono {
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: .85;
}

.dash-tile .dt-head .dt-out {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--ivory);
	opacity: .55;
	padding: 3px 8px;
	border: 1px solid rgba(241, 232, 214, 0.22);
}

/* RFP tile variant — gold-tinted gradient flags the "open program"
   tile differently from the named-partner tiles. */
.dash-tile-rfp {
	background: linear-gradient(180deg, rgba(212, 162, 76, 0.10), var(--wp--preset--color--reserve) 70%);
}

.dash-tile-rfp .num {
	font-size: 36px;
	letter-spacing: .04em;
}

.dash-tile-rfp .partner { opacity: .78; }

@media (max-width: 980px) {
	.dash-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.dash-tiles { grid-template-columns: 1fr; }
}


/* ===================================================================
   NORTHERN WHITE CALLOUT — the giant "2"
   Editorial inter-section beat between the dashboard and the species
   urgency band. Off-black band with twin radial gold halos so the
   surface reads as quiet rather than flat. Two-column: gold-bordered
   number block on the left (eyebrow → giant "2" → mono coordinates),
   copy + CTAs on the right.
   =================================================================== */

.nw-callout {
	background: #0E1010;
	color: var(--wp--preset--color--ivory);
	padding: 120px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	position: relative;
}

/* Composed wp:group resets for nw-callout sub-structure */
.nw-callout.wp-block-group { padding-left: 0; padding-right: 0; }
.nw-num-block.wp-block-group,
.nw-copy.wp-block-group { padding: 0; margin: 0; }
/* walk-3 defect #3: the .wp-block-group reset above wins specificity
   over the .nw-num-block { padding-left: 32px } below (class+class
   beats class), wiping the gold-vertical-line → content gutter that
   the design called for. Erik's walk: "two rhinos left area needs
   more left padding to vertical border line." Restore + bump to
   40px via a matching-specificity selector. */
.nw-num-block.wp-block-group { padding-left: 40px; }
.nw-num-block > .nw-eyebrow,
.nw-num-block > .nw-num,
.nw-num-block > .nw-num-mono { margin: 0; }
.nw-num-block > .nw-num { margin: 8px 0 4px 0; }
.nw-copy > h3 { margin: 0 0 24px 0; }
.nw-copy > p { margin: 0 0 18px 0; max-width: 54ch; }
.nw-copy > p.nw-coda {
	border-top: 1px solid var(--rule);
	padding-top: 18px;
}
.nw-ctas.wp-block-group { margin-top: 18px; padding: 0; }

.nw-callout::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 25% 30%, rgba(212, 162, 76, .06), transparent 55%),
		radial-gradient(circle at 75% 70%, rgba(212, 162, 76, .04), transparent 55%);
	pointer-events: none;
}

.nw-grid {
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 80px;
	align-items: center;
	position: relative;
}

.nw-num-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	border-left: 1px solid rgba(212, 162, 76, .4);
	padding-left: 32px;
}

.nw-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: .85;
}

/* The fact, made enormous. Cormorant 300 weight at 22vw fluid scale —
   reads as a numeral, not a heading. Loose negative letter-spacing so
   the curves breathe. */
.nw-num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(180px, 22vw, 280px);
	line-height: 0.85;
	color: var(--wp--preset--color--acacia);
	letter-spacing: -0.04em;
	margin: 8px 0 4px 0;
}

.nw-num-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 243, 224, .6);
}

.nw-copy h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(38px, 4.4vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0 0 24px 0;
	max-width: 18ch;
}

.nw-copy h3 em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--acacia);
}

.nw-copy p {
	font-size: 16px;
	line-height: 1.65;
	opacity: .85;
	margin: 0 0 18px 0;
	max-width: 54ch;
}

/* Coda paragraph — the "this is what we mean when we say save rhinos"
   line. Italic to read as voice; gold-italic em on the trigger phrase. */
.nw-coda {
	border-top: 1px solid var(--rule);
	padding-top: 18px;
	font-style: italic;
	opacity: .92;
}

.nw-coda em {
	color: var(--wp--preset--color--acacia);
	font-style: italic;
	font-weight: 500;
}

.nw-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
}

@media (max-width: 880px) {
	.nw-callout { padding: 80px 0; }
	.nw-grid { grid-template-columns: 1fr; gap: 40px; }
	.nw-num { font-size: 140px; }
	.nw-num-block { padding-left: 24px; }
}


/* ===================================================================
   SECTION 10 — WHY RHINOS NEED US (#why)
   Black band w/ a soft clay halo at the top. Two-column layout: copy +
   CTAs on the left, 5-row species list on the right. Each row is a
   4-col grid (mono number, name, status, count); the .crit modifier
   tints status copy clay-orange to flag the three at-risk species.
   The .urgency + .species-list primitives are shared with
   Conservation.html.
   =================================================================== */

.urgency {
	background: #000;
	color: var(--wp--preset--color--ivory);
	padding: 140px 0;
	border-block: 1px solid var(--rule);
	position: relative;
	overflow: hidden;
}

/* Clay halo at the top — implies the urgency without using the gold
   palette (which has carried the conservation receipt narrative
   throughout the page). Different alarm tone. */
.urgency::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 50% 0%, rgba(184, 91, 44, 0.15), transparent 70%);
	pointer-events: none;
}

.urgency-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
	align-items: start;
	position: relative;
}

/* Composed wp:group resets for the urgency section. */
.urgency.wp-block-group { padding-left: 0; padding-right: 0; }
.urgency-grid.wp-block-group { padding: 0; }
.urgency-l.wp-block-group,
.urgency-r.wp-block-group { padding: 0; margin: 0; }
.species-list.wp-block-group { padding: 0; margin: 0; }
.urgency-cta.wp-block-group { margin-top: 42px; padding: 0; }
.urgency-l > .eyebrow { margin: 0 0 14px 0; }
.urgency-l > h2 { margin: 14px 0 24px 0; }
.urgency-l > .lede { margin: 0; }

.urgency h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(40px, 5.4vw, 76px);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 14px 0 24px 0;
	color: var(--wp--preset--color--ivory);
}

.urgency h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--acacia);
}

.urgency .lede {
	font-size: 17px;
	line-height: 1.65;
	opacity: .86;
	max-width: 46ch;
}

.urgency-cta {
	margin-top: 42px;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.species-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--rule);
}

.species-row {
	display: grid;
	grid-template-columns: 60px 1fr 140px 100px;
	gap: 24px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--rule);
}

.species-row .sp-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--acacia);
}

.species-row .sp-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	color: var(--wp--preset--color--ivory);
}

.species-row .sp-status {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: .7;
}

.species-row .sp-count {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	color: var(--wp--preset--color--acacia);
	text-align: right;
}

/* Critical species — Northern White / Sumatran / Javan. Status copy
   tints clay-orange to read as alarm, not just info. */
.species-row.crit .sp-status { color: #E47A4A; }

.species-source {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .5;
	margin-top: 18px;
}

@media (max-width: 1100px) {
	.urgency-grid { grid-template-columns: 1fr; gap: 40px; }
	.species-row { grid-template-columns: 40px 1fr 80px; gap: 14px; }
	.species-row .sp-status { display: none; }
}


/* ===================================================================
   DONATION ADD-ON STRIP
   Clay-on-clay full-bleed strip with italic-Cormorant message on the
   left and 5 mono pills on the right (+$10, +$25, +$50, +$100, Custom).
   The clay base reads as a different beat than the rest of the page
   (which is all dark green / ivory / gold) — a deliberate "look up
   from the page" moment.
   =================================================================== */

.donate-strip {
	background: var(--acacia);
	color: var(--wp--preset--color--ivory);
	padding: 36px 0;
	border-block: 1px solid rgba(0, 0, 0, 0.2);
}

/* Composed wp:group resets for the donate strip. */
.donate-strip.wp-block-group { padding-left: 0; padding-right: 0; }
.donate-row.wp-block-group { padding-top: 0; padding-bottom: 0; }
.donate-row > .ds-msg { margin: 0; }
.donate-pills.wp-block-group { padding: 0; margin: 0; }

.donate-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.donate-row .ds-msg {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.15;
	font-style: italic;
	font-weight: 400;
	max-width: 42ch;
	margin: 0;
}

/* The "$10" pull lands as cream rather than ivory — warmer against
   the clay so it reads as the highlighted denomination, not just bold. */
.donate-row .ds-msg strong {
	font-style: normal;
	font-weight: 500;
	color: #FBE5BE;
}

.donate-pills {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.donate-pill {
	padding: 12px 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	transition: background .2s, color .2s, border-color .2s;
}

.donate-pill:hover,
.donate-pill.active {
	background: #FBE5BE;
	color: var(--acacia);
	border-color: #FBE5BE;
}


/* ===================================================================
   SECTION 11 — WINE CLUB (#club)
   Three membership paths under a single ladder eyebrow:
     Path A (Crash) → Path B (Conservation Circle, 3 quarterly tiers,
     Advocate featured-flipped) → Path C (Estate Allocation waitlist).
   Ink section background; Path A + C panels use a subtle ivory tint
   over the ink so they read as "framed entry points" around the
   3-tier grid in the middle.
   =================================================================== */

/* Top mono ladder — visual roadmap of the 5 belonging tiers. Renders
   as a horizontal flow with gold separators; opacity dipped so it
   reads as map, not as the headline itself. */
.club-ladder-mono {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: .85;
	padding: 14px 0 28px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--rule-dk);
}

.club-ladder-mono .cl-sep {
	opacity: .45;
	color: var(--wp--preset--color--ivory);
}

/* Path A (Crash entry) + Path C (Estate) shared panel chrome — same
   1.1fr/1.4fr split, faint ivory tint over ink, 1px rule border. */
.club-entry,
.club-estate {
	display: grid;
	grid-template-columns: 1.1fr 1.4fr;
	gap: 48px;
	align-items: center;
	padding: 32px;
	border: 1px solid var(--rule);
	background: rgba(255, 255, 255, 0.02);
	margin-bottom: 32px;
}

/* Path C (Estate) variant — gold-tinted gradient + gold-tinted border
   to flag the limited-allocation tier as differently-priced from the
   monthly Crash subscription. */
.club-estate {
	margin-top: 32px;
	margin-bottom: 0;
	background: linear-gradient(180deg, rgba(212, 162, 76, 0.06), rgba(255, 255, 255, 0.01));
	border-color: rgba(212, 162, 76, 0.32);
}

.club-entry .ce-meta h4,
.club-estate .ce-meta h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 8px 0 10px 0;
}

.club-estate .ce-meta h4 em {
	color: var(--wp--preset--color--acacia);
	font-style: italic;
}

.club-entry .ce-meta p,
.club-estate .ce-meta p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ivory);
	opacity: .78;
	margin: 0;
	max-width: 46ch;
}

/* Stat sub-grid inside Path A/C — 3-up cells with a 1px gold rule
   between (gap+bg trick), final cell hosts the CTA inline. */
.ce-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule-dk);
	border: 1px solid var(--rule-dk);
	align-items: stretch;
}

/* Path C variant — slightly wider CTA cell (1.2fr) since the
   "Request the Allocation" label is longer than Path A's. */
.ce-stats-estate { grid-template-columns: 1fr 1fr 1.2fr; }

.ce-stat {
	background: var(--wp--preset--color--reserve);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-height: 96px;
}

.ce-stat .ce-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	color: var(--wp--preset--color--acacia);
	line-height: 1;
}

.ce-stat .ce-lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .65;
	line-height: 1.5;
}

/* CTA cell — pinned inside the stats grid so it visually grounds the
   entry/estate panel rather than floating outside. Centered; matches
   stat cell height (96px min-height). */
.ce-cta {
	background: var(--wp--preset--color--reserve);
	padding: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	min-height: 96px;
	font-size: 11px;
	letter-spacing: 0.14em;
}

.club-circle-head {
	margin: 0 0 18px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.club-circle-head p {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ivory);
	opacity: .7;
	margin: 0;
	max-width: 72ch;
}

/* Conservation Circle (Path B) — 3-up tier cards. Featured tier
   (Advocate) inverts to ivory-on-reserve so the recommended choice
   reads as the visual anchor of the row. */
.club-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Composed wp:group resets for the wine-club section. */
.club-grid.wp-block-group { padding: 0; margin: 0; }
.club-circle-head.wp-block-group { padding: 0; margin: 0 0 18px 0; }
.club-circle-head > .club-tier-mono,
.club-circle-head > p { margin: 0; }

.club-card {
	background: var(--wp--preset--color--reserve-2);
	border: 1px solid var(--rule);
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
	overflow: hidden;
}

.club-card.featured {
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--reserve);
	border-color: var(--wp--preset--color--acacia);
}

.club-card.featured .club-tier-mono { color: var(--acacia); }
.club-card.featured .price          { color: var(--wp--preset--color--reserve); }
.club-card.featured ul li           { color: var(--wp--preset--color--reserve); opacity: .86; }

.club-tier-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}

.club-card h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1.02;
	margin: 0;
	letter-spacing: -0.01em;
}

.club-card .price {
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	color: var(--wp--preset--color--ivory);
}

.club-card .price small {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino);
	margin-left: 6px;
}

.club-card ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.club-card ul li {
	font-size: 13px;
	line-height: 1.5;
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

/* Custom bullet — gold dot pinned to the line height. Featured tier
   flips to clay so the inverse panel keeps its alarm/recommend tone. */
.club-card ul li::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--acacia);
	border-radius: 50%;
	margin-top: 7px;
	flex: 0 0 6px;
}

.club-card.featured ul li::before { background: var(--acacia); }

.club-card__cta { margin-top: 6px; }

@media (max-width: 1080px) {
	.club-entry,
	.club-estate { grid-template-columns: 1fr; gap: 32px; }
	.club-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.ce-stats,
	.ce-stats-estate { grid-template-columns: 1fr; }
}


/* ===================================================================
   SECTION 12 — GIFT BAR (#gift)
   Full-bleed clay-on-clay split. Image-left / copy-right. Headline
   uses italic-Cormorant em in cream (#FBE5BE) to stay in-palette with
   the donate strip's clay treatment. Same image-into-figure pattern
   as Blake (commit 6.5) — wp:image is editor-swappable; rhinory-core's
   <picture> filter wraps the <img> with WebP automatically.
   =================================================================== */

.gift {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 0;
	align-items: stretch;
	background: var(--acacia);
	color: var(--wp--preset--color--ivory);
}

/* Composed wp:group resets for the gift section. */
.gift.wp-block-group { padding: 0; margin: 0; }
.gift-img.wp-block-group,
.gift-copy.wp-block-group { padding: 0; margin: 0; }
.gift-copy.wp-block-group { padding: 80px 72px; }
.gift-copy > h3 { margin: 0; }
.gift-copy > .gift-copy__body { margin: 0; }
.gift-copy__ctas.wp-block-group { padding: 0; margin-top: 14px; }

/* Cream-on-clay overrides for any cta-button rendered inside .gift-copy.
   The ghost variant flips its border + text to cream so it stays in
   the clay palette. */
.gift-copy .btn-ghost {
	border-color: #FBE5BE !important;
	color: #FBE5BE !important;
}
.gift-copy .btn-ghost:hover {
	background: #FBE5BE !important;
	color: var(--acacia) !important;
}

/* Container hosts a wp:image figure positioned absolutely with
   object-fit:cover — same approach as .blake-img (commit 6.5). */
.gift-img {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	background: var(--burgundy);
}

.gift-img .wp-block-image,
.gift-img figure {
	position: absolute;
	inset: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.gift-img picture { display: contents; }

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

.gift-copy {
	padding: 80px 72px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
}

.gift-copy h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(36px, 4.5vw, 60px);
	line-height: 1.02;
	margin: 0;
	letter-spacing: -0.01em;
}

.gift-copy h3 em {
	font-style: italic;
	color: #FBE5BE;
}

/* Override the section eyebrow tint so the gold rule + word stay
   visible against the clay background — neither acacia gold nor
   clay-on-clay reads. Use cream like the headline em. */
.gift-copy__eyebrow,
.gift-copy__eyebrow::before { color: #FBE5BE !important; }
.gift-copy__eyebrow::before { background: #FBE5BE !important; }

.gift-copy__body {
	font-size: 15px;
	line-height: 1.65;
	opacity: .92;
	max-width: 46ch;
	margin: 0;
}

.gift-copy__ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 14px;
}

/* Cream variant of .btn-ghost — keeps the corporate-gifting CTA in
   clay palette without going stark white. */
.gift-copy__btn-cream {
	border-color: #FBE5BE !important;
	color: #FBE5BE !important;
}

.gift-copy__btn-cream:hover {
	background: #FBE5BE !important;
	color: var(--acacia) !important;
}

@media (max-width: 1080px) {
	.gift { grid-template-columns: 1fr; }
	.gift-img { min-height: 320px; }
	.gift-copy { padding: 56px 32px; }
}


/* ===================================================================
   FAQ — shared primitive (homepage + Gifts.html + Shop.html)
   Native <details>/<summary>; no JS. The .q-toggle button is a circular
   gold-stroke ring with a + glyph composed from two pseudo-elements;
   open state fills the ring clay and rotates the vertical bar to make
   a − sign. Question text + answer pad reflow under the q-num column.
   =================================================================== */

.faqs {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule-dk);
}

.faq {
	border-bottom: 1px solid var(--rule-dk);
}

.faq summary {
	list-style: none;
	cursor: pointer;
	padding: 24px 0;
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 32px;
	align-items: center;
}

.faq summary::-webkit-details-marker { display: none; }

.faq .q-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--acacia);
}

.faq .q-text {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	line-height: 1.15;
	color: var(--wp--preset--color--reserve);
}

/* Composite + → − toggle. Ring + horizontal bar always visible; vertical
   bar rotates 90° on [open] so the visible glyph reads as − instead of +. */
.faq .q-toggle {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--acacia);
	display: grid;
	place-items: center;
	transition: background .25s, border-color .25s;
}

.faq .q-toggle::before,
.faq .q-toggle::after {
	content: "";
	position: absolute;
	background: var(--acacia);
	transition: transform .3s ease, background .25s;
}

.faq .q-toggle::before { width: 14px; height: 1px; }
.faq .q-toggle::after  { width: 1px;  height: 14px; }

.faq[open] .q-toggle {
	background: var(--acacia);
	border-color: var(--acacia);
}

.faq[open] .q-toggle::before,
.faq[open] .q-toggle::after { background: var(--wp--preset--color--ivory); }

.faq[open] .q-toggle::after { transform: rotate(90deg); }

.faq[open] summary .q-text { color: var(--acacia); }

.faq .q-answer {
	padding: 0 0 28px 112px; /* 80px q-num col + 32px gap = 112px indent */
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--reserve);
	opacity: .82;
	max-width: 72ch;
}

.faq .q-answer a {
	color: var(--acacia);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 760px) {
	.faq summary { grid-template-columns: 60px 1fr auto; gap: 16px; }
	.faq .q-answer { padding: 0 0 24px 0; }
	.faq .q-text { font-size: 20px; }
}


/* ===================================================================
   SECTION 14 — NEWSLETTER (#newsletter)
   Final beat of the page — black band w/ a 2-up grid: editorial copy
   on the left, a Mailchimp embedded form on the right. Form posts to
   the URL configured by the RHINORY_V4_MAILCHIMP_ACTION constant in
   functions.php; when empty, falls back to a "coming soon" disabled
   visual so the section never silently 404s.
   =================================================================== */

.newsletter-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

/* Composed wp:group resets for the newsletter section. */
.newsletter-grid.wp-block-group { padding: 0; }
.newsletter-l.wp-block-group,
.newsletter-r.wp-block-group { padding: 0; margin: 0; }
.newsletter-l > .eyebrow,
.newsletter-l > .newsletter__headline,
.newsletter-l > .newsletter__body { margin: 0; }
.newsletter-l > .newsletter__headline { margin: 18px 0 16px 0; }

.newsletter__headline {
	font-size: clamp(36px, 4.4vw, 60px);
	line-height: 1.04;
	margin: 18px 0 16px 0;
}

.newsletter__headline-em {
	color: var(--wp--preset--color--acacia);
	font-weight: 300;
}

.newsletter__body {
	font-size: 16px;
	line-height: 1.6;
	opacity: .86;
	max-width: 48ch;
	margin: 0;
}

/* The form lives in a flex column so label, input, button, and legal
   line stack at predictable rhythm. The hidden honeypot div is
   absolutely positioned via inline style; the rest is flex flow. */
.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}

.newsletter-form__label {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}

/* Borderless input with a single bottom rule — reads as editorial
   stationary rather than a form input. Focus brightens the rule to
   ivory so the active state is clear without adding box chrome. */
.newsletter-form__input {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--rule);
	color: var(--wp--preset--color--ivory);
	padding: 14px 0;
	font-size: 18px;
	font-family: inherit;
	outline: none;
	transition: border-bottom-color .2s;
}

.newsletter-form__input:focus { border-bottom-color: var(--wp--preset--color--ivory); }
.newsletter-form__input:disabled { opacity: .5; cursor: not-allowed; }

.newsletter-form__submit {
	align-self: flex-start;
	margin-top: 18px;
	border: none;
	cursor: pointer;
}

.newsletter-form__legal {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .5;
	margin-top: 8px;
}

/* Coming-soon variant — Mailchimp constant unset. Visually identical
   to the live form so the design intent is preserved; submit-styled
   span instead of a button so it's not interactive. */
.newsletter-form--coming-soon .newsletter-form__submit {
	cursor: not-allowed;
	opacity: .55;
	pointer-events: none;
}

@media (max-width: 880px) {
	.newsletter-grid { grid-template-columns: 1fr; gap: 36px; }
}


/* ===================================================================
   SIDE SCROLL NAV — shared primitive (homepage + Visit + RhinoReserve)
   Right-edge fixed nav of section anchors. Each link composes three
   children: snv-num (mono numeral), snv-tick (1px rule), snv-label
   (the section name). Right-anchored layout: num + tick stay at fixed
   right positions while the label grows leftward on hover/active —
   prevents the active row from "bouncing" sideways as different label
   widths swap in.

   Hidden below 1640px wide (where .wrap=1360px + 40px gutters + nav
   width starts overlapping content). Hidden during the hero by JS
   adding .is-hidden so the cinematic owns the first frame.
   =================================================================== */

.side-nav {
	position: fixed;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	pointer-events: auto;
	font-family: var(--wp--preset--font-family--mono);
	display: block;
	transition: opacity .25s ease, transform .35s ease;
}

.side-nav.is-hidden {
	opacity: 0;
	transform: translateY(-50%) translateX(20px);
	pointer-events: none;
}

.side-nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
}

.snv-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 20px;
	color: rgba(255, 243, 224, .55);
	text-decoration: none;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: color .25s, background .25s, padding-right .25s;
	position: relative;
}

/* Right-anchored child order: num + tick stay in fixed positions on
   the right; label is placed first via `order:1` and grows leftward
   on hover/active without nudging num/tick. */
.snv-num   { order: 2; width: 22px; opacity: .7; }
.snv-tick  { order: 3; width: 18px; height: 1px; background: currentColor; opacity: .6; transition: width .25s, opacity .25s, background .25s; }
.snv-label { order: 1; text-align: right; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease, padding-left .25s, opacity .25s; opacity: 0; padding-left: 0; }

.snv-link:hover,
.snv-link.is-active {
	color: var(--wp--preset--color--acacia);
}

.snv-link:hover { background: rgba(212, 162, 76, .08); }

.snv-link:hover .snv-tick,
.snv-link.is-active .snv-tick {
	width: 28px;
	opacity: 1;
	background: var(--wp--preset--color--acacia);
}

.snv-link:hover .snv-label,
.snv-link.is-active .snv-label {
	max-width: 140px;
	opacity: 1;
	padding-left: 6px;
}

@media (max-width: 1640px) { .side-nav { display: none; } }

/* Invert rail colors when the scrollspy detects the rail overlapping
   a light-bg section (.ivory / .paper). JS sets body[data-section-bg]
   in rhinory-scroll.js. Without this, the rail's ivory text disappears
   over Conservation #home and #ledger. */
body[data-section-bg="light"] .snv-link { color: rgba(15, 26, 20, .55); }
body[data-section-bg="light"] .snv-link:hover { color: var(--burgundy); background: rgba(184, 91, 44, .07); }
body[data-section-bg="light"] .snv-link:hover .snv-tick { background: var(--burgundy); }
body[data-section-bg="light"] .snv-link.is-active { color: var(--burgundy); }
body[data-section-bg="light"] .snv-link.is-active .snv-tick { background: var(--burgundy); }


/* ===================================================================
   STICKY BOOK BAR — shared primitive (homepage + Visit + RhinoReserve)
   Bottom-floating gold-bordered pill, hidden by default; .show class
   slides it in from below. JS gates show/hide on scroll past 85% of
   the first viewport height AND not within 200px of the footer.
   =================================================================== */

.book-bar {
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(140%);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--acacia);
	padding: 8px 8px 8px 22px;
	border-radius: 999px;
	z-index: 120;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
	transition: transform .35s ease, opacity .35s ease;
	opacity: 0;
	pointer-events: none;
	/* Shrink-to-fit bug, fixed 2026-09-11 (brief
	   2026-08-30-visit-family-wp-port § Engineering notes). `left:50%` on an
	   inline-flex island makes the available width HALF the viewport, so
	   between ~681px and ~976px the pill wrapped onto two lines instead of
	   sitting on one. width:max-content sizes it from its content; the
	   max-width cap below still keeps it inside the viewport on real
	   narrow screens, where wrapping is correct. */
	width: max-content;
	max-width: calc(100vw - 32px);
}

.book-bar.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.book-bar .label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .86;
	margin-right: 14px;
}

.book-bar a, .book-bar button {
	appearance: none;
	border: 0;
	cursor: pointer;
	padding: 10px 18px;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	/* An inline <a> inherits the bar's line-height; a <button> does not, so a
	   bar whose CTA is a button (/visit/tastings/) sat 6px shorter than one
	   whose CTA is a link (/club/) and than the design. `inherit` makes the two
	   forms agree and is a no-op for the anchor, which already inherited.
	   Found 2026-09-11 by the Tastings fidelity audit. */
	line-height: inherit;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	transition: background .2s, color .2s;
}

.book-bar a.book, .book-bar button.book {
	background: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--reserve);
}

.book-bar a.shop { color: var(--wp--preset--color--ivory); }
.book-bar a.shop:hover { color: var(--wp--preset--color--acacia); }

/*
 * When the primary CTA renders as a reserve <button> (data-rhinory-reserve),
 * the global reset `button[data-rhinory-reserve] { font: inherit; padding: 0 }`
 * ties `.book-bar a, .book-bar button` on specificity and wins by source order,
 * stripping the pill back to body type (Lora 17px, no padding). Restore the
 * design CTA metrics with a higher-specificity selector.
 */
.book-bar button.book {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	/* Was `1`, which made a button CTA 6px shorter than the link form and than
	   the design. `inherit` takes the bar's own line-height, which is exactly
	   what an inline <a> here gets, so the two forms are now the same pill.
	   Found 2026-09-11 by the /visit/tastings/ fidelity audit. */
	line-height: inherit;
	padding: 10px 18px;
	white-space: nowrap;
}

@media (max-width: 680px) {
	.book-bar { bottom: 14px; padding: 6px 6px 6px 16px; gap: 4px; }
	.book-bar .label { display: none; }
	.book-bar a { padding: 9px 14px; font-size: 10px; }
	.book-bar button.book { padding: 9px 14px; font-size: 10px; }
}

/*
 * The v13 shared dock's THIRD breakpoint, ported 2026-09-11 (prototypes/13/
 * styles.css § .book-bar, found by the /visit/tastings/ fidelity audit at 390).
 * The 680px rule above shrinks everything for tablets; below 420px the design
 * puts the pill edge-to-edge and takes the CTA type back UP to 11px, so the
 * primary action stays legible on a phone rather than ending up the smallest
 * text on screen. The theme had the 680px half and not this one, which is why
 * the dock measured 10px/9px-padding at 390 against the design's 11px/10px.
 * `button.book` is carried alongside `a.book` because either form can be the
 * CTA (a reserve trigger is a button; a navigating CTA is a link).
 */
@media (max-width: 420px) {
	/* `width: auto` hands sizing back to the left/right pair: the shrink-to-fit
	   fix above pins width:max-content, which would otherwise win over `right`
	   and leave the pill content-sized against the left edge instead of
	   edge-to-edge. The hidden state keeps its translateY(140%) — the prototype
	   drops it here and relies on opacity alone, which leaves an invisible pill
	   occupying the bottom of the viewport. */
	.book-bar { left: 8px; right: 8px; width: auto; transform: translateX(0) translateY(140%); }
	.book-bar.show { transform: translateX(0) translateY(0); }
	.book-bar a.book, .book-bar button.book { padding: 10px 14px; font-size: 11px; }
	.book-bar a.shop { font-size: 11px; }
}


/* ===================================================================
   CONSERVATION — HERO (mission cover)
   Dark reserve cover with a low-opacity background image, gradient
   scrim, monospace stamp ribbon, Cormorant headline + italic em, lede,
   two CTAs, and a side TOC card listing chapter children. The image
   is a real <img> inside .cv-hero__bg (rather than a CSS background)
   so the rhinory-core picture filter can rewrite it to <picture> and
   ship a WebP sibling. Position is editor-driven via --cv-hero-pos.
   =================================================================== */

.cv-hero {
	position: relative;
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--ivory);
	border-bottom: 1px solid var(--rule);
	overflow: hidden;
}
.cv-hero__bg {
	position: absolute; inset: 0;
	overflow: hidden;
	opacity: 0.2;
	filter: saturate(0.85) contrast(1.05);
}
.cv-hero__bg picture,
.cv-hero__bg img,
.cv-hero__bg .cv-hero__bg-img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--cv-hero-pos, center 30%);
}
.cv-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg,
		rgba(15,26,20,0.62) 0%,
		rgba(15,26,20,0.92) 60%,
		var(--wp--preset--color--reserve) 100%);
}
.cv-hero-inner {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 80px;
	padding: 120px 0 96px;
	align-items: end;
}
.cv-hero-cover { display: flex; flex-direction: column; gap: 0; }

.cv-stamp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-bottom: 24px;
	margin: 0 0 48px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}
.cv-stamp .crp {
	display: flex; gap: 18px; align-items: center;
}
.cv-stamp .seal {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--acacia);
	display: grid; place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 13px; font-style: italic;
	color: var(--wp--preset--color--acacia);
}
.cv-stamp .ed {
	opacity: 0.62;
	color: var(--wp--preset--color--ivory);
}

.cv-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin: 0 0 28px;
	display: flex; gap: 14px; align-items: center;
}
.cv-eyebrow::before {
	content: "";
	width: 32px; height: 1px;
	background: var(--wp--preset--color--acacia);
}

.cv-headline {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: clamp(58px, 7.8vw, 128px);
	line-height: 0.96;
	letter-spacing: -0.02em;
	margin: 0 0 32px;
}
.cv-headline em {
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--acacia);
}

.cv-sub {
	font-size: 19px;
	line-height: 1.62;
	max-width: 54ch;
	opacity: 0.92;
	margin: 0 0 36px;
}

.cv-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Side TOC card. Translucent + blurred so the hero image bleeds
   through. Borders + dividers track the rule token used elsewhere. */
.cv-toc {
	background: rgba(15,26,20,0.55);
	backdrop-filter: blur(8px);
	border: 1px solid var(--rule);
	align-self: end;
}
.cv-toc-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 18px 22px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}
.cv-toc-count { opacity: 0.55; }

.cv-toc-link {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: 14px;
	align-items: baseline;
	padding: 16px 22px;
	border-bottom: 1px solid var(--rule-soft, rgba(212,162,76,0.10));
	color: var(--wp--preset--color--ivory);
	transition: background .25s, color .25s;
	text-decoration: none;
	position: relative;
}
.cv-toc-link:last-child { border-bottom: none; }
.cv-toc-link:hover {
	background: rgba(212,162,76,0.06);
	color: var(--wp--preset--color--acacia);
}
.cv-toc-link::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--wp--preset--color--acacia);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.cv-toc-link:hover::before { transform: scaleY(1); }

.cv-toc-link .ti-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--acacia);
	opacity: 0.85;
}
.cv-toc-link .ti-name {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: -0.005em;
}
.cv-toc-link .ti-name small {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0;
	color: var(--wp--preset--color--ivory);
	opacity: 0.55;
	margin-top: 3px;
	line-height: 1.4;
}
.cv-toc-link .ti-arrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: var(--wp--preset--color--acacia);
	opacity: 0.7;
	transition: transform .25s, opacity .25s;
}
.cv-toc-link:hover .ti-arrow { opacity: 1; transform: translateX(3px); }

@media (max-width: 1100px) {
	.cv-hero-inner {
		grid-template-columns: 1fr;
		gap: 56px;
		padding: 96px 0 72px;
	}
	.cv-headline { font-size: clamp(48px, 7.4vw, 96px); }
}
@media (max-width: 900px) {
	.cv-hero-inner { gap: 40px; padding: 80px 0 56px; align-items: start; }
	.cv-headline { font-size: clamp(40px, 9vw, 72px); line-height: 1.0; margin-bottom: 24px; }
	.cv-sub { font-size: 17px; }
	.cv-toc-link { grid-template-columns: 40px 1fr auto; padding: 14px 18px; }
	.cv-toc-link .ti-name { font-size: 18px; }
}
@media (max-width: 640px) {
	.cv-hero-inner { padding: 64px 0 44px; gap: 32px; }
	.cv-headline { font-size: clamp(34px, 10.5vw, 56px); }
	.cv-headline br { display: none; }
	.cv-sub { font-size: 15.5px; max-width: none; }
	.cv-stamp { flex-wrap: wrap; gap: 8px; padding-bottom: 18px; margin-bottom: 32px; }
	.cv-toc-head { padding: 14px 16px; font-size: 9px; }
	.cv-toc-link { grid-template-columns: 36px 1fr auto; padding: 12px 16px; }
	.cv-toc-link .ti-name { font-size: 16px; }
	.cv-toc-link .ti-name small { font-size: 10.5px; }
}


/* ===================================================================
   MEGA-DRAWER  ·  prototypes/4 dd-* surface, mapped to v4 tokens.

   Stack: nav (z:80) is front, ticker (z:81) above that, drawer panel
   (z:79) and scrim (z:78) sit below — drawer is anchored at top:
   var(--rhinory-mega-nav-h) so it never overlaps the nav row. The nav
   stays interactive while the drawer is open by design (same pattern
   as the prototype).

   --rhinory-mega-nav-h is written by rhinory-mega.js from the live
   nav.getBoundingClientRect().bottom, so the ticker pushing the nav
   down at scroll-top is accounted for.
   =================================================================== */

.dd-scrim {
	position: fixed;
	/* -1px so the scrim/panel slide a pixel under the nav border-bottom.
	   The nav's translucent backdrop hides the overlap; rgba(15,26,20,0.78)
	   over the panel's reserve-green is visually identical, so no seam
	   no peek-through at sub-pixel boundaries. */
	top: calc(var(--rhinory-mega-nav-h, 88px) - 1px);
	left: 0; right: 0; bottom: 0;
	background: rgba(8, 10, 11, 0.62);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	/* Inert when not open. Without this the invisible scrim silently
	   absorbed clicks on anything below z:78 (notably the .side-nav
	   chapter rail at z:60) during the 320ms close transition and any
	   state where [hidden] hadn't been re-applied. .is-open re-enables
	   pointer-events so click-outside-to-close still fires. */
	pointer-events: none;
	transition: opacity .28s cubic-bezier(.33, 1, .68, 1);
	z-index: 78;
}
.dd-scrim.is-open { opacity: 1; pointer-events: auto; }

.dd-panel {
	position: fixed;
	top: calc(var(--rhinory-mega-nav-h, 88px) - 1px);
	left: 0; right: 0;
	width: 100%;
	max-height: calc(100vh - var(--rhinory-mega-nav-h, 88px) + 1px);
	background: var(--wp--preset--color--reserve);
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 32px 80px -10px rgba(0, 0, 0, 0.7);
	transform: translateY(-8px);
	opacity: 0;
	transition:
		transform .28s cubic-bezier(.33, 1, .68, 1),
		opacity   .28s cubic-bezier(.33, 1, .68, 1);
	z-index: 79;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	scrollbar-width: thin;
	scrollbar-color: rgba(212, 162, 76, 0.25) transparent;
}
.dd-panel.is-open { transform: translateY(0); opacity: 1; }
/* Honor the [hidden] attribute. Without this, .dd-panel { display: flex }
   above (same specificity as UA's [hidden]{display:none}, later in source)
   keeps the closed panel in layout — opacity:0, but its z:79 box silently
   absorbs clicks down to its natural content height (~550px from below
   the nav). Was blocking the canonical .side-nav rail's top chapters
   (Origin, Crisis) on Conservation. */
.dd-panel[hidden] { display: none; }
.dd-panel::-webkit-scrollbar { width: 8px; }
.dd-panel::-webkit-scrollbar-thumb { background: rgba(212, 162, 76, 0.18); border-radius: 8px; }
.dd-panel::-webkit-scrollbar-thumb:hover { background: rgba(212, 162, 76, 0.32); }

.dd-panel-inner {
	max-width: 1360px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* === GRID — equal-weight content columns. dd-grid-N gives the right
   column count automatically; the prototype's data ships 5 columns. */
.dd-grid {
	display: grid;
	gap: 48px;
	padding: 48px 40px 38px;
}
.dd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.dd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.dd-grid-5 { grid-template-columns: repeat(5, 1fr); }
.dd-grid-6 { grid-template-columns: repeat(6, 1fr); }

.dd-col {
	min-width: 0;
	transition: opacity .25s ease;
}

/* Editorial mega-menu: when the drawer opens from a category trigger,
   dim non-focused columns and brighten the matching one. data-focus-col
   is set on the panel by rhinory-mega.js from the trigger's
   data-focus-column. Hovering anywhere over the grid cancels the dim
   so the user can read all columns once they engage. */
.dd-panel[data-focus-col] .dd-col:not([data-focus="true"]) {
	opacity: .5;
}
.dd-panel[data-focus-col] .dd-col[data-focus="true"] {
	opacity: 1;
}
.dd-panel[data-focus-col] .dd-col[data-focus="true"] .dd-heading {
	color: var(--wp--preset--color--acacia);
}
/* Focus-col stays put when the cursor moves into the grid — only a
   different category trigger resets it. Earlier iterations undimmed
   on grid hover, but that lost the user's place every time they
   moved down to read the focused column. */

.dd-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin: 0 0 22px 0;
	font-weight: 500;
	/* Lock the heading row height so columns whose heading is an <a>
	   line up with columns whose heading is an <h4>. Anchor and h4
	   metrics differ by a few pixels otherwise. */
	display: block;
	min-height: 14px;
	line-height: 14px;
}

/* When the column heading is itself a link (e.g. "Wine →" navigates),
   render as flex anchor with a subtle arrow that reveals on hover. */
.dd-heading-link {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: color .2s ease;
}
.dd-heading-arrow {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; line-height: 1;
	color: var(--wp--preset--color--acacia);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
}
.dd-heading-link:hover { color: var(--wp--preset--color--acacia); }
.dd-heading-link:hover .dd-heading-arrow { opacity: 1; transform: translateX(0); }

/* Sub-headers inside a column. Quieter than column heading, sits
   inline with items so the rhythm is heading → items → sub-header
   → items. */
.dd-subheading {
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: .45;
	margin: 14px 0 6px 0;
	font-weight: 500;
}
.dd-subheading:first-child { margin-top: 0; }
.dd-subheading-spacer {
	height: 6px; margin: 8px 0 0 0;
}

/* === COLLAPSIBLE GROUPS (Shop "By varietal" / "By collection")
   Subheadings with sub-items collapse by default and expand on
   hover/focus. grid-template-rows:0fr→1fr gives a smooth height
   transition without measuring content. */
.dd-collapsible { margin: 14px 0 0 0; }
.dd-collapsible:first-child { margin-top: 0; }

.dd-subheading-toggle {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	margin: 0 0 6px 0;
	transition: opacity .18s ease, color .18s ease;
}
.dd-subheading-toggle:hover { opacity: .85; color: var(--wp--preset--color--acacia); }
.dd-subheading-toggle:focus-visible { outline: 1px solid var(--wp--preset--color--acacia); outline-offset: 3px; }

.dd-collapsible-icon {
	font-size: 11px; line-height: 1;
	opacity: .6;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .18s;
	display: inline-block;
}
.dd-collapsible:hover  .dd-collapsible-icon,
.dd-collapsible:focus-within .dd-collapsible-icon,
.dd-subheading-toggle[aria-expanded="true"] .dd-collapsible-icon {
	transform: rotate(45deg);
	opacity: 1;
	color: var(--wp--preset--color--acacia);
}

.dd-collapsible-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .28s cubic-bezier(.33, 1, .68, 1);
	overflow: hidden;
}
.dd-collapsible-inner {
	min-height: 0;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .22s ease .04s, transform .28s cubic-bezier(.33, 1, .68, 1);
}
.dd-collapsible:hover .dd-collapsible-body,
.dd-collapsible:focus-within .dd-collapsible-body,
.dd-subheading-toggle[aria-expanded="true"] + .dd-collapsible-body {
	grid-template-rows: 1fr;
}
.dd-collapsible:hover .dd-collapsible-inner,
.dd-collapsible:focus-within .dd-collapsible-inner,
.dd-subheading-toggle[aria-expanded="true"] + .dd-collapsible-body .dd-collapsible-inner {
	opacity: 1;
	transform: none;
}
/* Touch / no-hover devices: always-expanded. The aria-expanded toggle
   from a click handler still works as fallback. */
@media (hover: none) {
	.dd-collapsible-body  { grid-template-rows: 1fr; }
	.dd-collapsible-inner { opacity: 1; transform: none; }
	.dd-collapsible-icon  { display: none; }
}

.dd-items {
	display: flex; flex-direction: column; gap: 11px;
}
.dd-item {
	display: flex; flex-direction: column; gap: 2px;
	padding: 0;
	cursor: pointer;
	transition: color .14s ease;
	position: relative;
}
.dd-item:focus-visible { outline: 1px solid var(--wp--preset--color--acacia); outline-offset: 3px; }
.dd-item[data-active="true"] .dd-item-label { color: var(--wp--preset--color--acacia); }

.dd-item-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--ivory);
	font-weight: 400;
	transition: color .14s ease;
}
.dd-item:hover .dd-item-label { color: var(--wp--preset--color--acacia); }

/* Lead items: Cormorant Garamond italic 24px — the editorial
   typography promotion that the prototype reserves for the column's
   first link with a blurb. */
.dd-item-lead .dd-item-label {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: 0;
}
.dd-item-lead { margin-bottom: 6px; }
.dd-item-blurb {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: 11.5px;
	line-height: 1.5;
	color: rgba(241, 232, 214, 0.55);
	margin-top: 5px;
	letter-spacing: 0.01em;
}

.dd-item[data-indent="1"] { padding-left: 18px; }
.dd-item[data-indent="1"] .dd-item-label {
	font-size: 14.5px; opacity: .78;
}
.dd-item[data-indent="1"]:hover .dd-item-label { opacity: 1; }

/* Stub pip on items — gold dot after the label */
.dd-item[data-stub="true"] .dd-item-label::after {
	content: "·";
	display: inline-block;
	margin-left: 7px;
	color: var(--wp--preset--color--acacia);
	opacity: .55;
	font-weight: 700;
	transform: translateY(-1px);
}

/* === PREVIEW RAIL — column / item-level editorial pitch under the
   grid. Collapsed (0fr) by default; expands to 1fr when the panel
   carries [data-preview-active] (set by JS while a hover target with
   a matching tile is engaged). All tiles render into the same grid
   cell and cross-fade — the rail's height stays stable as the user
   moves between columns. */
.dd-preview-rail {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .32s cubic-bezier(.33, 1, .68, 1);
	overflow: hidden;
	border-top: 1px solid var(--rule);
	background: linear-gradient(180deg, rgba(8, 12, 10, 0) 0%, rgba(212, 162, 76, 0.04) 100%);
}
.dd-preview-rail-inner {
	min-height: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}
.dd-panel[data-preview-active] .dd-preview-rail { grid-template-rows: 1fr; }

.dd-preview {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	gap: 32px;
	align-items: center;
	padding: 22px 40px;
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	/* All tiles in the same grid cell — they layer on top of each
	   other and fade between states without reflowing the rail. */
	grid-area: 1 / 1 / 2 / 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
.dd-preview[data-active="true"] { opacity: 1; pointer-events: auto; }

.dd-preview-img {
	width: 200px; height: 120px;
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--ink-2);
	border: 1px solid var(--rule);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.4),
		0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.dd-preview-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.dd-preview-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	font-weight: 500;
}
.dd-preview-headline {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 24px;
	line-height: 1.18;
	color: var(--wp--preset--color--ivory);
	letter-spacing: -0.005em;
	text-wrap: balance;
}
.dd-preview-body {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(241, 232, 214, 0.7);
	max-width: 60ch;
}
.dd-preview-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border: 1px solid var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--acacia);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}
.dd-preview:hover .dd-preview-cta {
	background: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--reserve);
}
.dd-preview-cta-arrow {
	display: inline-block;
	transition: transform .22s cubic-bezier(.33, 1, .68, 1);
}
.dd-preview:hover .dd-preview-cta-arrow { transform: translateX(4px); }


/* === BOTTOM STRIP === */
.dd-bottom-strip {
	border-top: 1px solid var(--rule);
	padding: 14px 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.dd-bottom-links {
	display: flex; flex-wrap: wrap; gap: 0; align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(241, 232, 214, 0.6);
}
.dd-bottom-link {
	color: inherit;
	padding: 4px 0;
	transition: color .14s ease;
}
.dd-bottom-link + .dd-bottom-link::before {
	content: "·";
	margin: 0 12px;
	color: rgba(212, 162, 76, 0.4);
}
.dd-bottom-link:hover { color: var(--wp--preset--color--acacia); }
.dd-bottom-link[data-stub="true"] { opacity: .7; }
.dd-bottom-link[data-stub="true"]:hover { opacity: 1; }

/* Search shortcut on the right of the bottom strip — currently inert
   placeholder; clicks are wired by the search-overlay commit later. */
.dd-bottom-search {
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--wp--preset--color--ivory);
	padding: 7px 13px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: border-color .18s, color .18s, background .18s;
}
.dd-bottom-search:hover {
	border-color: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--acacia);
}
.dd-bottom-search svg { width: 13px; height: 13px; }
.dd-bottom-search kbd {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	padding: 1px 6px;
	background: rgba(241, 232, 214, 0.10);
	border-radius: 2px;
}

/* === MOBILE === */
@media (max-width: 980px) {
	.dd-panel {
		/* Keep top anchored at nav-h so the nav row stays visible
		   above the drawer; the hamburger (which has flipped to an X
		   when open) is the close affordance. Earlier iteration set
		   top: 0, which hid the column headings under the nav. */
		bottom: 0;
		max-height: calc(100vh - var(--rhinory-mega-nav-h, 88px) + 1px);
		border-bottom: none;
	}
	.dd-grid {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 24px 20px 24px;
	}
	.dd-item-lead .dd-item-label { font-size: 22px; }
	/* On narrow screens the 200px image + body + CTA grid overflows.
	   Stack vertically and let the body wrap. */
	.dd-preview {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 18px 20px;
	}
	.dd-preview-img { width: 100%; height: 140px; }
	.dd-bottom-strip {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 18px 20px;
	}
}

/* When the drawer is open, lock the body and pin the html overflow.
   Toggled by rhinory-mega.js writing data-mega-open="true" on <html>. */
html[data-mega-open="true"] {
	overflow: hidden;
}


/* ===================================================================
   SEARCH OVERLAY  ·  centered modal with autocomplete results.

   Stack: scrim covers the full viewport at z:90 (above nav z:80 and
   the drawer z:79 — search is the higher-priority surface when both
   could open). Shell is centered, max-width 720px. Mutual exclusion
   with the drawer is event-driven (rhinory:overlay-open). 'data-search-
   open="true"' on <html> locks page scroll the same way the drawer
   does.
   =================================================================== */

.rhinory-search-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 12vh 24px 24px;
	pointer-events: none;
}
.rhinory-search-modal[hidden] { display: none; }
.rhinory-search-modal.is-open { pointer-events: auto; }

.rhinory-search-scrim {
	position: absolute; inset: 0;
	background: rgba(8, 10, 11, 0.78);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity .22s ease-out;
}
.rhinory-search-modal.is-open .rhinory-search-scrim { opacity: 1; }

.rhinory-search-shell {
	position: relative;
	width: 100%;
	max-width: 720px;
	background: var(--wp--preset--color--reserve);
	border: 1px solid var(--rule);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.72);
	transform: translateY(-12px);
	opacity: 0;
	transition:
		transform .24s cubic-bezier(.33, 1, .68, 1),
		opacity   .24s ease-out;
}
.rhinory-search-modal.is-open .rhinory-search-shell {
	transform: translateY(0);
	opacity: 1;
}

.rhinory-search-form {
	display: flex;
	flex-direction: column;
}

.rhinory-search-input-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--rule);
}
.rhinory-search-icon {
	width: 18px; height: 18px;
	color: var(--wp--preset--color--acacia);
	flex-shrink: 0;
}
.rhinory-search-input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 26px;
	line-height: 1.2;
	font-weight: 400;
	padding: 4px 0;
	min-width: 0;
}
.rhinory-search-input::placeholder {
	color: rgba(241, 232, 214, 0.4);
}
.rhinory-search-input::-webkit-search-cancel-button { display: none; }
.rhinory-search-kbd {
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 4px 8px;
	border: 1px solid var(--rule);
	color: rgba(241, 232, 214, 0.5);
	border-radius: 2px;
	flex-shrink: 0;
}

.rhinory-search-results {
	max-height: 60vh;
	overflow-y: auto;
	padding: 14px 0;
}
.rhinory-search-empty {
	padding: 0 22px 14px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(241, 232, 214, 0.6);
}

.rhinory-search-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rhinory-search-result {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 14px;
	align-items: start;
	padding: 12px 22px;
	color: var(--wp--preset--color--ivory);
	transition: background .12s ease;
}
.rhinory-search-result:hover,
.rhinory-search-result[data-active="true"] {
	background: rgba(212, 162, 76, 0.10);
}
.rhinory-search-result__type {
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	font-weight: 500;
	white-space: nowrap;
	padding-top: 6px;  /* baseline-align with the italic title's cap height */
}
.rhinory-search-result__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.rhinory-search-result__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 18px;
	line-height: 1.25;
	color: var(--wp--preset--color--ivory);
}
.rhinory-search-result__title mark {
	background: transparent;
	color: var(--wp--preset--color--acacia);
	font-style: italic;
	font-weight: 500;
}
.rhinory-search-result__blurb {
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(241, 232, 214, 0.6);
	/* Cap to two lines so a long excerpt doesn't push the result row
	   off the visible scroll area. Editors who want shorter blurbs
	   can set post_excerpt explicitly; everyone else gets the auto
	   22-word trim from the rest endpoint. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rhinory-search-quick-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	padding: 6px 12px 12px;
}
.rhinory-search-quick {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 12px;
	color: var(--wp--preset--color--ivory);
	border: 1px solid transparent;
	transition: border-color .14s ease, background .14s ease;
}
.rhinory-search-quick:hover {
	border-color: var(--rule);
	background: rgba(212, 162, 76, 0.05);
}
.rhinory-search-quick__label {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	font-weight: 500;
}
.rhinory-search-quick__blurb {
	font-size: 13px;
	color: rgba(241, 232, 214, 0.7);
	line-height: 1.4;
}

html[data-search-open="true"] {
	overflow: hidden;
}


/* ===================================================================
   SEARCH RESULTS PAGE  ·  /?s=… fallback (search.html template).
   Reads as editorial, not WP-default. Constrained centered column,
   acacia accents on headlines + pagination. Excerpt-driven cards.
   =================================================================== */
.rhinory-search-page {
	max-width: 880px;
	margin: 0 auto;
	padding: 80px 24px 120px;
}
.rhinory-search-page__head {
	border-bottom: 1px solid var(--rule);
	padding-bottom: 32px;
	margin-bottom: 48px;
}
.rhinory-search-page__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin: 0 0 12px 0;
}
.rhinory-search-page .rhinory-search-page__title,
.rhinory-search-page h1 {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.04;
	color: var(--wp--preset--color--ivory);
	margin: 0 0 24px 0;
	letter-spacing: -0.01em;
}
.rhinory-search-page__form {
	max-width: 480px;
}
.rhinory-search-page__form .wp-block-search__inside-wrapper {
	border: 1px solid var(--rule);
	background: rgba(241, 232, 214, 0.04);
}
.rhinory-search-page__form .wp-block-search__input {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--ivory);
	padding: 12px 16px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
}
.rhinory-search-page__form .wp-block-search__input::placeholder {
	color: rgba(241, 232, 214, 0.4);
}
.rhinory-search-page__form .wp-block-search__button {
	background: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--reserve);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 12px 18px;
	border: none;
	margin: 0;
}

.rhinory-search-results-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.rhinory-search-result-card {
	padding: 28px 0;
	border-bottom: 1px solid var(--rule);
	gap: 8px;
}
.rhinory-search-result-card:first-of-type { padding-top: 0; }
.rhinory-search-result-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.18;
	margin: 0;
}
.rhinory-search-result-card__title a {
	color: var(--wp--preset--color--ivory);
	text-decoration: none;
	transition: color .14s ease;
}
.rhinory-search-result-card__title a:hover {
	color: var(--wp--preset--color--acacia);
}
.rhinory-search-result-card__excerpt {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.55;
	color: rgba(241, 232, 214, 0.7);
	margin: 0;
}

.rhinory-search-pagination {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.rhinory-search-pagination a {
	color: var(--wp--preset--color--acacia);
	text-decoration: none;
	transition: color .14s ease;
}
.rhinory-search-pagination a:hover { color: var(--wp--preset--color--ivory); }
.rhinory-search-pagination .page-numbers.current {
	color: var(--wp--preset--color--ivory);
	font-weight: 600;
}

.rhinory-search-page__zero {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 22px;
	color: rgba(241, 232, 214, 0.7);
	padding: 48px 0;
	text-align: center;
}

/* On narrow screens collapse the modal to a sheet style. */
@media (max-width: 720px) {
	.rhinory-search-modal {
		padding: 0;
	}
	.rhinory-search-shell {
		max-width: none;
		min-height: 100vh;
		border: none;
	}
	.rhinory-search-input { font-size: 22px; }
	.rhinory-search-quick-grid { grid-template-columns: 1fr; }
}

/* === TOUCH / NO-HOVER fallback ===
   Hover-intent doesn't fire on touch, so the preview rail would
   occupy DOM space (grid-rows: 0fr collapsed) but never reveal.
   Hide it entirely on no-hover devices so screen readers don't
   announce 9 unreachable tiles either. The collapsibles are
   already always-expanded under (hover:none) — handled above. */
@media (hover: none) {
	.dd-preview-rail {
		display: none;
	}
	/* Desktop dim treatment is meaningless on touch — defensively
	   reset so tap-and-hold or any stray hover event can't leave the
	   panel half-dimmed. */
	.dd-panel[data-focus-col] .dd-col:not([data-focus="true"]) {
		opacity: 1;
	}
}


/* ===================================================================
   CONSERVATION — CHAPTER I · ORIGIN
   Image-left / body-right grid with mono image tag, eyebrow, Cormorant
   headline + italic em, two body paragraphs, gold-bordered pull quote
   with em-dash cite, and a four-cell year timeline. Image is a real
   <img> inside a positioned wrapper so the rhinory-core picture filter
   can ship a WebP sibling.
   =================================================================== */

.section.origin { background: #0A0807; }
/* Section padding fallback so .section here matches the homepage's
   120px chapter rhythm without depending on a per-section override. */
.rhinory-conservation .section {
	padding-block: var(--cv-section-py, 120px);
	border-block: 0;
}

.or-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 0;
	border: 1px solid var(--rule);
	background: var(--wp--preset--color--reserve-2, #161210);
}
.or-img {
	position: relative;
	min-height: 560px;
	border-right: 1px solid var(--rule);
	overflow: hidden;
}
.or-img__img,
.or-img picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.or-tag {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 2;
	padding: 10px 14px;
	background: rgba(15,26,20,0.74);
	backdrop-filter: blur(8px);
	border: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
}

.or-body {
	padding: 64px 56px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
}
.or-pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin: 0;
}
.or-body h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.04;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--ivory);
	margin: 0;
}
.or-body h3 em {
	font-style: italic;
	color: var(--wp--preset--color--acacia);
}
.or-body p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--wp--preset--color--ivory);
	opacity: 0.86;
	margin: 0;
	max-width: 58ch;
}

.or-pull {
	margin-top: 0;
	padding: 24px 28px;
	border-left: 2px solid var(--wp--preset--color--acacia);
	background: rgba(212,162,76,0.05);
}
.or-pull q {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.3;
	color: var(--wp--preset--color--ivory);
	letter-spacing: -0.005em;
	quotes: "\201C" "\201D";
}
.or-pull q::before { content: open-quote;  color: var(--wp--preset--color--acacia); }
.or-pull q::after  { content: close-quote; color: var(--wp--preset--color--acacia); }
.or-pull cite {
	display: block;
	margin-top: 14px;
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: 0.85;
}

.or-time {
	margin-top: 6px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
.or-time-step {
	background: var(--wp--preset--color--reserve);
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	transition: background .3s, transform .3s;
}
.or-time-step:hover {
	background: rgba(212,162,76,0.06);
	transform: translateY(-2px);
}
.or-time-step .ot-yr {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--acacia);
}
.or-time-step .ot-ev {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 14px;
	color: var(--wp--preset--color--ivory);
	line-height: 1.3;
}

@media (max-width: 1100px) {
	.or-body { padding: 48px 40px; }
	.or-body h3 { font-size: 42px; }
}
@media (max-width: 980px) {
	.or-grid { grid-template-columns: 1fr; }
	.or-img {
		min-height: 340px;
		border-right: none;
		border-bottom: 1px solid var(--rule);
	}
	.or-body { padding: 40px 32px; }
	.or-time { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.rhinory-conservation .section { padding-block: 80px; }
	.or-img { min-height: 240px; }
	.or-body { padding: 32px 22px; gap: 14px; }
	.or-body h3 { font-size: 28px; }
	.or-pull { padding: 18px 20px; }
	.or-pull q { font-size: 19px; }
}
/* ===================================================================
   CONSERVATION PAGE — page-scoped overrides + chapter-specific CSS.
   Loaded only on the /conservation/ page via a conditional enqueue
   in functions.php so it stays out of the homepage cascade. Final
   consolidation step at the end of the build will fold these rules
   back into style.css and retire this file.
   =================================================================== */


/* ---- Page-level layout-flow reset.
   <main class="rhinory-conservation"> is a wp:group with default
   layout, so WP injects margin-block-start: 24px between every
   sibling section. Visible as a 24px body-bg bar wherever a dark
   section meets an ivory section. Same fix the homepage's
   .rhinory-front uses (style.css:344+); the per-page override avoids
   the file-level race in main style.css. */

.rhinory-conservation > * {
	margin-block-start: 0 !important;
}


/* ---- Chapter-head layout: narrow numeric eyebrow, lede left-aligned --
   The shared rhinory/section-head ships with a 1fr/1.6fr layout that
   pushes the lede well right of the page gutter. The Conservation
   prototype uses a 220px / 1fr split with an 80px gap so the lede
   sits closer to the left edge. Override here is page-scoped — the
   homepage section-head keeps its current proportions. */

.rhinory-conservation .section-head {
	grid-template-columns: 220px 1fr;
	gap: 80px;
	/* Top-align so the chapter numeral sits at the headline baseline,
	   not pinned to the bottom of the (lede-extended) right column. */
	align-items: start;
	/* Editorial divider under every chapter head — the prototype's
	   single hairline rule between chapter intro and chapter body. */
	padding-bottom: 36px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 56px;
}

/* Shared .eyebrow renders a 24px gold rule via ::before. Conservation
   chapter eyebrows are pure numeric (01, 02, …) so the leading rule
   reads as visual noise — the prototype has none. Page-scoped suppression
   so other pages keep the rule. */

.rhinory-conservation .section-head .eyebrow {
	font-size: 11px;
	letter-spacing: 0.24em;
	gap: 0;
	display: block;
}
.rhinory-conservation .section-head .eyebrow::before {
	display: none;
}

/* The numeric chapter marker — large Cormorant gold em sat below the
   small mono eyebrow so the chapter head reads "I · Origin" then a
   bold "01". Only meaningful when section-head's bigNum attr is set,
   which is currently only on Conservation chapter heads. */

.rhinory-conservation .section-head .big-num {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(36px, 4.4vw, 60px);
	line-height: 0.9;
	letter-spacing: -0.01em;
	/* Muted warm gray — the chapter eyebrow stays gold, the big numeral
	   is the quieter editorial mark. Reads as a wayfinding cue, not a
	   second piece of gold accenting. */
	color: rgba(241, 232, 214, 0.42);
}

/* Conservation chapter headlines run in a narrower column (220px/1fr,
   ~870px right column at 1280px wrap) than the homepage section-head
   (1fr/1.6fr, ~1100px). The shared h2 clamp(40px, 5.4vw, 76px) wraps
   the longer chapter headlines (e.g. "The work that can't happen on
   55 acres.") to two lines. Tighten the cap here so each chapter head
   reads as a single editorial line at desktop. text-wrap:balance
   distributes any necessary wrap evenly so longer headlines don't
   look orphaned. */

.rhinory-conservation .section-head h2 {
	font-size: clamp(34px, 3.6vw, 50px);
	line-height: 1.06;
	text-wrap: balance;
}

/* The 220px/1fr split above is a DESKTOP proportion and must hand back to the
   shared single-column collapse on phones. It does not do that on its own:
   the shared rule is `@media (max-width: 880px) { .section-head { ... } }`, one
   class, and loses to the two-class page-scoped override — so the fixed 220px
   column plus the 80px gap survived to phone widths, leaving the headline
   track ~46px inside a 346px wrap. An h2 cannot shrink below its longest word,
   so the chapter headline spilled past the viewport edge (measured 445px
   against a 390px viewport, 2026-08-03). Same values as the shared collapse,
   restated at matching scope so it applies. */

@media (max-width: 880px) {
	.rhinory-conservation .section-head {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}


/* ---- Origin card image placeholder.
   When no image is uploaded, paint a tasteful "photo pending" panel
   instead of an empty box so the card reads as intentionally
   pre-art-direction rather than broken. The mono caption sits
   centered, faint enough to not compete with the image-tag chip in
   the corner. Replaces nothing visually once an image is set. */

.or-img--placeholder {
	background:
		repeating-linear-gradient(
			135deg,
			rgba(212, 162, 76, 0.04) 0,
			rgba(212, 162, 76, 0.04) 12px,
			transparent 12px,
			transparent 24px
		),
		var(--wp--preset--color--reserve-2, #161210);
	display: grid;
	place-items: center;
}
.or-img-placeholder-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: 0.55;
}


/* ===================================================================
   CHAPTER II · THE CRISIS
   Two-column layout: big-stat aside (.cri-side) on the left, species
   chart + threats grid on the right (.cri-right). The species rows
   surface a horizontal population bar driven by --w on .sp-bar > span,
   set inline by render.php from the block's barWidth attribute.
   =================================================================== */

.section.crisis {
	background: #141210;
	border-block: 1px solid var(--rule);
}

.cri-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	align-items: start;
}

/* Big-stat aside — the giant Cormorant clay numeral with mono caps
   label, body, attribution. */
.cri-side {
	border: 1px solid var(--rule);
	background: rgba(15, 26, 20, 0.55);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cri-side .stat-num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	font-size: 88px;
	color: var(--acacia);
	line-height: 0.9;
	letter-spacing: -0.02em;
	margin: 0;
}
.cri-side .stat-num em { font-style: italic; font-weight: 400; }
.cri-side .stat-lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.78;
}
.cri-side p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ivory);
	opacity: 0.8;
	margin: 8px 0 0;
}
.cri-side .stat-foot {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.55;
}

/* Species chart. The shared .species-row markup gets a 4-column grid
   on the conservation page (number / name / bar track / count) instead
   of the homepage's 4-column ledger. The status track is hidden here
   because the bar visualization carries the same information. */
.section.crisis .sp-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--rule);
}
.section.crisis .species-row {
	display: grid;
	grid-template-columns: 42px 1fr 1.5fr auto;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule-soft, rgba(212, 162, 76, 0.10));
	transition: background .3s;
}
.section.crisis .species-row:hover { background: rgba(212, 162, 76, 0.04); }
.section.crisis .species-row.crit:hover { background: rgba(184, 91, 44, 0.06); }
.section.crisis .sp-status { display: none; }

.section.crisis .sp-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--acacia);
	opacity: 0.85;
}
.section.crisis .sp-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	color: var(--wp--preset--color--ivory);
	line-height: 1.1;
	letter-spacing: -0.005em;
	display: block;
}
.section.crisis .sp-name .sp-tag {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px;
	background: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--reserve);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	vertical-align: 3px;
	font-style: normal;
}
.section.crisis .sp-name small {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	color: var(--wp--preset--color--ivory);
	opacity: 0.55;
	letter-spacing: 0;
	margin-top: 3px;
	line-height: 1.4;
}

/* The .sp-bar track + animated fill. Width is driven by the inner
   span's --w custom property (0..1) set inline by render.php. */
.section.crisis .sp-bar {
	position: relative;
	height: 6px;
	background: rgba(241, 232, 214, 0.08);
	overflow: hidden;
}
.section.crisis .sp-bar > span {
	position: absolute; inset: 0 auto 0 0;
	background: rgba(241, 232, 214, 0.55);
	transform-origin: left;
	transform: scaleX(var(--w, 1));
}
.section.crisis .species-row.hilight .sp-bar > span { background: var(--wp--preset--color--acacia); }
.section.crisis .species-row.crit    .sp-bar > span { background: var(--acacia); }

.section.crisis .sp-count {
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	color: var(--wp--preset--color--ivory);
	text-align: right;
	min-width: 84px;
	letter-spacing: -0.005em;
}
.section.crisis .species-row.hilight .sp-count { color: var(--wp--preset--color--acacia); }
.section.crisis .species-row.crit    .sp-count { color: var(--acacia); }
.section.crisis .species-row.crit    .sp-count em { font-style: italic; }

/* Subspecies row — breaks the 01-05 species-counting rhythm */
.section.crisis .species-row.subspecies {
	border-top: 1px solid var(--rule);
	margin-top: 6px;
	padding-top: 24px;
}
.section.crisis .species-row.subspecies .sp-num {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond"), serif;
	font-style: italic;
	font-size: 18px;
	letter-spacing: 0;
	text-transform: none;
	opacity: 1;
}
.section.crisis .sp-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--acacia);
	opacity: 0.85;
	margin-bottom: 6px;
}

.section.crisis .sp-source {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.5;
	/* No top border — the last .species-row already draws a bottom
	   rule, so a sp-source border-top would stack as a double line. */
	margin: 18px 0 0;
}

/* Threats — 3-up grid of clay-pre / italic-name / body cells, with
   1px gold rule gaps. */
.section.crisis .threats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	margin-top: 36px;
}
.section.crisis .threat {
	background: var(--wp--preset--color--reserve);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: background .3s, transform .3s;
}
.section.crisis .threat:hover { background: #13241B; transform: translateY(-2px); }
.section.crisis .th-pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--acacia);
}
.section.crisis .th-name {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 22px;
	color: var(--wp--preset--color--ivory);
	letter-spacing: -0.005em;
	transition: color .3s;
}
.section.crisis .threat:hover .th-name { color: var(--wp--preset--color--acacia); }
.section.crisis .threat p {
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ivory);
	opacity: 0.72;
	margin: 0;
}

/* WP's :where(.wp-block-group.is-layout-flow) > * + * adds a 24px
   top margin to every sibling after the first. The wp:group wrappers
   I'm using here pick up that class — in CSS-grid containers
   (.threats) it pushes cells 2..N down 24px and breaks alignment;
   in flex-column containers (.sp-list) it adds an unwanted 24px
   between rows. Kill the auto-margin only in those layout containers
   so gap controls spacing. .cri-right is intentionally NOT in this
   list — its children (.sp-list / .sp-source / .threats) have
   explicit margin-top values that should survive. */

.section.crisis .threats > *,
.section.crisis .sp-list > * {
	margin-block-start: 0 !important;
}

@media (max-width: 980px) {
	.cri-grid { grid-template-columns: 1fr; gap: 40px; }
	.section.crisis .species-row { grid-template-columns: 32px 1fr auto; gap: 12px; }
	.section.crisis .sp-bar { display: none; }
	.section.crisis .threats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.cri-side .stat-num { font-size: 64px; }
	.section.crisis .sp-name { font-size: 18px; }
	.section.crisis .sp-count { font-size: 20px; min-width: 64px; }
	.section.crisis .threat { padding: 18px 16px; }
	.section.crisis .th-name { font-size: 19px; }
}


/* ===================================================================
   CHAPTER III · AT HOME
   Ivory section: dark text on cream background. Two-column home-grid:
   tall portrait on the left (with .home-card field-card overlay) and
   prose + welfare-line table + welfare callout on the right.
   =================================================================== */

/* Big-num flips to clay on ivory sections — same pattern the eyebrow
   and headline em already follow. */
.rhinory-conservation .section.ivory .section-head .big-num {
	color: rgba(15, 26, 20, 0.32);
}

.section.home .home-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: start;
}

.home-img {
	aspect-ratio: 4/5;
	border: 1px solid rgba(15, 26, 20, 0.12);
	position: relative;
	overflow: hidden;
}
.home-img__img,
.home-img picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Field card overlay — translucent dark panel pinned top-left of the
   portrait. Status pip is the green "in reserve" indicator. */
.home-card {
	position: absolute;
	left: 24px;
	top: 24px;
	background: rgba(15, 26, 20, 0.86);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(212, 162, 76, 0.45);
	color: var(--wp--preset--color--ivory);
	padding: 18px 20px;
	width: 240px;
}
.home-card .hc-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--wp--preset--color--acacia);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(212, 162, 76, 0.32);
	padding-bottom: 10px;
	margin-bottom: 12px;
}
.home-card .pip {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #7CB57A;
	box-shadow: 0 0 0 4px rgba(124, 181, 122, 0.18);
	margin-right: 6px;
	display: inline-block;
	vertical-align: middle;
}
.home-card .hc-name {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 34px;
	line-height: 1;
	margin-bottom: 4px;
	letter-spacing: -0.01em;
}
.home-card .hc-sub {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--ivory);
	opacity: 0.7;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.home-card .hc-rows {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	border-top: 1px solid rgba(241, 232, 214, 0.18);
	padding-top: 12px;
}
.home-card .hc-rows > div { display: flex; flex-direction: column; gap: 3px; }
.home-card .hc-rows span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 8.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.55;
}
.home-card .hc-rows strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 13px;
	color: var(--wp--preset--color--ivory);
	letter-spacing: 0;
}

/* Right column: prose + welfare table + callout. */
.home-cont h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.04;
	letter-spacing: -0.012em;
	margin: 0 0 18px;
	color: var(--wp--preset--color--reserve);
}
.home-cont h3 em {
	font-style: italic;
	color: var(--acacia);
}
.home-cont p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--reserve);
	opacity: 0.78;
	margin: 0 0 18px;
	max-width: 54ch;
}
.home-cont p strong {
	color: var(--wp--preset--color--reserve);
	font-weight: 500;
	opacity: 1;
}

/* Welfare-line table. Header row + dotted-divider line items. */
.welfare {
	margin-top: 32px;
	border: 1px solid rgba(15, 26, 20, 0.12);
	background: #FAF4E6;
}
.wf-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	border-bottom: 1px solid rgba(15, 26, 20, 0.10);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--acacia);
}
.wf-head .total {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 22px;
	color: var(--wp--preset--color--reserve);
	letter-spacing: -0.005em;
	text-transform: none;
}
.wf-head .total em { color: var(--acacia); }
.wf-row {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 14px 22px;
	border-bottom: 1px dotted rgba(15, 26, 20, 0.10);
	transition: background .3s;
}
.wf-row:last-child { border-bottom: none; }
.wf-row:hover { background: rgba(184, 91, 44, 0.04); }
.wf-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--acacia);
	opacity: 0.7;
}
.wf-cat {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	color: var(--wp--preset--color--reserve);
	letter-spacing: -0.005em;
}
.wf-cat small {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	color: var(--wp--preset--color--reserve);
	opacity: 0.6;
	margin-top: 2px;
	letter-spacing: 0;
}
.wf-pct {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 18px;
	color: var(--acacia);
	text-align: right;
}

/* The shared rhinory/welfare-note block (used here as the keepers
   callout) needs an ivory-section restyle. The base block emits
   <div class="welfare-note__copy"> rather than <p>, so the override
   has to target __copy AND set color on .welfare-note itself to beat
   the homepage default of ivory-on-dark. Lead flips to clay too. */
.section.home .welfare-note {
	margin-top: 24px;
	padding: 18px 22px;
	border: 1px solid rgba(15, 26, 20, 0.14);
	background: rgba(184, 91, 44, 0.06);
	display: flex;
	gap: 18px;
	align-items: center;
	color: var(--wp--preset--color--reserve);
	opacity: 1;
}
.section.home .welfare-note__pip,
.section.home .welfare-note .pip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--acacia);
	flex: 0 0 8px;
	display: block;
	margin-top: 0;
}
.section.home .welfare-note__copy,
.section.home .welfare-note p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--reserve);
	opacity: 0.86;
	max-width: none;
}
.section.home .welfare-note__lead,
.section.home .welfare-note strong {
	color: var(--acacia);
	font-weight: 500;
}

/* Same auto-margin reset story as Crisis: the home-grid wrapper and
   home-cont wrapper both get WP's is-layout-flow class, which would
   inject 24px between siblings inside .home-cont and break my
   explicit margin-top values. Layout containers only — explicit
   spacing on items is preserved by CSS specificity elsewhere. */
.section.home .home-grid > * { margin-block-start: 0 !important; }

@media (max-width: 980px) {
	.section.home .home-grid { grid-template-columns: 1fr; gap: 36px; }
	.home-img { aspect-ratio: 5/4; }
}
@media (max-width: 640px) {
	.home-card { width: 200px; left: 16px; top: 16px; padding: 14px 16px; }
	.home-card .hc-name { font-size: 28px; }
	.home-card .hc-rows { grid-template-columns: 1fr; }
	.home-cont h3 { font-size: 28px; }
	.wf-row { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 12px 16px; font-size: 13px; }
	.wf-head { padding: 14px 16px; }
}


/* ===================================================================
   CHAPTER IV · IN THE FIELD
   Stack of two partner cards (IRF, Care for Wild). Each is a
   1fr/1.2fr image+body grid; the .flip variant swaps the column
   ratio + DOM order to 1.2fr/1fr (image-right). Body holds the
   pre-row, headline + italic em, sub, body, 3-up allocations grid,
   foot row.
   =================================================================== */

.section.field { background: #0A0807; }

.ptr-card {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	border: 1px solid var(--rule);
	background: var(--wp--preset--color--reserve-2, #161210);
	margin-bottom: 32px;
	align-items: stretch;
	transition: border-color .4s;
}
.ptr-card:last-child { margin-bottom: 0; }
.ptr-card:hover { border-color: rgba(212, 162, 76, 0.5); }
.ptr-card.flip { grid-template-columns: 1.2fr 1fr; }

.ptr-img {
	position: relative;
	min-height: 480px;
	overflow: hidden;
}
.ptr-img__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.ptr-img picture { position: absolute; inset: 0; display: block; }
.ptr-img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(15, 26, 20, 0.18) 0%, rgba(15, 26, 20, 0) 60%);
	pointer-events: none;
}
.ptr-tag {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 2;
	padding: 8px 12px;
	background: rgba(15, 26, 20, 0.74);
	backdrop-filter: blur(8px);
	border: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
}
.ptr-img-placeholder-label {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	opacity: 0.55;
}

.ptr-body {
	padding: 56px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
}
.ptr-pre {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}
.ptr-pre .ptr-amt {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 32px;
	color: var(--wp--preset--color--acacia);
	letter-spacing: -0.01em;
	text-transform: none;
}
.ptr-body h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.04;
	letter-spacing: -0.012em;
	margin: 6px 0 0;
	color: var(--wp--preset--color--ivory);
}
.ptr-body h3 em {
	font-style: italic;
	color: var(--wp--preset--color--acacia);
}
.ptr-body .ptr-sub {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	color: var(--wp--preset--color--ivory);
	opacity: 0.74;
	margin: 0;
	letter-spacing: 0;
	max-width: none;
}
.ptr-body p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--ivory);
	opacity: 0.86;
	margin: 0;
	max-width: 60ch;
}

.ptr-allocs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	margin-top: 14px;
}
.ptr-alloc {
	background: var(--wp--preset--color--reserve);
	padding: 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: background .3s;
}
.ptr-alloc:hover { background: rgba(212, 162, 76, 0.06); }
.ptr-alloc .pa-num {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 22px;
	color: var(--wp--preset--color--acacia);
	line-height: 1;
	letter-spacing: -0.005em;
}
.ptr-alloc .pa-lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.7;
	line-height: 1.5;
}

.ptr-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.6;
}
.ptr-foot a {
	color: var(--wp--preset--color--acacia);
	opacity: 1;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	text-decoration: none;
	transition: gap .3s, color .3s;
}
.ptr-foot a:hover { gap: 14px; color: #E5BD7A; }

/* Layout-flow reset for the .ptr-allocs grid (cells 2 and 3 would
   otherwise drop 24px due to WP's auto-margin) and the .ptr-body
   stack (paragraphs/divs need `gap` to control rhythm, not WP's
   injected 24px). */
.ptr-allocs > *,
.ptr-body > * {
	margin-block-start: 0 !important;
}

@media (max-width: 980px) {
	.ptr-card,
	.ptr-card.flip { grid-template-columns: 1fr; }
	.ptr-img { min-height: 340px; order: -1; }
	.ptr-card.flip .ptr-img { order: -1; }
	.ptr-body { padding: 40px 32px; }
	.ptr-body h3 { font-size: 30px; }
	.ptr-allocs { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.ptr-img { min-height: 240px; }
	.ptr-body { padding: 32px 22px; gap: 14px; }
	.ptr-body h3 { font-size: 26px; }
	.ptr-pre { flex-wrap: wrap; gap: 8px; }
	.ptr-pre .ptr-amt { font-size: 26px; }
}


/* ===================================================================
   CHAPTER V · THE FOUNDATION
   Two-column emblem+body banner, then three pillars grids (4-up
   values, 3-up programs, 3-up internal pillars), and a summary
   callout at the end. Pillar tiles are reusable: the .pillars wrapper
   modifier (.pillars-3up vs .pillars-4up) sets column count.
   =================================================================== */

.section.found {
	background: #141210;
	border-block: 1px solid var(--rule);
}

/* Banner: emblem (left) + body (right). Diagonal gold gradient
   evokes a foundation seal without literal heraldry. The ::after
   shimmer is a slow gold sweep that drifts across the banner every
   nine seconds — subtle motion to mark this as the chapter's hero
   panel. Pointer-events:none so it never intercepts CTA clicks. */
.found-banner {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 0;
	background: linear-gradient(135deg, rgba(212, 162, 76, 0.10), rgba(15, 26, 20, 0.6));
	border: 1px solid rgba(212, 162, 76, 0.32);
	align-items: stretch;
	position: relative;
	overflow: hidden;
}
.found-banner::after {
	content: "";
	position: absolute;
	top: 0;
	left: -30%;
	width: 25%;
	height: 100%;
	background: linear-gradient(105deg,
		transparent 0%,
		rgba(212, 162, 76, 0.06) 40%,
		rgba(212, 162, 76, 0.18) 50%,
		rgba(212, 162, 76, 0.06) 60%,
		transparent 100%);
	transform: skewX(-18deg);
	pointer-events: none;
	animation: fbShim 9s ease-in-out infinite;
}
@keyframes fbShim {
	0%, 100% { left: -30%; }
	50%      { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
	.found-banner::after { animation: none; }
}

.found-emblem {
	padding: 64px 56px;
	border-right: 1px solid rgba(212, 162, 76, 0.22);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.found-emblem .seal-tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}
.found-emblem .seal-big {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--acacia);
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 300;
	font-size: 60px;
	color: var(--wp--preset--color--acacia);
	letter-spacing: -0.01em;
	background: radial-gradient(circle, rgba(212, 162, 76, 0.10), transparent 70%);
	overflow: hidden;
}
/* Image variant — drop the gold ring, radial bg, AND the circular
   clip so the logo art renders edge-to-edge in its native shape
   (not cropped into a disk). */
.found-emblem .seal-big--image {
	border: none;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	width: 140px;
	height: 140px;
}
.found-emblem .seal-big__img,
.found-emblem .seal-big picture {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.found-emblem h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--wp--preset--color--ivory);
}
.found-emblem h3 em {
	font-style: italic;
	color: var(--wp--preset--color--acacia);
}
.found-address {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.55;
	line-height: 1.6;
}

.found-body {
	padding: 64px 56px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	justify-content: center;
}
.found-pre {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}
.found-pre-domain {
	color: var(--wp--preset--color--ivory);
	opacity: 0.6;
}
.found-body h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.02;
	letter-spacing: -0.012em;
	margin: 6px 0 0;
	color: var(--wp--preset--color--ivory);
}
.found-body h2 em {
	font-style: italic;
	color: var(--wp--preset--color--acacia);
}
.found-pull {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 22px;
	line-height: 1.4;
	color: var(--wp--preset--color--ivory);
	opacity: 0.92;
	max-width: 54ch;
	margin: 0 0 6px;
}
.found-body p {
	font-size: 16px;
	line-height: 1.66;
	color: var(--wp--preset--color--ivory);
	opacity: 0.86;
	margin: 0;
	max-width: 60ch;
}
.found-body p strong { color: var(--wp--preset--color--ivory); opacity: 1; font-weight: 500; }
.fb-cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* Layout-flow reset for the banner halves so explicit gap controls
   the rhythm rather than WP's auto 24px. */
.found-emblem > *,
.found-body > * {
	margin-block-start: 0 !important;
}

/* Sub-head row above each pillars sub-grid. */
.found-subhead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	padding-bottom: 18px;
	margin: 48px 0 24px;
	border-bottom: 1px solid var(--rule);
}
.found-subhead__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin-bottom: 8px;
}
.found-subhead h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--wp--preset--color--ivory);
}
.found-subhead h3 em {
	font-style: italic;
	color: var(--wp--preset--color--acacia);
}
.found-subhead__link {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	text-decoration: none;
	white-space: nowrap;
}
.found-subhead__link:hover { color: #E5BD7A; }

/* Pillars grids — a single .pillars hook drives the 1px-rule grid;
   .pillars-4up and .pillars-3up modifiers set the column count. */
.pillars {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	margin-top: 32px;
}
.pillars.pillars-4up { grid-template-columns: repeat(4, 1fr); }
.pillars.pillars-3up { grid-template-columns: repeat(3, 1fr); }
/* Reset WP's layout-flow auto-margin in the grid so cells line up. */
.pillars > * { margin-block-start: 0 !important; }

.pillar {
	background: var(--wp--preset--color--reserve);
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 300px;
	text-decoration: none;
	color: var(--wp--preset--color--ivory);
	transition: background .35s, transform .35s, border-color .35s;
	position: relative;
	overflow: hidden;
}
.pillar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--acacia);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
/* Hover applies to all pillars (both clickable Programs cards and
   non-clickable Values/internal-pillars). Reads as a tactile lift
   even when the card isn't a link. */
.pillar:hover { background: #13241B; transform: translateY(-3px); }
.pillar:hover::before { transform: scaleX(1); }
.pillar .pl-pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	padding-bottom: 14px;
	border-bottom: 1px dashed rgba(212, 162, 76, 0.32);
}
.pillar h4 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-style: italic;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	margin: 6px 0 0;
	color: var(--wp--preset--color--ivory);
	transition: color .3s;
}
.pillar:hover h4 { color: var(--wp--preset--color--acacia); }
.pillar p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--ivory);
	opacity: 0.78;
	margin: 0;
	flex: 1;
}
.pillar .pl-foot {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px dashed rgba(241, 232, 214, 0.14);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.pillar .pl-foot .pl-l {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
	opacity: 0.55;
}
.pillar .pl-foot .pl-v {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 18px;
	color: var(--wp--preset--color--acacia);
	transition: letter-spacing .3s;
}
a.pillar:hover .pl-foot .pl-v { letter-spacing: 0.04em; }

/* Summary callout at the bottom. Just enough chrome to read as a
   "we're being explicit here" footer next to the heavier banner above. */
.found-summary {
	margin-top: 36px;
	padding: 20px 24px;
	border: 1px solid var(--rule);
	background: rgba(212, 162, 76, 0.04);
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
/* Body paragraph carries its own dot via ::before so the summary can
   render as proper wp:paragraph (no loose HTML in the pattern that
   would trip Gutenberg's block validator). */
.found-summary__copy {
	display: flex;
	gap: 14px;
	align-items: center;
	flex: 1;
	min-width: 280px;
	margin: 0;
}
.found-summary__copy::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--acacia);
	flex: 0 0 8px;
	display: block;
}
.found-summary p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--wp--preset--color--ivory);
	opacity: 0.85;
	max-width: 72ch;
}
.found-summary p strong { color: var(--wp--preset--color--ivory); opacity: 1; }
.found-summary > * { margin-block-start: 0 !important; }

@media (max-width: 980px) {
	.found-banner { grid-template-columns: 1fr; }
	.found-emblem {
		padding: 40px 32px;
		border-right: none;
		border-bottom: 1px solid rgba(212, 162, 76, 0.22);
	}
	.found-body { padding: 40px 32px; }
	.found-body h2 { font-size: 34px; }
	.pillars.pillars-4up,
	.pillars.pillars-3up { grid-template-columns: 1fr 1fr; }
	.found-subhead { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
	.found-emblem,
	.found-body { padding: 28px 22px; }
	.found-emblem .seal-big { width: 96px; height: 96px; font-size: 48px; }
	.found-body h2 { font-size: 28px; }
	.pillars.pillars-4up,
	.pillars.pillars-3up { grid-template-columns: 1fr; }
	.pillar { padding: 22px 18px; min-height: 0; }
	.pillar h4 { font-size: 24px; }
	.found-summary { padding: 16px 18px; }
}


/* ===================================================================
   CHAPTER VI · THE 2024 LEDGER
   Ivory section. Two-column receipt card: left side carries the
   allocation chart (5 horizontal segments + matching legend grid),
   right side carries the report cover (Blake portrait with stamp +
   italic title overlay) plus body, meta, and download CTAs.

   Scoped to .section.ledger so the paper-warm background + 1.1fr/1fr
   grid do not bleed onto the homepage `#impact` ledger card (which
   reuses the .ledger-card class but renders ivory text on the dark
   green section bg and therefore needs the original transparent-card
   styling from CHAPTER · LEDGER CARD above).
   =================================================================== */

.section.ledger .ledger-card {
	border: 1px solid rgba(15, 26, 20, 0.14);
	background: var(--wp--preset--color--paper, #FAF4E6);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
}

.ledger-left {
	padding: 48px;
	border-right: 1px solid rgba(15, 26, 20, 0.12);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ledger-pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--acacia);
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(15, 26, 20, 0.10);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ledger-pre__verified { color: var(--wp--preset--color--reserve); opacity: 0.55; }

.ledger-left h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 42px;
	line-height: 1.02;
	letter-spacing: -0.012em;
	margin: 0;
	color: var(--wp--preset--color--reserve);
}
.ledger-left h3 em {
	font-style: italic;
	color: var(--acacia);
}
.ledger-left p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--reserve);
	opacity: 0.78;
	margin: 0;
	max-width: 46ch;
}

/* Allocation chart row. lc-bar is a horizontal flex of 5 colored
   segments with proportional widths (set via inline `flex:N` from
   the segment's flex weight). lc-leg is a 5-cell legend grid below. */
.lc-bar-row {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.lc-bar-tot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.lc-bar-tot .lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--acacia);
}
.lc-bar-tot .val {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 36px;
	color: var(--wp--preset--color--reserve);
	letter-spacing: -0.01em;
}
.lc-bar-tot .val em { color: var(--acacia); }

.lc-bar {
	display: flex;
	height: 48px;
	border: 1px solid rgba(15, 26, 20, 0.14);
}
.lc-seg {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 6px 8px;
	border-right: 1px solid rgba(15, 26, 20, 0.18);
	transition: filter .25s, transform .9s cubic-bezier(.2, .7, .2, 1);
	cursor: default;
	transform-origin: left;
}
.lc-seg:last-child { border-right: none; }
.lc-seg:hover { filter: brightness(1.07); }
.lc-seg .sg-l {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 8.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}
/* Two segments use ivory-on-clay/walnut for contrast against their
   darker bg. Others get reserve-on-cream. */
.lc-seg.s-cfw .sg-l,
.lc-seg.s-fnd .sg-l { color: rgba(241, 232, 214, 0.85); }

.lc-leg {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin-top: 6px;
}
.lc-leg .lg { display: flex; flex-direction: column; gap: 3px; }
.lc-leg .lg .sw { width: 14px; height: 5px; }
.lc-leg .lg .nm {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--reserve);
	opacity: 0.75;
}
.lc-leg .lg .am {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: 16px;
	color: var(--acacia);
}

/* Right column — report cover, body, meta, actions. */
.ledger-right {
	padding: 48px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: linear-gradient(180deg, rgba(184, 91, 44, 0.05), transparent);
}
.lr-cover {
	aspect-ratio: 5/4;
	position: relative;
	border: 1px solid rgba(15, 26, 20, 0.14);
	overflow: hidden;
	background: var(--wp--preset--color--reserve);
}
.lr-cover__img,
.lr-cover picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.lr-cover::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 26, 20, 0.4), rgba(15, 26, 20, 0.85));
	pointer-events: none;
}
.lr-stamp {
	position: absolute;
	top: 24px;
	left: 24px;
	z-index: 2;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
	border-bottom: 1px solid var(--wp--preset--color--acacia);
	padding-bottom: 6px;
}
.lr-tit {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	z-index: 2;
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-weight: 400;
	font-size: 32px;
	line-height: 1;
	color: var(--wp--preset--color--ivory);
	letter-spacing: -0.01em;
}
.lr-tit em { color: var(--wp--preset--color--acacia); }

.lr-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--reserve);
	opacity: 0.78;
	margin: 0;
	max-width: 46ch;
}
.lr-meta {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	padding-top: 16px;
	border-top: 1px solid rgba(15, 26, 20, 0.14);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--reserve);
	opacity: 0.7;
}
.lr-meta strong { color: var(--acacia); font-weight: 500; }
.lr-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}
/* Dark CTA variant for the secondary "The Foundation" link on the
   light cover. The base .btn-dark from style.css handles most of
   the styling; this just ensures it sits on the ivory bg with a
   visible reserve border. */
.ledger-right .btn-dark {
	border: 1px solid var(--wp--preset--color--reserve);
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--ivory);
}
.ledger-right .btn-dark:hover {
	background: transparent;
	color: var(--wp--preset--color--reserve);
}

/* Layout-flow auto-margin reset for the ledger card halves. The
   wp:group nature of the inner blocks would otherwise inject 24px
   between siblings inside .ledger-left and .ledger-right. */
.ledger-left > *,
.ledger-right > *,
.lc-bar-row > * { margin-block-start: 0 !important; }

@media (max-width: 880px) {
	.section.ledger .ledger-card { grid-template-columns: 1fr; }
	.ledger-left {
		border-right: none;
		border-bottom: 1px solid rgba(15, 26, 20, 0.12);
		padding: 32px 28px;
	}
	.ledger-right { padding: 32px 28px; }
	.lc-leg { grid-template-columns: repeat(2, 1fr); }
	.ledger-left h3 { font-size: 30px; }
}
@media (max-width: 640px) {
	.ledger-left,
	.ledger-right { padding: 22px 18px; }
	.ledger-left h3 { font-size: 26px; }
	.lc-bar-tot .val { font-size: 28px; }
	.lc-leg { grid-template-columns: 1fr 1fr; gap: 6px; }
	.lr-tit { font-size: 24px; }
}

/* Narrow phones: drop the in-bar segment labels.
   The five .sg-l labels floor .lc-bar's min-content at 314px (measured), which
   pins .ledger-left's grid track at 350px (314 + 2x18 padding) inside a 344px
   content box and pushes .ledger-card's border box to x=405 against a 390px
   viewport — the residual horizontal overflow this page had.
   Nothing is lost by hiding them: .lc-leg directly below restates every segment
   name AND amount (blocks/ledger-card-2024/render.php:153-169), and .lc-bar
   carries role="img" aria-label="Allocation breakdown", so the in-bar text is
   not the accessible name either. The SEGMENTS stay — the proportional bar is
   the point; only the text inside them goes.
   420px rather than the ledger's own 640px breakpoint because the labels still
   fit down to ~396px viewport; hiding them at 640 would discard readable text
   across a 240px band that has no layout problem. */
@media (max-width: 420px) {
	.lc-seg .sg-l { display: none; }
}


/* ===================================================================
   CHAPTER VII · YOUR MOVE
   Four-up CTA grid. Reuses rhinory/pillar-card without modification —
   the .move-grid wrapper context restyles the pillars to match the
   proto's move-card visual (smaller padding, dashed dividers, taller
   min-height, animated underline on hover instead of the pillar's
   gold top-bar). Avoids a near-duplicate block.
   =================================================================== */

.section.move {
	background: #0A0807;
	border-block: 1px solid var(--rule);
}

/* The 4-up grid frame — uses the same 1px gold rule between cells
   pattern as .pillars, but at 4-column. Reset the WP layout-flow
   auto-margin so cells line up. */
.move-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
.move-grid > * { margin-block-start: 0 !important; }

/* Pillar restyle for the move-grid context. Strip the .pillar's
   gold top-bar hover effect and replace with a bottom underline
   sweep. Smaller padding + taller min-height + dashed dividers
   make the four cards read as quieter "next steps" tiles than
   the heavier pillars on the Foundation chapter above. */
.move-grid .pillar {
	padding: 32px 26px;
	min-height: 340px;
	gap: 12px;
}
.move-grid .pillar::before { content: none; }
.move-grid .pillar::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background: var(--wp--preset--color--acacia);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.move-grid .pillar:hover {
	background: rgba(212, 162, 76, 0.05);
	transform: translateY(-2px);
}
.move-grid .pillar:hover::after { transform: scaleX(1); }

.move-grid .pillar .pl-pre {
	font-size: 9px;
	letter-spacing: 0.22em;
	border-bottom-style: dashed;
	border-bottom-color: rgba(212, 162, 76, 0.3);
	padding-bottom: 12px;
}
.move-grid .pillar h4 {
	font-size: 28px;
	margin: 6px 0 0;
}
.move-grid .pillar p {
	font-size: 13px;
	line-height: 1.55;
	opacity: 0.72;
}
.move-grid .pillar .pl-foot {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dashed rgba(241, 232, 214, 0.14);
}
.move-grid .pillar .pl-foot .pl-l {
	font-size: 10px;
	letter-spacing: 0.16em;
}
.move-grid .pillar .pl-foot .pl-v {
	font-style: normal;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
}
.move-grid .pillar:hover .pl-foot .pl-v { letter-spacing: 0.22em; }

@media (max-width: 1100px) {
	.move-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.move-grid { grid-template-columns: 1fr; }
	.move-grid .pillar { min-height: 0; padding: 24px 22px; }
}


/* ===================================================================
   METHODOLOGY FOOTNOTE
   Editorial closer on a black band — 200px mono caps label on the
   left, multi-paragraph disclosures on the right. Sets the tone of
   "we are showing our work" for the dollar figures above.
   =================================================================== */

.method {
	background: #000;
	border-top: 1px solid var(--rule);
	padding: 60px 0;
}
.method-grid {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 48px;
	align-items: start;
}
.method-grid .m-lbl {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	line-height: 1.4;
}
.method-body {
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* Inner core/paragraph children carry their own spacing — kill WP's
   layout-flow auto-margin so the spacing rule below is the only one
   in play. */
.method-body > * { margin-block-start: 0 !important; }
.method-body p {
	font-size: 13px;
	line-height: 1.75;
	color: var(--wp--preset--color--ivory);
	opacity: 0.66;
	margin: 0 0 14px 0;
	text-wrap: pretty;
	max-width: 78ch;
}
.method-body p:last-child { margin-bottom: 0; }
.method-body p strong {
	color: var(--wp--preset--color--ivory);
	opacity: 0.92;
	font-weight: 500;
}

@media (max-width: 760px) {
	.method-grid { grid-template-columns: 1fr; gap: 18px; }
	.method { padding: 48px 0; }
	.method-grid .m-lbl { font-size: 10px; }
}


/* ===================================================================
   SCROLL-REVEAL + STAGGER GROUPS + CHART ANIMATIONS
   conservation.js adds .reveal / .reveal-stack to every section,
   hero, chapter head, year timeline, threat grid, pillar grid, move
   grid, and ledger legend on script start; an IntersectionObserver
   flips each to .visible the first time it crosses the viewport.
   CSS handles the rest from here.
   =================================================================== */

.rhinory-conservation .reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.rhinory-conservation .reveal.visible {
	opacity: 1;
	transform: none;
}

.rhinory-conservation .reveal-stack > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.rhinory-conservation .reveal-stack.visible > * { opacity: 1; transform: none; }
.rhinory-conservation .reveal-stack.visible > *:nth-child(1) { transition-delay: .04s; }
.rhinory-conservation .reveal-stack.visible > *:nth-child(2) { transition-delay: .12s; }
.rhinory-conservation .reveal-stack.visible > *:nth-child(3) { transition-delay: .20s; }
.rhinory-conservation .reveal-stack.visible > *:nth-child(4) { transition-delay: .28s; }
.rhinory-conservation .reveal-stack.visible > *:nth-child(5) { transition-delay: .36s; }
.rhinory-conservation .reveal-stack.visible > *:nth-child(6) { transition-delay: .44s; }

/* Crisis species-bar grow — only animates once the .crisis section
   becomes visible so the chart "draws in" as you reach it rather
   than being already-fillled when you arrive. */
@keyframes spBarFill {
	to { transform: scaleX(var(--w, 1)); }
}
.section.crisis .sp-bar > span {
	transform: scaleX(0);
	transform-origin: left;
}
.section.crisis.reveal.visible .sp-bar > span {
	animation: spBarFill 1.4s cubic-bezier(.2, .7, .2, 1) forwards;
}
.section.crisis.reveal.visible .species-row:nth-child(2) .sp-bar > span { animation-delay: .08s; }
.section.crisis.reveal.visible .species-row:nth-child(3) .sp-bar > span { animation-delay: .16s; }
.section.crisis.reveal.visible .species-row:nth-child(4) .sp-bar > span { animation-delay: .24s; }
.section.crisis.reveal.visible .species-row:nth-child(5) .sp-bar > span { animation-delay: .32s; }
.section.crisis.reveal.visible .species-row:nth-child(6) .sp-bar > span { animation-delay: .40s; }

/* Ledger allocation bar grow on intersection. Each segment scales
   from 0→1 left-to-right; the cascade reads as "drawing the
   receipt" rather than a pre-filled chart. */
.section.ledger .lc-seg {
	transform: scaleX(0);
	transform-origin: left;
	transition: filter .25s, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.section.ledger.reveal.visible .lc-seg { transform: scaleX(1); }
.section.ledger.reveal.visible .lc-seg:nth-child(1) { transition-delay: 0.05s, .05s; }
.section.ledger.reveal.visible .lc-seg:nth-child(2) { transition-delay: 0.05s, .18s; }
.section.ledger.reveal.visible .lc-seg:nth-child(3) { transition-delay: 0.05s, .30s; }
.section.ledger.reveal.visible .lc-seg:nth-child(4) { transition-delay: 0.05s, .42s; }
.section.ledger.reveal.visible .lc-seg:nth-child(5) { transition-delay: 0.05s, .54s; }


/* ===================================================================
   PHOTO + INTERACTION POLISH
   Hover refinements not already specified by chapter CSS — welfare
   row clay rule + cat tint, partner-card alloc tile hover, partner
   foot link gap-grow + brighten, foundation seal pulse ring.
   =================================================================== */

/* Welfare row: clay 2px rule slides in from left + cat color shifts
   to clay on hover. Reads as a tactile "underlining" of the row. */
.section.home .wf-row { position: relative; overflow: hidden; }
.section.home .wf-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--acacia);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform .3s;
}
.section.home .wf-row:hover::before { transform: scaleY(1); }
.section.home .wf-cat { transition: color .25s; }
.section.home .wf-row:hover .wf-cat { color: var(--acacia); }

/* Field card overlay nudges down/right when its parent image is
   hovered — small kinetic accent that shows the card is its own
   layer above the portrait. */
.home-card { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.home-img:hover .home-card { transform: translate(2px, -2px); }

/* Partner card allocation tiles: bg tint on hover + ivory shift on
   the italic numeral. */
.ptr-alloc { transition: background .3s; }
.ptr-alloc:hover { background: rgba(212, 162, 76, 0.06); }
.ptr-alloc .pa-num em { transition: color .25s; }
.ptr-alloc:hover .pa-num em { color: var(--wp--preset--color--ivory); }

/* Foundation seal pulse — gold ring radiates outward every 2.6s.
   Only meaningful when the seal renders as a circular letter; the
   image variant kept overflow:visible + no border-radius, so a
   square ring would render. Gate to the non-image variant. */
.found-emblem .seal-big:not(.seal-big--image) { position: relative; overflow: hidden; }
.found-emblem .seal-big:not(.seal-big--image)::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--acacia);
	opacity: 0.6;
	animation: sealRing 2.6s ease-out infinite;
}
@keyframes sealRing {
	0%   { transform: scale(1);    opacity: 0.5; }
	70%  { transform: scale(1.45); opacity: 0;   }
	100% { transform: scale(1.45); opacity: 0;   }
}

/* Section dividers — 48px hairline gold accent floats above each
   section transition. Marks editorial chapter boundaries beyond
   the section bg-color flips. */
.rhinory-conservation .section + .section { position: relative; }
.rhinory-conservation .section + .section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 48px;
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--acacia), transparent);
	opacity: 0.45;
	pointer-events: none;
}


/* Reduced motion — keep state transitions instant so layout settles,
   but never run a continuous animation. */
@media (prefers-reduced-motion: reduce) {
	.rhinory-conservation .reveal,
	.rhinory-conservation .reveal-stack > *,
	.rhinory-conservation .reveal-stack.visible > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.section.crisis .sp-bar > span { transform: scaleX(var(--w, 1)) !important; animation: none !important; }
	.section.ledger .lc-seg { transform: scaleX(1) !important; transition: none !important; }
	.found-emblem .seal-big::after { animation: none !important; }
	.found-banner::after { animation: none !important; }
	.home-card { transition: none !important; }
}

/* Fallback for IO-less browsers — JS sets .cv-no-io on <html> and
   we just paint the final state. */
.cv-no-io .rhinory-conservation .reveal,
.cv-no-io .rhinory-conservation .reveal-stack > * {
	opacity: 1;
	transform: none;
}

/* Editor canvas — neutralize all reveal-on-scroll initial states.
   The IntersectionObserver in conservation.js never runs in the
   Gutenberg iframe, so .reveal targets stay at opacity:0 forever
   and the chart segments stay at scaleX(0) (invisible) — making
   the editor unusable. Force the final state when the editor
   wrapper class is present. */
.editor-styles-wrapper .rhinory-conservation .reveal,
.editor-styles-wrapper .rhinory-conservation .reveal-stack > *,
.editor-styles-wrapper .rhinory-conservation .reveal-stack.visible > *,
.editor-styles-wrapper .section.ledger .lc-seg,
.editor-styles-wrapper .section.crisis .sp-bar > span {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}
/* Species bars need a real width fill in the editor, not transform:none. */
.editor-styles-wrapper .section.crisis .sp-bar > span {
	transform: scaleX(var(--w, 1)) !important;
}

/* walk-3 defect #5: editor canvas runs ~1160px wide (vs front-end 1440),
   shrinking each .bk5-slab-inner column to ~492px (vs 552 on front-end).
   Both H3s use `<br>`-forced 2-line markup, but at 492px col width the
   Origin H3 ("Two rhinos went down to poachers.") wraps to 4 line-fragments
   while the shorter Around H3 ("Three keepers around Blake.") stays at 2 —
   the two columns then mis-align below the heading row, even though they
   share container width + zeroed margin-block-start. Live front-end at
   552px wraps both to 2 line-fragments each, so the layout reads right
   only there. Drop H3 font-size in editor canvas so both wrap predictably
   at the narrower column width. Live unaffected. */
.editor-styles-wrapper .bk5-origin-lede,
.editor-styles-wrapper .bk5-around-head {
	font-size: clamp(24px, 2.4vw, 32px);
}


/* ===================================================================
   CHAPTER RAIL — left-edge variant of rhinory/side-nav.
   The base .side-nav rule in style.css positions itself fixed at
   right:24px with right-anchored child order (label grows leftward).
   For the conservation chapter rail we flip both: pin to left:18px,
   restack child flex order so the label expands rightward without
   nudging the num/tick.

   Rail is shown at 1100px (proto's threshold) instead of the
   homepage's 1640px — chapters are short enough that even mid-size
   laptops have room for the rail. JS active-state + hero-hide work
   unchanged because both observe `.side-nav` (not the variant).
   =================================================================== */

.side-nav--left {
	right: auto;
	left: 18px;
	/* Bump above the mega-drawer scrim (.dd-scrim z:78). The scrim is
	   a fixed full-viewport overlay with opacity:0 but no pointer-events:
	   none, so at z:60 the rail's clicks were silently absorbed by it.
	   Plugin-side fix should be: .dd-scrim { pointer-events: none }
	   when not .is-open — until then this z bump keeps the rail
	   interactive. */
	z-index: 85;
	/* Dark glass backdrop — the proto's signature for the chapter rail.
	   Without this the ivory snv-link text disappears against ivory
	   sections (At Home, Ledger). The blur lifts it off the underlying
	   art so it reads on any chapter bg without per-section color
	   gymnastics. */
	padding: 10px 8px;
	background: linear-gradient(180deg, rgba(15, 26, 20, 0.78) 0%, rgba(15, 26, 20, 0.55) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--rule);
}
.side-nav--left ol {
	align-items: flex-start;
}
/* Flip the snv-link child order so the label sits to the RIGHT of the
   num/tick instead of to the left. Same primitives, mirrored layout. */
.side-nav--left .snv-num   { order: 1; }
.side-nav--left .snv-tick  { order: 2; }
.side-nav--left .snv-label {
	order: 3;
	text-align: left;
	padding-left: 0;
}
/* Mirror prototype's .ch-rail: labels collapse by default and expand
   together on rail-level :hover. Cancel the base per-link expansion
   (style.css ~3999) on .is-active and link :hover so the active
   chapter doesn't pin its label open after mouse-out. The active
   link still receives color/tick/border treatment from the base rule. */
.side-nav--left .snv-link:hover .snv-label,
.side-nav--left .snv-link.is-active .snv-label {
	max-width: 0;
	opacity: 0;
	padding-left: 0;
}
.side-nav--left:hover .snv-link .snv-label {
	max-width: 140px;
	opacity: 1;
}

/* Conservation rail visibility: show at 1100px+ (proto's threshold)
   even though the homepage variant only shows at 1640px+. The is-
   hidden state translation flips to slide LEFT instead of right. */
@media (min-width: 1100px) and (max-width: 1639.98px) {
	.side-nav.side-nav--left { display: block; }
}
.side-nav--left.is-hidden {
	transform: translateY(-50%) translateX(-20px);
}


/* ===================================================================
   VISIT PAGE — `/visit/`
   Page-scoped to `.rhinory-visit` so rules stay inert on every other
   page. Mirrors the prototype at prototypes/4/Visit.html.
   =================================================================== */


/* -------------------------------------------------------------------
   VISIT HERO (#top) — full-bleed cover with grain + scrim, 1.4fr | 1fr
   inner grid, glass status panel on the right, scroll cue at bottom.
   The hero slides up under the sticky chrome via negative margin +
   reciprocal padding, matching the conservation hero pattern.
   ------------------------------------------------------------------- */
.rhinory-visit .visit-hero {
	position: relative;
	min-height: 88vh;
	background: #000;
	color: var(--wp--preset--color--ivory, #F0E8DC);
	overflow: hidden;
	margin-top: calc(0px - var(--chrome-h, 0px));
	padding-top: var(--chrome-h, 0px);
	border-bottom: 1px solid var(--rule);
}

/* Background image lives on a sibling element (not ::before) so the
   rhinory-core picture filter can rewrite the asset to <picture> with a
   WebP source. The <img> inside is positioned to behave like a CSS
   cover-fit background. */
.rhinory-visit .visit-hero-img {
	position: absolute; inset: -10% 0 -10% 0;
	filter: saturate(0.92) contrast(1.04);
	will-change: transform;
	/* visit.js drives --hero-py from scroll position; defaults to 0 so
	   the photo sits still when JS is absent. */
	transform: translate3d(0, var(--hero-py, 0px), 0) scale(1.06);
	transition: transform 0.12s linear;
}
.rhinory-visit .visit-hero-img picture,
.rhinory-visit .visit-hero-img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--visit-hero-pos, center 35%);
}
.rhinory-visit .visit-hero-img::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(15,26,20,0.55) 0%, rgba(15,26,20,0.20) 35%, rgba(15,26,20,0.78) 100%),
		radial-gradient(80% 60% at 30% 80%, rgba(15,26,20,0.55) 0%, rgba(15,26,20,0) 70%);
}

/* Subtle SVG noise overlay — same data URL as the prototype, kept in
   the stylesheet so it's cacheable rather than inlined per-render. */
.rhinory-visit .visit-hero-grain {
	position: absolute; inset: 0; pointer-events: none; opacity: 0.08;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
	mix-blend-mode: overlay;
}

.rhinory-visit .visit-hero-inner {
	position: relative; z-index: 2;
	padding: 140px 0 80px 0;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 80px;
	align-items: end;
	max-width: var(--rhinory-max-w, 1360px);
	margin: 0 auto;
	padding-left: var(--rhinory-px, 40px);
	padding-right: var(--rhinory-px, 40px);
}

/* Layout-flow auto-margin reset on the inner grid only. WP injects
   `margin-block-start: 24px` between siblings inside any wp:group
   with default layout, which would push the status aside off-grid. */
.rhinory-visit .visit-hero-inner > * {
	margin-block-start: 0 !important;
}

/* Cover column — eyebrow, headline, lede, CTAs. */
.rhinory-visit .visit-hero-cover > * { margin-block-start: 0 !important; }

.rhinory-visit .visit-eyebrow {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia, #C5913A);
	margin-bottom: 24px;
	display: inline-flex; align-items: center; gap: 14px;
}
.rhinory-visit .visit-eyebrow::before {
	content: ""; width: 32px; height: 1px;
	background: var(--wp--preset--color--acacia, #C5913A);
}

.rhinory-visit .visit-headline {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", Georgia, serif);
	font-weight: 400;
	font-size: clamp(54px, 7.4vw, 118px);
	line-height: 0.96; letter-spacing: -0.012em;
	margin: 0 0 28px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .visit-headline em {
	font-style: italic; font-weight: 300;
	color: var(--wp--preset--color--acacia, #C5913A);
}

.rhinory-visit .visit-sub {
	font-size: 18px; line-height: 1.6;
	max-width: 50ch; opacity: 0.92;
	margin: 0 0 32px 0;
}

.rhinory-visit .visit-hero-ctas {
	display: flex; gap: 14px; flex-wrap: wrap;
}

/* Status panel on the right — translucent reserve glass, 1px acacia
   underline reveal on hover per row. */
.rhinory-visit .visit-status {
	background: rgba(15,26,20,0.72);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	        backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid var(--rule);
	padding: 30px 32px;
}
.rhinory-visit .visit-status > * { margin-block-start: 0 !important; }

.rhinory-visit .visit-status-row {
	position: relative;
	display: flex; justify-content: space-between; align-items: flex-start;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.rhinory-visit .visit-status-row:last-child  { border-bottom: 0; }
.rhinory-visit .visit-status-row:first-child { padding-top: 0; }
.rhinory-visit .visit-status-row::after {
	content: ""; position: absolute; left: 0; bottom: -1px;
	height: 1px; width: 0;
	background: var(--wp--preset--color--acacia, #C5913A);
	transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rhinory-visit .visit-status-row:hover::after { width: 100%; }

.rhinory-visit .vs-label {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia, #C5913A);
}
.rhinory-visit .vs-value {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 20px; line-height: 1.15;
	text-align: right;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .vs-value small {
	display: block;
	font-family: var(--wp--preset--font-family--body, "Lora", sans-serif);
	font-size: 12px; letter-spacing: 0.06em;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-top: 4px;
	font-style: normal;
}
.rhinory-visit .vs-pip {
	width: 8px; height: 8px; border-radius: 50%;
	background: #7CB57A;
	display: inline-block;
	margin-right: 8px;
	box-shadow: 0 0 0 4px rgba(124,181,122,0.18);
	animation: rhinory-visit-pip 1.6s ease-in-out infinite;
}
@keyframes rhinory-visit-pip { 50% { box-shadow: 0 0 0 8px rgba(124,181,122,0); } }

/* Scroll cue at the bottom-center of the hero — decorative only. */
.rhinory-visit .visit-hero-cue {
	position: absolute; left: 50%; bottom: 36px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
	opacity: 0.85;
	pointer-events: none;
}
.rhinory-visit .visit-hero-cue .line {
	width: 1px; height: 54px;
	background: linear-gradient(180deg, var(--wp--preset--color--acacia, #C5913A) 0%, transparent 100%);
	position: relative; overflow: hidden;
}
.rhinory-visit .visit-hero-cue .line::after {
	content: ""; position: absolute; left: 0; top: -30px;
	width: 1px; height: 30px;
	background: linear-gradient(180deg, transparent, var(--wp--preset--color--ivory, #F0E8DC));
	animation: rhinory-visit-cue 2.4s ease-in-out infinite;
}
@keyframes rhinory-visit-cue {
	0%   { top: -30px; opacity: 0; }
	25%  { opacity: 1; }
	75%  { opacity: 1; }
	100% { top: 54px;  opacity: 0; }
}

/* Tablet / large phone landscape — stack columns, smaller paddings. */
@media (max-width: 980px) {
	.rhinory-visit .visit-hero { min-height: auto; padding-bottom: 60px; }
	.rhinory-visit .visit-hero-inner {
		grid-template-columns: 1fr;
		gap: 40px;
		padding: 120px var(--rhinory-px, 40px) 40px var(--rhinory-px, 40px);
	}
	.rhinory-visit .visit-headline { font-size: clamp(40px, 8vw, 76px); margin-bottom: 20px; }
	.rhinory-visit .visit-sub { font-size: 16px; max-width: 60ch; margin-bottom: 24px; }
	.rhinory-visit .visit-status { padding: 24px 22px; }
	.rhinory-visit .vs-value { font-size: 17px; }
	.rhinory-visit .visit-hero-cue { display: none; }
}

@media (max-width: 720px) {
	.rhinory-visit .visit-hero-inner {
		padding: 96px var(--rhinory-px-mob, 22px) 32px var(--rhinory-px-mob, 22px);
		gap: 32px;
	}
	.rhinory-visit .visit-eyebrow { font-size: 10px; margin-bottom: 18px; }
	.rhinory-visit .visit-headline { font-size: clamp(36px, 9vw, 56px); line-height: 1.0; margin-bottom: 18px; }
	.rhinory-visit .visit-sub { font-size: 15px; line-height: 1.55; margin-bottom: 22px; }
	.rhinory-visit .visit-hero-ctas { gap: 10px; }
	.rhinory-visit .visit-hero-ctas .btn { width: 100%; justify-content: center; }
	.rhinory-visit .visit-status { padding: 22px 20px; }
	.rhinory-visit .visit-status-row { padding: 14px 0; gap: 12px; }
	.rhinory-visit .vs-label { font-size: 9px; }
	.rhinory-visit .vs-value { font-size: 16px; }
	.rhinory-visit .vs-value small { font-size: 11px; }
}

@media (max-width: 480px) {
	.rhinory-visit .visit-hero-inner {
		padding-top: 80px; padding-bottom: 24px;
	}
	.rhinory-visit .visit-headline { font-size: clamp(34px, 10vw, 46px); }
	.rhinory-visit .visit-sub { font-size: 14.5px; }
	.rhinory-visit .visit-status { padding: 18px 16px; }
	.rhinory-visit .visit-status-row { flex-wrap: wrap; }
	.rhinory-visit .vs-value { text-align: left; width: 100%; }
}


/* -------------------------------------------------------------------
   VISIT — chapter-head proportions override.
   The shared rhinory/section-head ships with a 1fr/1.6fr split + end
   alignment. The Visit prototype's `.chapter-head` is a 200px / 1fr
   split aligned to start with a hairline rule below. Same block,
   page-scoped CSS.
   ------------------------------------------------------------------- */
.rhinory-visit .section-head {
	grid-template-columns: 200px 1fr;
	gap: 48px;
	align-items: start;
	padding-bottom: 36px;
	margin-bottom: 56px;
	border-bottom: 1px solid var(--rule);
}
.rhinory-visit .section-head h2 {
	font-size: clamp(40px, 4.6vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.012em;
	margin: 0 0 16px 0;
}
.rhinory-visit .section-head .lede {
	font-size: 17px;
	line-height: 1.62;
	max-width: 62ch;
	opacity: 0.86;
	margin: 0;
}
@media (max-width: 880px) {
	.rhinory-visit .section-head {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-bottom: 36px;
	}
}

/* Section + section override on Visit: subtle 1px hairline between
   adjacent sections, mirroring conservation's chapter divider. */
.rhinory-visit .section + .section {
	border-top: 1px solid var(--rule);
}


/* -------------------------------------------------------------------
   VISIT — #experiences (ladder rows + bridge pullquote).
   The .section.green base is global; these rules style the ladder
   structure inside it.
   ------------------------------------------------------------------- */
.rhinory-visit .exp-ladder {
	display: flex; flex-direction: column; gap: 0;
	position: relative;
}
.rhinory-visit .exp-ladder.wp-block-group { margin: 0; padding: 0; }
.rhinory-visit .exp-ladder > * { margin-block-start: 0 !important; }

.rhinory-visit .exp-row {
	display: grid;
	grid-template-columns: 120px 1.1fr 1fr 220px;
	gap: 36px;
	padding: 36px 0;
	border-top: 1px solid var(--rule);
	align-items: start;
	transition: background 0.35s cubic-bezier(0.2,0.7,0.2,1), padding 0.35s cubic-bezier(0.2,0.7,0.2,1);
	position: relative;
}
.rhinory-visit .exp-row > * { margin-block-start: 0 !important; }

.rhinory-visit .exp-row::before {
	content: ""; position: absolute; left: 0; top: 0;
	height: 1px; width: 0;
	background: var(--wp--preset--color--acacia, #C5913A);
	transition: width 0.55s cubic-bezier(0.2,0.7,0.2,1);
}
.rhinory-visit .exp-row:hover {
	background: rgba(212,162,76,0.04);
	padding-left: 14px; padding-right: 14px;
}
.rhinory-visit .exp-row:hover::before { width: 100%; }
.rhinory-visit .exp-row:hover .exp-img picture,
.rhinory-visit .exp-row:hover .exp-img img { transform: scale(1.03); }
.rhinory-visit .exp-row:hover .reserve { background: var(--wp--preset--color--ivory, #F0E8DC); }
.rhinory-visit .exp-row:last-child { border-bottom: 1px solid var(--rule); }

.rhinory-visit .exp-num {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia, #C5913A);
	padding-top: 6px;
}
.rhinory-visit .exp-num small {
	display: block;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-top: 6px;
	font-size: 9px; letter-spacing: 0.18em;
}

.rhinory-visit .exp-row h3 {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: 34px; line-height: 1.05;
	margin: 0 0 8px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .exp-row h3 em {
	font-style: italic; font-weight: 300;
	color: var(--wp--preset--color--acacia, #C5913A);
}
.rhinory-visit .exp-row .exp-tag {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-bottom: 18px;
}
.rhinory-visit .exp-row p {
	font-size: 15px; line-height: 1.62;
	margin: 0; opacity: 0.86;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}

/* Image: <div class="exp-img"> wraps a <picture> from the rhinory-core
   filter. Image stretches to fill, object-position is editor-controlled. */
.rhinory-visit .exp-img {
	position: relative;
	width: 100%;
	aspect-ratio: 5/4;
	margin-bottom: 14px;
	overflow: hidden;
	background-color: var(--wp--preset--color--reserve-2, #161210);
}
.rhinory-visit .exp-img picture,
.rhinory-visit .exp-img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--exp-img-pos, center);
	filter: saturate(0.92);
	transition: transform 0.8s cubic-bezier(0.2,0.7,0.2,1), filter 0.5s;
}

.rhinory-visit .exp-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
}
.rhinory-visit .exp-meta strong {
	display: block;
	color: var(--wp--preset--color--ivory, #F0E8DC);
	font-weight: 400;
	font-family: var(--wp--preset--font-family--body, "Lora", sans-serif);
	font-size: 12px; letter-spacing: 0.04em;
	text-transform: none;
	margin-top: 3px;
}
/* visit-exp-meta children render as <span> wrappers. The strong sits
   ABOVE the label visually but the markup is strong-then-text — flip
   visual order so the bolded value comes first per row. */
.rhinory-visit .exp-meta > span { display: block; }

.rhinory-visit .exp-cta-block {
	display: flex; flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	text-align: right;
}
.rhinory-visit .exp-cta-block > * { margin-block-start: 0 !important; }
.rhinory-visit .exp-cta-block .price {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 42px; font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--acacia, #C5913A);
}
.rhinory-visit .exp-cta-block .price small {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-top: 6px;
}
.rhinory-visit .exp-cta-block .reserve {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 20px;
	background: var(--wp--preset--color--acacia, #C5913A);
	color: var(--wp--preset--color--reserve, #0E2417);
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.rhinory-visit .exp-cta-block .reserve:hover { background: var(--wp--preset--color--ivory, #F0E8DC); }
.rhinory-visit .exp-cta-block .reserve.ghost {
	background: transparent;
	border: 1px solid var(--rule);
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .exp-cta-block .reserve.ghost:hover {
	border-color: var(--wp--preset--color--acacia, #C5913A);
	color: var(--wp--preset--color--acacia, #C5913A);
	background: transparent;
}

/* Featured row — gold gradient backdrop, top gold rule, dot stamp. */
.rhinory-visit .exp-row.is-featured {
	background: linear-gradient(180deg, rgba(212,162,76,0.05) 0%, rgba(212,162,76,0) 100%);
	padding: 48px 28px;
	margin: 0 -28px;
	border-top: 1px solid var(--wp--preset--color--acacia, #C5913A);
	border-bottom: 1px solid var(--rule);
}
.rhinory-visit .exp-row.is-featured + .exp-row { border-top: 1px solid var(--rule); }
.rhinory-visit .exp-row.is-featured .featured-stamp {
	display: inline-flex; align-items: center; gap: 8px;
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia, #C5913A);
}
.rhinory-visit .exp-row.is-featured .featured-stamp::before {
	content: "";
	width: 6px; height: 6px;
	background: var(--wp--preset--color--acacia, #C5913A);
	border-radius: 50%;
}

/* Bridge pullquote — 200px / 1fr split, oversized acacia open-quote
   glyph, italic Cormorant body, mono cite. */
.rhinory-visit .exp-pullquote {
	margin-top: 60px;
	padding: 40px 36px;
	background: var(--wp--preset--color--reserve-2, #161210);
	border: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 36px;
	align-items: center;
}
.rhinory-visit .exp-pullquote > * { margin-block-start: 0 !important; }
.rhinory-visit .exp-pullquote__glyph {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 88px; line-height: 1;
	color: var(--wp--preset--color--acacia, #C5913A);
	font-weight: 400;
}
.rhinory-visit .exp-pullquote__body > * { margin-block-start: 0 !important; }
.rhinory-visit .exp-pullquote__quote {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 24px; line-height: 1.4;
	font-style: italic; font-weight: 300;
	margin: 0 0 16px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .exp-pullquote__cite {
	font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia, #C5913A);
	margin: 0;
}

/* Tablet — stack the row to single column; image goes 16:10. */
@media (max-width: 980px) {
	.rhinory-visit .exp-row {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 32px 0;
	}
	.rhinory-visit .exp-row.is-featured {
		padding: 36px 22px;
		margin: 0 -22px;
	}
	.rhinory-visit .exp-img { aspect-ratio: 16/10; }
	.rhinory-visit .exp-row h3 { font-size: 30px; }
	.rhinory-visit .exp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rhinory-visit .exp-cta-block {
		align-items: flex-start; text-align: left;
		flex-direction: row; flex-wrap: wrap;
		justify-content: space-between;
		width: 100%; gap: 18px;
	}
	.rhinory-visit .exp-cta-block .price { font-size: 38px; }
	.rhinory-visit .exp-pullquote {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 32px 24px;
	}
	.rhinory-visit .exp-pullquote__glyph { font-size: 64px; }
}

@media (max-width: 720px) {
	.rhinory-visit .exp-row { padding: 28px 0; }
	.rhinory-visit .exp-row.is-featured { padding: 28px 16px; margin: 0 -16px; }
	.rhinory-visit .exp-row h3 { font-size: 26px; }
	.rhinory-visit .exp-meta { grid-template-columns: 1fr; gap: 10px 0; }
	.rhinory-visit .exp-cta-block { flex-direction: column; align-items: flex-start; gap: 14px; }
	.rhinory-visit .exp-cta-block .price { font-size: 34px; }
	.rhinory-visit .exp-cta-block .reserve { width: 100%; justify-content: center; padding: 14px 18px; }
	.rhinory-visit .exp-pullquote__quote { font-size: 19px; }
}


/* -------------------------------------------------------------------
   VISIT — #tastings (ivory section).
   Override the chapter-head colors for paper sections so the headline
   reads dark instead of ivory; everything else inherits the global
   .section.paper rules.
   ------------------------------------------------------------------- */
.rhinory-visit .section.paper .section-head {
	border-bottom-color: var(--rule-dk);
}
.rhinory-visit .section.paper .section-head h2 {
	color: var(--wp--preset--color--reserve);
}
.rhinory-visit .section.paper .section-head h2 em {
	color: var(--acacia);
}
.rhinory-visit .section.paper .section-head .lede {
	color: var(--wp--preset--color--reserve-2, #161210);
	opacity: 0.84;
}

/* Tasting CTA card — drawer trigger above the flight grid. White card,
   clay 4px left rule, two-column row at desktop. */
.rhinory-visit .tasting-cta-card {
	background: #fff;
	border: 1px solid var(--rule-dk);
	padding: 48px 56px;
	margin: 0 0 48px 0;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center;
	position: relative;
}
.rhinory-visit .tasting-cta-card > * { margin-block-start: 0 !important; }
.rhinory-visit .tasting-cta-card::before {
	content: ""; position: absolute;
	left: -1px; top: -1px; bottom: -1px;
	width: 4px;
	background: var(--acacia);
}
.rhinory-visit .tasting-cta-card .tcc-left > * { margin-block-start: 0 !important; }
.rhinory-visit .tasting-cta-card .tcc-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin-bottom: 14px;
}
.rhinory-visit .tasting-cta-card .tcc-title {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: 38px; line-height: 1.1;
	color: var(--wp--preset--color--reserve);
	margin: 0 0 14px 0;
	max-width: 580px;
}
.rhinory-visit .tasting-cta-card .tcc-title em {
	font-style: italic;
	color: var(--acacia);
}
.rhinory-visit .tasting-cta-card .tcc-sub {
	font-size: 15.5px; line-height: 1.55;
	color: var(--wp--preset--color--reserve-2, #161210);
	margin: 0 0 22px 0;
	max-width: 560px;
}
.rhinory-visit .tasting-cta-card .tcc-meta {
	display: flex; flex-wrap: wrap;
	gap: 24px;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
}
.rhinory-visit .tasting-cta-card .tcc-meta span {
	display: inline-flex; align-items: center; gap: 8px;
}
.rhinory-visit .tasting-cta-card .tcc-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--acacia);
	display: inline-block;
}
.rhinory-visit .tasting-cta-card .tcc-right {
	display: flex; flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}
.rhinory-visit .tasting-cta-card .tcc-btn {
	background: var(--wp--preset--color--reserve);
	color: #fff;
	border: 0;
	padding: 20px 36px;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 12px; letter-spacing: 0.22em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex; align-items: center;
	gap: 14px;
	transition: background 0.2s;
	font-weight: 500;
}
.rhinory-visit .tasting-cta-card .tcc-btn:hover {
	background: var(--acacia);
}
.rhinory-visit .tasting-cta-card .tcc-btn .tcc-arrow {
	display: inline-flex;
	width: 14px; height: 14px;
}
.rhinory-visit .tasting-cta-card .tcc-call {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}
.rhinory-visit .tasting-cta-card .tcc-call:hover {
	color: var(--acacia);
	border-color: var(--acacia);
}

/* Tasting flight grid — 4-up cells with hover lift + acacia underline. */
.rhinory-visit .tasting-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--rule-dk);
}
.rhinory-visit .tasting-grid.wp-block-group { margin: 0; padding: 0; }
.rhinory-visit .tasting-grid > * { margin-block-start: 0 !important; }

.rhinory-visit .tasting-cell {
	padding: 42px 32px 36px 32px;
	border-right: 1px solid var(--rule-dk);
	display: flex; flex-direction: column;
	gap: 16px;
	background: var(--wp--preset--color--paper);
	transition: background 0.35s cubic-bezier(0.2,0.7,0.2,1), transform 0.5s cubic-bezier(0.2,0.7,0.2,1);
	position: relative;
}
.rhinory-visit .tasting-cell > * { margin-block-start: 0 !important; }
/* Bottom-anchor the foot group (perfect-for · price · cta) so the
   four cells visually align across columns even when description copy
   varies in line count. The universal reset above zeros out all
   children's margin-block-start; restore auto on the first foot-group
   child so the flex layout pushes everything below it to the bottom.
   Brief 2026-05-07-flights-quantities-picker (post-shipment hotfix). */
.rhinory-visit .tasting-cell > .t-perfect { margin-block-start: auto !important; }
.rhinory-visit .tasting-cell::after {
	content: ""; position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 0;
	background: var(--wp--preset--color--acacia);
	transition: height 0.35s cubic-bezier(0.2,0.7,0.2,1);
}
.rhinory-visit .tasting-cell:hover {
	background: var(--wp--preset--color--ivory);
	transform: translateY(-4px);
}
.rhinory-visit .tasting-cell:hover::after { height: 3px; }
.rhinory-visit .tasting-cell:hover .t-cta {
	color: var(--acacia);
	border-color: var(--acacia);
}
.rhinory-visit .tasting-cell:last-child { border-right: 0; }
.rhinory-visit .tasting-cell.is-flagship {
	background: var(--wp--preset--color--ivory);
}
.rhinory-visit .tasting-cell .t-num {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--acacia);
}
.rhinory-visit .tasting-cell h4 {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: 32px; line-height: 1.05;
	margin: 0;
	color: var(--wp--preset--color--reserve);
}
.rhinory-visit .tasting-cell h4 em {
	font-style: italic; font-weight: 300;
	color: var(--acacia);
}
.rhinory-visit .tasting-cell p {
	font-size: 14.5px; line-height: 1.62;
	color: var(--wp--preset--color--reserve-2, #161210);
	opacity: 0.88;
	margin: 0;
}
.rhinory-visit .tasting-cell .t-perfect {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--acacia);
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--rule-dk);
}
.rhinory-visit .tasting-cell .t-price {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 38px;
	color: var(--wp--preset--color--reserve);
	line-height: 1;
	border-top: 1px solid var(--rule-dk);
	padding-top: 18px;
	margin-top: 6px;
}
.rhinory-visit .tasting-cell .t-price small {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-top: 6px;
}
.rhinory-visit .tasting-cell .t-cta {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--wp--preset--color--reserve);
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--rule-dk);
	padding-bottom: 6px;
	align-self: flex-start;
	transition: color 0.2s, border-color 0.2s;
}
.rhinory-visit .tasting-cell .t-cta:hover {
	color: var(--acacia);
	border-color: var(--acacia);
}

/* Tasting tip — membership perk callout below the grid. Subtle bordered
   row, mono uppercase label, body, primary brand button (ghost on paper). */
.rhinory-visit .tasting-tip {
	margin-top: 36px;
	padding: 28px 32px;
	border: 1px solid var(--rule-dk);
	background: rgba(15,26,20,0.03);
	display: grid;
	grid-template-columns: 160px 1fr auto;
	gap: 28px;
	align-items: center;
}
.rhinory-visit .tasting-tip > * { margin-block-start: 0 !important; }
.rhinory-visit .tasting-tip .tt-label {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--acacia);
}
.rhinory-visit .tasting-tip p {
	font-size: 14.5px; line-height: 1.6;
	color: var(--wp--preset--color--reserve-2, #161210);
	opacity: 0.9;
	margin: 0;
}
.rhinory-visit .tasting-tip p strong {
	color: var(--wp--preset--color--reserve);
}
.rhinory-visit .tasting-tip .btn {
	white-space: nowrap;
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--ivory);
}
.rhinory-visit .tasting-tip .btn:hover {
	background: var(--acacia);
}

/* Tablet — grid down to 2 cols, CTA card stacks. */
@media (max-width: 980px) {
	.rhinory-visit .tasting-grid { grid-template-columns: repeat(2, 1fr); }
	.rhinory-visit .tasting-cell:nth-child(odd)  { border-right: 1px solid var(--rule-dk); }
	.rhinory-visit .tasting-cell:nth-child(even) { border-right: 0; }
	.rhinory-visit .tasting-cell:not(:nth-last-child(-n+2)) {
		border-bottom: 1px solid var(--rule-dk);
	}
	.rhinory-visit .tasting-cell { padding: 32px 24px 28px 24px; }
	.rhinory-visit .tasting-cell h4 { font-size: 26px; }
	.rhinory-visit .tasting-cell .t-price { font-size: 32px; }
	.rhinory-visit .tasting-tip { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; }
}

@media (max-width: 780px) {
	.rhinory-visit .tasting-cta-card { grid-template-columns: 1fr; padding: 34px 28px; gap: 28px; }
	.rhinory-visit .tasting-cta-card .tcc-right { align-items: flex-start; }
	.rhinory-visit .tasting-cta-card .tcc-title { font-size: 30px; }
	.rhinory-visit .tasting-cta-card .tcc-btn { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
	.rhinory-visit .tasting-grid { grid-template-columns: 1fr; }
	.rhinory-visit .tasting-cell { border-right: 0 !important; border-bottom: 1px solid var(--rule-dk); }
	.rhinory-visit .tasting-cell:last-child { border-bottom: 0; }
}


/* -------------------------------------------------------------------
   VISIT — #chocolate (Conservation Chocolate add-on).
   2-column image+spec card on the .section.charcoal background.
   ------------------------------------------------------------------- */
.rhinory-visit .chocolate-promo {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 60px;
	align-items: stretch;
}
.rhinory-visit .chocolate-promo > * { margin-block-start: 0 !important; }

.rhinory-visit .chocolate-promo__img {
	position: relative;
	min-height: 420px;
	border: 1px solid var(--rule);
	overflow: hidden;
	background: var(--wp--preset--color--reserve-2, #161210);
}
.rhinory-visit .chocolate-promo__img picture,
.rhinory-visit .chocolate-promo__img img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--chocolate-promo-pos, center);
}

.rhinory-visit .chocolate-promo__body {
	padding: 8px 0;
	display: flex; flex-direction: column;
}
.rhinory-visit .chocolate-promo__body > * { margin-block-start: 0 !important; }

.rhinory-visit .chocolate-promo__specs {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 24px 0;
	align-items: start;
}
.rhinory-visit .chocolate-promo__specs > * { margin-block-start: 0 !important; }
/* Pad the value column so the borders meet edge-to-edge (column gap is 0)
   while the visual spacing between label and value is preserved. */
.rhinory-visit .chocolate-promo__specs .cp-value { padding-left: 36px; }

/* Top rule sits on the FIRST row only; subsequent rows draw a soft
   1px hairline above their content via padding-top + border-top. */
.rhinory-visit .chocolate-promo__specs .cp-label.is-first,
.rhinory-visit .chocolate-promo__specs .cp-value.is-first {
	border-top: 1px solid var(--rule);
	padding-top: 24px;
}
.rhinory-visit .chocolate-promo__specs .cp-label:not(.is-first),
.rhinory-visit .chocolate-promo__specs .cp-value:not(.is-first) {
	border-top: 1px solid var(--rule-soft);
	padding-top: 18px;
}

.rhinory-visit .chocolate-promo__specs .cp-label {
	font-size: 11px; letter-spacing: 0.18em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
	padding-top: 24px;
}

.rhinory-visit .chocolate-promo__specs .cp-value {
	font-size: 15px; line-height: 1.4;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .chocolate-promo__specs .cp-value__main {
	display: inline;
}
/* PRICE row variant — the value is Cormorant gold and the inline sub
   reverts to Inter Tight gray. Triggered by the .is-first row. */
.rhinory-visit .chocolate-promo__specs .cp-value.is-first .cp-value__main {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 28px;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .chocolate-promo__specs .cp-value.is-first .cp-value__sub {
	font-size: 14px;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-left: 8px;
}
/* Caption rows — small text below the value. */
.rhinory-visit .chocolate-promo__specs .cp-value small {
	display: block;
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
}

/* Override the layout-flow margin reset — these CTAs need the 32px
   breathing room above the spec list. */
.rhinory-visit .chocolate-promo__body > .chocolate-promo__ctas {
	margin-top: 32px !important;
}
.rhinory-visit .chocolate-promo__ctas {
	display: flex; gap: 14px; flex-wrap: wrap;
}
.rhinory-visit .chocolate-promo__ctas > * { margin-block-start: 0 !important; }

/* Tablet — image stacks above body, full width. */
@media (max-width: 980px) {
	.rhinory-visit .chocolate-promo {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.rhinory-visit .chocolate-promo__img { min-height: 320px; }
}
@media (max-width: 720px) {
	.rhinory-visit .chocolate-promo__specs { gap: 16px 22px; }
	.rhinory-visit .chocolate-promo__specs .cp-value.is-first .cp-value__main { font-size: 24px; }
	.rhinory-visit .chocolate-promo__ctas .btn { width: 100%; justify-content: center; }
}


/* -------------------------------------------------------------------
   VISIT — #hours (weekly hours + typical-week schedule).
   2-column grid on .section.green. Left = mono eyebrow + 7-row
   weekly table + foot caption. Right = dark schedule card with title,
   sub, and a list of time slots.
   ------------------------------------------------------------------- */
.rhinory-visit .hours-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 60px;
	align-items: start;
}
.rhinory-visit .hours-grid.wp-block-group { margin: 0; padding: 0; }
.rhinory-visit .hours-grid > * { margin-block-start: 0 !important; }

/* LEFT — hours table */
.rhinory-visit .visit-hours-table-wrap > * { margin-block-start: 0 !important; }
.rhinory-visit .visit-hours-eyebrow {
	font-size: 10px; letter-spacing: 0.22em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.rhinory-visit .hours-table {
	border-top: 1px solid var(--rule);
}
.rhinory-visit .hours-row {
	display: grid;
	/* Day | hours | meta. Pin the hours column to a fixed width so
	   every row's "11:00 AM – 5:30 PM" lines up in a clean vertical
	   stripe, and let the meta column wrap when long instead of
	   squeezing the hours. minmax(0, 1fr) prevents the trailing
	   column from blowing out the grid track on very long meta. */
	grid-template-columns: 120px 175px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 15px;
}
.rhinory-visit .hours-row > * { margin-block-start: 0 !important; }
.rhinory-visit .hours-row .day {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
}
.rhinory-visit .hours-row .meta {
	font-size: 12px;
	color: var(--wp--preset--color--rhino, #8A7E70);
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: right;
	line-height: 1.5;
}
.rhinory-visit .hours-row.is-today {
	background: rgba(212,162,76,0.06);
	margin: 0 -16px;
	padding-left: 16px;
	padding-right: 16px;
	border-color: var(--wp--preset--color--acacia);
}
.rhinory-visit .hours-row.is-today .day {
	color: var(--wp--preset--color--acacia);
}
.rhinory-visit .visit-hours-foot {
	font-size: 10px; letter-spacing: 0.16em;
	color: var(--wp--preset--color--rhino, #8A7E70);
	text-transform: uppercase;
	margin-top: 20px;
	line-height: 1.7;
}

/* RIGHT — schedule card */
.rhinory-visit .schedule-card {
	background: var(--wp--preset--color--reserve-2, #161210);
	border: 1px solid var(--rule);
	padding: 34px 32px;
}
.rhinory-visit .schedule-card > * { margin-block-start: 0 !important; }
.rhinory-visit .schedule-card h3 {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: 30px;
	margin: 0 0 8px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .schedule-card h3 em {
	font-style: italic;
	color: var(--wp--preset--color--acacia);
}
.rhinory-visit .schedule-card p.lede-sm {
	font-size: 14px;
	line-height: 1.6;
	opacity: 0.78;
	margin: 0 0 24px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .schedule-list {
	display: flex; flex-direction: column;
	gap: 0;
}
.rhinory-visit .schedule-list > * { margin-block-start: 0 !important; }

.rhinory-visit .schedule-item {
	display: grid;
	grid-template-columns: 90px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 16px 0;
	border-top: 1px solid var(--rule-soft);
}
.rhinory-visit .schedule-item > * { margin-block-start: 0 !important; }
.rhinory-visit .schedule-item:first-child { border-top: 0; }
.rhinory-visit .schedule-item .si-time {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.16em;
	color: var(--wp--preset--color--acacia);
}
.rhinory-visit .schedule-item .si-name {
	font-size: 15px; line-height: 1.3;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .schedule-item .si-name small {
	display: block;
	color: var(--wp--preset--color--rhino, #8A7E70);
	font-size: 11px;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 2px;
}
.rhinory-visit .schedule-item .si-tag {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
	padding: 4px 8px;
	border: 1px solid var(--rule);
}
.rhinory-visit .schedule-item .si-tag.is-rhino {
	color: var(--wp--preset--color--acacia);
	border-color: var(--wp--preset--color--acacia);
}

/* Tablet — stack columns. */
@media (max-width: 980px) {
	.rhinory-visit .hours-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 720px) {
	.rhinory-visit .hours-row {
		grid-template-columns: 90px 1fr;
		gap: 14px 18px;
		padding: 14px 0;
	}
	.rhinory-visit .hours-row .meta {
		grid-column: 1 / -1;
		padding-left: 0;
		font-size: 11px;
		text-align: left;
	}
	.rhinory-visit .schedule-card { padding: 26px 22px; }
	.rhinory-visit .schedule-item {
		grid-template-columns: 80px 1fr;
		gap: 8px 14px;
	}
	.rhinory-visit .schedule-item .si-tag {
		grid-column: 1 / -1;
		justify-self: start;
		margin-top: 4px;
	}
}


/* -------------------------------------------------------------------
   VISIT — #directions (address + drive times + schematic map).
   2-column grid on .section.charcoal.
   ------------------------------------------------------------------- */
.rhinory-visit .dir-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}
.rhinory-visit .dir-grid > * { margin-block-start: 0 !important; }

.rhinory-visit .dir-block > * { margin-block-start: 0 !important; }
.rhinory-visit .dir-block h4 {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin: 0 0 14px 0;
}
.rhinory-visit .dir-block .dir-line {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 24px;
	line-height: 1.2;
	margin: 0 0 6px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .dir-block .dir-coords {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.14em;
	color: var(--wp--preset--color--rhino, #8A7E70);
	text-transform: uppercase;
}
.rhinory-visit .dir-block .dir-contact {
	margin: 0;
	padding-top: 24px;
	font-size: 14px;
	color: var(--wp--preset--color--ivory, #F0E8DC);
	opacity: 0.85;
}
.rhinory-visit .dir-block .dir-cta-row {
	display: flex; gap: 14px; flex-wrap: wrap;
	padding-top: 14px;
}
.rhinory-visit .dir-block .dir-cta-row > * { margin-block-start: 0 !important; }

.rhinory-visit .dir-block .dir-drives-label {
	padding-top: 40px;
	margin: 0;
}

.rhinory-visit .dir-modes {
	display: flex; flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--rule);
	margin-top: 22px;
}
.rhinory-visit .dir-modes > * { margin-block-start: 0 !important; }

.rhinory-visit .dir-mode {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 16px 0;
	border-bottom: 1px solid var(--rule);
}
.rhinory-visit .dir-mode > * { margin-block-start: 0 !important; }

.rhinory-visit .dir-mode .dm-time {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 24px;
	color: var(--wp--preset--color--acacia);
	line-height: 1;
}
.rhinory-visit .dir-mode .dm-time small {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 9px;
	color: var(--wp--preset--color--rhino, #8A7E70);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: 4px;
}
.rhinory-visit .dir-mode .dm-name {
	font-size: 14px;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .dir-mode .dm-name small {
	display: block;
	font-size: 11px;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-top: 2px;
}
.rhinory-visit .dir-mode .dm-arrow {
	width: 18px; height: 1px;
	background: var(--wp--preset--color--acacia);
	position: relative;
	opacity: 0.7;
}
.rhinory-visit .dir-mode .dm-arrow::after {
	content: ""; position: absolute;
	right: 0; top: -3px;
	border-left: 6px solid var(--wp--preset--color--acacia);
	border-top: 3px solid transparent;
	border-bottom: 3px solid transparent;
}

/* RIGHT — schematic map */
.rhinory-visit .dir-map-col > * { margin-block-start: 0 !important; }
.rhinory-visit .map-card {
	background: var(--wp--preset--color--reserve-2, #161210);
	border: 1px solid var(--rule);
	padding: 0;
	aspect-ratio: 4/3;
	position: relative;
	overflow: hidden;
}
.rhinory-visit .map-card svg {
	width: 100%; height: 100%;
	display: block;
}
.rhinory-visit .dir-map-foot {
	font-size: 10px; letter-spacing: 0.18em;
	color: var(--wp--preset--color--rhino, #8A7E70);
	text-transform: uppercase;
	margin-top: 16px;
	line-height: 1.7;
}

/* Tablet — stack */
@media (max-width: 980px) {
	.rhinory-visit .dir-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 720px) {
	.rhinory-visit .dir-mode {
		grid-template-columns: 54px 1fr auto;
		gap: 14px;
		padding: 14px 0;
	}
	.rhinory-visit .dir-mode .dm-time { font-size: 20px; }
}


/* -------------------------------------------------------------------
   VISIT — #groups (3-up tier grid + concierge CTA row).
   Ink section. Hairline outer border + inner column rules between the
   three tier cells. Middle cell can opt into the acacia-tint highlight.
   ------------------------------------------------------------------- */
.rhinory-visit .group-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border: 1px solid var(--rule);
}
.rhinory-visit .group-tiers.wp-block-group { margin: 0; padding: 0; }
.rhinory-visit .group-tiers > * { margin-block-start: 0 !important; }

.rhinory-visit .group-tier {
	padding: 32px 28px;
	border-right: 1px solid var(--rule);
}
.rhinory-visit .group-tier > * { margin-block-start: 0 !important; }
.rhinory-visit .group-tier:last-child { border-right: 0; }
.rhinory-visit .group-tier.is-highlight {
	background: rgba(212,162,76,0.04);
}

.rhinory-visit .group-tier .group-tier__label {
	font-size: 10px; letter-spacing: 0.22em;
	color: var(--wp--preset--color--acacia);
	text-transform: uppercase;
}
.rhinory-visit .group-tier h3 {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: 30px; line-height: 1.1;
	margin: 14px 0 14px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .group-tier .group-tier__subtitle {
	font-style: italic;
	color: var(--wp--preset--color--ivory, #F0E8DC);
	opacity: 0.85;
}
.rhinory-visit .group-tier p {
	font-size: 14.5px; line-height: 1.6;
	opacity: 0.84;
	margin: 0 0 18px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .group-tier .group-tier__meta {
	font-size: 10px; letter-spacing: 0.18em;
	color: var(--wp--preset--color--rhino, #8A7E70);
	text-transform: uppercase;
	line-height: 1.7;
	margin: 0;
}

/* CTA row below the tiers — right-aligned on desktop, wraps on small. */
.rhinory-visit .groups-cta-row {
	margin-top: 32px;
}
.rhinory-visit .groups-cta-row.wp-block-group {
	gap: 14px;
}
.rhinory-visit .groups-cta-row > * { margin-block-start: 0 !important; }

/* Tablet — stack the 3-up grid down to 1 col, redo borders. */
@media (max-width: 980px) {
	.rhinory-visit .group-tiers { grid-template-columns: 1fr; }
	.rhinory-visit .group-tier {
		border-right: 0;
		border-bottom: 1px solid var(--rule);
	}
	.rhinory-visit .group-tier:last-child { border-bottom: 0; }
}

@media (max-width: 720px) {
	.rhinory-visit .group-tier { padding: 28px 24px; }
	.rhinory-visit .group-tier h3 { font-size: 26px; }
	.rhinory-visit .groups-cta-row.wp-block-group { justify-content: flex-start; }
}


/* -------------------------------------------------------------------
   VISIT — #policies (5-up policy grid + 2-col footer).
   Paper section. 5 columns at desktop, 2 cols on tablet, 1 col on
   small phones. Each cell has mono num + h5 + body.
   ------------------------------------------------------------------- */
.rhinory-visit .policy-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	border-top: 1px solid var(--rule-dk);
	border-bottom: 1px solid var(--rule-dk);
}
.rhinory-visit .policy-grid.wp-block-group { margin: 0; padding: 0; }
.rhinory-visit .policy-grid > * { margin-block-start: 0 !important; }

.rhinory-visit .policy-cell {
	padding: 30px 28px;
	border-right: 1px solid var(--rule-dk);
	display: flex; flex-direction: column;
	gap: 10px;
	position: relative;
	transition: background 0.35s cubic-bezier(0.2,0.7,0.2,1);
}
.rhinory-visit .policy-cell > * { margin-block-start: 0 !important; }
.rhinory-visit .policy-cell:last-child { border-right: 0; }
.rhinory-visit .policy-cell::before {
	content: ""; position: absolute;
	left: 0; top: 0;
	width: 0; height: 2px;
	background: var(--acacia);
	transition: width 0.55s cubic-bezier(0.2,0.7,0.2,1);
}
.rhinory-visit .policy-cell:hover::before { width: 100%; }

.rhinory-visit .policy-cell .p-num {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
}
.rhinory-visit .policy-cell h5 {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: 22px; line-height: 1.15;
	margin: 0;
	color: var(--wp--preset--color--reserve);
}
.rhinory-visit .policy-cell p {
	font-size: 13.5px; line-height: 1.6;
	opacity: 0.82;
	margin: 0;
	color: var(--wp--preset--color--reserve-2, #161210);
}

/* 2-column policy footer */
.rhinory-visit .visit-policy-foot {
	margin-top: 36px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--wp--preset--color--reserve-2, #161210);
}
.rhinory-visit .visit-policy-foot > * { margin-block-start: 0 !important; }
.rhinory-visit .visit-policy-foot > div > * { margin-block-start: 0 !important; }
.rhinory-visit .visit-policy-foot__label {
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 11px; letter-spacing: 0.22em;
	color: var(--acacia);
	text-transform: uppercase;
	margin: 0 0 12px 0;
}
.rhinory-visit .visit-policy-foot p {
	margin: 0;
}

/* Tablet — 5 → 2 cols, redo borders. */
@media (max-width: 980px) {
	.rhinory-visit .policy-grid { grid-template-columns: repeat(2, 1fr); }
	.rhinory-visit .policy-cell {
		border-right: 1px solid var(--rule-dk);
		border-bottom: 1px solid var(--rule-dk);
	}
	.rhinory-visit .policy-cell:nth-child(2n)              { border-right: 0; }
	.rhinory-visit .policy-cell:nth-last-child(-n+2)       { border-bottom: 0; }
	.rhinory-visit .policy-cell:nth-last-child(2):nth-child(odd) {
		border-bottom: 1px solid var(--rule-dk);
	}
	.rhinory-visit .policy-cell:last-child:nth-child(odd)  { border-bottom: 0; }
	.rhinory-visit .visit-policy-foot { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 560px) {
	.rhinory-visit .policy-grid { grid-template-columns: 1fr; }
	.rhinory-visit .policy-cell {
		border-right: 0;
		border-bottom: 1px solid var(--rule-dk);
	}
	.rhinory-visit .policy-cell:last-child { border-bottom: 0; }
}


/* -------------------------------------------------------------------
   VISIT — #faq (charcoal). Reuses the existing .faqs / .faq markup
   from rhinory/faq-list + rhinory/faq-item. The shared FAQ rules
   target reserve/clay (paper-section colors); these overrides flip
   the palette for the dark Visit section.
   ------------------------------------------------------------------- */
.rhinory-visit .faqs {
	border-top: 1px solid var(--rule);
}
.rhinory-visit .faq {
	border-bottom: 1px solid var(--rule);
	transition: background 0.3s;
}
.rhinory-visit .faq[open] {
	background: rgba(212,162,76,0.03);
}
.rhinory-visit .faq summary { transition: color 0.2s; }
.rhinory-visit .faq summary:hover { color: var(--wp--preset--color--acacia); }
.rhinory-visit .faq .q-num   { color: var(--wp--preset--color--acacia); }
.rhinory-visit .faq .q-text  { color: var(--wp--preset--color--ivory, #F0E8DC); }
.rhinory-visit .faq[open] summary .q-text { color: var(--wp--preset--color--acacia); }

.rhinory-visit .faq .q-toggle {
	border-color: var(--wp--preset--color--acacia);
}
.rhinory-visit .faq .q-toggle::before,
.rhinory-visit .faq .q-toggle::after {
	background: var(--wp--preset--color--acacia);
}
.rhinory-visit .faq[open] .q-toggle {
	background: var(--wp--preset--color--acacia);
	border-color: var(--wp--preset--color--acacia);
}
.rhinory-visit .faq[open] .q-toggle::before,
.rhinory-visit .faq[open] .q-toggle::after {
	background: var(--wp--preset--color--reserve);
}

.rhinory-visit .faq .q-answer {
	color: var(--wp--preset--color--ivory, #F0E8DC);
	opacity: 0.86;
}
.rhinory-visit .faq .q-answer a {
	color: var(--wp--preset--color--acacia);
}


/* -------------------------------------------------------------------
   VISIT — closing CTA strip (book + phone).
   Reserve-bg full-bleed section with a low-opacity cover photo, a
   2-col grid for body+CTAs (left) and phone (right).
   ------------------------------------------------------------------- */
.rhinory-visit .visit-cta-strip {
	background: var(--wp--preset--color--reserve);
	color: var(--wp--preset--color--ivory, #F0E8DC);
	padding: 90px 0;
	border-top: 1px solid var(--rule);
	position: relative;
	overflow: hidden;
}
.rhinory-visit .visit-cta-strip__bg {
	position: absolute; inset: -10% 0 -10% 0;
	filter: saturate(0.6);
	opacity: 0.18;
	will-change: transform;
	/* visit.js drives --cta-py from scroll position; defaults to 0. */
	transform: translate3d(0, var(--cta-py, 0px), 0);
	transition: transform 0.12s linear;
}
.rhinory-visit .visit-cta-strip__bg picture,
.rhinory-visit .visit-cta-strip__bg img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: var(--visit-cta-strip-pos, center 60%);
}

.rhinory-visit .visit-cta-strip-grid {
	position: relative; z-index: 2;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 60px;
	align-items: center;
}
.rhinory-visit .visit-cta-strip-grid > * { margin-block-start: 0 !important; }
.rhinory-visit .visit-cta-strip-grid > div > * { margin-block-start: 0 !important; }

.rhinory-visit .visit-cta-strip h2 {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: clamp(40px, 5vw, 68px);
	line-height: 1.02;
	letter-spacing: -0.012em;
	margin: 18px 0 18px 0;
	color: var(--wp--preset--color--ivory, #F0E8DC);
}
.rhinory-visit .visit-cta-strip h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--acacia);
}
.rhinory-visit .visit-cta-strip p {
	font-size: 17px; line-height: 1.6;
	opacity: 0.88;
	max-width: 52ch;
	margin: 0;
}
.rhinory-visit .visit-cta-strip__ctas {
	margin-top: 24px;
	display: flex; gap: 14px; flex-wrap: wrap;
}
.rhinory-visit .visit-cta-strip__ctas > * { margin-block-start: 0 !important; }

.rhinory-visit .visit-cta-strip .cta-actions {
	display: flex; flex-direction: column;
	gap: 14px;
	align-items: flex-end;
}
.rhinory-visit .visit-cta-strip .cta-actions > * { margin-block-start: 0 !important; }
.rhinory-visit .visit-cta-strip .phone {
	font-family: var(--wp--preset--font-family--display, "Cormorant Garamond", serif);
	font-size: 44px;
	color: var(--wp--preset--color--acacia);
	text-align: right;
	line-height: 1;
}
.rhinory-visit .visit-cta-strip .phone small {
	display: block;
	font-family: var(--wp--preset--font-family--mono, "Josefin Sans", monospace);
	font-size: 10px; letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rhino, #8A7E70);
	margin-top: 8px;
}

/* Tablet — stack columns */
@media (max-width: 980px) {
	.rhinory-visit .visit-cta-strip {
		padding: 64px 0;
	}
	.rhinory-visit .visit-cta-strip-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.rhinory-visit .visit-cta-strip .cta-actions {
		align-items: flex-start;
	}
	.rhinory-visit .visit-cta-strip .phone {
		text-align: left;
		font-size: 36px;
	}
}

@media (max-width: 720px) {
	.rhinory-visit .visit-cta-strip {
		padding: 54px 0;
	}
	.rhinory-visit .visit-cta-strip h2 {
		font-size: clamp(32px, 8vw, 48px);
	}
	.rhinory-visit .visit-cta-strip p { font-size: 15px; }
	.rhinory-visit .visit-cta-strip .phone { font-size: 30px; }
}

/* ===================================================================
   In-page drawer triggers — when reserve CTAs render as <button> with
   data-rhinory-reserve (instead of <a href>), we have to nuke the
   user-agent button intrinsics so the existing class CSS (.btn,
   .t-cta, .reserve, .book, .tcc-btn, .now-card, .exp-foot a) reads
   identically. Don't touch padding/bg/border — class rules own those.
   Brief 2026-05-07-flights-quantities-picker (post-shipment hotfix).
   =================================================================== */
button[data-rhinory-reserve] {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	line-height: inherit;
	cursor: pointer;
}

/* ===================================================================
   /reservation/ landing surface — minimal copy + fallback drawer
   trigger. The drawer auto-opens on body.page-reservation; this layer
   is only what guests see if JS is disabled, slow, or they close the
   drawer and want to reopen it. Brief 2026-05-07-flights-quantities-picker.
   =================================================================== */
.rhinory-reservation { min-height: calc(100vh - var(--rhinory-nav-h, 72px)); }
.rhinory-reservation__landing {
	max-width: 720px;
	margin: 0 auto;
	padding: 120px 24px 160px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}
.rhinory-reservation__landing .display {
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.05;
	margin: 0;
}
.rhinory-reservation__landing .lede {
	font-size: 16px;
	line-height: 1.6;
	max-width: 56ch;
	color: var(--wp--preset--color--ivory);
	opacity: 0.85;
	margin: 0;
}
.rhinory-reservation__fallback { margin: 12px 0 0; }
.rhinory-reservation__fallback .btn { white-space: nowrap; }

@media (max-width: 720px) {
	.rhinory-reservation__landing { padding: 80px 20px 120px; }
}


/* ===================================================================
   PRODUCT-CARD FOUNDATION — Treatment C/B + selector contract
   --------------------------------------------------------------------
   Phase-1 contract that surface templates (Shop catalog, Gifts page,
   homepage wine cards, etc.) consume. Foundation only:

     · global pcard image sizing (contain, top-cap clearance offset)
       so single bottles sit centred in their card frame regardless
       of surface; bundles get the centred treatment because their
       multi-bottle compositions don't need the offset.
     · `[data-product-type="…"]` selector contract — one selector per
       value the wordpress-for-wineries plugin emits via the wine /
       bundle / gift-card / experience CPTs (and per the gifts
       prototype's gift-set / donation / merch surfaces). Surface
       templates apply the attribute on the pcard wrapper; CSS
       branches off the attribute, no runtime JS gating.
     · `[data-bundle-size]` selector contract keyed off
       `[data-product-type="bundle"]` — bento span behavior is
       defined by the bundle-layout brief in surface CSS, foundation
       just registers the hook.
     · `.surface-*` utility classes — outermost-wrapper utility a
       template applies to scope which Treatment its descendants
       inherit (catalog defaults to Treatment C, fully-dark to
       Treatment B; detail / editorial inherit from the page).

   Plugin owns the wine CPT + the product-type registry
   (wordpress-for-wineries / includes/modules/commerce7/
   class-product-types.php). Theme reads the values the plugin emits
   and registers the CSS surface; the theme does NOT register CPTs,
   meta, or product-type values. See brief
   `docs/briefs/2026-05-09-theme-foundation.md`.
   =================================================================== */

/* --- Global pcard image rules --------------------------------------
   Contain + top-cap clearance offset (`center 55%`) is the singles
   convention from the product-shot pilot — bottle silhouettes anchor
   below the card's vertical centre so the cap doesn't kiss the top
   border. Bundles override to `center center` because multi-bottle
   compositions don't have a single dominant cap line.

   Selector specificity: `.wine-img:not([data-product-type="bundle"])`
   is (0,2,0), tying with `.wine-card:hover .wine-img` and beating the
   plain `.wine-img` declaration in Section 06. Source order means
   foundation wins the tie; existing placeholder / media variants in
   Section 06 (which use background-color or absolutely-positioned
   <img>) are unaffected because neither relies on background-image
   sizing. */
.pcard-img:not(.pcard-img--bundle),
.rel-card .rel-img,
.wine-img:not([data-product-type="bundle"]) {
	background-size: contain;
	background-position: center 55%;
	background-repeat: no-repeat;
}

.wine-img[data-product-type="bundle"] {
	background-position: center center;
}

/* Bundle / trio envelope class hooks — foundation registers the
   selectors so surface templates can apply them and downstream CSS
   has a stable target. Internal sizing (the contained product shot
   on `.pcard-img-inner`, the trio's hover scale) lives in the
   bundle-layout / gifts surface CSS, not here. */
.pcard-img--bundle,
.trio-img {
	background-repeat: no-repeat;
}

/* --- [data-product-type] selector contract -------------------------
   Six values — see brief Engineering notes for the divergence-from-
   plugin discussion. Each value gets a baseline that surface CSS
   layers on top of. Foundation rules are intentionally minimal —
   just enough to give each product type a consistent default
   bottle-stage treatment plus a hover lift. */

/* Single-bottle — portrait scan rhythm, Treatment C bottle stage. */
[data-product-type="single-bottle"] .pcard-img,
[data-product-type="single-bottle"] .wine-img {
	background-size: contain;
	background-position: center 55%;
	background-repeat: no-repeat;
}

/* Bundle — landscape stage, multi-bottle composition centred.
   Bento span behaviour is owned by the bundle-layout surface brief. */
[data-product-type="bundle"] .pcard-img,
[data-product-type="bundle"] .pcard-img-inner,
[data-product-type="bundle"] .wine-img {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Gift-set — singles+box compositions; centred like bundles so the
   ribbon / box detail isn't clipped. */
[data-product-type="gift-set"] .pcard-img,
[data-product-type="gift-set"] .single-img,
[data-product-type="gift-set"] .wine-img {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Gift-card — flat artwork, fits its frame and resists distortion. */
[data-product-type="gift-card"] .pcard-img,
[data-product-type="gift-card"] .wine-img {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Donation — placeholder/hero-style art, centred. */
[data-product-type="donation"] .pcard-img,
[data-product-type="donation"] .wine-img {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Merch — apparel / accessories; cover-cropped is the convention
   for product photography on solid backdrops. */
[data-product-type="merch"] .pcard-img,
[data-product-type="merch"] .wine-img {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Hover lift baseline — every pcard regardless of product type gets
   the same subtle translate. Surface CSS overrides border / shadow
   per surface treatment; the transform stays consistent. */
[data-product-type] {
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

[data-product-type]:hover {
	transform: translateY(-4px);
}

/* --- [data-bundle-size] selector contract --------------------------
   Foundation registers; surface CSS (bundle-layout brief) defines the
   actual bento span. Empty rule blocks make the selector explicit in
   the foundation cascade so a paired surface brief can find the hook
   when grepping. */
[data-product-type="bundle"][data-bundle-size="1"],
[data-product-type="bundle"][data-bundle-size="2"],
[data-product-type="bundle"][data-bundle-size="3"] {
	/* Bundle bento spans defined in surface CSS. */
}

/* --- Surface utility classes ---------------------------------------
   Outermost-wrapper utility a surface template applies. Scopes which
   Treatment its descendant pcard/wine/trio/rel images inherit by
   default. Surface-specific overrides still win because they live at
   higher specificity (pattern: `.surface-catalog .pcard.featured
   .pcard-img { … }`).

   `.surface-catalog`     — Shop / PLP / category pages; Treatment C
                            on bottle stages.
   `.surface-detail`      — PDP; surface inherits page palette, no
                            forced default (detail layouts vary per
                            product class).
   `.surface-editorial`   — long-read pages; Treatment C for any
                            embedded product card module.
   `.surface-fully-dark`  — pages where the section background is
                            fully ink (no warm-paper bands); pcards
                            here use Treatment B so they pop against
                            the dark surround. */

.surface-catalog .pcard-img:not(.pcard-img--bundle),
.surface-catalog .wine-img:not([data-product-type="bundle"]),
.surface-editorial .pcard-img:not(.pcard-img--bundle),
.surface-editorial .wine-img:not([data-product-type="bundle"]) {
	background-color: var(--treatment-c-from);
	background-image: var(--treatment-c-grad);
}

.surface-fully-dark .pcard,
.surface-fully-dark .wine-card,
.surface-fully-dark .rel-card {
	background: var(--treatment-b-bg);
	box-shadow: var(--treatment-b-shadow);
	color: var(--wp--preset--color--ink);
}

.surface-fully-dark .pcard-img:not(.pcard-img--bundle),
.surface-fully-dark .wine-img:not([data-product-type="bundle"]) {
	background-color: var(--treatment-b-bg);
}

/* `.surface-detail` is intentionally a no-op default — PDP layouts
   are bespoke per product class (wine vs experience vs gift-card)
   and pull their treatment from the per-page template, not from a
   surface-wide default. The class is registered here so surface
   templates can still tag their wrapper for grep-discoverability and
   for future opt-in defaults. */

/* --- Missing-image placeholder ------------------------------------
   When the C7 image sync hasn't run yet, has run but the download
   failed and retries exhausted, or the operator removed the
   attachment, surface templates render the pcard image area as
   `<div class="pcard-img pcard-img--missing">` with no <img>.

   The treatment background colour set by `.surface-*` (Treatment C
   ink gradient on catalog/editorial; Treatment B paper-warm on
   fully-dark) shows through. No broken-image icon, no "image
   unavailable" copy, no placeholder asset — absent featured image
   = no image, just the surface background.

   See brief: docs/briefs/2026-05-09-image-sync-from-commerce7.md
   (fallback behavior AC). */
.pcard-img--missing {
	background-image: none;
}


/* ===================================================================
   SHOP + GIFTS PREWORK — surface-agnostic block / pattern scaffolding
   --------------------------------------------------------------------
   Phase-2 prework slice. Five surfaces wired here:

     · `.shop-results-bar`        — rhinory/shop-results-bar block
     · `.membership-banner`       — shop-membership-banner pattern
     · `.gift-card-picker`        — rhinory/gift-card-picker block
     · `.trio-card`               — rhinory/trio-card block (wrapper rules;
                                    foundation already registered `.trio-img`)
     · `.trio-img--missing`       — fallback for trio cards with no
                                    resolvable image (mirrors the
                                    .pcard-img--missing pattern shipped
                                    in the image-sync brief)

   See brief: docs/briefs/2026-05-12-shop-gifts-prework.md.
   =================================================================== */

/* Shop results bar — V1 ships the static-count half. Phase 2 extends
   the markup to the "Showing 1–10 of 28 wines" range form; the CSS
   here intentionally only styles prefix / count / suffix and is
   spacing-agnostic so the eventual range form can drop in without a
   layout reshape. */
.shop-results-bar {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: "Josefin Sans", monospace;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory, #F1E8D6);
}
.shop-results-bar__count {
	color: var(--wp--preset--color--acacia);
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.01em;
	text-transform: none;
}

/* Membership banner pattern — warm-paper editorial card on a warm-ink
   section band. Two-zone layout (lede left, foot right) on desktop;
   stacks on tablet. No `data-product-type` — this is editorial promo
   surface, not a product card. Foundation tokens only. */
.membership-banner {
	background: var(--ink-warm);
	color: var(--wp--preset--color--ivory, #F1E8D6);
	padding: 80px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}
.membership-banner__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
	align-items: end;
}
.membership-banner__inner > .membership-banner__lede,
.membership-banner__inner > .membership-banner__foot {
	margin: 0;
}
.membership-banner__lede .eyebrow {
	color: var(--wp--preset--color--acacia);
}
.membership-banner__headline {
	font-family: "Cormorant Garamond", serif;
	font-weight: 400;
	font-size: clamp(36px, 4.4vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 14px 0 18px;
	color: var(--wp--preset--color--ivory, #F1E8D6);
}
.membership-banner__headline em {
	font-style: italic;
	font-weight: 300;
	color: var(--wp--preset--color--acacia);
}
.membership-banner__body {
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 56ch;
	opacity: 0.88;
}
.membership-banner__foot {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}
.membership-banner__alt {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--wp--preset--color--ivory, #F1E8D6);
	opacity: 0.76;
	max-width: 42ch;
	margin: 0;
}
.membership-banner__alt strong {
	color: var(--wp--preset--color--acacia);
	font-weight: 500;
}
@media (max-width: 880px) {
	.membership-banner__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Gift card picker — denomination pills. v1 ships as buttons (no form);
   .is-active reflects defaultAmount. Future JS layer wires the
   `data-rhinory-gift-amount` attribute to cart-add once the wfw-plugin
   integration brief lands. Default selection visibly distinguishes the
   active pill from the others. */
.gift-card-picker {
	display: block;
}
.gift-card-picker__amounts {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.gift-card-picker__pill {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid var(--rule);
	padding: 14px 22px;
	font-family: "Cormorant Garamond", serif;
	font-size: 20px;
	color: var(--wp--preset--color--ivory, #F1E8D6);
	cursor: pointer;
	transition: border-color .2s, color .2s, background .2s;
}
.gift-card-picker__pill:hover,
.gift-card-picker__pill:focus-visible {
	border-color: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--acacia);
}
.gift-card-picker__pill.is-active,
.gift-card-picker__pill[aria-pressed="true"] {
	border-color: var(--wp--preset--color--acacia);
	color: var(--wp--preset--color--acacia);
	background: rgba(212, 162, 76, 0.08);
}
.gift-card-picker__pill--custom {
	font-family: "Josefin Sans", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	border-color: var(--wp--preset--color--acacia);
}

/* Trio card — Conservation Trios composing card. Foundation registered
   `.trio-img` (background-repeat baseline) and the
   `[data-product-type="bundle"]` selector; this block adds the
   `.trio-card` wrapper rules + inner-image cover treatment so the
   rendered <img> fills the .trio-img frame with the same visual cadence
   as the prototype's background-image approach (with the picture-wrap
   chain preserved end-to-end — see Open Question 1 resolution in the
   brief Review notes).

   `.trio-img--missing` mirrors `.pcard-img--missing`: no <img>, no
   background-image, the surface treatment colour shows through. */
.trio-card {
	display: flex;
	flex-direction: column;
	background: var(--paper-warm);
	border: 1px solid var(--rule);
	box-shadow: 0 1px 0 rgba(26, 22, 18, 0.04);
	overflow: hidden;
	transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1);
}
.trio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -28px rgba(31, 22, 12, 0.32);
	z-index: 2;
}
.trio-img {
	aspect-ratio: 4 / 5;
	background-color: var(--ink-warm);
	position: relative;
	border-bottom: 1px solid var(--rule);
	overflow: hidden;
}
.trio-img__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.trio-card:hover .trio-img__img {
	transform: scale(1.025);
}
.trio-img--missing {
	background-image: none;
}
.trio-img .badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(15, 12, 10, 0.55);
	color: var(--wp--preset--color--acacia);
	font-family: "Josefin Sans", monospace;
	font-size: 9px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid rgba(212, 162, 76, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.trio-img .scarcity {
	position: absolute;
	top: 16px;
	right: 16px;
	background: transparent;
	color: var(--wp--preset--color--ivory, #F1E8D6);
	font-family: "Josefin Sans", monospace;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid rgba(241, 232, 214, 0.45);
}
.trio-meta {
	padding: 32px 30px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}
.trio-origin {
	font-family: "Josefin Sans", monospace;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--acacia);
}
.trio-card h3 {
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--ink-warm);
}
.trio-card h3 em {
	font-style: italic;
	font-weight: 400;
	color: var(--acacia);
}
.trio-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-warm-2);
}
.trio-bullets li {
	padding-left: 18px;
	position: relative;
}
.trio-bullets li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 1px;
	color: var(--wp--preset--color--acacia);
	font-size: 9px;
}
.trio-impact {
	background: var(--ivory-warm);
	border-left: 2px solid var(--wp--preset--color--acacia);
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ink-warm-2);
}
.trio-impact strong {
	color: var(--acacia);
	font-weight: 600;
}
.trio-shipfree {
	font-family: "Josefin Sans", monospace;
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin-top: -6px;
}
.trio-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--rule-dk);
}
.trio-price {
	font-family: "Cormorant Garamond", serif;
	font-size: 32px;
	font-weight: 500;
	color: var(--ink-warm);
	letter-spacing: -0.01em;
}
.trio-add {
	font-family: "Josefin Sans", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--acacia);
	font-weight: 500;
	text-decoration: none;
}
.trio-card:hover .trio-add {
	color: var(--wp--preset--color--acacia);
}
@media (prefers-reduced-motion: reduce) {
	.trio-card,
	.trio-img__img {
		transition: none;
	}
	.trio-card:hover {
		transform: none;
		box-shadow: 0 1px 0 rgba(26, 22, 18, 0.04);
	}
	.trio-card:hover .trio-img__img {
		transform: none;
	}
}


/* ===================================================================
   GENERIC PAGE TEMPLATE — Contact, Privacy, and any future WP Page
   that doesn't have a per-slug template. Reserve-cool register,
   editorial single-column body, ample chrome breathing room. The
   markup comes from `templates/page.html` which wraps post-title +
   post-content in two `.rhinory-page__hd` / `.rhinory-page__body`
   constrained groups.
   =================================================================== */

.rhinory-page {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ivory);
	min-height: 60vh;
	padding-bottom: 120px;
}

.rhinory-page__hd {
	max-width: var(--rhinory-max-w);
	margin: 0 auto;
	padding: 160px var(--rhinory-px) 32px;
}

.rhinory-page__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(56px, 8vw, 96px);
	line-height: 1.0;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	color: var(--wp--preset--color--ivory);
}

.rhinory-page__hd::after {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background: var(--wp--preset--color--acacia);
	margin-top: 12px;
}

.rhinory-page__body {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--rhinory-px);
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.7;
	color: rgba(241, 232, 214, 0.86);
}

.rhinory-page__body h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 36px);
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--ivory);
	margin: 56px 0 16px;
}

.rhinory-page__body h3 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acacia);
	margin: 40px 0 12px;
}

.rhinory-page__body p {
	margin: 0 0 18px;
}

.rhinory-page__body p.mono,
.rhinory-page__body .mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ivory);
}

.rhinory-page__body a {
	color: var(--wp--preset--color--acacia);
	text-decoration: none;
	border-bottom: 1px solid rgba(197, 145, 58, 0.32);
	transition: border-color 160ms ease, color 160ms ease;
}

.rhinory-page__body a:hover {
	color: var(--wp--preset--color--ivory);
	border-bottom-color: var(--wp--preset--color--ivory);
}

.rhinory-page__body ul,
.rhinory-page__body ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.rhinory-page__body li {
	margin: 0 0 6px;
}

.rhinory-page__body em {
	color: rgba(241, 232, 214, 0.7);
}

@media (max-width: 720px) {
	.rhinory-page__hd {
		padding: 120px var(--rhinory-px-mob) 24px;
	}
	.rhinory-page__body {
		padding: 0 var(--rhinory-px-mob);
		font-size: 16px;
	}
	.rhinory-page {
		padding-bottom: 80px;
	}
}

/* --- /shop/ light-register content region (Brief
   docs/briefs/2026-08-18-shop-photo-reel-hero.md) ---
   `.rhinory-page` above defaults every generic WP page to the dark
   register, but /shop/ is transactional content on the v13 paper
   register (rhinory/shop-hero-reel + winery/product-catalog +
   winery/gift-sets are each self-sufficient paper blocks). Block-flow
   margins between those top-level blocks let the dark `.rhinory-page`
   background show through as a strip. This used to paint `.entry-content`
   rather than `.rhinory-page--shop` itself, but the Shop template
   migration dropped `wp:post-content`, so `.entry-content` no longer
   exists in the markup and the rule became a no-op — painting the main
   wrapper directly instead. The sibling rule below already zeroes
   `.rhinory-page--shop`'s bottom padding, and the intentionally dark
   `.rhinory-foundation-close` closing band supplies its own fill, so
   painting the wrapper paper doesn't reintroduce a dark padding strip or
   paper sliver at the footer. #FBF7EE matches `.sa-hero`'s own paper
   token (shop-hero-reel.css) rather than the generic --paper preset, so
   the fill is imperceptible against the blocks it's filling between. */
.rhinory-page--shop {
	background: #FBF7EE;
}

/* The base `.rhinory-page` reserves 120px of bottom padding for the
   dark register. On /shop/ the last block is the full-bleed
   `.rhinory-foundation-close` band, whose custom fill (rgb(26,21,18)) is
   slightly darker than the `--ink` preset (rgb(28,25,22)) that paints
   that reserved padding — so the strip read as a lighter "bar" wedged
   between the close band and the black footer. The close band supplies
   its own 96px bottom padding, so zeroing the page padding here lets the
   dark band run flush into the footer chrome (the v13 close intent) with
   no seam. */
.rhinory-page--shop {
	padding-bottom: 0;
}

/* Same defect, same fix, for the v13 surface pages (Brief
   docs/briefs/2026-09-11-erik-review-polish.md AC 8). Each of these
   templates ends in its own full-bleed closing band that is meant to run
   flush into the footer, exactly as the prototypes do. The base
   `.rhinory-page` reserve then adds 120px (80px under 720px) of page fill
   below that band — paper on these five, since their per-surface token
   files repaint the wrapper — which reads as a cream strip wedged between
   the closer and the black footer. /shop/ and /club/ were carved out when
   each shipped; these five were missed, so the reserve is zeroed for the
   whole v13 family here rather than repeated in five per-surface files.
   Generic pages (contact, privacy, and anything else on `page.html`) keep
   the reserve, which is what it exists for.

   Class doubled to (0,2,0) for the same reason club.css doubles it: the
   per-surface stylesheets are separate enqueues whose order relative to
   this file is not guaranteed, and a single modifier class ties (0,1,0)
   with the base rule. The doubled form also outranks the <=720px media
   query, which re-declares the base at the same specificity. */
.rhinory-page--visit-hub.rhinory-page--visit-hub,
.rhinory-page--experiences.rhinory-page--experiences,
.rhinory-page--tastings.rhinory-page--tastings,
.rhinory-page--foundation.rhinory-page--foundation,
.rhinory-page--five-species.rhinory-page--five-species {
	padding-bottom: 0;
}

/* --- Shop catalog-slot promos ---
   MOVED 2026-08-29 to assets/css/shop-catalog-slot.css, per Brief
   docs/briefs/2026-08-29-shop-v13-fidelity-restore.md (Scope 1), which restores
   the v13 `.sa-promo` / `.sa-slot` treatments the flattened build had lost.
   The paint lives in its own file so ONE source serves the front end (attached
   to `winery/catalog-slot` via wp_enqueue_block_style) and the editor canvas
   (add_editor_style) — it previously had to be duplicated verbatim into
   assets/css/blocks-editor.css to reach the canvas. Do not re-add slot rules
   here. --- */

/* ============================================================
   v6 HOMEPAGE PORT — additive selectors per Brief
   docs/briefs/2026-05-25-port-01-homepage-v4-to-v6.md AC §B8.
   Sourced from prototypes/6/{01-homepage.html, styles.css,
   voice-polish.css}. Additive only — do NOT remove or replace v4
   selectors that other surfaces (/visit/, /conservation/, /reservation/)
   still consume; they port in subsequent briefs.
   ============================================================ */

/* --- v6 CD-N-α inline block (Brief N enrichment pass) ---
   Source: prototypes/6/01-homepage.html <style id="cd-n-alpha-styles">.
   Covers: chapter rail adaptive coloring (B); press-strip enrichment (C);
   pq-grid portrait (D); wine-card bottom-aligned impact-line (E);
   exp-price-stack (F); bk5-* Blake hero new DOM; frontlines-vis (G);
   ledger color bars + stacked + legend (H); v11-rr-card (J);
   fn-form SMS (L); fn-stat-strip (M); donate-modal (I);
   section-deep-link (N). */
/* ============================================================
   CD-N-α — Brief N enrichment pass on 01-homepage (2026-05-17)
   All new patterns live here so the canonical CSS files stay clean.
   ============================================================ */

/* --- Chapter rail adaptive coloring (Finding B) — REMOVED 2026-07-13 with
   the chapter HUD (fidelity-fix-3 design override). --- */

/* --- Press strip enrichment (Finding C) --- */
.r-press-quote-long { font-size:1.04em; line-height:1.42; }
.r-press-card.r-press-card-wide blockquote { font-size:21px; line-height:1.42; }

/* --- Pull quote keeper portrait (Finding D) --- */
.pullquote .wrap { position:relative; }
.pq-grid { display:grid; grid-template-columns: 1.25fr .9fr; gap:48px; align-items:center; }
.pq-portrait {
  position:relative; aspect-ratio: 4/5; min-height:340px;
  background-size:cover; background-position:center top; background-color:#1d1d1d;
  border-radius:2px;
}
.pq-portrait::after {
  content:''; position:absolute; left:14px; bottom:14px; right:14px;
  height:1px; background:rgba(212,162,76,.45);
}
.pq-portrait-cap {
  position:absolute; left:18px; bottom:22px; right:18px;
  font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ivory); opacity:.88;
}
@media (max-width: 880px){
  .pq-grid { grid-template-columns: 1fr; }
  .pq-portrait { min-height:260px; max-height:420px; aspect-ratio: 5/4; }
}

/* --- Wine cards bottom-aligned impact line (Finding E) --- */
.wine-meta { display:flex; flex-direction:column; }
.wine-meta .wine-foot { margin-top:auto; }
.wine-meta .impact-line { margin-top:14px; }
.wine-grid .wine-card { display:flex; flex-direction:column; }
/* Equalize card image heights so card 2 image isn't pushed down */
.wine-grid .wine-img { aspect-ratio: 4/5; min-height:280px; background-size:cover; background-position:center center; }
/* Wine story CTA legibility on paper bg */
.wine-story-row { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid var(--rule-dk); }
.wine-story-row .btn.btn-ghost { color:var(--ink); border-color:rgba(15,26,20,.35); }
.wine-story-row .btn.btn-ghost:hover { color:var(--acacia); border-color:var(--acacia); background:rgba(184,91,44,.05); }
/* Regions inline-mono paragraph at the wine-story-row foot. Prototype
   inlines `font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
   color:var(--acacia);margin:0` at prototypes/6/01-homepage.html:1214. The
   shipped `.mono` paragraph class only sets font-family, so the regions
   text defaulted to body 17px sentence-case ink. Restore the prototype
   inline values via a targeted rule. */
.wine-story-row > .mono,
.wine-story-row p.mono {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--acacia);
	margin: 0;
}

/* --- Experience price formatting (Finding F) ---
   walk-3 defect #2: prototype declares color:var(--ivory) for .amt, but
   the homepage .exp-card paints an ivory card background — same color =
   the price amount renders invisible. Erik's note: "this is actually
   a flaw in the design file, need to change font color." Theme overrides
   prototype. Use the card's body text color (reserve dark green) so the
   "From $150" amount sits in the same ink as the card body copy. */
.exp-price-stack { display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.exp-price-stack .amt { font-family:"Cormorant Garamond",serif; font-size:28px; font-weight:400; color:var(--wp--preset--color--reserve); }
.exp-price-stack .grat { font-family:"Josefin Sans",monospace; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acacia); opacity:.78; margin-top:3px; }

/* --- §05 Meet Blake — homepage cut (section-scale, ~1.3vh total)
       Second resize: §05 is the 5th section on a 14-section homepage,
       not a top-of-page hero. M1 sized down from page-hero (~88vh) to
       section-hero (~54vh), matching how the other 13 sections open.
       M4 restructured pattern B — typographic: portrait credit row +
       single prose column + one CTA. Full-bleed keepers band dropped
       (M1 already carries the image weight; bridge has the founders
       thumb; a third stacked image was over-budget). Welfare-first
       callout dropped (it duplicates §09 conservation band further
       down the page). Welfare chips folded into the lede as one
       short line. Second CTA (Read Blake's Journal) dropped — §05's
       conversion ask is Book a Rhino Encounter; the journal surface
       gets introduced elsewhere. Existing .btn primitives reused
       from styles.css.  ----- */
section.blake#blake { display:block; padding:0; background:var(--ink); }
section.blake#blake .wrap { max-width:1280px; margin:0 auto; padding:0 56px; }

/* ── 1 · The icon — full-bleed Blake hero ─────────────────────────────── */
.bk5-hero {
  position:relative; width:100%;
  min-height: 54vh; max-height:620px;
  overflow:hidden; background:#0a0807;
  display:flex; align-items:flex-end;
}
.bk5-hero-img {
  position:absolute; inset:0;
  background-image:url('/app/themes/rhinory-v4/assets/images/blake-hero-pastoral.jpg');
  background-image:-webkit-image-set(url('/app/themes/rhinory-v4/assets/images/blake-hero-pastoral.webp') type('image/webp'), url('/app/themes/rhinory-v4/assets/images/blake-hero-pastoral.jpg') type('image/jpeg'));
  background-image:image-set(url('/app/themes/rhinory-v4/assets/images/blake-hero-pastoral.webp') type('image/webp'), url('/app/themes/rhinory-v4/assets/images/blake-hero-pastoral.jpg') type('image/jpeg'));
  background-size:cover; background-position:center 38%;
  transform-origin:center center;
  animation: bk5-kenburns 28s ease-in-out infinite alternate;
}
@keyframes bk5-kenburns {
  0%   { transform:scale(1.00) translate3d(0,0,0); }
  100% { transform:scale(1.07) translate3d(-1.2%, -0.6%, 0); }
}
@media (prefers-reduced-motion: reduce) { .bk5-hero-img { animation:none; } }
/* Editorial vignette — bottom-darker so the headline sits cleanly on it. */
.bk5-hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,8,7,.55) 0%, rgba(10,8,7,0) 24%, rgba(10,8,7,0) 52%, rgba(10,8,7,.78) 100%),
    linear-gradient(90deg, rgba(10,8,7,.55) 0%, rgba(10,8,7,0) 38%);
}
.bk5-hero-inner {
  position:relative; z-index:2; width:100%;
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  align-items:end; gap:40px;
  padding: 0 56px 44px 56px;
  max-width:1480px; margin:0 auto;
}
/* Top-left chapter tag — small mono badge that floats independent of the
   bottom-aligned headline so the eye registers "§05 — Meet Blake" early. */
.bk5-hero-tag {
  position:absolute; top:40px; left:56px; z-index:3;
  display:flex; align-items:center; gap:14px;
  font-family:"Josefin Sans",monospace; font-size:10.5px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--acacia);
}
.bk5-hero-tag .dot {
  width:6px; height:6px; background:var(--acacia);
  border-radius:50%; box-shadow:0 0 0 3px rgba(212,162,76,.18);
}
.bk5-hero-headline {
  font-family:"Cormorant Garamond","Cormorant",Georgia,serif;
  font-weight:300; font-style:italic; line-height:.98;
  letter-spacing:-0.015em; color:var(--ivory);
  font-size: clamp(40px, 5.4vw, 78px);
  margin:0; text-wrap:pretty; max-width:18ch;
}
.bk5-hero-headline strong { font-weight:500; font-style:normal; color:var(--acacia); }
.bk5-hero-sub {
  margin-top:18px;
  font-family:"Josefin Sans",monospace; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--ivory); opacity:.76;
  display:inline-flex; align-items:center; gap:14px;
}
.bk5-hero-sub::before {
  content:''; width:36px; height:1px; background:var(--acacia); opacity:.7;
}

/* Specimen field card — Smithsonian-style mono caption, bottom-right.
   Reads like an exhibit label so Blake registers as a named individual,
   not just a "rhino photo". */
.bk5-specimen {
  align-self:end; min-width:228px; max-width:280px;
  padding:16px 18px 14px; border:1px solid rgba(212,162,76,.32);
  background:rgba(10,8,7,.55); backdrop-filter:blur(6px);
  font-family:"Josefin Sans",monospace; color:var(--ivory);
  position:relative;
}
.bk5-specimen::before {
  content:'SPECIMEN'; position:absolute; top:-7px; left:14px;
  background:var(--ink); padding:0 8px;
  font-size:9px; letter-spacing:.3em; color:var(--acacia);
}
.bk5-specimen-name {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic; font-weight:400; font-size:22px;
  color:var(--ivory); line-height:1; margin-bottom:2px;
}
.bk5-specimen-latin {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic; font-size:13px;
  color:var(--acacia); opacity:.85; margin-bottom:14px;
}
.bk5-specimen-rows { display:flex; flex-direction:column; gap:6px; font-size:10px; letter-spacing:.14em; }
.bk5-specimen-rows .row {
  display:flex; justify-content:space-between; gap:14px;
  color:var(--ivory); opacity:.84;
}
.bk5-specimen-rows .row span:first-child { opacity:.55; text-transform:uppercase; }

/* ── 2 · EDITORIAL SLAB · origin narrative + keeper credit + CTA
       Single composition below the hero. Does jobs 2, 3 and 4 in one read.
       LEFT column (1.55fr): full canonical founder origin paragraph,
         broken across a display lede (first two sentences) and a body
         prose grid (remaining three sentences) with an inline 2016
         founders.jpg date-anchor thumb.
       RIGHT column (1fr): "Around Blake" — three keeper credits in
         canonical order (Bobko · Rockey · Fields), one welfare line,
         one CTA (Book a Rhino Encounter). No second CTA.
       Replaces the prior bridge + keepers double-band: the origin was
       reading as a fragment, and a second header for keepers was eating
       height without earning it. ──────────────────────────────────────── */
.bk5-slab {
  padding: 76px 0 88px;
  /* No border-top: the v6 prototype declares a 1px rule between the hero
     and the origin/keepers slab, but in practice the rule reads as a
     stray hairline below the rhino picture and has been flagged three
     times across the 01-homepage lineage (cleanup #5 "obsolete .blake
     grid" attempt + design-fidelity sweep #7 odd-border investigation
     + walk-3 #8). The hero's bottom-gradient overlay already supplies
     the visual handoff between sections; the explicit border is the
     defect. Theme overrides prototype here per walk-3 defect #1. */
}
.bk5-slab-inner {
  position:relative;
  max-width:1280px; margin:0 auto; padding:0 56px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px; align-items:stretch;
}
/* Zero WordPress's is-layout-flow auto-margin between siblings on the grid
   children. Without this, .bk5-around inherits the 24px block-gap margin
   and renders its eyebrow + photo 24px below .bk5-origin's, breaking
   header-row alignment across the two-column slab. !important so the WP
   editor-canvas injected `:root :where(.is-layout-flow) > *` rule (same
   specificity, later in source order) doesn't win and reintroduce the
   24px offset in editor preview. */
.bk5-slab-inner > * { margin-block-start: 0 !important; }

/* — LEFT · Origin column ———————————————————————————————————————— */
.bk5-origin { display:flex; flex-direction:column; gap:22px; min-width:0; height:100%; }
.bk5-origin-eyebrow {
  font-family:"Josefin Sans",monospace; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--acacia);
  display:inline-flex; align-items:center; gap:12px;
}
.bk5-origin-eyebrow::before {
  content:''; width:22px; height:1px; background:var(--acacia);
}
.bk5-origin-lede {
  margin:0;
  font-family:"Cormorant Garamond","Cormorant",Georgia,serif;
  font-weight:300; font-style:italic; line-height:1.06;
  font-size: clamp(28px, 3vw, 40px);
  color:var(--ivory); text-wrap:pretty;
}
.bk5-origin-lede em { font-style:italic; color:var(--acacia); font-weight:400; }
.bk5-origin-archive {
  margin:0; margin-top:16px;
  padding-top:22px;
  border-top:1px solid rgba(212,162,76,.22);
  display:flex; flex-direction:column;
}
.bk5-origin-thumb {
  width:100%; aspect-ratio: 5/4; height:auto;
  position:relative;
  background-image:url('assets/images/founders.jpg');
  background-size:cover; background-position:center 32%;
  box-shadow: inset 0 0 0 1px rgba(212,162,76,.32);
}
.bk5-origin-thumb::before {
  content:'2016'; position:absolute; top:-7px; left:10px;
  background:var(--ink); padding:0 8px;
  font-family:"Josefin Sans",monospace; font-size:10px;
  letter-spacing:.3em; color:var(--acacia);
}
.bk5-origin-thumb-cap {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(212,162,76,.22);
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.bk5-origin-thumb-cap-names {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:19px; line-height:1.2;
  color:var(--ivory); opacity:.92;
}
.bk5-origin-thumb-cap-role {
  font-family:"Josefin Sans",monospace;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acacia); opacity:.82; line-height:1.5;
}
.bk5-origin-prose,
.bk5-around-prose {
  font-family:"Lora",system-ui,sans-serif;
  font-size:18px; line-height:1.72; color:var(--ivory); opacity:.92;
  text-wrap:pretty; max-width:64ch;
}
.bk5-origin-prose p,
.bk5-around-prose p { margin:0; }
.bk5-origin-prose strong,
.bk5-around-prose strong { font-weight:500; color:var(--ivory); opacity:1; }
.bk5-origin-prose em,
.bk5-around-prose em { font-style:italic; color:var(--acacia); opacity:.95; }

/* — RIGHT · Around-Blake sidebar (keepers + welfare + CTA) ——————— */
.bk5-around {
  display:flex; flex-direction:column; gap:22px;
  min-width:0; height:100%;
}
.bk5-around-eyebrow {
  font-family:"Josefin Sans",monospace; font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--acacia);
  display:inline-flex; align-items:center; gap:12px;
}
.bk5-around-eyebrow::before {
  content:''; width:22px; height:1px; background:var(--acacia);
}
.bk5-around-head {
  font-family:"Cormorant Garamond","Cormorant",Georgia,serif;
  font-weight:300; font-style:italic; line-height:1.06;
  font-size: clamp(28px, 3vw, 40px);
  color:var(--ivory); margin:0;
  text-wrap:pretty;
}
.bk5-around-head strong { color:var(--acacia); font-weight:500; font-style:normal; }
.bk5-around-meta {
  font-family:"Josefin Sans",monospace; font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory); opacity:.6; line-height:1.7;
}
.bk5-around-meta em { color:var(--acacia); opacity:.85; font-style:normal; }
.bk5-keepers-photo {
  margin:0;
  margin-top:16px;
  padding-top:22px;
  border-top:1px solid rgba(212,162,76,.22);
  display:flex; flex-direction:column; gap:0;
}
.bk5-keepers-photo-cap {
  margin:0;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(212,162,76,.22);
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.bk5-keepers-photo-img {
  width:100%; aspect-ratio: 5/4;
  background-image:url('assets/images/keepers-team.jpg');
  background-size:cover;
  background-position:center 28%;
  box-shadow: inset 0 0 0 1px rgba(212,162,76,.26);
}
.bk5-keepers-photo-names {
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic; font-weight:400;
  font-size:19px; line-height:1.2;
  color:var(--ivory); opacity:.92;
  text-wrap:pretty;
}
.bk5-keepers-photo-names em {
  color:var(--acacia); font-style:normal; padding:0 4px; opacity:.85;
}
.bk5-keepers-photo-role {
  font-family:"Josefin Sans",monospace;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--acacia); opacity:.82; line-height:1.5;
  display:inline-flex; flex-wrap:wrap; gap:0 10px;
}
.bk5-keepers-photo-role em {
  color:var(--acacia); font-style:normal; opacity:.9;
}
.bk5-keeper-role em { color:var(--acacia); font-style:normal; opacity:.9; }
.bk5-cta-wrap { margin-top:auto; padding-top:6px; }

/* ── Reveal animation — hook the page-level IntersectionObserver. ─────── */
section.blake#blake.reveal .bk5-hero-inner,
section.blake#blake.reveal .bk5-origin,
section.blake#blake.reveal .bk5-around {
  opacity:0; transform:translateY(20px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
section.blake#blake.reveal.visible .bk5-hero-inner { opacity:1; transform:none; transition-delay:0ms;   }
section.blake#blake.reveal.visible .bk5-origin     { opacity:1; transform:none; transition-delay:140ms; }
section.blake#blake.reveal.visible .bk5-around     { opacity:1; transform:none; transition-delay:220ms; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .bk5-hero { min-height:50vh; max-height:560px; }
  .bk5-hero-inner { padding: 0 40px 40px; gap:28px; }
  .bk5-hero-tag { top:28px; left:40px; }
  .bk5-slab { padding: 60px 0 72px; }
  .bk5-slab-inner {
    padding: 0 40px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }
  .bk5-origin-prose,
  .bk5-around-prose { font-size:16.5px; line-height:1.66; }
}
@media (max-width: 880px){
  .bk5-hero { min-height:48vh; max-height:520px; }
  .bk5-hero-inner {
    grid-template-columns:1fr; align-items:start;
    padding: 0 28px 32px;
  }
  .bk5-specimen { justify-self:start; min-width:220px; }
  .bk5-hero-tag { top:22px; left:28px; }
  .bk5-slab { padding: 48px 0 60px; }
  .bk5-slab-inner {
    padding: 0 28px;
    grid-template-columns: 1fr;
    gap: 44px;
  }
}
@media (max-width: 600px){
  .bk5-hero { min-height:44vh; max-height:480px; }
  .bk5-hero-headline { font-size: clamp(34px, 9vw, 52px); max-width:14ch; }
  .bk5-hero-inner { padding: 0 22px 28px; }
  .bk5-hero-tag { top:18px; left:22px; }
  .bk5-slab { padding: 40px 0 56px; }
  .bk5-slab-inner { padding: 0 22px; gap: 36px; }
  .bk5-origin-thumb-cap { flex-direction:column; gap:8px; }
  .bk5-keepers-photo-names { white-space:normal; overflow:visible; }
}

/* --- §08 Front lines rework (Finding G) --- */
.frontlines-vis {
  background:linear-gradient(180deg, rgba(212,162,76,.04) 0%, rgba(212,162,76,.01) 100%);
  border:1px solid rgba(212,162,76,.18);
  padding:28px 26px; display:flex; flex-direction:column; gap:20px;
  position:relative;
}
.frontlines-vis::before {
  content:'FROM YOUR GLASS → TO THE FIELD'; position:absolute; top:-9px; left:24px;
  background:var(--ink); padding:0 10px; font-family:"Josefin Sans",monospace; font-size:9.5px;
  letter-spacing:.22em; color:var(--acacia); opacity:.82;
}
.fl-row { display:grid; grid-template-columns: 56px 1fr auto; gap:18px; align-items:center; padding:10px 0; }
.fl-row + .fl-row { border-top:1px dashed rgba(241,232,214,.14); }
.fl-row .fl-num { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.22em; color:var(--acacia); opacity:.7; }
.fl-row .fl-body { display:flex; flex-direction:column; gap:4px; }
.fl-row .fl-name { font-family:"Cormorant Garamond",serif; font-size:22px; line-height:1.15; color:var(--ivory); font-weight:400; }
.fl-row .fl-where { font-family:"Josefin Sans",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); opacity:.55; }
.fl-row .fl-amt { font-family:"Cormorant Garamond",serif; font-size:24px; color:var(--acacia); font-weight:500; white-space:nowrap; }
.fl-row .fl-amt small { display:block; font-family:"Josefin Sans",monospace; font-size:9px; letter-spacing:.16em; color:var(--ivory); opacity:.55; text-transform:uppercase; margin-top:2px; font-weight:400; }
.fl-arc {
  height:2px; margin:8px 26px; position:relative;
  background:linear-gradient(90deg, var(--acacia) 0%, var(--acacia) 30%, rgba(212,162,76,.25) 30%, rgba(212,162,76,.25) 100%);
}
.fl-arc-dot { position:absolute; top:50%; width:8px; height:8px; border-radius:50%; background:var(--acacia); transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(212,162,76,.15); }
.fl-arc-dot[data-pos="0"]{ left:0; }
.fl-arc-dot[data-pos="1"]{ left:30%; }
.fl-arc-dot[data-pos="2"]{ left:60%; }
.fl-arc-dot[data-pos="3"]{ left:100%; }
.fl-foot { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-top:6px; font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.16em; color:var(--ivory); opacity:.55; text-transform:uppercase; }

/* --- Where the money goes: colored bars + stacked cumulative (Finding H) --- */
.lr-bar-01 > span { background:var(--acacia) !important; }
.lr-bar-02 > span { background:var(--acacia) !important; }
.lr-bar-03 > span { background:var(--rhino) !important; }
.lr-bar.lr-bar-01, .lr-bar.lr-bar-02, .lr-bar.lr-bar-03 { background:rgba(241,232,214,.10); }
.lr-stacked { display:flex; height:14px; border-radius:2px; overflow:hidden; background:rgba(241,232,214,.06); width:100%; }
.lr-stacked span { display:block; height:100%; }
.lr-stacked .seg-01 { background:var(--acacia); }
.lr-stacked .seg-02 { background:var(--acacia); }
.lr-stacked .seg-03 { background:var(--rhino); }
.lr-total .lr-bar { padding:0 !important; }
.lr-legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; font-family:"Josefin Sans",monospace; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory); opacity:.7; }
.lr-legend span { display:inline-flex; align-items:center; gap:6px; }
.lr-legend i { display:inline-block; width:10px; height:10px; border-radius:1px; }
.lr-legend .lg-01 { background:var(--acacia); }
.lr-legend .lg-02 { background:var(--acacia); }
.lr-legend .lg-03 { background:var(--rhino); }

/* --- Rhino Reserve canonical card expansion (Finding J) --- */
.v11-rr-card {
  margin-top:38px; border:1px solid rgba(241,232,214,.16); padding:30px 32px;
  display:grid; grid-template-columns: 1fr 1.4fr; gap:38px;
  background:linear-gradient(140deg, rgba(184,91,44,.10) 0%, rgba(212,162,76,.04) 100%);
  position:relative;
}
.v11-rr-card::before {
  content:'MEMBERS-ONLY ALLOCATION · CONSERVATION CIRCLE'; position:absolute; top:-9px; left:28px;
  background:var(--ink); padding:0 10px; font-family:"Josefin Sans",monospace; font-size:9.5px;
  letter-spacing:.22em; color:var(--acacia);
}
.v11-rr-head .name { font-family:"Cormorant Garamond",serif; font-size:30px; line-height:1.1; color:var(--ivory); font-weight:400; margin:0 0 10px; }
.v11-rr-head .name em { color:var(--acacia); font-style:italic; }
.v11-rr-head .tagline { font-family:"Josefin Sans",monospace; font-size:10.5px; letter-spacing:.20em; text-transform:uppercase; color:var(--acacia); opacity:.85; margin:0 0 18px; }
.v11-rr-head p { font-size:14.5px; line-height:1.6; color:var(--ivory); opacity:.86; margin:0 0 14px; }
.v11-rr-head .gate { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory); opacity:.55; margin:0; }
.v11-rr-collection { display:flex; flex-direction:column; gap:0; }
.v11-rr-collection h4 { font-family:"Josefin Sans",monospace; font-size:10.5px; letter-spacing:.22em; color:var(--acacia); margin:0 0 14px; text-transform:uppercase; opacity:.9; }
.v11-rr-bottle { display:grid; grid-template-columns:46px 1fr auto; gap:14px; align-items:center; padding:12px 0; border-top:1px dashed rgba(241,232,214,.12); }
.v11-rr-bottle:last-child { border-bottom:1px dashed rgba(241,232,214,.12); }
.v11-rr-bottle .yr { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.18em; color:var(--acacia); opacity:.7; }
.v11-rr-bottle .nm { font-family:"Cormorant Garamond",serif; font-size:18px; color:var(--ivory); }
.v11-rr-bottle .nm small { display:block; font-family:"Lora",sans-serif; font-size:12px; color:var(--ivory); opacity:.62; font-style:italic; margin-top:2px; line-height:1.3; }
.v11-rr-foot { display:flex; gap:18px; align-items:baseline; justify-content:space-between; margin-top:16px; flex-wrap:wrap; }
.v11-rr-foot .price { font-family:"Cormorant Garamond",serif; font-size:24px; color:var(--acacia); }
.v11-rr-foot .price small { font-family:"Josefin Sans",monospace; font-size:9.5px; letter-spacing:.18em; color:var(--ivory); opacity:.55; display:block; text-transform:uppercase; }
.v11-rr-foot .bonus { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.16em; color:var(--ivory); opacity:.7; text-transform:uppercase; line-height:1.5; max-width:40ch; }
.v11-rr-foot .bonus strong { color:var(--acacia); font-weight:500; }
@media (max-width: 880px){ .v11-rr-card { grid-template-columns:1fr; gap:24px; padding:24px; } }

/* --- Field notes signup with SMS opt-in (Finding L) --- */
.fn-form { display:flex; flex-direction:column; gap:18px; }
.fn-input-row { display:flex; flex-direction:column; gap:10px; }
.fn-input-row label { font-family:"Josefin Sans",monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--acacia); }
.fn-input-row input {
  background:transparent; border:none; border-bottom:1px solid var(--rule);
  color:var(--ivory); padding:12px 0; font-size:17px; font-family:inherit; outline:none;
  transition:border-color .2s;
}
.fn-input-row input:focus { border-color:var(--acacia); }
.fn-channel { display:flex; gap:24px; flex-wrap:wrap; margin-top:6px; }
.fn-channel label { display:inline-flex; align-items:center; gap:10px; font-family:"Josefin Sans",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); opacity:.85; cursor:pointer; }
.fn-channel input[type="checkbox"] { width:14px; height:14px; accent-color:var(--acacia); cursor:pointer; }
.fn-disclaimer { font-family:"Josefin Sans",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory); opacity:.45; margin-top:6px; line-height:1.55; }

/* --- Footer rotating stat strip (Finding M) --- */
.fn-stat-strip {
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--ink); color:var(--ivory);
}
.fn-stat-strip-inner {
  max-width:1340px; margin:0 auto; padding:30px 40px;
  display:flex; gap:48px; align-items:center; justify-content:space-between;
}
.fn-stat-eyebrow { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--acacia); display:inline-flex; align-items:center; gap:10px; }
.fn-stat-eyebrow .pip { width:7px; height:7px; border-radius:50%; background:var(--acacia); animation:fn-stat-pulse 2.4s ease-in-out infinite; }
@keyframes fn-stat-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
.fn-stat-rotator { position:relative; flex:1; min-height:54px; }
.fn-stat {
  position:absolute; inset:0; opacity:0; transform:translateY(8px);
  transition:opacity .55s ease, transform .55s ease;
  display:flex; flex-direction:column; gap:4px;
}
.fn-stat.is-active { opacity:1; transform:translateY(0); }
.fn-stat .num { font-family:"Cormorant Garamond",serif; font-size:42px; line-height:1; color:var(--acacia); font-weight:400; }
.fn-stat .lbl { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory); opacity:.75; }
.fn-stat-cta { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.20em; text-transform:uppercase; color:var(--acacia); text-decoration:none; border-bottom:1px solid rgba(212,162,76,.45); padding-bottom:4px; transition:color .2s, border-color .2s; }
.fn-stat-cta:hover { color:var(--ivory); border-color:var(--ivory); }
@media (max-width: 820px){
  .fn-stat-strip-inner { flex-direction:column; gap:20px; align-items:flex-start; padding:24px; }
  .fn-stat-rotator { width:100%; }
}

/* --- Donate modal (Finding I) --- */
.donate-modal {
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background:rgba(8,12,10,.78); backdrop-filter:blur(4px);
  padding:24px;
}
.donate-modal.is-open { display:flex; }
.donate-modal-card {
  background:#0E1A14; color:var(--ivory);
  width:min(560px, 100%); max-height:min(720px, 92vh);
  border:1px solid rgba(212,162,76,.30);
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
  animation:dm-rise .35s ease-out;
}
@keyframes dm-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.donate-modal-head { padding:24px 28px 18px; border-bottom:1px solid rgba(241,232,214,.10); display:flex; flex-direction:column; gap:6px; }
.donate-modal-head .eyebrow { font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--acacia); }
.donate-modal-head h3 { font-family:"Cormorant Garamond",serif; font-size:28px; line-height:1.15; margin:0; font-weight:400; }
.donate-modal-head h3 em { color:var(--acacia); font-style:italic; }
.donate-modal-head p { margin:6px 0 0; font-size:13.5px; line-height:1.55; opacity:.78; }
.donate-modal-body { padding:22px 28px 28px; overflow-y:auto; }
.donate-modal-row { margin-bottom:18px; }
.donate-modal-row label { display:block; font-family:"Josefin Sans",monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ivory); opacity:.7; margin-bottom:8px; }
.donate-amount-row { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.donate-amount-btn {
  background:transparent; border:1px solid rgba(241,232,214,.20); color:var(--ivory);
  padding:12px 4px; font-family:"Cormorant Garamond",serif; font-size:20px; cursor:pointer;
  transition:all .15s ease; text-align:center;
}
.donate-amount-btn:hover { border-color:var(--acacia); color:var(--acacia); }
.donate-amount-btn.is-active { background:var(--acacia); color:var(--ink); border-color:var(--acacia); }
.donate-custom-input {
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(241,232,214,.20);
  color:var(--ivory); padding:10px 0; font-size:18px; font-family:inherit; outline:none;
}
.donate-custom-input:focus { border-color:var(--acacia); }
.donate-modal-cta { width:100%; background:var(--acacia); color:var(--ink); border:none; padding:14px; font-family:"Lora",sans-serif; font-weight:500; font-size:14px; letter-spacing:.10em; text-transform:uppercase; cursor:pointer; transition:background .15s; margin-top:10px; }
.donate-modal-cta:hover { background:#e2b769; }
.donate-modal-foot { padding:14px 28px 20px; border-top:1px solid rgba(241,232,214,.10); font-family:"Josefin Sans",monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); opacity:.55; line-height:1.6; }
.donate-modal-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border:1px solid rgba(241,232,214,.20); background:transparent; color:var(--ivory); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:all .15s; }
.donate-modal-close:hover { color:var(--acacia); border-color:var(--acacia); }
body.dm-open { overflow: hidden; }

/* --- Section-deep-link CTA row (Finding N) --- */
.section-deep-link { margin-top:28px; padding-top:18px; border-top:1px solid rgba(241,232,214,.10); display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-family:"Josefin Sans",monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; }
.section-deep-link.on-light { border-top-color:rgba(15,26,20,.10); }
.section-deep-link .label { color:var(--acacia); opacity:.75; }
.section-deep-link.on-light .label { color:var(--acacia); opacity:.75; }
.section-deep-link a { color:var(--ivory); border-bottom:1px solid rgba(212,162,76,.35); padding-bottom:3px; text-decoration:none; transition:color .15s, border-color .15s; }
.section-deep-link.on-light a { color:var(--ink); border-bottom-color:rgba(184,91,44,.35); }
.section-deep-link a:hover { color:var(--acacia); border-color:var(--acacia); }
.section-deep-link.on-light a:hover { color:var(--acacia); border-color:var(--acacia); }

/* --- v6 V11 two-card differentiator (homepage Two Clubs section) ---
   Source: prototypes/6/styles.css lines 3003-3192. */
/* === V11 TWO-CARD DIFFERENTIATOR — homepage replaces v4 5-step ladder ===
   Side-by-side: Conservation Circle (left) + Crash Subscribe & Save (right).
   Inside the Circle card, a horizontal three-tier mini-rail shows
   Enthusiast · Advocate · Collector LTV. Below: Rhino Reserve sliver as
   parallel prestige tier. */
.v11-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:24px;
  align-items:stretch;
}
/* walk-3 defect #4: WP's :where(.is-layout-flow) > * rule injects a
   24px margin-block-start on non-first siblings, so the right card
   (Path B · Crash Subscribe & Save) renders 24px below the left
   card (Path A · Conservation Circle). Zero margin-block-start on
   grid children at !important so the WP-injected same-specificity
   rule loses on source order. Same fix used for .bk5-slab-inner
   and .r-press-grid. */
.v11-grid > * { margin-block-start: 0 !important; }
.v11-card{
  background:var(--reserve-2);
  border:1px solid var(--rule);
  padding:44px 40px 36px;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  overflow:hidden;
  transition:border-color .22s ease, transform .25s ease;
}
.v11-card:hover{ border-color:var(--acacia); transform:translateY(-2px); }
.v11-card.featured{
  background:linear-gradient(180deg, rgba(212,162,76,0.10), var(--reserve-2) 60%);
  border-color:rgba(212,162,76,0.4);
}
.v11-card-eyebrow{
  font-family:var(--ff-mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--acacia);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.v11-card-eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; }
.v11-card h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(34px,3.6vw,46px);
  line-height:1.04;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ivory);
}
.v11-card h3 em{ font-style:italic; font-weight:300; color:var(--acacia); }
.v11-card .sub{
  font-size:15px;
  line-height:1.6;
  color:var(--ivory);
  opacity:.82;
  margin:0;
  max-width:42ch;
}
.v11-card .price-line{
  font-family:var(--ff-display);
  font-size:30px;
  line-height:1.15;
  color:var(--ivory);
}
.v11-card .price-line .amt{ color:var(--acacia); font-style:italic; font-weight:400; }
.v11-card .price-line small{
  display:block;
  font-family:var(--ff-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(241,232,214,0.55);
  margin-top:6px;
}
.v11-tiers{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-top:10px;
}
/* walk-3 defect #6: in the editor canvas, .v11-tiers' direct child is
   .block-editor-inner-blocks (which wraps .block-editor-block-list__layout
   which wraps the three v11-tier blocks). The grid laid out on .v11-tiers
   applies to direct children only, so the three tiers stack vertically
   inside the single wrapper instead of laying out horizontally as on
   front-end (front-end save markup is flat: .v11-tiers > .v11-tier*3).
   Project the grid through both InnerBlocks wrappers in editor only so
   the editor preview matches the front-end. Outer .v11-tiers keeps its
   front-end grid + border + rule-line background; the inner two wrappers
   become transparent grid layers that pass the 3-column layout down to
   the v11-tier blocks. */
.editor-styles-wrapper .v11-tiers > .block-editor-inner-blocks,
.editor-styles-wrapper .v11-tiers > .block-editor-inner-blocks > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
}
.v11-tier{
  background:var(--reserve);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.v11-tier .name{
  font-family:var(--ff-mono);
  font-size:9.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--acacia);
}
.v11-tier .qty{
  font-family:var(--ff-display);
  font-size:22px;
  line-height:1;
  color:var(--ivory);
  font-weight:400;
}
.v11-tier .ltv{
  font-family:var(--ff-mono);
  font-size:11px;
  color:rgba(241,232,214,0.7);
  letter-spacing:0.04em;
  margin-top:4px;
}
.v11-tier .ltv strong{ color:var(--ivory); font-weight:500; }
.v11-bullets{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.v11-bullets li{
  font-size:14px;
  line-height:1.5;
  color:var(--ivory);
  opacity:.86;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.v11-bullets li::before{
  content:""; width:6px; height:6px; background:var(--acacia);
  border-radius:50%;
  margin-top:7px; flex:0 0 6px;
}
.v11-card .cta-row{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--rule);
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.v11-sliver{
  margin-top:22px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  padding:18px 22px;
  border:1px dashed rgba(212,162,76,0.32);
  background:rgba(212,162,76,0.04);
}
.v11-sliver-eyebrow{
  font-family:var(--ff-mono);
  font-size:9.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--acacia);
}
.v11-sliver-copy{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:400;
  font-size:18px;
  line-height:1.3;
  color:var(--ivory);
  opacity:.92;
}
.v11-sliver-copy small{
  display:block;
  font-family:var(--ff-mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(241,232,214,0.55);
  margin-top:4px;
  font-style:normal;
}
.v11-sliver-cta{
  font-family:var(--ff-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--acacia);
}
@media (max-width:980px){
  .v11-grid{ grid-template-columns:1fr; }
  .v11-tiers{ grid-template-columns:1fr; }
  .v11-sliver{ grid-template-columns:1fr; gap:8px; }
}


/* --- v6 Homepage: hero tagline + featured cellar 3-card ---
   Source: prototypes/6/styles.css lines 4268-4354. */
/* === HOMEPAGE: hero tagline addition + featured cellar 3-card === */
.hero-tagline{
  font-family:var(--ff-display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(22px,2.6vw,30px);
  line-height:1.2;
  color:var(--acacia);
  margin:6px 0 18px;
  letter-spacing:-0.005em;
}
/* v12 "A2" rev pass (01-homepage.html inline <style>): tagline reads as a
   Josefin uppercase subhead, not the italic serif base rule above. The
   higher-specificity .hero .hero-tagline selector is the prototype's actual
   shipped treatment -- port verbatim, do not keep the superseded base look. */
.hero .hero-tagline{
  font-family:"Josefin Sans",sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:13px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  line-height:1.4;
  color:var(--acacia);
  margin:2px 0 30px;
}

/* v12 button weight (v12-shared.css + cd-pass9-nicole "G"): every homepage
   CTA reads at 600, primaries carry the acacia glow. */
.btn{ font-weight:600; }
.btn-primary{ box-shadow:0 12px 34px -14px rgba(212,162,76,.55); }

/* v12-rev item 7 + v12-pass4 "REFINEMENT 3": hero CTA pair is heavier and
   larger, ghost matches primary's visual weight (2px opaque border, 700). */
.hero .hero-ctas .btn{ font-weight:700; letter-spacing:0.14em; font-size:13.5px; padding:18px 32px; }
.hero .hero-ctas .btn-primary{ box-shadow:0 12px 34px -14px rgba(212,162,76,.55); }
.hero .hero-ctas .btn-ghost{ border-width:2px; border-color:var(--ivory); color:var(--ivory); }
.hero .hero-ctas .btn-ghost:hover{ background:var(--ivory); color:var(--reserve);
}
.cellar-hero{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.cellar-card{
  background:var(--reserve-2);
  border:1px solid var(--rule);
  padding:0;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--ivory);
  transition:transform .25s, border-color .25s;
}
.cellar-card:hover{ transform:translateY(-4px); border-color:var(--acacia); }
.cellar-card .img{
  aspect-ratio:5/4;
  background-size:cover;
  background-position:center;
  background-color:#1a1a1a;
}
.cellar-card .body{
  padding:28px 26px 28px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.cellar-card .col{
  font-family:var(--ff-mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--acacia);
}
.cellar-card h3{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:32px;
  line-height:1.05;
  color:var(--ivory);
  margin:0;
}
.cellar-card h3 em{ font-style:italic; font-weight:300; color:var(--acacia); }
.cellar-card p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ivory);
  opacity:.78;
  margin:0;
  flex:1;
}
.cellar-card .foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:14px;
  border-top:1px solid var(--rule);
}
.cellar-card .price{
  font-family:var(--ff-display);
  font-size:22px;
  color:var(--ivory);
}
/* v12 filled-button CTA (prototypes/12/styles.css:4421) — supersedes the
   v6 text-link treatment. */
.cellar-card .cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  min-height:44px;
  box-sizing:border-box;
  background:var(--acacia);
  color:var(--reserve);
  font-family:var(--ff-label, var(--ff-mono));
  font-size:11px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  border-radius:2px;
  transition:background .2s, color .2s, transform .2s;
}
.cellar-card:hover .cta{
  background:var(--ivory);
  color:var(--reserve);
  transform:translateY(-1px);
}
@media (max-width:880px){
  .cellar-hero{ grid-template-columns:1fr; }
}


/* --- v6 Third-party validation strip (.r-proof*) ---
   Source: prototypes/6/styles.css lines 4455-4621. */
/* === THIRD-PARTY VALIDATION STRIP ============================
   Reusable component. Public review aggregate (898 reviews · 4.7★ across
   Google · Yelp · Facebook · TripAdvisor) + a verbatim press pull-quote
   with attribution. One class, two ground variants:
     .r-proof          → default, sits on reserve-green background
     .r-proof.is-paper → for ivory/paper contexts (e.g. catalog header)
   Layout: two-column grid — compact stats column, gold-rule, wider quote.
   On <880px stacks single-column with a horizontal rule between blocks.
   Typography follows the deck system (Cormorant display italic for quote,
   JetBrains Mono uppercase for eyebrow + attribution, Inter Tight body). */
.r-proof{
  width:100%;
  /* cd-n-alpha revision (prototypes/12/01-homepage.html inline block) darkens
     the reviews band below the surrounding --reserve (#211B18) sections. */
  background:#0A0807;
  color:var(--ivory);
  border-block:1px solid var(--rule);
  padding:54px 0;
  position:relative;
}
.r-proof.is-paper{
  background:var(--paper-warm);
  color:var(--ink-warm);
  border-block:1px solid var(--rule-warm-2);
}
/* hairline acacia accent rule riding the top edge */
.r-proof::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--acacia) 18%, var(--acacia) 82%, transparent 100%);
  opacity:0.55;
}
.r-proof.is-paper::before{
  background:linear-gradient(90deg,
    transparent 0%, var(--acacia-dk) 18%, var(--acacia-dk) 82%, transparent 100%);
  opacity:0.55;
}
.r-proof-inner{
  display:grid;
  grid-template-columns:minmax(280px, 340px) 1fr;
  gap:64px;
  align-items:center;
}
.r-proof-stats{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-right:56px;
  border-right:1px solid var(--rule);
}
.r-proof.is-paper .r-proof-stats{ border-right-color:var(--rule-warm-2) }
.r-proof-eyebrow{
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--acacia); font-weight:500;
  display:inline-flex; align-items:center; gap:12px;
}
.r-proof-eyebrow::before{
  content:""; width:18px; height:1px; background:var(--acacia);
}
.r-proof.is-paper .r-proof-eyebrow{ color:var(--acacia-dk) }
.r-proof.is-paper .r-proof-eyebrow::before{ background:var(--acacia-dk) }
.r-proof-agg{
  display:flex; align-items:baseline; gap:22px;
  font-family:"Cormorant Garamond","Cormorant",Georgia,serif;
  font-weight:400; line-height:1;
  margin-top:4px;
}
.r-proof-num{
  font-size:54px; letter-spacing:-0.01em;
}
.r-proof-num small{
  display:block;
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:10px; letter-spacing:0.20em; text-transform:uppercase;
  color:inherit; opacity:0.62;
  margin-top:8px;
  font-weight:500;
}
.r-proof-rating{
  display:inline-flex; align-items:center; gap:6px;
  font-size:26px;
  padding-bottom:18px; /* sit on baseline of num + label stack */
}
.r-proof-rating .star{
  color:var(--acacia);
  font-size:18px;
  display:inline-block;
  transform:translateY(-2px);
}
.r-proof.is-paper .r-proof-rating .star{ color:var(--acacia) }
.r-proof-platforms{
  font-family:"Lora",system-ui,sans-serif;
  font-size:14px; line-height:1.55;
  margin:0;
  opacity:0.82;
}
.r-proof-platforms strong{
  font-weight:500;
  color:inherit;
  opacity:1;
}
.r-proof-platforms .pf-enrich{
  display:block; margin-top:6px;
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  opacity:0.62;
}
.r-proof-quote{
  display:flex; flex-direction:column; gap:22px;
  min-width:0;
}
.r-proof-quote blockquote{
  font-family:"Cormorant Garamond","Cormorant",Georgia,serif;
  font-style:italic; font-weight:300;
  font-size:30px; line-height:1.22;
  letter-spacing:-0.005em;
  margin:0;
  max-width:46ch;
  text-wrap:pretty;
  position:relative;
}
.r-proof-quote blockquote::before{
  content:"\201C";
  font-style:normal;
  font-weight:400;
  color:var(--acacia);
  margin-right:6px;
  font-size:1em;
  line-height:1;
}
.r-proof.is-paper .r-proof-quote blockquote::before{ color:var(--acacia) }
.r-proof-attr{
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px;
  opacity:0.78;
}
.r-proof-attr .pub{
  color:var(--acacia);
  font-weight:500;
  opacity:1;
}
.r-proof.is-paper .r-proof-attr .pub{ color:var(--burgundy) }
.r-proof-attr .sep{
  opacity:0.42;
  display:inline-block;
}
@media (max-width:980px){
  .r-proof-quote blockquote{ font-size:24px }
  .r-proof-inner{ gap:40px }
  .r-proof-stats{ padding-right:36px }
}
@media (max-width:760px){
  .r-proof{ padding:38px 0 }
  .r-proof-inner{
    grid-template-columns:1fr;
    gap:28px;
  }
  .r-proof-stats{
    padding-right:0; padding-bottom:26px;
    border-right:none;
    border-bottom:1px solid var(--rule);
  }
  .r-proof.is-paper .r-proof-stats{ border-bottom-color:var(--rule-warm-2) }
  .r-proof-num{ font-size:44px }
  .r-proof-rating{ font-size:22px; padding-bottom:14px }
  .r-proof-quote blockquote{ font-size:22px }
}

/* --- v6 Press strip (.r-press*) cross-cutting ---
   Source: prototypes/6/voice-polish.css lines 13-172. */
/* === .r-press — cross-cutting press strip ============================
   Three masthead columns of equal weight: Texas Monthly · Texas
   Highways · Axios San Antonio. Reads as a curated press ledger
   — not stamped logo wall. Masthead names rendered in display
   Cormorant; quote in Cormorant italic; attribution in Mono
   uppercase. Dark by default; .is-paper for ivory contexts. */
.r-press{
  width:100%;
  background:var(--reserve);
  color:var(--ivory);
  padding:60px 0 56px;
  border-block:1px solid var(--rule);
  position:relative;
}
.r-press.is-paper{
  background:var(--paper-warm);
  color:var(--ink-warm);
  border-block-color:var(--rule-warm-2);
}
.r-press::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,
    transparent 0%, var(--acacia) 18%, var(--acacia) 82%, transparent 100%);
  opacity:0.55;
}
.r-press.is-paper::before{
  background:linear-gradient(90deg,
    transparent 0%, var(--acacia-dk) 18%, var(--acacia-dk) 82%, transparent 100%);
}
.r-press-inner{
  display:flex; flex-direction:column; gap:36px;
}
.r-press-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:22px;
  border-bottom:1px solid var(--rule);
}
.r-press.is-paper .r-press-head{ border-bottom-color:var(--rule-warm-2) }
.r-press-eyebrow{
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--acacia); font-weight:500;
  display:inline-flex; align-items:center; gap:14px;
}
.r-press-eyebrow::before{
  content:""; width:22px; height:1px; background:var(--acacia);
}
.r-press.is-paper .r-press-eyebrow{ color:var(--acacia-dk) }
.r-press.is-paper .r-press-eyebrow::before{ background:var(--acacia-dk) }
.r-press-title{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400; font-style:italic; line-height:1.05;
  letter-spacing:-0.005em;
  font-size:clamp(24px, 2.4vw, 32px);
  color:inherit;
  margin:0;
  max-width:24ch;
  text-wrap:balance;
}
.r-press-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:stretch;
  gap:0;
}
/* Zero WP is-layout-flow auto-margin between siblings on the grid so
   columns 2+3 don't render 24px below column 1's start position.
   !important to outrank the editor-canvas injected layout-flow rule of
   matching specificity (same trick as .bk5-slab-inner above).
   Hold-the-line scope: throwaway when press CPT consumption rebuilds. */
.r-press-grid > * { margin-block-start: 0 !important; }
.r-press-card{
  display:flex; flex-direction:column;
  padding:6px 36px 6px 36px;
  border-right:1px solid var(--rule);
  position:relative;
  /* Force equal-height + top-aligned content across the 3-col grid.
     Without this, varied quote lengths cause card 1's pub/quote to
     start at a different vertical position than cards 2+3 — visible
     baseline misalignment Erik flagged as defect #7. height:100% +
     align-self:stretch (grid default) makes cards equal-height;
     margin-top:auto on .r-press-attr (already set) pushes attribution
     to the bottom regardless of quote length. */
  height:100%;
}
.r-press.is-paper .r-press-card{ border-right-color:var(--rule-warm) }
.r-press-card:first-child{ padding-left:0 }
.r-press-card:last-child{ border-right:none; padding-right:0 }
.r-press-pub{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:500; font-style:normal;
  font-size:22px; line-height:1.15;
  letter-spacing:0.01em;
  color:var(--acacia);
  margin:0 0 4px 0;
  display:flex; flex-direction:column; gap:2px;
}
.r-press-pub small{
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:9.5px; letter-spacing:0.22em; text-transform:uppercase;
  font-weight:500; color:var(--acacia);
  opacity:0.78;
}
.r-press.is-paper .r-press-pub{ color:var(--burgundy) }
.r-press.is-paper .r-press-pub small{ color:var(--burgundy) }
.r-press-rule{
  height:1px; width:36px;
  background:var(--acacia); opacity:0.55;
  margin:14px 0 22px 0;
}
.r-press.is-paper .r-press-rule{ background:var(--acacia-dk) }
.r-press-card blockquote{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic; font-weight:300;
  font-size:24px; line-height:1.28;
  letter-spacing:-0.005em;
  color:inherit;
  margin:0 0 22px 0;
  text-wrap:pretty;
  position:relative;
}
.r-press-card blockquote::before{
  content:"\201C";
  font-style:normal;
  position:absolute; left:-0.4em; top:-0.05em;
  font-size:1.7em; color:var(--acacia);
  opacity:0.45; line-height:1;
}
.r-press.is-paper .r-press-card blockquote::before{ color:var(--acacia) }
.r-press-attr{
  margin-top:auto;
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase;
  display:flex; flex-direction:column; gap:4px;
  opacity:0.82;
}
.r-press-attr strong{
  font-weight:500;
  letter-spacing:0.18em;
  color:var(--ivory);
}
.r-press.is-paper .r-press-attr strong{ color:var(--ink-warm) }
.r-press-attr .sep{ opacity:0.5 }

.r-press-foot{
  padding-top:6px;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; flex-wrap:wrap;
  font-family:"Josefin Sans",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ivory); opacity:0.6;
}
.r-press.is-paper .r-press-foot{ color:var(--ink-warm); opacity:0.7 }
.r-press-foot-link{
  color:var(--acacia); opacity:1;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease, opacity .18s ease;
}
.r-press.is-paper .r-press-foot-link{ color:var(--burgundy) }
.r-press-foot-link:hover{ border-bottom-color:currentColor }

@media (max-width:980px){
  .r-press-grid{ grid-template-columns:1fr; gap:0 }
  .r-press-card{
    padding:28px 0;
    border-right:none;
    border-bottom:1px solid var(--rule);
  }
  .r-press.is-paper .r-press-card{ border-bottom-color:var(--rule-warm) }
  .r-press-card:first-child{ padding-top:0 }
  .r-press-card:last-child{ border-bottom:none; padding-bottom:0 }
  .r-press-card blockquote{ font-size:22px }
}

/*
 * Responsive root gutter (WP7 spacing-scale activation, brief 2026-06-01).
 * theme.json binds the global root padding to spacing--40 (40px), matching the
 * desktop --rhinory-px gutter. The v6 prototype tightens the gutter to ~22px on
 * mobile, so step the root padding down to spacing--30 (24px) below 720px rather
 * than ship a flat 40px to phones. Keeps the alignfull negative margins in sync
 * (they reference the same vars). Source: docs/briefs/2026-06-01-theme-json-default-spacing-suppression.md.
 *
 * `html body` (0,0,2), not bare `body` (0,0,1): theme.json's global-styles
 * <style> declares the same two custom properties on `body`, so at equal
 * specificity this override only wins while style.css is printed AFTER the
 * inline global styles. That print order is not ours to guarantee — a block
 * that declares its stylesheet in block.json (rhinory/product-catalog and the
 * other shop-composability blocks, docs/briefs/2026-08-15-shop-composable-blocks.md
 * S3) pulls rhinory-v4-style forward as a dependency, ahead of global styles,
 * on any page that embeds one. The extra element in the selector makes the
 * mobile gutter order-independent. Same computed value, no paint change.
 */
@media (max-width: 720px) {
  html body {
    --wp--style--root--padding-left:  var(--wp--preset--spacing--30);
    --wp--style--root--padding-right: var(--wp--preset--spacing--30);
  }
}

/*
 * Breadcrumbs (WP7 core/breadcrumbs) treatment — brief 2026-05-31-wp7-breadcrumbs-block.
 * Visual styling (mono font, muted text, acacia links, spacing) lives in theme.json
 * styles.blocks."core/breadcrumbs" (dark-register default). This block adds the two
 * things theme.json cannot express: mobile truncation and the light-register override.
 * Native markup: nav.wp-block-breadcrumbs > ol > li (+ li:not(:last-child)::after = separator).
 */

/* Mobile: visible + truncated to "Home / … / current" by collapsing the middle items. */
@media (max-width: 720px) {
  /* hide all middle items except the first middle (which becomes the ellipsis) */
  .wp-block-breadcrumbs li:not(:first-child):not(:last-child):not(:nth-child(2)) { display: none; }
  /* turn the first middle item into a non-link ellipsis; the :not(:last-child) guard
     leaves a 2-item trail (Home / current, where nth-child(2) IS the current page) intact */
  .wp-block-breadcrumbs li:nth-child(2):not(:last-child) > a { display: none; }
  .wp-block-breadcrumbs li:nth-child(2):not(:last-child)::before { content: "\2026"; }
}

/* Light register (Foundation / off-white). PLACEHOLDER hook: the Foundation Our Impact
   surface is not ported yet, so confirm/wire the real register class at port time (this
   brief documents `.is-foundation` as the assumed wrapper). Reserve-green links on paper. */
.is-foundation .wp-block-breadcrumbs { color: var(--wp--preset--color--rhino); }
.is-foundation .wp-block-breadcrumbs a { color: var(--wp--preset--color--reserve); }
.is-foundation .wp-block-breadcrumbs a:hover { color: var(--wp--preset--color--ink); }

/*
 * CTA focus-visible rings (WP7 interactive-state brief 2026-05-31-wp7-interactive-state-tokens).
 * Rhinory CTAs are custom .btn anchors (the cta-button block emits .btn / .btn-primary|ghost|dark),
 * NOT core .wp-element-button, and the focus RING is an outline (not theme.json-expressible), so
 * the consistent keyboard focus indicator lives here. Matches the established acacia ring pattern
 * (.dd-item / .dd-subheading-toggle). Closes the a11y gap on the primary CTAs (they previously
 * relied on the inconsistent UA default outline). Keyboard-only (:focus-visible), so no change to
 * mouse-click or default paint. .wp-element-button included to future-proof any core button.
 */
.btn:focus-visible,
.wp-element-button:focus-visible {
  outline: 1px solid var(--wp--preset--color--acacia);
  outline-offset: 3px;
}
/* Light register (Foundation / paper): acacia is low-contrast on cream, ring in reserve green. */
.is-foundation .btn:focus-visible,
.is-foundation .wp-element-button:focus-visible {
  outline-color: var(--wp--preset--color--reserve);
}

/* ===================================================================
 * v12 homepage sections — ported verbatim from prototypes/12/01-homepage.html's
 * inline <style id="v12-rev">/"v12-pass4"/"cd-pass9-nicole"> blocks (the prototype's
 * newest-revision CSS lives inline in the HTML file, not the shared prototypes/12/*.css
 * files). Port note: prototype pass 9/11 superseded a few earlier rules (e.g. rhino-card
 * banners, cellar-hero column split) — only the FINAL cascade-resolved declarations are
 * ported here, not the intermediate overridden ones. Port: 2026-07-13, brief
 * 2026-07-09-port-01-homepage-v6-to-v12.md Phase 1+2.
 * =================================================================== */

/* ---- Our Story teaser (#our-story) ---- */
.ourstory { background: var(--ink); color: var(--ivory); padding: clamp(64px, 8vw, 116px) 0; }
.ourstory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); align-items: stretch; }
.ourstory-copy { max-width: 32rem; }
.ourstory-copy .eyebrow { margin-bottom: 22px; }
.ourstory-copy h2 {
	font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600;
	font-size: clamp(40px, 5vw, 68px); line-height: 1.0; letter-spacing: -0.01em;
	color: var(--ivory); margin: 0;
}
.ourstory-copy h2 em { font-style: italic; font-weight: 500; color: var(--acacia); }
/* :not(.eyebrow):not(.ourstory-link) — same wp:paragraph collision as the
   community section: the prototype's eyebrow + CTA are <span>/<a>, ours are
   <p>s, and the Lora body rule (0,2,1) would override the Josefin chip and
   the 12px CTA link (both 0,1,0). */
.ourstory-copy p:not(.eyebrow):not(.ourstory-link) { font-family: "Lora", Georgia, serif; font-size: 18px; line-height: 1.6; opacity: .9; margin: 22px 0 0; }
.ourstory-link {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
	font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 12px;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--acacia);
	border-bottom: 1px solid rgba(212,162,76,.4); padding-bottom: 6px; text-decoration: none;
	transition: color .2s, border-color .2s;
}
.ourstory-link:hover { color: var(--ivory); border-color: var(--ivory); }
.ourstory-link .arrow { transition: transform .2s; display: inline-block; }
.ourstory-link:hover .arrow { transform: translateX(4px); }
/* .os-rotator — captioned crossfade slideshow (rhinory/os-rotator +
   rhinory/os-frame children). Source: prototypes/12/01-homepage.html
   item B inline <style> (no base rule exists in the linked stylesheets --
   same "newest CSS lives inline" pattern as the rest of this section). */
.ourstory-grid .os-rotator {
	/* height:100% / min-height:0 verbatim from the pass-4 inline block —
	   the copy column drives the height (align-items:stretch on the grid).
	   An aspect-ratio here + height:100% makes the browser derive WIDTH
	   from the stretched height, blowing the rotator past its 1fr column
	   and under the heading text. Mobile gets its 4/3 crop in the media
	   query below, matching the prototype's single-column fallback. */
	position: relative; height: 100%; min-height: 0;
	background: #14110e; overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(212,162,76,.18);
}
.os-frame {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	opacity: 0; transition: opacity 1.1s ease; filter: saturate(.96) contrast(1.03);
}
.os-frame.is-active { opacity: 1; }
.os-rotator::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,8,7,0) 48%, rgba(10,8,7,.76) 100%);
}
.os-cap {
	position: absolute; left: 18px; right: 78px; bottom: 16px; z-index: 3;
	font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ivory); opacity: .94; line-height: 1.5;
}
.os-dots { position: absolute; right: 16px; bottom: 17px; z-index: 3; display: flex; gap: 8px; }
.os-dot {
	width: 7px; height: 7px; border-radius: 50%; background: rgba(243,242,237,.42);
	transition: background .25s, transform .25s; cursor: pointer; padding: 0; border: none;
}
.os-dot.is-active { background: var(--acacia); transform: scale(1.28); }
@media (max-width: 880px) {
	.ourstory-grid { grid-template-columns: 1fr; }
	.ourstory-grid .os-rotator {
		aspect-ratio: 4/3; min-height: 280px;
		/* max-width is load-bearing, not defensive. `aspect-ratio` + a floored
		   `min-height` makes the browser derive WIDTH from the height:
		   280px x 4/3 = 373.33px, which overflowed the 346px grid column at a
		   390px viewport and gave the homepage 5px of horizontal scroll on a
		   phone. Same trap the desktop rule above documents ("aspect-ratio here
		   + height:100% makes the browser derive WIDTH from the stretched
		   height"), reintroduced through min-height instead of height.
		   Clamping to the column makes width the input and lets min-height win
		   on the cross axis, so the box floors at 280px tall without ever
		   driving its own width. Regression-guarded by
		   tests/visual/surfaces/layout-invariants.spec.ts. */
		max-width: 100%;
	}
}

/* ---- Reviews / proof stats (#reviews) — .rp-stat cell layout.
   Port note: the prototype's markup uses .rp-stat/.rp-stat-num/.rp-stat-lbl (a later
   revision consolidating the review count + rating into two matching cells), but the
   prototype's own styles.css only ever defines the OLDER .r-proof-num/.r-proof-rating
   layout for that structure — .rp-stat itself has no base layout rule anywhere in the
   prototype source (confirmed: grepped styles.css + all four linked CSS files + the
   inline <style> blocks). Only a later "Jason pass" font-size override
   (.rp-stat-num .star / .rp-stat-lbl) exists, assuming a base layout that was never
   written. This is a prototype-internal inconsistency, not a live-copy conflict — noted
   here per the goal's "record the conflict, don't guess" instruction. Resolution: the
   base cell layout below is written to match the sibling .wwfig num/label pattern
   (big Cormorant number over a Josefin caps label) already established elsewhere in
   this same prototype, preserving the Jason-pass override's assumed structure. */
.r-proof-agg { display: flex; align-items: baseline; gap: 34px; margin-top: 4px; }
.rp-stat { display: flex; flex-direction: column; gap: 8px; font-family: "Cormorant Garamond", Georgia, serif; }
.rp-stat-num { font-size: 44px; line-height: 1; letter-spacing: -0.01em; color: var(--ivory); }
.r-proof.is-paper .rp-stat-num { color: var(--ink-warm); }
.rp-stat-num .star { font-size: 40px; opacity: 1; margin-right: 1px; color: var(--acacia); }
.r-proof.is-paper .rp-stat-num .star { color: var(--acacia); }
.rp-stat-lbl {
	font-family: "Josefin Sans", ui-monospace, monospace; font-size: 11px;
	letter-spacing: 0.14em; text-transform: uppercase; opacity: .78;
}
.r-proof-attr { font-size: 12.5px; letter-spacing: 0.13em; opacity: .95; }
.r-proof-attr .sep { opacity: .8; }
.r-proof-attr span:nth-of-type(1) { color: var(--acacia); font-weight: 500; }
.r-proof.is-paper .r-proof-attr span:nth-of-type(1) { color: var(--burgundy); }

/* ---- The cellar (#cellar) — Signature + Keras hero pair, Crash wide beneath ---- */
.home-cellar .cellar-hero { grid-template-columns: 1fr 1fr; }
/* v12-rev: burgundy emphasis on "you are drinking with purpose" in the intro lede. */
.home-cellar .section-head .lede strong { color: #520000; }
.home-cellar .cellar-card-wide {
	grid-column: 1 / -1; grid-template-columns: 420px 1fr; display: grid; align-items: stretch;
	background: var(--reserve-2); border-color: var(--rule);
}
.home-cellar .cellar-card-wide:hover { transform: none; border-color: var(--acacia); }
.home-cellar .cellar-card-wide .img { aspect-ratio: auto; height: 100%; min-height: 170px; opacity: .92; }
.home-cellar .cellar-card-wide .body { padding: 24px 28px; }
.home-cellar .cellar-card-wide h3 { font-size: 26px; }
.home-cellar .cellar-card-wide p { max-width: none; }
@media (max-width: 880px) {
	.home-cellar .cellar-hero { grid-template-columns: 1fr; }
	.home-cellar .cellar-card-wide { grid-template-columns: 1fr; }
}

/* ---- Plan a visit (#visit) — image-fill experience cards + proximity device ---- */
.vexp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vexp {
	position: relative; min-height: 480px; overflow: hidden; text-decoration: none;
	display: flex; flex-direction: column; justify-content: flex-end; padding: 34px 30px;
	background: #14110e; transition: transform .25s, box-shadow .25s;
}
.vexp-bg {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transition: transform .8s ease; filter: saturate(.96) contrast(1.04);
}
.vexp:hover .vexp-bg { transform: scale(1.05); }
.vexp::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,8,7,.06) 0%, rgba(10,8,7,.32) 44%, rgba(10,8,7,.9) 100%);
}
.vexp:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -28px rgba(10,8,7,.65); }
.vexp-inner { position: relative; z-index: 2; }
.vexp-tag {
	position: absolute; top: 24px; left: 30px; z-index: 2;
	font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--ivory); background: rgba(82,0,0,.85); padding: 7px 13px;
}
.vexp h3 {
	font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 31px; line-height: 1.04;
	color: var(--ivory); margin: 0 0 12px; letter-spacing: -0.01em;
}
.vexp h3 em { font-style: italic; color: var(--gold-soft); }
.vexp p { font-family: "Lora", serif; font-size: 14.5px; line-height: 1.58; color: var(--ivory); opacity: .9; margin: 0; max-width: 36ch; }
.vexp-go {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
	font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ivory); transition: gap .2s, color .2s;
}
.vexp:hover .vexp-go { gap: 16px; color: var(--gold-soft); }
@media (max-width: 880px) { .vexp-grid { grid-template-columns: 1fr; } .vexp { min-height: 400px; } }

.vcities {
	margin-top: 60px; padding-top: 38px; border-top: 1px solid var(--rule-warm-2);
	display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 5vw, 64px); align-items: start;
}
.vcities-head .eyebrow { color: #520000; margin-bottom: 16px; font-size: 12px; letter-spacing: 0.2em; }
.vcities-head .eyebrow::before { background: #520000; }
.vcities-context { font-family: "Lora", Georgia, serif; font-size: 15px; line-height: 1.6; color: var(--reserve); opacity: .86; max-width: 32ch; margin: 0; }
.vcities-open {
	display: block; margin-top: 10px; font-family: "Josefin Sans", sans-serif;
	font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acacia); opacity: .85;
}
.vcities-list { list-style: none; margin: 0; padding: 0; }
.vcities-list li, .vc-row {
	display: grid; grid-template-columns: 1.5fr auto auto 1.4fr; gap: 18px; align-items: baseline;
	padding: 15px 0; border-top: 1px solid var(--rule-warm);
}
.vcities-list li:first-child, .vc-row:first-child { border-top: none; }
.vc-city { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 23px; color: var(--reserve); letter-spacing: -0.005em; }
.vc-time { font-family: "Cormorant Garamond", serif; font-size: 23px; color: #520000; }
.vc-dist { font-family: "Josefin Sans", sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhino-warm); white-space: nowrap; }
.vc-route { font-family: "Josefin Sans", sans-serif; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rhino-warm); opacity: .85; text-align: right; }
@media (max-width: 880px) {
	.vcities { grid-template-columns: 1fr; gap: 28px; }
	.vcities-list li, .vc-row { grid-template-columns: 1fr auto auto; row-gap: 2px; gap: 12px; }
	.vc-route { grid-column: 1 / -1; text-align: left; }
}

.visit-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 48px; }
.home-visit .visit-cta-row .btn { font-weight: 700; letter-spacing: 0.14em; }
.home-visit .visit-cta-row .btn-ghost { border-width: 2px; border-color: #520000; color: #520000; }
.home-visit .visit-cta-row .btn-ghost:hover { background: #520000; color: var(--paper); }

/* ---- Conservation at a glance (#receipts) — three-rhino grid + worldwide-impact map ---- */
.rcpt { background: #000; color: var(--ivory); border-block: 1px solid var(--rule); padding: clamp(64px, 8vw, 116px) 0; }
.rcpt-head { max-width: 62ch; margin-bottom: 34px; }
.rcpt-head h2 {
	font-family: "Cormorant Garamond", serif; font-weight: 600;
	font-size: clamp(34px, 4.6vw, 58px); line-height: 1.02; letter-spacing: -0.01em; margin: 14px 0 0;
}
.rcpt-head h2 em { font-style: italic; color: var(--acacia); }
.rhinos-eyebrow { margin-bottom: 22px; display: block; }
.rhinos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 56px; }
.rhino-card {
	position: relative; background: #0f0d0b; box-shadow: inset 0 0 0 1px rgba(243,242,237,.10); overflow: hidden;
	transition: transform .25s, box-shadow .25s;
}
.rhino-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.rhino-card-banner {
	position: absolute; top: 14px; left: 14px; z-index: 3;
	font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 10.5px;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory);
	background: rgba(82,0,0,.9); padding: 6px 12px;
}
.rhino-card-banner.is-resident { background: var(--acacia); color: #241C16; }
.rhino-card-img { aspect-ratio: 4/5; background-size: cover; background-position: center; }
.rhino-card-body { padding: 22px 24px 26px; }
.rhino-card-name { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 28px; line-height: 1; color: var(--ivory); }
.rhino-card-name em { font-style: italic; color: var(--acacia); font-weight: 500; }
.rhino-card-where {
	font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 9.5px; letter-spacing: 0.04em;
	text-transform: uppercase; color: var(--gold-soft); margin-top: 9px; white-space: nowrap;
}
.rhino-card-note { font-family: "Lora", serif; font-size: 14px; line-height: 1.55; color: var(--ivory); opacity: .82; margin-top: 12px; }

.wwmap {
	display: grid; grid-template-columns: .82fr 1.42fr; gap: clamp(34px, 5vw, 66px); align-items: center;
	border-top: 1px solid var(--rule); padding-top: 50px;
}
.wwmap-figs { display: flex; flex-direction: column; gap: 28px; }
.wwfig .n { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(44px, 4.8vw, 62px); line-height: .9; color: var(--acacia); }
.wwfig .l { font-family: "Lora", serif; font-size: 14.5px; line-height: 1.5; color: var(--ivory); opacity: .84; margin-top: 9px; max-width: 30ch; }
.wwmap-stage { position: relative; }
.ww-svg { width: 100%; height: auto; display: block; }
.ww-land { fill: rgba(243,242,237,.14); stroke: rgba(243,242,237,.30); stroke-width: .5; stroke-linejoin: round; }
.ww-arc { fill: none; stroke: var(--acacia); stroke-width: 1.6; stroke-dasharray: 5 6; opacity: .75; }
.ww-pins { position: absolute; inset: 0; pointer-events: none; }
.ww-pin-btn {
	position: absolute; transform: translate(-50%, -50%); width: 30px; height: 30px; padding: 0; margin: 0;
	border: 0; background: none; cursor: pointer; pointer-events: auto; display: grid; place-items: center; z-index: 2;
}
.ww-dot {
	position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--acacia);
	box-shadow: 0 0 0 3px rgba(212,162,76,.18); transition: transform .2s ease, box-shadow .2s ease;
}
.ww-pin-btn.is-home .ww-dot { background: var(--ivory); box-shadow: 0 0 0 3px rgba(212,162,76,.30); }
.ww-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.4px solid var(--acacia); opacity: 0; }
.ww-pin-btn:hover .ww-dot, .ww-pin-btn:focus-visible .ww-dot { transform: scale(1.45); box-shadow: 0 0 0 5px rgba(212,162,76,.26); }
.ww-pin-btn:focus-visible { outline: none; }
.ww-pin-btn:hover, .ww-pin-btn:focus-within { z-index: 9; }
.ww-tip {
	position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
	min-width: 150px; max-width: 230px; background: rgba(12,18,14,.96); border: 1px solid rgba(212,162,76,.32);
	padding: 9px 12px; text-align: left; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
	box-shadow: 0 14px 34px rgba(0,0,0,.42); z-index: 5;
}
.ww-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: rgba(12,18,14,.96); }
.ww-pin-btn:hover .ww-tip, .ww-pin-btn:focus-visible .ww-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.ww-tip-loc { display: block; font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory); line-height: 1.35; }
.ww-tip-note { display: block; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; color: var(--gold-soft); margin-top: 3px; line-height: 1.25; }
@media (prefers-reduced-motion: no-preference) { .ww-pin-btn .ww-dot::after { animation: ww-ping 2.8s ease-out infinite; } }
@keyframes ww-ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.7); opacity: 0; } }
.wwmap-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 26px; }
.wwsite { display: flex; gap: 11px; align-items: flex-start; }
.wwsite-pin { width: 9px; height: 9px; border-radius: 50%; background: var(--acacia); margin-top: 5px; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(212,162,76,.16); }
.wwsite.home .wwsite-pin { background: var(--ivory); box-shadow: 0 0 0 3px rgba(212,162,76,.28); }
.wwsite-loc { display: block; font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory); line-height: 1.4; }
.wwsite-rhino { display: block; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 17px; color: var(--gold-soft); margin-top: 3px; line-height: 1.2; }
.wwsite-amt { display: block; font-family: "Josefin Sans", sans-serif; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ivory); opacity: .6; margin-top: 4px; }
@media (max-width: 980px) {
	.wwmap { grid-template-columns: 1fr; gap: 34px; }
	.wwmap-figs { flex-direction: row; flex-wrap: wrap; gap: 28px 40px; }
	.wwmap-legend { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
	.rhinos-grid { grid-template-columns: 1fr; }
	.wwmap-legend { grid-template-columns: 1fr; }
}
.rcpt-cta { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--rule); display: flex; justify-content: center; }

/* ---- Sip Wine. Save Rhinos. (#community) ---- */
.v12-community { position: relative; overflow: hidden; color: var(--ivory); background: #1C1916; padding: clamp(64px, 8vw, 120px) 0; }
/* community-soiree.jpg is the prototype's exact backdrop (v12-reskin block);
   the earlier member-soiree substitute is retired (fidelity fix 2). */
.v12-community::before {
	content: ""; position: absolute; inset: 0;
	background: url('/app/themes/rhinory-v4/assets/images/community-soiree.jpg') center 35%/cover;
	filter: saturate(.95) contrast(1.03);
}
.v12-community::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(28,25,22,.93) 0%, rgba(28,25,22,.72) 46%, rgba(28,25,22,.34) 100%),
		linear-gradient(180deg, rgba(28,25,22,.5), rgba(28,25,22,0) 26%, rgba(28,25,22,0) 72%, rgba(28,25,22,.55));
}
/* Doubled selector: the inner is a .wrap wp:group, and .wrap.wp-block-group
   (0,2,0) re-widens max-width to 1280px — the prototype's 680px measure
   needs equal specificity + later source order to hold. */
.v12-community .v12-community-inner { position: relative; z-index: 2; max-width: 680px; }
.v12-community-inner > .eyebrow { margin: 0; }
.v12-community-inner h2 {
	font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(38px, 5vw, 68px);
	line-height: 1.0; letter-spacing: -0.01em; margin: 18px 0 0; color: var(--ivory);
}
.v12-community-inner h2 em { font-style: italic; color: var(--acacia); }
/* :not(.eyebrow) — the WP eyebrow is a wp:paragraph, and this Lora body
   rule (0,1,1) would otherwise beat .eyebrow's Josefin chip (0,1,0). The
   prototype's eyebrow is a <span> so its rule never had this collision. */
.v12-community-inner > p:not(.eyebrow) { font-family: "Lora", Georgia, serif; font-size: 18px; line-height: 1.62; color: var(--ivory); opacity: .92; margin: 22px 0 0; max-width: 54ch; }
.v12-community-inner > p strong { color: inherit; font-weight: 600; }
.v12-funfact {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; padding: 15px 0;
	border-top: 1px solid rgba(243,242,237,.2); border-bottom: 1px solid rgba(243,242,237,.2);
}
.v12-funfact .k { font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acacia); white-space: nowrap; }
.v12-funfact .f { font-family: "Lora", serif; font-size: 15px; font-style: italic; color: var(--ivory); opacity: .92; }
.v12-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.v12-path {
	display: flex; flex-direction: column; gap: 8px; padding: 24px; background: rgba(22,19,16,.66);
	backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); border: 1px solid rgba(243,242,237,.2);
	text-decoration: none; transition: background .25s, border-color .25s, transform .25s;
}
.v12-path:hover { transform: translateY(-4px); border-color: #520000; background: rgba(22,19,16,.66); }
.v12-path .k { font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acacia); }
.v12-path .t { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 24px; line-height: 1.05; color: var(--ivory); }
.v12-path .d { font-family: "Lora", Georgia, serif; font-size: 14.5px; line-height: 1.55; color: var(--ivory); opacity: .9; }
.v12-path .go { margin-top: 4px; font-family: "Josefin Sans", sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ivory); transition: color .2s; }
.v12-path:hover .go { color: var(--acacia); }
@media (max-width: 640px) { .v12-paths { grid-template-columns: 1fr; } }