/* ============================================================
   TENUTA SOLENNE — RUBEDO  ·  award-grade build
   ============================================================ */
:root {
  --cream: #f4ede0;
  --cream-2: #ece2cf;
  --ink: #211a18;
  --ink-soft: #5a4d46;
  --wine: #5a1212;
  --wine-deep: #3a0c0c;
  --wine-dark: #240707;
  --gold: #c2a14d;
  --gold-soft: #d8c18a;
  --line: rgba(33, 26, 24, 0.16);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: hidden; }   /* also clips the fixed, 38°-tilted hero bottle so it never triggers a sideways scroll */
body {
  font-family: var(--sans);
  background: var(--cream);   /* uniform cream → dark sections blend into it with no seam */
  color: var(--ink);
  overflow-x: hidden;
}
body.loading { overflow: hidden; height: 100vh; }
::selection { background: var(--wine); color: var(--cream); }
a { color: inherit; }

/* cursor: hide native on desktop */
@media (hover: hover) and (pointer: fine) {
  * { cursor: none !important; }
}

/* ---------- texture ---------- */
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.6s steps(2) infinite;
}
/* animate the (tiling) background, not the box — so the overlay stays inset:0 and
   never overflows the viewport horizontally (which would allow a sideways scroll) */
@keyframes grainShift { 0%{background-position:0 0} 50%{background-position:-6px 5px} 100%{background-position:5px -6px} }
.vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 240px rgba(36, 7, 7, 0.16); }

/* no-WebGL fallback: hide 3D, keep everything else usable */
body.no-webgl .flyer, body.no-webgl model-viewer, body.no-webgl .globe-wrap { display: none; }

