/* restauranthendrik.nl
   A natural evolution of their own printed identity: the ivory ground, the brand red,
   the arched wordmark, letterspaced small-cap labels, hairline rules, dotted leaders on
   prices, and their engraved ornaments. Nothing here is decoration for its own sake.

   Palette per the brand book (ÉTEL, 2022) since 1 Oct 2026: HENDRIK Rood RGB 177/32/40
   (Pantone 7621 C), HENDRIK Zwart 35/31/32, HENDRIK Wit #F9FAF5. Every other colour here is
   a tint of those three. Type: Cormorant Garamond self-hosted (SIL OFL), body in the Semi
   Bold the book prescribes; the small-cap labels stand in for Sackers Gothic, which has no
   web licence. See docs/business.md. */

:root {
  --ivory:      #f9faf5;
  --paper:      #ffffff;
  --ink:        #231f20;
  --ink-strong: #231f20;
  --ink-soft:   #5f5b5a;
  --red:        #b12028;
  --red-deep:   #8e1a20;
  --red-wash:   #f3e9e5;
  --rule:       rgba(35, 31, 32, 0.14);
  --rule-red:   rgba(177, 32, 40, 0.45);

  --serif: "Cormorant Garamond", Cormorant, Garamond, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
          sans-serif;

  --wrap: 76rem;
  --gap: clamp(1.5rem, 4vw, 3.5rem);
  --band: clamp(3.5rem, 8vw, 7rem);
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 0.4vw + 1.05rem, 1.28rem);
  font-weight: 600;
  line-height: 1.62;
  font-variant-numeric: oldstyle-num;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--red-deep); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
p { margin: 0 0 1em; }
.thin { display: block; font-weight: 500; font-style: italic; color: var(--ink-soft);
        font-size: 0.52em; letter-spacing: 0; margin-top: 0.5em; }

.sr, .skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 0.5rem; left: 0.5rem; width: auto; height: auto; clip: auto;
  background: var(--red); color: var(--ivory); padding: 0.6rem 1rem; z-index: 60;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2.5rem, 46rem); }

/* ---------------------------------------------------------------- the label voice
   Their print sets every section header in letterspaced small caps (Sackers Gothic).
   We keep the gesture in a system grotesque rather than impersonate a licensed face. */
.label, .kicker, .btn, .site-nav a, .crumbs, .card-legal, .year, .foot-legal, .lang {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  font-size: 0.68rem;
  line-height: 1.5;
}
.label { color: var(--ink-strong); margin: 0 0 0.9rem; }
.kicker { color: var(--red); margin: 0 0 0.7rem; }
.kicker.spaced { margin-top: 1.6rem; }
.year { color: var(--red); margin: 0 0 0.35rem; }

.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.section-sub { color: var(--ink-soft); font-style: italic; margin: 0; }
.lead { font-size: 1.22em; font-style: italic; font-weight: 500; color: var(--ink-soft); line-height: 1.5;
        text-wrap: pretty; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-block; padding: 0.85em 1.5em; border: 1px solid var(--red);
  text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--red); color: var(--ivory); }
.btn-primary:hover { background: var(--red-deep); border-color: var(--red-deep);
                     color: var(--ivory); }
.btn-ghost { background: transparent; color: var(--red); }
.btn-ghost:hover { background: var(--red); color: var(--ivory); }
.btn.block { display: block; text-align: center; }
.btn-short { display: none; }

/* The floating booking button: phones only, where the header has no room for it. */
.book-float { display: none; }
@media (max-width: 47rem) {
  .book-float {
    display: block; position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
    background: var(--red); color: var(--ivory); text-decoration: none;
    font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.15em;
    font-weight: 600; font-size: 0.7rem; padding: 0.95em 1.4em;
    border: 1px solid var(--red-deep);
    box-shadow: 0 2px 14px rgba(4, 4, 4, 0.22);
  }
  .book-float:active { background: var(--red-deep); color: var(--ivory); }
  /* keep the last footer line clear of the floating button */
  .site-foot { padding-bottom: 5.5rem; }
}
.more { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.14em;
        font-size: 0.7rem; font-weight: 600; text-decoration: none; }
.more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header
   Row 1 is brand-level. Row 2 is the LOCATION SWITCHER: the owners want the house you are
   looking at to be unmistakable, so it sits under the wordmark with a real active state.
   Row 3 is that house's own pages, on venue pages only. */
