/**
 * Wyne — main stylesheet.
 *
 * Lifted from the original Index.html wireframe and adapted as a theme stylesheet.
 */

:root {
	--ink: #1a1a1a;
	--ink-soft: #4a4a4a;
	--ink-faint: #888;
	--paper: #ffffff;
	--paper-2: #ffffff;
	--line: #2b2b2b;
	--accent-red: #c2362e;
	--accent-blue: #2f5fb3;
	--accent-pink: #c64a8a;
	--accent-green: #4a7a3a;
	--accent-amber: #c98a2b;
	--accent-purple: #6a4a8a;

	/* Typography — Signature Edition wireframe stack.
	   Inter for sans (weights 200..900 loaded from Google Fonts), Cormorant
	   Garamond for serif headings (300/400/500, italic + roman). */
	--sans:  "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	/* Legacy variable names kept so existing rules don't break.
	   --hand-loose / --hand-script default to the serif so headings,
	   "scripty" tags, and decorative labels render in Cormorant. */
	--hand:        var(--sans);
	--hand-loose:  var(--serif);
	--hand-script: var(--serif);
}

/* Body — Inter at weight 300 to match the wireframe. */
html, body {
	font-family: var(--sans);
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings — Cormorant Garamond italic 300 across the site. Display sizes
   set per-component below; this rule provides the typeface defaults. */
h1, h2, h3, h4, h5, h6,
.doc-header h1,
.section h2,
.step-circle .n,
.panel-head h3,
.sub-card h3,
.hb-feature .copy h3,
.site-footer-logo,
.site-footer-col h4,
.poll-card .artist,
.hero-overlay-text h3,
.hero-copy h3 {
	font-family: var(--serif);
	font-weight: 300;
	font-style: italic;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--wf-green, var(--ink));
}

/* Small caps / eyebrow / marker style */
.section .tag,
.kicker,
.corner-tag,
.notif-strip .marker,
.tab .num,
.steps-legend,
.menu-bar .nav,
.menu-bar .nav a {
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* Buttons read as bold uppercase grotesque */
.btn,
.nav-btn,
.vote-btn,
.sidecart-checkout {
	font-weight: 600;
	letter-spacing: 0.02em;
}

* { box-sizing: border-box; }
html, body {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: var(--ink);
	font-family: var(--hand);
}
body {
	min-height: 100vh;
	background-image: none;
}

/* Paper grid disabled — keep selector for backwards compatibility but hide. */
.paper-grid {
	display: none !important;
}

.app {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	padding: 28px 32px 80px;
}

/* Full-width header strips with inner cap at 1400px ---------------------- */

/* Top notification strip — pure black bar with white text */
.notif-bar-outer {
	position: relative;
	z-index: 2;
	width: 100%;
	background: #000000;
	color: #ffffff;
}
.notif-bar-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
}
.notif-bar-inner .notif-strip {
	background: transparent !important;
	color: #ffffff;
	border-bottom: none;
	padding: 10px 0;
	overflow: hidden;
	position: relative;
}
.notif-bar-inner .notif-strip .marker {
	color: #ffffff;
	opacity: 0.65;
}
.notif-bar-inner .notif-strip .marquee {
	color: #ffffff;
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

/* Marquee track — scrolls horizontally; the messages list is duplicated
   in markup so transform: translateX(-50%) loops seamlessly. */
.notif-bar-inner .marquee-track {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	width: max-content;
	will-change: transform;
	animation: wyne-marquee 40s linear infinite;
}
.notif-bar-inner .marquee-item {
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: #ffffff;
	white-space: nowrap;
}
.notif-bar-inner .marquee-sep {
	color: rgba(255, 255, 255, 0.45);
	font-size: 14px;
	user-select: none;
}

@keyframes wyne-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause when the user hovers — small UX nicety so they can read */
.notif-bar-inner .notif-strip:hover .marquee-track {
	animation-play-state: paused;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.notif-bar-inner .marquee-track {
		animation: none;
	}
}

/* Main menu bar — pure white bar with black text */
.menu-bar-outer {
	position: relative;
	z-index: 2;
	width: 100%;
	background: #ffffff;
	border-bottom: 2px solid var(--line);
}
.menu-bar-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
	background: #ffffff;
}
.menu-bar-inner .menu-bar {
	background: #ffffff;
	color: var(--ink);
	padding: 14px 0;
}
.menu-bar-inner .menu-bar .logo a,
.menu-bar-inner .menu-bar .nav,
.menu-bar-inner .menu-bar .nav a,
.menu-bar-inner .menu-bar .icons .icon {
	color: var(--ink);
}
.menu-bar-inner .menu-bar .icons .icon {
	border-color: var(--ink);
	background: #ffffff;
}

/* Top header strip */
.doc-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	border-bottom: 2px solid var(--line);
	padding-bottom: 14px;
	margin-bottom: 30px;
}
.doc-header h1 {
	font-family: var(--hand-loose);
	font-size: 30px; margin: 0; letter-spacing: 1px;
}
.doc-header h1 .sub {
	font-family: var(--hand-script);
	font-weight: 400; color: var(--ink-faint);
	font-size: 22px; margin-left: 10px;
}
.doc-header .meta {
	font-family: var(--hand); color: var(--ink-faint);
	font-size: 16px;
}

/* Section frame — frameless globally; we keep the stripe & tag accents
   for visual hierarchy but drop the rectangular border / bg / shadow. */
