/* Hallmark · shape: Conversational FAQ · genre: playful · theme: Sticker (deal 1/3, seed armenian-craft-lemonade-from-3bf5·a77af0be·2026-10-27·r0) · redesign: full · job: visit · draw: 59ea75 · brand: ARAX (spec 2026-10-27)
 * hero: Stage (swapped from Poster: the theme keeps type off pictures) · nav: a floating pill on a 2px ink edge with a straight hard drop (offsets made vertical site-wide on review), the authors' note a yellow tag under it that leaves on scroll (header redesign 2026-10-27) · footer: statement · imagery: generated stills 3 (Codex, brand references from Instagram) · signature: the five flavours stuck down as die-cut labels in their own fills, under the line-up photo · sticker: sheet, cobalt for what acts, yellow for what marks, sky label blue for the band
 * scroll: one pinned WebGL story (three.js, asked for by the owner): a stickered lemon squeezed into a glass, the five flavours falling in, the bottles turning on a ring; the static page above is what reduced motion, no WebGL or a failed load get
 * axes: light/display-heavy/cobalt · posture: full-palette (cobalt act, yellow mark, sky band, flavour fills as content) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: E, the poster head sits on a generated wall; held it on the calm left third and checked contrast at 1280 and 1440 */
/* Hallmark · dropped https://commons.wikimedia.org/wiki/File:Zitronenscheiben_--_2025_--_7302.jpg, https://commons.wikimedia.org/wiki/File:15-09-26-RalfR-WLC-0059.jpg · the library stand-ins were replaced by generated stills, so there is nothing to credit */
/* Hallmark · dismissed 25 · the answers are two short sentences beside a photo, a lede-length block that may sit from 28ch */
/* Hallmark · dismissed 23 · the cobalt city sticker is a full-palette fill declared in the stamp, one per page, like the cobalt footer */
/* Hallmark · drawn layer, the owner's request in chat 2026-10-27, over the theme's no-drawing rule: the brand draws in cobalt line, so edges, arrows, rules and underlines are drawn through one displacement filter; no mascots or doodles */
/* Hallmark · answered type · Caveat is the label-face outlier, for short handwritten notes only; Noto Sans Armenian is the Armenian fallback of both families, reached only by ?lang=hy */
/* Hallmark · dropped story-title · the owner cut the "who came up with it" section, 2026-10-27 */
@import url("./tokens.css");
@import url("./base.css");

body { font-size: 1.0625rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
h1, h2, h3 { color: var(--color-ink); line-height: 1.02; }
h1 { font-size: min(var(--text-display), 4.5rem); }
h2 { font-size: min(var(--text-section), 3.25rem); }
::selection { background: var(--color-accent-2); color: var(--color-ink); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* masthead: a floating die-cut pill over the page, the authors' note stuck under it as a yellow tag */
.masthead { position: fixed; top: var(--space-md); left: 0; right: 0; z-index: var(--z-sticky-nav); display: grid; justify-items: center; gap: var(--space-sm); padding-inline: max(var(--space-md), max(0px, (100% - var(--container)) / 2) + var(--gutter) - var(--space-lg) - var(--rule-bar)); pointer-events: none; }
.pill { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); width: 100%; min-height: 64px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: var(--shadow-lift); pointer-events: auto; }
.wordmark { display: block; padding-block: var(--space-2xs); color: var(--color-accent); text-decoration: none; }
.wordmark .logo { display: block; width: auto; height: 30px; fill: currentColor; transition: scale var(--dur-long) var(--spring); }
.wordmark:hover { color: var(--color-accent-deep); }
.wordmark:hover .logo { scale: 1.06; }
.wordmark:active .logo { scale: 0.96; transition-duration: var(--dur-micro); }
.wordmark:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-card); }
.pill__links { display: flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.pill__links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border-radius: var(--radius-pill); font-weight: 700; color: var(--color-ink); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.pill__links a:not(.btn):hover { background: var(--color-paper-2); }
.pill__links a:not(.btn):active { background: var(--color-sky); }
.pill__links a:not(.btn):focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.pill .btn--small { height: 44px; margin-left: var(--space-xs); }
/* language switch: three handwritten links to the language pages, the current one circled by hand */
.lang { display: flex; align-items: center; gap: var(--space-2xs); margin-left: auto; }
.lang a { position: relative; isolation: isolate; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--space-xs); text-decoration: none; color: var(--color-muted); font: 700 var(--text-lg)/1 var(--font-hand); cursor: pointer; transition: color var(--dur-micro) var(--ease-out); }
.lang a:hover { color: var(--color-ink); }
.lang a:active { translate: 0 1px; }
.lang a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-pill); }
.lang a[aria-current="page"] { color: var(--color-accent); }
.lang a[aria-current="page"]::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border: 2px solid var(--color-accent); border-radius: 50% 46% 52% 44%; rotate: -5deg; }
.pill .btn--primary { box-shadow: none; }
.pill .btn--primary:active { translate: 0 1px; box-shadow: none; }
.tag-note { margin: 0; padding: var(--space-xs) var(--space-md); border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-accent-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 700; box-shadow: var(--shadow-lift); rotate: -1.5deg; justify-self: end; margin-right: var(--space-lg); pointer-events: auto;
  transition: opacity var(--dur-long) var(--ease-out), translate var(--dur-long) var(--ease-out), rotate var(--dur-long) var(--spring); }
