/* ============================================================
   S778 - v2 landing concept, CINEMATIC CUT (2026-09-05)
   One tall runway, one sticky 100vh stage, one paper background.
   The bottle sits centred the whole way and spins / zooms / tilts
   through a beat timeline (scripts/v2.js); herbs, the cap and relief
   takes, the inner label, the award prints and the landing slab are
   layers in the stage that the same timeline drives.
   Standalone stylesheet: only tokens.css is shared with v1; nothing
   here touches main.css.
   Progressive enhancement law: without body.v2-js the stage is a plain
   block, every .fx layer is hidden, every copy block is in flow, and
   the hero carries a static fallback render - the resting page is
   complete. Reduced motion takes the same path.
   ============================================================ */

/* Cinzel: patched Dcroat set, self-hosted (never Google Cinzel) */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cinzel-400.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cinzel-500.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cinzel-700.woff2") format("woff2");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  color: var(--charcoal);
  background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step-eyebrow);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: 1.1rem;
}
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: .04em; }

.btn {
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.4rem;
  border: 1px solid var(--bronze);
  color: var(--charcoal);
  background: transparent;
  cursor: pointer;
  display: inline-block;
  transition: background .4s var(--ease-settle), color .4s var(--ease-settle);
}
.btn.primary { background: var(--bronze); color: var(--charcoal); }
.btn.primary:hover { background: var(--paper); }
.btn.ghost:hover { background: rgba(199, 163, 135, .18); }
.btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* ---------- loading gate ---------- */
.gate2 {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--paper-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity .62s var(--ease-settle);
}
.gate2.away { opacity: 0; pointer-events: none; }
/* ---- the swallow (2026-09-04) ------------------------------------------
   The gate no longer just fades: the monogram opens into a hole and the hole
   eats the screen, so the visitor arrives THROUGH the mark. Reference is a
   CapCut chroma-key text zoom; on the web the green screen is unnecessary,
   an SVG mask is the same thing done honestly.
   While .swallowing runs, .g2-swallow IS the paper - the gate's own
   background must get out of the way or it would cover the hole. */
/* the sheet's own .62s opacity transition would smear the tail crossfade
   over half a second and leave it lagging the scale; during the swallow
   the JS owns opacity outright. */
.gate2.swallowing { background: transparent; transition: none; }
.gate2.swallowing .g2-monogram,
.gate2.swallowing .g2-line,
.gate2.swallowing .g2-tag { opacity: 0; transition: opacity .18s linear; }
.g2-swallow {
  position: absolute;
  inset: 0;
  /* an absolutely positioned <svg> is a REPLACED element: inset:0 alone does
     not stretch it, width:auto falls back to the 300x150 intrinsic default and
     the sheet ends up a small rectangle in the corner. State both. */
  width: 100%;
  height: 100%;
  display: none;
  /* no viewBox on the element, so 1 user unit = 1 CSS px and the JS can hand
     the mask plain client-rect numbers */
}
.gate2.swallowing .g2-swallow { display: block; }
/* The sheet reads CHARCOAL (Marko 2026-09-04: "do charcoal yes good"). It is
   declared paper here on purpose: that is the colour of the gate the visitor is
   already looking at, so the swallow's first frame is seamless, and v2.js then
   darkens the fill to --charcoal over DARKEN_MS while the hole is still small.
   Cutting straight to black on frame one reads as a rendering fault, not a
   cinematic one. Paper is also the safe resting value if the fill is never
   driven. */
.g2-sheet { fill: var(--paper-warm); }
/* the zoom rides on the mask's glyph group. view-box + 0 0 origin keeps the
   px the JS computes meaning the same thing here as in getBoundingClientRect.
   House rule: this transform is SCRUBBED, so v2.js writes it through
   element.style, never setAttribute - the stylesheet would win otherwise. */
