/* ══════════════════════════════════════════════════════════════════════
   ALEK'S CHIPPY — "Paper"
   ──────────────────────────────────────────────────────────────────────
   White chip paper, yellow signwriting, black ink. The light treatment
   of the brand: the shop's fascia is yellow-on-black, but the page it
   sits on is the wrapper, not the board.

   THE ONE RULE THAT SHAPES EVERYTHING HERE:
   brand yellow #FFC72C on white measures 1.6:1. It cannot carry text at
   any size. So on this theme yellow is a FILL — bands, buttons, discs,
   rules — always with ink on top of it, and never a letterform on the
   page ground. Where an accent colour has to be *text*, it is --amber
   (#8A5A00, 5.9:1 on white), which is the same hue taken down until it
   is legible. That swap is the whole difference between this theme and
   the dark one, where yellow at 12.6:1 could do both jobs.

   Neutrals are warm — paper, not grey. There is deliberately no charcoal
   anywhere in this file: the greys the dark theme used (#0C0C0D,
   #17171A, #27332E) are gone, and the darkest value on the page is a
   warm near-black used only for type.

   Three jobs, three families:
     Anton         mastheads, section heads, prices        — the signwriting
     Newsreader    decks, body, pull quotes                — the newsprint
     IBM Plex Mono kickers, hours, dockets, small caps     — the docket

   Section rhythm — two yellow bands carry the page; everything else is a
   step of paper, so the yellow lands:
     hero WHITE → ticker YELLOW → known OFF-WHITE → menu WHITE →
     fryer DEEP PAPER → reviews OFF-WHITE → visit WHITE → cta YELLOW →
     footer DEEP PAPER

   The page commits to the light brand and does NOT invert under
   prefers-color-scheme: dark. Every surface paints its own background.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ground ─────────────────────────────────────────────────────── */
  --paper:    #FFFFFF;   /* the page                                   */
  --paper-2:  #FBF7EC;   /* alternating band, and card stock           */
  --paper-3:  #F4EEDC;   /* the deepest band — fryer + footer          */
  --line:     #E6DDC6;   /* warm hairlines, rules, dot leaders         */

  /* ── brand ──────────────────────────────────────────────────────── */
  /*  FILL ONLY. 1.6:1 on white — never a letterform on the page. */
  --yellow:   #FFC72C;
  --yellow-d: #E0A800;   /* pressed / shadow state                     */
  --yellow-t: #FFF3D2;   /* tinted panel                               */
  /*  The text-safe form of the same hue: 5.9:1 on white, 4.6:1 on
   *  --paper-2. Use for kickers, prices, links — anywhere the accent
   *  has to be read rather than seen. */
  --amber:    #8A5A00;
  --amber-d:  #6B4600;   /* 8.6:1 — the accent on the deeper bands     */

  /* ── type ───────────────────────────────────────────────────────── */
  /*  Warm near-black, not charcoal: 18.4:1 on white. */
  --ink:      #14110A;
  /*  --ink-70 is 12.6:1 and is the body-copy colour.
   *  --ink-45 is 6.3:1 — fine for captions, still AA.
   *  --ink-25 is 3.0:1 — DECORATIVE ONLY, never a sentence.           */
  --ink-70:   #14110Ab3;
  --ink-45:   #14110A73;
  --ink-25:   #14110A40;

  /* ── on yellow ──────────────────────────────────────────────────── */
  --on-yellow: #14110A;  /* 12.2:1 on the brand fill                   */

  /* ── metrics ────────────────────────────────────────────────────── */
  --wrap: 1180px;
  --pad: clamp(1.15rem, 5vw, 4rem);
  --r-sm: 3px;           /* signage has no rounded corners             */
  --r-md: 4px;
  --r-pill: 999px;       /* pills are for buttons only                 */

  --f-head: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ── the wrapper stripe ─────────────────────────────────────────── */
  /*  Yellow on white, so it reads as printed wrapper trim rather than
   *  the hazard tape full-contrast diagonals would give. */
  --stripe: repeating-linear-gradient(-45deg,
              var(--yellow) 0 13px, var(--paper) 13px 26px);

  /* ── torn edge mask ─────────────────────────────────────────────── */
  /*  A 1200×28 tile whose jagged line starts and ends at y=14, so it
   *  repeats along x without a seam. Everything ABOVE the line is
   *  opaque, so a .tear strip painted in the PREVIOUS section's colour
   *  bleeds down into this one in a torn shape. */
  --tear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 14 L38 7 L74 19 L110 9 L152 22 L188 11 L226 5 L262 18 L300 10 L340 23 L378 8 L414 16 L452 6 L490 20 L528 12 L566 24 L604 9 L642 17 L680 7 L718 21 L756 11 L794 15 L832 5 L870 19 L908 10 L946 23 L984 8 L1022 18 L1060 6 L1098 20 L1136 12 L1174 16 L1200 14 L1200 0 L0 0 Z'/%3E%3C/svg%3E");

  /* ── grain ──────────────────────────────────────────────────────── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ══ reset ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
  color-scheme: light;         /* form controls and scrollbars match  */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  font-optical-sizing: auto;
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: .94; }
button { font: inherit; color: inherit; }