.tag-note a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.tag-note a:hover { color: var(--color-accent); }
.tag-note a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-card); }
.masthead.is-scrolled .tag-note { opacity: 0; translate: 0 -12px; rotate: 0deg; pointer-events: none; }
.masthead.is-scrolled .tag-note:focus-within { opacity: 1; translate: 0 0; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .tag-note, .wordmark .logo { transition: opacity var(--dur-micro) linear; } .masthead.is-scrolled .tag-note { translate: none; } }

/* controls */
.btn { display: inline-flex; align-items: center; height: 52px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font: 700 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 2px var(--color-ink); transition: background-color var(--dur-micro) var(--ease-out), translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { translate: 0 1px; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--small { height: 44px; padding: 0 var(--space-md); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 0 0 5px var(--color-white), 0 6px 0 5px var(--color-ink); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--primary:active { translate: 0 5px; box-shadow: 0 0 0 5px var(--color-white), 0 1px 0 5px var(--color-ink); }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.25em; white-space: nowrap; transition: color var(--dur-micro) var(--ease-out); }
.link:hover { color: var(--color-accent); }
.link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn, .link { transition: background-color var(--dur-micro) linear, color var(--dur-micro) linear; } .btn:active, .btn--primary:active { translate: none; } }

/* die-cut surfaces */
.diecut { margin: 0; border: 6px solid var(--color-white); border-radius: 22px; box-shadow: var(--shadow-card); background: var(--color-slot); }

/* hero: stage, the photo die-cut and bleeding off the right edge */
.hero { overflow-x: clip; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; min-height: min(100svh, 940px); padding-top: var(--space-4xl); padding-block: var(--space-2xl); }
.hero__photo { height: clamp(440px, 70svh, 700px); rotate: 1.5deg; }
.hero__photo > img { object-position: 74% 55%; }
.hero h1 { max-width: 9ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }

/* sections */
.section { padding-block: var(--section-gap); }
.section--l { padding-block: var(--section-gap-l) var(--section-gap); }
.section--sky { background: var(--color-sky); padding-block: var(--section-gap-s); }
.qa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.qa h2 { grid-column: 1 / span 7; }
.qa .lead { grid-column: 8 / -1; margin: 0; color: var(--color-ink-2); }

/* flavours: the line-up, then the labels stuck down */
.lineup { aspect-ratio: 3 / 2; max-height: 820px; width: 100%; }
.lineup > img { object-position: 50% 55%; }
.labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: var(--space-lg); margin: calc(-1 * var(--space-2xl)) 0 0; padding: 0 var(--space-xl) var(--space-lg); list-style: none; position: relative; z-index: 2; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.labels:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.label { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-xl); min-height: 240px; margin-top: var(--space-md); padding: var(--space-lg); border: 6px solid var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-card); background: var(--fill); color: var(--color-ink); scroll-snap-align: start; rotate: var(--tilt, 0deg); }
.label:nth-child(odd) { --tilt: -2deg; } .label:nth-child(even) { --tilt: 1.5deg; } .label:nth-child(3) { --tilt: -0.5deg; }
.label--lavender { --fill: var(--flavor-lavender); } .label--pineapple { --fill: var(--flavor-pineapple); } .label--blueberry { --fill: var(--flavor-blueberry); } .label--lemoa { --fill: var(--flavor-lemoa); } .label--grapefruit { --fill: var(--flavor-grapefruit); }
.label h3 { font-size: var(--text-xl); line-height: 1.08; overflow-wrap: normal; hyphens: manual; }
.label p { font-weight: 700; }

