/* theme.css — Triple Gold Rum components + sections.
 * References tokens.css only. No hardcoded hex. Matches DESIGN.md §5–7.
 * ============================================================ */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-3)); }
body {
	margin: 0;
	/* Single continuous, viewport-fixed atmosphere — never resets per section, so no seam. */
	background-color: var(--color-primary);
	background-image: var(--glow-page);
	background-attachment: fixed;
	background-repeat: no-repeat;
	color: var(--color-neutral-100);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-neutral-100);
	margin: 0 0 var(--space-3);
	letter-spacing: -0.01em;
}
p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

/* Site fade-in on mount (progressive; failsafe below) */
.site-main { animation: tgr-fade 300ms ease-out both; }
@keyframes tgr-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Accessibility ---------- */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px; height: 1px;
	overflow: hidden; padding: 0; margin: -1px;
	word-wrap: normal !important;
}
.skip-link {
	position: fixed; top: 8px; left: 8px;
	z-index: 10001;
	background: var(--color-accent);
	color: var(--color-neutral-900);
	padding: 10px 18px; border-radius: var(--radius);
	transform: translateY(-200%);
	transition: transform var(--dur) var(--ease);
	font-family: var(--font-body); font-weight: 500;
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--color-accent-light);
	outline-offset: 3px;
	border-radius: var(--radius);
}

/* ---------- Layout scaffolding ---------- */
.section {
	position: relative;
	padding-block: clamp(var(--space-6), 3vw + var(--space-4), var(--space-8)); /* dynamic rhythm */
	/* Transparent — the page's continuous fixed atmosphere shows through. Relief sections add a
	   local glow pool below; both fade to nothing, so there is never a hard edge at a boundary. */
	background-color: transparent;
}
/* Film-grain layer behind content — keeps large dark fields from reading flat. */
.section::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: var(--grain);
	background-size: 140px 140px;
	opacity: 0.05; mix-blend-mode: soft-light; pointer-events: none;
}
.section > * { position: relative; z-index: 1; }
.section--tight { padding-block: var(--space-6); }
.section--dark { background-color: transparent; }

/* Relief sections are NOT solid blocks — they share the transparent page and carry a large soft
   ambient glow that fades to transparent before the edge, so there is no seam or line
   anywhere (matches the reference). */
.section--panel, .section--mahogany { background-color: transparent; }
.section--panel { background-image: var(--glow-panel); }
.section--mahogany { background-image: var(--glow-amber); }
.section--center { text-align: center; }

.section__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.section__inner--content { max-width: var(--container-content); }
.section__inner--narrow { max-width: var(--container-narrow); }

/* ---------- Eyebrow / overline (canonical, wins over section p) ---------- */
.eyebrow {
	font-family: var(--font-body) !important;
	font-size: var(--text-overline) !important;
	font-weight: 600 !important;
	letter-spacing: 0.15em !important;
	text-transform: uppercase !important;
	color: var(--color-accent) !important;
	margin: 0 0 var(--space-2) !important;
	line-height: 1.4 !important;
}
.section--panel .eyebrow { color: var(--color-antique) !important; }

/* Ornamental gold rule (DESIGN §5.8) */
.rule-gold {
	display: block;
	width: 80px; height: 1px;
	background: var(--color-accent);
	border: 0; margin: 0 0 var(--space-3);
}
.section--center .rule-gold { margin-inline: auto; }

/* ---------- Typographic helpers ---------- */
.section__title { line-height: var(--lh-h2); letter-spacing: -0.018em; text-wrap: balance; }
.section__lede {
	font-size: var(--text-body-lg);
	line-height: var(--lh-body-lg);
	color: var(--color-neutral-300);
	max-width: 68ch;
	text-wrap: pretty;
}
.pull-quote {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--text-h2);
	line-height: var(--lh-h2);
	color: var(--color-neutral-100);
}
.prose { max-width: 68ch; }
.prose p { color: var(--color-neutral-300); text-wrap: pretty; }

/* ---------- Buttons (DESIGN §5.1) ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.wp-block-buttons.is-content-justification-center { justify-content: center; }
.btn > .wp-block-button__link,
a.btn__link {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--text-ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 15px 36px;
	min-height: 44px; /* WCAG 2.5.5 min touch target */
	border-radius: var(--radius);
	border: 1px solid var(--color-accent);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 100ms var(--ease), border-color var(--dur) var(--ease);
	cursor: pointer;
}
.btn--primary > .wp-block-button__link,
a.btn--primary {
	background: var(--color-accent);
	color: var(--color-neutral-900);
}
@media (hover: hover) and (pointer: fine) {
	.btn--primary > .wp-block-button__link:hover,
	a.btn--primary:hover { background: var(--color-accent-light); border-color: var(--color-accent-light); color: var(--color-neutral-900); }
}
.btn--primary > .wp-block-button__link:active,
a.btn--primary:active { background: var(--color-old-gold); border-color: var(--color-old-gold); transform: scale(0.97); }