.site-head {
  position: sticky; top: 0; z-index: 40; background: var(--ivory);
  border-bottom: 1px solid var(--rule);
}
.head-inner {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  /* minmax(0, 1fr) on BOTH sides, never plain 1fr: a plain 1fr track grows to fit its
     content, so the wider side (the booking button) pushes the wordmark off the viewport
     centre. With a 0 minimum the two side tracks are always equal and the centre column IS
     the middle of the viewport, at every width and in both nav modes. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 1rem; padding: 0.7rem 0 0;
}
/* Every item names its row. Without this, grid auto-placement pushes the nav and the right
   group onto a SECOND row (the wordmark claims row 1 column 2, and the cursor cannot go
   back to column 1), which is what put the menu on a lower axis than the logo. */
.head-inner > * { grid-row: 1; }
.brand { grid-column: 2; justify-self: center; }
.brand img { width: clamp(8.5rem, 14vw, 11.5rem); }
.site-nav { grid-column: 1; display: flex; flex-wrap: nowrap; gap: 1.15rem; }
.site-nav a { color: var(--ink-strong); text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--red); }
.head-right { grid-column: 3; justify-self: end; display: flex; align-items: center;
              gap: 0.9rem; }
.lang { color: var(--ink-soft); text-decoration: none; }
.lang:hover { color: var(--red); }
.head-right .btn { padding: 0.65em 1.1em; white-space: nowrap; }
.burger { display: none; }

.switch-bar {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  margin-top: 0.5rem; padding-bottom: 0.5rem;
}
.switch { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.switch-sep { color: var(--rule-red); font-size: 0.45rem; }
.switch-chip {
  display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none;
  padding: 0.12rem 0.8rem; border: 1px solid transparent; border-radius: 2px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 600; font-size: 0.68rem; color: var(--ink-soft);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
/* The crests are never faded: the brand book forbids transparency on its graphics. The
   inactive restaurant is told apart by its text colour and the missing box, not by a dim crest. */
.switch-chip img { width: 3.6rem; }
.switch-chip:hover { color: var(--red); }
.switch-chip.is-active {
  color: var(--red); background: var(--red-wash); border-color: var(--rule-red);
}

.venue-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.4rem;
  margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--rule);
}
.venue-nav a {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 600; font-size: 0.62rem; color: var(--ink-soft); text-decoration: none;
  padding: 0.15rem 0; white-space: nowrap;
}
.venue-nav a:hover { color: var(--red); }
.venue-nav a[aria-current] { color: var(--ink-strong); border-bottom: 1px solid var(--red); }

@media (max-width: 47rem) {
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    grid-column: 1; justify-self: start; width: 2.4rem; height: 2.4rem;
    padding: 0; border: 0; background: none; cursor: pointer;
  }
  .burger span { display: block; width: 1.5rem; height: 1px; background: var(--ink-strong); }
  .site-nav {
    grid-column: 1 / -1; grid-row: 2; display: none; flex-direction: column; gap: 0;
    border-top: 1px solid var(--rule); padding-top: 0.5rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
  .head-right .btn { display: none; }
  .switch { gap: 0.5rem; }
  .switch-chip { padding: 0.1rem 0.5rem; letter-spacing: 0.12em; }
  .switch-chip img { width: 3rem; }
}
@media (max-width: 66rem) {
  /* Below a roomy header the booking button drops the venue name. The switcher directly
     under the wordmark already says which house you are in, so nothing is lost. */
  .btn-long { display: none; }
  .btn-short { display: inline; }
}
@media (max-width: 66rem) and (min-width: 47.01rem) {
  /* between a small laptop and a tablet, buy room from the gaps rather than wrap */
  .head-inner { gap: 0.7rem; }
  .site-nav { gap: 0.85rem; }
  .site-nav a, .lang { font-size: 0.62rem; letter-spacing: 0.13em; }
  .head-right { gap: 0.6rem; }
  .head-right .btn { padding: 0.6em 0.8em; font-size: 0.6rem; }
}
@media (max-width: 30rem) {
  /* On a phone the side tracks are only ~85px wide, and EN plus the booking button do not
     fit in that without pushing into the wordmark. The language toggle moves into the
     burger menu, where it belongs anyway, and the button gets one size smaller. */
  .switch-chip span { font-size: 0.6rem; }
  .switch-chip img { width: 2.6rem; }
  .venue-nav { gap: 0 0.9rem; }
}