/* ---------- custom cursor ---------- */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; mix-blend-mode: difference; }
.cursor { width: 38px; height: 38px; border: 1px solid #f4ede0; margin: -19px 0 0 -19px; display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s; }
.cursor-dot { width: 5px; height: 5px; background: #f4ede0; margin: -2.5px 0 0 -2.5px; }
.cursor-label { font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--wine-dark); white-space: nowrap; opacity: 0; transform: scale(0.55); transition: opacity .3s, transform .3s; }
body.cursor-hover .cursor { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
/* labelled state: solid gold puck with a word inside (like the Rubedo cursor) */
body.cursor-labeled .cursor { width: 82px; height: 82px; margin: -41px 0 0 -41px; background: var(--gold); border-color: var(--gold); mix-blend-mode: normal; }
body.cursor-labeled .cursor-label { opacity: 1; transform: scale(1); }
body.cursor-labeled .cursor-dot { opacity: 0; }
body.loading .cursor, body.loading .cursor-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--wine-dark); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.loader-inner { text-align: center; width: min(520px, 80vw); }
.loader-mark {
  font-family: var(--serif); font-size: 3rem; color: var(--gold);
  display: inline-grid; place-items: center; width: 70px; height: 70px;
  border: 1px solid var(--gold); border-radius: 50%; margin-bottom: 2rem;
}
.loader-word { font-family: var(--serif); font-size: clamp(1.3rem, 3.6vw, 2.4rem); letter-spacing: 0.26em; margin-bottom: 2.4rem; overflow: hidden; white-space: nowrap; padding: 0.1em 0.2em; }
/* GPU/compositor-driven reveal — own layer (will-change) so it stays buttery even while the 14MB model parses on the main thread */
.loader-word span { display: inline-block; transform: translateY(110%); animation: loaderReveal 0.85s var(--ease) both; will-change: transform; backface-visibility: hidden; }
@keyframes loaderReveal { to { transform: translateY(0); } }
.loader-word span:nth-child(1){animation-delay:.05s} .loader-word span:nth-child(2){animation-delay:.09s}
.loader-word span:nth-child(3){animation-delay:.13s} .loader-word span:nth-child(4){animation-delay:.17s}
.loader-word span:nth-child(5){animation-delay:.21s} .loader-word span:nth-child(6){animation-delay:.25s}
.loader-word span:nth-child(7){animation-delay:.29s} .loader-word span:nth-child(8){animation-delay:.33s}
.loader-word span:nth-child(9){animation-delay:.37s} .loader-word span:nth-child(10){animation-delay:.41s}
.loader-word span:nth-child(11){animation-delay:.45s} .loader-word span:nth-child(12){animation-delay:.49s}
.loader-word span:nth-child(13){animation-delay:.53s} .loader-word span:nth-child(14){animation-delay:.57s}
.loader-bar { height: 1px; background: rgba(216, 193, 138, 0.25); position: relative; overflow: hidden; }
.loader-bar i { position: absolute; inset: 0; width: 0%; background: var(--gold); display: block; }
.loader-pct { margin-top: 1rem; font-size: 0.74rem; letter-spacing: 0.3em; color: var(--gold-soft); }
/* premium outro — wordmark lifts away, then the curtain rises with a smooth ease */
body.loaded .loader-word span { animation: loaderOut 0.6s var(--ease) forwards; }
@keyframes loaderOut { to { transform: translateY(-140%); } }
body.loaded .loader-mark, body.loaded .loader-bar, body.loaded .loader-pct { opacity: 0; transition: opacity 0.45s ease; }
body.loaded .loader { transform: translateY(-100%); transition: transform 1.05s cubic-bezier(0.76, 0, 0.24, 1) 0.4s; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 60; transition: background .5s var(--ease), box-shadow .5s; }
.site-header.scrolled { background: rgba(244, 237, 224, 0.8); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.header-inner { max-width: 1360px; margin: 0 auto; padding: 1.5rem 2.4rem; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand-mark { font-family: var(--serif); font-weight: 600; font-size: 1.45rem; width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--wine); border-radius: 50%; }
.brand-name { font-family: var(--serif); font-size: 1.2rem; letter-spacing: 0.07em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2.4rem; }
.nav a { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.nav a span { position: relative; display: inline-block; }
.nav a span::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--wine); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover span::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { border: 1px solid var(--gold); padding: 0.6rem 1.2rem; color: var(--wine) !important; transition: background .4s, color .4s; }
.nav-cta:hover { background: var(--wine); color: var(--cream) !important; }
.burger { display: none; background: none; border: 0; flex-direction: column; gap: 6px; }
.burger span { width: 26px; height: 1.5px; background: var(--ink); display: block; }

/* ============================================================
   FLYING 3D BOTTLE
   ============================================================ */
/* full-viewport clip layer: the moving/tilted bottle is clipped to the screen,
   so it can never cause a horizontal scroll (desktop or mobile) */
.flyer-clip {
  position: fixed; inset: 0; z-index: 25; overflow: hidden; pointer-events: none;
}
.flyer {
  position: absolute; top: 50%; left: 50%;
  width: 52vh; height: 86vh;
  margin: -43vh 0 0 -26vh;
  pointer-events: none; opacity: 0;   /* above sections, but BELOW the hero overlay (z30) */
  will-change: transform;
  filter: drop-shadow(0 38px 46px rgba(20, 4, 4, 0.42));
}
.flyer model-viewer { --poster-color: transparent; background: transparent; }
/* hide model-viewer's default loading bar — on the 38°-tilted bottle it shows as a diagonal line */
model-viewer::part(default-progress-bar),
model-viewer::part(default-progress-mask) { display: none !important; opacity: 0 !important; }
/* desktop: let the user grab & spin the bottle (wheel still scrolls) */
@media (hover: hover) and (pointer: fine) {
  .flyer { pointer-events: auto; }
}
/* collection bottles are interactive too */
.card-stage model-viewer, .slot-bottle model-viewer { pointer-events: auto; }
/* touch: a vertical swipe must SCROLL the page, not spin the bottle. pan-y lets
   model-viewer keep horizontal-drag orbit while the page scrolls (mouse unaffected). */
.flyer model-viewer, .card-stage model-viewer, .slot-bottle model-viewer { touch-action: pan-y; }
/* on real touch devices the bottles are display-only (no orbit) so a finger can
   NEVER get "stuck" spinning a bottle when the user just wants to scroll/swipe. */
@media (hover: none), (pointer: coarse) {
  .flyer model-viewer, .card-stage model-viewer, .slot-bottle model-viewer { pointer-events: none; }
}

/* ============================================================
   GENERAL SECTION RHYTHM
   ============================================================ */
main { position: relative; z-index: 10; }
.eyebrow { font-size: 0.76rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-soft); }
.eyebrow--gold { color: var(--gold); }

/* reveal primitives */
.reveal-up { opacity: 0; transform: translateY(28px); }
.line-reveal { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.line-reveal > span { display: inline-block; transform: translateY(108%); }
[data-words] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.18em; margin-bottom: -0.18em; }
[data-words] .word > i { display: inline-block; font-style: inherit; transform: translateY(110%); }
[data-split] .char { display: inline-block; transform: translateY(110%); opacity: 0; }

/* ============================================================
   HERO
   ============================================================ */
/* hero text lives in a root-level overlay that ALWAYS sits above the 3D bottle (z30 > flyer z25).
   click-through so you can still grab & spin the bottle behind it. */
.hero-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8rem 2rem 4rem; pointer-events: none;
}
.hero { min-height: 100vh; min-height: 100dvh; }   /* spacer only — reserves the scroll length */
.hero-overlay .eyebrow { margin-bottom: 2rem; }
.hero-title { font-family: var(--serif); font-weight: 500; font-size: clamp(5rem, 20vw, 18rem); line-height: 0.9; letter-spacing: 0.04em; color: var(--wine); }
.hero-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3vw, 2rem); color: var(--ink-soft); margin-top: 1.2rem; }
.scroll-hint { position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.scroll-txt { font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); }
.scroll-line { width: 1px; height: 56px; background: linear-gradient(var(--gold), transparent); transform-origin: top; animation: scrollPulse 2.2s var(--ease) infinite; }
@keyframes scrollPulse { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  position: relative; min-height: 96vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 13rem clamp(1.5rem, 6vw, 8rem);
  background: radial-gradient(90% 70% at 50% 50%, #4a0f0f 0%, var(--wine-deep) 55%, var(--wine-dark) 100%);
  color: var(--cream); overflow: hidden;
}

/* crisp wave dividers (cream, matched to the neighbouring section) */
.wave { position: absolute; left: 0; width: 100%; height: 110px; z-index: 1; pointer-events: none; display: block; }
.wave path { fill: var(--cream); }
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; transform: scale(-1, -1); }
.manifesto-kicker { font-size: 0.76rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-bottom: 2.2rem; position: relative; z-index: 2; }
.manifesto-text { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.8vw, 4.2rem); line-height: 1.18; max-width: 22ch; color: var(--cream); position: relative; z-index: 2; }
.manifesto-text .word > i { color: var(--cream); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { overflow: hidden; padding: 1.4rem 0; }
.marquee-track { display: flex; align-items: center; gap: 2.5rem; white-space: nowrap; width: max-content; will-change: transform; }
.marquee-track span { font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.6rem); color: var(--wine); text-transform: uppercase; letter-spacing: 0.04em; }
.marquee-track i { color: var(--gold); font-style: normal; font-size: 1.2rem; }

