/* ==========================================================================
   Site — fixed 3D stage, scroll sections, order flow, configurator
   --------------------------------------------------------------------------
   The canvas is fixed behind everything and never scrolls. Sections scroll
   over it, and scroll position drives the camera and the cup. That is what
   makes the product feel like it is being handled rather than shown.

   The page reads as a counter: choose the coffee (01), then the cup (02).
   Every surface the user operates is a card floating over the render; every
   surface that only talks is set in the serif and left unboxed.
   ========================================================================== */

/* --- The stage ------------------------------------------------------------ */

.stage {
  position: fixed;
  top: 0;
  left: 0;
  /* A canvas is a replaced element: inset alone leaves it at its intrinsic
     300x150. It has to be told to fill. The large viewport, like the film's
     stage (film/film.css): the film hands over to this cup in the same box. */
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;          /* the page stays scrollable over it */
  /* Two owners, handed over cleanly. CSS does the first reveal, because a
     fade that depends on the render loop is a fade that never finishes if the
     clock stalls. Once it has played, .is-live drops the transition and the
     loop takes the property over to run the exit above the footer. */
  opacity: 0;
  transition: opacity 1.2s var(--e-out);
}
.stage.is-ready { opacity: 1; }
.stage.is-live { transition: none; }

/* In the configurator the cup must be grabbable, so the stage takes pointer
   events back for that stretch only. */
.stage.is-interactive { pointer-events: auto; cursor: grab; touch-action: pan-y pinch-zoom; }   /* a sideways swipe turns the cup, an upward one still scrolls */
/* 02: the cup is turned by hand. The section, its wrapper and the empty
   column over the cup let the pointer through to the stage; only the card
   takes it. (They sat on top of the stage and swallowed every drag.) */
.content, #main, #build, #build .wrap, #build .build, .build__stagehole { pointer-events: none; }
#main > :not(#build), .site-footer, #build .panelbox { pointer-events: auto; }
.stage.is-interactive:active { cursor: grabbing; }

.content { position: relative; z-index: 1; }

/* --- Progress rail --------------------------------------------------------
   Four marks down the left edge. The active one grows a copper rule; the
   rest stay as faint numerals. Hidden on narrow screens, where there is no
   spare margin and the thumb is already the navigation. */

.rail {
  position: fixed;
  left: calc(var(--pad-x) * 0.42);
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: grid;
  gap: var(--s-4);
}
.rail__step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  color: var(--c-ink-faint);
  opacity: 0.8;                    /* 0.55 put the numerals at ~2.4:1 on cream */
  transition: opacity var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.rail__step::after {
  content: "";
  width: 14px; height: 1px;
  background: currentColor;
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.rail__step:hover { opacity: 1; }
.rail__step.is-here {
  opacity: 1;
  color: var(--c-accent);
}
.rail__step.is-here::after { transform: scaleX(2.2); }

@media (max-width: 1300px) { .rail { display: none; } }
/* up to 1440px the page's own margin is narrower than the rail with its long
   copper rule — the rule ran into the hero headline (12.10, measured at
   1280 and 1366): the rail moves to the edge and the rule shortens */
@media (min-width: 1301px) and (max-width: 1439px) {
  .rail { left: 12px; }
  .rail__step { gap: var(--s-2); }
  .rail__step.is-here::after { transform: scaleX(1.6); }
}
/* past the last section the rail has nothing to point at, and over the dark
   footer its numerals were a faint ghost (site.js sets the class) */
.rail { transition: opacity var(--d-base) var(--e-out); }
html.is-past-rail .rail { opacity: 0; pointer-events: none; }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  padding-block: var(--s-5);
  transition: padding var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
/* A solid bar, not a frosted one: a backdrop blur over the full-screen WebGL
   canvas is re-composited on every frame the cup moves, and its first use
   compiles GPU shaders mid-scroll — a 60-70 ms frame that landed exactly on
   the film's handoff to the live cup (measured, _film/trace.mjs). Solid, not
   94%: without the blur, the headline and card text passing under the bar
   showed through as a crisp ghost behind the nav (measured, screenshots). */
.site-header.is-stuck {
  padding-block: var(--s-3);
  background: var(--c-cream);
  box-shadow: 0 1px 0 var(--c-line-soft);
}
/* hard to the edges: the logo on the left, the controls on the right, the
   way the film's own chapter bar sits — never a centred block (Bünyamin) */
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6);
  max-width: none;
  padding-inline: var(--pad-edge);
}

.brand {
  display: inline-flex; align-items: baseline; gap: 1px;
  white-space: nowrap;
}
.brand__name {
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: -0.015em;
}
.brand__mark { color: var(--c-accent); font-size: 1.3rem; line-height: 0; }

.nav { display: flex; align-items: center; gap: clamp(var(--s-4), 2.4vw, var(--s-8)); }
.nav__link {
  position: relative;
  font-size: var(--t-small);
  color: var(--c-ink-dim);
  padding-block: 2px;
}
/* The underline grows from the left rather than fading in — a fade reads as
   a hover state, a draw reads as a deliberate mark. */
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}
.nav__link:hover { color: var(--c-ink); }
.nav__link:hover::after { transform: scaleX(1); }
@media (max-width: 620px) { .nav__link[data-optional] { display: none; } }

/* Language switch. Same control as the rest of the portfolio, so a visitor
   arriving from larisel.com meets something they have already used. */
.lang {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  background: rgba(253, 250, 244, 0.6);
}
.lang__btn {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.lang__btn:hover { color: var(--c-ink); }
.lang__btn[aria-pressed="true"] { background: var(--c-card); color: var(--c-ink); box-shadow: 0 1px 2px rgba(30, 22, 17, 0.1), 0 0 0 1px var(--c-line-soft); }

/* A phone bar cannot hold a wordmark, four links and a three-way language
   switch: measured at 389px of content in 335px of bar. The links step
   aside rather than the switch being pushed off the edge, where overflow-x
   hidden would quietly swallow it — the hero's own buttons and the footer
   already lead everywhere they did. Placed after the rules above on purpose:
   an equal-specificity override only wins if it comes later in the file. */
@media (max-width: 520px) {
  .nav__link { display: none; }
  .lang { padding: 2px; }
  .lang__btn { padding: 3px 7px; }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.9em 1.7em;
  border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 470;
  letter-spacing: 0.002em;
  border: 1px solid var(--c-line);
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.btn--sm { padding: 0.7em 1.3em; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background-color: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink);
  /* a soft line of light along the top edge (an inset, so it fades with the
     colour; a gradient image swapped instantly on hover and back) */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 1px 2px rgba(30, 22, 17, 0.14), 0 14px 30px -18px rgba(30, 22, 17, 0.5);
}
.btn--primary:hover {
  background-color: var(--c-accent); border-color: var(--c-accent);
  box-shadow: 0 1px 2px rgba(168, 85, 31, 0.3), 0 14px 30px -14px rgba(168, 85, 31, 0.8);
}
.btn--ghost { color: var(--c-ink-dim); background: rgba(253, 250, 244, 0.5); }
.btn--ghost:hover { color: var(--c-ink); border-color: var(--c-ink-dim); background: var(--c-card); }

/* --- Sections ------------------------------------------------------------- */

.panel {
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Tighter than a normal section band on purpose: each panel has to hold a
     whole card AND leave the cup room beside it on ONE screen. A panel that
     spills past the fold turns a choreographed page into a long scroll with
     a cut-off card at the bottom. Measured against a 900px viewport. */
  padding-block: clamp(var(--s-10), 6vh, var(--s-16));
}
.panel--hero { padding-block: clamp(var(--s-16), 11vh, var(--s-24)); position: relative; }
/* a card taller than the screen's middle starts under the 58px header, never
   behind it (01 at 1440x900: its top corners were 4px under the header) */
@media (min-width: 940px) {
  .panel:not(.panel--hero) { padding-top: max(clamp(var(--s-10), 6vh, var(--s-16)), calc(58px + var(--s-3))); }
}

/* Hero: type on the left, cup rendered on the right by the stage. The
   reading measure belongs to the text blocks, not the column: at 42ch of
   body type the column was ~400px, and the 2-line headline at 100-120px
   broke into four one-word lines ("Your / coffee, / your / cup."). */
.hero__inner > .lead,
.hero__inner > .hero__actions,
.hero__inner > .steps { max-width: 42ch; }
.hero__title {
  font-size: var(--t-hero);
  line-height: var(--lh-display);
  margin-block: var(--s-5) var(--s-6);
}
.hero__title span { display: block; white-space: nowrap; }
/* Beside the cup the headline gets the width left of it, not the viewport's
   height: the longest line (TR "senin bardağın.", 6.5em) must end before the
   cup on a 1024px screen too. Changes nothing from ~1440px up. */
@media (min-width: 940px) {
  .hero__title { font-size: min(var(--t-hero), 7.2vw); }
}
.hero__title em {
  font-style: italic;
  color: var(--c-accent);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }

/* The three steps are the whole promise of the page, so they are stated
   once, plainly, instead of explained in a paragraph. */
.steps {
  display: flex; flex-wrap: wrap;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}
.steps__item {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-fine);
  color: var(--c-ink-dim);
}
.steps__num {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--c-accent);
}

.scroll-cue {
  position: absolute; left: var(--pad-x); bottom: var(--s-8);
}
.scroll-cue::before {
  content: ""; width: 38px; height: 1px; background: var(--c-ink-faint);
  transform-origin: left; animation: sweep 2.8s var(--e-io) infinite;
}
@keyframes sweep {
  0%, 100% { transform: scaleX(0.28); opacity: 0.35; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* Story panels sit on one side so the cup keeps the other. */
.panel--right .wrap { display: flex; justify-content: flex-end; }

.panel__card,
.panelbox {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 120px),
    var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift), var(--shadow-inset);
}

.panel__card {
  max-width: 46ch;
  padding: clamp(var(--s-8), 3.2vw, var(--s-12));
}
.panel__card h2 { font-size: var(--t-h1); margin-block: var(--s-5) var(--s-6); text-wrap: balance; }
/* Beside the cup the card is ~340px of text: at --t-h1 (64px) the heading set
   in three lines with "Twelve" alone, and the card grew to 765px — 10px from
   the header on a 900px screen. Same size as the 01/02 card headings there. */
@media (min-width: 940px) {
  .panel__card h2 { font-size: var(--t-h2); }
}
.panel__card p { color: var(--c-ink-dim); }
.panel__card p + p { margin-top: var(--s-4); }

.facts { margin-top: var(--s-8); }
.fact {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-top: 1px solid var(--c-line-hair);
  font-size: var(--t-fine);
}
.fact:last-child { border-bottom: 1px solid var(--c-line-hair); }
.fact__key { color: var(--c-ink-faint); }
.fact__val { margin: 0; text-align: right; }

/* --- Panel box (the two order steps) -------------------------------------- */

.panelbox {
  width: 100%;
  padding: clamp(var(--s-6), 2.6vw, var(--s-10));
}
.panelbox--wide { max-width: 640px; }

.panelbox__head { margin-bottom: var(--s-6); }
.panelbox__head h2 { font-size: var(--t-h2); margin-top: var(--s-4); }
.panelbox__note {
  margin-top: var(--s-3);
  font-size: var(--t-fine);
  color: var(--c-ink-faint);
}
.panelbox__note strong { color: var(--c-ink); font-weight: 500; }
/* inside the card's foot the note is centred with the button by the flex
   row; its own top margin pushed it 6px low */
.panelbox__foot .panelbox__note { margin-top: 0; }

.panelbox__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}

/* --- 01 — the drink ------------------------------------------------------- */

.drinks { display: grid; gap: var(--s-2); }
@media (min-width: 560px) { .drinks { grid-template-columns: 1fr 1fr; } }