.btn--ghost > .wp-block-button__link,
a.btn--ghost {
	background: transparent;
	color: var(--color-neutral-100);
}
@media (hover: hover) and (pointer: fine) {
	.btn--ghost > .wp-block-button__link:hover,
	a.btn--ghost:hover { background: var(--gold-tint-12); border-color: var(--color-accent-light); }
}
/* Press feedback — every pressable button, not just primary. */
.btn--ghost > .wp-block-button__link:active,
a.btn--ghost:active { transform: scale(0.97); }
/* Pending / disabled (form submit) */
.btn > .wp-block-button__link:disabled,
.btn > .wp-block-button__link[aria-busy="true"] { opacity: 0.6; cursor: default; pointer-events: none; }

/* Text link button */
.link-arrow {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--text-ui);
	letter-spacing: 0.04em;
	color: var(--color-accent);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
	.link-arrow:hover { border-bottom-color: var(--color-metallic); color: var(--color-metallic); transform: translateX(3px); }
}

/* ---------- Header (DESIGN §5.2) ---------- */
.site-header {
	position: fixed; inset: 0 0 auto 0;
	z-index: 1000;
	height: var(--header-h);
	background: var(--header-bg);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--gold-line-25);
}
.site-header__bar {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	height: var(--header-h);
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img,
.site-header .custom-logo { height: 52px; width: auto; display: block; }
.site-main { padding-top: var(--header-h); }

.site-nav { display: flex; gap: var(--space-4); align-items: center; }
.site-nav__link {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-neutral-300);
	position: relative;
	padding: 6px 0;
	transition: color var(--dur-fast) var(--ease);
}
.site-nav__link.is-current { color: var(--color-accent); }
.site-nav__link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: var(--color-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform 220ms var(--ease-out), background-color var(--dur) var(--ease);
}
.site-nav__link.is-current::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
	.site-nav__link:hover { color: var(--color-metallic); }
	.site-nav__link:hover::after { transform: scaleX(1); background: var(--color-metallic); }
}

/* Hamburger */
.nav-toggle {
	display: none;
	background: none; border: 0; cursor: pointer;
	width: 44px; height: 44px; padding: 10px;
	flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle__bar { display: block; height: 2px; width: 24px; background: var(--color-accent); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-scrim {
	position: fixed; inset: 0; z-index: 998;
	background: rgba(15, 11, 7, 0.6); opacity: 0;
	transition: opacity var(--dur-card) var(--ease);
	pointer-events: none;
}

@media (max-width: 899px) {
	html { scroll-padding-top: calc(var(--header-h-mobile) + var(--space-3)); }
	.site-header { height: var(--header-h-mobile); }
	.site-header__bar { height: var(--header-h-mobile); }
	.site-main { padding-top: var(--header-h-mobile); }
	.nav-toggle { display: flex; }
	.site-nav {
		position: fixed; top: 0; right: 0; z-index: 999;
		height: 100vh; width: min(80vw, 320px);
		flex-direction: column; align-items: flex-start; gap: var(--space-4);
		background: var(--color-primary);
		padding: calc(var(--header-h-mobile) + var(--space-4)) var(--space-5) var(--space-5);
		transform: translateX(100%);
		transition: transform 280ms var(--ease-drawer);
		border-left: 1px solid var(--gold-line-25);
	}
	.site-nav__link { font-size: var(--text-h4); letter-spacing: 0.08em; }
	body.nav-open .site-nav { transform: translateX(0); }
	body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
	body.nav-open { overflow: hidden; }
	body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
	body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Hero — editorial, full-bleed ---------- */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex; align-items: flex-end;
	padding-block: var(--space-8) var(--space-7);
	overflow: hidden;
	isolation: isolate;
	margin-top: calc(-1 * var(--header-h)); /* hero sits under fixed header */
}
.site-main > .hero:first-child { margin-top: calc(-1 * var(--header-h)); }

/* Full-bleed media — escape WordPress constrained-layout max-width cap. */
.hero__media {
	position: absolute; inset: 0; z-index: -1;
	max-width: none !important; width: 100% !important; margin: 0 !important;
}
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Layered atmospheric scrim: warm-gold key light top-right, diagonal darkening toward the
   lower-left text, and a bottom bleed into the page. Not a flat overlay. */
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(115% 85% at 80% 16%, rgba(245, 203, 76, 0.12), transparent 52%),
		linear-gradient(102deg, rgba(3,3,3,0.88) 0%, rgba(3,3,3,0.58) 40%, rgba(3,3,3,0.18) 70%, rgba(3,3,3,0.40) 100%),
		linear-gradient(to bottom, transparent 52%, var(--color-primary) 100%);
}

.hero__inner {
	position: relative; z-index: 2; width: 100%;
	max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter);
}
/* Staggered entrance on load (above the fold — animate immediately, not on scroll). */
.hero__inner > * { animation: tgr-rise var(--dur-slow) var(--ease-out) both; }
.hero__inner > :nth-child(1) { animation-delay: 60ms; }
.hero__inner > :nth-child(2) { animation-delay: 160ms; }
.hero__inner > :nth-child(3) { animation-delay: 260ms; }
.hero__inner > :nth-child(4) { animation-delay: 360ms; }
@keyframes tgr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Editorial overline: leading gold tick before the eyebrow. */
.hero .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero .eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--color-accent); }