/* ---------------------------------------------------------------- hero
   Deliberately short: the two photographs below it are the point, and the owners want a
   visitor to see at a glance that Hendrik is two houses. */
.hero { padding: clamp(1.2rem, 2.5vw, 2rem) 0 clamp(0.8rem, 1.5vw, 1.2rem);
         text-align: center; }
.hero-mark { width: min(92%, 20rem); margin: 0 auto clamp(0.7rem, 1.5vw, 1rem); }
.hero h1 {
  font-size: clamp(1.35rem, 2.6vw, 2.05rem); font-weight: 500; font-style: italic;
  color: var(--ink-strong); max-width: 24ch; margin: 0 auto 0.45em;
}
.hero-lead { max-width: 52ch; margin: 0 auto; color: var(--ink-soft); font-style: italic;
             font-size: 1.02em; }
/* Two buttons straight under the heading wherever the two photo cards stack (Sjoerd's ask
   for phones): the crest and the name of each restaurant, one tap to its page. */
.hero-doors { display: none; }
@media (max-width: 60rem) {
  .hero-doors { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap;
                margin: 1.2rem auto 0; }
  .hero-doors a {
    flex: 1 1 0; justify-content: center; max-width: 16rem;
    display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none;
    border: 1px solid var(--red); color: var(--red); background: var(--paper);
    padding: 0.55rem 1rem 0.55rem 0.7rem; font-family: var(--sans); text-transform: uppercase;
    letter-spacing: 0.15em; font-weight: 600; font-size: 0.7rem;
  }
  .hero-doors a:active { background: var(--red); color: var(--ivory); }
  .hero-doors img { width: 3.8rem; }
}
@media (max-width: 47rem) {
  /* the sticky header already carries the wordmark; on a phone once is enough */
  .hero-mark { display: none; }
  .hero { padding-top: 1.4rem; }
}

/* ---------------------------------------------------------------- bands */
.band { padding: var(--band) 0; border-top: 1px solid var(--rule); }
.band--doors { border-top: 0; padding: clamp(1rem, 2vw, 1.6rem) 0 var(--band); }
.hero-cue { display: block; color: var(--red); margin-top: 0.35rem; }
.band--mill { background: var(--red-wash); border-top: 1px solid var(--rule-red);
              border-bottom: 1px solid var(--rule-red); }
.band-more { margin-top: 2rem; }

/* the two doors */
.door-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 60rem) { .door-grid { grid-template-columns: minmax(0, 1fr); } }
.door { background: var(--paper); border: 1px solid var(--rule); display: flex;
        flex-direction: column; }
.door-media { display: block; overflow: hidden; }
.door-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
                  transition: transform 0.5s ease; }
.door:hover .door-media img { transform: scale(1.02); }
.door-body { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column;
             flex: 1; }
.crest { width: 10rem; margin: 0 0 1.1rem; }  /* a size up again, 6 Oct 2026 */
.door-body .crest { width: 9.5rem; }
.door h3 { margin-bottom: 0.2em; }
.door h3 a { color: var(--ink-strong); text-decoration: none; }
.door h3 a:hover { color: var(--red); }
.door-intro { color: var(--ink-soft); }
.door-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
             margin-top: auto; padding-top: 1rem; font-size: 0.92em; }
.door-address { color: var(--ink-soft); }
.door-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 0; }

/* the open/closed chip, filled by app.js */
.open-chip { display: inline-flex; align-items: center; gap: 0.5rem;
             font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.12em;
             font-size: 0.66rem; font-weight: 600; color: var(--ink-soft); }
.open-chip .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%;
                  background: var(--ink-soft); }
