/* ==========================================================================
   Black Oven — the menu "board"
   Shared by the website menu page, the printable/PDF menu and the storefront
   display, so all three always look like the same menu.
   Modeled on the restaurant's own printed board: dark ground, cream type,
   ember prices, botanical mark.
   ========================================================================== */

.board {
  background:
    radial-gradient(circle at 15% 8%, rgba(226,118,47,.10), transparent 45%),
    radial-gradient(circle at 85% 92%, rgba(246,185,106,.07), transparent 45%),
    #191512;
  color: #f4efe4;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.board::before {                     /* faint chalk texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 22px 22px, 37px 37px;
  background-position: 0 0, 11px 19px;
}
.board > * { position: relative; z-index: 1; }

.board-head { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.board-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, 3.75rem);
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; margin: 0 0 .15em; line-height: 1;
}
.board-sub {
  color: var(--ember-glow); text-transform: uppercase;
  letter-spacing: .28em; font-size: clamp(.6875rem, 1.6vw, .8125rem); margin: 0;
}
.board-rule {
  width: 4.5rem; height: 2px; margin: 1.1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--ember-warm), transparent);
}

.board-section { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.board-section:last-of-type { margin-bottom: 0; }
.board-section-name {
  font-family: var(--font-display);
  color: #bcd6a8;                                  /* the sage on their board */
  text-transform: uppercase; letter-spacing: .16em;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  margin: 0 0 .2em; font-weight: 600;
}
.board-section-rule { height: 1px; background: rgba(244,239,228,.22); margin-bottom: 1rem; }
.board-section-blurb { color: rgba(244,239,228,.6); font-size: .9375rem; margin: -.5rem 0 1rem; }

.board-item { margin-bottom: 1.35rem; break-inside: avoid; }
.board-item:last-child { margin-bottom: 0; }
.board-item-top {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem;
}
.board-item-name {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 2.3vw, 1.375rem);
  text-transform: uppercase; letter-spacing: .04em; color: #fff; font-weight: 600;
}
.board-prices { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin-left: auto; }
.board-price { white-space: nowrap; font-weight: 700; letter-spacing: .03em; }
.board-price-label {
  color: rgba(244,239,228,.55); text-transform: uppercase;
  font-size: .6875rem; letter-spacing: .1em; margin-right: .3rem; font-weight: 700;
}
.board-price-value { color: #e2762f; font-size: clamp(.9375rem, 2vw, 1.0625rem); font-variant-numeric: tabular-nums; }
.board-item-desc {
  color: rgba(244,239,228,.72); font-size: clamp(.8125rem, 1.7vw, .9375rem);
  margin: .3rem 0 0; max-width: 62ch; line-height: 1.5;
}

.board-note {
  margin-top: clamp(1.75rem, 4vw, 2.5rem); padding-top: 1.1rem;
  border-top: 1px solid rgba(244,239,228,.18);
  text-align: center; color: var(--ember-glow);
  font-size: .875rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.board-mark { display: block; width: 74px; margin: 1.75rem auto 0; opacity: .85; border-radius: 50%; }
.board-foot { text-align: center; margin-top: 1rem; color: rgba(244,239,228,.5); font-size: .8125rem; }
.board-foot a { color: rgba(244,239,228,.7); }

/* --- Two columns when there is room ------------------------------------- */
@media (min-width: 60rem) {
  .board-columns { column-count: 2; column-gap: 3rem; }
  .board-columns .board-section { break-inside: avoid; }
}

/* ==========================================================================
   Storefront display — a monitor in the window/counter
   ========================================================================== */
.display-body { margin: 0; background: #191512; }
.display-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2vmin; }
.display-wrap .board { width: 100%; max-width: 100rem; border-radius: 0; padding: clamp(2rem, 4vmin, 4rem); }
/* Scale type with the viewport so it reads from across the room. */
.display-wrap .board-title      { font-size: clamp(2.5rem, 6vmin, 6rem); }
.display-wrap .board-section-name { font-size: clamp(1.1rem, 2.2vmin, 2rem); }
.display-wrap .board-item-name  { font-size: clamp(1.1rem, 2.1vmin, 2rem); }
.display-wrap .board-price-value{ font-size: clamp(1rem, 2vmin, 1.85rem); }
.display-wrap .board-item-desc  { font-size: clamp(.8rem, 1.35vmin, 1.15rem); }
.display-clock {
  position: fixed; bottom: 1rem; right: 1.25rem;
  color: rgba(244,239,228,.28); font-size: .8125rem; letter-spacing: .05em;
}

/* ==========================================================================
   Print / PDF
   ========================================================================== */
.print-actions { text-align: center; padding: 1.25rem; background: var(--cream); }
.print-actions .btn { margin: 0 .25rem; }

@page { size: Letter portrait; margin: 12mm; }

@media print {
  .print-actions, .site-header, .site-footer { display: none !important; }
  html, body { background: #fff !important; margin: 0; padding: 0; }
  .print-wrap { padding: 0 !important; }

  /* Keep the board's colors — this is the restaurant's actual look. */
  .board {
    border-radius: 0; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    padding: 10mm;
  }
  .board-columns { column-count: 2; column-gap: 10mm; }
  .board-section, .board-item { break-inside: avoid; }
  .board-foot { display: none; }
}

/* Ink-saver variant: /menu/print?ink=light */
.ink-light .board {
  background: #fff; color: #241f1a; border: 1px solid #d8cfbe;
}
.ink-light .board::before { display: none; }
.ink-light .board-title,
.ink-light .board-item-name { color: #14110e; }
.ink-light .board-section-name { color: #5c7a46; }
.ink-light .board-section-rule { background: #d8cfbe; }
.ink-light .board-item-desc { color: #5f574d; }
.ink-light .board-price-label { color: #8a8175; }
.ink-light .board-price-value { color: #b8480f; }
.ink-light .board-note { color: #b8480f; border-top-color: #d8cfbe; }
.ink-light .board-sub { color: #b8480f; }