.hero__title {
	font-size: var(--text-display);
	font-weight: 900;
	line-height: var(--lh-display);
	letter-spacing: -0.025em;
	color: var(--color-off-white);
	max-width: 15ch;
	margin-bottom: var(--space-3);
	text-wrap: balance;
}
.hero__lede {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--text-body-lg);
	color: var(--color-warm-grey);
	max-width: 44ch;
	margin-bottom: var(--space-5);
	text-wrap: pretty;
}
.hero .wp-block-buttons { margin-top: var(--space-5); }

/* Scroll cue — full hero only. */
.hero:not(.hero--short):not(.hero--products)::after {
	content: "Scroll";
	position: absolute; right: var(--gutter); bottom: var(--space-5); z-index: 2;
	font-family: var(--font-body); font-size: var(--text-overline);
	letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-warm-grey);
	padding-bottom: 34px;
	background: linear-gradient(var(--color-accent), transparent) right bottom / 1px 26px no-repeat;
	opacity: 0.85; animation: tgr-cue 2.4s var(--ease-in-out) infinite;
}
@keyframes tgr-cue { 0%,100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 0.95; } }

.hero--short { min-height: 62vh; align-items: center; }
.hero--products { min-height: 52vh; align-items: center; }
.hero--products .hero__title, .hero--short .hero__title { font-size: var(--text-h1); max-width: 20ch; }

/* About hero — full-bleed gold-wave artwork. A left-weighted scrim keeps the headline legible
   over the dark left third while the gold waves on the right stay bright; the bottom bleeds into
   the page (var(--color-primary)) so there is no seam into the section below. */
.hero--about {
	/* Show the FULL 1920×500 artwork: match the hero box to the image ratio so object-fit:cover
	   fills the width edge-to-edge with no crop. Overrides the 100vh/62vh min-heights above. */
	min-height: 0;
	aspect-ratio: 1920 / 500;
	align-items: center;
	padding-block: var(--header-h) var(--space-3);
}
/* Lighter scrim than the default hero — left third darkened for legibility, gold waves on the
   right stay bright, bottom bleeds into the page so there is no seam into the section below. */