#g2-zoom {
  transform-box: view-box;
  transform-origin: 0 0;
  will-change: transform;
}
/* the author display:flex above beats the [hidden] UA rule; restore it */
.gate2[hidden] { display: none; }
/* the mark is the statement (Marko 2026-09-05: "make the loading gate logo
   larger and more like a 'statement'"). The swallow registers to this box,
   so a bigger mark also means a gentler zoom (~40x instead of ~175x). */
.g2-monogram { width: min(46vw, 560px); height: auto; }
.g2-line {
  width: min(26vw, 300px);
  height: 1px;
  background: rgba(143, 127, 117, .3);
  position: relative;
  overflow: hidden;
}
.g2-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform-origin: left center;
  transform: scaleX(var(--g2p, 0));
  transition: transform .3s linear;
}
.g2-tag {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  padding-left: .42em; /* optical centre against the tracking */
}

/* ---------- header: the floating pill (v1's, ported) ----------
   The pill never owns a band of the page and carries its own frosted paper
   ground, so it reads on the dark half without any ink flip. Condenses on
   scroll DOWN (links fold away), expands on scroll UP or near the top
   (v2.js). Progressive enhancement: the CSS default is on-screen + expanded. */
.site-header {
  position: fixed;
  top: max(.9rem, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  padding: .45rem .5rem .45rem 1.05rem;
  border-radius: 999px;
  color: var(--charcoal);
  background: rgba(250, 247, 240, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(34, 34, 31, .1);
  box-shadow: 0 10px 30px rgba(34, 34, 31, .12);
  transition: transform .65s var(--ease-settle), opacity .5s var(--ease-settle);
}
.pill-links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  max-width: 30rem;
  padding: 0 .8rem 0 1.3rem;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width .55s var(--ease-settle), opacity .35s var(--ease-settle), padding .55s var(--ease-settle);
}
.site-header.condensed .pill-links { max-width: 0; padding: 0; opacity: 0; }
.pill-links a {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: color .3s var(--ease-settle);
}
.pill-links a:hover { color: var(--bronze-deep); }
.pill-tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  padding: 0 .9rem 0 .4rem;
}
/* the real monogram as a currentColor MASK (same alpha as the gate's
   carve), never an <img>: it takes the pill's charcoal ink for free */
.wordmark { display: block; color: inherit; text-decoration: none; }
.wordmark-mark {
  display: block;
  width: clamp(58px, 4.6vw, 70px);
  aspect-ratio: 1200 / 548;
  background: currentColor;
  -webkit-mask: url("/assets/monogram-mask-1200.png") center / contain no-repeat;
  mask: url("/assets/monogram-mask-1200.png") center / contain no-repeat;
}
@media (max-width: 860px) {
  .pill-links { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .pill-links { transition: none; }
}

/* ---------- the runway + the stage ---------- */
.runway { position: relative; }
/* --runway is set by v2.js: the sum of the beats + one screen, in vh, so the
   sticky stage stays put for exactly the length of the story */
body.v2-js .runway { height: calc(var(--runway, 1700) * 1vh); }
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
}
body.v2-js .stage {
  position: sticky;
  top: 0;
  min-height: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}
/* fx layers exist for the engine only */
.fx { display: none; }
body.v2-js .fx { display: block; }
body.v2-js .nojs-only { display: none !important; }

/* ---------- the world: colour + depth behind everything ---------- */
.world {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: clip;
  pointer-events: none;
}
/* the colour journey: a tall gradient (stops laid on the beats by v2.js)
   that drifts up at a fraction of scroll speed */
.world-grad {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--wh, 360vh);
  background: var(--paper);
  will-change: transform;
}
/* the materials: full-bleed texture plates with soft top/bottom edges so
   their parallax drift never shows a seam. Windows + transforms in v2.js. */