.drink {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* the meta line sits on the bottom edge whatever the row's height */
  gap: var(--s-1);
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  background: var(--c-card-2);
  transition: border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.drink:hover { border-color: var(--c-line); transform: translateY(-2px); }

.drink[aria-pressed="true"] {
  background: var(--c-card);
  border-color: var(--c-ink);
  box-shadow: var(--shadow-soft);
}
/* A selected card earns a copper rule down its edge — a border colour alone
   is easy to miss on a grid of six near-identical cards. */
.drink[aria-pressed="true"]::before {
  content: "";
  position: absolute; left: 0; top: var(--s-4); bottom: var(--s-4);
  width: 2px; border-radius: 2px;
  background: var(--c-accent);
}

.drink__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
}
.drink__name {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
}
.drink__price {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  color: var(--c-accent);
}
.drink__desc {
  font-size: var(--t-fine);
  line-height: 1.5;
  color: var(--c-ink-dim);
  text-wrap: pretty;               /* no lone "cap." on the last line */
}
.drink__meta {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

/* Beans: a bag to take home, added NEXT to the drink — a toggle, not one
   more drink to choose between — with its grind chosen on the card itself.
   (Until 11.10 the card was "stated, not offered" and could not be chosen.) */
/* .drink.drink--addon: the short-screen .drink padding (later in the file)
   must not pad the wrapper as well as the button inside it */
.drink.drink--addon { padding: 0; grid-template-rows: 1fr auto; gap: 0; }
.drink__add {
  display: grid; grid-template-rows: auto 1fr; gap: var(--s-1);
  width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-1);
  border-radius: inherit;
}
.drink__add:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
/* an add-on's price says so: "+ $18.00", and "✓ $18.00" once it is on the order */
.drink--addon .drink__price::before { content: "+ "; }
.drink--addon.is-added .drink__price::before { content: "✓ "; }
.drink--addon.is-added {
  background: var(--c-card);
  border-color: var(--c-ink);
  box-shadow: var(--shadow-soft);
}
.drink--addon.is-added::before {
  content: "";
  position: absolute; left: 0; top: var(--s-4); bottom: var(--s-4);
  width: 2px; border-radius: 2px;
  background: var(--c-accent);
  transform-origin: bottom; animation: nr-rule-in 460ms var(--e-out);
}
.grind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 var(--s-4) var(--s-3); }
.grind__label {
  margin-right: 4px;
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-faint);
}
.grind__opt {
  font-size: var(--t-label); font-weight: 500;
  padding: 0.22em 0.65em;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  color: var(--c-ink-faint);
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.grind__opt:hover { color: var(--c-ink); border-color: var(--c-ink-dim); }
.grind__opt[aria-pressed="true"] { color: var(--c-ink); border-color: var(--c-ink-dim); }
.drink--addon.is-added .grind__opt[aria-pressed="true"] { background: var(--c-card); border-color: var(--c-ink); color: var(--c-ink); }

/* --- 02 — the cup --------------------------------------------------------- */

.build { display: grid; gap: var(--s-8); width: 100%; }
/* a grid item is as wide as its widest unbreakable content by default — the
   sliding tab row (eight tabs, ~750px) pushed the phone page to 809px wide
   and the browser zoomed out (measured). Scroll rows must not size the card. */
.build > * { min-width: 0; }
@media (min-width: 940px) {
  .build { grid-template-columns: 1fr minmax(340px, 512px); align-items: center; }   /* 512: Russian's four milk chips need ~435px on one row */
  .build__stagehole {
    min-height: 62vh;                 /* empty column: the cup shows through */
    position: relative;
  }
}


.opt { margin-bottom: var(--s-5); }

.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choices--swatch { gap: var(--s-3); padding-block: var(--s-1); }

.chip {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.55em 1.05em;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-pill);
  font-size: var(--t-fine);
  color: var(--c-ink-dim);
  background: var(--c-card-2);
  transition: background var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
}
.chip:hover { border-color: var(--c-line-strong); color: var(--c-ink); }
/* 12.10: the chosen chip was a solid black pill — the heaviest thing on the
   card, five of them at once. Now a fine ink outline on the card's own white:
   still unmistakable, no longer loud. */
.chip[aria-pressed="true"] {
  background: var(--c-card); border-color: var(--c-ink); color: var(--c-ink);
  box-shadow: 0 3px 10px -6px rgba(30, 22, 17, 0.28);
}
.chip__add {
  /* a price, so it speaks like the other prices (Inter, tabular figures),
     not like a label */
  font-family: var(--f-body);
  font-size: var(--t-label);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.chip[aria-pressed="true"] .chip__add { color: var(--c-accent); }

/* Colour choices show the colour itself — a name alone makes people guess.
   The swatch carries its own hairline so a bone circle stays visible on a
   cream card. */
.swatch {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 58%),
    var(--sw);
  box-shadow: inset 0 0 0 1px rgba(30, 22, 17, 0.16),
              0 1px 2px rgba(30, 22, 17, 0.12);
  transition: transform var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.swatch:hover { transform: translateY(-2px) scale(1.06); }
.swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(30, 22, 17, 0.16),
              0 0 0 2px var(--c-card),
              0 0 0 3px var(--c-ink);
}
/* The name appears on hover: six unlabelled dots are a guessing game, and
   six labelled buttons no longer fit the card. */
.swatch::after {
  content: attr(aria-label);
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  border-radius: var(--r-sm);
  background: var(--c-ink); color: var(--c-cream);
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--e-out);
}
.swatch:hover::after, .swatch:focus-visible::after { opacity: 1; }

.total {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line-soft);
}
.total__left { min-width: 0; }
.total__label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}
.total__note { font-size: var(--t-fine); color: var(--c-ink-dim); margin-top: var(--s-2); text-wrap: pretty; }
/* The lira sign is set in the sans on purpose: the serif's latin-ext slice
   does not carry a convincing one, and a currency mark that silently falls
   back to a system serif next to a Newsreader numeral is visible at a
   glance. Two spans, one font each. */
.total__cur {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 0.62em;
  color: var(--c-ink-dim);
  margin-right: 0.12em;
  vertical-align: 0.06em;
}
.total__price {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;   /* the number must not jitter */
  color: var(--c-ink);
  white-space: nowrap;
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--c-espresso);
  color: var(--c-cream);
  padding-block: var(--s-32) var(--s-8);
}
.site-footer .label { color: rgba(244, 239, 229, 0.5); }
.site-footer h2 {
  font-size: var(--t-h1);
  max-width: 16ch;
  margin-block: var(--s-5) var(--s-6);
}
.site-footer .lead { color: rgba(244, 239, 229, 0.66); }

.site-footer__grid {
  display: grid; gap: var(--s-8);
  margin-top: var(--s-20);
}
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
/* a tablet: the address column (with the map) takes the wider half, hours and
   mail stack beside it — in three columns the map was 205px and unreadable */
@media (min-width: 700px) and (max-width: 1099px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .site-footer__grid > .site-footer__col:first-child { grid-row: span 2; }
}
.site-footer__col p {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: rgba(244, 239, 229, 0.72);
}

.site-footer__note {
  text-wrap: pretty;
  margin-top: var(--s-20);
  padding-top: var(--s-6);
  border-top: 1px solid rgba(244, 239, 229, 0.14);
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between;
  font-size: var(--t-fine);
  color: rgba(244, 239, 229, 0.55);
}
.site-footer a { color: rgba(244, 239, 229, 0.8); }
.site-footer a:hover { color: var(--c-cream); }

/* --- Reveal --------------------------------------------------------------- */

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Cards that sit over the 3D stage never fade: a half-transparent panel
   lets the cup show straight through the controls, which reads as a bug
   even while it is only mid-animation. They slide in instead. */