/* ============================================================
   CHAPTERS
   ============================================================ */
.chapter { min-height: 118vh; display: flex; align-items: center; padding: 6rem clamp(2rem, 8vw, 10rem); position: relative; }
.chapter--left { justify-content: flex-start; }
.chapter--right { justify-content: flex-end; }
.chapter-body { max-width: 30rem; position: relative; z-index: 2; }
.chapter--right .chapter-body { text-align: right; }
.ghost-num { position: absolute; font-family: var(--serif); font-weight: 500; font-size: clamp(20rem, 42vw, 48rem); line-height: 0.7; color: rgba(90, 18, 18, 0.05); top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none; }
.chapter--left .ghost-num { right: 6%; }
.chapter--right .ghost-num { left: 6%; }
.ghost-num--wine { color: rgba(90, 18, 18, 0.08); }
.chapter-index { font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.6rem; }
.chapter-title { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 6.4vw, 5.6rem); line-height: 0.98; color: var(--wine); margin-bottom: 1.8rem; }
.chapter-text { font-size: 1.14rem; line-height: 1.8; color: var(--ink-soft); font-weight: 300; }
.chapter-text em { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--wine); }
.chapter-note { margin-top: 2rem; font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 1.2rem; display: inline-block; }
.notes { list-style: none; margin-top: 2.2rem; }
.notes li { display: flex; justify-content: space-between; gap: 2rem; padding: 0.9rem 0; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); font-weight: 300; }
.chapter--right .notes li { flex-direction: row-reverse; }
.notes li span { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); align-self: center; }

/* ============================================================
   STATS
   ============================================================ */
