/* 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; flex-wrap: wrap; align-items: center; gap: var(--sc-2) var(--sc-4); margin: var(--sc-4) 0 0; }
/* the way to each wine's own page, beside its cart button (Kobe 21:40) */
.to-wine { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; color: inherit; font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); text-underline-offset: .32em;
  transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out); }
.to-wine__ar { width: 1em; height: .625em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .to-wine:hover { color: var(--sc-accent); text-decoration-color: currentColor; }
  .to-wine:hover .to-wine__ar { translate: -.2em 0; }
}
@media (prefers-reduced-motion: reduce) { .to-wine__ar { transition: none; } }

.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 { margin: 0 0 1.1em; color: var(--sc-accent); font-size: var(--sc-t-sm); letter-spacing: .08em; }
/* One paragraph: its four phrases arrive in turn, word by word, and stay
   (page.js), so the sentence builds instead of each part replacing the last.
   Every word holds its place from the start, so nothing reflows as it grows. */
.place__text { margin: 0; max-width: 29ch;
  font-family: var(--sc-font-display); font-weight: 400; font-size: min(clamp(1.85rem, .9rem + 2vw, 3.1rem), 5.2vh); line-height: 1.3; text-wrap: pretty;
  color: #EEE6D4; text-shadow: .012em .034em 0 #262C63, .03em .09em .1em rgb(1 2 12 / .5); }
.place__text .foil { font-weight: 700; color: #E9B872; text-shadow: .012em .034em 0 #6E3A2A, .03em .09em .1em rgb(1 2 12 / .5); }
.place__text .pl-tail { font-weight: 400; color: #EEE6D4; text-shadow: .012em .034em 0 #262C63, .03em .09em .1em rgb(1 2 12 / .5); }
/* each word rises out of its own slot; the slot is padded so the clip never
   bites a descender (ך ן ף ץ ק) or the printed shadow */
.pl-w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0 .14em .2em; margin: 0 -.14em -.2em; }
.pl-w__i { display: inline-block; }

/* ------------------------------------------------------------ 01:30 sihara */
/* The page only ever moves the way the visitor scrolls. On a wide screen the
   three moon wines rise one after another out of a slot in the paper into a
   lineup (.range--lineup, pinned, page.js); everywhere else, and with reduced
   motion, they stand one under another and turn as they pass (the base). */
.rail { display: grid; gap: clamp(5rem, 12vh, 9rem); padding: 14vh var(--sc-gutter) 10vh; justify-items: center; }
.rail__lead { width: 100%; max-width: 34rem; justify-self: start; }
.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: grid; justify-items: center; gap: var(--sc-5); }
.obj__bottle { height: min(64vh, 40rem); flex: none; }
.obj__label { width: min(24rem, 100%); display: grid; gap: var(--sc-2); text-align: center; justify-items: center; }
.obj__label .obj__buy { justify-content: center; }
.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 { font-family: var(--sc-font-display); font-weight: 300; font-size: var(--sc-t-xl); line-height: 1.3; color: var(--sc-ink-soft); text-align: center; }
.rail__note p { margin: 0; }
@media (min-width: 861px) {
  /* side by side, the middle wine mirrored */
  .range--flow .obj { grid-template-columns: auto minmax(0, 22rem); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
  .range--flow .obj:nth-of-type(2) .obj__bottle { order: 2; }
  .range--flow .obj__label { text-align: start; justify-items: start; }
  .range--flow .obj__label .obj__buy { justify-content: start; }
}

/* the lineup: the lead and, when all three stand, the note on the right; the
   wines on a gold rule that draws out first, each card rising after its bottle.
   The last column stays empty: the west of the sky, where the moon sets. */
.range--lineup .rail { grid-template-columns: clamp(14rem, 20vw, 20rem) repeat(3, minmax(0, 15rem)) minmax(clamp(5rem, 9vw, 10rem), 1fr); grid-template-rows: 1fr auto; column-gap: clamp(1.25rem, 2.4vw, 3rem); row-gap: 0;
  justify-items: stretch; box-sizing: border-box; height: 100%; padding: calc(var(--bar-h) + 3vh) var(--sc-gutter) 5vh; }
.range--lineup .rail__lead { grid-column: 1; grid-row: 1; align-self: center; max-width: none; }
.range--lineup .range__title { font-size: clamp(3.4rem, 7vw, 7rem); }
.range--lineup .obj { grid-row: 1 / span 2; grid-template-rows: subgrid; grid-template-columns: none; gap: 0; justify-items: center; }
.range--lineup .obj__bottle { align-self: end; height: min(52vh, 36rem, 100%); }
.range--lineup .obj__label { align-self: stretch; grid-template-rows: auto auto auto auto 1fr; width: 100%; max-width: 17rem; text-align: center; justify-items: center; }
.range--lineup .obj__buy { align-self: end; justify-content: center; gap: var(--sc-2) var(--sc-3); }   /* the prices stand on one line */
.range--lineup .price { font-size: var(--sc-t-lg); }
.range--lineup .to-wine { flex-basis: 100%; justify-content: center; min-height: 36px; }
.range--lineup .obj__label .obj__buy { justify-content: center; }
.range--lineup .obj__label::before { content: ""; justify-self: stretch; height: 1px; margin-bottom: var(--sc-3);
  background: linear-gradient(90deg, transparent, rgb(213 157 93 / .6), transparent); transform: scaleX(var(--g, 1)); }
.range--lineup .obj__label > * { opacity: var(--k, 1); translate: 0 calc((1 - var(--k, 1)) * 1em); }
.range--lineup .obj__name { font-size: var(--sc-t-lg); white-space: nowrap; }
.range--lineup .obj__note { font-size: var(--sc-t-sm); line-height: 1.45; }
.range--lineup .rail__note { grid-column: 1; grid-row: 2; align-self: start; text-align: start; font-size: var(--sc-t-lg); opacity: var(--n, 1); }

/* ------------------------------------------------------------- 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); }

/* ------------------------------------------------------------- 04:55 port */
/* The last glass of the night. The blossoming branch of the port's label, cut
   from paper: a bough of dark plum card, leaves and bud cups in the label's
   burgundy, blush petals with gold-foil stamens. The art is drawn in
   thousandths of the bottle's height (--u) from the bottle's foot (--bx, --by),
   so it holds its place against the bottle at every size; page.js grows it. */
.port__stage { --bh: min(66vh, 44rem); --bx: 31%; --by: 84%; --u: calc(var(--bh) * .00094); }
.port__bottle { position: absolute; left: var(--bx); top: calc(var(--by) - var(--bh) * .97); height: var(--bh); translate: -50% 0; z-index: 2; }
.port__art { position: absolute; left: calc(var(--bx) - 2700 * var(--u)); top: calc(var(--by) - 1350 * var(--u));
  width: calc(4200 * var(--u)); height: calc(1500 * var(--u)); max-width: none; overflow: visible; pointer-events: none; }
.port__branch { z-index: 1; filter: drop-shadow(0 4px 5px rgb(14 3 14 / .5)); }
.port__fall { z-index: 3; filter: drop-shadow(0 3px 4px rgb(14 3 14 / .4)); }
.port__glow { position: absolute; left: var(--bx); top: calc(var(--by) - 560 * var(--u)); width: calc(1700 * var(--u)); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(236 150 165 / .3), rgb(150 44 66 / .15) 52%, transparent 72%); }
.port__rule { position: absolute; z-index: 1; left: var(--bx); top: var(--by); width: calc(1150 * var(--u)); height: 1px; translate: -50% 0; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, var(--sc-accent) 16%, var(--sc-accent) 84%, transparent); }
.pt-wood { fill: #3D1C33; stroke: rgb(244 196 204 / .46); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.pt-leaf { fill: #7E2A3A; stroke: rgb(244 196 204 / .3); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pt-bud__body { fill: #E7A2AF; }
.pt-bud__cup { fill: #6A2131; }
.pt-s0 { stop-color: #E2A0AE; } .pt-s1 { stop-color: #F4E1DE; } .pt-s2 { stop-color: #FBF0EA; }
.pt-pe { fill: url(#pt-petal); stroke: rgb(120 40 60 / .25); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pt-eye { fill: #A8435A; }
.pt-fil { fill: none; stroke: #D59D5D; stroke-width: 2.2; }
.pt-anth { fill: none; stroke: #EBC27E; stroke-width: 9; stroke-linecap: round; }
.pt-grow { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.port__card { position: absolute; z-index: 4; inset-inline-start: var(--sc-gutter); top: 50%; translate: 0 -50%; width: min(32rem, 40vw); display: grid; gap: var(--sc-3); }
.port__card > * { margin: 0; }
.port__name { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.8rem, 1.4rem + 3.4vw, 4.4rem); line-height: 1; white-space: nowrap;
  color: #F7E8E2; --pt-l1: #D59D5D; --pt-l2: #6A2131; --pt-d: 2.1; }   /* the label's bordeaux, under its gold */
.port__card .sc-body { color: var(--sc-ink); max-width: 40ch; }
.price.is-soon { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- 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, .pk-card .to-wine { 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; }
/* The morning behind the order is painted on the fixed sky canvas, which contrast
   checkers can't see, so they measured the dark ink against the night colour of
   <body> and failed it (1.14:1). Measured on the real pixels it is 6.1:1 to 14.4:1.
   An empty layer here tells them the background is painted (check by eye),
   as they already do for every other chapter; it draws nothing. */
.order { background-image: linear-gradient(transparent, transparent); }
.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(7, 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); } }
.shelf__price.is-soon { font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.step--soon { min-height: 46px; padding-inline: 1.1em; justify-content: center; font-size: var(--sc-t-sm); color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .step--soon:hover { background: rgb(20 26 42 / .05); } }
.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); }

/* ------------------------------------------------------------------ footer */
/* one markup (lab/foot.html) on the home page's morning sky and on the shop's night ridge;
   each place only sets the --nf-* colours (the shop's are in store.css) */
.nf { --nf-ink: #141A2A; --nf-soft: #4A5266; --nf-accent: #8A5A1E; --nf-line: rgb(20 26 42 / .14); --nf-chip: rgb(255 255 255 / .5); --nf-chip-line: rgb(20 26 42 / .12);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, .95fr); gap: var(--sc-7) var(--sc-6); align-items: start; color: var(--nf-ink); }
.nf a { color: inherit; text-decoration: none; }
.nf__brand, .nf__col { min-width: 0; display: grid; justify-items: start; align-content: start; }
.nf .nf__logo { display: block; color: var(--nf-accent); border-radius: 4px; }
.nf__logo svg { display: block; width: 4.4rem; height: auto; }
.nf__logo path { fill: currentColor; }
.nf__tag { margin: var(--sc-4) 0 var(--sc-4); max-width: 19ch; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.3; text-wrap: balance; }
.nf__h { margin: 0 0 var(--sc-2); font-family: var(--sc-font-text); font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: .08em; color: var(--nf-soft); }
/* a way to reach the winery: a round chip with the service's own mark, then what it is and the number or address */
.nf__c { display: flex; align-items: center; gap: .85rem; min-height: 3.25rem; max-width: 100%; padding-block: .3rem; }
.nf__ic { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--nf-chip); box-shadow: inset 0 0 0 1px var(--nf-chip-line); color: var(--nf-accent);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.nf__ic svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.nf__ic .is-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
/* the services wear their own colours, so the mark is recognised before it is read */
.nf__ic--wa { background: #25D366; color: #fff; box-shadow: none; }
.nf__ic--fb { background: #fff; color: #0866FF; box-shadow: none; }
.nf__ic--fb svg { width: 100%; height: 100%; }
.nf__ic--waze { background: #33CCFF; color: #0B1C2B; box-shadow: none; }
.nf__ic--waze svg { width: 1.4rem; height: 1.4rem; }
.nf__ic--ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); color: #fff; box-shadow: none; }
.nf__ic--ig svg { width: 1.3rem; height: 1.3rem; }
.nf__social { display: grid; justify-items: start; min-width: 0; }
.nf__t { display: grid; min-width: 0; line-height: 1.3; }
.nf__t small { font-size: var(--sc-t-xs); color: var(--nf-soft); }
.nf__t > span { font-size: var(--sc-t-sm); overflow-wrap: anywhere; }
.nf__note { margin: var(--sc-2) 0 0; max-width: 30ch; font-size: var(--sc-t-sm); color: var(--nf-soft); }
.nf__more { display: inline-block; padding-block: .55rem; font-size: var(--sc-t-sm); color: var(--nf-accent) !important; text-decoration: underline !important; text-underline-offset: .3em; text-decoration-thickness: 1px !important; }
.nf__list { list-style: none; margin: 0; padding: 0; display: grid; }
.nf__list a { display: inline-block; padding-block: .5rem; font-size: var(--sc-t-sm); color: var(--nf-soft) !important; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .nf__list a:hover { color: var(--nf-ink) !important; }
  .nf__more:hover { color: var(--nf-ink) !important; }
  .nf__c:hover .nf__t > span { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
  .nf__c:hover .nf__ic:not(.nf__ic--wa, .nf__ic--fb, .nf__ic--waze, .nf__ic--ig) { background: var(--nf-accent); color: var(--nf-chip-ink, #FBF7F0); box-shadow: none; }
}
.nf__base { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sc-3) var(--sc-6); align-items: center; padding-top: var(--sc-5); border-top: 1px solid var(--nf-line); }
.nf__kosher { display: flex; gap: .75rem; }
.nf__kosher img { width: 52px; height: 52px; object-fit: contain; background: #F4EEE3; border-radius: 50%; padding: 4px; }
.nf__fine { margin: 0; max-width: 70ch; font-size: var(--sc-t-xs); color: var(--nf-soft); }
.nf__fine strong { font-weight: 600; color: var(--nf-ink); }
.nf__copy { margin: 0; font-size: var(--sc-t-xs); color: var(--nf-soft); white-space: nowrap; }
/* the builder's credit, the last line of the page: small, and a glint of gold passes over it now and then
   while it is in view (store.js sets .is-glint), six times at most per visit, paused under the pointer or focus */
.nf__credit { grid-column: 1 / -1; justify-self: center; margin: var(--sc-2) 0 0; font-size: var(--sc-t-xs); letter-spacing: .02em; color: var(--nf-soft); text-align: center; }
.nf__sep { margin-inline: .6em; }
.nf__credit a { display: inline-block; padding-block: .45rem; }
@media (hover: hover) and (pointer: fine) { .nf__credit a:hover { text-decoration: underline; text-decoration-color: var(--nf-soft); text-underline-offset: .3em; } }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .nf__credit { background: linear-gradient(105deg, var(--nf-soft) 0 36%, var(--nf-accent) 50%, var(--nf-soft) 64% 100%) 0 0 / 260% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; color: transparent; }
    .nf__credit.is-glint { animation: nf-glint 7s cubic-bezier(.77, 0, .175, 1) .6s 6; }
    .nf__credit:hover, .nf__credit:focus-within { animation-play-state: paused; }
  }
}
/* right to left, the way the line is read */
@keyframes nf-glint { 0% { background-position: 0 0; } 26%, 100% { background-position: 100% 0; } }
@media (forced-colors: active) { .nf__credit { background: none; color: CanvasText; } }
@media (max-width: 1180px) {
  .nf { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .95fr); }
  .nf__brand { grid-column: 1 / -1; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--sc-3) var(--sc-6); }
  .nf__tag { margin: 0; }
  .nf__brand .nf__social { justify-self: end; grid-template-columns: auto auto; column-gap: var(--sc-6); }
  .nf__social .nf__h { grid-column: 1 / -1; }
}
/* two columns up to a portrait tablet: in four, the e-mail address would break mid-word */
@media (max-width: 900px) {
  .nf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-5); }
  .nf__brand { grid-template-columns: auto minmax(0, 1fr); }
  .nf__brand .nf__social { grid-column: 1 / -1; justify-self: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sc-5); }
  .nf__logo svg { width: 3.6rem; }
  .nf__col:nth-of-type(2), .nf__col:nth-of-type(3) { grid-column: 1 / -1; }
  .nf__base { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}

/* --------------------------------------------------------------- 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); }

/* -------------------------------------------------------------- cookies */
/* A card of night glass in the corner where a Hebrew line begins; on a phone it spans the foot. */
.cookies { position: fixed; z-index: 45; inset-inline-start: var(--sc-gutter); bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); width: min(27rem, calc(100vw - 2 * var(--sc-gutter)));
  display: grid; gap: .8rem; padding: 1rem 1.15rem; box-sizing: border-box; border-radius: var(--sc-r-md); border: 1px solid rgb(213 157 93 / .3);
  background: rgb(12 17 36 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px -14px rgb(0 0 0 / .7);
  font-size: var(--sc-t-sm); line-height: 1.6; animation: cookies-in 420ms var(--sc-ease-out); }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; color: var(--sc-ink-soft); }
.cookies strong { color: var(--sc-ink); font-weight: 600; }
.cookies__act { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.cookies__act a { color: var(--sc-ink); text-underline-offset: .2em; padding-block: .5rem; }
.cookies.is-out { animation: cookies-out 200ms var(--sc-ease-out) forwards; }
@keyframes cookies-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes cookies-out { to { opacity: 0; transform: translateY(10px); } }
@keyframes cookies-fade { from { opacity: 0; } }
@keyframes cookies-fade-out { to { opacity: 0; } }
body.has-dock .cookies { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 860px) { .cookies { inset-inline: .75rem; width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem); } }
@media (prefers-reduced-motion: reduce) { .cookies { animation-name: cookies-fade; } .cookies.is-out { animation-name: cookies-fade-out; } }
@media (forced-colors: active) { .cookies { border-color: CanvasText; } }

/* -------------------------------------------------------------- the cue */
/* A small tag of night glass at the foot of the screen while the visitor rests
   mid-night: a bead of light runs down a gold thread to the chevron, twice,
   then it holds still. The glass keeps the words legible over the night sky,
   the moon and the sunrise alike, and nearly vanishes into the dark.
   It comes up slowly and leaves fast, the moment the page moves (page.js). */
.cue { --cx: -50%; position: fixed; z-index: 15; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + .75rem); translate: var(--cx) .5rem;
  display: flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .95rem; border: 1px solid rgb(213 157 93 / .3); border-radius: 999px;
  background: rgb(6 9 20 / .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgb(6 9 20 / .22);
  color: #E6DFD2; cursor: pointer; font: inherit; opacity: 0; visibility: hidden; pointer-events: none; -webkit-tap-highlight-color: transparent;
  transition: opacity .25s ease-out, translate .25s ease-out, visibility 0s .25s; }
.cue__lbl--short, .cue[data-size="m"] .cue__lbl:not(.cue__lbl--short) { display: none; }
.cue[data-size="m"] .cue__lbl--short { display: inline; }
.cue[data-size="s"] { padding-inline: .55rem; }
.cue[data-size="s"] .cue__lbl { display: none; }
.cue[data-pos="end"] { --cx: 0; left: 6px; }
.cue[data-pos="start"] { --cx: 0; left: auto; right: 6px; }
.cue.is-on { opacity: 1; visibility: visible; pointer-events: auto; translate: var(--cx) 0;
  transition: opacity .9s var(--sc-ease-out), translate .9s var(--sc-ease-out), visibility 0s; }
.cue__lbl { font-size: var(--sc-t-xs); letter-spacing: .06em; white-space: nowrap; }
.cue__ic { width: .9rem; height: 1.45rem; overflow: visible; fill: none; stroke: var(--sc-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cue__thread { opacity: .4; }
.cue__bead { fill: #F3D9A8; stroke: none; opacity: 0; filter: drop-shadow(0 0 2.5px rgb(243 217 168 / .9)); }
.cue.is-on .cue__bead { animation: cue-bead 2.2s var(--sc-ease-in-out) .5s 2; }
.cue.is-on .cue__chev { animation: cue-chev 2.2s var(--sc-ease-out) .5s 2; }
@keyframes cue-bead { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 62% { opacity: 1; transform: translateY(14px); } 72%, 100% { opacity: 0; transform: translateY(16px); } }
@keyframes cue-chev { 0%, 58% { transform: translateY(0); } 70% { transform: translateY(2.5px); } 100% { transform: translateY(0); } }
@media (hover: hover) and (pointer: fine) { .cue:hover { color: var(--sc-ink); border-color: rgb(213 157 93 / .55); } }
body.route-page .cue, .menu-open .cue { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cue, .cue.is-on { translate: var(--cx) 0; }
  .cue.is-on .cue__bead, .cue.is-on .cue__chev { animation: none; }
}
@media (forced-colors: active) { .cue { border-color: CanvasText; background: Canvas; } .cue__ic { stroke: CanvasText; } .cue__bead { fill: CanvasText; filter: none; } }

/* ----------------------------------------------------------------- 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__text { font-size: min(clamp(1.5rem, 6.9vw, 2.3rem), 5.4vh); max-width: 34ch; }

  .obj__bottle { height: 56vh; }

  .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); }

  .port__stage { --bh: 46vh; --bx: 50%; --by: 65%; }
  .port__card { inset-inline: var(--sc-gutter); width: auto; top: auto; bottom: 4vh; translate: none; gap: var(--sc-2); text-align: center; justify-items: center; }
  .port__card .sc-body { display: none; }
  .port__card .obj__buy { justify-content: center; margin-top: var(--sc-2); }
  .port__name { font-size: var(--sc-t-2xl); }
  .port__card::before { content: ""; position: absolute; inset: -2.5rem calc(-1 * var(--sc-gutter)) -4vh; z-index: -1;
    background: linear-gradient(to top, color-mix(in oklab, var(--sky-top) 88%, transparent) 50%, 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); }
}

/* ---------------------------------------------------------- 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; }
}
.bar__count[hidden] { display: none; }