/* Daybook: site.css. Demo site by BOUW. Fictional business.
   Concept "Today's page": a ruled ledger page that changes every morning, the date stamped in red at the top.

   Contents
   1. Fonts
   2. Tokens                               lib: base@v1 token contract, mapped to the brief's palette
   3. Motion tokens                        lib: motion-tokens@v1 (tuned)
   4. Reset, type, a11y                    lib: base@v1
   5. Paper: grain, rules, margin line     (new: see library-proposals.md, ruled-paper@v1)
   6. Demo bar                             lib: demo-bar@v1 (restyled)
   7. Header and nav                       lib: nav@v1 (restyled: two short links, no toggle, ink underline that travels)
   8. Buttons and links                    lib: button@v1 (restyled)
   9. Sheets (section surfaces)
   10. Taped photographs                   (new: taped-photo@v1) + lib: img-wipe@v1 (fade variant)
   11. Home: today's page (hero, stamp)
   12. Home: the regulars (ledger, collage)
   13. Home: coffee band
   14. Home: from the book (torn page)
   15. Hours ledger and the red-pen circle (new: today-ring@v1)
   16. Menu page: tabs and lists           lib: menu-list@v1 (restyled as a typewriter ledger)
   17. Visit page: map, notes, form        lib: form@v1 (restyled: lines in the book)
   18. Footer                              lib: footer@v1 (restyled: ink band, perforated edge)
   19. 404
   20. View transitions                    lib: view-transitions@v1 (page tear)
   21. Small screens

   Rules: colours only in section 2. Animate transform, opacity and clip-path only. Everything that moves sits inside
   prefers-reduced-motion: no-preference, and nothing is hidden unless html.js is set. Body copy sits on a 2rem baseline:
   every block margin is a multiple of 2rem (headings are snapped to it by site.js). */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face { font-family: "Bricolage Display"; src: url("/demos/daybook-cafe/fonts/bricolage-display.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/demos/daybook-cafe/fonts/bricolage-text.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/demos/daybook-cafe/fonts/courier-prime-r.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/demos/daybook-cafe/fonts/courier-prime-b.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Metric-matched fallbacks keep the swap from shifting the hero */
@font-face { font-family: "Display Fallback"; src: local("Arial Narrow Bold"), local("Arial Bold"), local("Arial"); size-adjust: 92%; ascent-override: 96%; descent-override: 26%; }
@font-face { font-family: "Type Fallback"; src: local("Courier New"); size-adjust: 100%; }

/* 2. Tokens --------------------------------------------------------------- */
/* lib: base@v1 (token block replaced with the Daybook palette; contrast checked in brief.md and below) */
:root {
  color-scheme: light;
  --milk: #FBEEE8;        /* page: ledger paper */
  --milk-deep: #F5E1D7;   /* ledger page (regulars): ink 11.8:1, muted 6.2:1, tomato-deep 5.5:1 */
  --desk: #EFD5C9;        /* the desk under the torn page: ink 10.7:1, muted 5.6:1 */
  --card: #FFF8F3;        /* torn page, photo border, index tabs: ink 14.2:1, tomato 5.0:1 */
  --rule: #E7C4B6;        /* ruled lines, decorative only */
  --rule-deep: #DDB3A2;   /* rules on the deeper ledger page, decorative only */
  --ink: #1F2A1F;         /* text, footer band */
  --tomato: #C8361F;      /* the one accent: stamp, primary button, active tab. Never ink text on it */
  --tomato-deep: #A82B17; /* small accent text: links, prices on hover, errors */
  --muted: #6B4A40;       /* helper text, dietary notes */
  --on-ink-muted: #C9B3AA;/* secondary text on the ink footer: 7.5:1 */
  --tape: rgb(255 250 236 / 0.62);
  --grain-ink: 31 42 31;

  /* library contract names */
  --bg: var(--milk); --fg: var(--ink); --accent: var(--tomato); --on-accent: var(--milk);
  --surface: var(--milk-deep); --line: var(--rule); --danger: var(--tomato-deep); --on-media: var(--milk);

  --font-display: "Bricolage Display", "Display Fallback", "Arial Narrow", sans-serif;
  --font-body: "Bricolage", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-type: "Courier Prime", "Type Fallback", "Courier New", monospace;

  --lh: 2rem;                                        /* the baseline: one ruled line */
  --rule-shift: -0.15rem;                            /* rules sit just clear of the descenders, so text never reads as underlined */
  --mx: 20px;                                        /* the margin line, from the page edge */
  --page: 88rem;
  --pad-r: clamp(1rem, 0.2rem + 3.6vw, 3.5rem);
  --pad-l: calc(var(--mx) + clamp(1rem, 0.4rem + 2.4vw, 2.5rem));
  --step-0: 1.0625rem;
  --h1: clamp(2.6rem, 1.2rem + 5.6vw, 5.25rem);
  --h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --radius: 0; --radius-lg: 0;
}
@media (min-width: 48rem) { :root { --mx: 44px; } }
@media (min-width: 64rem) { :root { --mx: 72px; } }

/* 3. Motion tokens -------------------------------------------------------- */
/* lib: motion-tokens@v1 (tuned: a 150ms swap for the menu, 180ms for the stamp) */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.2, 0, 0, 1);
  --ease-stamp: cubic-bezier(0.3, 1.4, 0.5, 1);  /* lands with a hair of overshoot */
  --dur-0: 150ms;  /* menu swap */
  --dur-1: 200ms;  /* hover, focus, press */
  --dur-2: 450ms;  /* photo lift, tab ink, page tear */
  --dur-3: 700ms;  /* the red-pen circle */
  --ease: var(--ease-out);
}
/* no global smooth scroll: anchor jumps stay instant, the menu tabs scroll themselves */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* 4. Reset, type, a11y ---------------------------------------------------- */
/* lib: base@v1 (reset and a11y helpers) */
*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100svh; overflow-x: clip;
  background: var(--milk); color: var(--ink);
  font: 400 var(--step-0) / var(--lh) var(--font-body);
  -webkit-font-smoothing: antialiased; font-kerning: normal;
}
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--h1); line-height: 1; }
h2 { font-size: var(--h2); line-height: 1.05; }
h3 { font: 700 var(--step-0) / var(--lh) var(--font-type); letter-spacing: 0; }
p { text-wrap: pretty; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration-color: var(--tomato); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--tomato-deep); text-decoration-thickness: 2px; }
[hidden] { display: none !important; }
::selection { background: var(--tomato); color: var(--milk); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: 0.5rem 1rem; background: var(--ink); color: var(--milk); font: 700 0.9375rem/1.4 var(--font-type); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--tomato-deep); outline-offset: 3px; }
:target { scroll-margin-top: 9rem; }
.type { font-family: var(--font-type); }
.muted { color: var(--muted); }
.small { font-size: 0.9375rem; }

