/* ==========================================================================
   Park Pantry — 119 Park St, South Yarra
   Built from design_handoff_park_pantry_site. Values are the handoff's:
   no border radius anywhere, no shadows anywhere, and the only transition
   on the page is the 140ms menu tab swap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted so the page never render-blocks on a third party.
   One variable file covers weight 300 (headings) and 400 (wordmark, dish
   names, the rating figure). The latin subset carries every accent in the
   copy — Café, béchamel, jalapeño, Provençal, Rosé.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --ink: #17140f;
  --cream: #f3ede2;
  --green: #1f4a25;

  /* Swatch options from the handoff: #c8451c (default), #b26a12, #7a1f2b.
     Every consumer reads var(--accent, #c8451c) so the accent stays themeable. */
  --accent: #c8451c;

  /* Accent used for TYPE on cream (eyebrows, menu group headings). Held equal
     to --accent to keep the design exact. See README "Known contrast trade-off":
     setting this to #b03d18 lifts that small uppercase type from 4.2:1 to
     5.1:1 without touching the button fills. */
  --accent-type: var(--accent, #c8451c);

  /* Derived alphas — the handoff is explicit that these are alphas, not greys. */
  --ink-60: rgba(23, 20, 15, 0.6);
  /* The handoff's dietary-tag colour. Currently unused: at 2.9:1 on cream it
     was the worst contrast on the page, so .tag uses --ink-60 instead. Kept
     so reverting is a one-word change. See README. */
  --ink-45: rgba(23, 20, 15, 0.45);
  --ink-28: rgba(23, 20, 15, 0.28);
  --ink-20: rgba(23, 20, 15, 0.2);

  --cream-82: rgba(243, 237, 226, 0.82);
  --cream-78: rgba(243, 237, 226, 0.78);
  --cream-72: rgba(243, 237, 226, 0.72);
  --cream-66: rgba(243, 237, 226, 0.66);
  --cream-60: rgba(243, 237, 226, 0.6);
  --cream-55: rgba(243, 237, 226, 0.55);
  --cream-30: rgba(243, 237, 226, 0.3);
  --cream-16: rgba(243, 237, 226, 0.16);
  --cream-14: rgba(243, 237, 226, 0.14);
  --cream-12: rgba(243, 237, 226, 0.12);

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --pad-block: clamp(56px, 7vw, 104px);
  --pad-inline: clamp(24px, 5vw, 72px);

  /* Height of the sticky head — drives scroll-margin so anchors never land
     underneath it. */
  --header-h: 62px;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--ink);
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover { color: var(--accent, #c8451c); }

::selection {
  background: var(--accent, #c8451c);
  color: var(--cream);
}

address { font-style: normal; }

h1, h2, h3, p, ul { margin: 0; }

ul {
  padding: 0;
  list-style: none;
}

/* Square everything — iOS Safari rounds buttons by default and that would
   quietly break the "no radius anywhere" rule on phones. */
button {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  font: inherit;
}

/* Anchors clear the sticky head. */
[id] { scroll-margin-top: var(--header-h); }

/* Tabbing to a link near the top of the viewport would otherwise scroll it
   underneath the sticky header (WCAG 2.2 SC 2.4.11, Focus Not Obscured).
   :is() rather than :where() so this still beats the [id] rule above on the
   tabs, which match both. */
:is(a[href], button, [tabindex]) {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

:focus-visible {
  outline: 2px solid var(--accent, #c8451c);
  outline-offset: 3px;
}

/* Accent-on-ink is a weak focus ring; cream reads far more clearly on the
   page's dark and green surfaces. */
.site-head :focus-visible,
.strip :focus-visible,
.hero-info :focus-visible,
.room :focus-visible,
.coffee :focus-visible,
.footer :focus-visible {
  outline-color: var(--cream);
}

.visually-hidden {
  position: absolute;
  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: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  background: var(--accent, #c8451c);
  color: var(--ink);
  padding: 12px 18px;
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.skip-link:focus { top: 8px; }

/* Without this the global a:hover rule paints accent text on the skip link's
   accent background — the label vanishes exactly when it is being used. */
.skip-link:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   4. Shared type roles
   -------------------------------------------------------------------------- */

/* The label voice — 10.5px uppercase at 0.19em is the single most repeated
   style on the page. It never scales down. */
.eyebrow,
.label-muted,
.group-title,
.nav a,
.header-tel,
.btn,
.tab,
.strip,
.footer,
.header-jump {
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.eyebrow,
.group-title { color: var(--accent-type); }

.label-muted { color: var(--cream-60); }

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.h2--menu { font-size: clamp(34px, 4.2vw, 62px); line-height: 1; }
.h2--room { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.06; }
.h2--coffee { font-size: clamp(32px, 4vw, 58px); line-height: 1.04; }
.h2--find { font-size: clamp(34px, 4.4vw, 64px); line-height: 1; }

.section {
  padding: var(--pad-block) var(--pad-inline);
}

.section--cream { background: var(--cream); color: var(--ink); }
.section--ink { background: var(--ink); color: var(--cream); }

.wrap {
  max-width: 1180px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 15px 26px;
  border: 0;
  white-space: nowrap;
}

/* The header's Order takeaway sits tighter than the page's other buttons. */
.btn--sm {
  padding: 9px 15px;
  letter-spacing: 0.16em;
}

.btn--ink {
  background: var(--ink);
  color: var(--cream);
}

.btn--ink:hover {
  background: var(--accent, #c8451c);
  color: var(--ink);
}

.btn--accent {
  background: var(--accent, #c8451c);
  color: var(--ink);
}

.btn--accent:hover {
  background: var(--cream);
  color: var(--ink);
}

.btn--outline {
  border: 1px solid var(--ink-28);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Default is stretch, which sits the outline button (1px border) flush with
   the solid one beside it — the prototype's Find us row. Only the hero row
   centres, where the prototype accepts the 2px difference. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-row--center { align-items: center; }

/* --------------------------------------------------------------------------
   6. Sticky head
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 62px;
  padding: 0 28px;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid var(--cream-14);
}

.wordmark {
  /* Stretching to the full header height gives the link a real tap target
     instead of a 21px-tall strip of text. */
  display: flex;
  align-items: center;
  align-self: stretch;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}

.wordmark:hover { color: var(--cream); }

.nav {
  display: flex;
  gap: 26px;
}

.nav a,
.header-tel {
  color: var(--cream-72);
  white-space: nowrap;
}

.nav a:hover,
.header-tel:hover { color: var(--cream); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   7. Hero split
   Two panels under the sticky head: copy on flat ink, the shopfront photo
   filling the right column. The panel colour matches the painted shopfront
   in the photograph, so the two halves read as one black surface.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: calc(100svh - var(--header-h));
  background: var(--ink);
  color: var(--cream);
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(40px, 6vh, 72px);
  padding: clamp(32px, 5vw, 80px);
  padding-bottom: 0;
}

.hero-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.6vh, 30px);
  /* Centre the lockup in the space above the facts bar. */
  margin: auto 0;
  padding: clamp(24px, 4vh, 48px) 0;
}

.hero-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 2;
}

.hero-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 5.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  max-width: 14ch;
}

.hero-title em {
  font-style: italic;
  font-weight: 340;
}

.hero-sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--cream-72);
  max-width: 44ch;
}

.hero-text .btn-row { margin-top: 6px; }

.btn--outline-cream {
  border: 1px solid var(--cream-30);
  color: var(--cream);
}

.btn--outline-cream:hover {
  border-color: var(--cream);
  color: var(--cream);
}

/* Facts bar — three hairline-divided cells pinned to the panel foot, standing
   in for the old green info tile. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid var(--cream-16);
}

.hero-fact {
  padding: clamp(18px, 2.6vh, 28px) 20px clamp(18px, 2.6vh, 28px) 0;
}

.hero-fact + .hero-fact {
  padding-left: 20px;
  border-left: 1px solid var(--cream-16);
}

.hero-fact dt {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-55);
  margin-bottom: 8px;
}

.hero-fact dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.3;
}

.hero-fact dd a { color: var(--cream); }
.hero-fact dd a:hover { color: var(--cream-72); }

/* The photograph fills its column; absolute so its 4:5 intrinsic ratio can
   never stretch the hero taller than the viewport-height the grid asks for. */
.hero-img {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}

.hero-img picture {
  position: absolute;
  inset: 0;
}

/* Under ~900px (the desktop document can still be windowed this narrow even
   though phones get /m) the split stacks: copy first, photo beneath it. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-img {
    position: relative;
    min-height: 70vw;
  }
  .hero-facts { grid-template-columns: 1fr; border-top: 0; }
  .hero-fact,
  .hero-fact + .hero-fact {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--cream-16);
  }
}

/* Cover images that fill their cell. The hero's pictures are absent here:
   they are positioned by inset:0 above, so width/height would fight it. */
.room-img picture,
.find-img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-img img,
.room-img img,
.find-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   8. Credentials strip
   -------------------------------------------------------------------------- */

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 15px 28px;
  background: var(--ink);
  color: var(--cream-66);
  border-top: 1px solid var(--cream-12);
}

.strip-sep { color: var(--cream-30); }

/* The track wrappers vanish from layout entirely, the loop separator
   and the duplicate track do not render — the strip is exactly the bare row
   of spans it always was. */
.strip-track { display: contents; }

.strip-sep--loop,
.strip-track--dup { display: none; }

/* --------------------------------------------------------------------------
   9. Menu
   -------------------------------------------------------------------------- */

.menu-wrap {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 52px);
}

.menu-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 22px;
}

.menu-head-title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--ink-20);
}