.panelbox.reveal,
.panel__card.reveal { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Narrow screens -------------------------------------------------------
   On a phone the cup cannot sit beside the text, so it takes the top of the
   screen and the content drops below it. Reading and looking get their own
   space instead of fighting for the same pixels. */
@media (max-width: 939px) {
  .panel--right .wrap { justify-content: center; }
  .hero__inner { max-width: none; }

  .panel {
    align-items: flex-end;
    padding-top: 44vh;
    padding-bottom: var(--s-16);
  }
  /* The hero used to centre its type and let the render sit behind it. That
     works on a light desktop layout where the cup is off to one side; on a
     phone the cup is centred and takes the upper half, so the eyebrow, the
     headline and the lead all crossed its body — cream type on a cream cup,
     and the orange half of the headline landed on the brown sleeve.
     So the hero now follows the same rule as every other panel here: the cup
     owns the top, the words start underneath it. Nothing overlaps, and the
     render is still the first thing you see. */
  .panel--hero {
    align-items: flex-end;
    padding-top: 46vh;
    padding-bottom: var(--s-10);
  }
  .scroll-cue { display: none; }
  .steps { gap: var(--s-3); flex-direction: column; }
}
/* On a phone the three steps sat below the fold (the hero was 892px on an
   844px screen) and pushed the eyebrow up against the cup's base, 5px from
   it. The sections themselves are numbered 01-03 right below, so the list
   goes; the hero fits one screen and the type gets ~80px of air. */
@media (max-width: 559px) {
  .panel--hero .steps { display: none; }
}
/* SE-size phones: the hero ran 38-118px past the screen and cut the button
   (Russian, measured): the type starts a little higher under the cup */
@media (max-width: 559px) and (max-height: 700px) {
  .panel--hero { padding-top: 44vh; padding-bottom: var(--s-6); }   /* 41vh put the eyebrow on the cup base */
}

/* --- Short screens --------------------------------------------------------
   Every panel on this page promises to fit one screen, and most laptops are
   720–820px tall, not 900. Width-based type and padding alone cannot keep
   that promise: on a 1366x720 laptop the cards ran 80–130px past the fold.
   So the display sizes and the vertical rhythm step down with the viewport
   HEIGHT, independently of how wide the window happens to be. */
@media (min-width: 940px) and (max-height: 860px) {
  :root {
    --t-h1: clamp(1.7rem, 3.4vw, 2.5rem);
    --t-h2: clamp(1.35rem, 2.4vw, 1.9rem);
    --t-lead: 1rem;
  }

  .panel { padding-block: var(--s-6); }
  /* a card is centred under the 58px header, not under the glass: centred
     on the whole screen, the 02 card's top slid 3px under the header at
     1280x720 (measured) */
  .panel:not(.panel--hero) { padding-top: calc(var(--s-6) + 58px); }
  .panelbox, .panel__card { padding: clamp(var(--s-5), 2.2vw, var(--s-8)); }

  .panelbox__head { margin-bottom: var(--s-4); }
  .panelbox__head h2 { margin-top: var(--s-3); }
  .panelbox__note { margin-top: var(--s-2); }
  .panelbox__foot { margin-top: var(--s-4); padding-top: var(--s-4); }

  .drink { padding: var(--s-2) var(--s-4); }
  .drink__add { padding-top: var(--s-2); }
  .drink__desc { font-size: 0.78125rem; }

  .opt { margin-bottom: var(--s-4); }
  .swatch { width: 34px; height: 34px; }
  .total { margin-top: var(--s-4); padding-top: var(--s-4); }

  .panel__card h2 { margin-block: var(--s-3) var(--s-4); }
  .panel__card p + p { margin-top: var(--s-3); }
  .facts { margin-top: var(--s-5); }
  .fact { padding-block: var(--s-2); }
}

/* --- Telefonda dokunma hedefleri -------------------------------------------
   Olculdu (390px): marka 30px, dil butonlari 24px yuksekti; Apple ve Google
   esigi 44px. Dolguyu buyutmek basligi bozardi, o yuzden yalnizca DOKUNMA
   ALANI gorunmez bir psodo-elemanla genisletiliyor - gorunum degismiyor. */
@media (pointer: coarse) {
  .brand, .lang__btn, .sound, .grind__opt, .usual__go, .map__go { position: relative; }
  .usual__go::before, .map__go::before { content: ""; position: absolute; inset: -12px -6px; }
  .tableqr__step { position: relative; }
  .tableqr__step::before { content: ""; position: absolute; inset: -6px; }   /* 32px circles, 44px to the thumb */
  .grind__opt::before { content: ""; position: absolute; inset: -10px -3px; }   /* 25px chips, 45px to the thumb */
  .brand::before,
  .lang__btn::before,
  .sound::before {
    content: "";
    position: absolute;
    inset: -11px -8px;
  }
}

/* --- 02: eight groups behind tabs, on every screen --------------------------
   Eight groups (size, colour, finish, pattern, sleeve, lid, name, extras) no
   longer fit one card on one screen as a stack. Each lives behind a tab that
   carries its current choice, the pane box keeps one height for all of them
   (the card never jumps under the hand), and on a phone the card stays short
   enough that the cup being designed stays in view above it. Arrow keys move
   between tabs (WAI-ARIA tabs, js/site.js). */
#build .opttabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  margin-bottom: var(--s-4);
  background: var(--c-card-2);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
}
.opttab {
  display: grid;
  align-content: center;
  gap: 1px;
  min-height: 48px;
  padding: 6px 4px;
  border-radius: calc(var(--r-md) - 4px);
  text-align: center;
  color: var(--c-ink-dim);
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}
.opttab:hover { color: var(--c-ink); }
.opttab__name { font-size: var(--t-fine); font-weight: 450; }
.opttab__value {
  font-size: var(--t-label);
  color: var(--c-ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.opttab[aria-selected="true"] {
  background: var(--c-card);
  color: var(--c-ink);
  box-shadow: 0 1px 2px rgba(30, 22, 17, 0.08), 0 0 0 1px var(--c-line-soft);
}
.opttab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

.optpanes { display: grid; align-items: center; min-height: 7.4rem; }   /* the tallest pane: two rows of chips plus a note */
#build .opt { display: none; margin: 0; }
#build .opt.is-on { display: grid; gap: var(--s-2); animation: nr-pane-in 320ms var(--e-out); }
@keyframes nr-pane-in { from { opacity: 0; transform: translateY(4px); } }
#build .choices--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
#build .choices--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#build .choices--4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#build .choices--4 .chip { justify-content: center; min-height: 44px; padding-block: 0.45rem; padding-inline: 0.6em; }
/* thirteen colours (twelve and "any"): seven to a row */
#build [data-group="cup"].choices--swatch { grid-template-columns: repeat(7, 40px); }
.swatch--custom {
  background:
    radial-gradient(circle, var(--c-card) 0 34%, transparent 36%),
    conic-gradient(#d9534f, #e8b04a, #8bbf6a, #4fa3c7, #6a6fc9, #c35fa8, #d9534f);
}
.swatch--custom.is-set {
  background:
    radial-gradient(circle, var(--sw) 0 56%, transparent 58%),
    conic-gradient(#d9534f, #e8b04a, #8bbf6a, #4fa3c7, #6a6fc9, #c35fa8, #d9534f);
}
.colour-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#opt-cup { position: relative; }
#build .choices--3 .chip, #build .choices--2 .chip { justify-content: center; min-height: 44px; padding-block: 0.45rem; }
#build .choices--swatch {
  display: grid; grid-template-columns: repeat(6, 36px);
  justify-content: space-between; gap: 10px 0; padding-block: 2px;
}
#build .swatch { width: 36px; height: 36px; }
/* the extras: two self-describing rows (no labels: the chips say "No milk",
   "Single shot"); on a narrow phone a row scrolls sideways instead of
   wrapping, so the pane — and the card — keep their height */
#build .choices--rail { flex-wrap: nowrap; gap: 6px; }
#build .choices--rail .chip { flex: 0 0 auto; min-height: 44px; padding-inline: 0.8em; }
.chip:disabled { opacity: 0.36; cursor: not-allowed; }
.chip:disabled:hover { border-color: var(--c-line); color: var(--c-ink-dim); }
.chip:disabled[aria-pressed="true"] { background: var(--c-card-2); border-color: var(--c-line); color: var(--c-ink-dim); box-shadow: none; }
.opt__note--here { padding: var(--s-4) var(--s-4); border: 1px dashed var(--c-line-strong); border-radius: var(--r-md); text-align: center; color: var(--c-ink-dim); }
.chip__sub { font-size: var(--t-label); color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__sub { color: var(--c-ink-faint); }
.chip__sub { white-space: nowrap; }

/* patterns are tiles that show the print itself (a name alone makes people
   guess, like the colours); the name appears on hover and in the tab */
.swatch--pat { --pc: var(--c-ink-dim); background-color: var(--c-card-2); }
.swatch--pat.pat--plain { background: var(--c-card-2); }
.swatch--pat.pat--pin   { background: repeating-linear-gradient(90deg, var(--pc) 0 1.5px, transparent 1.5px 6px) var(--c-card-2); }
.swatch--pat.pat--bands { background: repeating-linear-gradient(0deg, var(--pc) 0 3px, transparent 3px 8px) var(--c-card-2); }
.swatch--pat.pat--dots  { background: radial-gradient(var(--pc) 1.4px, transparent 1.9px) 0 0 / 7px 7px var(--c-card-2); }
.swatch--pat.pat--waves { background: repeating-radial-gradient(circle at 50% 140%, transparent 0 3px, var(--pc) 3px 4.5px, transparent 4.5px 7px) var(--c-card-2); }
.swatch--pat.pat--beans   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%236a594c'%3E%3Cellipse cx='12' cy='13' rx='5' ry='3.4' transform='rotate(30 12 13)'/%3E%3Cellipse cx='28' cy='22' rx='5' ry='3.4' transform='rotate(-25 28 22)'/%3E%3Cellipse cx='14' cy='30' rx='5' ry='3.4' transform='rotate(70 14 30)'/%3E%3C/g%3E%3C/svg%3E") center / 20px 20px repeat, var(--c-card-2); }
.swatch--pat.pat--tulip   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%236a594c'%3E%3Cpath d='M20 8c3 3 3 9 0 12c-3-3-3-9 0-12z'/%3E%3Cpath d='M19 20c-5-1-6-6-4-9c0 4 2 7 4 9z'/%3E%3Cpath d='M21 20c5-1 6-6 4-9c0 4-2 7-4 9z'/%3E%3Crect x='19.3' y='19' width='1.4' height='12'/%3E%3Cpath d='M20 31c-4-2-6-5-6-8c2 3 4 5 6 6z'/%3E%3Cpath d='M20 31c4-2 6-5 6-8c-2 3-4 5-6 6z'/%3E%3C/g%3E%3C/svg%3E") center / 20px 20px repeat, var(--c-card-2); }
.swatch--pat.pat--gulls   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%236a594c' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 15q3-4 6 0q3-4 6 0'/%3E%3Cpath d='M22 24q2.5-3.5 5 0q2.5-3.5 5 0'/%3E%3Cpath d='M12 30q2-2.6 4 0q2-2.6 4 0'/%3E%3C/g%3E%3C/svg%3E") center / 20px 20px repeat, var(--c-card-2); }
.swatch--pat.pat--ferry   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%236a594c'%3E%3Cpath d='M7 22h26l-3 5H10z'/%3E%3Crect x='11' y='18' width='17' height='4'/%3E%3Crect x='15' y='15' width='9' height='3'/%3E%3Crect x='19' y='10' width='2.4' height='5'/%3E%3C/g%3E%3Cpath d='M5 31q2.5-2 5 0t5 0t5 0t5 0t5 0t5 0' fill='none' stroke='%236a594c' stroke-width='1.2'/%3E%3C/svg%3E") center / 20px 20px repeat, var(--c-card-2); }
.swatch--pat.pat--skyline { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%236a594c'%3E%3Crect x='7' y='16' width='4' height='14'/%3E%3Cpath d='M6 16l3-6l3 6z'/%3E%3Cpath d='M14 30v-6h12v6z'/%3E%3Cpath d='M15 24a5 5 0 0 1 10 0z'/%3E%3Crect x='28' y='14' width='1.6' height='16'/%3E%3Cpath d='M27.6 14l1.2-4l1.2 4z'/%3E%3Crect x='3' y='26' width='34' height='4'/%3E%3C/g%3E%3C/svg%3E") center / 20px 20px repeat, var(--c-card-2); }
.swatch--pat.pat--check {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--pc) 42%, transparent) 50%, transparent 50%) 0 0 / 9px 9px,
    linear-gradient(0deg, color-mix(in srgb, var(--pc) 42%, transparent) 50%, transparent 50%) 0 0 / 9px 9px,
    var(--c-card-2);
}
#build .choices--pat { grid-template-columns: repeat(6, 38px); row-gap: 8px; }
#build .choices--pat .swatch { width: 38px; height: 38px; }   /* two rows and a one-line note fit the pane */
.opt__note { margin: 0; font-size: var(--t-fine); color: var(--c-ink-faint); text-wrap: balance; }

/* the name on the cup */
.namefield { display: grid; gap: var(--s-2); }
.namefield__label { font-size: var(--t-small); font-weight: 500; }
.namefield__input {
  font-family: var(--f-display); font-size: max(1rem, var(--t-h3)); letter-spacing: 0.02em;   /* >= 16px: no zoom on iOS */
  min-height: 46px; padding: 0.4em 0.8em;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-card-2); color: var(--c-ink);
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.namefield__input::placeholder { color: var(--c-ink-faint); opacity: 1; }   /* nothing below --c-ink-faint carries text */
.namefield__input:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-accent); }   /* the site's focus: 2px copper */
.namefield__hint { font-size: var(--t-fine); color: var(--c-ink-faint); margin: 0; }

@media (max-width: 939px) {
  #build.panel { padding-top: 0; padding-bottom: var(--s-6); }   /* the card sits low: the cup keeps the top */
  #build .panelbox { padding: var(--s-5); }
  #build .panelbox__head { margin-bottom: var(--s-4); }
  #build .panelbox__head h2 { margin-top: var(--s-2); }
  #build .total { margin-top: var(--s-4); padding-top: var(--s-4); }
  /* eight tabs in two rows made the card 56px taller and it covered the
     cup's foot (measured, 390x844): on a phone they are one sliding row,
     the chosen tab brought to the middle (js/site.js) */
  #build .opttabs {
    display: flex; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  #build .opttabs::-webkit-scrollbar { display: none; }
  /* three and a half tabs show, so the row reads as one that slides (a whole
     fourth tab hid the other five); a tab never grows with its value — the
     value ellipsizes — and the row fades at its edges like the chip rails */
  #build .opttab { flex: 0 0 calc((100% - 9px) / 3.5); max-width: 8.5rem; scroll-snap-align: center; }
  #build .opttabs {
    -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
            mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  /* the summary grows with every choice and the card is anchored to the
     bottom: unclamped it climbed over the cup's base (measured, 390x844) */
  #build .total__note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* size chips: the unit under the name, never broken ("16 / oz") */
  #build [data-group="size"] .chip,
  #build [data-group="lid"] .chip,
  #build .choices--4 .chip { flex-direction: column; gap: 0; line-height: 1.15; padding-inline: 0.4em; }
  #build [data-group="cup"].choices--swatch { grid-template-columns: repeat(7, 40px); }
  #build [data-group="cup"] .swatch { width: 40px; height: 40px; }
  #build .choices--pat { grid-template-columns: repeat(6, 40px); }
  #build .choices--pat .swatch { width: 40px; height: 40px; }
  #build .choices--rail {
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--s-5)); padding-inline: var(--s-5);
    -webkit-mask: linear-gradient(90deg, transparent, #000 var(--s-5), #000 calc(100% - var(--s-5)), transparent);
            mask: linear-gradient(90deg, transparent, #000 var(--s-5), #000 calc(100% - var(--s-5)), transparent);
  }
  #build .choices--rail::-webkit-scrollbar { display: none; }
}
/* a tablet (600-939px) has the width for the desktop's 4x2 tab grid */
@media (min-width: 600px) and (max-width: 939px) {
  #build .opttabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; -webkit-mask: none; mask: none; }
  #build .opttab { flex: none; max-width: none; }
}
@media (max-width: 939px) {
  /* 40px swatches on a phone, like the pattern tiles: six fit 293px easily */
  #build .choices--swatch { grid-template-columns: repeat(6, 40px); }
  #build .swatch { width: 40px; height: 40px; }
}
@media (max-width: 400px) {
  .namefield__hint { display: none; }
}

/* --- Cards in motion -------------------------------------------------------
   The cards are the counter you order at, so they move like objects, not
   like slides: the panel arrives, then what is on it, in reading order; the
   options answer the hand (a warm light where the pointer is, a degree or
   two of give); a choice lands with weight. Every rule here is motion or
   light on top of the existing design — nothing changes size, colour or
   layout, and all of it switches off with reduced motion. */

/* 1. Arrival. The panel itself never fades (it sits over the 3D stage); its
   contents do, each with its own small delay (--i, set by site.js). A slight
   overshoot on the rise reads as a spring, not a slide. */
.panelbox.reveal .panelbox__head > *,
.panelbox.reveal .opt,
.panelbox.reveal .total,
.panelbox.reveal .panelbox__foot,
.panel__card.reveal > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--e-out), transform 820ms cubic-bezier(0.2, 0.9, 0.25, 1.12);
  transition-delay: calc(120ms + var(--i, 0) * 46ms);
}
.panelbox.reveal.is-in .panelbox__head > *,
.panelbox.reveal.is-in .opt,
.panelbox.reveal.is-in .total,
.panelbox.reveal.is-in .panelbox__foot,
.panel__card.reveal.is-in > * { opacity: 1; transform: none; }
/* The option cards rise through the same transform that tilts and lifts
   them later (--enter), so arriving never overrides the hand. */