/* 5. Paper: grain, rules, margin line ------------------------------------- */
/* Grain: one fixed, non-interactive layer over the whole page (photos included, so they share the paper's tooth). */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.55;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .12 0 0 0 -1.6 .78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
/* Fibres: a second, slower texture only on the ruled sheets (static background, scrolls with the page) */
.ruled, .sheet--ruled, .sheet--ledger {
  --rules: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--rule-c, var(--rule)) calc(var(--lh) - 1px) var(--lh));
}
.ruled { background-image: var(--rules); background-position: 0 var(--rule-shift); line-height: var(--lh); }
/* inside a ruled sheet the sheet already draws the rules: no second, offset set */
.sheet--ruled .ruled, .sheet--ledger .ruled { background-image: none; }
/* The margin line: one vertical tomato hairline, the same x on every sheet so it reads as one page */
.sheet { position: relative; }
.sheet--margin::before {
  content: ""; position: absolute; inset: 0 auto 0 max(var(--mx), calc((100% - var(--page)) / 2 + var(--mx)));
  width: 1px; background: color-mix(in srgb, var(--tomato) 55%, transparent); pointer-events: none;
}
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding: 0 var(--pad-r) 0 var(--pad-l); position: relative; }

/* 6. Demo bar ------------------------------------------------------------- */
/* lib: demo-bar@v1 (restyled: typewriter, ink) */
.demo-bar { position: relative; z-index: 60; view-transition-name: demo-bar; padding: 0.35rem var(--pad-r); background: var(--ink); color: var(--milk); font: 400 0.8125rem / 1.5 var(--font-type); text-align: center; }
.demo-bar a { font-weight: 700; color: inherit; text-decoration-color: currentColor; }
.demo-bar a:focus-visible { outline-color: var(--milk); }
.demo-bar__short { display: none; }

/* 7. Header and nav ------------------------------------------------------- */
/* lib: nav@v1 (restyled: one line, two links, the directions button; on phones the links and phone
   number sit on a second short row, so there is no menu toggle to open for two links) */