.section {
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 28px 26px 28px;
	margin-bottom: 32px;
	position: relative;
	box-shadow: none;
}
/* Hide the colored vertical stripe accents site-wide */
.section > .stripe,
.section .stripe {
	display: none !important;
}
.section .stripe {
	position: absolute;
	top: 14px; bottom: 14px; left: -3px;
	width: 8px;
	border-radius: 4px;
	background: var(--accent-red);
}
.section .tag {
	position: absolute;
	top: -12px; left: 18px;
	background: var(--paper);
	padding: 0 8px;
	font-family: var(--hand-script);
	font-size: 16px;
	color: var(--ink-faint);
}
.section h2 {
	font-family: var(--hand-loose);
	font-size: 24px;
	margin: 0 0 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.section.hero .stripe { background: var(--accent-red); }

/* Hero on the front page is a bare full-width media block — drop the
   section frame entirely so the video extends edge to edge. */
.section.hero {
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	margin-bottom: 22px;
}
.section.hero > .stripe,
.section.hero > .tag {
	display: none !important;
}
.section.hero .hero-media {
	border: none !important;
	border-radius: 0 !important;
}
.section.steps .stripe { background: var(--accent-green); }
.section.tabs .stripe { background: var(--accent-purple); }
.section.gallery .stripe { background: #6aa84f; }
.section.subs .stripe { background: #c9622b; }
.section.heartbeat .stripe { background: linear-gradient(180deg, #c64a8a 0%, #2f5fb3 60%, var(--accent-amber) 100%); }
.section.poll .stripe { background: var(--accent-pink); }

/* === Notification + Menu bar === */
/* (legacy .top-bar kept for any inline uses; the live header is .top-bar-outer) */
.top-bar {
	background: var(--paper-2);
	margin-bottom: 22px;
	overflow: hidden;
}
.notif-strip {
	border-bottom: 1.5px dashed var(--ink-soft);
	padding: 8px 16px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px;
	font-family: var(--hand-script);
	font-size: 16px;
	color: var(--ink-soft);
	background: rgba(0, 0, 0, 0.02);
}
.notif-strip .marquee {
	flex: 1;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.notif-strip .marker {
	font-family: var(--hand-loose);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.menu-bar {
	padding: 14px 18px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px;
}
.menu-bar .logo {
	font-family: var(--hand-loose);
	font-size: 24px; letter-spacing: 1.5px;
}
.menu-bar .logo a {
	color: inherit;
	text-decoration: none;
}
.menu-bar .nav {
	display: flex; gap: 22px; list-style: none; padding: 0; margin: 0;
	font-family: var(--hand);
	font-size: 17px; color: var(--ink-soft);
}
.menu-bar .nav a {
	color: inherit;
	text-decoration: none;
}
.menu-bar .nav a:hover {
	color: var(--ink);
}
.menu-bar .icons { display: flex; gap: 14px; align-items: center; }
.menu-bar .icons .icon {
	width: 34px; height: 34px;
	border: 1.5px solid var(--line); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hand-script); font-size: 14px;
	background: var(--paper); cursor: pointer;
	position: relative;
}
.menu-bar .icons .icon .badge {
	position: absolute; top: -4px; right: -4px;
	background: var(--accent-red); color: var(--paper);
	border-radius: 999px;
	font-family: var(--hand-loose); font-size: 9px;
	padding: 1px 5px; line-height: 1.2;
}

/* === Hero === */
.hero-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}
.hero-media {
	aspect-ratio: 21/9;
	border: 2px solid var(--line);
	border-radius: 8px;
	background: var(--paper-2);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px;
	position: relative;
	overflow: hidden;
}
.hero-media .play-circle {
	width: 72px; height: 72px;
	border-radius: 50%; border: 2px solid var(--ink);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hand-loose); font-size: 22px;
	background: var(--paper);
}
.hero-media .label {
	font-family: var(--hand-script); font-size: 18px; color: var(--ink-faint);
}
.hero-overlay {
	position: absolute;
	left: 24px; right: 24px; bottom: 24px;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	z-index: 2;
}
.hero-overlay-text {
	background: rgba(245, 241, 232, 0.88);
	border: 1.5px solid var(--line);
	border-radius: 8px;
	padding: 14px 18px;
	max-width: 520px;
	backdrop-filter: blur(2px);
}
.hero-overlay-text h3 {
	font-family: var(--hand-loose); font-size: 32px; margin: 0 0 6px; line-height: 1.05;
}
.hero-overlay-text p {
	font-family: var(--hand); font-size: 15px; color: var(--ink-soft);
	line-height: 1.45; margin: 0;
}
.hero-overlay-cta {
	display: flex; gap: 12px; align-items: center;
}
.btn.on-media {
	background: var(--paper);
}
.btn.on-media.primary {
	background: var(--ink); color: var(--paper);
}
.hero-play {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.hero-label {
	position: absolute; top: 14px; left: 18px;
	z-index: 1;
}
.hero-annot-row {
	margin-top: 10px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.hero-media .scribbles {
	position: absolute; inset: 0;
	background-image:
		repeating-linear-gradient(135deg, transparent 0 18px, rgba(0, 0, 0, 0.04) 18px 19px);
	pointer-events: none;
}

.hero-media.has-media {
	background: var(--ink);
	display: block;          /* override the wireframe's flex centering */
	padding: 0;
}

.hero-media-img,
.hero-media-video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	border: 0 !important;
	display: block !important;
	pointer-events: none;
	z-index: 0;
}

/* YouTube iframes can't be cropped with object-fit, so we sit the iframe
   at 100% width with a 16:9 height (= 131.25% of a 21:9 container's
   height) and centre it vertically — the top/bottom 15.6% gets cropped.
   NOTE: `inset: auto` MUST come BEFORE individual top/left/etc. — it's a
   shorthand that would otherwise wipe our positioning. */
.hero-media iframe.hero-media-video {
	inset: auto !important;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	width: 100% !important;
	height: 131.25% !important;            /* 21/16 — fills a 21:9 frame */
	transform: translateY(-50%) !important;
	max-width: none !important;
	max-height: none !important;
}

.hero-media-tint {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.45) 100%);
	pointer-events: none;
	z-index: 1;
}

.hero-media .hero-overlay {
	z-index: 3;
}

/* Make the overlay text readable on top of any media */
.hero-overlay-text {
	background: rgba(245, 241, 232, 0.92);
}
.hero-copy {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 32px;
	align-items: start;
	margin-top: 22px;
}
.hero-copy h3 {
	font-family: var(--hand-loose); font-size: 38px; margin: 0 0 12px; line-height: 1.05;
}
.hero-copy p {
	font-family: var(--hand); font-size: 17px; color: var(--ink-soft);
	line-height: 1.5; margin: 0 0 18px;
}
.hero-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn {
	border: 2px solid var(--line);
	background: var(--paper);
	padding: 10px 22px;
	font-family: var(--hand);
	font-size: 17px;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 120ms, box-shadow 120ms;
	text-decoration: none;
	color: var(--ink);
	display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.lg { padding: 12px 26px; font-size: 18px; }
.annot-callout {
	position: relative;
	font-family: var(--hand-script);
	font-size: 14px;
	color: var(--accent-red);
	padding-left: 18px;
}
.annot-callout::before {
	content: '↳';
	position: absolute;
	left: 0; top: -2px;
	font-size: 18px;
}
.hero-cta-annot {
	margin-top: 10px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
	font-family: var(--hand-script); font-size: 13px; color: var(--ink-faint);
}

/* === 7 Steps === */
.steps-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	margin-top: 8px;
	margin-bottom: 14px;
}
.step-circle {
	position: relative;
	aspect-ratio: 1;
	background: transparent;
	border: none;
	cursor: pointer;
	perspective: 800px;
	transition: transform 120ms;
	border-radius: 0;
}
.step-circle:hover { transform: translateY(-3px); }
.step-flip {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transition: transform 500ms cubic-bezier(.4, .1, .2, 1);
}
.step-circle.flipped .step-flip { transform: rotateY(180deg); }
.step-face {
	position: absolute; inset: 0;
	border: 2px solid var(--line);
	border-radius: 8px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: var(--paper);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	padding: 0 10px;
	text-align: center;
}
.step-face.back {
	transform: rotateY(180deg);
	background: var(--paper-2);
	border-style: dashed;
}
.step-face.back .desc {
	font-family: var(--hand-script);
	font-size: 11px;
	line-height: 1.3;
	color: var(--ink-soft);
}
.step-circle .n {
	font-family: var(--hand-loose);
	font-size: 28px; line-height: 1;
}
.step-circle .ttl {
	font-family: var(--hand-script);
	font-size: 13px;
	color: var(--ink-faint);
	margin-top: 4px;
	padding: 0 6px;
}
.step-circle.featured .step-face.front {
	background: var(--ink); color: var(--paper);
	box-shadow: 4px 4px 0 var(--accent-amber);
}
.step-circle.featured .step-face.front .ttl { color: #ffffff; }
.step-face.front::after {
	content: '+';
	position: absolute;
	right: 10px; bottom: 8px;
	width: 20px; height: 20px;
	border: 1.5px solid var(--ink-soft);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hand-loose);
	font-size: 16px; line-height: 1;
	color: var(--ink-soft);
	background: var(--paper);
}
.step-circle.featured .step-face.front::after {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--paper);
	background: transparent;
}
.step-face.back::after {
	content: '×';
	position: absolute;
	right: 10px; bottom: 8px;
	width: 20px; height: 20px;
	border: 1.5px dashed var(--ink-soft);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hand-loose);
	font-size: 16px; line-height: 1;
	color: var(--ink-soft);
}

.steps-conn {
	height: 22px;
	background-image:
		radial-gradient(circle, rgba(0, 0, 0, 0.35) 1.5px, transparent 1.5px);
	background-size: 10px 10px;
	background-position: 0 50%;
	background-repeat: repeat-x;
	margin: 0 8% 14px;
	opacity: 0.5;
}
.steps-legend {
	text-align: center;
	font-family: var(--hand-script);
	font-size: 16px;
	color: var(--ink-faint);
}

/* === Science / Technology / Results tabs === */
.tab-row {
	display: flex; gap: 0;
	margin-bottom: 18px;
	border-bottom: 1.5px dashed var(--ink-soft);
}
.tab {
	flex: 1;
	padding: 12px 14px 10px;
	background: none;
	border: none;
	border-right: 1.5px dashed var(--ink-soft);
	font-family: var(--hand);
	font-size: 18px;
	color: var(--ink-soft);
	cursor: pointer;
	text-align: center;
	position: relative;
}
.tab:last-child { border-right: none; }
.tab.active { color: var(--ink); background: rgba(0, 0, 0, 0.04); }
.tab.active::after {
	content: ''; position: absolute;
	left: 12px; right: 12px; bottom: -2px;
	height: 3px; background: var(--ink); border-radius: 2px;
}
.tab .num {
	font-family: var(--hand-loose);
	font-size: 11px; letter-spacing: 1.5px;
	color: var(--ink-faint);
	display: block;
	text-transform: uppercase;
}

.tab-panel {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 14px;
	align-items: stretch;
}
.panel-card {
	border: 1.5px solid var(--line);
	border-radius: 8px;
	background: var(--paper-2);
	padding: 14px;
	min-height: 200px;
	display: flex; flex-direction: column;
}
.panel-card .img {
	flex: 1;
	border: 1.5px dashed var(--ink-soft);
	border-radius: 6px;
	margin-bottom: 8px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hand-script);
	font-size: 13px;
	color: var(--ink-faint);
	background:
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(0, 0, 0, 0.025) 12px 13px);
}
.panel-card .lines {
	height: 38px;
	background-image:
		linear-gradient(transparent 0 7px, rgba(0, 0, 0, 0.18) 7px 8px),
		linear-gradient(transparent 0 16px, rgba(0, 0, 0, 0.18) 16px 17px),
		linear-gradient(transparent 0 25px, rgba(0, 0, 0, 0.18) 25px 26px);
}
.panel-card.with-arrow .img {
	position: relative;
}
.panel-card.with-arrow .img::after {
	content: '↗';
	position: absolute;
	bottom: 8px; right: 12px;
	font-family: var(--hand-loose);
	font-size: 22px;
	color: var(--accent-amber);
}
.panel-card .cap {
	margin-top: 8px;
	font-family: var(--hand-script);
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.35;
}
.tab-content[hidden] { display: none; }
.panel-head {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 28px;
	align-items: start;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1.5px dashed var(--line);
}
.panel-head h3 {
	margin: 0;
	font-family: var(--hand);
	font-size: 32px;
	line-height: 1.05;
	color: var(--ink);
}
.panel-head p {
	margin: 4px 0 0;
	font-family: var(--hand-script);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 56ch;
}