.panelbox.reveal .drink {
  opacity: 0; --enter: 14px;
  transition: opacity 620ms var(--e-out), transform 820ms cubic-bezier(0.2, 0.9, 0.25, 1.12),
              border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
  transition-delay: calc(120ms + var(--i, 0) * 46ms);
}
.panelbox.reveal.is-in .drink { opacity: 1; --enter: 0px; }
/* the copper rule before each label is drawn, not switched on */
.reveal .label--rule::before { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--e-out) 260ms; }
.reveal.is-in .label--rule::before { transform: scaleX(1); }
/* once in, the options go back to their own quick hover timing */
.panelbox.reveal.is-settled .drink { transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out); transition-delay: 0ms; }

/* 2. The hand. Fine pointers only: a hover light that follows the cursor
   (--mx/--my) and a tilt of at most two degrees (--rx/--ry), both set by
   site.js; the lift and the press stay pure CSS. */
.drink {
  transform: perspective(700px) translate3d(0, calc(var(--lift, 0px) + var(--enter, 0px)), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--press, 1));
}
.drink:hover { --lift: -2px; }
.drink:active { --press: 0.985; }
@media (hover: hover) and (pointer: fine) {
  .drink::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 238, 210, 0.62), rgba(255, 238, 210, 0) 62%);
    opacity: 0;
    transition: opacity var(--d-base) var(--e-out);
  }
  .drink:hover::after { opacity: 1; }
}

/* 3. A choice lands. The copper rule grows into place; a swatch rings out
   once; a size chip settles with a small give. Each animation starts when
   aria-pressed flips to true, so it plays exactly once per choice. */
.drink[aria-pressed="true"]::before { transform-origin: bottom; animation: nr-rule-in 460ms var(--e-out); }
@keyframes nr-rule-in { from { transform: scaleY(0); } }
.swatch::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--c-ink);
  opacity: 0; pointer-events: none;
}
.swatch[aria-pressed="true"]::before { animation: nr-ring 640ms var(--e-out); }
@keyframes nr-ring { from { opacity: 0.55; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.chip[aria-pressed="true"] { animation: nr-settle 420ms cubic-bezier(0.2, 0.9, 0.25, 1.25); }
@keyframes nr-settle { from { transform: scale(0.94); } }

/* 4. Changed values roll in rather than blink (site.js toggles .is-swapped). */
[data-value], [data-price] { display: inline-block; }
.is-swapped { animation: nr-swap 360ms var(--e-out); }
@keyframes nr-swap { from { opacity: 0; transform: translate3d(0, 0.45em, 0); } }

@media (prefers-reduced-motion: reduce) {
  .panelbox.reveal .drink { opacity: 1; --enter: 0px; transition: none; }
  .panelbox.reveal .panelbox__head > *, .panelbox.reveal .opt,
  .panelbox.reveal .total, .panelbox.reveal .panelbox__foot, .panel__card.reveal > * { opacity: 1; transform: none; transition: none; }
  .reveal .label--rule::before { transform: none; transition: none; }
  .drink[aria-pressed="true"]::before, .swatch[aria-pressed="true"]::before, .chip[aria-pressed="true"], .is-swapped { animation: none; }
  .drink { transform: none; }
  #build .opt.is-on, .drink--addon.is-added::before { animation: none; }
}

/* --- 02: place the order ------------------------------------------------- */
.build__order { width: 100%; justify-content: center; margin-top: var(--s-4); }
/* The button added ~67px: at 1280x720 the card's top went under the header
   (measured). On a laptop that short the summary line goes — the ticket
   repeats every choice — and the button tightens. */
@media (min-width: 940px) and (max-height: 760px) {
  #order .panelbox__note { display: none; }    /* 01 ran 4px from the bottom at 1280x720 once beans had a grind row */
}
@media (min-width: 940px) and (max-height: 800px) {
  #build .total__note { display: none; }
  .build__order { margin-top: var(--s-3); padding-block: 0.7em; }
}

/* --- 03 — Pick it up: the printed ticket ----------------------------------
   Feeds out of an imaginary counter printer: the paper unrolls from its top
   edge, the lines arrive one after another, the brew steps tick through.
   Centred over the page on wide screens, a bottom sheet on a phone. */
.ticket {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--s-6);
}
.ticket[hidden] { display: none; }
html.is-ticket {
  overflow: hidden;
  /* the scrollbar's reserved gutter (base.css) shows the ground while the
     scroll is locked — a 15px light strip beside the scrim (measured): it is
     tinted exactly as the scrim tints the cream */
  background: color-mix(in srgb, var(--c-cream), rgb(20 14 10) 42%);
  transition: background-color 420ms var(--e-out);
}
.ticket__scrim {
  position: absolute; inset: 0;
  background: rgba(20, 14, 10, 0.42);
  opacity: 0;
  transition: opacity 420ms var(--e-out);
}
.ticket.is-open .ticket__scrim { opacity: 1; }
.ticket__paper {
  --tp: var(--s-6);                                  /* the paper's side margin (the stub runs edge to edge) */
  position: relative;
  width: min(26rem, 100%);
  max-height: calc(100svh - 2 * var(--s-6));
  overflow: auto;
  padding: var(--s-5) var(--tp) var(--s-5);
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(255, 255, 255, 0.8), transparent 62%),
    var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 1px 2px rgba(30, 22, 17, 0.08), 0 2px 8px rgba(30, 22, 17, 0.1), 0 40px 80px -30px rgba(20, 14, 10, 0.55);
  /* the torn bottom edge of a receipt */
  -webkit-mask: radial-gradient(7px at 50% calc(100% + 1px), transparent 98%, #000) bottom / 14px 100%;
          mask: radial-gradient(7px at 50% calc(100% + 1px), transparent 98%, #000) bottom / 14px 100%;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-14px);
  transition: clip-path 900ms var(--e-out), transform 900ms var(--e-out);
  scrollbar-width: none;
}
.ticket.is-open .ticket__paper { clip-path: inset(0 0 0 0); transform: none; }
/* 12.10 ("make the ticket premium"): one quiet head line, the cup on a pool
   of light like a product shot, the brew as beads on a thread, the time as
   three printed choices instead of a browser drop-down, leaders to the
   prices, a stamp card of little cups, and a tear-off stub */
.ticket__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.ticket__brand { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -0.01em; }
.ticket__brand span { color: var(--c-accent); }
.ticket__no { display: inline-flex; align-items: baseline; gap: 0.6em; }
.ticket__no strong { font-family: var(--f-mono); font-weight: 400; font-size: 0.875rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.ticket__cup {
  margin: var(--s-2) 0 0;
  display: grid; place-items: center;
  min-height: 6rem;
  background: radial-gradient(46% 60% at 50% 48%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
}
.ticket__cup img { max-height: min(8.75rem, 16svh); width: auto; max-width: 100%; }
.ticket__title {
  font-family: var(--f-display); font-weight: 400; text-align: center;
  font-size: clamp(1.6rem, 4vw, 1.95rem); line-height: 1.05;
  margin: var(--s-2) 0 var(--s-3);
  text-wrap: balance;
}
/* the brew: four beads on a thread, the thread filling from one to the next */
.ticket__steps {
  list-style: none; margin: 0 0 var(--s-4); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.ticket__steps li {
  position: relative;
  display: grid; justify-items: center; gap: 7px;
  font-size: 0.6875rem; text-align: center; color: var(--c-ink-faint);
  transition: color 400ms var(--e-out);
}
.ticket__steps li i {
  position: relative; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line-strong);
  transition: background 400ms var(--e-out), box-shadow 400ms var(--e-out);
}
.ticket__steps li:not(:last-child)::before,
.ticket__steps li:not(:last-child)::after {
  content: ""; position: absolute; top: 5px; left: 50%; width: 100%; height: 1px;
}
.ticket__steps li:not(:last-child)::before { background: var(--c-line-strong); }
.ticket__steps li:not(:last-child)::after {
  background: var(--c-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1500ms linear;
}
.ticket__steps li.is-now { color: var(--c-ink); }
.ticket__steps li.is-now i { background: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 20%, transparent); animation: nr-bead 1.5s var(--e-out) infinite; }
.ticket__steps li.is-now::after, .ticket__steps li.is-done::after { transform: scaleX(1); }
.ticket__steps li.is-done { color: var(--c-ink-dim); }
.ticket__steps li.is-done i { background: var(--c-ink); box-shadow: none; }
.ticket__steps li:last-child.is-done { color: var(--c-accent-deep); font-weight: 500; }
.ticket__steps li:last-child.is-done i { background: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 20%, transparent); }
@keyframes nr-bead { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-accent) 8%, transparent); } }
/* the ready time: three printed choices, one tap */
.ticket__when { margin: 0 0 var(--s-4); }
.ticket__when > .label { display: block; margin-bottom: var(--s-2); }
.ticket__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ticket__slot {
  display: grid; justify-items: center; gap: 2px;
  min-height: 2.9rem; padding: 0.4rem 0.3rem;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: transparent; color: var(--c-ink-faint);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.ticket__slot strong { font-family: var(--f-mono); font-weight: 400; font-size: 1rem; letter-spacing: 0.04em; color: var(--c-ink-dim); font-variant-numeric: tabular-nums; }
.ticket__slot span { font-size: var(--t-label); letter-spacing: 0.03em; white-space: nowrap; }
.ticket__slot:hover { border-color: var(--c-line-strong); color: var(--c-ink-dim); }
.ticket__slot:hover strong { color: var(--c-ink); }
.ticket__slot[aria-checked="true"] { border-color: var(--c-ink); background: var(--c-card); color: var(--c-ink-dim); box-shadow: 0 3px 10px -6px rgba(30, 22, 17, 0.28); }
.ticket__slot[aria-checked="true"] strong { color: var(--c-ink); }
.ticket__slot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* at a table there is no time to choose: the table instead */
.ticket__tableno { display: none; }
html.is-table .ticket__tableno {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.ticket__tableno strong { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.ticket__tablenote { font-size: var(--t-fine); color: var(--c-ink-dim); line-height: 1.35; }
html.is-table .ticket__when, html.is-table .ticket__where { display: none; }
/* the order, with leaders to the prices */
.ticket__lines { list-style: none; margin: 0; padding: var(--s-2) 0; border-top: 1px solid var(--c-line-soft); }
.ticket__lines li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; column-gap: var(--s-2); align-items: baseline;
  padding: 0.2rem 0;
  font-size: var(--t-fine);
  opacity: 0; transform: translateY(4px);
  transition: opacity 400ms var(--e-out), transform 400ms var(--e-out);
  transition-delay: calc(420ms + var(--i, 0) * 70ms);
}
.ticket.is-open .ticket__lines li { opacity: 1; transform: none; }
.ticket__k { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint); padding-top: 0.15em; }   /* "ÇEKİRDEK, 250 G", "ЦВЕТ СТАКАНА" on one line */
.ticket__v { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--c-ink); }
.ticket__lines li.has-p .ticket__v::after { content: ""; flex: 1 1 auto; min-width: 12px; border-bottom: 1px dotted color-mix(in srgb, var(--c-ink) 30%, transparent); transform: translateY(-0.28em); }
.ticket__p { font-variant-numeric: tabular-nums; color: var(--c-ink-dim); }
.ticket__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s-2) 0 var(--s-3);
  border-top: 1px solid var(--c-ink);
  font-size: var(--t-small);
}
.ticket__total strong { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.ticket__where { font-size: var(--t-fine); color: var(--c-ink-dim); margin: 0 0 var(--s-3); text-align: center; }
/* the tear-off stub: a perforation, the bars, the honest line */
.ticket__stub {
  margin: 0 calc(var(--tp) * -1) var(--s-4);
  padding: var(--s-3) var(--tp) 0;
  border-top: 1px dashed var(--c-line-strong);
}
.ticket__barcode { height: 1.6rem; opacity: 0.8; }
.ticket__barcode svg { width: 100%; height: 100%; fill: var(--c-ink); }
.ticket__demo { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint); margin: var(--s-2) 0 0; text-align: center; }
.ticket__done { width: 100%; justify-content: center; }
@media (max-width: 559px) {
  .ticket { place-items: end center; padding: 0; }
  .ticket__paper { --tp: var(--s-5); width: 100%; max-height: 94svh; padding: var(--s-5) var(--tp) var(--s-4); transform: translateY(24px); }
  .ticket__cup img { max-height: 7.5rem; }
  .ticket__lines li { grid-template-columns: 7rem minmax(0, 1fr) auto; }
  /* a phone: the bars and the counter line go — Done must stay above the
     torn edge (it sat half under it at 390x844, measured) */
  .ticket__barcode, .ticket__where { display: none; }
  .ticket__stub { padding-top: var(--s-2); margin-bottom: var(--s-3); }
  .ticket__demo { margin-top: 0; }
  .ticket__cup img { max-height: min(6rem, 13svh); }
}
@media (prefers-reduced-motion: reduce) {
  .ticket__paper, .ticket__scrim, .ticket__lines li, .ticket__steps li::after { transition: none; }
  .ticket__steps li.is-now i { animation: none; }
}
/* short screens (a 768px laptop, an SE-size phone): the whole ticket on one
   screen — the bars are ornament and go first */