.nav { position: sticky; top: 0; z-index: 50; background: var(--milk); view-transition-name: masthead; }
.nav::after { /* the head rule: ink over a tomato hairline, like the top of a ledger page */
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; pointer-events: none;
  background: linear-gradient(var(--ink) 0 2px, transparent 2px 4px, color-mix(in srgb, var(--tomato) 70%, transparent) 4px 5px);
}
.nav__in { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.nav__brand { margin-right: auto; font: 800 1.75rem / 1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.1em; }
.nav__brand:hover { color: var(--ink); }
.nav__brand-dot { color: var(--tomato); }
.nav__links { display: flex; align-items: center; gap: 1.75rem; }
.nav__link { position: relative; padding-block: 0.6rem; font: 700 1rem / 1 var(--font-type); text-decoration: none; letter-spacing: 0.02em; }
.nav__link::after { /* the pen underline: draws in on hover, sits under the current page */
  content: ""; position: absolute; left: -0.15em; right: -0.15em; bottom: 0.2rem; height: 3px; background: var(--tomato);
  clip-path: inset(0 100% 0 0); border-radius: 2px;
}
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"]::after { clip-path: inset(0); view-transition-name: nav-ink; }
.nav__phone { font: 400 0.9375rem / 1 var(--font-type); text-decoration: none; white-space: nowrap; }
.nav__phone:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .nav__link::after { transition: clip-path var(--dur-1) var(--ease-out); }
  .nav__link:hover::after { clip-path: inset(0); }
}
/* scrolled state: a soft fill fades in under the head rule once the page moves (scroll-driven, no listeners) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav::before { content: ""; position: absolute; inset: 0; background: var(--card); opacity: 0; z-index: -1; animation: nav-fill linear both; animation-timeline: scroll(root); animation-range: 0 8rem; }
    @keyframes nav-fill { to { opacity: 1; } }
  }
}
.nav-sub { display: none; }

/* 8. Buttons and links ---------------------------------------------------- */
/* lib: button@v1 (restyled: square, typewriter label, a stamp-like press) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3rem; padding: 0 1.25rem; border: 2px solid var(--tomato); border-radius: 0;
  background: var(--tomato); color: var(--milk); white-space: nowrap;
  font: 700 1rem / 1 var(--font-type); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--tomato-deep); border-color: var(--tomato-deep); color: var(--milk); text-decoration: none; }
.btn:focus-visible { outline-color: var(--ink); }
.btn__arrow { display: inline-block; }
.btn--sm { min-height: 2.75rem; padding: 0 1rem; font-size: 0.9375rem; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); border-color: var(--ink); color: var(--milk); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-1) var(--ease-press), border-color var(--dur-1) var(--ease-press), color var(--dur-1), transform var(--dur-1) var(--ease-press); }
  .btn__arrow { transition: transform var(--dur-1) var(--ease-out); }
  .btn:hover .btn__arrow { transform: translateX(4px); }
  .btn:active { transform: translateY(1px) scale(0.98); }
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; min-height: 4rem; padding-block: 0.5rem; }
.link-type { font: 700 1rem / var(--lh) var(--font-type); text-decoration-color: var(--tomato); }
.link-type::after { content: " \2192"; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .link-type::after { transition: transform var(--dur-1) var(--ease-out); }
  .link-type:hover::after { transform: translateX(4px); }
}

/* 9. Sheets (section surfaces) -------------------------------------------- */
/* Every section is its own sheet with its own surface and start: ruled page, ledger page, plain paper, the desk. */
.sheet { padding-block: 4rem 6rem; }
.sheet--ruled { background-color: var(--milk); background-image: var(--rules); background-position: 0 var(--rule-shift); }
.sheet--ledger {
  --rule-c: var(--rule-deep);
  background-color: var(--milk-deep); background-image: var(--rules); background-position: 0 var(--rule-shift);
  border-top: 6px double var(--ink);
}
.sheet--plain { background: var(--milk); }
.sheet--desk { background: var(--desk); }
.sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.sheet__folio { font: 400 0.875rem / var(--lh) var(--font-type); color: var(--muted); white-space: nowrap; }
.sample { font: 400 0.8125rem / var(--lh) var(--font-type); color: var(--muted); }

/* 10. Taped photographs --------------------------------------------------- */
/* (new: taped-photo@v1) A print stuck onto the page: a paper border, a slight turn, one or two strips of tape.
   No drop shadow. Turn with --tilt; hover straightens and lifts it a little. Flat on phones. */