/* === Gallery + social proof === */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 130px 130px;
	gap: 10px;
}
.gallery-tile {
	border: 1.5px solid var(--line);
	border-radius: 6px;
	background: var(--paper-2);
	padding: 8px;
	display: flex; flex-direction: column; justify-content: space-between;
	font-family: var(--hand-script);
	font-size: 13px;
	color: var(--ink-faint);
}
.gallery-tile.photo {
	background:
		repeating-linear-gradient(45deg, transparent 0 14px, rgba(0, 0, 0, 0.04) 14px 15px),
		var(--paper-2);
	align-items: center; justify-content: center;
}
.gallery-tile.photo .stick {
	width: 60%; max-width: 80px;
	aspect-ratio: 1/1.6;
	display: flex; align-items: flex-end; justify-content: center;
}
.gallery-tile.photo .stick svg { width: 100%; height: 100%; }
.gallery-tile.video::before {
	content: '▶';
	align-self: center;
	font-size: 28px; color: var(--ink-soft);
	margin-top: auto;
}
.gallery-tile.video {
	align-items: center;
	background:
		radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.06), transparent 60%),
		var(--paper-2);
}
.gallery-tile.quote {
	font-family: var(--hand-script);
	font-size: 16px;
	color: var(--ink-soft);
	line-height: 1.3;
	padding: 12px;
	align-items: flex-start;
	justify-content: flex-start;
	background: var(--paper);
}
.gallery-tile.quote::before {
	content: '"';
	font-family: var(--hand-loose);
	font-size: 38px; line-height: 0.5;
	color: var(--accent-red);
	margin-bottom: 4px;
}
.gallery-tile.tile-w2 { grid-column: span 2; }
.gallery-tile.tile-h2 { grid-row: span 2; }