@media (max-height: 920px) {
  .ticket__paper { padding-top: var(--s-4); }
  .ticket__cup img { max-height: min(8rem, 15svh); }
}
@media (max-height: 800px) {
  .ticket__barcode { display: none; }
  .ticket__stub { padding-top: var(--s-2); margin-bottom: var(--s-3); }
  .ticket__demo { margin-top: 0; }
  .ticket__cup { min-height: 0; margin-top: 0; }
  .ticket__cup img { max-height: 4.5rem; }
  .ticket__title { font-size: 1.4rem; margin-block: var(--s-1) var(--s-3); }
  .ticket__steps { margin-bottom: var(--s-3); }
  .ticket__when { margin-bottom: var(--s-3); }
  .ticket__when > .label { margin-bottom: 6px; }
  .ticket__slot { min-height: 2.55rem; padding-block: 0.3rem; gap: 0; }
  .ticket__slot strong { font-size: 0.9375rem; }
  .ticket__lines li { padding-block: 0.12rem; }
  .ticket__total { padding-block: var(--s-1) var(--s-2); }
  .ticket__total strong { font-size: 1.5rem; }
  .ticket__stamps { padding-block: 6px; margin-bottom: var(--s-2); }
}
/* a long order (6-7 lines: name, extras, beans) ran past the screen on
   every size up to 1000px tall (measured): the ornaments make way for the
   lines — a taller screen keeps them */
@media (max-height: 1000px) {
  .ticket.is-long .ticket__barcode, .ticket.is-long .ticket__where { display: none; }
  .ticket.is-long .ticket__cup { min-height: 0; margin-block: 0; }
  .ticket.is-long .ticket__cup img { max-height: min(4.5rem, 10svh); }
  .ticket.is-long .ticket__lines li { padding-block: 0.1rem; }
  .ticket.is-long .ticket__title { margin-block: var(--s-2) var(--s-3); }
}
/* a 720-760px laptop: the counter address goes, the cup gets smaller — and
   a long order keeps its lines instead of the picture */
@media (max-height: 760px) {
  .ticket__where { display: none; }
  .ticket__cup img { max-height: 3.6rem; }
  .ticket.is-long .ticket__cup { display: none; }
  .ticket.is-long .ticket__title { margin-top: var(--s-3); }
}
/* SE-size screens (667px): the picture of the cup gives way */
@media (max-height: 700px) {
  .ticket .ticket__cup { display: none; }
  .ticket__title { margin-block: var(--s-2) var(--s-2); }
  .ticket__steps, .ticket__when { margin-bottom: var(--s-2); }
  .ticket__lines li { padding-block: 0.06rem; }
  .ticket__total { padding-block: 2px var(--s-1); }
  .ticket__stamps { padding: 4px var(--s-3); }
  .ticket__stub { margin-bottom: var(--s-2); }
}
/* short phones (SE-size): the cup still needs the top of the screen, so the
   02 card drops its heading and the summary line — the tabs carry every
   choice and the price stays */
@media (max-width: 939px) and (max-height: 720px) {
  #build .panelbox__head, #build .total__note, #build .total__label { display: none; }
  #build .total { margin-top: var(--s-3); padding-top: var(--s-3); }
}

/* --- 03: freshness, day by day ---------------------------------------------
   Replaced a roast curve that nobody could read (Bunyamin, 11.10). One bar,
   twelve days: roasted on day 0, resting while the gas settles, then the
   copper stretch where it is at its best — and a "Today" marker that is
   live (js/site.js: the batch is roasted Mondays at 04:00, Istanbul time).
   The bar fills and the marker drops in as the card arrives. */
.fresh { margin: var(--s-6) 0 0; }
.fresh__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--s-3); }
.fresh__txt { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.08em; color: var(--c-accent); white-space: nowrap; }
.fresh__track {
  position: relative;
  height: 10px; margin-top: 34px;          /* room for the Today pill */
  border-radius: var(--r-pill);
  background: var(--c-card-2);
  box-shadow: inset 0 0 0 1px var(--c-line-soft);
}
.fresh__seg {
  position: absolute; top: 0; bottom: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1100ms cubic-bezier(0.45, 0, 0.2, 1) 300ms;
}
.fresh__seg--rest {
  left: 0; width: calc(4 / 12 * 100%);
  border-radius: var(--r-pill) 0 0 var(--r-pill);
  background: repeating-linear-gradient(135deg, var(--c-line) 0 2px, transparent 2px 6px);
}
.fresh__seg--best {
  left: calc(4 / 12 * 100%); right: 0;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 55%, var(--c-card)), var(--c-accent));
  transition-delay: 900ms;
}
.fresh__roast {
  position: absolute; left: 0; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -2px;
  border-radius: 50%;
  background: var(--c-ink);
  box-shadow: 0 0 0 3px var(--c-card);
}
.fresh__now {
  position: absolute; top: -5px; bottom: -5px;
  left: calc(var(--day, 3) / 12 * 100%);
  width: 2px; margin-left: -1px;
  background: var(--c-ink);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 500ms var(--e-out) 1900ms, transform 600ms cubic-bezier(0.2, 0.9, 0.25, 1.25) 1900ms;
}
.fresh__pill {
  position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--c-ink); color: var(--c-cream);
  font-family: var(--f-mono); font-size: var(--t-label);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.fresh__now[style*="--day: 0"] .fresh__pill { transform: translateX(-14%); }   /* day 0: keep the pill inside the card */
.reveal.is-in .fresh__seg { transform: scaleX(1); }
.reveal.is-in .fresh__now { opacity: 1; transform: none; }
.fresh__days {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-family: var(--f-mono); font-size: var(--t-label); color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
}
.fresh__legend {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3);
}
.fresh__legend li { position: relative; display: grid; align-content: start; gap: 2px; padding-left: 13px; font-size: var(--t-fine); }
.fresh__legend li::before {
  content: ""; position: absolute; left: 0; top: 0.3em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-ink);
}
.fresh__legend li:nth-child(2)::before { background: repeating-linear-gradient(135deg, var(--c-ink-faint) 0 1.5px, transparent 1.5px 3px); box-shadow: inset 0 0 0 1px var(--c-ink-faint); }
.fresh__legend li.is-best::before { background: var(--c-accent); }
.fresh__key { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-faint); }
.fresh__val { color: var(--c-ink); line-height: 1.35; text-wrap: balance; }
.fresh__legend li.is-best .fresh__val { color: var(--c-accent-deep); font-weight: 500; }
.fresh__note { margin: var(--s-3) 0 0; font-size: var(--t-fine); color: var(--c-ink-faint); text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) {
  .fresh__seg, .fresh__now { transition: none; transform: none; opacity: 1; }
}
/* With the chart in it, the craft card ran to 795px — under the header
   on a 900px screen. The three facts become one row of three, key over
   value, and the card's padding tightens a step: back to ~690px. */
.facts { margin-top: var(--s-6); }
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4);
  border-top: 1px solid var(--c-line-hair);
  padding-top: var(--s-3);
}
.fact { display: block; padding: 0; border: 0; font-size: var(--t-fine); }
.fact:last-child { border-bottom: 0; }
.fact__key { display: block; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; margin-bottom: 4px; }
.fact__val { text-align: left; line-height: 1.4; text-wrap: balance; }
@media (min-width: 940px) {
  .panel__card { padding: clamp(var(--s-6), 2.6vw, var(--s-10)); }
  .panel__card h2 { margin-block: var(--s-4) var(--s-5); }
}
@media (max-width: 559px) {
  /* the legend's three columns are too narrow on a phone: rows */
  .fresh__legend { grid-template-columns: 1fr; gap: var(--s-1); }
  .fresh__legend li { grid-template-columns: 6.5rem 1fr; align-items: baseline; }
  .fresh__val { text-align: right; }
  /* three columns of facts are too narrow on a phone: rows again */
  .facts { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .fact { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-2); border-top: 1px solid var(--c-line-hair); }
  .fact:first-child { border-top: 0; }
  .fact__key { margin: 0; }
  .fact__val { text-align: right; }
}
@media (min-width: 940px) and (max-height: 860px) {
  .fresh { margin-top: var(--s-4); }
  .fresh__note { display: none; }
  .fresh__track { margin-top: 28px; }
  .fresh__legend { margin-top: var(--s-3); }
}
/* With the chart at full height (a squeezed one set its type at ~6px), the
   craft card ran 27px past a 720px screen in Russian (measured: 665px of
   card). On short laptops the second paragraph — the flavour line; the
   chart and the facts carry the substance — makes way. Russian's two-line
   heading needs the same up to 900px: there the card sat 2px under the
   header. */
@media (min-width: 940px) and (max-height: 780px) {
  #craft .panel__card p + p { display: none; }
}
@media (min-width: 940px) and (max-height: 940px) {
  html[lang="ru"] #craft .panel__card p + p { display: none; }
}

/* --- Cursor (js/cursor.js, fine pointers only) ---------------------------- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 210; pointer-events: none; color: var(--c-ink); opacity: 0; transition: opacity 300ms var(--e-out); }
.cursor.is-on { opacity: 1; }
/* cream wherever the ground is dark: the film, the curtain, the footer */
html[data-film="dark"] .cursor, html.is-loading .cursor, .cursor.is-inverse { color: var(--c-cream); }
.ticket:not([hidden]) ~ .cursor, html.is-ticket .cursor { color: var(--c-ink); }
html.is-fal .cursor { color: var(--c-cream); }
.cursor__dot, .cursor__ring { position: fixed; left: 0; top: 0; }
.cursor__dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: currentColor;
  transition: width 200ms var(--e-out), height 200ms var(--e-out), margin 200ms var(--e-out);
}
.cursor__ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid currentColor; opacity: 0.45;
  display: grid; place-items: center;
  transition: width 320ms var(--e-out), height 320ms var(--e-out), margin 320ms var(--e-out),
              opacity 320ms var(--e-out), background 320ms var(--e-out);
}
.cursor__label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 200ms var(--e-out); }
.cursor[data-mode="hot"] .cursor__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; opacity: 0.6; background: rgba(168, 85, 31, 0.08); }
.cursor[data-mode="hot"] .cursor__dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.cursor[data-mode="drag"] .cursor__ring { width: 84px; height: 84px; margin: -42px 0 0 -42px; opacity: 0.9; }
/* over the cup the ring is a pale lens: the label reads on an espresso or
   charcoal cup as well as on the cream */
.cursor[data-mode="drag"] .cursor__ring { background: rgba(253, 250, 244, 0.6); }
.cursor[data-mode="drag"] .cursor__label { opacity: 1; }
.cursor[data-mode="drag"] .cursor__dot { width: 0; height: 0; margin: 0; }
.cursor.is-down .cursor__ring { transform-origin: center; opacity: 1; }

/* --- Intro curtain (js/intro.js) -------------------------------------------
   Night, the wordmark, and a hairline that follows the film's real loading.
   Then the curtain lifts off the first frame like a stage curtain. */