.taped { position: relative; margin: 0; padding: 6px; background: var(--card); box-shadow: 0 0 0 1px rgb(var(--grain-ink) / 0.08); transform: rotate(var(--tilt, 0deg)); }
.taped::before, .taped::after { /* tape strips, ragged ends */
  content: ""; position: absolute; z-index: 2; width: clamp(4.5rem, 9vw, 7rem); height: 1.6rem; background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 2px, transparent 2px 5px), var(--tape);
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px);
  mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px)), repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px);
  -webkit-mask-composite: source-over; mask-composite: add;
  box-shadow: 0 0 0 1px rgb(var(--grain-ink) / 0.04);
}
.taped::before { top: -0.8rem; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.taped::after { display: none; }
.taped--corners::before { left: -1.2rem; top: 0.4rem; transform: rotate(-38deg); }
.taped--corners::after { display: block; right: -1.2rem; left: auto; top: auto; bottom: 0.4rem; transform: rotate(-38deg); }
.taped img { width: 100%; background: var(--c, var(--milk-deep)); }
.taped figcaption { padding: 0.5rem 0.25rem 0; font: 400 0.875rem / 1.5rem var(--font-type); color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .taped { transition: transform var(--dur-2) var(--ease-out); }
  .taped.is-lift, a:hover > .taped, .taped:hover { transform: rotate(calc(var(--tilt, 0deg) * 0.25)) translateY(-4px); }
}
/* lib: img-wipe@v1 (fade variant only: lazy photos fade over their own colour, never grey, never on the LCP image) */
.wipe { background: var(--c, var(--milk-deep)); }
@media (prefers-reduced-motion: no-preference) {
  .js .wipe--fade img { opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
  .js .wipe--fade.is-loaded img { opacity: 1; }
}

/* 11. Home: today's page -------------------------------------------------- */
.today { padding-block: 2rem 6rem; }
.today__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
.today__copy { padding-top: 2rem; }
.today__photo { margin-top: -1rem; --tilt: 1deg; }
.stamp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; min-height: 4rem; }
/* Signature 1: the date stamp. Ink is eroded by a noise mask so it reads as rubber on paper. */
.stamp {
  display: inline-block; padding: 0.3rem 0.75rem 0.25rem; border: 2px solid var(--tomato); color: var(--tomato);
  font: 700 1.125rem / 1.2 var(--font-type); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-4deg); transform-origin: 40% 60%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='70'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 220px 70px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='70'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 0 0 0 2.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") 0 0 / 220px 70px;
}
.closed-note { font: 700 0.9375rem / var(--lh) var(--font-type); color: var(--tomato-deep); }
.today h1 { margin-top: 2rem; max-width: 12ch; }
.entry { margin-top: 2rem; max-width: 36rem; font: 400 1.1875rem / var(--lh) var(--font-type); }
.entry__label { display: block; font-size: 0.875rem; color: var(--muted); }
.today .actions { margin-top: 2rem; }
@media (prefers-reduced-motion: no-preference) {
  .stamp-fresh .stamp { animation: stamp-land 180ms var(--ease-stamp) both; }
  @keyframes stamp-land { from { opacity: 0; transform: rotate(-6deg) scale(1.12); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
}

/* 12. Home: the regulars -------------------------------------------------- */
.regulars__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
.collage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(14, 2rem); }
.collage .snap--tomato { grid-column: 1 / 8; grid-row: 1 / 12; --tilt: -1.5deg; z-index: 1; }
.collage .snap--shak { grid-column: 7 / 13; grid-row: 2 / 9; --tilt: 2deg; z-index: 2; }
.collage .snap--ricotta { grid-column: 6 / 12; grid-row: 9 / 16; --tilt: -0.8deg; z-index: 3; }
.collage .taped { align-self: start; }
.regulars h2 { margin-bottom: 2rem; }
/* The ledger: typewriter lines with dotted leaders and a red double money column */
.ledger { position: relative; font: 400 var(--step-0) / var(--lh) var(--font-type); }
.ledger--money { padding-right: 0; }
.ledger--money::before { /* the money column rules */
  content: ""; position: absolute; top: -2rem; bottom: -2rem; right: 4.25rem; width: 4px;
  border-left: 1px solid color-mix(in srgb, var(--tomato) 60%, transparent); border-right: 1px solid color-mix(in srgb, var(--tomato) 60%, transparent);
  pointer-events: none;
}
.ledger li { display: flex; align-items: baseline; gap: 0.5rem; min-height: var(--lh); }
.ledger__name { flex: 0 1 auto; }
.ledger__leader { flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 45%, transparent); transform: translateY(-0.3em); }
.ledger__price { flex: 0 0 auto; min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ledger--money .ledger__price { min-width: 3.75rem; }
.regulars .ledger li { cursor: default; }
.regulars .ledger li:hover .ledger__name, .regulars .ledger li:hover .ledger__price { color: var(--tomato-deep); }
/* hovering a line lifts the matching photograph (and the reverse); purely a pointer nicety */
.regulars:has([data-dish="tomato"]:hover) .snap--tomato,
.regulars:has([data-dish="shak"]:hover) .snap--shak,
.regulars:has([data-dish="ricotta"]:hover) .snap--ricotta { --hover: 1; }
.regulars:has(.snap--tomato:hover) [data-dish="tomato"] .ledger__name,
.regulars:has(.snap--shak:hover) [data-dish="shak"] .ledger__name,
.regulars:has(.snap--ricotta:hover) [data-dish="ricotta"] .ledger__name { color: var(--tomato-deep); text-decoration: underline 2px var(--tomato); text-underline-offset: 0.25em; }
@media (prefers-reduced-motion: no-preference) {
  .collage .taped[style], .collage .taped { transform: rotate(calc(var(--tilt) * (1 - var(--hover, 0) * 0.75))) translateY(calc(var(--hover, 0) * -6px)); }
}
.regulars .link-type { display: inline-block; margin-top: 2rem; }

/* 13. Home: coffee band --------------------------------------------------- */
.coffee { padding-block: 4rem 6rem; overflow: clip; }
.coffee__band { width: min(100% - 2 * var(--pad-r), 74rem); margin-inline: auto; --tilt: -1deg; }
.coffee__band img { aspect-ratio: 2 / 1; object-fit: cover; }
.coffee__text { margin-top: 4rem; }
/* stacked on the margin line, as the brief wireframes it: H2, then two short lines at 36rem */
.coffee__text h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1; max-width: 18ch; }
.coffee__lines { max-width: 36rem; margin-top: 2rem; }
.coffee__lines p + p { margin-top: 2rem; }

/* 14. Home: from the book ------------------------------------------------- */
.book { padding-block: 6rem; }
.page-torn {
  position: relative; max-width: 44rem; padding: 3rem clamp(1.25rem, 4vw, 3rem) 2rem; background: var(--card);
  transform: rotate(-0.6deg); box-shadow: 0 0 0 1px rgb(var(--grain-ink) / 0.05);
}
.page-torn::before { /* the torn top edge, cut by the desk colour */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; pointer-events: none;
  background: linear-gradient(135deg, var(--desk) 5px, transparent 0) 0 0 / 10px 10px repeat-x, linear-gradient(225deg, var(--desk) 5px, transparent 0) 0 0 / 10px 10px repeat-x;
}
.page-torn .ruled { background-position: 0 calc(var(--rule-shift) + 0px); }
.page-torn blockquote p { font: 400 clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem) / var(--lh) var(--font-type); }
.page-torn blockquote p::before { content: "\201C"; margin-left: -0.6em; color: var(--tomato); }
.page-torn blockquote p::after { content: "\201D"; color: var(--tomato); }
.page-torn footer { margin-top: 0; font: 700 0.9375rem / var(--lh) var(--font-type); }
.page-torn__date { position: absolute; right: clamp(1.25rem, 4vw, 3rem); top: 0.9rem; font: 400 0.8125rem / 1 var(--font-type); color: var(--muted); }
.book__wrap { display: flex; justify-content: center; }
.book .page-torn { max-width: 50rem; width: 100%; }