.stats { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 7rem clamp(2rem, 8vw, 10rem); background: linear-gradient(180deg, transparent, rgba(90,18,18,0.04) 50%, transparent); }
.stat { text-align: center; position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: -1rem; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(transparent, var(--line), transparent); }
.stat-num { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 6vw, 5rem); color: var(--wine); line-height: 1; }
.stat-unit { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); margin-left: 0.2rem; }
.stat p { margin-top: 0.8rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

/* ============================================================
   COLLECTION
   ============================================================ */
.collection {
  background: radial-gradient(110% 75% at 50% 25%, #4a0f0f 0%, var(--wine-deep) 50%, var(--wine-dark) 100%);
  color: var(--cream); padding: 13rem 2rem 9rem; position: relative; overflow: hidden;
}
.collection-head { text-align: center; max-width: 42rem; margin: 0 auto 6rem; position: relative; z-index: 2; }
.collection-head .eyebrow { margin-bottom: 0.8rem; }
.collection-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.05; margin-bottom: 1.4rem; }
.collection-lead { color: var(--gold-soft); font-weight: 300; line-height: 1.7; font-size: 1.05rem; }

.shelf { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(0.5rem, 1.6vw, 1.6rem); align-items: end; position: relative; z-index: 2; }
/* desktop: the track is transparent so the 5 cards are direct grid items;
   mobile turns it into a flex row that we slide with transform (see below) */
.shelf-track { display: contents; }
.shelf-nav { display: none; }   /* arrows + dots — only shown on the mobile carousel */
.card { text-align: center; }
.card-stage { height: 320px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.card-stage model-viewer { width: 100%; height: 320px; --poster-color: transparent; background: transparent; }

/* center / feature slot */
.slot-anchor { height: 320px; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.slot-bottle { position: absolute; inset: 0; opacity: 0; }
.slot-bottle model-viewer { width: 100%; height: 320px; --poster-color: transparent; background: transparent; }
.slot-ghost { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .6s var(--ease); }
.ghost-frame { width: 72px; height: 250px; border: 1px dashed rgba(216,193,138,0.4); border-radius: 6px 6px 2px 2px; position: relative; }
.ghost-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); white-space: nowrap; }
.card--filled .slot-ghost { opacity: 0; }

.card-meta { margin-top: 1.6rem; }
.card-name { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.1; }
.card-cuvee { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); margin-top: 0.4rem; }
.card-price { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); margin-top: 1rem; }
.card-buy { display: inline-block; margin-top: 1rem; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); border-bottom: 1px solid var(--gold); padding-bottom: 3px; text-decoration: none; opacity: 0.85; transition: opacity .3s, letter-spacing .3s; }
.card-buy:hover { opacity: 1; letter-spacing: 0.24em; }
.card--feature .card-name { color: var(--gold-soft); }
.card--feature .card-meta { opacity: 0; transform: translateY(14px); }
.card--filled .card-meta { opacity: 1; transform: none; transition: all .8s var(--ease) .2s; }

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position: relative; min-height: 88vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8rem 2rem;
  background:
    radial-gradient(70% 55% at 50% 52%, rgba(132, 34, 34, 0.38), transparent 72%),
    linear-gradient(180deg, var(--wine-dark) 0px, #4a0f0f 38%, var(--wine-dark) 100%);
  color: var(--cream); overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(194,161,77,0.16), transparent 60%);
  top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
}
.cta .eyebrow { margin-bottom: 1.2rem; position: relative; z-index: 2; }
.cta-title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1; color: var(--cream); margin-bottom: 2.6rem; position: relative; z-index: 2; }
.cta-title .word > i { color: var(--cream); }
.cta-btn { position: relative; z-index: 2; display: inline-block; padding: 1.2rem 3.2rem; border: 1px solid var(--gold); color: var(--gold-soft); text-decoration: none; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; overflow: hidden; }
.cta-btn span { position: relative; z-index: 2; transition: color .5s var(--ease); }
.cta-btn::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateY(101%); transition: transform .5s var(--ease); }
.cta-btn:hover::before { transform: translateY(0); }
.cta-btn:hover span { color: var(--wine-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--wine-dark); color: var(--cream-2); padding: 5rem 2rem 2.5rem; }
.footer-inner { max-width: 1320px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 3rem; justify-content: space-between; }
.footer-brand { display: flex; gap: 1rem; align-items: center; }
.footer-brand .brand-mark { color: var(--gold); border-color: var(--gold); }
.footer-brand p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; }
.footer-brand small { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--gold-soft); }
.footer-cols { display: flex; gap: 4rem; flex-wrap: wrap; }
.footer-cols h4 { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; font-weight: 500; }
.footer-cols a { display: block; text-decoration: none; font-size: 0.9rem; font-weight: 300; margin-bottom: 0.6rem; opacity: 0.8; }
.footer-cols a:hover { opacity: 1; color: var(--gold-soft); }
.footer-bottom { max-width: 1320px; margin: 3.5rem auto 0; padding-top: 1.6rem; border-top: 1px solid rgba(216,193,138,0.16); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(216,193,138,0.6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  body.nav-open .nav { display: flex; flex-direction: column; gap: 1.4rem; position: absolute; top: 100%; right: 0; left: 0; background: var(--cream); padding: 2rem; box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 3rem 1rem; }
  /* collection = a TRANSFORM-driven focus carousel (NO native horizontal scroll):
     a vertical swipe always scrolls the page and can never get stuck on the bottles.
     Change bottle via arrows / dots / a clearly-horizontal swipe. The centred one
     is in focus (bigger, sharp); neighbours are smaller + dimmed. */
  .shelf {
    display: block; overflow: hidden; padding: 0; touch-action: pan-y;
    /* soften the extreme edges so peeking bottles don't hard-cut */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  }
  .shelf-track {
    display: flex; align-items: end; gap: 4vw; position: relative;
    transition: transform .55s var(--ease); will-change: transform; touch-action: pan-y;
  }
  /* every element inside the collection is strictly vertical-pan for touch, so a
     downward swipe ALWAYS scrolls the page no matter which bottle/part you touch
     (on phones the 3D bottles are pointer-events:none, so the touch lands here) */
  .shelf, .shelf-track, .card, .card-stage, .card-meta,
  .slot-anchor, .slot-ghost, .card-stage model-viewer, .slot-bottle model-viewer { touch-action: pan-y; }
  .card { flex: 0 0 46vw; transition: opacity .45s var(--ease); }
  .card--feature { grid-column: auto; flex: 0 0 46vw; }
  .card .card-stage { transition: transform .45s var(--ease); transform-origin: 50% 100%; }
  /* out-of-focus neighbours: smaller + faded */
  .card:not(.is-centered) { opacity: .42; }
  .card:not(.is-centered) .card-stage { transform: scale(.78); }
  .card.is-centered .card-stage { transform: scale(1); }
  /* navigation: arrows + dots */
  .shelf-nav { display: flex; align-items: center; justify-content: center; gap: 1.3rem; margin-top: 2rem; position: relative; z-index: 2; }
  .shelf-arrow {
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--gold);
    background: transparent; color: var(--gold-soft); display: grid; place-items: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s, color .3s;
  }
  .shelf-arrow svg { width: 20px; height: 20px; }
  .shelf-arrow:active { background: var(--gold); color: var(--wine-dark); }
  .shelf-arrow:disabled { opacity: .3; }
  .shelf-dots { display: flex; gap: .55rem; }
  .shelf-dot { width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(216,193,138,0.28); cursor: pointer; transition: background .3s, transform .3s; }
  .shelf-dot.is-active { background: var(--gold); transform: scale(1.35); }
  .flyer { width: 64vw; height: 70vh; margin: -35vh 0 0 -32vw; }
  .chapter { min-height: 92vh; }
  .chapter--left, .chapter--right { justify-content: center; }
  .chapter-body, .chapter--right .chapter-body { text-align: center; max-width: 26rem; }
  .chapter--right .notes li { flex-direction: row; }
  .ghost-num { font-size: 36vw; }
}
@media (max-width: 520px) {
  .card, .card--feature { flex-basis: 54vw; }
  .header-inner { padding: 1.1rem 1.3rem; }
}
/* NB: we intentionally do NOT disable animations under prefers-reduced-motion —
   the experience is animation-driven (like the reference project), and the text
   reveals must always play. */