/* === Subscriptions === */
.subs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.sub-card {
	border: 2px solid var(--line);
	border-radius: 8px;
	background: var(--paper-2);
	padding: 18px 16px;
	min-height: 240px;
	display: flex; flex-direction: column;
	position: relative;
	transition: transform 120ms, box-shadow 120ms;
}
.sub-card:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.12); }
.sub-card .corner-tag {
	position: absolute; top: 10px; left: 14px;
	font-family: var(--hand-loose);
	font-size: 11px; letter-spacing: 1.5px;
	color: var(--ink-faint);
	text-transform: uppercase;
}
.sub-card h3 {
	font-family: var(--hand-loose);
	font-size: 24px;
	margin: 36px 0 10px;
	line-height: 1.1;
	letter-spacing: 0.5px;
}
.sub-card .desc {
	font-family: var(--hand);
	font-size: 15px;
	color: var(--ink-soft);
	line-height: 1.4;
	flex: 1;
	margin-bottom: 14px;
}
.sub-card .footer-row {
	display: flex; justify-content: space-between; align-items: center;
	border-top: 1.5px dashed var(--ink-soft);
	padding-top: 10px;
}
.sub-card .price {
	font-family: var(--hand-loose);
	font-size: 18px;
}
.sub-card .price .per {
	font-family: var(--hand-script);
	font-size: 14px;
	color: var(--ink-faint);
	margin-left: 4px;
}

/* === Heartbeat featured === */
.hb-feature {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 28px;
	align-items: center;
	background:
		linear-gradient(180deg, rgba(198, 74, 138, 0.05), rgba(47, 95, 179, 0.05) 50%, rgba(201, 138, 43, 0.06));
	border: 1.5px dashed var(--ink-soft);
	border-radius: 8px;
	padding: 22px;
}
.hb-feature .bottle-stage {
	aspect-ratio: 0.9/1;
	border: 1.5px dashed var(--ink-soft);
	border-radius: 8px;
	background: var(--paper);
	display: flex; align-items: center; justify-content: center;
	position: relative;
	overflow: hidden;
}
.hb-feature .bottle-stage svg {
	width: 70%; max-width: 240px; height: auto;
}
.hb-feature .bottle-stage .pulse {
	position: absolute;
	top: 20px; left: 50%; transform: translateX(-50%);
	width: 70%;
	height: 30px;
	opacity: 0.6;
}
.hb-feature .copy h3 {
	font-family: var(--hand-loose);
	font-size: 32px;
	margin: 0 0 6px;
	letter-spacing: 0.5px;
}
.hb-feature .copy .kicker {
	display: inline-block;
	font-family: var(--hand-loose);
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent-red);
	border: 1.5px solid var(--accent-red);
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 12px;
}
.hb-feature .copy p {
	font-family: var(--hand);
	font-size: 16px;
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0 0 14px;
	max-width: 420px;
}
.hb-feature .icons-row {
	display: flex; gap: 12px;
	margin: 14px 0 18px;
	font-family: var(--hand-script);
	font-size: 14px;
	color: var(--ink-faint);
}
.hb-feature .icons-row .ic {
	width: 38px; height: 38px;
	border: 1.5px solid var(--ink); border-radius: 6px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hand-loose); font-size: 16px;
	background: var(--paper);
}
.hb-feature .icons-row .ic.circle { border-radius: 50%; }
.hb-feature .icons-row .ic.square { border-radius: 4px; }
.hb-feature .icons-row .ic.triangle {
	border: none;
	background: transparent;
	position: relative;
}
.hb-feature .icons-row .ic.triangle::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--paper);
	clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
	border: 1.5px solid var(--ink);
}
.hb-feature .icons-row .ic.triangle::after {
	content: '';
	position: absolute; inset: 4px;
	clip-path: polygon(50% 8%, 92% 92%, 8% 92%);
	background: transparent;
	border: 1.5px solid var(--ink);
}