.open-chip.is-open .dot { background: #2f7a3d; }
.open-chip.is-open { color: #2f7a3d; }
.open-chip.big { font-size: 0.72rem; margin-bottom: 1.2rem; }

/* the mill band */
.mill-grid { display: grid; gap: var(--gap); grid-template-columns: 1.05fr 0.95fr;
             align-items: center; }
@media (max-width: 60rem) { .mill-grid { grid-template-columns: minmax(0, 1fr); } }
.mill-media { margin: 0; }
.mill-media img { border: 1px solid var(--rule); width: 100%; aspect-ratio: 4 / 5;
                  object-fit: cover; }
@media (max-width: 60rem) { .mill-media img { aspect-ratio: 4 / 3; } }
.grains {
  list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--rule-red); border-bottom: 1px solid var(--rule-red);
}
.grains li {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.66rem; font-weight: 600; color: var(--red);
  padding: 0.75rem 1.1rem 0.75rem 0;
}
.grains li + li::before { content: "\25C6"; font-size: 0.5rem; margin-right: 1.1rem;
                          color: var(--rule-red); }
.diet-note { font-style: italic; color: var(--ink-soft); }
.diet-note p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- the card
   Dotted leaders, exactly the way their printed card sets a dish against its price. */
.rule-orn { width: 3.4rem; margin: 0 auto 2rem; color: var(--ink-strong); }
.menu-body {
  display: grid; gap: var(--gap) clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 56rem) {
  .menu-body { grid-template-columns: minmax(0, 1fr); }
}
/* One list of favourites, no prices (the prices live on each restaurant's own menu), with a
   plate beside it. */
.fav-layout { display: grid; gap: var(--gap); grid-template-columns: 1.1fr 0.9fr; align-items: start; }
@media (max-width: 56rem) { .fav-layout { grid-template-columns: minmax(0, 1fr); } }
.fav-list .dish { padding: 0.55rem 0; }
.fav-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.6rem 0 0; }
.fav-photo { margin: 0; }
.fav-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); }
@media (max-width: 56rem) { .fav-photo img { aspect-ratio: 4 / 3; } }
.card-section { break-inside: avoid; margin-bottom: 2.2rem; }
.card-note { font-style: italic; font-weight: 500; color: var(--ink-soft); margin-top: -0.5rem; }
.card-note.foot { margin: 0.8rem 0 0; }
.dishes { list-style: none; margin: 0; padding: 0; }
/* The dish name stands on its own line; the leader runs from the ingredients to the price
   (Sjoerd, 30 Sep 2026). A dish without ingredients keeps the leader on its one line. When
   the ingredients wrap, the leader hangs off their last line. */
.dish { padding: 0.42rem 0; border-bottom: 1px solid rgba(35, 31, 32, 0.07); display: block; }
.dish-name { font-weight: 700; display: block; }
.dish-line { display: flex; align-items: last baseline; gap: 0.45rem; }
.dish-line .dish-name { display: inline; flex: 0 1 auto; }
.dots { flex: 1 1 1.5rem; min-width: 1.5rem; align-self: center;
        border-bottom: 1px dotted rgba(35, 31, 32, 0.45); }
.price { flex: 0 0 auto; font-variant-numeric: lining-num; white-space: nowrap;
         color: var(--ink-strong); }
.dish-desc { display: block; flex: 0 1 auto; min-width: 0; font-style: italic;
             font-weight: 500; color: var(--ink-soft); font-size: 0.92em; line-height: 1.4; }
.card-footnote { font-style: italic; color: var(--red); border-top: 1px solid var(--rule-red);
                 border-bottom: 1px solid var(--rule-red); padding: 0.9rem 0; text-align: center; }
.card-legal { color: var(--ink-soft); margin-top: 2rem; }

.menu-body { margin-top: 2rem; }
.card-head { text-align: center; padding: clamp(1rem, 2vw, 1.6rem) 0 clamp(1rem, 2vw, 1.5rem); }
.card-head .ornament { width: 2.2rem; margin: 0 auto 0.8rem; }
.card-head .lead { margin-inline: auto; max-width: 60ch; font-size: 1.08em; }
.card-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.menu-body { margin-top: 1.5rem; }
.menu-foot { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.pdf { margin-top: 1.5rem; }

.menu-tiles { display: grid; gap: var(--gap);
              grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 2.5rem 0; }
.menu-tile { display: block; text-decoration: none; border: 1px solid var(--rule);
             background: var(--paper); }
.menu-tile img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.menu-tile-body { display: block; padding: 1.1rem 1.2rem 1.4rem; }
.menu-tile .label { margin-bottom: 0.35rem; display: block; }
.card-sub { display: block; font-family: var(--serif); text-transform: none;
            letter-spacing: 0; font-weight: 400; font-style: italic; font-size: 1rem;
            color: var(--ink-soft); }
.card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
             border-top: 1px solid var(--rule); }