.hero--about .hero__media::after {
	background:
		linear-gradient(90deg, rgba(3,3,3,0.72) 0%, rgba(3,3,3,0.32) 36%, rgba(3,3,3,0) 62%),
		linear-gradient(to bottom, transparent 66%, var(--color-primary) 100%);
}
.hero--about .hero__title {
	/* Same Playfair display face as every other hero title — consistent across the site.
	   Smaller than a full hero so the whole banner artwork stays visible behind it. */
	font-size: clamp(1.6rem, 0.6rem + 3.1vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	max-width: 26ch;
}
/* "Jamaican" — amber-gold Playfair italic accent inside the headline. */
.hero--about .hero__title em {
	font-style: italic;
	font-weight: 500;
	color: var(--color-jamaica-gold);
}
@media (max-width: 767px) {
	/* Ultrawide art can't show in full on a phone — fall back to a taller crop focused on the
	   right-hand gold waves, with an even top-to-bottom scrim for legibility. */
	.hero--about {
		aspect-ratio: auto;
		min-height: 60vh;
		padding-block: var(--header-h) var(--space-5);
	}
	.hero--about .hero__media img { object-position: 72% center; }
	.hero--about .hero__media::after {
		background:
			linear-gradient(180deg, rgba(3,3,3,0.45) 0%, rgba(3,3,3,0.78) 60%),
			linear-gradient(to bottom, transparent 58%, var(--color-primary) 100%);
	}
}

@media (max-width: 767px) {
	.hero { min-height: 82vh; text-align: center; align-items: center; }
	.hero__title, .hero__lede { margin-inline: auto; }
	.hero .eyebrow { justify-content: center; }
	.hero .wp-block-buttons { justify-content: center; }
	.hero:not(.hero--short):not(.hero--products)::after { display: none; }
}

/* ---------- Split hero (copy left · bottle trio right · swappable banner bg) ---------- */
.hero--split {
	/* Show the FULL 1920×800 banner: match the hero box to the image ratio so object-fit:cover
	   fills the width edge-to-edge with no crop. Overrides the base 100vh min-height. */
	align-items: center;
	min-height: 0;
	aspect-ratio: 1920 / 800;
	padding-block: var(--header-h) var(--space-4);
}
.hero--split::after { display: none; } /* no scroll cue on the banner hero */
/* Left-weighted scrim: dark enough under the text, light on the right so the gold ribbons, dot
   texture and bottles read. Bottom bleeds into the page so there is no seam into the next section. */
.hero--split .hero__media::after {
	background:
		linear-gradient(90deg, rgba(3,3,3,0.78) 0%, rgba(3,3,3,0.46) 34%, rgba(3,3,3,0.12) 60%, rgba(3,3,3,0) 82%),
		linear-gradient(to bottom, transparent 74%, var(--color-primary) 100%);
}
.hero__grid {
	display: grid; grid-template-columns: 1.5fr 1fr;
	align-items: center; gap: var(--space-7); width: 100%;
}
.hero__content { max-width: 60ch; }
.hero__content > * { animation: tgr-rise var(--dur-slow) var(--ease-out) both; }
.hero__content > :nth-child(1) { animation-delay: 60ms; }
.hero__content > :nth-child(2) { animation-delay: 160ms; }
.hero__content > :nth-child(3) { animation-delay: 260ms; }
.hero__content > :nth-child(4) { animation-delay: 360ms; }
.hero--split .hero__title { font-size: clamp(1.75rem, 0.8rem + 2.9vw, 3rem); line-height: 1.08; max-width: 20ch; margin-bottom: var(--space-3); }
.hero--split .hero__lede { max-width: 46ch; }
.hero--split .hero__title em { color: var(--color-accent); font-style: italic; font-weight: 700; }
.hero__bottles { margin: 0; justify-self: center; align-self: center; }
.hero__bottles img {
	display: block; width: 100%; max-width: 480px; height: auto;
	filter: drop-shadow(0 34px 70px rgba(0, 0, 0, 0.62));
	animation: tgr-rise var(--dur-slow) var(--ease-out) 320ms both;
}
/* Desktop: ground the bottles + Chris cutout to the bottom edge of the hero and
   scale it up. Height-driven (40vw ≤ the hero's 41.6vw box) so it always kisses
   the bottom without overflowing the top on narrower desktops; overflows the
   narrow right column sideways, which is fine — the hero is full-bleed. */
@media (min-width: 901px) {
	.hero--split { padding-bottom: 0; }
	/* Copy stays vertically centered; only the cutout drops to the bottom edge. */
	.hero__bottles { align-self: end; justify-self: center; }
	.hero__bottles img { width: auto; max-width: none; height: clamp(340px, 40vw, 620px); }
}
@media (max-width: 900px) {
	.hero--split { aspect-ratio: auto; min-height: auto; padding-block: var(--space-8) var(--space-7); text-align: center; }
	.hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
	.hero__content { max-width: 46ch; margin-inline: auto; }
	.hero--split .hero__title { margin-inline: auto; }
	.hero--split .eyebrow { justify-content: center; }
	.hero--split .wp-block-buttons { justify-content: center; }
	.hero__bottles { justify-self: center; order: 2; }
	.hero__bottles img { max-width: 360px; margin-inline: auto; }
	.hero--split .hero__media::after {
		background:
			linear-gradient(to bottom, rgba(3, 3, 3, 0.58), rgba(3, 3, 3, 0.30) 42%, rgba(3, 3, 3, 0.78)),
			linear-gradient(to bottom, transparent 72%, var(--color-primary) 100%);
	}
}

/* ---------- Positioning strip ---------- */
.positioning {
	text-align: center;
	padding-block: var(--space-7);
}
.positioning__quote {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-h3);
	line-height: 1.4;
	color: var(--color-neutral-100);
	max-width: 40ch; margin-inline: auto;
}
.positioning__quote::before {
	content: "\201C";
	display: block;
	font-family: var(--font-display);
	font-size: 5rem; line-height: 0.5;
	color: var(--color-accent); opacity: 0.55;
	margin-bottom: var(--space-3);
}