/* where + flavours: two die-cut cards side by side, each with its own carousel */
.duo { padding-block: var(--section-gap-s); }
.duo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.card { position: relative; display: flex; flex-direction: column; min-height: clamp(560px, 78svh, 780px); padding: var(--space-2xl); border: 2px solid var(--color-ink); border-radius: 36px; background-color: var(--card-bg); color: var(--color-ink); overflow: hidden; isolation: isolate; }
/* four screw dots, above the bottle canvas */
.card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  --dot: radial-gradient(circle, var(--color-ink) 0 7px, transparent 7.5px);
  background-image: var(--dot), var(--dot), var(--dot), var(--dot); background-repeat: no-repeat; background-size: 22px 22px; background-position: 28px 28px, calc(100% - 28px) 28px, 28px calc(100% - 28px), calc(100% - 28px) calc(100% - 28px); }
.card--venues { --card-bg: var(--color-accent-2); }
.card--flavour { --card-bg: var(--fill, var(--flavor-lemoa)); align-items: center; text-align: center; transition: background-color 0.9s var(--ease-out); }
.card__title { position: relative; z-index: 2; font: 800 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.01em; }
.card__title--centre { text-align: center; }
.slides { position: relative; flex: 1; margin: 0; padding: 0; list-style: none; display: grid; }
.slide { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-md); }
.slide h3 { font: 800 clamp(3rem, 6.4vw, 6.5rem)/0.92 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.slide address { font-style: normal; font-size: var(--text-lead); color: var(--color-ink-2); }
.slide .btn { margin-top: var(--space-md); }
.is-carousel .slides--centre { position: absolute; inset: auto 0 clamp(36px, 5vw, 64px); z-index: 2; flex: none; }
.slides--centre .slide { align-items: center; gap: var(--space-2xs); }
.slides--centre h3 { font-size: clamp(2rem, 3.2vw, 3rem); }
.slides--centre p { font-weight: 700; color: var(--color-ink-2); }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-lg); }
.card__nav { display: flex; align-items: center; gap: var(--space-md); }
.card__count { min-width: 5ch; font: 800 var(--text-md)/1 var(--font-display); font-variant-numeric: tabular-nums; text-align: center; }
.card__note { color: var(--color-ink-2); }
.card__note a { color: var(--color-ink); font-weight: 700; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.round { display: grid; place-items: center; width: 64px; height: 64px; border: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); cursor: pointer; transition: scale 0.5s var(--spring), background-color var(--dur-short) var(--ease-out); }
.round:hover { scale: 1.08; }
.round:active { scale: 0.92; transition-duration: 0.12s; }
.round:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }
.round--side { position: absolute; top: 50%; z-index: 3; width: 88px; height: 88px; translate: 0 -50%; }
.round--left { left: clamp(20px, 3vw, 44px); }
.round--right { right: clamp(20px, 3vw, 44px); }
.card__bottle { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: none; }
.has-bottle .card__bottle { display: block; }

/* without the script the slides are a plain list; with it, one at a time */
.slides { gap: var(--space-xl); align-content: center; padding-block: var(--space-xl); }
.card:not(.is-carousel) .round, .card:not(.is-carousel) .card__count { display: none; }
.is-carousel .slides { gap: 0; padding-block: 0; }
.is-carousel .slide { grid-area: 1 / 1; visibility: hidden; }
/* the active slide plays in letter by letter; the others wait below or leave upward */
.slide.is-in { visibility: visible; }
.slide.is-out { visibility: visible; }
.slide .c { display: inline-block; }
.is-carousel .slide .c { translate: 0 105%; opacity: 0; filter: blur(5px); }
.slide .w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; padding-block: 0.06em; margin-block: -0.06em; vertical-align: top; }
.slide.is-in .c { translate: 0 0; opacity: 1; filter: blur(0); transition: translate 1s var(--spring), opacity 0.6s var(--ease-out), filter 0.7s var(--ease-out); transition-delay: calc(60ms + var(--i) * 18ms); }
.slide.is-out .c { translate: 0 -105%; opacity: 0; filter: blur(5px); transition: translate 0.5s var(--ease-in), opacity 0.35s linear, filter 0.4s linear; transition-delay: calc(var(--i) * 6ms); }
.slide.is-back .c { translate: 0 -105%; }
.slide.is-back.is-out .c { translate: 0 105%; }
.is-carousel .slide > :not(h3) { opacity: 0; translate: 0 14px; }
.slide.is-in > :not(h3) { opacity: 1; translate: 0 0; transition: opacity 0.7s var(--ease-out) 0.35s, translate 0.9s var(--spring) 0.3s; }
.slide.is-out > :not(h3) { opacity: 0; translate: 0 -10px; transition: opacity 0.3s linear, translate 0.4s var(--ease-in); }
.no-split .slide.is-in .c, .no-split .slide .c { translate: none; opacity: 1; filter: none; }