.card-list a { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: baseline;
               padding: 1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none;
               font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.16em;
               font-size: 0.72rem; font-weight: 600; color: var(--ink-strong); }
.card-list a:hover { color: var(--red); }
.diet-callout { border: 1px solid var(--rule-red); background: var(--red-wash);
                padding: clamp(1.4rem, 3vw, 2.2rem); margin: 2.5rem 0; }
.diet-callout p:last-child { margin-bottom: 0; }

/* the Dutch pancake, explained (English home) */
.band--explainer .wrap { max-width: 46rem; }
.band--explainer h2 { margin-bottom: 0.8em; }

/* ---------------------------------------------------------------- press */
.quote-grid { display: grid; gap: var(--gap);
              grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.quote { margin: 0; }
.quote blockquote {
  margin: 0 0 1rem; font-size: 1.22em; font-style: italic; line-height: 1.45;
  color: var(--ink-strong); text-wrap: pretty;
}
.quote blockquote::before { content: "\201C"; color: var(--red); }
.quote blockquote::after { content: "\201D"; color: var(--red); }
.quote figcaption, .press-meta {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.15em;
  font-size: 0.66rem; font-weight: 600; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.quote figcaption a { color: var(--red); text-decoration: none; }
.sep { color: var(--rule-red); }
.press-list { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: 2rem; }
.press-item { border-top: 1px solid var(--rule); padding-top: 1.8rem; max-width: 46rem; }
.press-item blockquote { margin: 0.8rem 0; font-size: 1.3em; font-style: italic;
                         line-height: 1.4; color: var(--ink-strong); }
.press-context { color: var(--ink-soft); font-style: italic; }
.outlet { color: var(--ink-strong); }
.note { color: var(--ink-soft); font-size: 0.92em; font-style: italic; }

/* ---------------------------------------------------------------- story */
.chapter-grid { display: grid; gap: var(--gap);
                grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.chapter-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
                    border: 1px solid var(--rule); margin-bottom: 1rem; }
.chapter-card h3 { margin-bottom: 0.35em; }
.chapter-card p:last-child { color: var(--ink-soft); margin: 0; }
.chapter { display: grid; gap: var(--gap); grid-template-columns: 0.9fr 1.1fr;
           align-items: center; padding: clamp(2rem, 5vw, 4rem) 0;
           border-bottom: 1px solid var(--rule); }
.chapter:nth-child(even) figure { order: 2; }
@media (max-width: 56rem) {
  .chapter { grid-template-columns: minmax(0, 1fr); }
  .chapter:nth-child(even) figure { order: 0; }
}
.chapter figure { margin: 0; }
.chapter figure img { border: 1px solid var(--rule); width: 100%; aspect-ratio: 3 / 2;
                      object-fit: cover; }

/* ---------------------------------------------------------------- guides */
.guide-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 42rem) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }
.guide-col { break-inside: avoid; }
.guide-col .crest { width: 6.25rem; margin-bottom: 0.6rem; }
.guide-col .plain li { padding: 0.36rem 0; border-bottom: 1px solid var(--rule); }
.guide-col .plain li:last-child { border-bottom: 0; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 0.28rem 0; }
.plain a { color: var(--ink-strong); text-decoration: none; }
.plain a:hover { color: var(--red); text-decoration: underline; }
.plain.inline { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.link-columns { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--gap); }
.link-columns li { break-inside: avoid; padding: 0.28rem 0; }
.link-columns a { color: var(--ink-strong); text-decoration: none; }
.link-columns a:hover { color: var(--red); text-decoration: underline; }
@media (max-width: 46rem) { .link-columns { columns: 1; } }

.guide-group { margin-top: clamp(2rem, 4vw, 3rem); }
.guide-cards { display: grid; gap: var(--gap);
               grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.guide-card { text-decoration: none; display: block; }
.guide-card img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
                  border: 1px solid var(--rule); }
.guide-card-body { display: block; padding-top: 0.9rem; }
.guide-card .label { display: block; margin-bottom: 0.3rem; }
.guide-card span:last-child { color: var(--ink-soft); font-style: italic; font-size: 0.95rem; }

