/* PARQ: the deck from a deckchair, every fact on PARQ's own black A-board. The group system (tokens,
   header, sheet, controls, live-data blocks, footer) is group.css, the kit's file verbatim, loaded
   first; this file sets PARQ's brand and faces (DIRECTION.md §2.1: board #1b1b19, chalk #f3efe6,
   timber #b98a55; Josefin Sans 300 display, Karla) and composes its pages. Design record: ../../DESIGN.md */

blockquote { margin: 0; }

:root {
  --board: #1b1b19;
  --chalk: #f3efe6;
  --chalk-70: rgba(243, 239, 230, .7);
  --timber: #b98a55;
  --brand: var(--board);
  --brand-lift: #302f2b;                 /* the board at +8 % L */
  --on-brand: var(--chalk);
  --hairline-on-brand: rgba(243, 239, 230, .22);
  --font-read: "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --font-write: var(--font-read);
  --display-weight: 300;
  --heading-weight: 400;
  --label-weight: 600;
  --button-weight: 600;
  --frame: .375rem;                      /* the A-board's timber edge */
  --on-board: var(--chalk);              /* the kit's hero board (VENUE-HERO.md A) is the A-board */
  --board-edge: var(--frame);
  --board-edge-color: var(--timber);
  color-scheme: light;
}

ol, ul { padding: 0; list-style: none; }
.sg-lang { font-weight: var(--label-weight); }   /* Karla's medium is its 600 (§2.1 label) */
.sg-sheet .sg-head__mark { color: var(--on-brand); }

/* ---------- the board: PARQ's black A-board with its timber edge ---------- */
.board { --menu-ink: var(--chalk); --menu-muted: var(--chalk-70); --menu-price: var(--timber); min-width: 0; background: var(--board); color: var(--chalk); border: var(--frame) solid var(--timber); padding: 1.75rem; }
.board__title { font: var(--display-weight) var(--d2)/1.05 var(--font-display); letter-spacing: -.01em; }
.board__facts { color: var(--chalk); }
.board__facts a, .board__links a { white-space: nowrap; }
.board__line, .board__stamp { font-size: var(--small); line-height: 1.45; color: var(--chalk-70); }
.board__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--facts); }

/* the offer rows: the time of day as the board's label, the offer under it, hairlines between */
.board__rows { display: grid; }
.board__rows > li { display: grid; gap: .375rem; padding-block: 1.25rem; border-top: 1px solid var(--hairline-on-brand); }
.board__rows > li:first-child { border-top: 0; padding-top: 0; }
.board__rows > li:last-child { padding-bottom: 0; }
.board__when { color: var(--timber); }
.board__what { font-size: var(--body); line-height: 1.45; }
.board__foot { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--hairline-on-brand); font: var(--button-weight) .9375rem/1.2 var(--font-read); letter-spacing: .02em; }

/* what PARQ publishes in Gastro Soul: the menu block's grammar (§2.5) on the board, in Karla; the
   red of the printed card is 2.6:1 on the board, so the price takes the timber (5.6:1) */
.board__rows.is-menu { gap: .625rem; }
.board__rows.is-menu > li { padding: 0; border: 0; }
.board__rows.is-menu > .sg-menu__item { gap: 0 1rem; }
.board__rows.is-menu > .sg-menu__section { display: block; margin: 0; padding-top: 2.5rem; }
.board__rows.is-menu > .sg-menu__section:first-child { padding-top: 0; }
.board--full .board__rows.is-menu { gap: 0; }
.board .sg-menu__price { font-weight: 600; }
.board .sg-menu__head { color: var(--menu-muted); font-weight: 600; }
.board .sg-menu__note { margin-top: 1.25rem; }
.board__pdf { margin-top: 2rem; }

/* ---------- the hero: the kit's board (group.css) as PARQ's A-board, set down on the deck ---------- */
@media (max-width: 47.99rem) {
  /* phones: the 3:4 frame fits the tall window by height; lean in on the deck so the deckchairs
     stand above the board and the board stands on the boards of the deck */
  .sg-hero__photo img { transform: scale(1.35); transform-origin: 50% 100%; }
}

/* ---------- the rows: one image system for the whole site ----------
   Twelve columns: the photographs on the first eight (two 4:5 tiles or one 3:2 frame), the words or
   the board on the last four; a board stretches to the photographs' height, words run from the top. */
.row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--row-gap); }
.row > * { min-width: 0; }
.row__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); align-self: start; }
.frame { position: relative; min-height: 0; overflow: hidden; }
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 3 / 2; align-self: start; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.board--offer, .board--place { display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 47.99rem) { .board--offer, .board--place { padding: 1.25rem; } }
.board--offer .board__title + .board__stamp { margin-top: -.75rem; }

.copy { display: grid; align-content: start; gap: 1.5rem; }
.copy .sg-d2 { margin-bottom: calc(var(--head-gap) - 1.5rem); }

.board--place .board__facts { display: grid; gap: .25rem; }
.board--place .board__facts .sep { display: none; }
.board--place { align-self: start; }
.board--place .board__links { padding-top: 1.25rem; border-top: 1px solid var(--hairline-on-brand); }

/* the Lístek page */
.board--full { padding: 2rem; align-self: start; }
.board--full .board__rows > li { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 63.99rem) {
  .row { row-gap: 2rem; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .board--full .board__rows > li { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: 1.5rem; }
  .page__tile { width: 50%; }
}
@media (min-width: 64rem) {
  .row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: stretch; }
  .row__pair, .row__wide { grid-column: 1 / 8; }
  .row__aside { grid-column: 8 / 13; }
  .row__aside--start { grid-column: 1 / 6; grid-row: 1; }
  .row__wide--end { grid-column: 6 / 13; grid-row: 1; }
  .program__title, .page__title { grid-column: 1 / -1; }
  .program__list { grid-column: 1 / 9; }
  .board--full { padding: 2.5rem 3rem; }
  .board--full .board__rows > li { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; gap: 2rem; }
  .board--full .sg-menu__item { max-width: 44rem; }
  .page__tile { align-self: start; }
}
@media (min-width: 90rem) {
  .row__pair, .row__wide { grid-column: 1 / 9; }
  .row__aside { grid-column: 9 / 13; }
  .row__aside--start { grid-column: 1 / 5; }
  .row__wide--end { grid-column: 5 / 13; }
}