/* partners: answers beside the bar photo */
.partners { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.partners__text { grid-column: 1 / span 6; padding-top: var(--space-xl); }
.answer { margin-top: var(--space-lg); }
.answer + .answer { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-bar) dashed var(--color-rule); }
.answer h3 { font-size: var(--text-2xl); }
.answer p { margin-block: var(--space-sm) var(--space-xs); max-width: 40ch; font-size: var(--text-lead); line-height: 1.45; }
.bar-photo { grid-column: 8 / -1; aspect-ratio: 4 / 5; min-height: 480px; max-height: 720px; width: 100%; rotate: 2deg; }
.bar-photo > img { object-position: 50% 40%; }


/* footer: statement */
.footer { padding-block: var(--section-gap-s) var(--space-2xl); background: var(--color-accent); color: var(--color-accent-ink); }
.footer__logo { display: block; width: min(100%, 1180px); height: auto; fill: var(--color-accent-ink); }
.footer__line { max-width: 18ch; margin-top: var(--space-xl); font: 800 clamp(2rem, 4.5vw, 4rem)/0.95 var(--font-display); letter-spacing: -0.03em; color: var(--color-accent-ink); text-wrap: balance; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-bar) dashed var(--color-sky); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--color-accent-ink); font-weight: 700; text-underline-offset: 0.2em; }
.footer a:hover { color: var(--color-accent-2); }
.footer a:focus-visible { outline-color: var(--color-accent-2); }
.footer small { font-size: var(--text-sm); color: var(--color-sky); }

@media (max-width: 60rem) {
  .pill__links li:not(:last-child) { display: none; }
  .pill { padding-left: var(--space-md); }
  .tag-note { justify-self: center; margin-right: 0; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__photo { order: -1; height: auto; aspect-ratio: 4 / 3; margin-right: 0; rotate: 1deg; }
  .qa h2, .qa .lead { grid-column: 1 / -1; }
  .labels { margin-top: var(--space-lg); padding-inline: 0 var(--space-md); grid-auto-columns: 78%; }
  .label { min-height: 150px; gap: var(--space-md); }
  .partners__text, .bar-photo { grid-column: 1 / -1; }
  .duo__grid { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 520px; padding: var(--space-2xl) var(--space-xl); }
  .round--side { width: 64px; height: 64px; }
  .partners__text { padding-top: 0; }
  .bar-photo { min-height: 0; rotate: 1deg; }
}
@media (max-width: 40rem) {
  .pill__links { display: none; }
  .lang { margin-left: 0; }
  .lineup { aspect-ratio: 4 / 3; }
}

/* scroll story: a pinned WebGL stage over a tall track; only when the head script found WebGL and motion is welcome */
.story3d { display: none; }
.js-3d .fallback { display: none; }
.js-3d .story3d { --bar-height: 0px; display: block; position: relative; height: 860svh; background: var(--color-paper); color: var(--color-ink); }
.story3d__stage { position: sticky; top: var(--bar-height); height: calc(100svh - var(--bar-height)); overflow: hidden; }
.story3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.story-ready .story3d canvas { opacity: 1; }
.story3d__anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }
.story3d__beats { position: relative; z-index: 2; height: 100%; pointer-events: none; }
.beat { position: absolute; left: var(--gutter); top: 50%; width: min(36rem, 44%); translate: 0 -50%; visibility: hidden; transition: visibility 0s linear 0.9s; }
.beat.is-in { visibility: visible; pointer-events: auto; transition: none; }
.beat h1, .beat h2 { color: var(--color-ink); }
.beat h1 { max-width: 9ch; }
.beat h2 { font-size: min(var(--text-display), 4.75rem); max-width: 11ch; }
.beat .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-ink-2); }
.story3d .btn:focus-visible { outline-color: var(--color-focus); }