.tex {
  position: absolute;
  left: 0;
  right: 0;
  top: -40vh;
  height: 180vh;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
/* summit: the limestone under the paper, multiplied so it reads as grain
   in the stone, not a photo behind the page */
.tex-karst {
  background-image: url("/assets/rock-face.webp");
  mix-blend-mode: multiply;
}
/* stone: the emboss wall; its clear middle is exactly where the bottle is */
.tex-wall {
  background-image: url("/assets/spin-suhozid-emboss.webp");
  background-position: center bottom;
}
/* depths: the inner label, huge, the island behind the glass */
.tex-inner {
  background-image: url("/assets/label-inner.webp");
  /* the island and the 778 sit right of the artwork's centre; 38% puts them
     behind the glass instead of beside the copy */
  background-position: 38% 56%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 74%, transparent 100%);
}
/* the maquis: two branches hanging into the summit frame, soft-focus, a
   touch of depth of field in front of the karst and behind everything else */
.canopy {
  position: absolute;
  width: min(44vw, 620px);
  opacity: 0;
  filter: blur(1.4px) saturate(.88);
  pointer-events: none;
  will-change: transform, opacity;
}
.canopy img { width: 100%; height: auto; }
#canopy-l { left: -7vw; top: -7vh; }
#canopy-r { right: -9vw; top: -5vh; transform: scaleX(-1); }

/* SUNCE. Disc + halo upper left, no parallax (it is the sky), leaving as
   the stone rises. The shafts are three soft diagonal bands of its light
   through the branches, blurred wide so they read as air, not stripes. */
.sun {
  position: absolute;
  left: 15vw;
  top: 4vh;   /* the disc hangs behind the juniper, not above the frame */
  width: 70vmax;
  height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 253, 244, 1) 0, rgba(255, 250, 232, .96) 3.2%, rgba(255, 244, 214, .7) 5.5%,
    rgba(253, 240, 205, .32) 10%, rgba(250, 236, 200, .12) 20%, rgba(250, 236, 200, 0) 40%);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.shafts {
  position: absolute;
  inset: -20vh -12vw;
  background: linear-gradient(112deg,
    transparent 18%, rgba(255, 250, 232, .5) 23%, transparent 29%,
    transparent 37%, rgba(255, 250, 232, .34) 43%, transparent 50%,
    transparent 58%, rgba(255, 250, 232, .26) 62%, transparent 68%);
  filter: blur(22px);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
/* MORE. The sea plate surfaces from the dark: soft top mask so the sky
   dissolves out of the charcoal above it */
.tex-sea {
  background-image: url("/assets/plates/plate-v13.webp");
  background-position: 50% 64%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%);
}
/* the sun's path on the water: v2.js draws slow glints into this strip */
.glint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 40vh;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity;
}
/* paper / stone grain, static, very low */
.world-grain {
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .25 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.stage.dark .world-grain { mix-blend-mode: screen; opacity: .05; }
/* bronze glow behind the slab at sea level: sun on the water */
.horizon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140vw;
  height: 46vh;
  margin-left: -70vw;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 232, 196, .42) 0, rgba(240, 205, 160, .16) 30%, rgba(240, 205, 160, 0) 64%);
  opacity: 0;
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: opacity;
}
/* a pool of light that keeps the bottle lit once the world goes dark */
.spot {
  position: absolute;
  left: 0;
  top: 0;
  width: 90vw;
  height: 110vh;
  margin: -55vh 0 0 -45vw;
  background: radial-gradient(ellipse at 50% 50%, rgba(250, 247, 240, .14) 0, rgba(250, 247, 240, .05) 34%, rgba(250, 247, 240, 0) 68%);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity;
}
/* the ghost section words, carved into the ground at mid depth */
.gwords { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: clip; }
.gword {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 12vw, 11rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: rgba(117, 101, 90, .30);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .30);
  transform: translate(-50%, -50%);
  will-change: transform;
  user-select: none;
}
/* on the dark half the relief flips: raised, lit from the upper left */
.stage.dark .gword {
  color: rgba(250, 247, 240, .085);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .45), -1px -1px 0 rgba(250, 247, 240, .08);
}
/* the gauge lives in a strip that fades under the header and above the
   altimeter readout, so labels never collide with either */