/* === Poll === */
.poll-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 22px;
}
.poll-card {
	border: 1.5px solid var(--line);
	border-radius: 8px;
	background: var(--paper-2);
	padding: 14px;
	display: flex; flex-direction: column;
	min-height: 180px;
	position: relative;
}
.poll-card .artist {
	flex: 1;
	border: 1.5px dashed var(--ink-soft);
	border-radius: 6px;
	margin-bottom: 12px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--hand-loose);
	font-size: 22px;
	letter-spacing: 1px;
	color: var(--ink);
	text-align: center;
	padding: 10px;
	background:
		repeating-linear-gradient(135deg, transparent 0 16px, rgba(0, 0, 0, 0.03) 16px 17px),
		var(--paper);
}
.poll-card .meta {
	display: flex; justify-content: space-between; align-items: center;
	font-family: var(--hand-script);
	font-size: 14px;
	color: var(--ink-faint);
	margin-bottom: 8px;
}
.poll-card .vote-bar {
	height: 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.08);
	overflow: hidden;
	margin-bottom: 10px;
	position: relative;
}
.poll-card .vote-bar .fill {
	position: absolute; left: 0; top: 0; bottom: 0;
	background: var(--accent-pink);
	border-radius: 3px;
}
.poll-card .vote-btn {
	border: 2px solid var(--line);
	background: var(--paper);
	padding: 8px 12px;
	font-family: var(--hand-loose);
	font-size: 14px; letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 6px;
	cursor: pointer;
	width: 100%;
}
.poll-card.voted .vote-btn {
	background: var(--ink); color: var(--paper);
}
.poll-card.voted .vote-btn::before {
	content: '✓ '; color: var(--accent-amber);
}

.email-capture {
	border-top: 1.5px dashed var(--ink-soft);
	padding-top: 18px;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.email-capture .lead {
	font-family: var(--hand-script);
	font-size: 18px;
	color: var(--ink-soft);
}
.email-capture .form {
	display: flex; gap: 8px;
	max-width: 460px; width: 100%;
}
.email-capture input {
	flex: 1;
	border: 1.5px solid var(--line);
	border-radius: 6px;
	padding: 9px 14px;
	font-family: var(--hand);
	font-size: 16px;
	background: var(--paper);
	outline: none;
}
.email-capture input:focus { border-color: var(--accent-pink); }

/* Footer notes */
.notes {
	margin-top: 32px;
	border-top: 2px dashed var(--ink-soft);
	padding-top: 20px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	font-family: var(--hand);
	color: var(--ink-soft);
	font-size: 15px;
}
.notes h4 {
	font-family: var(--hand-loose);
	color: var(--ink);
	margin: 0 0 6px;
	font-size: 17px;
}
.notes p { margin: 0 0 8px; line-height: 1.45; }

/* === Sidecart === */
.menu-bar .icons .icon[data-wyne-cart-toggle],
.menu-bar .icons button.icon {
	font-family: var(--hand-script);
	color: var(--ink);
	padding: 0;
	line-height: 1;
}

.sidecart-overlay {
	position: fixed; inset: 0;
	background: rgba(26, 26, 26, 0.45);
	z-index: 998;
	opacity: 0;
	transition: opacity 220ms ease;
}
.sidecart-overlay.is-open {
	opacity: 1;
}

.sidecart {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: 100%;
	max-width: 420px;
	background: var(--paper);
	border-left: 2px solid var(--line);
	box-shadow: -6px 0 0 rgba(0, 0, 0, 0.08);
	z-index: 999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 280ms cubic-bezier(.4, .1, .2, 1);
	font-family: var(--hand);
	color: var(--ink);
}
.sidecart.is-open {
	transform: translateX(0);
}

.sidecart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px 14px;
	border-bottom: 1.5px dashed var(--ink-soft);
}
.sidecart-head h2 {
	font-family: var(--hand-loose);
	font-size: 22px;
	letter-spacing: 1px;
	margin: 0;
	text-transform: uppercase;
}
.sidecart-close {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: var(--paper);
	font-family: var(--hand-loose);
	font-size: 22px; line-height: 1;
	cursor: pointer;
	color: var(--ink);
	display: flex; align-items: center; justify-content: center;
}
.sidecart-close:hover {
	background: var(--paper-2);
}

.sidecart-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px 22px;
}