.tab {
  padding: 12px 20px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--ink-60);
  transition: background 140ms ease, color 140ms ease;
}

.tab.is-active {
  background: var(--ink);
  color: var(--cream);
}

.menu-panel {
  display: grid;
  /* min() keeps the 300px track from overflowing viewports narrower than it. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
}

/* .menu-panel sets display:grid, which would override the UA rule for
   [hidden]. Restate it so the inactive panel really is hidden. */
.menu-panel[hidden] { display: none; }

.menu-col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-name {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.25;
}

.item-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-60);
}

.item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.item-head .item-name { flex: 1 1 auto; }

.item-price {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-60);
  white-space: nowrap;
}

.menu-intro {
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-60);
}

/* No font-family here on purpose: the prototype's tag span declares none and
   so inherits Newsreader from the item name. The README's type table says
   Helvetica, but the README itself gives the prototype precedence.

   The colour is the one place this build departs from a specified value.
   The handoff's rgba(23,20,15,0.45) is 2.9:1 on cream — the worst contrast
   on the page, on the only dietary information it carries. Unlike the accent,
   the handoff's accessibility note never weighed this pairing. --ink-60 is
   4.6:1, is already the page's secondary-text tone, and leaves the tag
   subordinate through its 11px size and tracking. See README. */
.tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* Four across, stated explicitly. The handoff's auto-fit minmax(200px, 1fr)
   only yields four tracks once the container clears 806px — i.e. a viewport
   of ~896px — so between 640 and 896 it silently dropped the fourth photo
   onto a row of its own. The 2px gap is a hairline, not a gutter. */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.photo-strip picture,