/* 15. Hours ledger and the red-pen circle --------------------------------- */
.hours__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.hours h2 { margin-bottom: 2rem; max-width: 20ch; }
.nowrap { white-space: nowrap; }
.d-short { display: none; }
.link-type--plain::after { content: none; }
.hours-list { position: relative; max-width: 30rem; }
.hours-list li { position: relative; }
.hours-list .ledger__price { font-weight: 400; min-width: 7.5rem; }
/* Signature 2 (new: today-ring@v1): today's row is circled in red pen, drawn left to right once in view. */
.ring { max-width: none; position: absolute; left: -1rem; width: calc(100% + 2rem); top: -0.4rem; height: calc(var(--lh) + 0.6rem); color: var(--tomato); pointer-events: none; overflow: visible; }
.ring path { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .js .ring { clip-path: inset(-10% 100% -10% -2%); transition: clip-path var(--dur-3) var(--ease-in-out); }
  .js .ring.is-drawn { clip-path: inset(-10% -2% -10% -2%); }
}
.today-note { display: block; min-height: var(--lh); font: 700 0.9375rem / var(--lh) var(--font-type); color: var(--tomato-deep); }
.where p { max-width: 30rem; }
.where__addr { font: 700 1.1875rem / var(--lh) var(--font-type); }
.where .actions { margin-top: 2rem; }

/* 16. Menu page ----------------------------------------------------------- */
/* lib: menu-list@v1 (restyled: typewriter ledger. Name in bold on the first rule with the price at its end,
   the description on the next rule. Dietary marks are letters, with the key printed above the tabs.) */
.menu-head h1 { max-width: 14ch; }
.menu-head__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
/* Today's specials: a taped index card that reuses the stamp and the weekday entry */
.specials { position: relative; margin-top: 1rem; padding: 2rem clamp(1.25rem, 3vw, 2rem) 1.5rem; background: var(--card); transform: rotate(1deg);
  box-shadow: 0 0 0 1px rgb(var(--grain-ink) / 0.06); max-width: 30rem; justify-self: end; width: 100%;
}
.specials::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.75rem; width: 1px; background: color-mix(in srgb, var(--tomato) 55%, transparent); }
.specials::after { content: ""; position: absolute; top: -0.8rem; left: 50%; width: 6rem; height: 1.6rem; transform: translateX(-50%) rotate(-3deg); background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.18) 0 2px, transparent 2px 5px), var(--tape); }
.specials > * { position: relative; padding-left: 2rem; }
.stamp--small { font-size: 0.9375rem; margin-left: 2rem; padding-left: 0.6rem; }
.specials__h { margin-top: 1rem; font: 700 1rem / var(--lh) var(--font-type); letter-spacing: 0; }
.specials__entry { font: 400 1.125rem / var(--lh) var(--font-type); }
.specials__sample { display: block; margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.5rem; color: var(--muted); }
.menu-head__line { margin-top: 2rem; max-width: 34rem; }
.menu-head__key { max-width: 44rem; font: 400 0.9375rem / var(--lh) var(--font-type); color: var(--muted); }
.tabs { position: sticky; top: var(--nav-h, calc(4rem + 5px)); z-index: 40; background: var(--milk); border-bottom: 2px solid var(--ink); }
.tabs__in { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; position: relative; padding-top: 0.75rem; }
.tabs__in::-webkit-scrollbar { display: none; }
.tab { /* index tabs sticking up from the page */
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
  background: var(--milk-deep); border: 1px solid var(--rule-deep); border-bottom: 0; color: var(--ink);
  font: 700 1rem / 1 var(--font-type); text-decoration: none; letter-spacing: 0.02em; cursor: pointer;
}
.tab:hover { color: var(--tomato-deep); background: var(--card); }
.tab[aria-selected="true"] { background: var(--card); color: var(--ink); }
.tabs__ink { position: absolute; left: 0; bottom: 0; width: 100px; height: 4px; background: var(--tomato); transform-origin: 0 50%; pointer-events: none; opacity: 0; }
.js .tabs__ink.is-ready { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tab { transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-press); }
  .tab:active { transform: translateY(1px); }
  .tabs__ink.is-moving { transition: transform var(--dur-2) var(--ease-out); }
  .panel.is-entering { animation: panel-in var(--dur-0) var(--ease-out) both; }
  @keyframes panel-in { from { opacity: 0; } }
}
.panel { padding-block: 2rem 2rem; scroll-margin-top: 9rem; }
.panels { padding-block: 2rem 4rem; }
.menu-head { padding-bottom: 2rem; }
.panel + .panel { border-top: 2px solid var(--ink); }
.js .panels.is-tabbed .panel + .panel { border-top: 0; }
.panel__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.25rem; margin-bottom: 2rem; }
.panel__head h2 { line-height: var(--lh); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); line-height: 1; }
.panel__when { font: 400 0.9375rem / var(--lh) var(--font-type); color: var(--muted); }
.panel__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 clamp(2rem, 6vw, 6rem); align-items: start; }
.panel__grid--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.panel__grid--flip .dishes { order: 2; }
.dishes { font: 400 var(--step-0) / var(--lh) var(--font-type); }
.dish { padding-bottom: 0; }
.dish + .dish { margin-top: 0; }
.dish__row { display: flex; align-items: baseline; gap: 0.5rem; }
.dish__name { font-weight: 700; }
.dish__desc { color: var(--muted); font-size: 0.9375rem; max-width: 40rem; }
.dish__tag { font-size: 0.875rem; color: var(--muted); white-space: nowrap; }
.dish__tag--desc, .dish__desc--tag { display: none; }
.dish:hover .dish__price { color: var(--tomato-deep); }
.dishes--cols { columns: 2 18rem; column-gap: 4rem; }
.dishes--cols .dish { break-inside: avoid; }
.dishes__sides { margin-top: 2rem; color: var(--muted); font-size: 0.9375rem; }
.panel__photo { margin-top: 0.5rem; }
.panel__photo--bread { --tilt: 1.2deg; }
.panel__photo--counter { --tilt: -1.4deg; }
.allergy { max-width: 44rem; padding: 0 1.5rem; border-left: 4px solid var(--tomato-deep); color: var(--muted); }
.allergy h2 { font: 700 1rem / var(--lh) var(--font-type); color: var(--ink); letter-spacing: 0; }
.close-band h2 { max-width: 16ch; }
.close-band .actions { margin-top: 2rem; }