/* ============================================================
   PREMIUM DRESSING — frame · edges · ornaments
   ============================================================ */
.frame { position: fixed; inset: 16px; border: 1px solid rgba(194,161,77,0.28); z-index: 40; pointer-events: none; }
.frame-corner { position: absolute; width: 16px; height: 16px; }
.frame-corner::before, .frame-corner::after { content: ""; position: absolute; background: var(--gold); }
.frame-corner::before { width: 16px; height: 1px; }
.frame-corner::after { width: 1px; height: 16px; }
.frame-corner.tl { top: -1px; left: -1px; }
.frame-corner.tr { top: -1px; right: -1px; }
.frame-corner.tr::before { right: 0; } .frame-corner.tr::after { right: 0; }
.frame-corner.bl { bottom: -1px; left: -1px; }
.frame-corner.bl::before { bottom: 0; } .frame-corner.bl::after { bottom: 0; }
.frame-corner.br { bottom: -1px; right: -1px; }
.frame-corner.br::before { bottom: 0; right: 0; } .frame-corner.br::after { bottom: 0; right: 0; }

.edge { position: fixed; top: 50%; z-index: 41; pointer-events: none;
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(194,161,77,0.75); writing-mode: vertical-rl; }
.edge-left { left: 30px; transform: translateY(-50%) rotate(180deg); }
.edge-right { right: 30px; transform: translateY(-50%); }