/*  Newsprint fibre belongs to the sheet, not the words: fixed, so
    scrolling does not drag it. On a light ground it MULTIPLIES — the
    screen blend the dark theme used would be invisible here. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: .22;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 60;
}

::selection { background: var(--yellow); color: var(--on-yellow); }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; z-index: 100;
  font-family: var(--f-mono); font-size: .8rem;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ shared furniture ════════════════════════════════════════════════ */
.wrap { width: min(100% - var(--pad) * 2, var(--wrap)); margin-inline: auto; }

section { position: relative; }

/*  Torn edge, painted in the colour of the section ABOVE, so that sheet
    looks ripped and laid over this one. */
.tear {
  position: absolute; inset: 0 0 auto 0;
  height: 28px;
  background: var(--tear-color, var(--paper));
  -webkit-mask-image: var(--tear); mask-image: var(--tear);
  -webkit-mask-size: 1200px 28px; mask-size: 1200px 28px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  z-index: 3;
  pointer-events: none;
}

/*  Kicker — the small mono line above a headline. Amber, not yellow:
    this is text. */
.kicker {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.kicker::before {
  content: "";
  width: 26px; height: 3px;
  background: var(--yellow);      /* a rule is a fill, so it may be brand */
  flex: none;
}

/*  Section headline. Anton is a single weight, so scale and tracking do
    all the work. Slight negative tracking stops the caps clogging. */
.head {
  font-family: var(--f-head);
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.1rem);
  line-height: .87;
  color: var(--ink);
}
/*  The emphasis word. Yellow would vanish, so it is a yellow HIGHLIGHT
    behind ink — the marker-pen treatment, which keeps the brand colour
    on the page without asking it to be legible as type. */
/*  Sized in PERCENTAGES of the inline box, not em. The headline runs
    through a clamp() from 2.6rem to 5.1rem, and an em-based band drifts
    against the caps across that range — at the small end it cut through
    the letters. Percentages hold their position at every size. */
.head em {
  font-style: normal;
  color: var(--ink);
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat;
  background-size: 100% 46%;
  background-position: 0 72%;
  padding-inline: .06em;
}

.deck {
  font-size: clamp(1.05rem, 1rem + .3vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-70);
  max-width: 46ch;
}

/* ── the yellow bands ─────────────────────────────────────────────── */
/*  Scoped rather than per-element, so anything dropped into a yellow
    band is legible by default. */
.on-yellow { background: var(--yellow); color: var(--on-yellow); }
.on-yellow .head, .on-yellow h2 { color: var(--on-yellow); }
.on-yellow .head em { background: none; padding-inline: 0; color: var(--paper); }
.on-yellow .deck, .on-yellow p { color: color-mix(in srgb, var(--on-yellow) 82%, transparent); }
.on-yellow .kicker { color: var(--on-yellow); }
.on-yellow .kicker::before { background: var(--on-yellow); }

/* ── buttons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-mono);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .95rem 1.6rem;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/*  The primary button: yellow fill, ink label — 12.2:1, and the loudest
    thing on a white page. */