.coffee-pair picture { display: block; }

/* height:auto is load-bearing. The width/height attributes on these <img>
   tags apply as presentational hints, and once BOTH dimensions resolve the
   browser ignores aspect-ratio — which rendered these 294x1350 instead of
   294x367. Unsetting the height hint hands control back to aspect-ratio. */
.photo-strip img,
.coffee-pair img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   10. The room
   -------------------------------------------------------------------------- */

.room {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  background: var(--green);
  color: var(--cream);
}

.room-img {
  overflow: hidden;
  min-height: 420px;
}

.room-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: clamp(36px, 5vw, 84px);
}

.body-on-dark {
  font-size: 15px;
  line-height: 1.75;
  color: var(--cream-82);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   11. Coffee
   -------------------------------------------------------------------------- */

.coffee-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 72px);
  align-items: end;
}

.coffee-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.coffee-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--cream-72);
  max-width: 44ch;
}

.coffee-cta { align-self: flex-start; }

.coffee-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* --------------------------------------------------------------------------
   12. Find us
   -------------------------------------------------------------------------- */

.find-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.find-copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.find-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.7;
}

.find-hours { color: var(--ink-60); }

.rating {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--ink-20);
  padding-top: 22px;
}

.rating-figure {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
}

.rating-caption {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-60);
}

.find-img {
  overflow: hidden;
  min-height: 340px;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 34px var(--pad-inline);
  background: var(--ink);
  color: var(--cream-60);
}

.footer-wordmark {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--cream);
}

/* The footer address and the Instagram link are otherwise pixel-identical,
   so nothing marks the link as a link (WCAG 1.4.1) — hence the faint
   underline. */
.footer a {
  padding: 6px 0;
  color: var(--cream-60);
  text-decoration: underline;
  text-decoration-color: var(--cream-30);
  text-underline-offset: 3px;
}

.footer a:hover { text-decoration-color: var(--cream); }

.footer a:hover { color: var(--cream); }

/* --------------------------------------------------------------------------
   13.5 Booking dialog
   The phone page's booking sheet — shared markup and assets/js/book.js —
   drawn as a centred dialog in this page's own type and tokens. Square, no
   shadow, and its only motion is a 140ms fade, the page's one timing.
   The script hides the sheet 360ms after closing; opacity and pointer-events
   hand it back to the page at once, so nothing waits on that.
   -------------------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 10, 8, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.sheet {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 61;
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  color: var(--ink);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.scrim.is-up,
.sheet.is-up {
  opacity: 1;
  pointer-events: auto;
}

/* The form and the confirmation are flex boxes, which would otherwise beat
   the [hidden] attribute the script toggles between them. */