/* hero atmosphere */
.hero-glow { position: absolute; z-index: 0; width: 78vmin; height: 78vmin; left: 50%; top: 47%;
  transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(90,18,18,0.16) 0%, rgba(194,161,77,0.07) 38%, transparent 66%);
  filter: blur(6px); }
.hero-plate { display: inline-flex; align-items: center; gap: 1.3rem; margin-top: 2.4rem;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); position: relative; z-index: 2; }
.hero-plate i { width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); display: inline-block; }

/* flanked eyebrow */
.eyebrow--flanked { display: inline-flex; align-items: center; gap: 1.3rem; overflow: visible; }
.eyebrow--flanked::before, .eyebrow--flanked::after { content: ""; width: 52px; height: 1px; background: var(--gold); opacity: 0.7; }

/* filigree divider above each chapter title block */
.chapter-index { position: relative; padding-top: 2.2rem; }
.chapter-index::before { content: "✦"; position: absolute; top: 0; font-size: 0.7rem; color: var(--gold); }
.chapter--right .chapter-index::before { right: 0; }

/* hide edge captions on small screens */
@media (max-width: 720px) {
  .edge { display: none; }
  .frame { inset: 10px; }
}

/* ============================================================
   GLOBE FINALE — split-screen (media + content), social proof, pill button
   ============================================================ */
.globe-cta { padding: 8rem 2rem; min-height: 100vh; }
.globe-cta .split {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(2rem, 5vw, 5rem); position: relative; z-index: 2;
}
.split-media { display: flex; justify-content: center; }
.globe-wrap { position: relative; width: min(460px, 44vw); aspect-ratio: 1 / 1; }
#cobe { width: 100%; height: 100%; cursor: grab; opacity: 0; transition: opacity 1.4s var(--ease); touch-action: pan-y; }
.globe-hint { position: absolute; bottom: -0.4rem; left: 50%; transform: translateX(-50%); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(216,193,138,0.5); pointer-events: none; }

.split-content { text-align: left; }
.split-content .eyebrow { margin-bottom: 1.4rem; }
.globe-cta .cta-title { text-align: left; margin-bottom: 1.2rem; }
.cta-sub { color: var(--gold-soft); font-weight: 300; line-height: 1.6; max-width: 42ch; margin: 0 0 2.2rem; text-align: left; }

/* social proof — overlapping score badges + stat */
.social-proof { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2.4rem; }
.proof-badges { display: flex; }
.badge { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--wine-dark); background: var(--gold-soft); border: 2px solid #4a0f0f; margin-left: -14px; box-shadow: 0 6px 14px rgba(0,0,0,0.35); }
.badge:first-child { margin-left: 0; }
.badge--star { background: var(--gold); }
.proof-text { display: flex; flex-direction: column; }
.proof-text strong { font-family: var(--serif); font-size: 1.3rem; color: var(--cream); line-height: 1; }
.proof-text span { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--gold-soft); margin-top: 0.25rem; }