.intro { display: none; }
html.is-loading .intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--c-night);
  color: var(--c-cream);
  transition: transform 1000ms cubic-bezier(0.76, 0, 0.24, 1);
}
html.is-loading { overflow: hidden; background: var(--c-night); }   /* the reserved scrollbar gutter is night too */
.intro__mark {
  font-family: var(--f-display); font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -0.01em;
  opacity: 0; transform: translateY(12px);
  animation: intro-in 1100ms var(--e-out) 120ms forwards;
}
.intro__mark span { color: var(--c-accent-glow); }
.intro__foot {
  position: absolute; left: 50%; bottom: clamp(2.5rem, 9vh, 5rem);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-4);
  width: min(18rem, 70vw);
  opacity: 0; animation: intro-in 900ms var(--e-out) 350ms forwards;
}
.intro__bar { position: relative; flex: 1; height: 1px; background: rgba(244, 239, 229, 0.16); overflow: hidden; }
.intro__bar span { position: absolute; inset: 0; background: var(--c-cream); transform: scaleX(0); transform-origin: left; }
.intro__pct { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.12em; color: rgba(244, 239, 229, 0.62); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }   /* "100" must not shorten the line */
html.is-lifting .intro { transform: translateY(-100%); }
html.is-lifting .intro__mark, html.is-lifting .intro__foot { opacity: 0; transition: opacity 400ms var(--e-out); }
@keyframes intro-in { to { opacity: 1; transform: none; } }
html.is-loading .intro__foot { animation-name: intro-foot; }
@keyframes intro-foot { to { opacity: 1; } }

/* --- Sound toggle (js/sound.js) — off until pressed ----------------------- */
.sound {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-ink-dim);
  padding: 0.4em 0.2em;
  transition: color var(--d-fast) var(--e-out);
}
.sound:hover, .sound[aria-pressed="true"] { color: var(--c-ink); }
html[data-film="dark"] .sound { color: rgba(244, 239, 229, 0.75); text-shadow: 0 1px 14px rgba(5, 4, 4, 0.4); }
html[data-film="dark"] .sound:hover, html[data-film="dark"] .sound[aria-pressed="true"] { color: var(--c-cream); }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.sound__bars i { display: block; width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height 300ms var(--e-out); }
/* at rest a still equaliser, not four dots (they read as "more...") */
.sound__bars i:nth-child(1) { height: 5px; }
.sound__bars i:nth-child(2) { height: 8px; }
.sound__bars i:nth-child(3) { height: 11px; }
.sound__bars i:nth-child(4) { height: 6px; }
html.has-sound .sound__bars i { animation: sound-bar 1.1s ease-in-out infinite; }
html.has-sound .sound__bars i:nth-child(2) { animation-delay: -0.35s; }
html.has-sound .sound__bars i:nth-child(3) { animation-delay: -0.7s; }
html.has-sound .sound__bars i:nth-child(4) { animation-delay: -0.2s; }
@keyframes sound-bar { 0%, 100% { height: 3px; } 50% { height: 11px; } }
@media (max-width: 939px) { .sound__txt { display: none; } .sound { padding: 0.6em; } }
@media (prefers-reduced-motion: reduce) { html.has-sound .sound__bars i { animation: none; height: 8px; } }

/* --- Visit: open right now? ------------------------------------------------ */
.open-now { display: flex; align-items: center; gap: 0.55em; margin-top: var(--s-3); font-size: var(--t-fine); color: rgba(244, 239, 229, 0.62); }
.open-now__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 239, 229, 0.35); }
.open-now.is-open { color: rgba(244, 239, 229, 0.86); }
.open-now.is-open .open-now__dot { background: var(--c-open); animation: open-pulse 2.4s var(--e-out) infinite; }
@keyframes open-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-open) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .open-now.is-open .open-now__dot { animation: none; } }

/* --- Sending a cup, coming back for it (11.10 evening) ----------------------
   Share links (#cup=…), a story picture, the last order remembered, a stamp
   card. All of it rides on what is already on the page: nothing new to read
   unless it is useful right now. */
.iconbtn {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.45em 0.85em;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-size: var(--t-fine); color: var(--c-ink-dim);
  background: var(--c-card);
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.iconbtn svg { width: 16px; height: 16px; flex: none; }
.iconbtn:hover { color: var(--c-ink); border-color: var(--c-ink-dim); }
.iconbtn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.iconbtn--box { width: auto; height: auto; align-self: stretch; aspect-ratio: 1; min-width: 48px; padding: 0; justify-content: center; flex: none; }
.iconbtn--box svg { width: 20px; height: 20px; }
.panelbox__head--tools { position: relative; }
.total__share { display: none; }
@media (max-width: 939px) and (max-height: 720px) {
  .total__share { display: inline-flex; width: 44px; height: 44px; padding: 0; justify-content: center; margin-left: var(--s-2); align-self: center; }
}
.build__share { position: absolute; top: -0.35em; right: 0; }
@media (max-width: 939px) {
  .build__share { padding: 0; width: 44px; height: 44px; justify-content: center; top: -0.6em; }
  .build__share .iconbtn__txt { display: none; }
}

/* the hero: welcome back */
@media (max-width: 559px) {
  .hero__inner:has(.usual:not([hidden])) .btn--ghost { display: none; }
  .usual { margin-top: var(--s-3) !important; }
}
.usual { margin: var(--s-5) 0 0; font-size: var(--t-small); color: var(--c-ink-dim); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.5em; }
.usual__what { color: var(--c-ink); font-weight: 500; }
.usual__go {
  color: var(--c-accent-deep); font-weight: 500;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-accent) 45%, transparent); text-underline-offset: 3px;
}
.usual__go:hover { text-decoration-color: currentColor; }