.btn--yellow { background: var(--yellow); color: var(--on-yellow); box-shadow: 0 3px 0 var(--yellow-d); }
.btn--yellow:hover { background: #FFD758; box-shadow: 0 5px 0 var(--yellow-d); }

.btn--ghost { border-color: var(--ink-25); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/*  For use INSIDE a yellow band, where a yellow button would vanish. */
.btn--ink { background: var(--ink); color: var(--yellow); box-shadow: 0 3px 0 #000; }
.btn--ink:hover { background: #000; box-shadow: 0 5px 0 #000; }
.on-yellow .btn--ghost { border-color: var(--on-yellow); color: var(--on-yellow); }
.on-yellow .btn--ghost:hover { background: var(--on-yellow); color: var(--yellow); }

/* ══ header ══════════════════════════════════════════════════════════ */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.hdr.stuck { border-bottom-color: var(--line); box-shadow: 0 10px 26px -24px var(--ink); }
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: .7rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none;
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ink);
}
/*  The wordmark's yellow lives in the disc, not the letters. */
.brand__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  display: grid; place-items: center;
  font-size: 1.15rem;
  padding-top: 2px;
}
.brand em { font-style: normal; color: var(--amber); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-family: var(--f-mono);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-70);
  position: relative;
  padding-block: .3rem;
  transition: color .18s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 3px; background: var(--yellow);
  transition: right .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }

.hdr .btn { padding: .7rem 1.15rem; font-size: .74rem; }

