/* Hallmark · genre: editorial · macrostructure: Photographic · theme: custom · enrichment: real photography · nav: N6 · footer: Ft1
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * Blue Door Cafe — page styles. Tokens live in tokens.css; nothing here declares a raw colour or font-family. */

@import url("/fonts/fonts.css");
@import url("/css/tokens.css");

/* ============================================================ base ==== */

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

html, body {
  /* clip, not hidden: hidden on the root turns the page into a scroll
     container and breaks position: sticky inside it. */
  overflow-x: clip;
  margin: 0;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-body);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;                 /* roman only — no italic headings */
  color: var(--color-blue);
  font-weight: 500;
  line-height: var(--leading-tight);
  margin: 0;
  overflow-wrap: anywhere;            /* long words can't push the page wide */
  min-width: 0;
}

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

img { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  /* never transitioned — the ring must appear the instant focus lands */
}

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

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

.skip-link {
  position: absolute; left: var(--space-md); top: var(--space-md);
  transform: translateY(-200%);
  background: var(--color-blue); color: var(--color-band-ink);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display); text-decoration: none; z-index: 100;
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- shared layout helpers ---- */

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 58rem; }

.label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-neutral);
}

/* ---- links + buttons ---- */

a { color: var(--color-accent-ink); }

.link {
  color: var(--color-accent-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 1px;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.link:hover { background: var(--color-accent-soft); }

/* The button voice is a printed chip: square-ish, hairline, no gradient. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;                        /* touch target floor */
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;                     /* a CTA never wraps to two lines */
  border: var(--rule-hair) solid currentColor;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

.btn--solid {
  background: var(--color-blue);
  color: var(--color-band-ink);
  border-color: var(--color-blue);
}
.btn--solid:hover { background: var(--color-blue-deep); border-color: var(--color-blue-deep); }

.btn--ghost { background: transparent; color: var(--color-blue); }
.btn--ghost:hover { background: var(--color-paper-3); }

/* On the dark bands the chip inverts. */
.on-band .btn--solid {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}
.on-band .btn--solid:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.on-band .btn--ghost { color: var(--color-band-ink); border-color: var(--color-band-rule); }
.on-band .btn--ghost:hover { background: var(--color-band-hover); border-color: var(--color-band-ink); }
.on-band :focus-visible, .footer :focus-visible, .dock :focus-visible { outline-color: var(--color-focus-on-band); }

/* ======================================================== masthead ==== */
/* N6 newspaper masthead: issue line, large centred wordmark, dateline,
 * nav row, double rule. The issue line is where "are they open?" lives. */

.masthead {
  background: var(--color-paper);
  border-bottom: 3px double var(--color-rule-2);
}

.issue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.issue a { color: inherit; text-decoration: none; }
.issue a:hover { color: var(--color-accent-ink); }
.issue__group { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }

/* Open/closed: a dot plus words. Never colour alone. */
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 500; }
.status__dot {
  inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-pill);
  background: var(--color-closed); flex: none;
}
.status--open { color: var(--color-open); }
.status--open .status__dot { background: var(--color-open); }
.status--closed { color: var(--color-closed); }

.masthead__plate { padding-block: var(--space-lg) var(--space-md); text-align: center; }

.wordmark {
  display: block;
  overflow-wrap: anywhere;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-wordmark);
  font-weight: 500;
  line-height: 1.04;                      /* caps display floor */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
  text-decoration: none;
  margin: 0;
}
a.wordmark:hover { color: var(--color-blue-deep); }

.dateline {
  margin: var(--space-sm) auto 0;
  max-width: 44rem;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.dateline__sep { color: var(--color-accent); padding-inline: var(--space-2xs); }

.mastnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-sm) var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.mastnav__link {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
}
.mastnav__link:hover,
.mastnav__link[aria-current="page"] { border-bottom-color: var(--color-accent); }

/* ============================================================ folds ==== */

.fold { margin-block: 0; }

/* Full-bleed photograph. The image edge is the divider — no rules here. */
.photoband { margin-block: 0; }
.photoband__fig { margin: 0; }
.photoband__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-paper-3);
}
.photoband--tallish .photoband__img { aspect-ratio: 16 / 11; }
/* Capped so the door's focal point and the masthead CTA share the first fold on a 13" laptop. */
.photoband--hero .photoband__img { aspect-ratio: 16 / 9; max-height: 70svh; }

@media (max-width: 40rem) {
  .photoband--hero .photoband__img { aspect-ratio: 4 / 3; }
}

