/* Netz Winery · one night over the Dead Sea, from 22:40 to sunrise.
   Theme tokens first, then the world (sky, planes, bottles), then each hour. */

/* Type, after V-raison: Bona Nova for names and titles, Heebo for reading. */
@font-face { font-family: "Bona Nova"; font-weight: 400; font-display: swap; src: url(vendor/fonts/bona-nova-hebrew-400-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Bona Nova"; font-weight: 400; font-display: swap; src: url(vendor/fonts/bona-nova-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bona Nova"; font-weight: 700; font-display: swap; src: url(vendor/fonts/bona-nova-hebrew-700-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Bona Nova"; font-weight: 700; font-display: swap; src: url(vendor/fonts/bona-nova-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-weight: 300; font-display: swap; src: url(vendor/fonts/heebo-hebrew-300-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 300; font-display: swap; src: url(vendor/fonts/heebo-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-weight: 400; font-display: swap; src: url(vendor/fonts/heebo-hebrew-400-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 400; font-display: swap; src: url(vendor/fonts/heebo-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-weight: 500; font-display: swap; src: url(vendor/fonts/heebo-hebrew-500-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 500; font-display: swap; src: url(vendor/fonts/heebo-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-weight: 600; font-display: swap; src: url(vendor/fonts/heebo-hebrew-600-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 600; font-display: swap; src: url(vendor/fonts/heebo-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Heebo"; font-weight: 700; font-display: swap; src: url(vendor/fonts/heebo-hebrew-700-normal.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 700; font-display: swap; src: url(vendor/fonts/heebo-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --sc-canvas: #060914;
  --sc-surface: #0D1222;
  --sc-ink: #EFE7D9;
  --sc-ink-soft: #AEB4C6;
  --sc-accent: #D59D5D;          /* the foil gold of the label and capsule */
  --sc-accent-ink: #0B0F1C;
  --sc-font-display: "Bona Nova", "Noto Serif Hebrew", Georgia, serif;
  --sc-font-text: "Heebo", "Noto Sans Hebrew", system-ui, sans-serif;
  --sc-track-tight: 0;           /* Hebrew is never tracked tight */
  --sc-track-snug: 0;
  --sc-track-normal: 0.005em;

  /* the world, rewritten every frame from the clock (page.js) */
  --sky-top: #050812; --sky-mid: #0b1430; --sky-hz: #1a2547;
  --ridge-far: #111a38; --ridge-mid: #0a1024; --ridge-front: #05070f;
  --sea: #101a36; --glint: rgba(220, 225, 240, .55); --moon-x: 22vw;
  --moon-cut: #c9d0ea;           /* moonlight on a cut paper edge */
  --bar-h: 4.25rem;
  --veil-fade: 1.6rem;           /* how far below the bar its veil thins out */
}

body { background: var(--sc-canvas); font-variant-numeric: lining-nums; }
/* The Artifact host hides [hidden] for us; on the site's own domain nothing
   does once a rule gives the element a display (the close-up's "on its way"
   line, a dock, a sheet), so the site says it itself. */
[hidden] { display: none !important; }
/* Bona Nova's default figures are old-style; the engine's tabular figures stay lining too */
table, .sc-nums, [data-sc-count] { font-variant-numeric: lining-nums tabular-nums; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .bar { position: relative; z-index: 1; }
.sc-grain { z-index: 2; opacity: .05; }
.bar { z-index: 20; }

/* ------------------------------------------------------------ shared type */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gloss { font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-lg); color: var(--sc-accent); margin: 0; }
.price { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-variant-numeric: lining-nums tabular-nums; }
.obj__spec { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); letter-spacing: .02em; margin: 0; }
.obj__buy { display: flex; align-items: center; gap: var(--sc-4); margin: var(--sc-4) 0 0; }

.add, .btn {
  appearance: none; border: 1px solid color-mix(in oklab, currentColor 45%, transparent);
  background: transparent; color: inherit; cursor: pointer;
  font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: .02em;
  padding: .62em 1.15em; border-radius: var(--sc-r-pill); white-space: nowrap;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
}
.add:active, .btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .add:hover, .btn:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
}
.add.is-added { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.btn--solid { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: color-mix(in oklab, var(--sc-accent) 86%, white); color: var(--sc-accent-ink); }
}
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ------------------------------------------------------------------ bar */
.bar {
  position: fixed; inset-inline: 0; top: 0; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--sc-gutter); color: var(--sc-ink);
  transition: color 300ms var(--sc-ease-out);
}
/* The veil behind the bar: the colour of what is behind it (page.js sets
   --bar-veil to the sky, or to the paper sky of the sunrise while it fills the
   screen), almost opaque and frosted under the mark, the clock and the cart,
   then thinning out just below the bar, so the page dissolves into the sky as
   it rises and no line of it ever runs through the clock. The mask fades the
   tint and the frost together, on an eased curve with no visible edge. */
.bar::before { content: ""; position: absolute; inset: 0 0 calc(-1 * var(--veil-fade)); z-index: -1; pointer-events: none;
  background: color-mix(in oklab, var(--bar-veil, var(--sky-top)) 94%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
  --veil-mask: linear-gradient(to bottom, #000 calc(var(--bar-h) - .3rem),
    rgb(0 0 0 / .9) calc(var(--bar-h) - .3rem + (var(--veil-fade) + .3rem) * .2),
    rgb(0 0 0 / .65) calc(var(--bar-h) - .3rem + (var(--veil-fade) + .3rem) * .4),
    rgb(0 0 0 / .35) calc(var(--bar-h) - .3rem + (var(--veil-fade) + .3rem) * .6),
    rgb(0 0 0 / .1) calc(var(--bar-h) - .3rem + (var(--veil-fade) + .3rem) * .8),
    transparent 100%);
  -webkit-mask-image: var(--veil-mask); mask-image: var(--veil-mask); }
.bar__mark { justify-self: start; display: block; width: 2.4rem; color: var(--sc-accent); }
.bar__mark svg { width: 100%; height: auto; fill: currentColor; }
.bar__mark svg path { fill: currentColor; }
.bar__cta { justify-self: end; text-decoration: none; font-weight: 600; font-size: var(--sc-t-sm); display: inline-flex; gap: .5em; align-items: center; min-height: 44px; padding-inline: .25rem; }
.bar__count { min-width: 1.5em; height: 1.5em; border-radius: 1em; background: var(--sc-accent); color: var(--sc-accent-ink); display: inline-grid; place-items: center; font-size: .78em; font-variant-numeric: lining-nums tabular-nums; }
.clock { position: relative; justify-self: center; }
.clock__btn { appearance: none; background: none; border: 0; cursor: pointer; display: grid; justify-items: center; gap: 0; min-height: 44px; padding: .2rem .8rem; border-radius: var(--sc-r-md); }
.clock__time { font-family: var(--sc-font-display); font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; direction: ltr; line-height: 1.1; }
.clock__lbl { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .04em; }
.clock__list {
  position: absolute; top: calc(100% + .5rem); left: 50%; translate: -50% 0; margin: 0; padding: .5rem; list-style: none;
  min-width: 15rem; border-radius: var(--sc-r-lg);
  background: color-mix(in oklab, var(--sc-surface) 92%, transparent); backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -12px rgb(2 4 10 / .6), inset 0 1px 0 rgb(255 255 255 / .06);
  color: var(--sc-ink);
}
.clock__list a { display: flex; gap: 1rem; align-items: baseline; padding: .55rem .75rem; border-radius: var(--sc-r-md); text-decoration: none; }
.clock__list time { font-family: var(--sc-font-display); font-variant-numeric: lining-nums tabular-nums; color: var(--sc-accent); direction: ltr; min-width: 3.2em; }
@media (hover: hover) and (pointer: fine) { .clock__list a:hover { background: rgb(255 255 255 / .06); } }
.clock__list a[aria-current="true"] span { color: var(--sc-accent); }
/* on a light veil (morning, the sunrise's paper sky) the bar reads dark */
body.is-day .bar { color: #141A2A; }
body.is-day .clock__lbl { color: #3A4256; }
body.is-day .bar__mark { color: #8A5A1E; }

/* ------------------------------------------------------------- paper type */
/* A title cut from paper: the letter is the front sheet, then a foil sheet, a
   backing sheet and a soft cast shadow, stepped down and to the side. --s is
   how far the sheets have parted (0 flat, 1 open); --pt-d deepens the stack on
   smaller titles so it still reads. Each title sets its own three papers. */
@property --s { syntax: "<number>"; inherits: true; initial-value: 1; }
.ptype { --pt-hi: rgb(255 240 214 / .5); --pt-l1: #D59D5D; --pt-l2: #2E3470; --pt-cast: rgb(1 2 12 / .55); --pt-d: 1; }
.ptype .pw { display: inline-block; white-space: nowrap; }
.ptype .ch { display: inline-block; transform-origin: 50% 85%; --s: 1;
  text-shadow: 0 -1px 0 var(--pt-hi),
    calc(var(--s) * var(--pt-d) * .008em) calc(var(--s) * var(--pt-d) * .024em) 0 var(--pt-l1),
    calc(var(--s) * var(--pt-d) * .016em) calc(var(--s) * var(--pt-d) * .048em) 0 var(--pt-l2),
    calc(var(--s) * var(--pt-d) * .03em) calc(var(--s) * var(--pt-d) * .1em) calc(var(--s) * var(--pt-d) * .08em) var(--pt-cast); }
/* pop-up: each letter lies folded flat toward you until its title comes into
   view, then stands up in reading order with a little overshoot, and only
   then do its sheets part. Folding back is quicker and all at once. */
@media (prefers-reduced-motion: no-preference) {
  .ptype--pop .ch { transform-origin: 50% 100%;
    transition: transform 820ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 48ms),
      opacity 220ms var(--sc-ease-out) calc(var(--i) * 48ms),
      --s 640ms var(--sc-ease-out) calc(var(--i) * 48ms + 280ms); }
  .ptype--pop:not(.is-up) .ch { transform: perspective(520px) rotateX(-86deg); opacity: 0; --s: 0;
    transition-duration: 260ms, 160ms, 160ms; transition-delay: 0s; }
  .ptype--init .ch { transition: none !important; }
}

/* ---------------------------------------------------------------- world */
.scene { overflow: clip; }
.plane { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; pointer-events: none; }
.plane svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.plane--far path { fill: var(--ridge-far); }
.plane--mid path { fill: var(--ridge-mid); }
.plane .rim { fill: none; stroke: color-mix(in oklab, var(--sky-hz) 70%, #dfe4f2); stroke-width: 1.25; vector-effect: non-scaling-stroke; opacity: .38; }
/* by moonlight the hills are sheets of night-blue paper: each throws a soft
   shadow on the one behind it, and every cut edge catches the moon */
.plane--far svg { filter: drop-shadow(0 -3px 5px rgb(1 2 10 / .5)); }
.plane--mid svg { filter: drop-shadow(0 -5px 9px rgb(1 2 10 / .6)); }
.plane--front .hill { fill: color-mix(in oklab, var(--ridge-mid) 78%, var(--ridge-front)); }
.plane--front .row--0 { fill: color-mix(in oklab, var(--ridge-mid) 58%, var(--ridge-front)); }
.plane--front .row--1 { fill: color-mix(in oklab, var(--ridge-mid) 38%, var(--ridge-front)); }
.plane--front .row--2 { fill: color-mix(in oklab, var(--ridge-mid) 18%, var(--ridge-front)); }
.plane--front .vine { --vine: color-mix(in oklab, var(--ridge-front) 45%, #000); }
.plane--front .hill, .plane--front .row { stroke: var(--moon-cut); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-opacity: .34; }
.plane--front .vine__leaves { fill: var(--vine); }
.plane--front .vine__lines { stroke: var(--vine); stroke-width: 6.5; }
.plane--front .vine__grapes { stroke: var(--vine); stroke-width: 16; }
.plane--sea { top: 59.5%; bottom: 0; inset-inline: 0; height: auto;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sea) 70%, var(--sky-hz)), var(--sea));
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--moon-cut) 30%, transparent), 0 -4px 10px rgb(1 2 10 / .4); }
.sea__glint { position: absolute; top: 0; bottom: 0; left: var(--moon-x); width: clamp(3rem, 9vw, 9rem); translate: -50% 0;
  background: repeating-linear-gradient(to bottom, var(--glint) 0 2px, transparent 2px 7px);
  mask-image: radial-gradient(50% 60% at 50% 20%, #000 0%, rgb(0 0 0 / .4) 50%, transparent 100%);
  opacity: .7; }
.sea__glint--sun { left: 50%; width: clamp(6rem, 22vw, 22rem); --glint: rgba(255, 196, 120, .75); opacity: var(--sun-glint, 0); }
.plane--mist { top: 46%; bottom: 30%; height: auto;
  background: radial-gradient(60% 50% at 50% 60%, color-mix(in oklab, var(--sky-hz) 55%, transparent), transparent 70%); opacity: .55; }

/* bottles: the canvas is the 3D render; the poster is the same studio render
   flat, and stays as the fallback when WebGL is unavailable */
.bottle { position: relative; aspect-ratio: 3 / 10; }
.bottle__poster, .bottle__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.bottle__poster { object-fit: contain; height: 94%; top: 3%; transition: opacity 300ms var(--sc-ease-out); }
.bottle__gl { opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.bottle.is-live .bottle__gl { opacity: 1; }
.bottle.is-live .bottle__poster { opacity: 0; }
.bottle__shadow { position: absolute; left: 50%; bottom: 1.8%; width: 64%; height: 3.2%; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .65), transparent); }

/* -------------------------------------------------------------- 22:40 hero */
.hero__copy { position: absolute; z-index: 2; inset-inline-start: var(--sc-gutter); top: calc(var(--bar-h) + 9vh); }
.hero__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.1rem, 7.2vw, 7.4rem); line-height: 1.04; margin: 0; text-wrap: balance;
  color: #F3EAD6; --pt-l1: #D59D5D; --pt-l2: #2C3270; --pt-d: 1.5; }
.hero__sub { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); max-width: 34ch; }
.plane--front { z-index: 3; }
.hero__bottle { position: absolute; height: 66vh; left: 21vw; bottom: 4vh; }

/* ------------------------------------------------------------- 00:10 place */
.place__stage { display: grid; align-content: center; padding-inline: var(--sc-gutter); }
.place__eyebrow { position: absolute; top: calc(var(--bar-h) + 8vh); inset-inline-start: var(--sc-gutter); margin: 0; color: var(--sc-accent); font-size: var(--sc-t-sm); letter-spacing: .08em; }
.place__lines { position: relative; height: 60vh; }
.place__line { position: absolute; inset-inline-start: 0; top: 50%; translate: 0 -50%; margin: 0; max-width: 20ch;
  font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 4.3rem); line-height: 1.16; text-wrap: balance;
  color: #EEE6D4; text-shadow: .012em .034em 0 #262C63, .03em .09em .1em rgb(1 2 12 / .5); }
.place__line .foil { font-weight: 700; color: #E9B872; text-shadow: .012em .034em 0 #6E3A2A, .03em .09em .1em rgb(1 2 12 / .5); }

/* ------------------------------------------------------------ 01:30 sihara */
.range__stage { display: flex; align-items: center; }
.rail { display: flex; align-items: center; gap: clamp(3rem, 7vw, 8rem); padding-inline: var(--sc-gutter) 12vw; width: max-content; will-change: transform; }
.rail__lead { width: min(30rem, 34vw); }
.range__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3.4rem, 8vw, 8rem); line-height: 1; margin: 0 0 var(--sc-3);
  color: #EEEADF; --pt-hi: rgb(255 255 255 / .6); --pt-l1: #A9B4DB; --pt-l2: #282C64; --pt-d: 1.5; }   /* moon paper over silver */
.rail__lead .sc-body { margin-top: var(--sc-5); }
.obj { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.obj__bottle { height: min(70vh, 46rem); flex: none; }
.obj__label { width: min(19rem, 24vw); display: grid; gap: var(--sc-2); }
.obj__name { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-2xl); line-height: 1.05; margin: 0 0 var(--sc-2); }
.obj__name span, .yr { font-size: .5em; color: var(--sc-ink-soft); font-weight: 400; margin-inline-start: .3em; }
.obj__note { margin: 0; color: var(--sc-ink); font-size: var(--sc-t-base); line-height: 1.55; }
.rail__note { width: min(22rem, 28vw); font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-xl); line-height: 1.3; color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- 03:20 blanc */
.blanc__stage { display: grid; --bm-w: min(70vmin, 44rem); --bm-x: 34%; --bm-y: 52%; }
.blanc__moon { position: absolute; left: var(--bm-x); top: var(--bm-y); width: var(--bm-w); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, #F4EFE6 0%, #E7E0D3 46%, #CFC6B6 100%);
  box-shadow: 0 -6px 18px rgb(1 2 12 / .5), 0 0 120px 30px rgb(236 230 218 / .16); }
/* the full moon is the last disc of a stack of paper rings; they open outward
   after it, each throwing its shadow on the ring behind */
.blanc__halo i { position: absolute; left: var(--bm-x); top: var(--bm-y); width: calc(var(--bm-w) * var(--r)); aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; background: rgb(220 226 246 / var(--a)); box-shadow: 0 -5px 16px rgb(1 2 12 / .42); will-change: transform, opacity; }
.blanc__halo i:nth-child(1) { --r: 1.92; --a: .05; }
.blanc__halo i:nth-child(2) { --r: 1.56; --a: .06; }
.blanc__halo i:nth-child(3) { --r: 1.26; --a: .075; }
.blanc__bottle { position: absolute; left: var(--bm-x); top: var(--bm-y); height: min(62vh, 40rem); translate: -50% -50%; }
.blanc__word { font-family: var(--sc-font-display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.05; margin: 0;
  color: #EEE6D4; text-shadow: .012em .034em 0 #262C63, .03em .09em .1em rgb(1 2 12 / .5); }   /* printed on the night, like the place lines */
.blanc__word--dark { position: absolute; inset-inline-start: var(--sc-gutter); top: 50%; translate: 0 -50%; }
.blanc__label { position: absolute; inset-inline-start: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(30rem, 40vw); display: grid; gap: var(--sc-3); }
.blanc__label .blanc__word { color: var(--sc-ink-soft); margin-bottom: var(--sc-3); }
.blanc__name { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: 1; margin: 0; white-space: nowrap;
  color: #F6F0E4; --pt-l1: #D9774A; --pt-l2: #5E2234; --pt-d: 2.2; }   /* the label's terracotta */

/* ------------------------------------------------------------ 04:30 nehora */
.nehora { min-height: 100vh; display: grid; align-items: center; padding-block: 12vh; }
.nehora__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2rem, 6vw, 7rem); }
.nehora__text { grid-column: 1; grid-row: 1; max-width: 36rem; }
.nehora__bottle { grid-column: 2; grid-row: 1; height: min(76vh, 50rem); cursor: grab; touch-action: pan-y; border-radius: var(--sc-r-lg); }
.nehora__bottle:active { cursor: grabbing; }
.nehora__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 6.4vw, 6.2rem); line-height: 1; margin: 0;
  color: #F4DCA8; --pt-l1: #C9874E; --pt-l2: #3F2A5C; --pt-d: 1.6; }   /* first light, before it comes */
.drag-hint { position: absolute; bottom: -2.2rem; left: 50%; translate: -50% 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .06em; white-space: nowrap; }
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sc-6); margin: var(--sc-6) 0 0; }
.facts div { display: grid; gap: var(--sc-1); }
.facts dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: .06em; }
.facts dd { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }

/* ------------------------------------------------------------- 05:20 peak */
/* A pop-up book of cut paper. Every sheet is a flat silhouette whose colour
   page.js grades from the last of the night to full sun; each sheet throws a
   soft shadow on the one behind it, and the cut edge catches the light. */
.scene--peak { perspective: 1500px; perspective-origin: 50% 78%; background: var(--b7, #0b1230); isolation: isolate;
  --pk-ink: #1A2350; --pk-gold: #F0BE62; --pk-rust: #9E3B2A; }
.pk-layer { position: absolute; inset: 0; transform-origin: 50% 100%; will-change: transform; pointer-events: none; }
.pk-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.pk-sky { transform-origin: var(--sun-x, 50%) var(--sun-y, 56%); }
.band--0 { fill: var(--b0); } .band--1 { fill: var(--b1); } .band--2 { fill: var(--b2); } .band--3 { fill: var(--b3); }
.band--4 { fill: var(--b4); } .band--5 { fill: var(--b5); } .band--6 { fill: var(--b6); } .band--7 { fill: var(--b7); }
.pk-bloom { position: absolute; left: var(--sun-x, 50%); top: var(--sun-y, 56%); width: max(120vw, 120vh); aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none; opacity: var(--pk-bloom, 0);
  background: radial-gradient(closest-side, rgb(255 252 240 / .95), rgb(255 240 205 / .7) 14%, rgb(255 222 165 / .32) 34%, rgb(255 205 140 / .1) 56%, transparent 74%); }
.pk-moab .sheet { fill: var(--pk-moab); }
.pk-sea .sheet { fill: var(--pk-sea); }
.pk-sea .slits { fill: var(--pk-slit, #fff4dc); opacity: var(--pk-slit-a, 0); }
.pk-mid .sheet { fill: var(--pk-mid); }
.pk-front .sheet, .vine__leaves { fill: var(--pk-front); }
.vine__grapes { fill: none; stroke: var(--pk-front); stroke-width: 10.4; stroke-linecap: round; }   /* each berry is a round cap */
.vine__lines { fill: none; stroke: var(--pk-front); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.pk-layer .cut { fill: none; stroke: var(--pk-cut, #ffe2b0); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: var(--pk-cut-a, .3); }
.pk-moab svg { filter: drop-shadow(0 -4px 8px rgb(70 22 40 / .28)); }
.pk-sea svg { filter: drop-shadow(0 -3px 6px rgb(70 22 40 / .22)); }
.pk-mid svg { filter: drop-shadow(0 -7px 12px rgb(60 16 28 / .34)); }
.pk-front svg { filter: drop-shadow(0 -9px 16px rgb(40 8 20 / .42)); }
.pk-birds path { fill: var(--pk-bird, #5b2a3a); }
.pk-birds { opacity: var(--pk-birds-a, 0); }
.pk-layer .dawnline { fill: none; stroke: #FFF1D2; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 0 1; filter: drop-shadow(0 0 6px rgb(255 214 150 / .9)); }

.peak__mark { position: absolute; left: var(--sun-x, 50%); width: min(118vw, 190vh); aspect-ratio: 250 / 220; height: auto; max-width: none;
  translate: -50% 0; top: calc(var(--sun-y, 58.5vh) - min(118vw, 190vh) * 0.5794); pointer-events: none; overflow: visible;
  filter: drop-shadow(0 6px 10px rgb(120 40 30 / .28)); }
.peak__sunrays .ray { transform-box: view-box; transform-origin: 145px 193px; opacity: 0; }
.peak__sunrays .ray path { fill: var(--pk-ray, #FFF0CC); }
.peak__sunrays .sun { fill: #FFFCF2; }

/* the bottle stands on the front sheet, in front of the vines, and comes up
   through a slot cut in the paper */
.peak__bottle { position: absolute; height: 66vh; left: 15vw; bottom: var(--pk-bottle-bottom, 6vh); }
.peak__bottle::before { content: ""; position: absolute; left: 50%; top: 40%; width: 230%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgb(255 238 205 / .5), rgb(255 226 180 / .18) 55%, transparent 75%); opacity: var(--pk-halo, 0); pointer-events: none; }
.peak__bottle .bottle__shadow { bottom: 1.2%; width: 120%; height: 3.5%; background: radial-gradient(closest-side, rgb(30 6 14 / .55), transparent); }

/* the cut-paper ribbon: an inscription banner over the sunrise */
.pk-ribbon { position: absolute; left: 50%; top: calc(var(--bar-h) + 5vh); translate: -50% 0; margin: 0; white-space: nowrap;
  font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 2.3rem); line-height: 1; color: #5A1A2C;
  filter: drop-shadow(0 7px 9px rgb(80 24 30 / .3)); }
.pk-ribbon { --rk: 1; clip-path: inset(-60% calc(50% * (1 - var(--rk)) - 2.7em * var(--rk)) -120% calc(50% * (1 - var(--rk)) - 2.7em * var(--rk))); }
.pk-ribbon__text { position: relative; display: block; padding: .5em 1.3em .55em; background: #FFF6E4;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.pk-ribbon::before, .pk-ribbon::after { content: ""; position: absolute; top: .42em; bottom: -.42em; width: 1.9em; background: #F1D6AA; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.pk-ribbon::before { right: -1.35em; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
.pk-ribbon::after { left: -1.35em; }

/* the name, cut from the label's navy, its foil and a rust backing sheet */
.pk-title { position: absolute; margin: 0; inset-inline-start: var(--sc-gutter); top: var(--pk-title-top, 40vh);
  font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(7rem, 16.5vw, 17rem); line-height: .78; color: var(--pk-ink);
  white-space: nowrap; pointer-events: none; }
.pk-title { --pt-hi: rgb(255 236 200 / .55); --pt-l1: var(--pk-gold); --pt-l2: var(--pk-rust); --pt-cast: rgb(70 20 26 / .34); }

/* the card, printed on the front sheet */
.pk-card { position: absolute; inset-inline-start: var(--sc-gutter); top: var(--pk-card-top, 74vh); width: min(33rem, 40vw);
  display: grid; gap: var(--sc-2); color: #FCEFD9; }
.pk-card > * { margin: 0; }
.pk-card__gloss { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg); color: #F6C978; }
.pk-card__body { font-size: var(--sc-t-sm); line-height: 1.6; color: #F3DEC6; }
.pk-card__spec { font-size: var(--sc-t-sm); color: #E9CDB0; }
.pk-card__buy { margin-top: var(--sc-2); }
.pk-card .price { color: #FFF3DF; }
.pk-card .add { color: #FFF3DF; border-color: rgb(255 236 205 / .55); }

/* ------------------------------------------------------------ 06:30 order */
.order { position: relative; color: #141A2A; --sc-ink: #141A2A; --sc-ink-soft: #4A5266; --sc-accent: #8A5A1E; --sc-accent-ink: #FBF7F0; }
.order__ground { display: none; }
.order__wrap { position: relative; padding-top: 22vh; padding-bottom: var(--sc-9); }
.order__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 7vw, 6.8rem); line-height: 1; margin: 0;
  color: #1A2350; --pt-hi: rgb(255 250 236 / .7); --pt-l1: #F0BE62; --pt-l2: #9E3B2A; --pt-cast: rgb(70 20 26 / .3); --pt-d: 1.6; }   /* the morning in Rakia's papers */
.order__head .sc-lede { max-width: 40ch; }
.shelf { list-style: none; margin: var(--sc-9) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 2rem);
  border-bottom: 1px solid rgb(20 26 42 / .18); }
.shelf__item { display: grid; justify-items: center; text-align: center; gap: var(--sc-2); padding-bottom: var(--sc-6); }
.shelf__item .bottle { height: min(48vh, 30rem); }
.shelf__item .bottle__shadow { background: radial-gradient(closest-side, rgb(20 26 42 / .35), transparent); }
.shelf__name { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.15; margin: var(--sc-2) 0 0; }
.shelf__name span { display: block; font-size: .7em; color: var(--sc-ink-soft); font-family: var(--sc-font-text); }
.shelf__price { font-family: var(--sc-font-display); margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.step { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid rgb(20 26 42 / .25); border-radius: var(--sc-r-pill); padding: 2px; }
.step button { appearance: none; border: 0; background: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; color: inherit; }
@media (hover: hover) and (pointer: fine) { .step button:hover { background: rgb(20 26 42 / .07); } }
.step output { min-width: 1.6em; text-align: center; font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.summary { margin-top: var(--sc-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--sc-8); align-items: start; }
.summary__lines p { margin: 0; color: var(--sc-ink-soft); }
.summary__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.summary__list li { display: flex; justify-content: space-between; gap: var(--sc-4); border-bottom: 1px dotted rgb(20 26 42 / .2); padding-bottom: var(--sc-2); font-variant-numeric: lining-nums tabular-nums; }
.summary__side { display: grid; gap: var(--sc-3); }
.summary__total { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); display: flex; justify-content: space-between; }
.summary__ship, .summary__fine { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.summary__send { font-size: var(--sc-t-base); padding-block: .85em; }

.foot { position: relative; border-top: 1px solid rgb(20 26 42 / .14); padding-block: var(--sc-8) var(--sc-7); }
.foot__wrap { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sc-7); align-items: start; }
.foot__brand svg { width: 3.4rem; height: auto; }
.foot__brand path { fill: #8A5A1E; }
.foot__brand p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: var(--sc-2) var(--sc-7); }
.foot__links a { display: inline-block; padding-block: .3rem; }
.foot__kosher { display: flex; gap: var(--sc-4); }
.foot__kosher img { width: 56px; height: 56px; object-fit: contain; }
.foot__fine { grid-column: 1 / -1; margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

/* --------------------------------------------------------------- age gate */
.age { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--sc-gutter);
  background: radial-gradient(80% 60% at 50% 40%, #0d1430, #04060d); }
.age[hidden] { display: none; }
.age__box { text-align: center; display: grid; justify-items: center; gap: var(--sc-5); max-width: 26rem; }
.age__mark { width: 5.5rem; }
.age__mark path { fill: var(--sc-accent); }
.age__q { font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-2xl); margin: 0; }
.age__actions { display: flex; gap: var(--sc-3); }
.age__actions .btn { min-width: 6.5rem; }
.age__no { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* ----------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  :root { --bar-h: 3.75rem; }
  .bar__mark { width: 2rem; }
  .hero__copy { inset-inline: var(--sc-gutter); top: calc(var(--bar-h) + 5vh); max-width: none; text-align: center; }
  .hero__title { font-size: clamp(2.7rem, 12.5vw, 4.4rem); }
  .hero__sub { margin-inline: auto; font-size: var(--sc-t-base); }
  .hero__bottle { height: 50vh; left: 50%; translate: -50% 0; bottom: 3vh; }

  .place__line { font-size: clamp(1.75rem, 7.4vw, 2.6rem); max-width: none; inset-inline-end: 0; }

  .rail { gap: 0; padding-inline: 0 8vw; }
  .rail__lead { width: 100vw; padding-inline: var(--sc-gutter); }
  .obj { flex-direction: column; gap: var(--sc-4); width: 100vw; }
  .obj__bottle { height: 46vh; }
  .obj__label { width: 74vw; text-align: center; justify-items: center; }
  .obj__buy { justify-content: center; }
  .rail__note { width: 80vw; padding-inline: var(--sc-gutter); }

  .blanc__stage { --bm-x: 50%; --bm-y: 40%; --bm-w: 74vw; }
  .blanc__bottle { height: 44vh; }
  .blanc__word--dark { inset-inline: var(--sc-gutter); top: auto; bottom: 9vh; translate: none; text-align: center; }
  .blanc__label { inset-inline: var(--sc-gutter); width: auto; top: auto; bottom: 4vh; translate: none; gap: var(--sc-2); }
  .blanc__label .sc-body { display: none; }
  .blanc__label .blanc__word { margin-bottom: 0; font-size: 1.6rem; }
  .blanc__name { font-size: var(--sc-t-2xl); }
  .blanc__label::before { content: ""; position: absolute; inset: -3rem calc(-1 * var(--sc-gutter)) -4vh; z-index: -1;
    background: linear-gradient(to top, color-mix(in oklab, var(--sky-top) 92%, transparent) 55%, transparent); }

  .nehora__grid { grid-template-columns: 1fr; justify-items: center; }
  .nehora__bottle { grid-column: 1; grid-row: 1; height: 58vh; }
  .nehora__text { grid-row: 2; margin-top: var(--sc-7); }
  .facts { grid-template-columns: repeat(3, auto); gap: var(--sc-4); }

  .peak__bottle { height: 42vh; left: 3vw; }
  .pk-ribbon { font-size: 1.12rem; top: calc(var(--bar-h) + 3.5vh); }
  .pk-title { font-size: 30vw; }
  .pk-card { width: auto; inset-inline: var(--sc-gutter); }
  .pk-card__body { display: none; }

  .order__wrap { padding-top: 16vh; }
  .shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(-1 * var(--sc-gutter)); padding-inline: var(--sc-gutter); scrollbar-width: none; }
  .shelf__item { flex: 0 0 44vw; scroll-snap-align: center; }
  .shelf__item .bottle { height: 40vh; }
  .summary { grid-template-columns: 1fr; gap: var(--sc-6); }
  .foot__wrap { grid-template-columns: 1fr; }
  .foot__links { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .plane, .rail, .pk-layer, .peak__bottle, .peak__mark, .peak__mark .ray { transform: none !important; }   /* the ray paths keep their own matrix */
  .peak__sunrays .ray { opacity: 1 !important; }
}
.is-scroller { overflow-x: auto; overscroll-behavior-x: contain; }
.bar__count[hidden] { display: none; }