/* 17. Visit page ---------------------------------------------------------- */
.visit-head__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
.visit-head h1 { max-width: 13ch; }
.visit-head__addr { margin-top: 2rem; font: 700 1.1875rem / var(--lh) var(--font-type); }
.visit-head__line { max-width: 30rem; }
.visit-head .actions { margin-top: 2rem; }
.visit-head__photo { --tilt: -1.5deg; margin-top: 0; }
.map { padding-block: 4rem 5rem; }
.map__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.map__card { --tilt: 0.5deg; max-width: 58rem; }
.map-svg { display: block; width: 100%; height: auto; }
.map-svg__ground { fill: var(--milk-deep); }
.map-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-svg__minor path { stroke: color-mix(in srgb, var(--ink) 28%, var(--milk-deep)); stroke-width: 3; }
.map-svg__major path { stroke: color-mix(in srgb, var(--ink) 55%, var(--milk-deep)); stroke-width: 5; }
.map-svg__high path { stroke: var(--ink); stroke-width: 12; }
.map-svg__tram path { stroke: var(--milk); stroke-width: 2; stroke-dasharray: 10 8; }
.map-svg__rail path { stroke: var(--tomato); stroke-width: 6; }
.map-svg__rail-ties path { stroke: var(--milk-deep); stroke-width: 2; stroke-dasharray: 2 10; }
.map-svg__station { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.map-svg__corner { fill: var(--ink); }
.map-svg__label { font: 700 22px var(--font-type); fill: var(--ink); paint-order: stroke; stroke: var(--milk-deep); stroke-width: 6px; stroke-linejoin: round; }
.map-svg__label--street { font: 800 30px var(--font-display); letter-spacing: -0.01em; }
.map-svg__tram-tag rect { fill: var(--ink); }
.map-svg__tram-tag text { font: 700 18px var(--font-type); fill: var(--milk); }
.map-svg__pin > circle { fill: var(--tomato); stroke: var(--card); stroke-width: 5; }
.map-svg__pin .map-svg__pin-dot { fill: var(--card); stroke: none; }
.map-svg__pin rect { fill: var(--tomato); }
.map-svg__pin text { font: 700 19px var(--font-type); fill: var(--milk); }
/* phone: the map shrinks to a third, so its labels and markers scale up around their own anchor */
@media (max-width: 47.99rem) {
  .map-svg .mk { transform-box: fill-box; scale: 2; }
  .map-svg .mk--station { transform-origin: 100% 50%; scale: 1.3; }
  .map-svg .mk--street, .map-svg .mk--tram { transform-origin: 0% 50%; }
  .map-svg .mk--pin { transform-origin: 15% 50%; }
  .map-svg__high path { stroke-width: 18; }
  .map-svg__rail path { stroke-width: 9; }
}
.map__card .map__credit { padding-right: 5.5rem; font: 400 0.8125rem / 1.5rem var(--font-type); color: var(--muted); }
.map__side h2 { margin-bottom: 2rem; }
.map__list { font: 400 var(--step-0) / var(--lh) var(--font-type); }
.map__list dt { font-weight: 700; }
.map__list dd { margin: 0 0 1rem; font-family: var(--font-body); line-height: 1.6; }
.notes__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr); gap: 0 clamp(2rem, 4vw, 4rem); align-items: start; }
.notes__grid > h2 { grid-column: 1 / -1; }
.visit-hours__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 0 clamp(2rem, 6vw, 6rem); align-items: start; }
.visit-hours .hours-list { max-width: 40rem; font-size: 1.1875rem; }
.notes h2 { margin-bottom: 2rem; }
.notes dl { font: 400 var(--step-0) / var(--lh) var(--font-type); }
.notes dt { font-weight: 700; }
.notes dd { margin-bottom: 2rem; max-width: 34rem; font-family: var(--font-body); }
.notes__photo { --tilt: 1.2deg; margin-top: 0.5rem; }
/* lib: form@v1 (restyled: typewriter labels above fields, fields are a 2px ink line so they read as lines in the book) */
.group__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: 0 clamp(2rem, 6vw, 6rem); align-items: start; }
.group__intro { position: sticky; top: 7rem; }
.group__intro p { margin-top: 2rem; max-width: 26rem; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.5rem; max-width: 46rem; margin-top: 0; }
.field { display: grid; align-content: start; margin-bottom: 2rem; }
.field--full, .form > .form__summary, .form > .form__foot { grid-column: 1 / -1; }
.field > label { font: 700 0.9375rem / var(--lh) var(--font-type); }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--lh); height: var(--lh); padding: 0 0.25rem; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font: 400 1.0625rem / calc(var(--lh) - 2px) var(--font-body);
}
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 13px) 50% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 7px) 50% / 6px 6px no-repeat; padding-right: 1.75rem; }
.field textarea { height: calc(var(--lh) * 4); resize: vertical; line-height: var(--lh); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh)); border-bottom-width: 2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--tomato-deep); outline-offset: 2px; background-color: var(--card); }
.field__hint { font: 400 0.875rem / var(--lh) var(--font-type); color: var(--muted); }
.field__error { font: 700 0.875rem / 1.5rem var(--font-type); color: var(--tomato-deep); padding-top: 0.25rem; }
.field [aria-invalid="true"] { border-bottom-color: var(--tomato-deep); border-bottom-width: 3px; }
.form__summary { margin-bottom: 2rem; padding: 0.5rem 1rem; border-left: 4px solid var(--tomato-deep); color: var(--tomato-deep); font: 700 0.9375rem / 1.5rem var(--font-type); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; min-height: 4rem; }
.form__status { font: 400 0.9375rem / var(--lh) var(--font-type); color: var(--muted); }
.success { max-width: 40rem; margin-top: 2rem; padding: 2rem clamp(1.25rem, 3vw, 2rem); background: var(--card); border-left: 4px solid var(--tomato); }
.success h3 { font: 800 var(--h2) / 1.05 var(--font-display); letter-spacing: -0.02em; }
.success p { margin-top: 1rem; }
.success:focus { outline: none; }
.success:focus-visible { outline: 2px solid var(--tomato-deep); outline-offset: 4px; }