.sheet [hidden] { display: none !important; }

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 34px 0;
}

.sheet-kicker {
  padding-top: 14px;
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--green);
}

.sheet-close {
  width: 44px;
  height: 44px;
  margin: 0 -12px 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-60);
}

.sheet-close:hover { color: var(--ink); }

.sheet-form,
.sheet-done {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 6px 34px 34px;
}

.sheet-title,
.sheet-done-title {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.sheet-title { font-size: 38px; }
.sheet-done-title { font-size: 42px; }

.sheet-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sheet-label {
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.sheet-days {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sheet-times {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.sheet-party {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}

.sheet-chip {
  min-height: 42px;
  padding: 0 14px;
  background: none;
  border: 1px solid var(--ink-20);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
}

.sheet-times .sheet-chip,
.sheet-party .sheet-chip { padding: 0; }

.sheet-chip:hover:not(:disabled) { border-color: var(--ink); }

.sheet-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

.sheet-chip:disabled {
  color: var(--ink-28);
  border-color: rgba(23, 20, 15, 0.1);
  cursor: default;
}

.sheet-optional {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--ink-60);
}

.sheet-input {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  background: none;
  border: 1px solid var(--ink-28);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.sheet-input:focus { border-color: var(--ink); }

.sheet-submit {
  min-height: 54px;
  background: var(--ink);
  color: var(--cream);
  border: 0;
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* The same flip as .btn--ink. */
.sheet-submit:hover:not(:disabled) {
  background: var(--accent, #c8451c);
  color: var(--ink);
}

.sheet-submit:disabled {
  opacity: 0.55;
  cursor: default;
}

.sheet-wait {
  width: 100%;
  min-height: 50px;
  background: none;
  border: 1px solid var(--ink-28);
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.sheet-wait:hover { border-color: var(--ink); }

.sheet-note,
.sheet-error {
  font-size: 13px;
  line-height: 1.65;
}

.sheet-note { color: var(--ink-60); }
.sheet-error { color: #7a1f2b; }

.sheet-note a,
.sheet-error a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}

.sheet-done { gap: 18px; }

.sheet-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
}

.sheet-summary-line {
  font-family: var(--serif);
  font-size: 24px;
}

.sheet-summary-place {
  font-size: 13px;
  color: var(--ink-60);
}

.sheet-done-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-60);
}

.sheet-done-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sheet-btn {
  display: grid;
  place-items: center;
  min-height: 52px;
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.sheet-btn--wide,
.sheet-btn--ghost {
  border: 1px solid var(--ink-28);
  background: none;
  color: var(--ink);
}

.sheet-btn--wide:hover,
.sheet-btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.sheet-btn--green {
  border: 0;
  background: var(--green);
  color: var(--cream);
}

.sheet-btn--green:hover {
  background: var(--ink);
  color: var(--cream);
}

/* A narrow desktop window: three times to a row, and a tighter gutter. */
@media (max-width: 600px) {
  .sheet-head { padding: 18px 20px 0; }
  .sheet-form,
  .sheet-done { padding: 6px 20px 24px; }
  .sheet-times { grid-template-columns: repeat(3, 1fr); }
  .sheet-title { font-size: 32px; }
}

/* --------------------------------------------------------------------------
   14. Motion & print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  /* Reset colour on every element, not just the containers. Roughly a dozen
     descendants declare their own cream tone (.body-on-dark, .coffee-body,
     .label-muted, .footer a and so on); resetting
     only their parents left them near-white on white paper. */
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    border-color: #999 !important;
    text-decoration: none !important;
  }

  body { background: #fff !important; }

  .site-head,
  .btn-row,
  .tabs,
  .photo-strip,
  .hero-img,
  .room-img,
  .find-img,
  .coffee-pair,
  .skip-link { display: none !important; }

  .footer { padding-bottom: 12pt !important; }

  /* Both services print — a printed menu that hides half the kitchen is no use. */
  .menu-panel[hidden] { display: grid !important; }

  .section,
  .hero-text,
  .room-text { padding: 12pt 0; }

  /* Keep a group with its items, and never orphan a heading at a page foot. */
  .group,
  .item { break-inside: avoid; }

  h1, h2, h3 { break-after: avoid; }
}