/* ---------- Product cards (DESIGN §5.5) ---------- */
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
	margin-top: var(--space-5);
}
.product-card {
	background: var(--color-panel);
	border: 1px solid var(--gold-line-25);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform var(--dur-card) var(--ease-out), border-color var(--dur-card) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.card-grid.is-visible .product-card:hover,
	.product-card:hover { transform: translateY(-4px); border-color: var(--color-metallic); }
}
.product-card__media { aspect-ratio: 3 / 4; background: var(--color-primary); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 640ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.product-card:hover .product-card__media img { transform: scale(1.045); }
}
/* Staggered reveal of the three cards. */
.card-grid .product-card { opacity: 0; transform: translateY(16px); transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.card-grid.is-visible .product-card, .no-js .card-grid .product-card { opacity: 1; transform: none; }
.card-grid.is-visible .product-card:nth-child(2) { transition-delay: 90ms; }
.card-grid.is-visible .product-card:nth-child(3) { transition-delay: 180ms; }
.product-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.product-card__name { font-size: var(--text-h3); margin: 0; }
.product-card__desc { font-size: var(--text-body-sm); color: var(--color-neutral-300); margin: var(--space-1) 0 var(--space-3); }
.product-card__specs {
	margin-top: auto;
	font-size: var(--text-body-sm); font-weight: 500;
	color: var(--color-accent);
	letter-spacing: 0.02em;
}
.product-card__link { margin-top: var(--space-3); }

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

/* ---------- Split layouts (story / product detail / about) ---------- */
.split {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--space-6);
	align-items: center;
}
.split--even { grid-template-columns: 1fr 1fr; }
.split--reverse .split__media { order: 2; }
.split__media img { width: 100%; border-radius: var(--radius); }
.split__body { max-width: 56ch; }
@media (max-width: 899px) {
	.split, .split--even { grid-template-columns: 1fr; gap: var(--space-4); }
	.split--reverse .split__media { order: 0; }
}

/* Product detail section */
.product-detail { min-height: 80vh; display: flex; align-items: center; }
.product-detail .split__media img { aspect-ratio: 3/4; object-fit: cover; max-width: 440px; margin-inline: auto; }
.product-detail__specs {
	display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid var(--gold-line-25);
	font-size: var(--text-body-sm); font-weight: 500; color: var(--color-accent);
	list-style: none; padding-inline: 0;
}
.product-detail__specs li { margin: 0; }
.product-detail__specs .k { color: var(--color-neutral-300); font-weight: 400; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-overline); }
.product-detail__tasting { margin-top: var(--space-3); font-size: var(--text-body-sm); color: var(--color-neutral-300); }
.product-detail__tasting .k { color: var(--color-accent); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--text-overline); display: block; margin-bottom: 4px; }

/* Editorial index — outlined section numeral, top-right watermark. */
body { counter-reset: rum; }
.product-detail { counter-increment: rum; }
.product-detail > .section__inner { position: relative; }
.product-detail > .section__inner::after {
	content: counter(rum, decimal-leading-zero);
	position: absolute; top: -0.15em; right: 0; z-index: -1;
	font-family: var(--font-display); font-weight: 900; line-height: 1;
	font-size: clamp(3.5rem, 9vw, 7.5rem);
	color: transparent; -webkit-text-stroke: 1px var(--gold-line-25);
	opacity: 0.7; pointer-events: none;
}
@media (max-width: 899px) { .product-detail > .section__inner::after { display: none; } }

/* ---------- Craft & values (3 blocks) ---------- */
.values {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
	margin-top: var(--space-5);
	align-items: start; /* top-align so rules + headings line up despite unequal copy length */
}
/* WP flow-layout (is-layout-flow) injects margin-block-start on every child after the first;
   inside a grid that offsets 2nd/3rd cells and breaks row alignment. Zero it on grid children. */