.sidecart-line {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1.5px dashed var(--ink-soft);
}
.sidecart-line:last-child {
	border-bottom: none;
}
.sidecart-thumb {
	width: 56px; height: 80px;
	border: 1.5px solid var(--line);
	border-radius: 6px;
	background: var(--paper-2);
	display: flex; align-items: center; justify-content: center;
	color: var(--ink-soft);
}
.sidecart-thumb svg {
	width: 60%; height: 60%;
}
.sidecart-title {
	font-family: var(--hand-loose);
	font-size: 16px;
	margin-bottom: 2px;
}
.sidecart-meta {
	font-family: var(--hand-script);
	font-size: 13px;
	color: var(--ink-faint);
	margin-bottom: 8px;
}
.sidecart-qty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: 2px 4px;
	background: var(--paper);
}
.sidecart-qty .qty-btn {
	width: 22px; height: 22px;
	border-radius: 50%;
	border: none;
	background: transparent;
	font-family: var(--hand-loose);
	font-size: 14px; line-height: 1;
	cursor: pointer;
	color: var(--ink);
}
.sidecart-qty .qty-btn:hover {
	background: var(--paper-2);
}
.sidecart-qty .qty {
	font-family: var(--hand);
	font-size: 14px;
	min-width: 14px; text-align: center;
}
.sidecart-price {
	font-family: var(--hand-loose);
	font-size: 18px;
	color: var(--ink);
	white-space: nowrap;
}

.sidecart-foot {
	border-top: 2px solid var(--line);
	padding: 18px 22px 22px;
	background: var(--paper-2);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Hide the foot completely when cart is empty — `[hidden]` UA default
   gets overridden by our `display: flex` above, so re-assert it. */
.sidecart-foot[hidden] {
	display: none !important;
}
.sidecart-totals {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 6px;
}
.sidecart-row {
	display: flex;
	justify-content: space-between;
	font-family: var(--hand);
	font-size: 16px;
	color: var(--ink);
}
.sidecart-row-faint {
	color: var(--ink-faint);
	font-family: var(--hand-script);
	font-size: 14px;
}
.sidecart-row-total {
	font-family: var(--hand-loose);
	font-size: 20px;
	letter-spacing: 0.5px;
	border-top: 1.5px dashed var(--ink-soft);
	padding-top: 8px;
	margin-top: 4px;
}

.sidecart-checkout {
	width: 100%;
	justify-content: center;
	font-family: var(--hand-loose);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sidecart-continue {
	background: none;
	border: none;
	font-family: var(--hand-script);
	font-size: 15px;
	color: var(--ink-faint);
	text-align: center;
	cursor: pointer;
	padding: 4px 0 0;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 3px;
}
.sidecart-continue:hover {
	color: var(--ink-soft);
}

body.wyne-cart-open {
	overflow: hidden;
}

.sidecart .sidecart-thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.sidecart-line .sidecart-title {
	color: inherit;
	text-decoration: none;
}
.sidecart-line .sidecart-title:hover {
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 3px;
}

/* Configurator metadata under each line */
.sidecart-config {
	margin: 6px 0 8px;
	padding: 6px 10px;
	border-left: 1.5px dashed var(--ink-soft);
	font-family: var(--hand-script);
	font-size: 13px;
	color: var(--ink-soft);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	line-height: 1.35;
}
.sidecart-config dt {
	color: var(--ink-faint);
	font-family: var(--hand);
}
.sidecart-config dd {
	margin: 0;
	color: var(--ink);
}
.sidecart-line.is-config .sidecart-thumb {
	border-color: var(--accent-amber);
}

.sidecart-qty .qty-remove {
	margin-left: auto;
	background: none;
	border: none;
	font-family: var(--hand-script);
	font-size: 13px;
	color: var(--ink-faint);
	cursor: pointer;
	padding: 0 4px;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 3px;
}
.sidecart-qty .qty-remove:hover {
	color: var(--accent-red);
}

.sidecart.is-busy {
	pointer-events: none;
	opacity: 0.78;
}
.sidecart.is-busy .sidecart-checkout {
	pointer-events: auto;
}

.sidecart-empty {
	text-align: center;
	padding: 40px 22px;
	color: var(--ink-soft);
}
.sidecart-empty-mark {
	font-family: var(--hand-loose);
	font-size: 60px;
	line-height: 1;
	color: var(--ink-faint);
	margin-bottom: 12px;
}
.sidecart-empty h3 {
	font-family: var(--hand-loose);
	font-size: 20px;
	margin: 0 0 6px;
	letter-spacing: 0.5px;
}
.sidecart-empty p {
	font-family: var(--hand-script);
	font-size: 16px;
	color: var(--ink-faint);
	margin: 0;
}

.menu-bar .icons .icon .badge[hidden] {
	display: none;
}

/* Toast */
.wyne-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 12px);
	z-index: 1100;
	background: var(--ink);
	color: var(--paper);
	padding: 10px 18px;
	border-radius: 999px;
	font-family: var(--hand);
	font-size: 15px;
	letter-spacing: 0.3px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transition: opacity 220ms ease, transform 220ms ease;
	pointer-events: none;
}
.wyne-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
.wyne-toast.is-error {
	background: var(--accent-red);
}

/* Add-to-cart pending */
[data-wyne-add].is-loading {
	opacity: 0.6;
	pointer-events: none;
}

@media (max-width: 480px) {
	.sidecart {
		max-width: 100%;
	}
}

/* === Site footer (full-width strip, inner content capped) === */
.site-footer-outer {
	width: 100%;
	background: #000000;
	color: #ffffff;
	border-top: 2px solid #000000;
	margin-top: 0;
	position: relative;
}
.site-footer-outer::before {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-pink) 50%, var(--accent-amber) 100%);
	pointer-events: none;
}
.site-footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 44px 32px 32px;
}
.site-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	align-items: start;
}
.site-footer-col h4 {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1.5px dashed rgba(255, 255, 255, 0.25);
}
.site-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.site-footer-col ul li {
	margin-bottom: 6px;
}
.site-footer-col ul a {
	font-family: var(--sans);
	font-size: 16px;
	color: #ffffff;
	text-decoration: none;
	transition: color 120ms;
}
.site-footer-col ul a:hover {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 3px;
}