/* Caption sits under the image, hard left, small caps with an amber dot. */
.photoband__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.photoband__cap-text {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.photoband__cap-text::before {
  content: "";
  display: inline-block;
  inline-size: 0.4rem; block-size: 0.4rem;
  margin-inline-end: var(--space-xs);
  background: var(--color-accent);
  vertical-align: 0.12em;
}
.credit { font-size: var(--text-xs); color: var(--color-neutral); }

/* Two photographs side by side — the only grid on the page, and its tracks
   are minmax(0, 1fr) so a wide image can't force horizontal scroll. */
.photopair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rule-bold);
}
.photopair .photoband__img { aspect-ratio: 4 / 3; }
@media (max-width: 40rem) {
  .photopair { grid-template-columns: minmax(0, 1fr); }
}

/* ---- narrow text band between photographs ---- */

.textband { padding-block: var(--space-3xl); }
.textband--tinted { background: var(--color-paper-2); }

/* Asymmetric: the lede sits in the left 7 of 12, never centred. */
.lede-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 60rem) {
  .lede-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

.display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
  font-weight: 500;
  text-wrap: balance;
}
.display--s { font-size: var(--text-display-s); }

.lede {
  font-size: var(--text-md);
  line-height: 1.55;
  max-width: var(--measure);
  margin-top: var(--space-lg);
  color: var(--color-ink);
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--space-md); }

.aside-card {
  border-top: var(--rule-bold) solid var(--color-blue);
  padding-top: var(--space-md);
}
.aside-card__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.aside-card__list li {
  display: flex; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
}
.aside-card__list dt, .aside-card__list .k { color: var(--color-muted); }

/* ======================================================= today strip == */
/* The one element that answers "are you open, where are you, can I order?"
 * without scrolling past a single fold. */

.today { background: var(--color-band); color: var(--color-band-ink); }
.today__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
  padding-block: var(--space-lg);
}
.today__cell + .today__cell {
  border-inline-start: var(--rule-hair) solid var(--color-band-rule);
  padding-inline-start: var(--space-xl);
}
@media (max-width: 60rem) {
  .today__cell + .today__cell {
    border-inline-start: 0; padding-inline-start: 0;
    border-block-start: var(--rule-hair) solid var(--color-band-rule);
    padding-block-start: var(--space-md);
  }
}
.today__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-band-muted);
  margin-bottom: var(--space-2xs);
}
.today__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.16;
  color: var(--color-band-ink);
}
.today__value a { color: inherit; text-decoration: none; border-bottom: 2px solid var(--color-accent); }
.today__note { font-size: var(--text-sm); color: var(--color-band-muted); margin-top: var(--space-2xs); }
.today__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.today .status--open { color: var(--color-open-on-band); }
.today .status--open .status__dot { background: var(--color-open-on-band); }
.today .status--closed { color: var(--color-closed-on-band); }
.today .status--closed .status__dot { background: var(--color-closed-on-band); }

/* A notice the owner can switch on: summer hours, holiday closure, sold out. */
.notice {
  background: var(--color-accent-soft);
  color: var(--color-ink);
  border-block: var(--rule-hair) solid var(--color-accent);
}
.notice__inner {
  display: flex; gap: var(--space-sm); align-items: baseline;
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
}
.notice__tag {
  font-family: var(--font-display); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-accent-ink); flex: none;
}

/* ==================================================== signature items = */
/* A tall photograph beside a typeset list. Not a three-column icon grid. */

.pairing {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
.pairing--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pairing--flip > :first-child { order: 2; }
@media (max-width: 60rem) {
  .pairing, .pairing--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .pairing--flip > :first-child { order: 0; }
}

.pairing__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-paper-3);
}
.pairing__fig { margin: 0; }
.pairing__fig figcaption { padding-top: var(--space-xs); }