.values > *, .split > *, .contact-split > * { margin-block-start: 0; }
.values__item h3 { font-size: var(--text-h4); }
.values__item p { font-size: var(--text-body-sm); color: var(--color-neutral-300); }
@media (max-width: 899px) { .values { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- Serve list ---------- */
.serve-list {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--space-3); margin-top: var(--space-5); padding: 0; list-style: none;
}
.serve-list__item {
	display: inline-flex; align-items: center; gap: var(--space-2);
	border: 1px solid var(--gold-line-25); border-radius: 999px;
	background: var(--gold-tint-12);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-body); font-size: var(--text-body-sm);
	font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--color-neutral-300);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease);
}
/* Leading gold tick — echoes the .eyebrow / rule-gold accents. */
.serve-list__item::before {
	content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent);
}
@media (hover: hover) and (pointer: fine) {
	.serve-list__item:hover { color: var(--color-off-white); border-color: var(--color-accent); transform: translateY(-2px); }
}
@media (max-width: 599px) {
	.serve-list { gap: var(--space-2); }
	.serve-list__item { padding: var(--space-2) var(--space-3); letter-spacing: 0.1em; }
}

/* ---------- FAQ accordions (DESIGN GEO §6.2) ---------- */
.faq__title { font-size: var(--text-h2); }
.faq { max-width: var(--container-content); margin-inline: auto; margin-top: var(--space-6); text-align: left; }
.faq__item { border-top: 1px solid var(--gold-line-25); }
.faq__item:last-child { border-bottom: 1px solid var(--gold-line-25); }
.faq__q {
	list-style: none; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
	padding: var(--space-4) 0;
	font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.25;
	color: var(--color-off-white);
	transition: color var(--dur) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq__item:hover > .faq__q { color: var(--color-metallic); } }
.faq__item[open] > .faq__q { color: var(--color-metallic); }
.faq__icon { position: relative; flex: none; width: 22px; height: 22px; }
.faq__icon::before, .faq__icon::after {
	content: ""; position: absolute; left: 50%; top: 50%; background: var(--color-accent);
	transition: transform var(--dur-card) var(--ease-out), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq__icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__item[open] .faq__icon::before { background: var(--color-metallic); }
.faq__a { overflow: hidden; transition: height 320ms var(--ease-out); }
.faq__a p { color: var(--color-warm-grey); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); max-width: 70ch; margin: 0; padding-bottom: var(--space-4); }

/* ---------- CTA banner ---------- */
.cta-banner { text-align: center; padding-block: var(--space-7); }
.cta-banner__title { font-size: var(--text-h2); }
.cta-banner .wp-block-buttons { justify-content: center; margin-top: var(--space-4); }

/* ---------- Contact (DESIGN §5.6, §6.5) ---------- */
.contact-split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(var(--space-5), 5vw, var(--space-7)); align-items: start; }
@media (max-width: 899px) { .contact-split { grid-template-columns: 1fr; gap: var(--space-6); } }
.contact-split__lede { color: var(--color-warm-grey); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); max-width: 44ch; margin-bottom: var(--space-4); }
.contact-split__note { font-size: var(--text-overline); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-old-gold); margin-top: var(--space-4); }

.contact-details { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.contact-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--gold-line-25); }
.contact-row:last-child { border-bottom: 1px solid var(--gold-line-25); }
.contact-row__label { font-size: var(--text-overline); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); flex: none; }
.contact-row__val { color: var(--color-off-white); font-size: var(--text-body); text-align: right; }
.contact-row__val a { color: var(--color-off-white); transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) { .contact-row__val a:hover { color: var(--color-metallic); } }
.contact-row__sep { color: var(--gold-line-25); }

/* Form as a designed card (borrows the modal panel aesthetic). */
.contact-split__form { background: var(--color-panel); border: 1px solid var(--gold-line-25); border-radius: var(--radius); padding: clamp(var(--space-4), 4vw, var(--space-6)); }
.contact-split__form .eyebrow { margin-bottom: var(--space-3) !important; }
.form__grid { margin-bottom: var(--space-3); }
.form__grid .form__row { margin-bottom: 0; }
.form__grid--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 479px) { .form__grid--even { grid-template-columns: 1fr; } }