.gauge-clip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 120px;
  z-index: 5;
  pointer-events: none;
  overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12vh, #000 calc(100% - 10vh), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12vh, #000 calc(100% - 10vh), transparent 100%);
}
/* the altitude gauge: a ruler on the right edge, moving at scroll speed,
   labelled every 50 m (778 -> 0). v2.js builds the labels and scales the
   tick period to the real descent. */
.gauge {
  position: absolute;
  right: clamp(1rem, 3.2vw, 2.4rem);
  top: 0;
  width: 44px;
  height: var(--gh, 100vh);
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, rgba(117, 101, 90, .45) 0 1px, transparent 1px var(--tick, 99px));
  background-position: right top;
  background-size: 9px 100%;
  background-repeat: no-repeat;
  will-change: transform;
}
.gauge span {
  position: absolute;
  right: 14px;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  color: rgba(117, 101, 90, .7);
  transform: translateY(-50%);
}
.gauge span::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 12px;
  height: 1px;
  margin-left: 2px;
  background: rgba(117, 101, 90, .7);
}
.stage.dark .gauge { background-image: repeating-linear-gradient(180deg, rgba(199, 163, 135, .32) 0 1px, transparent 1px var(--tick, 99px)); }
.stage.dark .gauge span { color: rgba(199, 163, 135, .72); }
.stage.dark .gauge span::after { background: rgba(199, 163, 135, .72); }

/* ---------- the dark half: paper ink on the descent into the sea ---------- */
.stage.dark .bc, .stage.dark .bc h2 { color: var(--paper); }
.stage.dark .bc .lead { color: rgba(250, 247, 240, .82); }
.stage.dark .eyebrow { color: var(--bronze); }
.stage.dark .ledger li { border-color: rgba(199, 163, 135, .28); }
.stage.dark .ledger .yr { color: var(--bronze); }
.stage.dark .lb-cap, .stage.dark .po-price { color: var(--bronze); }
.stage.dark .po-name { color: var(--paper); }
.stage.dark .flank { color: var(--paper); }
.stage.dark .btn { color: var(--paper); }
.stage.dark .btn.primary { color: var(--charcoal); }
.stage.dark .btn.primary:hover { background: var(--paper); }