/* The signature list: name, leader dots, price. Reads like a printed menu. */
.dishes { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.dishes > li { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.dishes > li:first-child { border-top: var(--rule-hair) solid var(--color-rule); }

.dish__head {
  display: flex; align-items: baseline; gap: var(--space-sm);
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-lg); line-height: 1.2;
  color: var(--color-blue);
}
.dish__name { min-width: 0; overflow-wrap: anywhere; }
.dish__dots {
  flex: 1 1 auto;
  min-width: var(--space-lg);
  border-bottom: var(--rule-hair) dotted var(--color-rule-2);
  transform: translateY(-0.28em);
}
.dish__price { flex: none; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.dish__price::before { content: "$"; color: var(--color-neutral); margin-inline-end: 0.08em; }
.dish__price--plain::before { content: none; }
.dish__price--add::before { content: "+$"; }
.dish__desc { margin-top: var(--space-2xs); color: var(--color-muted); max-width: var(--measure); }
.dish__note {
  margin-top: var(--space-2xs);
  font-family: var(--font-display); font-size: var(--text-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-ink);
}
.dish__from {
  font-family: var(--font-display); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-neutral);
}

/* ========================================================= menu cards = */
/* Two menus, typeset as a pair of sheets. Links to the digital menu and to
 * the printable PDF the cafe already had — both kept reachable. */

.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.sheet {
  border-top: var(--rule-bold) solid var(--color-blue);
  padding-top: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.sheet__title { font-size: var(--text-xl); }
.sheet__served {
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-ink);
}
.sheet__blurb { color: var(--color-muted); }
.sheet__links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: auto; padding-top: var(--space-sm); }

/* ========================================================== reviews === */

.quote-lead { max-width: 100%; margin: 0; }
.quote-lead blockquote {
  margin: 0;
  font-size: clamp(1.4rem, 1rem + 1.25vw, 2.1rem);
  line-height: 1.3;
  max-width: 34ch;
  font-weight: 400;
  color: var(--color-ink);
  text-wrap: pretty;
}
/* The opening quote mark is drawn in amber and hung into the margin. */
.quote-lead blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 3em;
  line-height: 0.55;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}
.quote-lead figcaption { margin-top: var(--space-md); }

.byline { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.byline strong { color: var(--color-ink); font-weight: 500; }

.stars { display: inline-flex; gap: 0.1em; color: var(--color-accent); letter-spacing: 0; }
.stars svg { inline-size: 0.95em; block-size: 0.95em; fill: currentColor; }

.rating-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted);
}
.rating-line__score { font-size: var(--text-lg); color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* Remaining reviews: uneven two-column flow, hairline separated, no cards. */
.notes {
  margin-top: var(--space-2xl);
  columns: 2;
  column-gap: var(--space-2xl);
  column-rule: var(--rule-hair) solid var(--color-rule);
}
@media (max-width: 60rem) { .notes { columns: 1; column-rule: none; } }
.note { break-inside: avoid; margin: 0 0 var(--space-lg); padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.note:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.note blockquote { margin: 0 0 var(--space-sm); color: var(--color-ink); }

/* ================================================ hours and location == */

.week { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.week th, .week td { text-align: left; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.week th {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted); white-space: nowrap;
}
.week td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.week tr[data-today] th, .week tr[data-today] td { color: var(--color-ink); font-weight: 600; }
.week tr[data-today] th::after {
  content: "today"; display: inline-block; margin-inline-start: var(--space-xs);
  font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  color: var(--color-accent-ink); font-weight: 500;
}
.week td[data-closed] { color: var(--color-neutral); font-weight: 400; }

.addr { font-style: normal; font-size: var(--text-md); line-height: 1.45; }
.addr__phone { font-variant-numeric: lining-nums tabular-nums; }

.map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: var(--rule-hair) solid var(--color-rule-2);
  background: var(--color-paper-3);
  display: block;
}
@media (min-width: 60rem) { .map { aspect-ratio: 5 / 4; } }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ========================================================= filmstrip == */
/* The photographs that don't get a full band. A scrolling strip, not a grid:
 * it reads as a contact sheet and costs no vertical space. */

.filmstrip {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  padding-block: var(--space-md) var(--space-lg);
  /* let the strip bleed to the right edge while staying inside the wrap */
  margin-inline-end: calc(var(--gutter) * -1);
  padding-inline-end: var(--gutter);
  scrollbar-width: thin;
}
.filmstrip__item { flex: 0 0 auto; inline-size: min(20rem, 72vw); scroll-snap-align: start; margin: 0; }
.filmstrip__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-paper-3); }
.filmstrip__item figcaption { padding-top: var(--space-xs); }

/* =========================================================== footer === */
/* Ft1 mast-headed: the wordmark anchors one band, practical columns beside. */

.footer {
  background: var(--color-band);
  color: var(--color-band-ink);
  padding-block: var(--space-3xl) var(--space-xl);
  margin-top: 0;
}
.footer a { color: var(--color-band-ink); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 60rem) { .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

.footer .wordmark { color: var(--color-band-ink); font-size: var(--text-2xl); text-align: left; }
.footer__tagline { color: var(--color-band-muted); margin-top: var(--space-xs); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-lg) var(--space-xl);
}
.footer__head {
  font-family: var(--font-display); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-band-muted); margin-bottom: var(--space-xs);
}
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { padding-block: 2px; }
.footer__list a { text-decoration: none; border-bottom: var(--rule-hair) solid transparent; }
.footer__list a:hover { border-bottom-color: var(--color-accent); }