/* copy plays in letter by letter from under a mask, and leaves upward */
.beat .w { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; padding-block: 0.06em; margin-block: -0.06em; vertical-align: top; }
.beat .c { display: inline-block; translate: 0 105%; rotate: 6deg; opacity: 0; filter: blur(6px); transform-origin: 0 100%;
  transition: translate 0.5s var(--ease-in), rotate 0.5s var(--ease-in), opacity 0.35s linear, filter 0.4s linear; transition-delay: calc(var(--i) * 6ms); }
.beat.is-in .c { translate: 0 0; rotate: 0deg; opacity: 1; filter: blur(0);
  transition: translate 1.1s var(--spring), rotate 1.1s var(--spring), opacity 0.6s var(--ease-out), filter 0.7s var(--ease-out); transition-delay: calc(80ms + var(--i) * 22ms); }
.beat.is-out .c { translate: 0 -105%; rotate: -4deg; }
.beat .lead .c { translate: 0 60%; rotate: 0deg; }
.beat.is-out .lead .c { translate: 0 -60%; }
.beat.is-in .lead .c { translate: 0 0; }
.beat .actions { opacity: 0; translate: 0 18px; transition: opacity 0.3s linear, translate 0.4s var(--ease-in); }
.beat.is-in .actions { opacity: 1; translate: 0 0; transition: opacity 0.7s var(--ease-out), translate 1s var(--spring); transition-delay: calc(80ms + var(--i) * 22ms); }

/* scroll hint on the first screen */
.scroll-hint { position: absolute; left: 50%; bottom: var(--space-xl); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); translate: -50% 0; color: var(--color-ink); font: 700 var(--text-sm)/1 var(--font-body); opacity: 0; animation: hint-in 1s var(--ease-out) 1.4s forwards; transition: opacity 0.4s var(--ease-out), translate 0.4s var(--ease-out); }
.scroll-hint:hover * { animation-play-state: paused; }
.scroll-hint.is-gone { opacity: 0 !important; translate: -50% 12px; animation: none; }
@keyframes hint-in { from { opacity: 0; translate: -50% 12px; } to { opacity: 1; translate: -50% 0; } }