/* 18. Footer -------------------------------------------------------------- */
/* lib: footer@v1 (restyled: ink band with a perforated tear-off edge) */
.footer { position: relative; margin-top: 0; padding-block: 5rem 2rem; background: var(--ink); color: var(--milk); }
.footer::before { /* perforations along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 12px;
  background: radial-gradient(circle at 50% 0, var(--footer-edge, var(--milk)) 5px, transparent 5.5px) 0 0 / 18px 12px repeat-x;
}
.footer a { color: inherit; text-decoration-color: var(--tomato); }
.footer a:hover { color: var(--milk); }
.footer :focus-visible { outline-color: var(--milk); }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; padding-bottom: 3rem; }
.footer__mark { font: 800 clamp(2.75rem, 1.5rem + 5vw, 5.5rem) / 0.9 var(--font-display); letter-spacing: -0.035em; text-decoration: none; }
.footer__mark span { color: var(--tomato); }
.footer__h { font: 700 0.8125rem / 1.5rem var(--font-type); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); }
.footer__col p { font: 400 1rem / 1.6 var(--font-type); }
.footer__note { display: grid; gap: 0.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(251 238 232 / 0.2); font: 400 0.8125rem / 1.6 var(--font-type); color: var(--on-ink-muted); }

/* 19. 404 ------------------------------------------------------------------ */
.lost { min-height: 60vh; }
.lost h1 { max-width: 14ch; margin-top: 2rem; }
.lost p { margin-top: 2rem; }
.lost__stub { height: 18px; margin-top: 5px; background-color: var(--desk); background-image: linear-gradient(135deg, transparent 9px, var(--milk) 0) 0 0 / 18px 18px repeat-x, linear-gradient(225deg, transparent 9px, var(--milk) 0) 0 0 / 18px 18px repeat-x; }

/* 20. View transitions ---------------------------------------------------- */
/* lib: view-transitions@v1 (re-cut. Signature 3, the page tear: the old page is torn off upward along a ragged edge
   and the next page is already underneath. The header stays put, and the current-page ink slides to its new link.) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*) { animation-duration: var(--dur-2); animation-timing-function: var(--ease-in-out); }
::view-transition-old(root) { z-index: 2; animation: 560ms var(--ease-in-out) both tear-off; }
::view-transition-new(root) { z-index: 1; animation: 560ms var(--ease-out) both settle-in; }
::view-transition-group(masthead) { z-index: 3; animation: none; }
::view-transition-old(masthead) { display: none; }
::view-transition-new(masthead) { animation: none; }
::view-transition-group(demo-bar) { z-index: 4; animation: none; }
::view-transition-old(demo-bar) { display: none; }
::view-transition-new(demo-bar) { animation: none; }
@keyframes tear-off {
  from { clip-path: polygon(0 -2%, 100% -2%, 100% 104.1%, 96.2% 106.8%, 92.4% 103.2%, 88.9% 105.6%, 83.4% 102.4%, 79.6% 106.3%, 75.1% 104.4%, 70.4% 102.1%, 66.8% 105.9%, 62.3% 103.7%, 57.1% 106.6%, 53.6% 102.9%, 48.2% 104.8%, 44.9% 102.2%, 40.3% 106.1%, 35.8% 103.4%, 31.1% 105.2%, 27.6% 102.6%, 22.4% 106.9%, 18.7% 103.9%, 13.2% 105.4%, 9.6% 102.3%, 4.8% 105.8%, 0 103.5%); }
  to { transform: translateY(-3%) rotate(-0.6deg); clip-path: polygon(0 -2%, 100% -2%, 100% -5.9%, 96.2% -3.2%, 92.4% -6.8%, 88.9% -4.4%, 83.4% -7.6%, 79.6% -3.7%, 75.1% -5.6%, 70.4% -7.9%, 66.8% -4.1%, 62.3% -6.3%, 57.1% -3.4%, 53.6% -7.1%, 48.2% -5.2%, 44.9% -7.8%, 40.3% -3.9%, 35.8% -6.6%, 31.1% -4.8%, 27.6% -7.4%, 22.4% -3.1%, 18.7% -6.1%, 13.2% -4.6%, 9.6% -7.7%, 4.8% -4.2%, 0 -6.5%); }
}
@keyframes settle-in { from { opacity: 0.6; transform: translateY(6px); } }

/* 21. Small screens -------------------------------------------------------- */
@media (max-width: 63.99rem) {
  .today__grid, .regulars__grid, .hours__grid, .visit-head__grid, .notes__grid, .coffee__text, .panel__grid, .panel__grid--flip, .visit-hours__grid, .group__grid, .map__grid, .menu-head__grid { grid-template-columns: minmax(0, 1fr); }
  .specials { justify-self: start; }
  .group__intro { position: static; }
  .group .form { margin-top: 2rem; }
  .panel__grid--flip .dishes { order: 0; }
  .today__photo { margin-top: 2rem; max-width: 30rem; }
  .collage { grid-template-rows: none; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1rem 0.5rem 1.5rem; margin-top: 2rem; scrollbar-width: thin; }
  .collage .taped { flex: 0 0 72%; scroll-snap-align: start; --tilt: 0deg !important; }
  .regulars__grid > .collage { order: 2; }
  .visit-head__photo, .notes__photo { margin-top: 2rem; max-width: 34rem; }
  .panel__photo { margin-top: 2rem; max-width: 30rem; }
}
@media (max-width: 47.99rem) {
  :root { --h1: clamp(2.5rem, 1.6rem + 4.6vw, 3.25rem); }
  .demo-bar__long { display: none; }
  .demo-bar__short { display: inline; }
  .nav__in { min-height: 3.5rem; gap: 0.75rem; }
  .nav__brand { font-size: 1.5rem; }
  .nav__links { display: none; }
  .nav-sub { display: block; position: relative; z-index: 2; background: var(--milk); padding-top: 5px; }
  .nav-sub__in { display: flex; align-items: center; gap: 1.25rem; min-height: 2.75rem; border-bottom: 1px solid var(--rule); }
  .nav-sub .nav__phone { margin-left: auto; }
  :root { --nav-h: calc(3.5rem + 5px); }
  .taped, .today__photo, .coffee__band, .visit-head__photo, .notes__photo, .map .taped { --tilt: 0deg; }
  .taped::before { width: 4.5rem; }
  .coffee__band { width: calc(100% - 2rem); }
  .coffee__band img { aspect-ratio: 4 / 3; }
  .today__photo { max-width: none; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__lead { grid-column: 1 / -1; }
  .sheet__head { flex-direction: column; gap: 0; }
  .ledger--money::before { right: 4.25rem; }
  .ledger--money li { display: grid; grid-template-columns: minmax(0, 1fr) 3.75rem; column-gap: 1.25rem; }
  .ledger--money .ledger__leader, .dish__row .ledger__leader { display: none; }
  .dish__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .tab { font-size: 0.9375rem; }
  .hours-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .hours-list .ledger__leader { display: none; }
  .hours-list .ledger__price { min-width: 0; }
  /* phones: the long day name is kept for screen readers, the short one is what the eye reads */
  .d-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .d-short { display: inline; }
  .dish__tag--row { display: none; }
  .dish__tag--desc { display: inline; }
  .dish__desc--tag { display: block; }
  .sheet { padding-block: 2rem 4rem; }
  .book { padding-block: 4rem; }
  .page-torn, .specials { transform: none; }
  /* ring: give the stroke room on both sides at phone width (the left margin line and the right gutter allow it) */
  .ring { left: -0.8rem; width: calc(100% + 1.6rem); top: -0.5rem; height: calc(var(--lh) + 0.8rem); }
  /* menu: tabs and the first dish inside the first screen. The specials card folds to a strip: stamp and one line. */
  .menu-head { padding-block: 1.5rem 1rem; }
  .menu-head__line { margin-top: 1rem; }
  .menu-head__key { font-size: 0.8125rem; }
  .menu-head__grid { row-gap: 1rem; }
  .specials { margin-top: 0; padding: 0.75rem 0 0; background: none; box-shadow: none; border-top: 1px dashed var(--rule-deep); }
  .specials::before, .specials::after { display: none; }
  .specials > * { padding-left: 0; }
  .stamp--small { display: inline-block; margin: 0.35rem 0 0.35rem; font-size: 0.75rem; line-height: 1.2rem; padding: 0.1rem 0.4rem; }
  .specials__sample { display: none; }   /* the demo bar already says the content is sample; phones get the entry alone */
  .specials__h { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .specials__entry { font-size: 0.9375rem; }
  .panels { padding-top: 0.5rem; }
  .panel { padding-top: 1rem; }
  .panel__head { margin-bottom: 1rem; }
  .tab { padding: 0 0.85rem; }
}
/* smallest phones: drop the currency sentence so the first dish fits the first screen (prices are plainly AUD) */
@media (max-width: 22.5rem) { .menu-head__aud { display: none; } }