.site-footer-brand .site-footer-logo {
	font-family: var(--sans);
	font-size: 26px;
	letter-spacing: -0.01em;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 8px;
}
.site-footer-brand p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.5;
	color: #ffffff;
	margin: 0 0 14px;
	max-width: 38ch;
}
.site-footer-brand .site-footer-meta {
	font-family: var(--sans);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin-top: auto;
}

/* current page in nav */
.menu-bar .nav .current-menu-item a {
	color: var(--ink);
	border-bottom: 1.5px solid var(--ink);
	padding-bottom: 1px;
}

/* responsive squish */
@media (max-width: 920px) {
	.hero-row, .tab-panel, .subs-grid, .poll-grid, .hb-feature, .panel-head, .hero-copy { grid-template-columns: 1fr; }
	.tab-panel { grid-template-columns: 1fr 1fr; }
	.gallery-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: 110px 110px 110px; }
	.steps-row { grid-template-columns: repeat(4, 1fr); }
	.site-footer-grid { grid-template-columns: 1fr 1fr; }
	.audiences-row { grid-template-columns: 1fr; }
	.antarctica-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* AUDIENCES — "who it's for" cards (3 across, expandable)                    */
/* ========================================================================== */

.section.audiences .lede {
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink-soft);
	margin: -4px 0 22px;
	max-width: 760px;
}
.audiences-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}
.aud-card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.aud-card:hover { border-color: var(--wf-green); }

.aud-image {
	position: relative;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 8px),
		linear-gradient(180deg, #f3eee2 0%, #ece5d2 100%);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 14px;
	border-bottom: 1.5px solid var(--line);
}
.aud-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wf-green);
	background: rgba(250, 245, 233, 0.85);
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(31, 53, 34, 0.18);
}
.aud-tag .tag-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wf-gold);
	display: inline-block;
}
.aud-plus {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--wf-line-str);
	background: rgba(250, 245, 233, 0.9);
	color: var(--wf-ink-soft);
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.aud-plus:hover { border-color: var(--wf-green); color: var(--wf-green); }
.aud-card.is-open .aud-plus { transform: rotate(45deg); border-color: var(--wf-green); color: var(--wf-green); }

.aud-body {
	padding: 22px 22px 8px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.aud-title {
	font-family: var(--serif) !important;
	font-style: italic !important;
	font-weight: 300 !important;
	font-size: 28px !important;
	line-height: 1.15 !important;
	color: var(--wf-green) !important;
	margin: 0 !important;
	letter-spacing: -0.005em;
}
.aud-title em {
	font-style: italic;
	color: var(--wf-gold);
}
.aud-expand {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}
.aud-card.is-open .aud-expand {
	grid-template-rows: 1fr;
}
.aud-expand-inner {
	overflow: hidden;
	min-height: 0;
}
.aud-desc {
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 14px;
}
.aud-bullets {
	list-style: none;
	padding: 0;
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.aud-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.aud-bullets li::before {
	content: "·";
	color: var(--wf-gold);
	font-size: 18px;
	line-height: 1;
	flex: 0 0 auto;
	margin-top: 2px;
}
.aud-bullets li span {
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-soft);
}
.aud-bullets li b {
	display: block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wf-green);
	margin-bottom: 2px;
}
.aud-quote {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	color: var(--wf-ink);
	margin: 0 0 14px;
	border-left: 2px solid var(--wf-gold);
	padding-left: 12px;
}
.aud-cta-row { padding: 0 0 12px; }
.audiences-legend {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: 22px;
	text-align: center;
}

/* ========================================================================== */
/* ANTARCTICA expedition — 2-col split (photo + copy)                         */
/* ========================================================================== */

.section.antarctica .antarctica-lead {
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink-soft);
	margin: -4px 0 22px;
	max-width: 760px;
}
.antarctica-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 32px;
	align-items: stretch;
}
.antarctica-photo {
	position: relative;
	aspect-ratio: 4 / 3;
	background:
		repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 9px),
		linear-gradient(180deg, #d8e3eb 0%, #b8c8d4 100%);
	border: 1.5px solid var(--line);
	border-radius: 8px;
	display: flex;
	align-items: flex-end;
	padding: 14px;
}
.antarctica-photo .ph-label {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: rgba(255, 255, 255, 0.7);
	padding: 4px 10px;
	border-radius: 999px;
}
.antarctica-copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: center;
}
.antarctica-copy p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
}
.antarctica-copy .antarctica-pullquote {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 20px;
	color: var(--wf-green);
	border-left: 2px solid var(--wf-gold);
	padding-left: 14px;
	margin: 6px 0;
}
.antarctica-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}

/* ========================================================================== */
/* FAQ — accordion list with native <details>                                 */
/* ========================================================================== */