/* ---------------------------------------------------------------- landing */
.landing-grid { display: grid; gap: var(--gap); grid-template-columns: 1.15fr 0.85fr;
                align-items: start; padding-bottom: var(--band); }
@media (max-width: 60rem) {
  .landing-grid { grid-template-columns: minmax(0, 1fr); }
  .landing-side { order: -1; }
}
.landing-main { min-width: 0; }
.landing-side img { border: 1px solid var(--rule); width: 100%; aspect-ratio: 4 / 5;
                    object-fit: cover; }
.facts { border: 1px solid var(--rule); padding: 1.4rem 1.5rem; margin-top: 1.5rem;
         background: var(--paper); }
.facts ul { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); font-size: 0.96em; }
.facts li:last-child { border-bottom: 0; }
.landing-cta { border: 1px solid var(--rule-red); background: var(--red-wash);
               padding: clamp(1.3rem, 3vw, 2rem); margin: 2.5rem 0; }
.landing-cta .crest { margin-bottom: 0.8rem; width: 8rem; }
.cta-grid { display: grid; gap: var(--gap);
            grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cta-col p:last-child { margin-bottom: 0; }
.cta-links { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.related { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.prose h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }

/* ---------------------------------------------------------------- venue pages */
.venue-hero { position: relative; }
.venue-hero > img { width: 100%; height: clamp(20rem, 56vh, 34rem); object-fit: cover; }
.venue-hero-body {
  position: absolute; inset: auto 0 0 0; padding: clamp(1.5rem, 4vw, 3rem);
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  color: var(--ivory);
  background: linear-gradient(to top, rgba(4, 4, 4, 0.78) 0%, rgba(4, 4, 4, 0.55) 45%,
              rgba(4, 4, 4, 0) 100%);
  text-shadow: 0 1px 12px rgba(4, 4, 4, 0.35);
}
.venue-hero-body .crest { width: 10rem; }
.venue-hero-body .kicker { color: var(--ivory); opacity: 0.85; }
.venue-hero-body h1 { color: var(--ivory); margin-bottom: 0; }
.venue-hero-body .thin { color: rgba(250, 251, 246, 0.82); }
.venue-grid, .page-grid { display: grid; gap: var(--gap); grid-template-columns: 1.2fr 0.8fr;
                          align-items: start; }
/* groups and private parties: its own band, high on the page, with the request button */
.band--groups { background: var(--red-wash); border-top: 1px solid var(--rule-red);
                border-bottom: 1px solid var(--rule-red); }
.groups-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 56rem) { .groups-grid { grid-template-columns: minmax(0, 1fr); } }
.groups-grid figure { margin: 0; }
.groups-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule); }
.groups-text p:last-of-type { margin-bottom: 1.4rem; }
.nearby { list-style: none; margin: 0 0 1rem; padding: 0; }
.nearby li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.32rem 0;
             border-bottom: 1px solid rgba(35, 31, 32, 0.07); font-size: 0.96em; }
.nearby li span:last-child { white-space: nowrap; color: var(--ink-soft); }
@media (max-width: 60rem) {
  .venue-grid, .page-grid { grid-template-columns: minmax(0, 1fr); }
}
.venue-facts { border: 1px solid var(--rule); background: var(--paper);
               padding: clamp(1.3rem, 3vw, 2rem); }
.venue-facts.inline { align-self: start; }
.hours { display: grid; gap: 0; margin-bottom: 1rem; }
.day { display: flex; justify-content: space-between; gap: 1rem; padding: 0.32rem 0;
       border-bottom: 1px solid rgba(4, 4, 4, 0.07); font-size: 0.96em; }
.day span:first-child { color: var(--ink-soft); }
.day.is-today { font-weight: 700; color: var(--ink-strong); }
.day.is-today span:first-child { color: var(--ink-strong); }
.split-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-grid--single { grid-template-columns: minmax(0, 46rem); }
@media (max-width: 56rem) { .split-grid { grid-template-columns: minmax(0, 1fr); } }

.photo-grid { display: grid; gap: 0.9rem;
              grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.tile img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border: 1px solid var(--rule);
            transition: opacity 0.2s ease; }
.tile:hover img { opacity: 0.9; }
.gallery-group { margin-bottom: clamp(2rem, 4vw, 3rem); }