/* the ticket's stamp card: ten little cups, the tenth on the house; actions */
.ticket__stamps {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); background: var(--c-card-2);
}
.ticket__dots { display: inline-flex; gap: 3px; flex: none; }
.ticket__dots i {
  width: 11px; height: 14px;
  background: color-mix(in srgb, var(--c-ink) 24%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Crect x='0.3' y='0.8' width='10.4' height='1.7' rx='0.85'/%3E%3Cpath d='M1.2 3.2h8.6l-1.1 9.1a1.5 1.5 0 0 1-1.5 1.3H3.8a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Crect x='0.3' y='0.8' width='10.4' height='1.7' rx='0.85'/%3E%3Cpath d='M1.2 3.2h8.6l-1.1 9.1a1.5 1.5 0 0 1-1.5 1.3H3.8a1.5 1.5 0 0 1-1.5-1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ticket__dots i.is-on { background: var(--c-accent); }
.ticket__dots i.is-gift { background: color-mix(in srgb, var(--c-accent) 35%, transparent); }
.ticket__dots i.is-gift.is-on { background: var(--c-ink); }
.ticket__stamptxt { font-size: var(--t-label); color: var(--c-ink-dim); line-height: 1.35; text-wrap: balance; }
.ticket__stamps.is-gift .ticket__stamptxt { color: var(--c-accent-deep); font-weight: 500; }
.ticket__actions { display: flex; gap: var(--s-2); align-items: center; }
.ticket__actions .ticket__done { flex: 1; width: auto; }
.ticket.is-long .ticket__stamps { margin-bottom: var(--s-2); }

/* a quiet confirmation */
.toast {
  position: fixed; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 300;
  margin-inline: auto; width: fit-content; max-width: calc(100vw - 32px);
  transform: translateY(12px);
  padding: 0.7em 1.15em; border-radius: var(--r-md);
  background: var(--c-ink); color: var(--c-cream);
  font-size: var(--t-small); text-align: center; overflow-wrap: anywhere;
  opacity: 0; transition: opacity 260ms var(--e-out), transform 260ms var(--e-out);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: none; }
html.is-ticket .toast { bottom: auto; top: max(24px, env(safe-area-inset-top)); transform: translateY(-12px); }
html.is-ticket .toast.is-on { transform: none; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* --- Visit: a map of the street, drawn (no map service, no cookies) -------- */
/* the map, drawn like a printed one (12.10, "make the map premium"): the
   Moda point between Kadıköy bay and Kalamış, an engraved sea, the two
   avenues named, the ferry out of Kadıköy pier, north and a scale — and the
   café tagged on its street */
.map { margin: var(--s-4) 0 var(--s-2); max-width: 26rem; border-radius: var(--r-md); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(244, 239, 229, 0.1), 0 20px 40px -28px rgba(0, 0, 0, 0.6); }
.map svg { display: block; width: 100%; height: auto; }
.map__water { fill: color-mix(in srgb, var(--c-night), #0f1a22 35%); }
.map__hatch { stroke: rgba(244, 239, 229, 0.05); stroke-width: 0.6; }
.map__land { fill: color-mix(in srgb, var(--c-espresso), var(--c-cream) 7%); }
.map__park { fill: color-mix(in srgb, var(--c-espresso), #8c9a82 22%); }
.map__shore { fill: none; stroke: rgba(244, 239, 229, 0.3); stroke-width: 0.9; }
.map__walk { fill: none; stroke: rgba(244, 239, 229, 0.18); stroke-width: 0.8; stroke-dasharray: 1.5 2.5; stroke-linecap: round; }
.map__streets path { fill: none; stroke: rgba(244, 239, 229, 0.3); stroke-width: 1.6; stroke-linecap: round; }
.map__streets--minor path { stroke: rgba(244, 239, 229, 0.09); stroke-width: 0.8; }
.map__ferry { fill: none; stroke: rgba(232, 178, 122, 0.35); stroke-width: 0.8; stroke-dasharray: 3 3; }
.map__pier { fill: rgba(244, 239, 229, 0.45); }
.map__street { font-family: var(--f-body); font-size: 8.6px; letter-spacing: 0.04em; fill: rgba(244, 239, 229, 0.55); }
.map__label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.22em; fill: rgba(244, 239, 229, 0.6); }
.map__label--sea { font-family: var(--f-display); font-style: italic; font-size: 11px; letter-spacing: 0.08em; fill: rgba(244, 239, 229, 0.38); }
.map__north path { fill: rgba(244, 239, 229, 0.6); }
.map__north text, .map__scale text { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.1em; fill: rgba(244, 239, 229, 0.5); text-anchor: middle; }
.map__scale text { text-anchor: start; }
.map__scale path { fill: none; stroke: rgba(244, 239, 229, 0.45); stroke-width: 0.8; }
.map__glow0 { stop-color: rgba(232, 178, 122, 0.32); }
.map__glow1 { stop-color: rgba(232, 178, 122, 0); }
.map__dot { fill: var(--c-accent-glow); stroke: var(--c-night); stroke-width: 1.6; }
.map__pulse { fill: none; stroke: var(--c-accent-glow); stroke-width: 1.2; opacity: 0.6; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.6s var(--e-out) infinite; }
.map__tagline { fill: none; stroke: rgba(244, 239, 229, 0.5); stroke-width: 0.8; }
.map__tagbox { fill: var(--c-cream); }
.map__tagname { font-family: var(--f-display); font-size: 11.5px; fill: var(--c-ink); }
.map__tagaddr { font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.04em; fill: var(--c-ink-dim); }
@keyframes map-pulse { from { transform: scale(0.6); opacity: 0.7; } to { transform: scale(2.2); opacity: 0; } }
.site-footer .map__go { font-size: var(--t-fine); color: var(--c-accent-glow); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c-accent-glow) 40%, transparent); text-underline-offset: 3px; }
.map__go:hover { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .map__pulse { animation: none; } }

/* --- At the table (?masa=7, js/table.js) ------------------------------------
   The QR on a table opens the page as that table. Its two needs from the
   counter — a waiter and the bill — sit in the header itself, beside the
   language switch (12.10: a strip of their own under the header was a cream
   bar laid over the film, and "nothing like the rest of the site"). */
.tablenav { display: none; }
html.is-table .tablenav { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.tablenav__table {
  display: inline-flex; align-items: baseline; gap: 0.45em; margin: 0 var(--s-1) 0 0;
  transition: color var(--d-base) var(--e-out);
}
.tablenav__label { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-faint); }
.tablenav__table strong { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--c-ink); }
.tablenav__btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.45em;
  min-height: 34px; padding: 0.3em 0.9em;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-size: var(--t-fine); color: var(--c-ink); white-space: nowrap;
  background: var(--c-card);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.tablenav__btn svg { width: 16px; height: 16px; flex: none; }
.tablenav__btn:hover { border-color: var(--c-line-strong); }
.tablenav__btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tablenav__busy { display: none; }
.tablenav__btn.is-busy { color: var(--c-accent-deep); border-color: color-mix(in srgb, var(--c-accent) 45%, transparent); background: var(--c-accent-wash); }
.tablenav__btn.is-busy .tablenav__idle { display: none; }
.tablenav__btn.is-busy .tablenav__busy { display: inline; }
.tablenav__btn.is-busy svg { animation: nr-ring-bell 900ms var(--e-out); transform-origin: 50% 15%; }
@keyframes nr-ring-bell { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 45% { transform: rotate(-11deg); } 70% { transform: rotate(6deg); } }
.tablenav__count {
  display: inline-grid; place-items: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem;
  border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-cream);
  font-size: var(--t-label); font-variant-numeric: tabular-nums;
}
/* over the film the header is cream type on the night, and so are these */
html[data-film="dark"] .tablenav__label { color: rgba(244, 239, 229, 0.62); }
html[data-film="dark"] .tablenav__table strong { color: var(--c-cream); }
html[data-film="dark"] .tablenav__btn { color: var(--c-cream); background: rgba(5, 4, 4, 0.28); border-color: rgba(244, 239, 229, 0.22); }
html[data-film="dark"] .tablenav__btn:hover { border-color: rgba(244, 239, 229, 0.45); }
/* a table needs its waiter and its bill more than a map of the page: the
   section links step aside where the row would crowd */
@media (max-width: 1280px) { html.is-table .nav__link { display: none; } }
/* a phone: the table's row is the header's second line — in the header's own
   ground, under a hairline, not a strip of its own */
@media (max-width: 760px) {
  html.is-table .site-header__inner { flex-wrap: wrap; row-gap: var(--s-2); }
  html.is-table .tablenav { order: 3; flex-basis: 100%; margin-left: 0; padding-top: var(--s-2); border-top: 1px solid var(--c-line-soft); }
  html.is-table .tablenav__table { margin-right: auto; }
  html[data-film="dark"].is-table .tablenav, html.is-fal.is-table .tablenav { border-top-color: rgba(244, 239, 229, 0.16); }
  .tablenav__btn { min-height: 40px; padding-inline: 0.8em; }
}
@media (prefers-reduced-motion: reduce) { .tablenav__btn.is-busy svg { animation: none; } }

/* 02 at a table: a ceramic cup, so "to go" (and its sleeve and lid) step aside */
.opt__note--table { display: none; }
html.is-table #opt-size [data-group="service"],
html.is-table [data-group="sleeve"], html.is-table [data-group="lid"],
html.is-table [data-here-note] { display: none !important; }
html.is-table .opt__note--table { display: block; }

/* --- The bill: the ticket's paper, without the tear ----------------------- */
.bill {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--s-6);
}
.bill[hidden] { display: none; }
html.is-bill { overflow: hidden; background: color-mix(in srgb, var(--c-cream), rgb(20 14 10) 42%); }
.bill__scrim { position: absolute; inset: 0; background: rgba(20, 14, 10, 0.42); opacity: 0; transition: opacity 380ms var(--e-out); }
.bill.is-open .bill__scrim { opacity: 1; }
.bill__paper {
  position: relative;
  width: min(25rem, 100%);
  max-height: calc(100svh - 2 * var(--s-6));
  overflow: auto; scrollbar-width: none;
  padding: var(--s-6) var(--s-6) var(--s-5);
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.7), transparent 60%),
    var(--c-paper);
  color: var(--c-ink);
  box-shadow: 0 2px 6px rgba(30, 22, 17, 0.1), 0 40px 80px -36px rgba(20, 14, 10, 0.5);
  opacity: 0; transform: translateY(16px) scale(0.985);
  transition: opacity 420ms var(--e-out), transform 620ms var(--e-out);
}
.bill.is-open .bill__paper { opacity: 1; transform: none; }
.bill__head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--c-line-strong);
}
.bill__x { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -10px -8px 0; border-radius: 50%; color: var(--c-ink-dim); transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); }
.bill__x svg { width: 20px; height: 20px; }
.bill__x:hover { color: var(--c-ink); background: var(--c-line-hair); }
.bill__x:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 0; }
.bill__title { font-family: var(--f-display); font-weight: 370; font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.05; margin: var(--s-4) 0 var(--s-1); }
.bill__table { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-3); }
.bill__table strong { font-family: var(--f-mono); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.04em; }
.bill__list { list-style: none; margin: 0; padding: var(--s-2) 0; border-top: 1px dashed var(--c-line-strong); }
.bill__list:empty { display: none; }
.bill__item {
  display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: var(--s-3);
  padding: 0.4rem 0;
}
.bill__item + .bill__item { border-top: 1px solid var(--c-line-hair); }
.bill__pic { display: grid; place-items: center; height: 3.2rem; }
.bill__pic img { max-height: 100%; width: auto; max-width: 100%; }
.bill__what { display: grid; gap: 1px; min-width: 0; }
.bill__what strong { font-weight: 450; font-size: var(--t-fine); color: var(--c-ink); }
.bill__what span { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.06em; color: var(--c-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill__price { font-size: var(--t-fine); font-variant-numeric: tabular-nums; color: var(--c-ink-dim); }
.bill__empty { padding: var(--s-5) 0 var(--s-2); border-top: 1px dashed var(--c-line-strong); display: grid; justify-items: start; gap: var(--s-3); color: var(--c-ink-dim); font-size: var(--t-small); }
.bill__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s-2) 0 var(--s-3);
  border-top: 1px solid var(--c-ink);
  font-size: var(--t-small);
}
.bill__total strong { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.bill__group { display: grid; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px dashed var(--c-line-strong); }
.bill .choices--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bill .choices--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bill__chips .chip { justify-content: center; min-height: 40px; padding-inline: 0.5em; text-align: center; line-height: 1.25; }
@media (max-height: 800px) {
  .bill__pic { height: 2.4rem; }
  .bill__title { font-size: 1.45rem; margin-block: var(--s-3) var(--s-1); }
  .bill__group { padding-block: var(--s-2); }
  .bill .ticket__demo { display: none; }
}
.bill__split:empty { display: none; }
.bill__split { display: grid; gap: 2px; padding-top: var(--s-1); }
.bill__row { display: flex; justify-content: space-between; gap: var(--s-3); margin: 0; font-size: var(--t-fine); color: var(--c-ink-dim); }
.bill__row strong { font-weight: 450; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.bill__row--each strong { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; }
.bill__people { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-1); }
.bill__people .iconbtn { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 1.1rem; }
.bill__n { min-width: 6.5em; text-align: center; font-size: var(--t-fine); color: var(--c-ink); }
.bill .ticket__demo { margin: var(--s-2) 0 var(--s-3); }
/* always in reach: the paper scrolls (its scrollbar hidden), the button
   stays on its bottom edge with the paper fading out behind it */
.bill__ask { position: sticky; bottom: 0; z-index: 1; width: 100%; justify-content: center; box-shadow: 0 -22px 18px -4px var(--c-paper), 0 14px 30px -18px rgba(30, 22, 17, 0.5); }
.bill__ask-done { display: none; }
.bill.is-asked .bill__ask-idle { display: none; }
.bill.is-asked .bill__ask-done { display: inline; }
.bill__ask:disabled { cursor: default; background: var(--c-card-2); color: var(--c-accent-deep); border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); box-shadow: none; }
html.is-bill .toast { bottom: auto; top: max(24px, env(safe-area-inset-top)); transform: translateY(-12px); }
html.is-bill .toast.is-on { transform: none; }
@media (max-width: 760px) {
  /* a bottom sheet on a phone, like the ticket */
  .bill { place-items: end center; padding: 0; }
  .bill__paper { width: 100%; max-height: 92svh; border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: max(var(--s-5), env(safe-area-inset-bottom)); transform: translateY(40px); }
}
@media (prefers-reduced-motion: reduce) {
  .bill__paper, .bill__scrim { transition: none; }
  .tablenav__btn.is-busy svg { animation: none; }
}