/* ---------- 00 hero UI ---------- */
.hero-ui {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  z-index: 10;
}
body.v2-js .hero-ui {
  position: absolute;
  inset: 0;
  min-height: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
body.v2-js .hero-ui .cta-row a { pointer-events: auto; }
body.v2-js .hero-ui.gone { display: none; }
.giant {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: .96;
  user-select: none;
  pointer-events: none;
  /* the type rides the intro WITH the bottle: v2.js drives these vars
     through the two strides, then a slow grow over beat 0. No-JS /
     reduced motion: defaults = at rest. */
  transform: scale(var(--hgs, 1));
  opacity: var(--hgo, 1);
  will-change: transform, opacity;
}
.gl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 12.5vw, 11.5rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* SUNCE / STINA are CARVED into the paper, not outlined (Marko 2026-09-05:
   "ugly lines"): a tone-on-tone fill, a light lip below-right, a shadow lip
   above-left - blind deboss, the language of the label's emboss and the v1
   gate's carved monogram. "Isklesan u stini." */
.gl.hollow {
  /* a solid warm taupe, clearly darker than the ground, with only a faint
     light lip. The first carve had a near-transparent fill and a strong
     white lip, so the lip was all you saw: "white on white" (Marko). */
  color: rgba(117, 101, 90, .58);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .38);
}
.gl.solid { color: var(--charcoal); }
.hero2-top {
  position: absolute;
  top: max(11vh, 86px);
  left: 0;
  right: 0;
  text-align: center;
}
.hero2-top .eyebrow { margin-bottom: 0; }
/* no-JS: the static render stands where the canvas bottle would */
.bottle-fallback {
  height: 70vh;
  width: auto;
  margin: 15vh auto 0;
  filter: drop-shadow(18px 30px 26px rgba(34, 34, 31, .34));
}
body.v2-js .bottle-fallback { display: none; }
.hero2-bottom {
  position: absolute;
  bottom: 4.5vh;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.scroll-cue {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.scroll-cue span {
  display: block;
  width: 1px;
  height: 34px;
  background: var(--bronze-deep);
  overflow: hidden;
  position: relative;
}
.scroll-cue span::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--bronze);
  animation: cue-drop 2.2s var(--ease-settle) infinite;
}
@keyframes cue-drop { to { top: 100%; } }
.hero2-corner {
  position: absolute;
  left: clamp(1.2rem, 4vw, 3rem);
  bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  pointer-events: none;
}
/* the hero's own animate-in (armed by JS only, fired by the intro) */
body.v2-js .anim {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition: opacity .9s var(--ease-settle), transform .9s var(--ease-settle);
}
body.v2-js .hero-ui.hero-in .anim {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------- the bottle (one canvas, three frame sets) ---------- */
.bottle-layer {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
#bottle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  /* no filter here on purpose: the one-sun shadow is drawn into the bitmap
     by v2.js (a CSS drop-shadow on this zooming layer cost 4.5% doubled
     frames through the close-ups) */
}

/* ---------- 01 herbs: the orbit ---------- */
.herbs { position: absolute; inset: 0; pointer-events: none; }
.herb {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--hw, 160px);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
/* depth: v2.js flips the class by the orbit angle; the canvas sits at z50 */
.herb.back { z-index: 40; }
.herb.front { z-index: 60; }
.herb img {
  width: 100%;
  height: auto;
  filter: drop-shadow(8px 14px 14px rgba(34, 34, 31, .22));
}
/* v1 callout language, name only, under the settled sprig */
.hname {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: .45rem;
  text-align: center;
  white-space: nowrap;
  opacity: var(--no, 0);
}
.hname b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: .05em;
  color: var(--charcoal);
}
.hname small {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}

/* ---------- 04 inner label art ---------- */
.labelart {
  position: absolute;
  right: 5vw;
  top: 50%;
  width: min(36vw, 560px);
  transform: translate(14vw, -50%);
  opacity: 0;
  z-index: 60;
  pointer-events: none;
  will-change: transform, opacity;
}
.labelart img {
  width: 100%;
  height: auto;
  border: 6px solid #fff;
  box-shadow: 12px 18px 26px rgba(34, 34, 31, .28);
}
.lb-cap {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  text-align: center;
  margin-top: .7rem;
}

/* ---------- 05 award prints ---------- */
.awards { position: absolute; inset: 0; pointer-events: none; }
.print {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--ph, 260px);
  opacity: 0;
  z-index: 62;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.print img {
  height: 100%;
  width: auto;
  border: 6px solid #fff;
  box-shadow: var(--sun-shadow-soft);
}

/* ---------- 06 the slab + the flank formats ---------- */
.slab {
  position: absolute;
  left: 50%;
  bottom: 11vh;   /* room under it for the format tags */
  width: min(58vw, 820px, 100vh);
  transform: translate(-50%, 30vh);
  opacity: 0;
  z-index: 40;
  pointer-events: none;
  will-change: transform, opacity;
}
.slab img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(34, 34, 31, .26));
}
/* the front copy: only the rock below its top face, drawn OVER the bottles
   so their bases disappear behind the edge */