.form { max-width: var(--container-narrow); }
.form__row { margin-bottom: var(--space-3); }
.form__label { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-ui); color: var(--color-neutral-300); margin-bottom: 6px; }
.form__control {
	width: 100%;
	background: var(--color-panel);
	color: var(--color-off-white);
	border: 1px solid var(--gold-line-25);
	border-radius: var(--radius);
	padding: 14px 16px;
	font-family: var(--font-body); font-size: var(--text-body);
	transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.form__control::placeholder { color: var(--color-silver); }
.form__control:focus { outline: none; border-color: var(--color-metallic); box-shadow: 0 0 0 3px var(--gold-focus-25); }
/* Native select arrow tint on dark */
select.form__control { color: var(--color-off-white); }
textarea.form__control { min-height: 140px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { color: var(--color-error); font-size: var(--text-body-sm); margin-top: 6px; }
.form__notice { padding: var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-4); font-size: var(--text-body-sm); }
.form__notice--ok { background: rgba(200,150,62,0.14); border: 1px solid var(--color-accent); color: var(--color-neutral-100); }
.form__notice--error { background: rgba(139,26,26,0.16); border: 1px solid var(--color-error); color: var(--color-neutral-100); }
@media (max-width: 639px) { .form .btn { display: block; } .form .btn > .wp-block-button__link, .form button.btn__link { width: 100%; } }

/* ---------- Footer — streamlined for a small site ---------- */
.site-footer { background: var(--color-charcoal); border-top: 1px solid var(--color-accent); }
.site-footer__inner { max-width: var(--container-max); margin-inline: auto; padding: var(--space-5) var(--gutter); }
.site-footer__top { gap: var(--space-5); }
.site-footer__logo img { height: 98px; width: auto; display: block; filter: brightness(0.92); }
.site-footer__meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.footer-menu { display: flex; gap: var(--space-4); margin: 0; }
.footer-menu a { color: var(--color-warm-grey); font-size: var(--text-body-sm); letter-spacing: 0.02em; transition: color var(--dur) var(--ease); }
.footer-social { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.footer-social a { color: var(--color-silver); display: inline-flex; transition: color var(--dur) var(--ease); }
@media (hover: hover) and (pointer: fine) {
	.footer-menu a:hover { color: var(--color-accent); }
	.footer-social a:hover { color: var(--color-accent); }
}
.site-footer__base { gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(214, 201, 180, 0.1); }
.site-footer__responsible { font-family: var(--font-body); font-weight: 500; font-size: var(--text-overline); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin: 0; }
.site-footer__responsible a { color: var(--color-accent); border-bottom: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) { .site-footer__responsible a:hover { border-bottom-color: var(--color-accent); } }
.site-footer__legal { font-size: var(--text-legal); color: var(--color-silver); margin: 0; }
@media (max-width: 767px) {
	.site-footer__top { flex-direction: column; text-align: center; gap: var(--space-4); }
	.site-footer__meta { flex-direction: column; gap: var(--space-3); }
	.footer-social { justify-content: center; }
	.site-footer__base { flex-direction: column; text-align: center; }
}

/* ---------- Age gate (DESIGN §5.3) ---------- */
.age-gate {
	position: fixed; inset: 0; z-index: 9999;
	background: var(--color-primary);
	display: flex; align-items: center; justify-content: center;
	padding: var(--gutter);
	transition: opacity var(--dur-slow) var(--ease);
}
.age-gate[hidden] { display: none; }
.age-gate.is-dismissing { opacity: 0; pointer-events: none; }
.age-gate__panel { max-width: var(--container-narrow); text-align: center; }
.age-gate__logo { max-width: 240px; margin: 0 auto var(--space-5); }
.age-gate__logo img { margin-inline: auto; }
.age-gate__rule { width: 100%; max-width: 320px; height: 1px; background: var(--color-accent); border: 0; margin: 0 auto var(--space-4); }
.age-gate__prompt { font-family: var(--font-display); font-style: italic; font-size: var(--text-h2); color: var(--color-neutral-100); margin-bottom: var(--space-3); }
.age-gate__sub { font-size: var(--text-body-sm); color: var(--color-neutral-300); max-width: 46ch; margin: 0 auto var(--space-5); }
.age-gate__actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.age-gate__legal { font-size: var(--text-legal); color: var(--color-neutral-700); margin-top: var(--space-5); }
.age-gate__remember { display: inline-flex; gap: 8px; align-items: center; font-size: var(--text-body-sm); color: var(--color-neutral-300); margin-top: var(--space-4); cursor: pointer; }

/* ---------- Underage page ---------- */
.underage { background: var(--color-white); color: var(--color-neutral-900); min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--gutter); }
.underage h1 { color: var(--color-neutral-900); font-size: var(--text-h2); }
.underage p { color: var(--color-neutral-700); max-width: 46ch; margin-inline: auto; }

/* ---------- Maintenance mode — branded full-screen "Back Soon" ---------- */
.maintenance {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 100vh; min-height: 100svh;
	display: flex; align-items: center; justify-content: center; text-align: center;
	padding: var(--gutter);
	background: var(--color-primary);
}
.maintenance__bg { position: absolute; inset: 0; z-index: -1; }
.maintenance__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dark scrim over the gold-wave art so the logo + copy stay legible. */
.maintenance__bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		radial-gradient(120% 90% at 50% 32%, rgba(3,3,3,0.45), rgba(3,3,3,0.82) 72%),
		linear-gradient(to bottom, rgba(3,3,3,0.35), rgba(3,3,3,0.78));
}
.maintenance__inner { position: relative; z-index: 1; max-width: 44ch; margin-inline: auto; }
.maintenance__inner > * { animation: tgr-rise var(--dur-slow) var(--ease-out) both; }
.maintenance__inner > :nth-child(2) { animation-delay: 80ms; }
.maintenance__inner > :nth-child(3) { animation-delay: 160ms; }
.maintenance__inner > :nth-child(4) { animation-delay: 240ms; }
.maintenance__inner > :nth-child(5) { animation-delay: 320ms; }
.maintenance__logo { height: 96px; width: auto; display: block; margin: 0 auto var(--space-5); }
.maintenance .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: center; }
.maintenance .eyebrow::before, .maintenance .eyebrow::after { content: ""; width: 32px; height: 1px; background: var(--color-accent); }
.maintenance__title { font-size: var(--text-h1); color: var(--color-off-white); margin: var(--space-2) 0 var(--space-3); text-wrap: balance; }
.maintenance__lede { color: var(--color-neutral-300); font-size: var(--text-body-lg); line-height: var(--lh-body-lg); max-width: 42ch; margin-inline: auto; text-wrap: pretty; }
.maintenance__contact { margin-top: var(--space-5); font-size: var(--text-body-sm); color: var(--color-silver); }
.maintenance__contact a { color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .maintenance__contact a:hover { color: var(--color-metallic); } }