.footer__rule { border: 0; border-top: var(--rule-hair) solid var(--color-band-rule); margin-block: var(--space-2xl) var(--space-lg); }
.colophon {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg);
  font-size: var(--text-xs); color: var(--color-band-muted);
}
.colophon a { color: var(--color-band-muted); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-band-rule); }
.colophon a:hover { color: var(--color-band-ink); }

/* ================================================= sticky mobile CTA == */
/* C4. Phones only: the two things a hungry visitor taps. */

.dock {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: 40;
  display: none;
  gap: var(--rule-hair);
  background: var(--color-band-rule);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -1px 0 var(--color-band-rule);
}
.dock__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  background: var(--color-band); color: var(--color-band-ink);
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  border: 0;
}
.dock__btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); }
@media (max-width: 48rem) {
  .dock { display: flex; }
  body { padding-bottom: 52px; }
}

/* =================================================== the menu page ==== */

.menu-head { padding-block: var(--space-2xl) var(--space-lg); }

/* Segmented control. Radio inputs so it works with no JS and keyboard-wise;
 * CSS :has() does the filtering, so there is no scroll jump on select. */
.segmented {
  display: inline-flex;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-paper);
}
/* Radios stay in flow at zero size (not position: absolute): focusing one on a
   label click then scrolls to the control itself, never to the top of the page. */
.segmented input { position: static; inline-size: 0; block-size: 0; margin: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.segmented label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: var(--space-lg);
  font-family: var(--font-display); font-size: var(--text-sm);
  letter-spacing: 0.09em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  color: var(--color-muted);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.segmented label + input + label { border-inline-start: var(--rule-hair) solid var(--color-rule-2); }
.segmented label:hover { background: var(--color-paper-3); color: var(--color-ink); }
.segmented label:active { background: var(--color-rule); }
.segmented input:checked + label { background: var(--color-blue); color: var(--color-band-ink); }
.segmented input:focus-visible + label { outline: 3px solid var(--color-focus); outline-offset: -3px; }

.menu-sheet { padding-bottom: var(--space-3xl); }
/* Hide the sheet whose radio is not checked. Both stay in the DOM, so search
   engines and printers see the whole menu. */
body:has(#tab-breakfast:checked) .menu-sheet[data-menu="lunch"],
body:has(#tab-lunch:checked)     .menu-sheet[data-menu="breakfast"] { display: none; }

.menu-sheet__head { padding-block: var(--space-xl) var(--space-lg); border-bottom: 3px double var(--color-rule-2); }
.menu-sheet__served {
  font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  font-size: var(--text-sm); color: var(--color-accent-ink);
}

/* Two columns of courses on wide screens, like an open menu. */
.courses { columns: 2; column-gap: var(--space-3xl); margin-top: var(--space-xl); }
@media (max-width: 60rem) { .courses { columns: 1; } }

.course { break-inside: avoid-column; margin-bottom: var(--space-2xl); }
.course__title {
  font-size: var(--text-xl);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-bold) solid var(--color-blue);
}
.course__note { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* The compact layout: short names and prices, two per row. */
.course--compact .dishes > li { padding-block: var(--space-xs); }
.course--compact .dish__head { font-size: var(--text-base); }
.course--compact .dish__desc { font-size: var(--text-sm); }

.footnote {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: var(--measure);
}

/* ============================================================ motion == */
/* One orchestrated entrance, opacity only, and only on the photographs —
 * the Photographic macrostructure asks the pictures to do the work, not the
 * transitions. Nothing here gates content: if the JS never runs or the
 * observer never fires, `.reveal` elements are already visible. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
  .js .reveal.is-in { opacity: 1; }
}

/* ============================================================= print == */

@media print {
  .masthead .mastnav, .dock, .today__actions, .actions, .map,
  .filmstrip, .photoband, .photopair, .pairing__fig, .segmented, .skip-link { display: none !important; }
  body { font-size: 10.5pt; padding-bottom: 0; }
  .menu-sheet[data-menu] { display: block !important; break-before: page; }
  .menu-sheet:first-of-type { break-before: avoid; }
  .courses { columns: 2; }
  h1, h2, h3, a { color: var(--color-ink); }
  a { text-decoration: none; }
  .footer { background: var(--color-paper); color: var(--color-ink); }
}