.slab-front { z-index: 55; }
.slab-front img { clip-path: inset(34% 0 0 0); filter: none; }
/* contact shadow on the top face under each base */
.contact {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw, 200px);
  height: calc(var(--cw, 200px) * .16);
  margin: calc(var(--cw, 200px) * -.08) 0 0 calc(var(--cw, 200px) * -.5);
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 10, 8, .78) 0, rgba(10, 10, 8, .38) 38%, rgba(10, 10, 8, 0) 70%);
  filter: blur(2px);
  opacity: 0;
  z-index: 45;
  pointer-events: none;
  will-change: transform, opacity;
}
/* the format tags under the slab, on the slate, light ink */
.po-tag {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, 0);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  z-index: 56;
  pointer-events: none;
  color: var(--paper);
  will-change: transform, opacity;
}
.po-tag .po-name { margin-top: 0; }
.po-tag .po-price { color: var(--bronze); }
.flank {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fw, 160px);
  opacity: 0;
  z-index: 44;
  text-align: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.flank img {
  width: 100%;
  height: auto;
  filter: drop-shadow(12px 20px 18px rgba(34, 34, 31, .3));
}
.po-name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .14em;
  margin-top: .8rem;
}
.po-price {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-top: .3rem;
}

/* ---------- copy blocks ---------- */
.bc {
  position: relative;
  z-index: 70;
  max-width: 34rem;
  padding: 7vh clamp(1.4rem, 4.5vw, 4rem);
}
.bc h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem);
  line-height: 1.12;
  margin-bottom: 1.1rem;
}
.bc .lead { color: var(--charcoal-soft); }
.eyebrow .no {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--bronze);
  margin-right: 1rem;
  vertical-align: .12em;
}
.eyebrow .no::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--bronze);
  margin-left: 1rem;
  vertical-align: .28em;
}
/* armed: parked beside the centred bottle, faded by the beat's progress.
   --by is the settle rise (24px -> 0), opacity comes from v2.js. */
body.v2-js .bc {
  position: absolute;
  top: 50%;
  padding: 0;
  opacity: 0;
  transform: translateY(-50%) translateY(var(--by, 24px));
  pointer-events: none;
  will-change: transform, opacity;
}
body.v2-js .bc.on { pointer-events: auto; }
body.v2-js .bc-left { left: clamp(1.4rem, 6vw, 6rem); width: min(31vw, 30rem); }
body.v2-js .bc-right { right: clamp(1.4rem, 6vw, 6rem); width: min(31vw, 30rem); }
/* the ledger column: narrower so the award prints can fan beside it */
body.v2-js .bc-narrow { width: min(26vw, 26rem); }
body.v2-js .bc-top {
  top: max(10vh, 84px);
  left: 0;
  right: 0;
  max-width: none;
  text-align: center;
  transform: translateY(var(--by, 24px));
}
/* headline and CTA in one row so the block stays short: it is what the
   landed bottle's scale is clamped against (v2.js layout) */
.po-head-row { display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; }
.po-head-row h2 { margin-bottom: 0; }
.po-static-names { display: flex; justify-content: center; gap: 3rem; margin-top: .8rem; font-family: var(--font-display); letter-spacing: .14em; }
/* no-JS three-format row */
.po-static { display: flex; gap: 1.2rem; align-items: flex-end; justify-content: center; margin-top: 2rem; }
.po-static img { width: 26%; height: auto; }
.po-static img:nth-child(1) { width: 18%; }
.po-static img:nth-child(3) { width: 22%; }

/* ---------- award ledger ---------- */
.ledger { list-style: none; margin-top: .6rem; }
.ledger li {
  display: flex;
  gap: 1.4rem;
  align-items: baseline;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(143, 127, 117, .28);
}
.ledger li:first-child { border-top: 1px solid rgba(143, 127, 117, .28); }
.ledger .yr {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--bronze-deep);
  min-width: 3.6rem;
}
.ledger .ti { font-size: .95rem; }

/* ---------- altimeter (the descent HUD): 778 m at the top, 0 m on the slab ---------- */
.v2-alt {
  position: fixed;
  right: clamp(1.2rem, 4vw, 3rem);
  bottom: 1.4rem;
  z-index: 55;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--bronze-deep);
  pointer-events: none;
  transition: color .4s var(--ease-settle);
}
body.alt-light .v2-alt { color: var(--stone); }
body.v2-js .v2-alt.off { opacity: 0; }