/* --- Visit: the table QR, as it stands on a table ------------------------- */
.tableqr {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(var(--s-5), 3vw, var(--s-10));
  margin-top: clamp(var(--s-10), 6vw, var(--s-16));
  padding-top: clamp(var(--s-8), 4vw, var(--s-12));
  border-top: 1px solid rgba(244, 239, 229, 0.1);
}
.tableqr__code {
  position: relative;
  width: clamp(8.5rem, 14vw, 10.5rem); aspect-ratio: 1;
  padding: 0.7rem;
  border-radius: var(--r-md);
  background: var(--c-card); color: var(--c-ink);
  box-shadow: 0 20px 50px -30px rgba(13, 9, 7, 0.6);
}
.tableqr__code svg { display: block; width: 100%; height: 100%; }
.tableqr__no {
  position: absolute; right: -0.65rem; top: -0.65rem;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-accent); color: var(--c-cream);
  font-family: var(--f-display); font-size: 1.05rem; line-height: 1;
}
.tableqr__txt { display: grid; gap: var(--s-2); max-width: 32rem; }
.tableqr__txt h3 { font-size: var(--t-h3); color: var(--c-cream); }
.tableqr__txt p { color: rgba(244, 239, 229, 0.66); font-size: var(--t-small); }
/* the table picker: the code follows the table */
.tableqr__pick { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; margin-top: var(--s-1); }
.tableqr__step {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(244, 239, 229, 0.22); color: rgba(244, 239, 229, 0.82);
  transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.tableqr__step svg { width: 16px; height: 16px; }
.tableqr__step:hover { border-color: rgba(244, 239, 229, 0.55); color: var(--c-cream); background: rgba(244, 239, 229, 0.05); }
.tableqr__step:focus-visible { outline: 2px solid var(--c-accent-glow); outline-offset: 2px; }
.tableqr__cur { display: inline-flex; align-items: baseline; gap: 0.5em; padding-inline: var(--s-2); }
.tableqr__cur .label { color: rgba(244, 239, 229, 0.55); }
.tableqr__cur strong { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1; color: var(--c-cream); font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: left; }
.tableqr__go, .tableqr__leave { justify-self: start; margin-top: var(--s-1); }
/* a visitor who tried table mode from here can leave it the same way */
.tableqr__leave, html.is-table .tableqr__go { display: none; }
html.is-table .tableqr__leave { display: inline; }
@media (max-width: 520px) {
  .tableqr { grid-template-columns: 1fr; }
  .tableqr__code { width: 9rem; }
}

/* --- The coffee reading (js/fal.js) ------------------------------------------
   A page of its own, under the site's header: night in the café, the cup on
   its saucer under one warm light, the words beside it (under it on a phone).
   12.10: it was a black screen over everything, the header gone — "as if it
   left the site" — so the reader could not even change the language in it.
   --hdr-h is the header's height, measured when the reading opens. */
.fal {
  position: fixed; inset: 0; z-index: 28;            /* under the header (30): its language switch stays in reach */
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(20rem, 38vw, 31rem);
  background:
    radial-gradient(42% 52% at 36% 56%, rgba(232, 178, 122, 0.09), transparent 70%),
    radial-gradient(70% 80% at 38% 46%, var(--c-roast) 0%, var(--c-roast-deep) 58%, var(--c-night) 86%);
  color: var(--c-cream);
  color-scheme: dark; scrollbar-color: rgba(244, 239, 229, 0.22) transparent;
  opacity: 0; transition: opacity var(--d-base) var(--e-out);
}
.fal[hidden] { display: none; }
.fal.is-open { opacity: 1; }
html.is-fal { overflow: hidden; background: var(--c-night); }   /* the scrollbar's kept gutter: night, not a cream strip */
.fal :focus-visible { outline-color: var(--c-accent-glow); }

/* the header over the reading: cream type on the night, like over the film */
html.is-fal .site-header, html.is-fal .site-header.is-stuck { background: transparent; box-shadow: none; }
html.is-fal .brand, html.is-fal .nav__link:hover { color: var(--c-cream); }
html.is-fal .nav__link { color: rgba(244, 239, 229, 0.82); }
html.is-fal .sound { color: rgba(244, 239, 229, 0.7); }
html.is-fal .sound:hover, html.is-fal .sound[aria-pressed="true"] { color: var(--c-cream); }
html.is-fal .lang { border-color: rgba(244, 239, 229, 0.22); background: rgba(5, 4, 4, 0.28); }
html.is-fal .lang__btn { color: rgba(244, 239, 229, 0.62); }
html.is-fal .lang__btn:hover { color: var(--c-cream); }
html.is-fal .lang__btn[aria-pressed="true"] { background: var(--c-cream); color: var(--c-ink); box-shadow: none; }
html.is-fal .tablenav__label { color: rgba(244, 239, 229, 0.62); }
html.is-fal .tablenav__table strong { color: var(--c-cream); }
html.is-fal .tablenav__btn { color: var(--c-cream); background: rgba(5, 4, 4, 0.28); border-color: rgba(244, 239, 229, 0.22); }
html.is-fal .tablenav__btn:hover { border-color: rgba(244, 239, 229, 0.45); }

/* the stage: the 3D cup, or the reader's own photo */
.fal__stage { position: relative; min-height: 0; }
.fal__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fal.is-photo .fal__canvas { visibility: hidden; }
.fal[data-phase="read"] .fal__text { display: none; }
.fal__photo {
  position: absolute; left: 50%; top: calc(50% + var(--hdr-h, 76px) / 2);
  width: min(calc((100vh - var(--hdr-h, 76px)) * 0.72), 78%); aspect-ratio: 1;
  margin: 0; transform: translate(-50%, -50%);
}
.fal__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(244, 239, 229, 0.14), 0 40px 90px -40px rgba(13, 9, 7, 0.85);
}
/* the figures being read: a ring round each; the current one under a loupe, its strokes traced */
.fal__glow { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; }
.fal__scan {
  position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(232, 178, 122, 0.4) 96%, transparent 100%);
  -webkit-mask: radial-gradient(closest-side, transparent 96%, #000 97%); mask: radial-gradient(closest-side, transparent 96%, #000 97%);
  opacity: 0; transition: opacity var(--d-base) var(--e-out);
}
.fal__photo.is-scanning .fal__scan { opacity: 1; animation: nr-fal-scan 1.4s linear infinite; }
@keyframes nr-fal-scan { to { transform: rotate(1turn); } }
.fal__marks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.fal__marks li {
  position: absolute; width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 0.875rem; color: var(--c-ink); background: var(--c-cream);
  box-shadow: 0 6px 18px -6px rgba(13, 9, 7, 0.6);
  opacity: 0; animation: nr-fal-in 600ms var(--e-out) forwards; animation-delay: calc(var(--i, 0) * 200ms);
  transition: transform var(--d-base) var(--e-out), background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.fal__marks li.is-on { background: var(--c-accent-glow); transform: scale(1.12); box-shadow: 0 0 0 5px rgba(232, 178, 122, 0.24), 0 6px 18px -6px rgba(13, 9, 7, 0.6); }

/* the words: their own scrolling box, which starts under the header (so
   nothing scrolls into the logo or the nav) and fades at its edges — the
   fade is the sign that there is more */
.fal__panel {
  display: flex; flex-direction: column; justify-content: safe center; gap: var(--s-4);
  margin-top: var(--hdr-h, 76px);
  padding: var(--s-6) var(--pad-edge) var(--s-10) var(--s-6);
  overflow: auto; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask: linear-gradient(transparent, #000 var(--s-6), #000 calc(100% - var(--s-10)), transparent);
  mask: linear-gradient(transparent, #000 var(--s-6), #000 calc(100% - var(--s-10)), transparent);
}
.fal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.fal__steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-3); counter-reset: falstep; }
.fal__steps li {
  counter-increment: falstep;
  padding-bottom: 6px; border-bottom: 1px solid rgba(244, 239, 229, 0.14);
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label-tight); text-transform: uppercase;
  color: rgba(244, 239, 229, 0.5);
  transition: color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.fal__steps li::before { content: counter(falstep, decimal-leading-zero) "\00a0"; opacity: 0.7; }
.fal__steps li.is-done { color: rgba(244, 239, 229, 0.78); border-color: rgba(232, 178, 122, 0.45); }
.fal__steps li[aria-current="step"] { color: var(--c-cream); border-color: var(--c-accent-glow); }
.fal__x { color: rgba(244, 239, 229, 0.7); flex: none; }
.fal__x:hover { color: var(--c-cream); background: rgba(244, 239, 229, 0.08); }
.fal .label { color: rgba(244, 239, 229, 0.55); }
.fal__title { font-size: var(--t-h1); color: var(--c-cream); line-height: 1; }
.fal__orn { width: 13.75rem; height: 1.125rem; flex: none; color: rgba(232, 178, 122, 0.65); }
.fal__text { min-height: 3.2em; }
.fal__lead { font-size: var(--t-lead); color: rgba(244, 239, 229, 0.8); line-height: 1.55; text-wrap: pretty; }
.fal__wait { display: block; height: 2px; margin-top: var(--s-4); border-radius: 2px; background: rgba(244, 239, 229, 0.12); overflow: hidden; }
.fal__wait i { display: block; height: 100%; width: 100%; background: var(--c-accent-glow); transform: scaleX(0); transform-origin: left; transition: transform 3500ms linear; }
.fal__wait i.is-on { transform: none; }
.fal__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fal .btn--primary { background-color: var(--c-cream); color: var(--c-ink); border-color: var(--c-cream); box-shadow: 0 14px 30px -18px rgba(13, 9, 7, 0.7); }
.fal .btn--primary:hover { background-color: var(--c-accent-glow); border-color: var(--c-accent-glow); }
.fal .btn--primary:disabled { opacity: 0.45; cursor: default; }
.fal .btn--ghost { color: var(--c-cream); background: rgba(244, 239, 229, 0.04); border-color: rgba(244, 239, 229, 0.28); }
.fal .btn--ghost:hover { border-color: rgba(244, 239, 229, 0.6); }
.fal__upload { position: relative; cursor: pointer; }
.fal__upload svg { width: 18px; height: 18px; flex: none; }
/* the whole button is the file picker; its focus shows on the button */
.fal__upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fal__upload:focus-within { outline: 2px solid var(--c-accent-glow); outline-offset: 2px; }
.fal__privacy { font-size: var(--t-fine); color: rgba(244, 239, 229, 0.55); line-height: 1.5; }

/* the reading */
.fal__reading { display: grid; gap: var(--s-4); }
.fal__hello { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.2; color: var(--c-cream); text-wrap: balance; }
.fal__open { font-size: var(--t-body); color: rgba(244, 239, 229, 0.78); line-height: 1.6; text-wrap: pretty; }
.fal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.fal__list li { opacity: 0; transform: translateY(8px); animation: nr-fal-in 700ms var(--e-out) forwards; animation-delay: calc(var(--i) * 240ms); }
@keyframes nr-fal-in { to { opacity: 1; transform: none; } }
.fal__item {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--s-3); row-gap: 3px; align-items: start;
  width: 100%; text-align: left;
  padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(244, 239, 229, 0.1); border-radius: var(--r-md);
  background: rgba(244, 239, 229, 0.03); color: var(--c-cream);
  transition: border-color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.fal__item > :not(.fal__num) { grid-column: 2; }
.fal__item:hover { border-color: rgba(244, 239, 229, 0.24); }
.fal__item[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c-accent-glow) 60%, transparent); background: rgba(232, 178, 122, 0.07); }
.fal__num {
  grid-row: 1 / span 3; grid-column: 1;
  width: 1.85rem; height: 1.85rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(244, 239, 229, 0.3);
  font-family: var(--f-display); font-size: 0.95rem;
  transition: background var(--d-base) var(--e-out), color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.fal__item[aria-pressed="true"] .fal__num { background: var(--c-accent-glow); color: var(--c-ink); border-color: transparent; }
.fal__where { letter-spacing: var(--ls-label-tight); text-wrap: balance; }
.fal__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2em var(--s-2); }
.fal__name strong { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.fal__area { font-style: normal; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: var(--ls-label-tight); text-transform: uppercase; color: var(--c-accent-glow); }
.fal__say { font-size: var(--t-small); color: rgba(244, 239, 229, 0.76); line-height: 1.55; text-wrap: pretty; }
.fal__more { margin: 0; display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid rgba(244, 239, 229, 0.1); }
.fal__more div { display: grid; gap: 4px; }
.fal__more dd { margin: 0; font-size: var(--t-small); color: rgba(244, 239, 229, 0.86); line-height: 1.55; text-wrap: pretty; }
.fal__end { display: grid; gap: var(--s-1); padding-top: var(--s-2); border-top: 1px solid rgba(244, 239, 229, 0.1); }
.fal__saying { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--c-accent-glow); }
.fal__note { font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.08em; color: rgba(244, 239, 229, 0.55); }
.fal__again { justify-self: start; margin-top: var(--s-2); }

/* a phone: the scene above, the words below, and the page scrolls — under
   the header, which turns night (nothing passes behind it); the words sit on
   the night the scene fades into, so the pinned steps are no bar of their own */
@media (max-width: 860px) {
  .fal { top: var(--hdr-h, 64px); display: block; overflow: hidden auto; overscroll-behavior: contain; }
  html.is-fal .site-header, html.is-fal .site-header.is-stuck { background: var(--c-night); }
  .fal__stage { height: 46svh; }
  .fal__stage::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent, var(--c-night)); pointer-events: none; }
  .fal__photo { top: 50%; width: min(calc(46svh - 1.5rem), 78%); }
  .fal__panel {
    margin-top: 0; overflow: visible; -webkit-mask: none; mask: none;
    padding: 0 var(--pad-edge) max(var(--s-8), env(safe-area-inset-bottom));
    justify-content: flex-start; gap: var(--s-3); background: var(--c-night);
  }
  .fal__head { position: sticky; top: 0; z-index: 1; margin-inline: calc(var(--pad-edge) * -1); padding: var(--s-2) var(--pad-edge); background: var(--c-night); }
  .fal__head::after { content: ""; position: absolute; inset: 100% 0 auto; height: var(--s-4); background: linear-gradient(var(--c-night), transparent); pointer-events: none; }
  .fal__steps { gap: var(--s-2); min-width: 0; }
  .fal__title { font-size: var(--t-h2); }
  .fal__canvas { -webkit-mask: linear-gradient(#000 80%, transparent); mask: linear-gradient(#000 80%, transparent); }
}
/* a narrow column: the steps keep their numbers, and only the step you are
   on (at the end, the reading) says its word. Measured on the words' own
   column, not the window — and RU, the longest, needs the room sooner */
.fal__panel { container: falpanel / inline-size; }
@container falpanel (max-width: 21rem) {
  .fal__steps li:not([aria-current="step"]) { font-size: 0; letter-spacing: 0; }
  .fal__steps li:not([aria-current="step"])::before { content: counter(falstep, decimal-leading-zero); font-size: var(--t-label); letter-spacing: var(--ls-label-tight); }
  .fal[data-phase="read"] .fal__steps li:last-child { font-size: var(--t-label); letter-spacing: var(--ls-label-tight); }
  .fal[data-phase="read"] .fal__steps li:last-child::before { content: counter(falstep, decimal-leading-zero) "\00a0"; }
}
@container falpanel (max-width: 30rem) {
  .fal:lang(ru) .fal__steps li:not([aria-current="step"]) { font-size: 0; letter-spacing: 0; }
  .fal:lang(ru) .fal__steps li:not([aria-current="step"])::before { content: counter(falstep, decimal-leading-zero); font-size: var(--t-label); letter-spacing: var(--ls-label-tight); }
  .fal:lang(ru)[data-phase="read"] .fal__steps li:last-child { font-size: var(--t-label); letter-spacing: var(--ls-label-tight); }
  .fal:lang(ru)[data-phase="read"] .fal__steps li:last-child::before { content: counter(falstep, decimal-leading-zero) "\00a0"; }
}
@media (max-width: 520px) {
  .fal__actions > * { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .fal, .fal__wait i { transition: none; }
  .fal__list li, .fal__marks li { animation: none; opacity: 1; transform: none; }
  .fal__photo.is-scanning .fal__scan { animation: none; }
}

/* the invitation, in the footer's night */
.falband {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(var(--s-6), 4vw, var(--s-12));
  margin-top: clamp(var(--s-10), 6vw, var(--s-16));
  padding-top: clamp(var(--s-8), 4vw, var(--s-12));
  border-top: 1px solid rgba(244, 239, 229, 0.1);
}
.falband__art { border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(70% 80% at 50% 45%, var(--c-roast), var(--c-night)); aspect-ratio: 4 / 3; }
.falband__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.falband__txt { display: grid; gap: var(--s-3); max-width: 30rem; }
.falband__txt h3 { font-size: var(--t-h2); color: var(--c-cream); }
.falband__txt p { color: rgba(244, 239, 229, 0.66); font-size: var(--t-body); }
.falband__go { justify-self: start; margin-top: var(--s-2); background-color: var(--c-cream); color: var(--c-ink); border-color: var(--c-cream); }
.falband__go:hover { background-color: var(--c-accent-glow); border-color: var(--c-accent-glow); }
.falband__go[aria-busy="true"] { opacity: 0.6; }
@media (max-width: 760px) { .falband { grid-template-columns: 1fr; } }