/* Reset + typography + primitives */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; transition: --rp-bg .9s var(--ease-out), --rp-bg-2 .9s var(--ease-out), --rp-brand .9s var(--ease-out), --rp-on-brand .9s var(--ease-out); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
	margin: 0;
	font-family: var(--rp-font);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--rp-ink);
	background: var(--rp-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Fixed background layer: white → grey radial floor. JS animates --rp-bg/--rp-bg-2 for brand shifts. */
.site-bg {
	position: fixed; inset: 0; z-index: -1; pointer-events: none;
	background:
		radial-gradient(60% 45% at 50% 100%, rgba(0, 0, 0, .16), transparent 70%),
		linear-gradient(to bottom, var(--rp-bg) 0%, var(--rp-bg) 42%, var(--rp-bg-2) 100%);
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); color: var(--rp-muted); line-height: 1.45; }
.muted { color: var(--rp-muted); }
.small { font-size: var(--fs-small); }
.eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-muted); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-6); }
.section__head { text-align: center; max-width: 560px; margin: 0 auto var(--space-4); }
.section__head h2 { margin-bottom: var(--space-2); }

.btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .8rem 1.4rem; border-radius: 6px;
	background: var(--rp-ink); color: #fff; font-weight: 600; font-size: var(--fs-small);
	transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.btn:hover { background: var(--rp-red); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--rp-ink); box-shadow: inset 0 0 0 1px var(--rp-line); }
.btn--ghost:hover { background: var(--rp-ink); color: #fff; }
.btn--pill { border-radius: var(--radius-pill); }

.pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 600; background: rgba(255, 255, 255, .14); color: #fff; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 1000; padding: .5rem 1rem; background: #fff; }
.skip-link:focus { left: var(--gutter); top: var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--rp-red); outline-offset: 3px; }

/* Reveal states (reveal.js). Only when JS is on, so crawlers/no-JS see everything. */
html.js [data-reveal] { opacity: 0; transform: translateY(24px); }
html.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
html.js [data-reveal="clip"] { transform: none; clip-path: inset(0 0 100% 0); }
html.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); transition: opacity var(--dur) var(--ease-out), clip-path var(--dur-slow) var(--ease-out); }

/* Split text (reveal.js): units slide up from a clipped line */
.is-split .sp { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
html.js .is-split .sp > span { display: inline-block; transform: translateY(110%); transition: transform var(--dur-slow) var(--ease-out); }
html.js .is-split.is-in .sp > span { transform: none; }
html.js [data-reveal][data-split] { opacity: 1; transform: none; }

/* Content from the editor */
.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2, .entry-content h3 { margin-top: 1.8em; }
.entry-content a { color: var(--rp-red); text-decoration: underline; text-underline-offset: .15em; }
.entry-content img { border-radius: var(--radius); }

/* Spec table (parts/specs-table.php) */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border: 1px solid var(--rp-line); border-radius: 4px; overflow: hidden; }
.specs__cell { padding: 1rem 1.1rem; border-right: 1px solid var(--rp-line); min-width: 0; }
.specs__cell:last-child { border-right: 0; }
.specs__label { display: block; font-size: var(--fs-micro); font-weight: 700; margin-bottom: .35rem; }
.specs__value { margin: 0; font-size: var(--fs-small); color: var(--rp-muted); }
@media (max-width: 640px) { .specs__cell { border-right: 0; border-bottom: 1px solid var(--rp-line); } .specs__cell:last-child { border-bottom: 0; } }

/* CTA band (parts/section-cta.php) */
.cta { text-align: center; padding-block: var(--space-6) var(--space-7); }
.cta h2 { margin-bottom: var(--space-2); }
.cta p { max-width: 540px; margin: 0 auto var(--space-3); color: var(--rp-muted); }

/* Cursor hint shown over hoverable bottles */
.cursor-hint { position: fixed; z-index: 90; left: 0; top: 0; pointer-events: none; padding: .45rem .8rem; border-radius: var(--radius-pill); background: var(--rp-ink); color: #fff; font-size: var(--fs-micro); font-weight: 600; opacity: 0; transform: translate(-50%, -140%) scale(.9); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out); white-space: nowrap; }
.cursor-hint.is-on { opacity: 1; transform: translate(-50%, -140%) scale(1); }

/* ---------- Cross-document view transitions (bottle morph) ----------
 * The element named `bottle` on the outgoing page (focused ring bottle, or a
 * clicked card's image) morphs into the label hero bottle on the incoming page.
 * Browsers without support simply navigate; the pages' own entrances cover it. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .55s; animation-timing-function: var(--ease-in-out); }
::view-transition-group(bottle) { animation-duration: .9s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
::view-transition-old(bottle), ::view-transition-new(bottle) { height: 100%; width: 100%; object-fit: contain; animation: none; mix-blend-mode: normal; }
::view-transition-old(bottle) { display: none; }
.vt-source { view-transition-name: bottle; }
/* A clicked card owns the name; un-name the page's default bottle so it stays unique. */
html.vt-leaving-card .ring__item.is-focus img,
html.vt-leaving-card .lhero__slide--bottle.is-active img { view-transition-name: none; }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
	html.js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}