.burger {
  display: none;
  width: 42px; height: 38px;
  background: none; border: 2px solid var(--ink-25); border-radius: var(--r-sm);
  cursor: pointer;
  padding: 9px 8px;
}
.burger span { display: block; height: 2px; background: var(--ink); margin-block: 3px; transition: .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.mobnav {
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: .5rem var(--pad) 1.2rem;
}
.mobnav a {
  display: block;
  font-family: var(--f-mono);
  font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.mobnav a b { color: var(--amber); }

/* ══ hero ════════════════════════════════════════════════════════════ */
.hero { padding-block: clamp(2rem, 4vw, 3.4rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }

/*  Masthead rules — thick over thin, the way a nameplate is set. Ink,
    not yellow: a yellow hairline on white disappears. */
.rule-heavy { height: 6px; background: var(--ink); }
.rule-thin { height: 1px; background: var(--ink); opacity: .45; margin-top: 3px; }

.dateline {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem 1.4rem;
  font-family: var(--f-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-45);
  padding-block: .55rem;
}
.dateline b { color: var(--amber); font-weight: 600; }

.masthead {
  font-family: var(--f-head);
  text-transform: uppercase;
  /*  Deliberately enormous — a nameplate that does not dominate is just
      a logo. */
  font-size: clamp(3.4rem, 13.4vw, 11rem);
  line-height: .82;
  letter-spacing: -.012em;
  text-align: center;
  padding-block: clamp(.6rem, 2vw, 1.4rem);
  position: relative;
  color: var(--ink);
}
/*  "Chippy" gets the marker-pen highlight — the brand colour at full
    strength, with the word still ink so it stays readable. */
.masthead em {
  font-style: normal;
  color: var(--ink);
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat;
  background-size: 100% 46%;
  background-position: 0 72%;
  padding-inline: .04em;
}

/*  Each line animates up from behind its own clipping box on load. */
.mh-line { display: block; overflow: hidden; }
.mh-line > span { display: block; }
.js .mh-line > span {
  transform: translateY(102%);
  animation: mhUp .95s var(--ease) forwards;
}
.js .mh-line:nth-child(2) > span { animation-delay: .1s; }
@keyframes mhUp { to { transform: translateY(0); } }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  align-items: end;
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.hero__grid > * { min-width: 0; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }

.hero__copy { display: grid; gap: 1.3rem; }
.hero__deck { max-width: 40ch; font-size: clamp(1.1rem, 1rem + .45vw, 1.4rem); color: var(--ink-70); }
.hero__deck b { color: var(--ink); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.facts {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-45);
  padding-top: .3rem;
}
.facts li { display: flex; align-items: center; gap: .5rem; }
.facts li::before { content: "✚"; color: var(--amber); font-size: .8rem; }

/* ── the wrap: the hero photo in a signwritten frame ──────────────── */
.wrapcone { position: relative; }
.wrapcone__sheet {
  position: relative;
  background: var(--paper);
  padding: 14px;
  box-shadow: 0 30px 60px -38px rgba(20,17,10,.45), 0 0 0 1px var(--line);
  transform: rotate(-1.6deg);
  transition: transform .5s var(--ease);
}
.wrapcone:hover .wrapcone__sheet { transform: rotate(0deg) scale(1.012); }
.wrapcone__sheet::before {
  content: "";
  position: absolute; inset: 4px;
  background: var(--stripe);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  padding: 5px;
  pointer-events: none;
}
.wrapcone__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.wrapcone__img img { width: 100%; height: 100%; object-fit: cover; }

/*  Drawn stand-in for any slot without a photo. Same box, same ratio,
    so dropping a real photo in shifts nothing. */
.is-drawn {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 28%, #FFE9A8 0 14%, transparent 14.5%),
    radial-gradient(circle at 68% 62%, #FFDD86 0 11%, transparent 11.5%),
    repeating-linear-gradient(38deg, #FBF3DC 0 16px, #F5E9C8 16px 32px);
}
.is-drawn span {
  font-family: var(--f-mono);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber-d);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  padding: .5rem .8rem;
  text-align: center;
  line-height: 1.7;
}

/*  The badge — stamped over the corner of the wrap. */
.stamp {
  position: absolute;
  margin: 0;
  right: -14px; bottom: -26px;
  width: 138px; height: 138px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  display: grid; place-content: center; text-align: center;
  transform: rotate(-11deg);
  box-shadow: 0 14px 30px -14px rgba(20,17,10,.5);
  border: 2px dashed color-mix(in srgb, var(--on-yellow) 45%, transparent);
  z-index: 4;
}
.stamp b {
  display: block;
  font-family: var(--f-head);
  font-size: 2.5rem; line-height: .88;
  font-weight: 400;
}
.stamp span {
  display: block;
  font-family: var(--f-mono);
  font-size: .54rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.5;
  opacity: .82;
}

/* ══ ticker ══════════════════════════════════════════════════════════ */
.ticker {
  background: var(--yellow);
  color: var(--on-yellow);
  overflow: hidden;
  border-block: 3px solid var(--ink);
  padding-block: .1rem;
}
.ticker__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.ticker__track > div { display: flex; }
.ticker span {
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  letter-spacing: .02em;
  padding: .75rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
  white-space: nowrap;
}
.ticker span::after { content: "◆"; font-size: .55em; opacity: .5; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker:hover .ticker__track { animation-play-state: paused; }

.stripeband { height: 12px; background: var(--stripe); border-bottom: 1px solid var(--line); }

/* ══ known-for ═══════════════════════════════════════════════════════ */
.known { background: var(--paper-2); padding-block: clamp(3.4rem, 7vw, 6rem); }
.known__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.cards { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.cards > * { min-width: 0; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.7rem 1.5rem 1.6rem;
  display: grid; gap: .75rem; align-content: start;
  position: relative;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 26px 40px -34px rgba(20,17,10,.55); }
.card__no { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .2em; color: var(--amber); }
.card h3 {
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: 1.7rem;
  line-height: .95;
  color: var(--ink);
}
.card p { color: var(--ink-70); font-size: 1.02rem; }
.card::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  height: 4px; width: 0; background: var(--yellow);
  transition: width .35s var(--ease);
}
.card:hover::after { width: 100%; }

/* ══ what's on ═══════════════════════════════════════════════════════ */
/*  Replaces the old priced menu board. Category names only — no prices,
    no items, and every route out is the Order button. The board, the
    sticky rail, the dot leaders and the provisional-price banner all
    went with it; if a price ever comes back to this page, so does the
    problem of a static copy quoting what the checkout will not honour. */
.order { background: var(--paper); padding-block: clamp(3.4rem, 7vw, 6rem); }
.order__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 2.8rem); }
.order__head .deck { max-width: 54ch; }

/*  The counters. Not a list of dishes — a list of the places behind the
    counter you can order from, so it says what the shop does without
    committing this page to a single price. */
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: .55rem;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}
.counters li {
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: 1.22rem;
  letter-spacing: .005em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  padding: .8rem 1rem;
  transition: transform .2s var(--ease), background-color .2s;
}
.counters li:hover { transform: translateX(3px); background: var(--yellow-t); }

.order__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem;
  border-top: 4px solid var(--yellow);
  padding-top: 1.5rem;
}
.order__cta .btn { font-size: .86rem; padding: 1.05rem 1.8rem; }
.order__note {
  font-family: var(--f-mono);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-45);
}