.contact-grid { display: grid; gap: var(--gap);
                grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
                padding-bottom: var(--band); }
.contact-col { border: 1px solid var(--rule); background: var(--paper);
               padding: clamp(1.3rem, 3vw, 2rem); }
.vacancy { border-top: 1px solid var(--rule); padding: 2rem 0; max-width: 46rem; }

/* ---------------------------------------------------------------- misc pages */
.crumbs { padding: 1.6rem 0 0; color: var(--ink-soft); display: flex; flex-wrap: wrap;
          gap: 0.5rem; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--red); }
.page-head { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head .lead { max-width: 52ch; }

.faq { border-bottom: 1px solid var(--rule); padding: 0.3rem 0; }
.faq summary { cursor: pointer; padding: 0.95rem 0; font-weight: 600; list-style: none;
               display: flex; justify-content: space-between; gap: 1rem;
               font-size: 1.08em; color: var(--ink-strong); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.3em; line-height: 1; }
.faq[open] summary::after { content: "\2013"; }
.faq-body { padding-bottom: 1rem; color: var(--ink-soft); }
.faq-body p:last-child { margin-bottom: 0; }
.faq-more { margin-top: 0.6rem; }

/* ---------------------------------------------------------------- footer
   The two houses are one group on a tinted panel; the reading column sits outside it on the
   plain ground, so it reads as a different kind of column on purpose. Inside the panel the
   two columns share a subgrid, which is what makes the opening hours line up row for row
   even though Amsterdam is closed on Mondays and Vreeland is not. */
.site-foot { border-top: 1px solid var(--rule); padding: var(--band) 0 3rem;
             background: var(--paper); }
.foot-mark { width: min(100%, 24rem); margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
/* Since 1 Oct 2026 (Sjoerd's footer note) the panel holds all three columns: the two
   restaurants and the reading list. On a phone the restaurants stack and the reading list
   becomes a two-column row inside the same panel, so nothing hangs loose underneath. */
.foot-grid {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(11rem, 0.7fr);
  grid-template-rows: auto auto auto auto auto auto;
  background: var(--red-wash); border: 1px solid var(--rule-red);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.foot-col { display: grid; gap: 0; grid-row: span 6; }
@supports (grid-template-rows: subgrid) {
  .foot-col { grid-template-rows: subgrid; }
}
.foot-read { grid-row: span 6; }
@media (max-width: 58rem) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .foot-col { grid-row: auto; grid-template-rows: none; }
  .foot-read { grid-row: auto; grid-column: 1 / -1; border-top: 1px solid var(--rule-red);
               padding-top: 1.2rem; }
  .foot-read .plain { columns: 2; column-gap: var(--gap); }
  .foot-read .plain li { break-inside: avoid; }
}
@media (max-width: 42rem) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-col { margin-bottom: 1.2rem; }
}
.foot-crest { width: 8rem; margin: 0 0 0.9rem; align-self: end; }
.foot-col h2 { font-size: 0.68rem; margin-bottom: 0.6rem; align-self: end; }
.foot-col p { margin: 0 0 0.8rem; }
.address a { color: inherit; text-decoration: none;
             border-bottom: 1px solid var(--rule-red); }
.address a:hover { color: var(--red); border-bottom-color: var(--red); }
.foot-address, .foot-contact, .foot-social { color: var(--ink-soft); }
.foot-hours { font-size: 0.9em; align-self: start; margin-bottom: 0.8rem; }
.foot-hours .day { padding: 0.16rem 0; }
.foot-social { align-self: end; margin-bottom: 0; }

.foot-read .label { margin-bottom: 0.6rem; }
.foot-read .plain li { padding: 0.32rem 0; }
.foot-machines { margin-top: 1.2rem; padding-top: 1rem;
                 border-top: 1px solid var(--rule-red); }
.foot-legal { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: 1.5rem;
              border-top: 1px solid var(--rule); color: var(--ink-soft);
              display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------------------------------------------------------------- print
   The site should print like their card: no chrome, black on white, leaders intact. */
@media print {
  .site-head, .site-foot, .btn, .band--doors, .band--guides, .crumbs, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { border: 0; padding: 0.5rem 0; }
  .menu-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a { color: #000; text-decoration: none; }
}