/* ---------- Reserve a Bottle modal ---------- */
.product-detail__cta { margin-top: var(--space-4); }
body.modal-open { overflow: hidden; }
/* Transition-based show/hide so the modal has a real EXIT animation (not an instant
   display:none). visibility keeps it non-interactive while closed; opacity/transform
   animate on enter (260ms) and, faster, on exit (180ms) — asymmetric per Emil. */
.modal { position: fixed; inset: 0; z-index: 9998; visibility: hidden; }
.modal[data-open="true"], .modal[data-closing="true"] { visibility: visible; }
.modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(3, 3, 3, 0.72);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	opacity: 0; transition: opacity 200ms var(--ease-out);
}
.modal[data-open="true"] .modal__backdrop { opacity: 1; }
.modal[data-closing="true"] .modal__backdrop { opacity: 0; transition: opacity 160ms var(--ease-out); }
.modal__panel {
	position: relative; z-index: 1;
	width: min(560px, calc(100vw - 2 * var(--gutter)));
	margin: 8vh auto 5vh; max-height: 86vh; overflow-y: auto;
	background: var(--color-panel);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	padding: clamp(var(--space-4), 4vw, var(--space-6));
	transform-origin: center; /* modals stay centered, not trigger-anchored */
	opacity: 0; transform: translateY(8px) scale(0.96);
	transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.modal[data-open="true"] .modal__panel { opacity: 1; transform: none; }
.modal[data-closing="true"] .modal__panel {
	opacity: 0; transform: translateY(6px) scale(0.98);
	transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.modal__close {
	position: absolute; top: 10px; right: 16px;
	background: none; border: 0; color: var(--color-warm-grey);
	font-size: 28px; line-height: 1; cursor: pointer;
	width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
	transition: color var(--dur) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .modal__close:hover { color: var(--color-metallic); } }
.modal__title { font-size: var(--text-h3); margin: var(--space-1) 0 var(--space-2); }
.modal__lede { color: var(--color-warm-grey); font-size: var(--text-body-sm); line-height: var(--lh-body); margin-bottom: var(--space-4); max-width: 46ch; }
.modal .form { max-width: none; }
.form__grid { display: grid; grid-template-columns: 1fr 120px; gap: var(--space-3); }
@media (max-width: 479px) { .form__grid { grid-template-columns: 1fr; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.reveal.is-visible, .no-js .reveal { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.reveal { opacity: 1 !important; transform: none !important; }
	.age-gate { transition: none; }
}