@media (max-width: 48rem) {
  .js-3d .story3d { height: 760svh; }
  .beat { top: auto; bottom: var(--space-xl); width: auto; right: var(--gutter); translate: none; }
  .beat h1, .beat h2 { font-size: clamp(2.25rem, 9vw, 3rem); }
  .beat .lead { margin-top: var(--space-sm); }
  .beat .actions { margin-top: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) { .story3d canvas { transition: none; } }

/* loading screen: a white-outlined lemon fills with juice as the models arrive, then lifts */
.loader { display: none; }
.js-3d .loader { position: fixed; inset: 0; z-index: var(--z-toast); display: grid; place-items: center; --p: 0;
  background: radial-gradient(120% 90% at 50% 40%, var(--color-accent-glow), var(--color-accent) 55%, var(--color-accent-deep));
  transition: opacity 0.8s var(--ease-out), visibility 0s linear 0.8s; }
.loader__lemon { width: min(64vw, 420px); overflow: visible; transition: scale 0.9s var(--spring), translate 0.9s var(--ease-out); animation: loader-float 3.2s var(--ease-in-out) infinite; }
.loader__fill { transform: translateY(calc(164px - 158px * var(--p))); transition: transform 0.7s var(--ease-out); }
.loader__wave { animation: loader-wave 1.8s linear infinite; }
.loader__juice { fill: var(--color-juice); }
.loader__outline { fill: none; stroke: var(--color-white); stroke-width: 4; stroke-linejoin: round; }
.loader__word { fill: var(--color-white); }
.loader__word--on-juice { fill: var(--color-accent); }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader.is-done .loader__lemon { scale: 1.12; }
@keyframes loader-wave { to { transform: translateX(86px); } }
@keyframes loader-float { 0%, 100% { translate: 0 -4px; rotate: -2deg; } 50% { translate: 0 4px; rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) { .loader__wave, .loader__lemon { animation: none; } }

/* hand-drawn layer: the brand draws in cobalt line, so edges are drawn with a pen. js/sketch.js puts
   an inline SVG behind each surface (.sketch) with smooth vector paths that drift by about a pixel; the
   colours below feed it. Until the script runs, the plain CSS borders above stand in. */
:root { --hand-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='10'%3E%3Cpath d='M1 5.5c5-3.6 9.6-3.8 14.4-.4s9.8 3.2 14.6-.2 8.8-3 13-.6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pill, .btn, .round, .card, .label, .tag-note { position: relative; isolation: isolate; }
.round--side { position: absolute; }
.sketch { z-index: -1; }
.card > .sketch { z-index: 2; }
.sk-fill { fill: var(--sk-fill, none); transition: fill var(--dur-micro) var(--ease-out); }
.sk-line { fill: none; stroke: var(--sk-line, var(--color-ink)); stroke-width: var(--sk-width, 2.4px); stroke-linecap: round; stroke-linejoin: round; }
.sk-ring { fill: var(--sk-ring, var(--color-white)); }
.sk-drop { fill: var(--sk-drop, var(--color-ink)); transition: transform var(--dur-micro) var(--ease-out); }
.pill.is-sketched, .tag-note.is-sketched, .btn.is-sketched, .round.is-sketched, .label.is-sketched { border-color: transparent; background: none; box-shadow: none; }
.card.is-sketched { border-color: transparent; overflow: clip; overflow-clip-margin: var(--space-xs); }
.card__bottle { border-radius: inherit; }
.pill { --sk-fill: var(--color-paper-3); }
.tag-note { --sk-fill: var(--color-accent-2); font-family: var(--font-hand); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; }
.btn { --sk-fill: transparent; --sk-line: currentColor; }
.btn.is-sketched:hover { background: none; --sk-fill: var(--color-paper-2); }
.btn--primary { --sk-fill: var(--color-accent); }
.btn--primary.is-sketched:hover { --sk-fill: var(--color-accent-deep); }
.btn--primary.is-sketched:active { translate: 0 5px; box-shadow: none; }
.btn--primary:active .sk-drop { transform: translate(0, 1px); }
.round { --sk-fill: var(--color-ink); }
.round.is-sketched:hover { --sk-fill: var(--color-accent); }
.label { --sk-fill: var(--fill); }
.round .arrow { width: 28px; height: 24px; }
.arrow--back { scale: -1 1; }

/* rules and underlines are drawn waves */
.answer + .answer, .footer__row { border-top: 0; }
.answer + .answer, .footer__row { position: relative; }
.answer + .answer::before, .footer__row::before { content: ""; position: absolute; top: calc(var(--space-xs) * -0.5); left: 0; right: 0; height: var(--space-sm); background: var(--color-rule); -webkit-mask: var(--hand-wave) repeat-x left center / 44px 10px; mask: var(--hand-wave) repeat-x left center / 44px 10px; }
.footer__row::before { background: var(--color-sky); }
.link, .card__note a, .tag-note a { text-decoration: none; background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat; background-size: 0 0; }
.link { position: relative; }
.link::after, .card__note a::after, .tag-note a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 8px; background: var(--color-accent); -webkit-mask: var(--hand-wave) repeat-x left center / 34px 8px; mask: var(--hand-wave) repeat-x left center / 34px 8px; transition: translate var(--dur-short) var(--ease-out); }
.card__note a, .tag-note a { position: relative; display: inline-block; padding-bottom: var(--space-xs); }
.card__note a::after, .tag-note a::after { bottom: -2px; }
.link:hover::after, .card__note a:hover::after, .tag-note a:hover::after { translate: 6px 0; }

/* the scroll hint: a handwritten word over a drawn arrow that keeps nudging down */
.scroll-hint { gap: 0; font: 700 var(--text-xl)/1 var(--font-hand); }
.scroll-hint__arrow { animation: hint-arrow 1.6s var(--ease-in-out) infinite; }
@keyframes hint-arrow { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
.card__count { font-family: var(--font-hand); font-size: var(--text-xl); }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__arrow { animation: none; }
  .link::after, .card__note a::after, .tag-note a::after { transition: none; }
}