/* ══ fryer (deepest paper) ═══════════════════════════════════════════ */
.fryer {
  background: var(--paper-3);
  padding-block: clamp(4.6rem, 11vw, 9rem);
  position: relative;
  overflow: hidden;
}
/*  Halftone. Newsprint photographs are dots; here they separate this
    band from the one above without another colour. */
.fryer::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.4px);
  background-size: 9px 9px;
  opacity: .05;
  pointer-events: none;
}
.fryer .wrap { position: relative; z-index: 1; }
.fryer__grid { display: grid; gap: clamp(2.8rem, 7vw, 6rem); }
.fryer__grid > * { min-width: 0; }
@media (min-width: 900px) {
  /*  A wide gutter and a narrower left column give the statement room to
      be a statement rather than a label on the list. */
  .fryer__grid { grid-template-columns: .78fr 1fr; align-items: center; }
}

/*  The global .head leading (.87) is set for one-line section heads;
    stacked over two words at this size it closes up, so this opens out. */
.fryer__title { line-height: .94; margin-block: 1.15rem 1.9rem; }
.fryer .deck { line-height: 1.62; }

.steps { display: grid; gap: 2.2rem; counter-reset: s; }
.step {
  display: grid;
  /*  A fixed first track, not `auto`. Anton has no tabular figures, so
      "01" measures narrower than "02" and an auto track let every step's
      text start at a different x. */
  grid-template-columns: 3rem 1fr;
  gap: 1.35rem;
  align-items: start;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__no {
  counter-increment: s;
  font-family: var(--f-head);
  font-size: 2.6rem; line-height: .8;
  color: var(--amber);
}
.step__no::before { content: counter(s, decimal-leading-zero); }
.step h3 {
  font-family: var(--f-head);
  text-transform: uppercase;
  font-size: 1.42rem;
  margin-bottom: .55rem;
  color: var(--ink);
}
.step p { color: var(--ink-70); font-size: 1rem; }

/* ══ reviews ═════════════════════════════════════════════════════════ */
.reviews { background: var(--paper-2); padding-block: clamp(3.4rem, 7vw, 6rem); }
.quotes { display: grid; gap: 1.4rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.quotes > * { min-width: 0; }
@media (min-width: 800px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.8rem 1.5rem 1.4rem;
  position: relative;
  display: grid; gap: .9rem; align-content: start;
}
/*  Oversized opening quote, hung outside the text like a magazine. */
.quote::before {
  content: "“";
  position: absolute; top: -.28em; left: .5rem;
  font-family: var(--f-serif);
  font-size: 6rem;
  color: var(--yellow);
  line-height: 1;
}
.quote blockquote { margin: 0; font-size: 1.1rem; font-style: italic; position: relative; color: var(--ink); }
.quote figcaption {
  font-family: var(--f-mono);
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-45);
  border-top: 1px solid var(--line);
  padding-top: .8rem;
}
/*  Stars are a shape, not text, but they still have to be seen on white:
    amber reads, brand yellow does not. */
.stars { color: var(--amber); letter-spacing: .12em; font-size: .95rem; }

/* ══ visit ═══════════════════════════════════════════════════════════ */
.visit { background: var(--paper); padding-block: clamp(3.4rem, 7vw, 6rem); }
.visit__title { margin-block: 1.15rem 2.4rem; }
.visit__grid { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }
.visit__grid > * { min-width: 0; }
@media (min-width: 900px) { .visit__grid { grid-template-columns: 1fr 1fr; } }

.info { display: grid; gap: 1.6rem; align-content: start; }
.info__block h3 {
  font-family: var(--f-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .55rem;
}
.info__block p { font-size: 1.08rem; color: var(--ink); }
.info__block a { font-size: 1.08rem; color: var(--amber-d); text-underline-offset: 3px; }
.info__note { font-size: .95rem !important; color: var(--ink-45); margin-top: .35rem; }

/*  Opening hours as a docket: mono, tabular, dot-leadered. */
.hours { display: grid; gap: .1rem; font-family: var(--f-mono); font-size: .9rem; }
.hours li { display: flex; align-items: baseline; gap: .5rem; padding: .34rem 0; color: var(--ink-70); }
.hours li span:first-child { min-width: 5.5rem; }
.hours li i { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-.25em); }
.hours li b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.hours li.closed b { color: var(--ink-45); }
/*  Today's row: a tinted panel with a brand rule, rather than a full
    yellow fill that would out-shout the address beside it. */
.hours li.today {
  background: var(--yellow-t);
  margin-inline: -.6rem; padding-inline: .6rem;
  border-left: 3px solid var(--yellow);
  color: var(--ink);
}
.hours li.today b { color: var(--ink); }

.mapbox {
  background: var(--paper-2);
  border: 1px solid var(--line);
  min-height: 340px;
  height: 100%;
  display: grid; place-items: center;
  padding: 2rem;
  text-align: center;
}
.mapbox p { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .08em; color: var(--ink-45); line-height: 1.8; }

/*  The live embed. Google serves the map light, which is what this theme
    wants — so unlike the dark treatment there is NO invert filter here.
    A touch of desaturation is all it needs to sit in the paper palette. */
.mapbox--live { padding: 0; display: block; overflow: hidden; }
.mapbox--live iframe {
  display: block;
  width: 100%; height: 100%;
  min-height: 340px;
  border: 0;
  filter: saturate(.82) contrast(1.02);
}

/* ══ closing CTA ═════════════════════════════════════════════════════ */
.cta {
  text-align: center;
  padding-block: clamp(3.4rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--on-yellow) 1px, transparent 1.4px);
  background-size: 11px 11px;
  opacity: .12;
}
.cta .wrap { position: relative; z-index: 1; display: grid; gap: 1.5rem; justify-items: center; }
.cta .kicker { justify-content: center; }
.cta h2 {
  font-family: var(--f-head); text-transform: uppercase;
  font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5rem); line-height: .88;
}
.cta p { max-width: 44ch; font-size: 1.15rem; }