.section.faq .faq-lead {
	font-family: var(--sans);
	font-size: 15px;
	color: var(--ink-soft);
	margin: -4px 0 22px;
	max-width: 760px;
}
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border-top: 1px solid var(--line);
}
.faq-item {
	border-bottom: 1px solid var(--line);
	padding: 0;
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 1.25;
	color: var(--wf-green);
	padding: 18px 36px 18px 0;
	position: relative;
	transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--sans);
	font-size: 24px;
	font-weight: 200;
	color: var(--wf-ink-mute);
	transition: transform 0.25s ease, color 0.2s ease;
}
.faq-item[open] summary::after {
	content: "+";
	transform: translateY(-50%) rotate(45deg);
	color: var(--wf-green);
}
.faq-item:hover summary { color: var(--wf-gold-deep, var(--wf-gold)); }
.faq-body {
	padding: 0 36px 22px 0;
}
.faq-body p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0;
}
@media (max-width: 560px) {
	.site-footer-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* SIGNATURE EDITION HEADER OVERRIDE                                          */
/* Restyles the existing .notif-bar-outer + .menu-bar-outer markup to match   */
/* the "VYNE+ Signature Edition" wireframe — warm beige sticky bar with a     */
/* green wordmark, gold accents, an Inter uppercase nav, and circle icons.    */
/* Markup is unchanged; only CSS.                                             */
/* ========================================================================== */

:root {
	--wf-bg:         #f4ede0;
	--wf-paper:      #faf5e9;
	--wf-line:       rgba(38, 30, 16, 0.12);
	--wf-line-str:   rgba(38, 30, 16, 0.28);
	--wf-gold:       #b8924d;
	--wf-gold-deep:  #8a6f33;
	--wf-green:      #1f3522;
	--wf-ink:        #261e10;
	--wf-ink-soft:   #4a3f2a;
	--wf-ink-mute:   #7a6f5a;
	--wf-serif:      "Cormorant Garamond", Georgia, serif;
}

/* --- Notification strip → slim warm-green bar with paper text --- */
.notif-bar-outer {
	background: var(--wf-green) !important;
	color: var(--wf-paper) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.notif-bar-inner .notif-strip {
	background: transparent !important;
	color: var(--wf-paper) !important;
	padding: 9px 0 !important;
}
.notif-bar-inner .marquee-item {
	font-family: var(--sans);
	font-size: 11px !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--wf-paper) !important;
}
.notif-bar-inner .marquee-sep {
	color: rgba(250, 245, 233, 0.4) !important;
	font-size: 12px !important;
}

/* --- Main menu bar → sticky beige with subtle blur --- */
.menu-bar-outer {
	background: rgba(244, 237, 224, 0.92) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wf-line) !important;
	position: sticky;
	top: 0;
	z-index: 50;
}
.menu-bar-inner {
	background: transparent !important;
}
.menu-bar-inner .menu-bar {
	background: transparent !important;
	color: var(--wf-ink);
	padding: 22px 0 !important;
}

/* Logo → wordmark style. Markup is <div class="logo wordmark">
   <a>VYNE<span class="plus">+</span></a></div> so we can paint the
   trailing "+" gold without touching the rest of the wordmark. */
.menu-bar-inner .menu-bar .logo,
.menu-bar-inner .menu-bar .logo.wordmark {
	font-family: var(--sans) !important;
	font-weight: 200 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	letter-spacing: 0.5em !important;
	text-transform: uppercase;
	color: var(--wf-green) !important;
	padding-left: 6px;
}
.menu-bar-inner .menu-bar .logo a {
	color: var(--wf-green) !important;
	text-decoration: none !important;
	font-family: inherit !important;
	font-weight: 200 !important;
	font-size: inherit !important;
	letter-spacing: inherit !important;
	font-style: normal !important;
	display: inline-flex;
	align-items: baseline;
}
.menu-bar-inner .menu-bar .logo .plus {
	color: var(--wf-gold) !important;
	font-weight: 300 !important;
	margin-left: -0.2em;
	letter-spacing: 0;
}

/* Nav links — wireframe spec: Inter 12px, weight 300, 0.25em tracking,
   uppercase, gap 32px, color ink-mute, hover deep-green. Pixel-for-pixel
   match with .topnav in the Signature Edition wireframe. */
body .menu-bar-inner .menu-bar .nav,
body .menu-bar-inner .menu-bar ul.nav,
body .menu-bar-inner .menu-bar nav.nav {
	font-family: var(--sans) !important;
	display: flex !important;
	align-items: center !important;
	gap: 32px !important;
	font-size: 12px !important;
	font-weight: 300 !important;
	font-style: normal !important;
	line-height: 1 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--wf-ink-mute) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
body .menu-bar-inner .menu-bar .nav li,
body .menu-bar-inner .menu-bar .nav .menu-item {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}
body .menu-bar-inner .menu-bar .nav a,
body .menu-bar-inner .menu-bar .nav li a,
body .menu-bar-inner .menu-bar .nav .menu-item a {
	font-family: var(--sans) !important;
	font-size: 12px !important;
	font-weight: 300 !important;
	letter-spacing: 0.25em !important;
	text-transform: uppercase !important;
	color: var(--wf-ink-mute) !important;
	text-decoration: none !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: color 0.2s ease;
}
body .menu-bar-inner .menu-bar .nav a:hover,
body .menu-bar-inner .menu-bar .nav .current-menu-item > a,
body .menu-bar-inner .menu-bar .nav li.current-menu-item > a {
	color: var(--wf-green) !important;
}

/* Icon buttons → 36px circles with a thin border that goes green on hover.
   Same look for <button> and the <a> account link. */
.menu-bar-inner .menu-bar .icons {
	display: flex !important;
	align-items: center;
	gap: 24px !important;
}
.menu-bar-inner .menu-bar .icons .icon {
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	border: 1px solid var(--wf-line-str) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--wf-ink-soft) !important;
	font-family: var(--sans);
	font-size: 14px !important;
	display: grid !important;
	place-items: center !important;
	cursor: pointer;
	text-decoration: none !important;
	position: relative;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.menu-bar-inner .menu-bar .icons .icon svg {
	display: block;
	width: 14px;
	height: 14px;
}
.menu-bar-inner .menu-bar .icons .icon:hover {
	border-color: var(--wf-green) !important;
	color: var(--wf-green) !important;
	background: transparent !important;
}
/* Cart badge stays visible but switches to the gold accent */
.menu-bar-inner .menu-bar .icons .icon .badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--wf-gold) !important;
	color: var(--wf-paper) !important;
	font-family: var(--sans) !important;
	font-weight: 600 !important;
	font-size: 9px !important;
	letter-spacing: 0.05em !important;
	border-radius: 999px;
	padding: 1px 5px;
	line-height: 1.2;
}