/* ---------- newsletter: the inner label (v1 section 09, ported) ---------- */
.inner-label {
  position: relative;
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--charcoal);
  background-image: url("/assets/label-inner.webp");
  background-size: cover;
  background-position: center;
  color: var(--stone);
}
.inner-label .eyebrow { color: var(--bronze); }
.seam-nl {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * clamp(70px, 9vw, 130px) + 1px);
  height: clamp(70px, 9vw, 130px);
  z-index: 3;
  pointer-events: none;
}
.seam-nl svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 -8px 12px rgba(0, 0, 0, .28)); }
.inner-label .closing { text-align: center; padding: 4.5rem 1.5rem; }
.inner-label .closing h2 { color: var(--paper); font-size: var(--step-h2); }
.closing form {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.4rem;
}
.closing input[type="email"] {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .9rem 1.2rem;
  border: 1px solid var(--stone-shadow);
  background: rgba(34, 34, 31, .45);
  color: var(--paper);
  min-width: min(20rem, 70vw);
}
.closing input[type="email"]:focus,
.closing input[type="email"]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  border-color: var(--bronze);
}
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-consent {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  width: 100%;
  justify-content: center;
  margin-top: .9rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--paper);
  opacity: .85;
  cursor: pointer;
  text-align: left;
}
.nl-consent input { margin-top: .2rem; accent-color: var(--bronze); }
.nl-consent a { color: var(--bronze); }
.nl-consent span { max-width: 26rem; }
.nl-status { width: 100%; text-align: center; font-size: .9rem; color: var(--bronze); margin: .8rem 0 0; }

/* ---------- footer (v1 stack, no horizon) ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--stone);
  text-align: center;
  padding: 4rem 1.5rem 2.5rem;
}
.site-footer .eyebrow { color: var(--bronze); }
.site-footer .cta-row { margin-bottom: 1.8rem; }
.site-footer .btn { color: var(--paper); }
.site-footer .btn.primary { color: var(--charcoal); }
.site-footer .btn.primary:hover { background: var(--paper); }
.site-footer .signature {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  color: var(--paper);
  letter-spacing: .06em;
  margin-bottom: 1.6rem;
}
.site-footer nav { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.site-footer a { color: var(--stone); text-decoration: none; font-size: .9rem; }
.site-footer a:hover { color: var(--bronze); }
.site-footer .fine { font-size: .78rem; opacity: .7; }


/* ---------- reduced motion: the resting page, no choreography ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1 !important; transform: none !important; transition: none !important; }
  .giant { transform: none !important; opacity: 1 !important; }
  .scroll-cue span::after { animation: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero2-corner { display: none; }
  .v2-alt { right: .9rem; bottom: .9rem; font-size: .62rem; }
  .bottle-fallback { height: 52vh; margin-top: 24vh; }
  /* copy becomes a bottom sheet on a paper wash; the bottle passes behind it */
  body.v2-js .bc-left,
  body.v2-js .bc-right {
    left: .9rem;
    right: .9rem;
    top: auto;
    bottom: 4vh;
    width: auto;
    padding: 1rem 1.1rem;
    background: rgba(250, 247, 240, .86);
    transform: translateY(var(--by, 24px));
  }
  .bc h2 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); margin-bottom: .6rem; }
  .bc .lead { font-size: .95rem; }
  .ledger li { padding: .42rem 0; gap: .9rem; }
  .ledger .ti { font-size: .84rem; }
  .hname b { font-size: .72rem; }
  .hname small { display: none; }
  .labelart { width: 74vw; right: 4vw; top: 12vh; transform: translate(12vw, 0); }
  .slab { width: 96vw; bottom: 9vh; }
  /* three 'Cijena uskoro' lines run together under a 96vw slab; names only */
  .po-tag .po-price { display: none; }
  .gauge { right: .6rem; width: 34px; }
  .canopy { width: 64vw; }
  #canopy-l { left: -22vw; top: -4vh; }
  #canopy-r { right: -24vw; top: -3vh; }
  .gauge span { font-size: .5rem; right: 10px; }
  .po-static { gap: .6rem; }
}