/* ══ footer ══════════════════════════════════════════════════════════ */
/*  Paper, not ink. A black slab at the bottom of a white page is exactly
    the charcoal this theme exists to remove. */
.ftr {
  background: var(--paper-3);
  color: var(--ink);
  border-top: 5px solid var(--yellow);
  padding-block: clamp(2.6rem, 5vw, 4rem) 1.6rem;
}
.ftr__grid {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.ftr__grid > * { min-width: 0; }
@media (min-width: 760px) { .ftr__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.ftr h3 {
  font-family: var(--f-mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .8rem;
}
.ftr li { padding: .3rem 0; }
.ftr a { color: var(--ink-70); text-decoration: none; transition: color .18s; }
.ftr a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ftr .brand { font-size: 1.5rem; margin-bottom: .8rem; }
.ftr__note { color: var(--ink-45); font-size: .95rem; max-width: 40ch; }
.ftr__legal {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  justify-content: space-between;
  padding-top: 1.4rem;
  font-family: var(--f-mono);
  font-size: .68rem; letter-spacing: .1em;
  color: var(--ink-45);
}
.ftr__legal a { color: var(--amber-d); }

/* ══ reveal on scroll ════════════════════════════════════════════════ */
/*  Only hides content when JS is present (the .js class is set inline in
    <head>), so a failed script never leaves a blank page. */
.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv.in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ══ responsive ══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .nav, .hdr__in > .btn { display: none; }
  .burger { display: block; }
}
@media (min-width: 861px) { .mobnav { display: none !important; } }

@media (max-width: 520px) {
  /*  Hangs further off the corner on small screens — at 350px the sheet
      is only ~325px wide, so a badge tucked inside it sits on the food. */
  .stamp { width: 112px; height: 112px; right: -22px; bottom: -26px; }
  .stamp b { font-size: 2rem; }
  .stamp span { font-size: .48rem; letter-spacing: .08em; }
  .counters li { font-size: 1.08rem; }
}

/* ══ motion & print ══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .mh-line > span { transform: none; }
  .js .rv { opacity: 1; transform: none; }
}

/*  What is worth printing changed with the menu. There is no price board
    on this page any more, so the only thing anyone would put on paper is
    how to reach the shop: the nameplate and the visit details. Everything
    else is marketing furniture and goes. */
@media print {
  body::after, .hdr, .ticker, .stripeband, .cta, .burger, .mobnav,
  .order, .fryer, .reviews, .known, .wrapcone, .hero__cta, .facts { display: none; }
  .hero, .visit, .ftr { background: #fff; padding: 0; border-top: 0; }
  .visit { break-before: avoid; }
  /*  The highlight is a background, and backgrounds do not print by
      default — without this the emphasised word just looks unstyled. */
  .head em, .masthead em { background: none; }
}