/* ---------------------------------------------------------------
   Modernisation layer for 27-snack-vievie
   Reference: starbucks   Dials: variance 7 / motion 5 / density 3

   Loaded AFTER site.css and deliberately additive. site.css carries this
   shop's identity (its Japanese display face and its accent) and that is not
   touched here: no heading font-size is overridden, because heading size is
   where the character of each of the thirty-eight sites lives.

   What this adds is the part that was genuinely missing: a real token scale
   instead of one-off margins, a consistent vertical rhythm, and the
   interaction states the pages never had.
   --------------------------------------------------------------- */

:root {
  /* Spacing scale. One ratio, so a page cannot drift into fourteen different
     margins that are all nearly the same. */
  --s-1: 0.35rem;
  --s-2: 0.66rem;
  --s-3: 1.05rem;
  --s-4: 1.58rem;
  --s-5: 2.36rem;
  --s-6: 3.54rem;
  --s-7: 5.32rem;

  /* Fluid section rhythm, from the density dial. */
  --section-y: clamp(4.4rem, 7.8vw, 6.8rem);
  --stack: var(--s-4);

  /* Type scale, ratio 1.25. Used for spacing and rhythm decisions and for
     any NEW type; existing heading sizes are left alone. */
  --step--1: 0.800rem;
  --step-0:  1rem;
  --step-1:  1.250rem;
  --step-2:  1.562rem;
  --step-3:  1.953rem;

  /* Motion, from the motion dial. Read by motion-init.js so the two layers
     cannot disagree about how far or how fast anything travels. */
  --travel: 14px;
  --dur: 0.55s;
  --lift: -3px;
  --ease-out: cubic-bezier(0.22, 0.75, 0.30, 1);
}

/* ---- Vertical rhythm -------------------------------------------------
   Section padding and heading spacing came from ad-hoc clamps that differed
   by a few tenths of a rem for no reason. One scale, applied consistently. */
section { padding: var(--section-y) 0; }
.sec-head { margin-bottom: var(--s-6); }
.sec-head p { margin-top: var(--s-2); }

/* ---- Headings --------------------------------------------------------
   Size is untouched. What changes is how the line breaks: `balance` stops a
   heading dropping one orphaned word onto its own line, which is the single
   most common way a good headline looks accidental. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.hero-sub, .sec-head p { max-width: 42ch; }

/* ---- Numbers ---------------------------------------------------------
   Prices, times and the booking reference sit in columns or get read aloud
   down a telephone. Proportional digits make those ragged. */
.hours, .price, .charge-rows, .rd-ref-code, .info-list, time,
.rd-detail dd, .menu-price { font-variant-numeric: tabular-nums; }

/* ---- Focus -----------------------------------------------------------
   One visible ring, everywhere, in the shop's own accent. :focus-visible so
   it appears for keyboard users and not on a mouse click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Touch -----------------------------------------------------------
   Kills the 300ms double-tap zoom delay on the controls a customer actually
   presses, which is the difference between a form feeling native and feeling
   like a web page. */
a, button, .btn, input, select, textarea, summary {
  touch-action: manipulation;
}

@media (prefers-reduced-motion: no-preference) {
  /* Only transform and opacity: both composited, neither triggers layout. */
  .btn {
    transition: transform 0.16s var(--ease-out),
                box-shadow 0.22s var(--ease-out),
                background-color 0.2s var(--ease-out),
                border-color 0.2s var(--ease-out),
                color 0.2s var(--ease-out);
  }
  .btn:hover { transform: translateY(var(--lift)); }
  /* Presses read as physical only if the button goes DOWN past its rest
     position, not merely back to it. */
  .btn:active { transform: translateY(1px); transition-duration: 0.06s; }
}

/* ---- Form ------------------------------------------------------------
   The booking form is the one thing on the page that has to work. These are
   states it did not visibly have: a field that is being filled, a submit that
   is in flight, and an error that points at itself. */
.field input,
.field select,
.field textarea {
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--accent); }

[aria-invalid="true"] {
  border-color: var(--warn, var(--accent)) !important;
}

button[aria-busy="true"] { cursor: progress; opacity: 0.85; }

/* ---- Cards -----------------------------------------------------------
   A small lift under pointer and keyboard alike. :focus-within so tabbing
   through a card's links shows the same affordance a mouse gets. */
@media (prefers-reduced-motion: no-preference) {
  .m-figure {
    transition: transform 0.35s var(--ease-out);
  }
}