/* pill button — sliding arrow flies out, a fresh one flies in (group hover swaps colours) */
.pill-btn { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.pill-btn__label {
  background: var(--gold); color: var(--wine-dark);
  padding: 1.05rem 1.7rem; border-radius: 100px;
  font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.pill-btn__icon {
  position: relative; display: grid; place-items: center; width: 54px; height: 54px;
  border-radius: 50%; background: var(--gold); color: var(--wine-dark); overflow: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}
.pill-btn__icon .arr { position: absolute; width: 20px; height: 20px; transition: transform .5s var(--ease); }
.pill-btn__icon .arr-1 { transform: translate(0, 0); }
.pill-btn__icon .arr-2 { transform: translate(-140%, 140%); }
.pill-btn:hover .pill-btn__icon .arr-1 { transform: translate(140%, -140%); }
.pill-btn:hover .pill-btn__icon .arr-2 { transform: translate(0, 0); }
.pill-btn:hover .pill-btn__label, .pill-btn:hover .pill-btn__icon { background: var(--wine-dark); color: var(--gold); }

@media (max-width: 900px) {
  .globe-cta .split { grid-template-columns: 1fr; gap: 3rem; }
  .split-content { text-align: center; }
  .globe-cta .cta-title, .cta-sub { text-align: center; }
  .cta-sub { margin-left: auto; margin-right: auto; }
  .social-proof { justify-content: center; }
  .pill-btn { justify-content: center; }
  .globe-wrap { width: min(420px, 80vw); }
}

/* ============================================================
   MOBILE & TABLET REFINEMENTS
   ============================================================ */

/* real mobile viewport height on the big split sections too (URL-bar safe) */
@supports (height: 100dvh) {
  .globe-cta { min-height: 100dvh; }
}

/* larger, comfortable tap targets for the mobile menu */
@media (max-width: 900px) {
  .burger { padding: 10px; margin: -10px -8px -10px 0; }
  body.nav-open .nav {
    gap: 0.4rem; padding: 1.4rem 2rem 2rem; align-items: stretch; text-align: center;
  }
  body.nav-open .nav a { padding: 0.85rem 0; font-size: 0.9rem; }
  body.nav-open .nav .nav-cta { margin-top: 0.4rem; }
}

/* ---- Tablet (portrait & small landscape) ---- */
@media (max-width: 1024px) {
  .header-inner { padding: 1.3rem 1.8rem; }
  .chapter { min-height: 100vh; padding: 5rem clamp(1.6rem, 6vw, 6rem); }
  .manifesto { padding: 11rem clamp(1.4rem, 6vw, 5rem); }
  .collection { padding: 11rem 1.6rem 7rem; }
}

/* ---- Phones ---- */
@media (max-width: 600px) {
  .hero-overlay { padding: 6rem 1.2rem 4.5rem; }
  .hero-sub { margin-top: 0.9rem; }
  .hero-plate { flex-wrap: wrap; justify-content: center; gap: 0.6rem 1rem; margin-top: 1.8rem; }
  .eyebrow--flanked::before, .eyebrow--flanked::after { width: 28px; }
  .scroll-hint { bottom: 1.6rem; }

  .manifesto { min-height: 80vh; padding: 8rem 1.3rem; }
  .manifesto-text { max-width: 18ch; }

  .chapter { min-height: 78vh; padding: 4.5rem 1.4rem; }
  .chapter-text { font-size: 1.02rem; line-height: 1.7; }
  .chapter-note { margin-top: 1.6rem; }
  .notes li { font-size: 0.98rem; gap: 1rem; }

  .stats { gap: 2.6rem 1rem; padding: 5rem 1.4rem; }

  .collection { padding: 8rem 0 6rem; }
  .collection-head { margin-bottom: 3.4rem; padding: 0 1.2rem; }
  .card-name { font-size: 1.4rem; }

  .globe-cta { padding: 6rem 1.3rem; }
  .globe-wrap { width: min(340px, 82vw); }
  .social-proof { flex-wrap: wrap; gap: 0.9rem; }

  .site-footer { padding: 4rem 1.4rem 2.5rem; }
  .footer-inner { gap: 2.4rem; }
  .footer-cols { gap: 2.2rem; }
}

/* very small phones — keep the hero wordmark from overflowing */
@media (max-width: 380px) {
  .hero-title { font-size: clamp(4rem, 22vw, 6rem); }
  .brand-name { font-size: 1.05rem; }
}