/* MZ Solutions — break time.
   Mobile first: base rules are the phone; 768, 1024 and 1400 widen it.
   Layers keep the cascade honest: motion is last, so a reduced-motion visitor gets the finished
   state from the earlier layers and nothing from the last one. */

@layer reset, base, frame, parts, tool, pages, motion;

@font-face {
  font-family: "Rokkitt";
  src: url("fonts/rokkitt-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Reddit Sans";
  src: url("fonts/reddit-sans-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --brk-ground: #170E0B;
  --brk-panel: #241713;
  --brk-raised: #30201A;
  --brk-sunk: #110A08;
  --brk-ink: #F7ECE4;
  --brk-muted: #B49F93;
  --brk-ember: #E9533B;
  --brk-amber: #F1B544;
  --brk-ember-deep: #9E3423;
  --brk-ember-dusk: #7A2819;
  --brk-wood: #4A2E22;
  --brk-slate: #1C1210;

  --brk-line: rgba(247, 236, 228, 0.14);
  --brk-line-strong: rgba(247, 236, 228, 0.3);
  --brk-tile: rgba(247, 236, 228, 0.055);
  --brk-tile-hi: rgba(247, 236, 228, 0.11);
  --brk-ember-wash: rgba(233, 83, 59, 0.13);
  --brk-ember-glow: rgba(233, 83, 59, 0.42);
  --brk-amber-wash: rgba(241, 181, 68, 0.08);
  --brk-amber-glow: rgba(241, 181, 68, 0.55);
  --brk-amber-soft: rgba(241, 181, 68, 0.22);
  --brk-steam: rgba(247, 236, 228, 0.5);
  --brk-shadow: rgba(8, 4, 3, 0.55);
  --brk-veil: rgba(17, 10, 8, 0.9);
  --brk-scrim: rgba(23, 14, 11, 0.72);
  --brk-scrim-strong: rgba(23, 14, 11, 0.88);
  --brk-scrim-deep: rgba(23, 14, 11, 0.8);
  --brk-scrim-mid: rgba(23, 14, 11, 0.5);
  --brk-scrim-soft: rgba(23, 14, 11, 0);
  --brk-mesh-a: rgba(233, 83, 59, 0.11);
  --brk-mesh-b: rgba(241, 181, 68, 0.06);
  --brk-mesh-c: rgba(74, 46, 34, 0.5);
  --brk-mesh-d: rgba(158, 52, 35, 0.12);
  --brk-figure-a: #D8A23C;
  --brk-figure-b: #8C786C;
  --brk-figure-c: #C9B4A6;
  --brk-fig-coat: #4B3329;
  --brk-fig-legs: #2A1C17;
  --brk-fig-band: #D8A23C;
  --brk-fig-head: #6B4A3B;
  --brk-fig-hat: #33241E;

  --brk-slab: "Rokkitt", "Rockwell", "Roboto Slab", Georgia, serif;
  --brk-sans: "Reddit Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --brk-pad: 20px;
  --brk-max: 1240px;
  --brk-name-h: 17px;
  --brk-van-k: 5;
}

:root, .brk-sign {
  --brk-sign-tw: calc(var(--brk-name-h) * var(--brk-van-k));
  --brk-sign-th: calc(var(--brk-sign-tw) * 0.7427);
  --brk-sign-fw: calc(var(--brk-name-h) * 9.853);
  --brk-sign-fh: calc(var(--brk-name-h) * 2);
  --brk-sign-sh: calc(var(--brk-name-h) * 1.75);
  --brk-sign-ft: calc(var(--brk-sign-sh) * 0.9);
  --brk-sign-gap: calc(var(--brk-name-h) * 0.34);
  --brk-sign-vl: calc(var(--brk-sign-fw) / 2 - var(--brk-sign-tw) * 0.38);
  --brk-sign-h: calc(var(--brk-sign-ft) + var(--brk-sign-fh) + var(--brk-sign-gap) + var(--brk-sign-th));
}

@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(body, h1, h2, h3, p, figure, dl, dd, ol, ul, fieldset) { margin: 0; }
  :where(ol, ul)[class] { padding: 0; list-style: none; }
  :where(img, svg, picture) { display: block; max-width: 100%; }
  :where(input, button, select, textarea) { font: inherit; color: inherit; }
  :where(fieldset) { border: 0; padding: 0; min-width: 0; }
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 16px;
  }
  html.brk-held { overflow: hidden; }

  body {
    min-height: 100vh;
    overflow-x: clip;
    background-color: var(--brk-ground);
    background-image:
      radial-gradient(65vw 42vw at 88% 6%, var(--brk-mesh-a), transparent 72%),
      radial-gradient(55vw 55vw at 6% 34%, var(--brk-mesh-b), transparent 70%),
      radial-gradient(80vw 46vw at 62% 62%, var(--brk-mesh-c), transparent 74%),
      radial-gradient(48vw 36vw at 18% 92%, var(--brk-mesh-d), transparent 70%);
    background-repeat: no-repeat;
    color: var(--brk-ink);
    font-family: var(--brk-sans);
    font-size: 17px;
    line-height: 1.62;
  }

  a { color: var(--brk-amber); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--brk-amber); outline-offset: 3px; border-radius: 6px; }
  /* Forms carry hidden state (the signed form age, a reference). A hidden input is never drawn; it
     gets the ground colour only so that checks reading the computed style of every input do not
     take it for a visible control painted in nothing. */
  input[type="hidden"] { background-color: var(--brk-sunk); }

  h1, h2, h3 {
    font-family: var(--brk-slab);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  h1 { font-size: 38px; font-weight: 800; }
  h2 { font-size: 32px; font-weight: 760; }
  h3 { font-size: 23px; font-weight: 700; }
  p + p { margin-top: 0.9em; }
  strong { font-weight: 700; }
}

@layer frame {
  .brk-wrap { width: 100%; max-width: var(--brk-max); margin-inline: auto; padding-inline: var(--brk-pad); }

  .brk-skip {
    position: absolute; left: 12px; top: -90px; z-index: 120;
    padding: 12px 18px; border-radius: 10px;
    background: var(--brk-amber); color: var(--brk-ground);
    font-weight: 700; text-decoration: none;
  }
  .brk-skip:focus { top: 12px; }

  /* the masthead: a roof sign. The name is set on a sign face standing on two legs on the
     trailer's roof; the steam from the flue rises behind the face and curls up above it, clear
     of the letters. Every length is a multiple of the name's height, so the lockup scales as one
     piece; the fractions come from the van and plume crops (design/brand/brand.md). */
  .brk-mast {
    position: absolute; z-index: 40; top: 0; left: 0; right: 0;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 10px var(--brk-pad) 0;
  }
  .brk-sign {
    position: relative; display: block; flex: none;
    width: var(--brk-sign-fw); height: var(--brk-sign-h);
    border-radius: 10px; text-decoration: none;
  }
  .brk-sign-steam {
    position: absolute; z-index: 2; top: 0;
    left: calc(var(--brk-sign-vl) + var(--brk-sign-tw) * 0.621 - var(--brk-sign-sh) * 0.174);
    height: var(--brk-sign-sh); width: auto;
    filter: drop-shadow(0 1px 4px var(--brk-shadow));
  }
  .brk-sign-face {
    position: absolute; z-index: 3; left: 0; top: var(--brk-sign-ft);
    display: block; box-sizing: border-box;
    width: var(--brk-sign-fw); height: var(--brk-sign-fh);
    padding: calc(var(--brk-name-h) * 0.4) calc(var(--brk-name-h) * 0.6);
    border: calc(var(--brk-name-h) * 0.1) solid var(--brk-ember);
    border-radius: calc(var(--brk-name-h) * 0.22);
    background: linear-gradient(var(--brk-raised), var(--brk-slate));
    box-shadow: 0 calc(var(--brk-name-h) * 0.25) calc(var(--brk-name-h) * 0.7) var(--brk-shadow);
  }
  .brk-sign-name { display: block; height: var(--brk-name-h); width: auto; }
  .brk-sign-van {
    position: absolute; z-index: 2; left: var(--brk-sign-vl);
    top: calc(var(--brk-sign-ft) + var(--brk-sign-fh) + var(--brk-sign-gap));
    width: var(--brk-sign-tw); height: auto;
    filter: drop-shadow(0 2px 6px var(--brk-shadow));
  }
  .brk-sign-leg {
    position: absolute; z-index: 1;
    top: calc(var(--brk-sign-ft) + var(--brk-sign-fh) - 2px);
    width: max(3px, calc(var(--brk-name-h) * 0.18));
    height: calc(var(--brk-sign-gap) + var(--brk-sign-th) * 0.1215 + 4px);
    border-radius: 2px;
    background: var(--brk-ember-deep);
  }
  .brk-sign-leg--a { left: calc(var(--brk-sign-vl) + var(--brk-sign-tw) * 0.25 - max(3px, calc(var(--brk-name-h) * 0.18)) / 2); }
  .brk-sign-leg--b { left: calc(var(--brk-sign-vl) + var(--brk-sign-tw) * 0.51 - max(3px, calc(var(--brk-name-h) * 0.18)) / 2); }
  a.brk-sign:hover .brk-sign-face { border-color: var(--brk-amber); }
  .brk-sign--foot { --brk-name-h: 24px; --brk-van-k: 5.2; margin-bottom: 10px; }

  .brk-menu-open {
    display: inline-flex; align-items: center; gap: 10px; flex: none;
    min-height: 48px; padding: 0 12px 0 10px; margin-top: 6px;
    border-radius: 12px; border: 0;
    background: var(--brk-panel); color: var(--brk-ink);
    box-shadow: inset 0 0 0 2px var(--brk-line-strong), 0 10px 22px var(--brk-shadow);
    font-family: var(--brk-sans); font-size: 16px; font-weight: 650;
    text-decoration: none; cursor: pointer;
  }
  .brk-menu-open:hover { background: var(--brk-raised); color: var(--brk-ink); box-shadow: inset 0 0 0 2px var(--brk-amber), 0 10px 22px var(--brk-shadow); }
  .brk-glyph { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .brk-menu-open .brk-glyph { color: var(--brk-amber); }

  /* the menu: a menu board on its own wooden frame. With scripts off it is simply the list of
     pages at the foot of the page, which the Menu link jumps to. */
  .brk-chalk { padding: 48px var(--brk-pad) 28px; }
  .brk-chalk-frame {
    width: 100%; max-width: 980px; margin-inline: auto;
    padding: 18px 16px 20px;
    border-radius: 16px;
    background:
      radial-gradient(120% 90% at 20% 0%, var(--brk-tile-hi), transparent 60%),
      var(--brk-slate);
    box-shadow: 0 0 0 7px var(--brk-wood), 0 0 0 9px var(--brk-sunk), 0 30px 70px var(--brk-shadow);
  }
  .brk-chalk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .brk-chalk-title { font-family: var(--brk-slab); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; color: var(--brk-ink); }
  .brk-chalk-close {
    display: none; align-items: center; gap: 8px;
    min-height: 46px; padding: 0 16px 0 12px; border: 0; border-radius: 10px;
    background: var(--brk-tile-hi); color: var(--brk-ink); cursor: pointer;
    font-size: 15px; font-weight: 650;
  }
  .brk-chalk-close:hover { background: var(--brk-ember-wash); }
  .brk-chalk-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  /* each tile carries its own span (--brk-span on a phone, --brk-span-w from 768 px), set by the
     builder, so the board can grow without a rule per tile */
  .brk-chalk-item { grid-column: span var(--brk-span, 6); display: flex; }
  .brk-chalk-item--half .brk-chalk-name { font-size: 23px; }
  .brk-chalk-link {
    position: relative; flex: 1;
    display: grid; align-content: start; gap: 4px;
    min-height: 74px; padding: 14px 16px 16px;
    border-radius: 12px;
    background: var(--brk-tile); color: var(--brk-ink); text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .brk-chalk-link:hover { background: var(--brk-tile-hi); color: var(--brk-ink); }
  .brk-chalk-item--first .brk-chalk-link { min-height: 118px; }
  .brk-chalk-item--cooks .brk-chalk-link { background: linear-gradient(135deg, var(--brk-ember-wash), var(--brk-tile) 70%); }
  .brk-chalk-when {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--brk-amber);
  }
  .brk-chalk-when .brk-glyph { width: 16px; height: 16px; }
  .brk-chalk-name { font-family: var(--brk-slab); font-size: 27px; font-weight: 700; line-height: 1.05; }
  .brk-chalk-item--first .brk-chalk-name { font-size: 34px; }
  .brk-chalk-line { color: var(--brk-muted); font-size: 15px; line-height: 1.4; }
  .brk-chalk-link[aria-current="page"] { background: var(--brk-ember-wash); box-shadow: inset 5px 0 0 var(--brk-ember); }
  .brk-chalk-now {
    position: absolute; top: 12px; right: 12px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--brk-ember); color: var(--brk-ground);
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    transform: rotate(3deg);
  }
  /* on a narrow half tile the badge would sit on the clock word: it goes first, in the flow */
  @media (max-width: 767px) {
    .brk-chalk-item--half .brk-chalk-now { position: static; order: -1; justify-self: start; margin-bottom: 2px; transform: none; }
  }
  .brk-chalk-link--ask { background: var(--brk-amber); color: var(--brk-ground); }
  .brk-chalk-link--ask:hover { background: var(--brk-ink); color: var(--brk-ground); }
  .brk-chalk-link--ask .brk-chalk-when,
  .brk-chalk-link--ask .brk-chalk-line { color: var(--brk-ground); }
  .brk-chalk-link--ask[aria-current="page"] { background: var(--brk-amber); box-shadow: inset 6px 0 0 var(--brk-ember); }

  .brk-js .brk-chalk {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: flex-start; justify-content: center;
    padding: 18px 14px; overflow-y: auto;
    background: var(--brk-veil);
    visibility: hidden; opacity: 0;
  }
  .brk-js .brk-chalk[data-open] { visibility: visible; opacity: 1; }
  .brk-js .brk-chalk-close { display: inline-flex; }

  /* the shared overlap device: a flap crossing a picture's corner */
  .brk-flap {
    position: relative; z-index: 3;
    padding: 22px 20px 24px;
    background: var(--brk-panel);
    border-radius: 4px 20px 20px 20px;
    box-shadow: 0 24px 50px var(--brk-shadow), inset 0 3px 0 var(--brk-ember);
  }

  .brk-kick {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 13px; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--brk-amber);
  }
  .brk-kick time { font-family: var(--brk-slab); font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: var(--brk-ink); }

  .brk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 22px;
    border-radius: 12px; border: 0;
    background: var(--brk-amber); color: var(--brk-ground);
    font-family: var(--brk-sans); font-size: 16px; font-weight: 750;
    text-decoration: none; cursor: pointer;
    box-shadow: 0 8px 18px var(--brk-shadow);
  }
  .brk-btn:hover { background: var(--brk-ink); color: var(--brk-ground); }
  .brk-btn--ghost { background: var(--brk-tile-hi); color: var(--brk-ink); box-shadow: inset 0 0 0 2px var(--brk-line-strong); }
  .brk-btn--ghost:hover { background: var(--brk-raised); color: var(--brk-ink); box-shadow: inset 0 0 0 2px var(--brk-amber); }
  .brk-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

  .brk-more {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px;
    font-weight: 700; color: var(--brk-ink); text-decoration: none;
    border-bottom: 3px solid var(--brk-ember);
  }
  .brk-more:hover { color: var(--brk-amber); border-color: var(--brk-amber); }
  .brk-more::after { content: "\2192"; font-family: var(--brk-sans); }

  /* registered details, every page */
  .brk-reg { padding: 64px 0 56px; }
  .brk-reg-in { display: grid; gap: 22px; }
  .brk-reg-h { font-size: 30px; }
  .brk-reg-lead p { margin-top: 10px; color: var(--brk-muted); max-width: 34em; }
  .brk-reg-list { display: grid; gap: 10px; }
  .brk-reg-list > div { padding: 12px 16px 14px; border-radius: 12px; background: var(--brk-tile); }
  .brk-reg-list dt { font-size: 12.5px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brk-muted); }
  .brk-reg-list dd { margin-top: 2px; font-weight: 600; overflow-wrap: anywhere; }

  .brk-foot { padding: 34px 0 48px; background: var(--brk-sunk); }
  .brk-foot-in { display: grid; gap: 14px; }
  /* the small print: the company's own pages, as tabs a thumb can hit */
  .brk-print-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .brk-print-list a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: 10px; background: var(--brk-tile-hi); color: var(--brk-ink);
    font-size: 15px; font-weight: 650; text-decoration: none;
  }
  .brk-print-list a:hover { background: var(--brk-raised); box-shadow: inset 0 -3px 0 var(--brk-amber); }
  .brk-print-list a[aria-current="page"] { background: var(--brk-ember-wash); box-shadow: inset 4px 0 0 var(--brk-ember); }
  .brk-foot-line { font-size: 15px; color: var(--brk-ink); }
  .brk-foot-quiet { color: var(--brk-muted); }
}

@layer parts {
  /* ---- the opening: the stand at dusk, the title in its sky, a flap over its corner */
  .brk-open { position: relative; }
  .brk-open-art { position: relative; margin-left: 16px; }
  .brk-open-art::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
  .brk-open-art img {
    width: 100%; height: auto; aspect-ratio: 9 / 16;
    object-fit: cover; object-position: 50% 100%;
  }
  .brk-open-sky {
    position: absolute; z-index: 2; left: 0; right: 0;
    top: calc(var(--brk-sign-h) + 26px);
    padding: 0 18px 0 16px;
  }
  .brk-open-kicker {
    max-width: 22em; margin-bottom: 12px;
    font-size: 13px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brk-amber);
  }
  .brk-open-title { max-width: 11ch; color: var(--brk-ink); }
  .brk-open .brk-flap { margin: -76px 16px 0 6px; }
  .brk-open-lede { font-size: 17.5px; }

  /* ---- the day: a clock rail down the page, wide bands for bells, narrow ones between */
  .brk-day { padding: 72px 0 28px; }
  .brk-day-head { max-width: 40em; }
  .brk-day-head p { margin-top: 14px; color: var(--brk-muted); }
  .brk-day-grid { display: grid; gap: 28px; margin-top: 36px; }
  .brk-bands { display: grid; }

  .brk-band { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
  .brk-band-rail { position: relative; }
  .brk-band-rail::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 15px; width: 4px;
    background: linear-gradient(var(--brk-line-strong), var(--brk-line-strong));
  }
  .brk-band--bell .brk-band-rail::before {
    background: linear-gradient(var(--brk-line-strong), var(--brk-ember) 18%, var(--brk-ember) 82%, var(--brk-line-strong));
  }
  .brk-band-dot {
    position: absolute; left: 7px; top: 30px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--brk-ground); box-shadow: inset 0 0 0 4px var(--brk-muted);
  }
  .brk-band-bell {
    position: absolute; left: 0; top: 42px;
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--brk-ember); color: var(--brk-ground);
    box-shadow: 0 0 0 6px var(--brk-ember-wash);
  }
  .brk-band-bell .brk-glyph { width: 20px; height: 20px; stroke-width: 2.2; }
  .brk-band-body { padding: 26px 0 30px; min-width: 0; }
  .brk-band--bell .brk-band-body { padding: 40px 0 56px; }
  .brk-band--quiet .brk-band-body p:not(.brk-kick) { color: var(--brk-muted); max-width: 36em; }
  .brk-band--quiet h3 { font-size: 23px; }
  .brk-band--bell h3 { font-size: 30px; }
  .brk-band-body > h3 { margin-bottom: 12px; }
  .brk-band--bell .brk-band-body > p { max-width: 38em; }

  /* the hatch: the mark itself, at work */
  .brk-hatch {
    position: relative; align-self: start;
    padding: 16px 16px 18px; border-radius: 20px;
    background:
      radial-gradient(90% 70% at 55% 72%, var(--brk-amber-wash), transparent 70%),
      var(--brk-panel);
    box-shadow: 0 24px 50px var(--brk-shadow);
  }
  .brk-hatch-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .brk-hatch-bellmark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brk-ember); color: var(--brk-ground); }
  .brk-hatch-bellmark .brk-glyph { width: 21px; height: 21px; stroke-width: 2.2; }
  .brk-hatch-when { font-family: var(--brk-slab); font-size: 24px; font-weight: 700; line-height: 1; }
  .brk-hatch-stage { position: relative; aspect-ratio: 340 / 290; }
  .brk-hatch-unit { position: absolute; right: 4%; bottom: 0; height: 100%; aspect-ratio: 543 / 640; }
  .brk-hatch-unit > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .brk-hatch-window { position: absolute; left: 17.9%; top: 62%; width: 50.9%; height: 12.9%; overflow: clip; border-radius: 3px; }
  .brk-hatch-glow {
    position: absolute; inset: -40% -10%;
    background: radial-gradient(closest-side, var(--brk-amber-glow), transparent);
    opacity: 0.5;
  }
  .brk-hatch-shutter {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(to bottom, var(--brk-ember-deep) 0 6px, var(--brk-ember-dusk) 6px 8px);
    transform: translateY(-104%);
  }
  .brk-hatch[data-run]:not([data-open]) .brk-hatch-shutter { transform: translateY(0); }
  .brk-hatch-wisps { position: absolute; left: 24%; top: 36%; width: 40%; height: 26%; pointer-events: none; }
  .brk-hatch-wisps i {
    position: absolute; bottom: 0; width: 30%; height: 70%;
    border-radius: 50%; background: radial-gradient(closest-side, var(--brk-steam), transparent);
    filter: blur(6px); opacity: 0.6;
  }
  .brk-hatch-wisps i:nth-child(1) { left: 6%; }
  .brk-hatch-wisps i:nth-child(2) { left: 38%; height: 92%; }
  .brk-hatch-wisps i:nth-child(3) { left: 68%; }
  .brk-hatch[data-run]:not([data-open]) .brk-hatch-wisps i { opacity: 0.1; }
  .brk-hatch-q { position: absolute; inset: 0; overflow: clip; container-type: inline-size; pointer-events: none; }
  .brk-hatch-q i {
    position: absolute; left: 0; bottom: 1%;
    width: 11.5%; height: 40%;
    transform: translateX(calc(var(--brk-x, 1.18) * 100cqw));
  }
  .brk-hatch-q i:nth-child(1) { --brk-x: 0.3; }
  .brk-hatch-q i:nth-child(2) { --brk-x: 0.42; }
  .brk-hatch-q i:nth-child(3) { --brk-x: 0.54; }
  .brk-hatch-q svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .brk-p-legs { fill: var(--brk-fig-legs); }
  .brk-p-coat { fill: var(--brk-fig-coat); }
  .brk-p-band { fill: var(--brk-fig-band); }
  .brk-p-head { fill: var(--brk-fig-head); }
  .brk-p-hat { fill: var(--brk-fig-hat); }
  .brk-hatch-q i:nth-child(3n + 1) .brk-p-coat { fill: var(--brk-figure-a); }
  .brk-hatch-q i:nth-child(3n + 1) .brk-p-band { fill: var(--brk-figure-c); }
  .brk-hatch-q i:nth-child(3n + 2) .brk-p-hat { fill: var(--brk-ember-deep); }
  .brk-hatch-q i:nth-child(4n) .brk-p-coat { fill: var(--brk-figure-b); }
  .brk-hatch-ground { position: absolute; left: 0; right: 0; bottom: 1%; height: 4px; border-radius: 4px; background: var(--brk-line-strong); }
  .brk-hatch figcaption { margin-top: 12px; font-size: 15px; color: var(--brk-muted); line-height: 1.5; }
  .brk-hatch-ring {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 46px; margin-top: 12px; padding: 0 16px 0 12px;
    border: 0; border-radius: 12px; cursor: pointer;
    background: var(--brk-tile-hi); color: var(--brk-ink);
    font-weight: 700; font-size: 15px;
  }
  .brk-hatch-ring:hover { background: var(--brk-ember-wash); }
  .brk-hatch-ring .brk-glyph { color: var(--brk-ember); }

  /* the second bell: the queue at the gate, words in its sky, a flap over its corner */
  .brk-gate { position: relative; margin: 6px -20px 0 -48px; }
  .brk-gate img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 60%; }
  .brk-gate::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 1;
    background: linear-gradient(var(--brk-scrim), var(--brk-scrim-soft));
  }
  .brk-gate-over {
    position: absolute; z-index: 2; left: 0; right: 0; top: 0;
    padding: 16px 20px 0 22px;
    font-family: var(--brk-slab); font-size: 21px; font-weight: 650; line-height: 1.18;
    color: var(--brk-ink);
  }
  .brk-flap--gate { margin: -46px 0 0 -12px; }
  .brk-flap--gate h3 { font-size: 28px; margin-bottom: 10px; }

  /* ---- the planner */
  .brk-plan { padding: 76px 0 72px; background: linear-gradient(var(--brk-sunk), var(--brk-ground)); }
  .brk-plan-in { display: grid; gap: 26px; }
  .brk-plan-head { max-width: 42em; }
  .brk-plan-head p { margin-top: 14px; color: var(--brk-muted); }
  .brk-plan-note { font-size: 15px; color: var(--brk-muted); max-width: 44em; }
}

@layer tool {
  .brk-planner { display: grid; gap: 18px; }
  .brk-planner fieldset {
    display: grid; gap: 10px;
    padding: 14px 14px 16px; border-radius: 14px; background: var(--brk-panel);
  }
  .brk-planner legend {
    float: left; width: 100%; margin-bottom: 6px;
    font-family: var(--brk-slab); font-size: 20px; font-weight: 700; color: var(--brk-ink);
  }
  .brk-planner legend span { font-family: var(--brk-sans); font-size: 14px; font-weight: 500; color: var(--brk-muted); }
  .brk-trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; clear: both; }
  .brk-trio .brk-q:first-child { grid-column: 1 / -1; }
  .brk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; clear: both; }
  .brk-q { display: grid; gap: 4px; align-content: end; margin: 0; }
  .brk-q label { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--brk-muted); }
  .brk-q input {
    width: 100%; min-width: 0; min-height: 48px; padding: 8px 10px;
    border-radius: 10px; border: 0;
    background: var(--brk-sunk); color: var(--brk-ink);
    box-shadow: inset 0 0 0 2px var(--brk-line-strong);
    font-family: var(--brk-slab); font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums;
  }
  .brk-q input:hover { box-shadow: inset 0 0 0 2px var(--brk-muted); }
  .brk-q input:focus-visible { outline: 3px solid var(--brk-amber); outline-offset: 2px; }
  .brk-q input::-webkit-calendar-picker-indicator { filter: invert(0.85); }
  .brk-planner .brk-btn { justify-self: start; }

  .brk-plan-out { display: grid; gap: 14px; }
  .brk-plan-out:focus { outline: none; }
  .brk-plan-out:focus-visible { outline: 3px solid var(--brk-amber); outline-offset: 6px; }
  .brk-out-bell {
    padding: 16px 16px 18px; border-radius: 16px;
    background: var(--brk-panel); box-shadow: inset 4px 0 0 var(--brk-amber);
  }
  .brk-out-bell--short { box-shadow: inset 4px 0 0 var(--brk-ember); }
  .brk-out-h { font-size: 24px; }
  .brk-out-when { color: var(--brk-ink); }
  .brk-out-sub { display: block; margin-top: 4px; font-family: var(--brk-sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0; color: var(--brk-muted); }
  .brk-out-verdict {
    display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 999px;
    background: var(--brk-amber-soft); color: var(--brk-ink); font-size: 14px; font-weight: 700;
  }
  .brk-out-bell--short .brk-out-verdict { background: var(--brk-ember-wash); }
  .brk-bar { width: 100%; height: 26px; margin: 14px 0 12px; }
  .brk-bar-batch { fill: var(--brk-ember); }
  .brk-bar-serve { fill: var(--brk-amber); }
  .brk-bar-eat { fill: var(--brk-line-strong); }
  .brk-bar-over { fill: var(--brk-ember-glow); }
  .brk-bar-bell { fill: var(--brk-ink); }
  .brk-out-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brk-out-grid > div { padding: 10px 12px 11px; border-radius: 10px; background: var(--brk-tile); }
  .brk-out-grid dt { font-size: 12.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; color: var(--brk-muted); }
  .brk-out-grid dd { margin-top: 3px; font-family: var(--brk-slab); font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .brk-out-grid dd small { margin-left: 4px; font-family: var(--brk-sans); font-size: 13.5px; font-weight: 500; color: var(--brk-muted); }
  .brk-out-wide { grid-column: 1 / -1; }
  .brk-out-note { font-size: 15px; color: var(--brk-muted); }
  .brk-out-problem { padding: 14px 16px; border-radius: 12px; background: var(--brk-ember-wash); font-weight: 600; }
  .brk-key { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--brk-muted); }
  .brk-key span { display: inline-flex; align-items: center; gap: 6px; }
  .brk-key span::before { content: ""; width: 14px; height: 8px; border-radius: 2px; background: var(--brk-amber); }
  .brk-key .brk-key-eat::before { background: var(--brk-line-strong); }
  .brk-key .brk-key-batch::before { background: var(--brk-ember); }
  .brk-key .brk-key-over::before { background: var(--brk-ember-glow); }
}

@layer pages {
  /* ---- index: where the stand goes, and how to ask */
  .brk-where { padding: 68px 0 30px; }
  .brk-where-in { display: grid; gap: 18px; }
  .brk-where-in p { max-width: 40em; }
  .brk-where h2 { margin-bottom: 14px; }
  .brk-towns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
  .brk-towns li {
    padding: 10px 16px; border-radius: 999px;
    background: var(--brk-tile-hi); font-family: var(--brk-slab); font-size: 20px; font-weight: 650;
  }
  .brk-ask { padding: 26px 0 30px; }
  .brk-ask-in {
    display: grid; gap: 16px;
    padding: 26px 20px 28px; border-radius: 22px;
    background:
      radial-gradient(90% 120% at 100% 0%, var(--brk-ember-wash), transparent 60%),
      var(--brk-panel);
  }
  .brk-ask-list { display: grid; gap: 8px; }
  .brk-ask-list li { position: relative; padding-left: 26px; }
  .brk-ask-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 10px; border-radius: 3px; background: var(--brk-amber); }
  .brk-ask-mail { font-family: var(--brk-slab); font-size: 26px; font-weight: 700; overflow-wrap: anywhere; }

  /* ---- sub-page opening: one picture, the title on its quiet ground, a flap across a corner */
  .brk-art { position: relative; }
  .brk-art-pic { position: relative; }
  .brk-art-pic img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
  .brk-art-pic::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(var(--brk-scrim-strong) 0%, var(--brk-scrim-deep) 72%, var(--brk-scrim-soft) 98%);
  }
  .brk-art-words { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--brk-sign-h) + 22px); padding: 0 var(--brk-pad); }
  .brk-art-words h1 { max-width: 12ch; }
  .brk-art .brk-flap { margin: -70px var(--brk-pad) 0; }
  .brk-art--before .brk-art-pic { margin-right: 16px; }
  .brk-art--before .brk-art-pic img { object-position: 30% 50%; }
  .brk-art--when .brk-art-pic { margin-left: 16px; }
  .brk-art--when .brk-art-pic img { object-position: 60% 50%; }
  .brk-art--after .brk-art-pic { margin-inline: 10px; }
  .brk-art--after .brk-art-pic img { object-position: 50% 50%; }

  .brk-sect { padding: 56px 0 8px; }
  .brk-sect-in { display: grid; gap: 18px; }
  .brk-sect-in > p, .brk-sect-head p { max-width: 40em; }
  .brk-sect-head p { margin-top: 12px; color: var(--brk-muted); }

  /* before: what the stand carries */
  .brk-kit { display: grid; gap: 8px; }
  .brk-kit > div { padding: 14px 16px; border-radius: 14px; background: var(--brk-tile); }
  .brk-kit dt { font-family: var(--brk-slab); font-size: 20px; font-weight: 700; }
  .brk-kit dd { margin-top: 2px; color: var(--brk-muted); font-size: 15.5px; line-height: 1.5; }
  .brk-kit > .brk-kit-gas { background: var(--brk-ember-wash); }

  /* before: setting up — a short clock of its own */
  .brk-setup { position: relative; display: grid; gap: 0; counter-reset: brk-step; }
  .brk-setup li { position: relative; padding: 0 0 18px 46px; }
  .brk-setup li::before {
    counter-increment: brk-step; content: counter(brk-step);
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--brk-raised); color: var(--brk-amber);
    font-family: var(--brk-slab); font-size: 18px; font-weight: 700;
  }
  .brk-setup li::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 2px; width: 4px; background: var(--brk-line); }
  .brk-setup li:last-child::after { display: none; }
  .brk-setup li:last-child::before { background: var(--brk-ember); color: var(--brk-ground); }
  .brk-setup b { display: block; font-family: var(--brk-slab); font-size: 20px; font-weight: 700; }
  .brk-setup span { color: var(--brk-muted); }

  /* before: what a site needs, as two hands of one arrangement */
  .brk-two { display: grid; gap: 12px; }
  .brk-two > div { padding: 18px 18px 20px; border-radius: 18px; background: var(--brk-panel); }
  .brk-two h3 { font-size: 22px; margin-bottom: 10px; }
  .brk-two ul { display: grid; gap: 8px; padding: 0; list-style: none; }
  .brk-two li { position: relative; padding-left: 22px; }
  .brk-two li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--brk-amber); }
  .brk-two > div + div li::before { background: var(--brk-ember); }

  .brk-due {
    display: grid; gap: 12px; padding: 22px 20px; border-radius: 20px;
    background: linear-gradient(135deg, var(--brk-raised), var(--brk-panel));
  }
  .brk-due ol { display: grid; gap: 10px; padding: 0; list-style: none; }
  .brk-due li { padding: 12px 14px; border-radius: 12px; background: var(--brk-tile); }
  .brk-due li b { display: block; font-family: var(--brk-slab); font-size: 19px; }

  /* when: an order's short path */
  .brk-path { display: grid; gap: 10px; }
  .brk-path li {
    position: relative; padding: 14px 16px 16px 18px; border-radius: 14px;
    background: var(--brk-panel);
  }
  .brk-path li:nth-child(3) { background: linear-gradient(135deg, var(--brk-ember-deep), var(--brk-panel) 70%); }
  .brk-path b { display: block; font-family: var(--brk-slab); font-size: 22px; font-weight: 700; color: var(--brk-ink); }
  .brk-path span { color: var(--brk-muted); font-size: 15.5px; }

  /* when: three temperatures on one scale */
  .brk-temps { display: grid; gap: 12px; }
  .brk-temp {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center;
    padding: 14px 16px; border-radius: 16px; background: var(--brk-panel);
  }
  .brk-temp-read { font-family: var(--brk-slab); font-size: 34px; font-weight: 800; line-height: 1; color: var(--brk-amber); }
  .brk-temp--cold .brk-temp-read { color: var(--brk-figure-c); }
  .brk-temp--guide { background: var(--brk-tile); }
  .brk-temp--guide .brk-temp-read { color: var(--brk-muted); }
  .brk-temp b { display: block; font-size: 17px; }
  .brk-temp span { display: block; color: var(--brk-muted); font-size: 15px; line-height: 1.45; }
  .brk-temp-law {
    display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px;
    background: var(--brk-amber-soft); color: var(--brk-ink); font-size: 13px; font-weight: 700;
  }
  .brk-temp--guide .brk-temp-law { background: var(--brk-tile-hi); }

  /* when: the fourteen */
  .brk-fourteen { display: flex; flex-wrap: wrap; gap: 8px; }
  .brk-fourteen li { padding: 8px 14px; border-radius: 10px; background: var(--brk-tile-hi); font-weight: 600; font-size: 15.5px; }

  .brk-probe { position: relative; margin-top: 8px; }
  .brk-probe img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 30% 50%; border-radius: 18px; }
  .brk-probe::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(90deg, var(--brk-scrim-soft) 34%, var(--brk-scrim) 100%); }

  /* after: packing down */
  .brk-pack { display: grid; gap: 8px; }
  .brk-pack li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--brk-tile); }
  .brk-pack li::before { content: ""; width: 12px; height: 12px; margin: 7px 0 0 6px; border-radius: 3px; background: var(--brk-amber); }
  .brk-pack li:nth-child(even)::before { background: var(--brk-ember); }

  .brk-place { display: grid; gap: 16px; }
  .brk-place blockquote {
    margin: 0; padding: 18px 20px; border-radius: 18px; background: var(--brk-panel);
    font-family: var(--brk-slab); font-size: 22px; line-height: 1.3;
  }

  .brk-arrive { display: grid; gap: 10px; }
  .brk-arrive li { position: relative; padding: 14px 16px 16px 58px; border-radius: 14px; background: var(--brk-panel); }
  .brk-arrive li::before {
    content: ""; position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%;
    box-shadow: inset 0 0 0 4px var(--brk-muted);
  }
  .brk-arrive b { display: block; font-family: var(--brk-slab); font-size: 20px; }
  .brk-arrive span { color: var(--brk-muted); }

  .brk-lost { padding: calc(var(--brk-sign-h) + 40px) 0 10px; }
  .brk-lost h1 { margin-bottom: 12px; }
  .brk-lost-list { display: grid; gap: 10px; margin-top: 16px; }
  .brk-lost-list a {
    display: flex; min-height: 54px; align-items: center; padding: 0 18px; border-radius: 12px;
    background: var(--brk-tile-hi); color: var(--brk-ink); font-family: var(--brk-slab); font-size: 22px; font-weight: 700; text-decoration: none;
  }
  .brk-lost-list a:hover { background: var(--brk-ember-wash); }
}

/* ------------------------------------------------------------------ booking the stand
   Served by the Worker (held days come from the store), styled here with the rest. */

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

  .brk-art--book .brk-art-pic { margin-left: 16px; }
  .brk-art--book .brk-art-pic img { object-position: 28% 50%; }

  .brk-hold-rules { display: grid; gap: 10px; }
  .brk-hold-rules li {
    position: relative; padding: 14px 16px 16px 48px; border-radius: 16px; background: var(--brk-panel);
  }
  .brk-hold-rules li::before {
    content: ""; position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--brk-ember); box-shadow: 0 0 0 5px var(--brk-ember-wash);
  }
  .brk-hold-rules b { display: block; font-family: var(--brk-slab); font-size: 21px; font-weight: 700; }
  .brk-hold-rules span { color: var(--brk-muted); }

  .brk-hold .brk-sect-head { margin-bottom: 22px; }
  .brk-hold .brk-sect-head p { margin-top: 10px; color: var(--brk-muted); }

  .brk-hold-form { display: grid; gap: 30px; }
  .brk-hold-h { font-size: 26px; margin-bottom: 6px; }
  .brk-hold-lead { color: var(--brk-muted); max-width: 42em; margin-bottom: 14px; }

  /* the weekday calendar: one row per week, Monday to Friday */
  .brk-days { display: grid; gap: 10px; padding: 16px 14px 18px; border-radius: 20px; background: var(--brk-panel); }
  .brk-hold-legend { float: left; width: 100%; font-family: var(--brk-slab); font-size: 22px; font-weight: 700; }
  .brk-hold-legend span { font-family: var(--brk-sans); font-size: 14.5px; font-weight: 500; color: var(--brk-muted); }
  .brk-days-key { clear: both; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; color: var(--brk-muted); }
  .brk-days-key span { display: inline-flex; align-items: center; gap: 6px; }
  .brk-days-key span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
  .brk-key-free::before { box-shadow: inset 0 0 0 2px var(--brk-line-strong); }
  .brk-key-held::before { background: var(--brk-ember-wash); box-shadow: inset 0 0 0 2px var(--brk-ember); }
  .brk-key-off::before { background: var(--brk-sunk); }
  .brk-key-yours::before { background: var(--brk-amber); }
  .brk-hold-tally { font-weight: 700; font-size: 15px; color: var(--brk-amber); }
  .brk-days-week { display: grid; gap: 4px; }
  .brk-days-wc { font-size: 12.5px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brk-muted); }
  .brk-days-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  /* the checkbox IS the tile (appearance: none, painted); the day's words sit on top of it */
  .brk-cal-day { position: relative; display: flex; }
  .brk-cal-day-box {
    appearance: none; -webkit-appearance: none;
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 12px;
    background: var(--brk-sunk); box-shadow: inset 0 0 0 2px var(--brk-line-strong); cursor: pointer;
  }
  .brk-cal-day-box:disabled { cursor: not-allowed; }
  .brk-cal-day label {
    position: relative; z-index: 1; flex: 1; display: grid; justify-items: center; gap: 1px;
    min-height: 66px; padding: 7px 2px 8px;
    text-align: center; line-height: 1.1; pointer-events: none;
  }
  .brk-cal-day-dow { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brk-muted); }
  .brk-cal-day-num { font-family: var(--brk-slab); font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; }
  .brk-cal-day-state { font-size: 11.5px; color: var(--brk-muted); }
  .brk-cal-day--free .brk-cal-day-box:hover { box-shadow: inset 0 0 0 2px var(--brk-amber); }
  .brk-cal-day-box:checked { background: var(--brk-amber); box-shadow: inset 0 0 0 2px var(--brk-amber); }
  .brk-cal-day-box:checked + label { color: var(--brk-ground); }
  .brk-cal-day-box:checked + label .brk-cal-day-dow,
  .brk-cal-day-box:checked + label .brk-cal-day-state { color: var(--brk-ground); }
  .brk-cal-day-box:focus-visible { outline: 3px solid var(--brk-amber); outline-offset: 3px; }
  .brk-cal-day--held .brk-cal-day-box { background: var(--brk-ember-wash); box-shadow: inset 0 0 0 2px var(--brk-ember); }
  .brk-cal-day--held .brk-cal-day-state { color: var(--brk-ink); }
  .brk-cal-day--bank .brk-cal-day-box, .brk-cal-day--soon .brk-cal-day-box, .brk-cal-day--later .brk-cal-day-box { box-shadow: none; }
  .brk-cal-day--bank .brk-cal-day-num, .brk-cal-day--soon .brk-cal-day-num, .brk-cal-day--later .brk-cal-day-num { color: var(--brk-muted); }
  .brk-cal-day--yours .brk-cal-day-box:not(:checked) { box-shadow: inset 0 0 0 2px var(--brk-amber); }

  /* fields */
  .brk-hold-break, .brk-hold-figures { padding: 14px 14px 16px; border-radius: 16px; background: var(--brk-panel); }
  .brk-hold-break { display: grid; gap: 10px; margin-bottom: 12px; }
  .brk-hold-break legend {
    float: left; width: 100%; font-family: var(--brk-slab); font-size: 20px; font-weight: 700;
  }
  .brk-hold-break legend span { font-family: var(--brk-sans); font-size: 14px; font-weight: 500; color: var(--brk-muted); }
  .brk-hold-trio { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brk-hold-trio .brk-hold-q:first-child { grid-column: 1 / -1; }
  .brk-hold-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .brk-hold-figures { margin-bottom: 14px; }
  .brk-hold-figures summary {
    min-height: 44px; display: flex; align-items: center; cursor: pointer;
    font-family: var(--brk-slab); font-size: 19px; font-weight: 700;
  }
  .brk-hold-grid { display: grid; gap: 12px; }
  .brk-hold-q { display: grid; gap: 4px; align-content: start; margin: 0; }
  .brk-hold-q label { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
  .brk-hold-opt { font-weight: 500; color: var(--brk-muted); }
  .brk-hold-hint { font-size: 14px; line-height: 1.4; color: var(--brk-muted); }
  .brk-hold-q input, .brk-hold-q select, .brk-hold-q textarea, .brk-find-form input {
    width: 100%; min-width: 0; min-height: 48px; padding: 9px 11px;
    border: 0; border-radius: 10px; background: var(--brk-sunk); color: var(--brk-ink);
    box-shadow: inset 0 0 0 2px var(--brk-line-strong);
    font-family: var(--brk-sans); font-size: 17px;
  }
  .brk-hold-trio input, .brk-hold-duo input {
    font-family: var(--brk-slab); font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums;
  }
  .brk-hold-q textarea { resize: vertical; line-height: 1.45; }
  .brk-hold-q input:hover, .brk-hold-q select:hover, .brk-hold-q textarea:hover, .brk-find-form input:hover { box-shadow: inset 0 0 0 2px var(--brk-muted); }
  .brk-hold-q input:focus-visible, .brk-hold-q select:focus-visible, .brk-hold-q textarea:focus-visible,
  .brk-find-form input:focus-visible { outline: 3px solid var(--brk-amber); outline-offset: 2px; }
  .brk-hold-q input::-webkit-calendar-picker-indicator { filter: invert(0.85); }
  .brk-hold-q--bad input, .brk-hold-q--bad select, .brk-hold-q--bad textarea { box-shadow: inset 0 0 0 2px var(--brk-ember); }
  .brk-hold-err { font-size: 14.5px; font-weight: 650; color: var(--brk-ink); }
  .brk-hold-err::before { content: "! "; color: var(--brk-ember); font-weight: 800; }
  .brk-hold-err--days { margin-top: -18px; }
  .brk-hold-plan { margin-top: 4px; }
  .brk-hold-wait { padding: 14px 16px; border-radius: 14px; background: var(--brk-tile); color: var(--brk-muted); }
  .brk-hold-alert, .brk-find-notice {
    margin-bottom: 20px; padding: 16px 18px; border-radius: 16px;
    background: var(--brk-ember-wash); box-shadow: inset 4px 0 0 var(--brk-ember);
  }
  .brk-find-notice { background: var(--brk-amber-wash); box-shadow: inset 4px 0 0 var(--brk-amber); }
  .brk-hold-alert h2 { font-size: 22px; margin-bottom: 8px; }
  .brk-hold-alert ul { display: grid; gap: 4px; margin: 0 0 8px; padding-left: 20px; }
  .brk-hold-alert a { color: var(--brk-ink); }
  .brk-hold-send {
    display: grid; gap: 14px; justify-items: start; padding: 18px 18px 20px; border-radius: 18px;
    background: linear-gradient(135deg, var(--brk-raised), var(--brk-panel));
  }
  .brk-hold-send p { max-width: 40em; }

  /* pages with no art: received, check or change */
  .brk-plain { padding: calc(var(--brk-sign-h) + 40px) 0 20px; }
  .brk-plain-in { display: grid; gap: 18px; max-width: 900px; }
  .brk-plain-lead { max-width: 40em; color: var(--brk-muted); }
  .brk-plain-foot { color: var(--brk-muted); }
  .brk-kept-ref { padding: 20px 20px 22px; border-radius: 20px; background: var(--brk-panel); box-shadow: inset 0 3px 0 var(--brk-ember); }
  .brk-kept-ref p + p { margin-top: 8px; }
  .brk-kept-code {
    font-family: var(--brk-slab); font-size: 38px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.1;
    color: var(--brk-amber); overflow-wrap: anywhere;
  }
  .brk-kept-days h2, .brk-kept-next h2 { font-size: 26px; margin-bottom: 10px; }
  .brk-kept-days ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .brk-kept-days li { padding: 8px 14px; border-radius: 10px; background: var(--brk-tile-hi); font-weight: 650; }
  .brk-path-steps { display: grid; gap: 8px; margin: 0 0 12px; }
  .brk-path-steps li { position: relative; padding: 12px 14px 13px 46px; border-radius: 14px; background: var(--brk-tile); }
  .brk-path-steps li::before {
    content: ""; position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; border-radius: 50%;
    box-shadow: inset 0 0 0 3px var(--brk-muted);
  }
  .brk-path-steps .brk-step-on { background: var(--brk-amber-wash); }
  .brk-path-steps .brk-step-on::before { background: var(--brk-amber); box-shadow: 0 0 0 4px var(--brk-amber-soft); }
  .brk-path-steps b { display: block; font-family: var(--brk-slab); font-size: 19px; }
  .brk-path-steps span { color: var(--brk-muted); }
  .brk-kept-mail { font-size: 15px; color: var(--brk-muted); max-width: 44em; }
  .brk-find-form { display: grid; gap: 14px; max-width: 520px; padding: 18px 18px 20px; border-radius: 18px; background: var(--brk-panel); }
  .brk-find-change, .brk-find-detail, .brk-find-cancel { display: grid; gap: 10px; }
  .brk-find-change .brk-hold-form { display: block; }
  .brk-find-bells-h { font-size: 21px; margin-top: 12px; }
  .brk-find-cancel { padding: 18px 18px 20px; border-radius: 18px; background: var(--brk-sunk); }
  .brk-find-confirm { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 650; }
  .brk-find-confirm input {
    appearance: none; -webkit-appearance: none; flex: none; width: 26px; height: 26px; margin: 0; border: 0; border-radius: 6px;
    background: var(--brk-sunk); box-shadow: inset 0 0 0 2px var(--brk-line-strong); cursor: pointer;
  }
  .brk-find-confirm input:checked { background: var(--brk-ember); box-shadow: inset 0 0 0 2px var(--brk-ember), inset 0 0 0 6px var(--brk-sunk); }
  .brk-find-confirm input:focus-visible { outline: 3px solid var(--brk-amber); outline-offset: 3px; }
  .brk-kept-none { padding: 20px; border-radius: 18px; background: var(--brk-panel); }
  .brk-kept-none h2 { font-size: 26px; margin-bottom: 8px; }
}

@media (min-width: 520px) {
  .brk-hold-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-hold-trio .brk-hold-q:first-child { grid-column: auto; }
  .brk-cal-day label { min-height: 72px; }
}

@media (min-width: 768px) {
  .brk-hold-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-hold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .brk-hold-q--wide { grid-column: 1 / -1; }
  .brk-art--book .brk-art-pic { margin-left: 64px; }
  .brk-art--book .brk-art-pic::after { background: linear-gradient(100deg, var(--brk-scrim-strong) 0%, var(--brk-scrim-deep) 46%, var(--brk-scrim-soft) 74%), linear-gradient(var(--brk-scrim) 0%, var(--brk-scrim-soft) 60%); }
  .brk-art--book .brk-flap { margin: -84px 24px 0 auto; }
  .brk-days { padding: 20px 20px 22px; }
  .brk-days-week { grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 10px; }
  .brk-kept-code { font-size: 48px; }
}

@media (min-width: 1024px) {
  .brk-art--book .brk-art-words { padding-left: 104px; }
  .brk-art--book .brk-flap { margin: -150px 24px 0 auto; }
  .brk-hold-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; align-items: start; }
  .brk-hold-form > .brk-days, .brk-hold-form > .brk-hold-err--days, .brk-hold-form > .brk-hold-send { grid-column: 1 / -1; }
  .brk-hold-form > .brk-hold-bells { grid-row: span 2; }
}

/* ------------------------------------------------------------------ wider screens */

/* the narrowest phones (under 360 px) keep the sign and the Menu button on one row; from 360 px
   both take their usual size */
@media (min-width: 360px) {
  :root { --brk-name-h: 20px; }
  .brk-menu-open { padding: 0 18px 0 14px; }
}

@media (min-width: 520px) {
  .brk-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-trio .brk-q:first-child { grid-column: auto; }
}

@media (min-width: 768px) {
  :root { --brk-pad: 32px; --brk-name-h: 27px; --brk-van-k: 5.2; }
  h1 { font-size: 56px; }
  h2 { font-size: 40px; }
  .brk-mast { padding-top: 14px; }
  .brk-chalk-frame { padding: 24px 24px 26px; }
  .brk-chalk-item { grid-column: span var(--brk-span-w, 6); }
  .brk-chalk-item--half .brk-chalk-name { font-size: 27px; }
  .brk-chalk-item--first .brk-chalk-name { font-size: 44px; }
  .brk-chalk-link { min-height: 96px; }

  .brk-open-art { margin-left: 40px; }
  .brk-open-art img { aspect-ratio: 5 / 4; object-position: 66% 82%; }
  .brk-open-sky { padding-left: 40px; max-width: 760px; }
  .brk-open-title { max-width: 14ch; }
  .brk-open-art::after { background: linear-gradient(90deg, var(--brk-scrim-deep) 0%, var(--brk-scrim) 34%, var(--brk-scrim-mid) 50%, var(--brk-scrim-soft) 64%); }
  .brk-open .brk-flap { width: min(560px, 74vw); margin: -104px 0 0 14px; padding: 28px 30px 30px; }

  .brk-band { grid-template-columns: 52px minmax(0, 1fr); column-gap: 22px; }
  .brk-band-rail::before { left: 24px; }
  .brk-band-dot { left: 16px; }
  .brk-band-bell { left: 4px; width: 44px; height: 44px; }
  .brk-gate { margin: 8px 0 0 -10px; }
  .brk-gate-over { font-size: 26px; padding: 22px 28px 0 30px; max-width: 30ch; }
  .brk-flap--gate { width: 78%; margin: -70px 0 0 auto; transform: translateX(26px); }

  .brk-reg-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .brk-reg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-reg-wide { grid-column: span 2; }

  .brk-art-pic img { aspect-ratio: 4 / 3; }
  .brk-art-words h1 { max-width: 14ch; }
  .brk-art--when .brk-art-words { left: auto; right: 0; width: 58%; }
  .brk-art--when .brk-art-pic img { object-position: 30% 50%; }
  .brk-art--when .brk-art-pic::after { background: linear-gradient(270deg, var(--brk-scrim-strong) 0%, var(--brk-scrim-strong) 40%, var(--brk-scrim) 62%, var(--brk-scrim-soft) 86%); }
  .brk-art--after .brk-art-pic::after { background: linear-gradient(105deg, var(--brk-scrim-strong) 0%, var(--brk-scrim) 42%, var(--brk-scrim-soft) 66%), linear-gradient(var(--brk-scrim) 0%, var(--brk-scrim-soft) 55%); }
  .brk-art--before .brk-art-pic::after { background: linear-gradient(90deg, var(--brk-scrim-strong) 0%, var(--brk-scrim-deep) 50%, var(--brk-scrim-soft) 78%); }
  .brk-art--before .brk-art-pic { margin-right: 64px; }
  .brk-art--when .brk-art-pic { margin-left: 64px; }
  .brk-art--after .brk-art-pic { margin-inline: 32px; }
  .brk-art .brk-flap { width: min(600px, 80%); }
  .brk-art--before .brk-flap { margin: -84px 24px 0 auto; }
  .brk-art--when .brk-flap { margin: -84px 0 0 30px; }
  .brk-art--after .brk-flap { margin: -84px 0 0 auto; transform: translateX(-12px); }

  .brk-kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-path { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .brk-path li { padding-top: 18px; }
  .brk-temps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-temp { grid-template-columns: 1fr; align-content: start; }
  .brk-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-arrive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-ask-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 34px 36px; }
}

@media (min-width: 1024px) {
  :root { --brk-pad: 48px; --brk-name-h: 33px; }
  h1 { font-size: 72px; }
  h2 { font-size: 46px; }
  .brk-open-art img { aspect-ratio: auto; height: min(94vh, 880px); object-position: 72% 78%; }
  .brk-open-sky { top: calc(var(--brk-sign-h) + 42px); padding-left: 56px; max-width: 820px; }
  .brk-open-title { max-width: 12ch; }
  .brk-open .brk-flap { width: 560px; margin: -210px 0 0 18px; }

  .brk-day-grid { grid-template-columns: minmax(0, 1fr) 372px; column-gap: 44px; align-items: start; }
  .brk-hatch { position: sticky; top: 24px; grid-column: 2; grid-row: 1; }
  .brk-bands { grid-column: 1; grid-row: 1; }
  .brk-band--bell h3 { font-size: 36px; }

  .brk-plan-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; align-items: start; }
  .brk-plan-head { grid-column: 1 / -1; }
  .brk-plan-note { grid-column: 1 / -1; }

  .brk-where-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }

  .brk-art-pic img { aspect-ratio: auto; height: min(84vh, 780px); }
  .brk-art-words { top: calc(var(--brk-sign-h) + 40px); }
  .brk-art--before .brk-art-words { padding-left: 72px; }
  .brk-art--when .brk-art-words { left: auto; width: min(46%, 620px); right: 0; padding-right: 64px; }
  .brk-art--after .brk-art-words { padding-left: 88px; }
  .brk-art .brk-flap { width: 600px; }
  .brk-art--before .brk-flap { margin: -150px 24px 0 auto; }
  .brk-art--when .brk-flap { margin: -170px 0 0 34px; }
  .brk-art--after .brk-flap { margin: -150px 0 0 auto; transform: translateX(-16px); }

  .brk-sect-in.brk-sect-in--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; }
  .brk-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-path { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .brk-place { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; align-items: start; }
}

@media (min-width: 1400px) {
  h1 { font-size: 82px; }
  .brk-open .brk-flap { width: 600px; }
}

/* ------------------------------------------------------------------ motion, all of it opt-in */

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .brk-sign-steam { animation: brk-yoyo 4.8s ease-in-out infinite alternate; }
    .brk-hatch-unit .brk-hatch-steam { animation: brk-yoyo 3.9s ease-in-out infinite alternate; }
    .brk-hatch-wisps i { animation: brk-wisp 3.2s ease-in-out infinite alternate; transition: opacity 0.6s ease; }
    .brk-hatch-wisps i:nth-child(2) { animation-duration: 4.1s; animation-delay: -1.3s; }
    .brk-hatch-wisps i:nth-child(3) { animation-duration: 3.6s; animation-delay: -2.2s; }
    .brk-hatch-shutter { transition: transform 0.75s cubic-bezier(0.62, 0.04, 0.28, 1); }
    .brk-hatch-glow { transition: opacity 0.6s ease; }
    .brk-hatch[data-run]:not([data-open]) .brk-hatch-glow { opacity: 0.08; }
    .brk-hatch-q i { transition: transform 1.05s cubic-bezier(0.45, 0.05, 0.35, 1); }
    .brk-hatch-q i.brk-walk svg { animation: brk-step 0.42s ease-in-out infinite alternate; }
    .brk-hatch[data-bell] .brk-hatch-bellmark .brk-glyph { animation: brk-ring 0.22s ease-in-out 6 alternate; }
    .brk-hatch[data-lull] .brk-hatch-steam { opacity: 0.55; }

    .brk-play [data-brk-step] { opacity: 0; transform: translateY(16px); }
    .brk-play [data-brk-step].brk-shown {
      opacity: 1; transform: none;
      transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .brk-js .brk-chalk { transition: opacity 0.22s ease, visibility 0s linear 0.22s; }
    .brk-js .brk-chalk[data-open] { transition: opacity 0.22s ease; }
    .brk-js .brk-chalk-frame { transform: translateY(14px) scale(0.985); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
    .brk-js .brk-chalk[data-open] .brk-chalk-frame { transform: none; }
    .brk-chalk-link:hover { transform: translateY(-2px); }
    .brk-btn, .brk-menu-open, .brk-hatch-ring { transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
    .brk-btn:hover, .brk-menu-open:hover, .brk-hatch-ring:hover { transform: translateY(-2px); }
    .brk-more { transition: color 0.2s ease, border-color 0.2s ease; }
    .brk-more:hover::after { transform: translateX(3px); }
    .brk-more::after { transition: transform 0.2s ease; display: inline-block; }
  }

  @keyframes brk-yoyo {
    from { transform: translateY(1.5%); opacity: 0.88; }
    to { transform: translateY(-2.5%); opacity: 1; }
  }
  @keyframes brk-wisp {
    from { transform: translateY(10%) scale(0.92); }
    to { transform: translateY(-16%) scale(1.06); }
  }
  @keyframes brk-step {
    from { transform: translateY(0); }
    to { transform: translateY(-3%); }
  }
  @keyframes brk-ring {
    from { transform: rotate(-16deg); }
    to { transform: rotate(16deg); }
  }
}

/* ------------------------------------------------------------------ realism round, 2026-11-13
   The company's own pages (contact, privacy, terms, complaints, accessibility), the menu with its
   allergen table, the pitch, a booked day and the questions page. Base rules in the pages layer;
   wider screens below, unlayered like the rest of this file's media rules. */

@layer pages {
  /* ---- a company page opening: the title on the ground, a picture beside it, a stripe of ember */
  .brk-small { padding: calc(var(--brk-sign-h) + 34px) 0 6px; }
  .brk-small-in { display: grid; gap: 24px; }
  .brk-small-words h1 { max-width: 14ch; }
  .brk-small-lede { margin-top: 16px; font-size: 18px; max-width: 36em; }
  .brk-small-date { margin-top: 12px; color: var(--brk-muted); font-size: 14.5px; }
  .brk-small-pic { position: relative; margin: 0 0 0 18px; }
  .brk-small-pic::before {
    content: ""; position: absolute; z-index: 1; left: -12px; top: 22px; bottom: 22px; width: 6px;
    border-radius: 3px; background: var(--brk-ember);
  }
  .brk-small-pic img {
    width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
    border-radius: 4px 22px 22px 22px; box-shadow: 0 24px 50px var(--brk-shadow);
  }
  .brk-small--touch .brk-small-pic img { object-position: 50% 82%; }
  .brk-small--privacy .brk-small-pic img { object-position: 34% 60%; }
  .brk-small--terms .brk-small-pic img { object-position: 72% 74%; }
  .brk-small--complaints .brk-small-pic img { object-position: 26% 50%; }
  .brk-small--access .brk-small-pic img { object-position: 66% 64%; }

  .brk-onpage { padding: 28px 0 0; }
  .brk-onpage-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .brk-onpage-list a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
    border-radius: 999px; background: var(--brk-panel); color: var(--brk-ink);
    box-shadow: inset 0 0 0 2px var(--brk-line); font-size: 15px; font-weight: 650; text-decoration: none;
  }
  .brk-onpage-list a:hover { box-shadow: inset 0 0 0 2px var(--brk-amber); }

  code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9em;
    padding: 1px 6px; border-radius: 6px; background: var(--brk-sunk); color: var(--brk-amber);
  }

  /* ---- new sub-page openings */
  .brk-art--cooks .brk-art-pic { margin-left: 16px; }
  .brk-art--cooks .brk-art-pic img { object-position: 74% 60%; }
  .brk-art--pitch .brk-art-pic { margin-right: 16px; }
  .brk-art--pitch .brk-art-pic img { object-position: 58% 60%; }
  .brk-art--day .brk-art-pic { margin-inline: 10px; }
  .brk-art--day .brk-art-pic img { object-position: 64% 60%; }
  .brk-art--asks .brk-art-pic { margin-left: 16px; }
  .brk-art--asks .brk-art-pic img { object-position: 76% 72%; }

  /* ---- the menu */
  .brk-first {
    padding: 22px 20px 22px 24px; border-radius: 4px 20px 20px 20px;
    background: var(--brk-panel); box-shadow: inset 5px 0 0 var(--brk-amber);
  }
  .brk-first h2 { font-size: 28px; margin-bottom: 10px; }
  .brk-first p { max-width: 46em; }
  .brk-first-date { margin-top: 12px; color: var(--brk-muted); font-size: 14.5px; }
  .brk-carte .brk-kick .brk-glyph { width: 20px; height: 20px; }
  .brk-dishes { display: grid; gap: 12px; }
  .brk-dish {
    display: grid; gap: 8px; align-content: start;
    padding: 18px 18px 14px; border-radius: 16px; background: var(--brk-panel);
  }
  .brk-dish:target { box-shadow: inset 0 0 0 3px var(--brk-amber); }
  .brk-dish h3 { font-size: 24px; }
  .brk-dish-line { color: var(--brk-muted); font-size: 15.5px; line-height: 1.5; }
  .brk-dish-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .brk-dish-tag {
    padding: 3px 10px; border-radius: 999px; background: var(--brk-tile-hi);
    font-size: 13px; font-weight: 650; line-height: 1.5;
  }
  .brk-dish-tag--griddle { background: var(--brk-amber-wash); box-shadow: inset 0 0 0 2px var(--brk-amber-soft); }
  .brk-dish-label {
    margin-top: 4px; font-size: 12.5px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brk-amber);
  }
  .brk-dish-has { display: flex; flex-wrap: wrap; gap: 6px; }
  .brk-dish-has li { padding: 5px 11px; border-radius: 8px; background: var(--brk-ember-wash); font-size: 14.5px; font-weight: 650; }
  .brk-dish-has .brk-dish-none { background: var(--brk-tile); color: var(--brk-muted); font-weight: 500; }
  .brk-dish-in summary {
    display: flex; align-items: center; min-height: 44px; cursor: pointer;
    font-size: 15px; font-weight: 650; color: var(--brk-amber);
  }
  .brk-dish-in dl { display: grid; gap: 8px; margin: 2px 0 6px; }
  .brk-dish-in dt { font-size: 15px; font-weight: 700; }
  .brk-dish-in dd { margin: 0; color: var(--brk-muted); font-size: 14.5px; line-height: 1.45; }
  .brk-dishes--extras .brk-dish, .brk-dishes--drinks .brk-dish { background: var(--brk-tile); padding: 14px 16px 10px; }
  .brk-dishes--extras .brk-dish h3, .brk-dishes--drinks .brk-dish h3 { font-size: 20px; }

  .brk-mx-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--brk-muted); }
  .brk-mx-key span::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%;
    vertical-align: -1px;
  }
  .brk-mx-key-yes::before { background: var(--brk-ember); }
  .brk-mx-key-no::before { background: var(--brk-line-strong); }
  /* position: the screen-reader words in the cells are absolutely placed; without a positioned frame
     their containing block is the page, they escape the frame's scroll and widen the whole page */
  .brk-mx-frame { position: relative; min-width: 0; max-width: 100%; overflow-x: auto; border-radius: 16px; background: var(--brk-panel); }
  .brk-mx { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
  .brk-mx caption { caption-side: top; padding: 14px 16px 4px; text-align: left; color: var(--brk-muted); font-size: 14px; }
  .brk-mx thead th { padding: 10px 2px 12px; vertical-align: bottom; font-size: 13px; font-weight: 650; }
  .brk-mx thead th[data-a] span, .brk-mx-gridh span {
    display: inline-block; max-height: 150px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  }
  .brk-mx-corner { padding-left: 16px !important; text-align: left; vertical-align: bottom; }
  .brk-mx th[scope="row"], .brk-mx-corner {
    position: sticky; left: 0; z-index: 1; background: var(--brk-panel);
    min-width: 172px; text-align: left;
  }
  .brk-mx th[scope="row"] { padding: 9px 12px 9px 16px; font-weight: 650; box-shadow: inset 0 -1px 0 var(--brk-line); }
  .brk-mx th[scope="row"] a { color: var(--brk-ink); text-decoration: none; }
  .brk-mx th[scope="row"] a:hover { color: var(--brk-amber); text-decoration: underline; }
  .brk-mx td { min-width: 38px; padding: 9px 2px; text-align: center; box-shadow: inset 0 -1px 0 var(--brk-line); }
  .brk-mx-yes i {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    background: var(--brk-ember); box-shadow: 0 0 0 3px var(--brk-ember-wash);
  }
  .brk-mx-no { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brk-line-strong); }
  .brk-mx-group th { padding: 16px 16px 6px; text-align: left; box-shadow: none; }
  .brk-mx-group th span { position: sticky; left: 16px; font-family: var(--brk-slab); font-size: 18px; font-weight: 700; color: var(--brk-amber); }
  .brk-mx-grid { padding-inline: 10px !important; font-size: 13.5px; font-weight: 650; color: var(--brk-amber); }
  .brk-mx-grid--apart { color: var(--brk-muted); font-weight: 500; }
  .brk-mx tr[data-hit] th[scope="row"] { box-shadow: inset 5px 0 0 var(--brk-ember), inset 0 -1px 0 var(--brk-line); }
  .brk-mx-after { max-width: 46em; color: var(--brk-muted); }
  /* one rule per allergen: the sorting below the table lights the columns it was asked about */
  .brk-mx.brk-on-celery [data-a="celery"], .brk-mx.brk-on-gluten [data-a="gluten"],
  .brk-mx.brk-on-crustaceans [data-a="crustaceans"], .brk-mx.brk-on-eggs [data-a="eggs"],
  .brk-mx.brk-on-fish [data-a="fish"], .brk-mx.brk-on-lupin [data-a="lupin"],
  .brk-mx.brk-on-milk [data-a="milk"], .brk-mx.brk-on-molluscs [data-a="molluscs"],
  .brk-mx.brk-on-mustard [data-a="mustard"], .brk-mx.brk-on-peanuts [data-a="peanuts"],
  .brk-mx.brk-on-sesame [data-a="sesame"], .brk-mx.brk-on-soya [data-a="soya"],
  .brk-mx.brk-on-sulphites [data-a="sulphites"], .brk-mx.brk-on-treenuts [data-a="treenuts"] {
    background: var(--brk-amber-wash);
  }

  /* tick tiles: the whole tile is the box (menu sorting, and the dietary note on a booked day) */
  .brk-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .brk-tick { position: relative; display: flex; }
  .brk-tick-box {
    appearance: none; -webkit-appearance: none;
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 12px;
    background: var(--brk-sunk); box-shadow: inset 0 0 0 2px var(--brk-line-strong); cursor: pointer;
  }
  .brk-tick label {
    position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 52px; padding: 8px 12px; pointer-events: none;
    font-size: 15px; font-weight: 650; line-height: 1.25;
  }
  .brk-tick label::before {
    content: ""; flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--brk-muted);
  }
  .brk-tick-box:hover { box-shadow: inset 0 0 0 2px var(--brk-amber); }
  .brk-tick-box:checked { background: var(--brk-ember-wash); box-shadow: inset 0 0 0 2px var(--brk-ember); }
  .brk-tick-box:checked + label::before { background: var(--brk-ember); box-shadow: inset 0 0 0 2px var(--brk-ember), inset 0 0 0 5px var(--brk-sunk); }
  .brk-tick-box:focus-visible { outline: 3px solid var(--brk-amber); outline-offset: 3px; }

  .brk-pick { display: grid; gap: 16px; padding: 18px; border-radius: 18px; background: var(--brk-panel); }
  .brk-pick legend { margin-bottom: 10px; font-family: var(--brk-slab); font-size: 22px; font-weight: 700; }
  .brk-pick-rule { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--brk-tile); font-size: 15px; line-height: 1.5; }
  .brk-pick-out { display: grid; gap: 14px; }
  .brk-pick-wait, .brk-pick-nojs { color: var(--brk-muted); }
  .brk-js .brk-pick-nojs, .brk-nojs .brk-pick-wait { display: none; }
  .brk-pick-col h3 { margin-bottom: 8px; font-size: 19px; }
  .brk-pick-col ul { display: grid; gap: 6px; }
  .brk-pick-col li { padding: 8px 12px; border-radius: 10px; background: var(--brk-tile); font-size: 15px; font-weight: 650; }
  .brk-pick-col--has li { box-shadow: inset 4px 0 0 var(--brk-ember); }
  .brk-pick-col li small { display: block; font-size: 13.5px; font-weight: 500; color: var(--brk-muted); }

  .brk-share-in { display: grid; gap: 18px; }
  .brk-share-words h2 { margin-bottom: 14px; }
  .brk-ask-in h2 { margin-bottom: 14px; }
  .brk-share-pic img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 40% 50%; border-radius: 22px 22px 22px 4px; }
  .brk-share-list { display: grid; gap: 8px; margin-top: 16px; }
  .brk-share-list li { padding: 12px 14px; border-radius: 12px; background: var(--brk-tile); }
  .brk-share-list b { display: block; font-family: var(--brk-slab); font-size: 19px; }
  .brk-share-list span { color: var(--brk-muted); font-size: 15.5px; }
  .brk-share-warn { padding: 16px 18px; border-radius: 14px; background: var(--brk-ember-deep); color: var(--brk-ink); font-weight: 650; }
  .brk-diet-in { background: radial-gradient(90% 120% at 0% 100%, var(--brk-amber-wash), transparent 60%), var(--brk-panel); }

  /* ---- the pitch */
  .brk-need { display: grid; gap: 14px; }
  .brk-need-col { padding: 18px; border-radius: 18px; background: var(--brk-panel); }
  .brk-need-col--stand { background: linear-gradient(160deg, var(--brk-raised), var(--brk-panel) 60%); }
  .brk-need-col h3 { margin-bottom: 12px; font-size: 24px; }
  .brk-need-list { display: grid; gap: 8px; }
  .brk-need-list > div { padding: 12px 14px; border-radius: 12px; background: var(--brk-tile); }
  .brk-need-col--stand .brk-need-list > div { box-shadow: inset 4px 0 0 var(--brk-amber); }
  .brk-need-list dt { font-weight: 700; }
  .brk-need-list dd { color: var(--brk-muted); font-size: 15.5px; line-height: 1.5; }

  .brk-plot-key { display: grid; gap: 8px; margin-top: 16px; counter-reset: brk-plot; }
  .brk-plot-key li { position: relative; padding: 2px 0 2px 42px; }
  .brk-plot-key li::before {
    counter-increment: brk-plot; content: counter(brk-plot);
    position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--brk-amber); color: var(--brk-ground); font-family: var(--brk-slab); font-size: 17px; font-weight: 800;
  }
  .brk-plot { padding: 14px; border-radius: 20px; background: var(--brk-sunk); }
  .brk-plot svg { width: 100%; height: auto; }
  .brk-plot figcaption { margin-top: 10px; color: var(--brk-muted); font-size: 15px; }
  .brk-plot-wall { fill: var(--brk-wood); }
  .brk-plot-socket { fill: var(--brk-figure-c); }
  .brk-plot-cable { fill: none; stroke: var(--brk-amber); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .brk-plot-room { fill: var(--brk-tile); stroke: var(--brk-line-strong); stroke-width: 3; stroke-dasharray: 10 8; }
  .brk-plot-bar { fill: none; stroke: var(--brk-muted); stroke-width: 7; stroke-linecap: round; }
  .brk-plot-cage { fill: var(--brk-ember-wash); stroke: var(--brk-ember); stroke-width: 4; }
  .brk-plot-unit { fill: var(--brk-raised); stroke: var(--brk-ink); stroke-width: 3; }
  .brk-plot-flue { fill: var(--brk-amber); }
  .brk-plot-awning { fill: var(--brk-amber-soft); }
  .brk-plot-ledge { fill: var(--brk-amber); }
  .brk-plot-q circle { fill: var(--brk-figure-b); }
  .brk-plot-line { fill: none; stroke: var(--brk-amber); stroke-width: 5; stroke-dasharray: 16 12; }
  .brk-plot-route, .brk-plot-arrow { fill: none; stroke: var(--brk-muted); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .brk-plot-pin circle { fill: var(--brk-amber); }
  .brk-plot-pin text { fill: var(--brk-ground); font-family: var(--brk-slab); font-size: 24px; font-weight: 800; text-anchor: middle; }

  .brk-tape { display: grid; gap: 10px; counter-reset: brk-tape; }
  .brk-tape li { position: relative; padding: 14px 16px 16px 66px; border-radius: 14px; background: var(--brk-panel); }
  .brk-tape li::before {
    counter-increment: brk-tape; content: counter(brk-tape);
    position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
    background: var(--brk-amber); color: var(--brk-ground); font-family: var(--brk-slab); font-size: 20px; font-weight: 800;
  }
  .brk-tape b { display: block; margin-bottom: 4px; font-family: var(--brk-slab); font-size: 20px; line-height: 1.2; }
  .brk-tape span { color: var(--brk-muted); font-size: 15.5px; }

  .brk-supply-in { display: grid; gap: 18px; }
  .brk-supply-pic img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 70% 60%; border-radius: 4px 22px 22px 22px; }
  .brk-supply { display: grid; gap: 10px; margin-top: 14px; }
  .brk-supply > div { padding: 14px 16px; border-radius: 14px; background: var(--brk-panel); }
  .brk-supply > div p + p { margin-top: 4px; }
  .brk-supply-head { margin-bottom: 4px; font-family: var(--brk-slab); font-size: 22px; font-weight: 700; color: var(--brk-amber); }

  /* ---- a day at your gate */
  .brk-arc { display: grid; gap: 10px; }
  .brk-arc li { padding: 16px 18px 18px; border-radius: 16px; background: var(--brk-panel); }
  .brk-arc li:first-child { box-shadow: inset 0 4px 0 var(--brk-amber); }
  .brk-arc li:last-child { box-shadow: inset 0 4px 0 var(--brk-ember); }
  .brk-arc b { display: block; margin-bottom: 4px; font-family: var(--brk-slab); font-size: 22px; }
  .brk-arc span { color: var(--brk-muted); }

  .brk-eve-in { display: grid; gap: 18px; }
  .brk-eve-pic img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 36% 55%; border-radius: 22px 4px 22px 22px; }
  .brk-eve-list { display: grid; gap: 8px; margin-top: 14px; }
  .brk-eve-list li { position: relative; padding: 10px 14px 10px 40px; border-radius: 12px; background: var(--brk-tile); }
  .brk-eve-list li::before { content: ""; position: absolute; left: 14px; top: 1.05em; width: 14px; height: 10px; border-radius: 3px; background: var(--brk-amber); }

  .brk-clock { display: grid; }
  .brk-clock li { position: relative; padding: 0 0 20px 92px; }
  .brk-clock li::before { content: ""; position: absolute; left: 70px; top: 22px; bottom: 0; width: 4px; background: var(--brk-line); }
  .brk-clock li:last-child::before { display: none; }
  .brk-clock li::after {
    content: ""; position: absolute; left: 65px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--brk-raised); box-shadow: inset 0 0 0 3px var(--brk-muted);
  }
  .brk-clock .brk-clock-bell::after { background: var(--brk-ember); box-shadow: 0 0 0 5px var(--brk-ember-wash); }
  .brk-clock time { position: absolute; left: 0; top: 0; font-family: var(--brk-slab); font-size: 19px; font-weight: 800; line-height: 1.3; }
  .brk-clock .brk-clock-bell time { color: var(--brk-amber); }
  .brk-clock b { display: block; font-family: var(--brk-slab); font-size: 21px; }
  .brk-clock span { color: var(--brk-muted); }

  /* ---- questions */
  .brk-ask-qs { display: grid; gap: 10px; }
  .brk-ask-q { padding: 16px 18px 18px; border-radius: 16px; background: var(--brk-panel); }
  .brk-ask-q h3 { margin-bottom: 6px; font-size: 21px; }
  .brk-asks--2 .brk-ask-q { background: var(--brk-tile); box-shadow: inset 4px 0 0 var(--brk-amber); }
  .brk-asks--3 .brk-ask-q { box-shadow: inset 4px 0 0 var(--brk-ember); }
  .brk-asks-go { display: grid; gap: 4px; align-content: start; justify-items: start; }
  .brk-ask-more { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 10px; }

  /* ---- get in touch */
  .brk-routes { display: grid; gap: 12px; }
  .brk-route { display: grid; gap: 8px; align-content: start; padding: 18px 18px 20px; border-radius: 18px; background: var(--brk-panel); }
  .brk-route--book { background: radial-gradient(90% 120% at 100% 0%, var(--brk-ember-wash), transparent 60%), var(--brk-panel); }
  .brk-route-tag { font-size: 12.5px; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brk-amber); }
  .brk-route h3 { font-size: 24px; }
  .brk-route-mail { font-family: var(--brk-slab); font-size: 22px; font-weight: 700; overflow-wrap: anywhere; }
  .brk-route-note { padding: 10px 12px; border-radius: 10px; background: var(--brk-tile); color: var(--brk-muted); font-size: 14.5px; line-height: 1.5; }
  .brk-route .brk-acts { margin-top: 6px; }
  .brk-hours { display: grid; gap: 8px; }
  .brk-hours > div { display: grid; gap: 2px; align-content: start; padding: 12px 16px; border-radius: 12px; background: var(--brk-tile); }
  .brk-hours dt { font-size: 12.5px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brk-amber); }
  .brk-hours dd { font-weight: 600; }
  .brk-say { display: grid; gap: 10px; }
  .brk-say > div { padding: 16px 18px; border-radius: 14px; background: var(--brk-panel); }
  .brk-say h3 { margin-bottom: 6px; font-size: 20px; }
  .brk-say p { color: var(--brk-muted); }
  .brk-office { display: grid; gap: 18px; padding: 22px 20px; border-radius: 20px; background: linear-gradient(135deg, var(--brk-raised), var(--brk-panel)); }
  .brk-office .brk-reg-list { align-content: start; }
  .brk-office-addr { margin: 10px 0 12px; font-family: var(--brk-slab); font-size: 24px; font-weight: 700; line-height: 1.25; }

  /* ---- privacy */
  .brk-short { display: grid; gap: 8px; margin-top: 12px; }
  .brk-short li { position: relative; padding-left: 26px; }
  .brk-short li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 10px; border-radius: 3px; background: var(--brk-amber); }
  .brk-kept-table { display: grid; gap: 12px; }
  .brk-kept-row { padding: 18px; border-radius: 18px; background: var(--brk-panel); }
  .brk-kept-row--main { background: linear-gradient(160deg, var(--brk-raised), var(--brk-panel) 55%); box-shadow: inset 0 4px 0 var(--brk-ember); }
  .brk-kept-row h3 { font-size: 23px; }
  .brk-kept-key { margin-top: 4px; color: var(--brk-muted); font-size: 14.5px; }
  .brk-kept-row dl { display: grid; gap: 8px; margin-top: 12px; }
  .brk-kept-row dl > div { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border-radius: 10px; background: var(--brk-tile); }
  .brk-kept-row dt { font-size: 12.5px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brk-amber); }
  .brk-kept-row dd { font-size: 15.5px; line-height: 1.5; }
  .brk-rights { display: grid; gap: 10px; }
  .brk-rights > div { padding: 16px 18px; border-radius: 14px; background: var(--brk-panel); }
  .brk-rights h3 { margin-bottom: 6px; font-size: 20px; }
  .brk-rights p + p { margin-top: 8px; }

  /* ---- terms, complaints, accessibility */
  .brk-terms-grid { display: grid; gap: 10px; }
  .brk-terms-grid > div { padding: 16px 18px; border-radius: 14px; background: var(--brk-panel); }
  .brk-terms-grid h3 { margin-bottom: 6px; font-size: 20px; }
  .brk-urgent { padding: 20px; border-radius: 4px 20px 20px 20px; background: var(--brk-ember-deep); }
  .brk-urgent h2 { margin-bottom: 8px; font-size: 26px; }
  .brk-next { display: grid; gap: 10px; }
  .brk-next > div { padding: 14px 16px 16px; border-radius: 14px; background: var(--brk-panel); }
  .brk-next dt { font-family: var(--brk-slab); font-size: 20px; font-weight: 700; }
  .brk-next dd { margin-top: 4px; color: var(--brk-muted); }
  .brk-checks { display: grid; gap: 10px; }
  .brk-checks > div { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border-radius: 16px; background: var(--brk-panel); }
  .brk-checks p + p { margin-top: 0; }
  .brk-check-num { font-family: var(--brk-slab); font-size: 28px; font-weight: 800; line-height: 1.05; color: var(--brk-amber); }
  .brk-checks b { display: block; font-size: 17px; }
  .brk-checks span { display: block; color: var(--brk-muted); font-size: 15px; line-height: 1.5; }
  .brk-a-alt-h { margin-bottom: 10px; font-size: 28px; }

  /* ---- index: the menu, on the way down */
  .brk-cooks { padding: 64px 0 18px; }
  .brk-cooks-in { display: grid; }
  .brk-cooks-pic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 72% 60%; border-radius: 22px 22px 4px 22px; }
  .brk-cooks-words {
    position: relative; z-index: 2; margin: -56px 10px 0 18px; padding: 22px 20px 24px;
    border-radius: 4px 20px 20px 20px; background: var(--brk-panel);
    box-shadow: 0 24px 50px var(--brk-shadow), inset 0 3px 0 var(--brk-amber);
  }
  .brk-cooks-words h2 { margin-bottom: 12px; }
  .brk-cooks-list { display: grid; gap: 8px; margin-top: 14px; }
  .brk-cooks-list li { padding: 10px 14px; border-radius: 12px; background: var(--brk-tile); }
  .brk-cooks-list b { display: block; font-family: var(--brk-slab); font-size: 18px; color: var(--brk-amber); }
  .brk-cooks-list span { font-size: 15.5px; }

  /* ---- the dietary note on a booked day (Worker page) */
  .brk-find-diet { display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: var(--brk-panel); }
  .brk-diet-notes { display: grid; gap: 10px; }
  .brk-diet-note { padding: 14px 16px; border-radius: 14px; background: var(--brk-tile); box-shadow: inset 4px 0 0 var(--brk-amber); }
  .brk-diet-note h3 { font-size: 19px; }
  .brk-diet-note p { margin-top: 4px; }
  .brk-diet-note .brk-diet-dishes { color: var(--brk-muted); font-size: 15px; }
  .brk-diet-form { display: grid; gap: 12px; }
  .brk-diet-form fieldset legend { margin-bottom: 8px; font-size: 14.5px; font-weight: 650; }
  .brk-diet-acts { display: flex; flex-wrap: wrap; gap: 12px; }
}

@media (min-width: 768px) {
  .brk-small-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; align-items: center; }
  .brk-small-pic { margin: 0; }
  .brk-small-pic img { aspect-ratio: 4 / 5; }
  .brk-small-lede { font-size: 19px; }

  .brk-art--cooks .brk-art-pic { margin-left: 64px; }
  .brk-art--cooks .brk-art-pic img { object-position: 60% 60%; }
  .brk-art--cooks .brk-art-pic::after { background: linear-gradient(90deg, var(--brk-scrim-strong) 0%, var(--brk-scrim-deep) 36%, var(--brk-scrim-soft) 62%); }
  .brk-art--cooks .brk-flap { margin: -84px 24px 0 auto; }
  /* these two pictures start below the roof sign, so the title lands in their quiet sky band and not
     on the lit hatch (pitch) or the hi-vis jackets (day): measured 2.35 and 3.20 : 1 when it did */
  /* (padding on the section, not margin on the picture: a margin collapses through the section and
     carries the absolutely placed title down with it) */
  .brk-art--pitch, .brk-art--day { padding-top: calc(var(--brk-sign-h) - 10px); }
  .brk-art--pitch .brk-art-pic { margin-right: 64px; }
  .brk-art--pitch .brk-art-pic img { object-position: 50% 60%; }
  .brk-art--pitch .brk-art-pic::after { background: linear-gradient(100deg, var(--brk-scrim-strong) 0%, var(--brk-scrim-deep) 38%, var(--brk-scrim-soft) 66%), linear-gradient(var(--brk-scrim-strong) 0%, var(--brk-scrim) 32%, var(--brk-scrim-soft) 58%); }
  .brk-art--pitch .brk-flap { margin: -84px 0 0 30px; }
  .brk-art--day .brk-art-pic { margin-inline: 32px; }
  .brk-art--day .brk-art-pic::after { background: linear-gradient(var(--brk-scrim-strong) 0%, var(--brk-scrim-deep) 40%, var(--brk-scrim-soft) 70%); }
  .brk-art--day .brk-flap { margin: -84px 24px 0 auto; }
  .brk-art--asks .brk-art-pic { margin-left: 64px; }
  .brk-art--asks .brk-art-pic img { object-position: 70% 70%; }
  .brk-art--asks .brk-art-pic::after { background: linear-gradient(90deg, var(--brk-scrim-strong) 0%, var(--brk-scrim-deep) 40%, var(--brk-scrim-soft) 66%); }
  .brk-art--asks .brk-flap { margin: -84px 0 0 30px; }

  .brk-first h2 { font-size: 34px; }
  .brk-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-dishes--extras, .brk-dishes--drinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-pick-sect .brk-sect-head { max-width: 46em; }

  .brk-need { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-tape { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-arc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-clock li { padding-left: 120px; }
  .brk-clock li::before { left: 92px; }
  .brk-clock li::after { left: 87px; }
  .brk-clock time { font-size: 22px; }
  .brk-routes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .brk-say { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-kept-row dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-kept-row--main dl > div:first-child { grid-column: 1 / -1; }
  .brk-rights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-terms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-cooks-words { margin: -80px 24px 0 auto; width: min(620px, 86%); padding: 28px 30px 30px; }
  .brk-cooks-pic { margin-right: 40px; }
}

@media (min-width: 1024px) {
  .brk-small { padding-top: calc(var(--brk-sign-h) + 46px); }
  .brk-small-words h1 { font-size: 64px; }
  .brk-small-pic img { aspect-ratio: 1 / 1; max-height: 460px; }

  .brk-art--cooks .brk-art-words { padding-left: 104px; max-width: 760px; }
  .brk-art--cooks .brk-flap { margin: -150px 24px 0 auto; }
  .brk-art--pitch .brk-art-words { padding-left: 72px; }
  .brk-art--pitch .brk-flap { margin: -170px 0 0 34px; }
  .brk-art--day .brk-art-words { padding-left: 88px; }
  .brk-art--day .brk-flap { margin: -150px 24px 0 auto; }
  .brk-art--asks .brk-art-words { padding-left: 104px; }
  .brk-art--asks .brk-flap { margin: -170px 0 0 34px; }

  .brk-asks .brk-sect-head { position: sticky; top: 24px; }
  .brk-dishes--first { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brk-dishes--second { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-share-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 44px; align-items: center; }
  .brk-share-two, .brk-share-warn { grid-column: 1 / -1; }
  .brk-tape { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-supply-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 44px; align-items: start; }
  .brk-supply-pic { position: sticky; top: 24px; }
  .brk-eve-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 44px; align-items: center; }
  .brk-eve-pic { order: 2; }
  .brk-routes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .brk-office { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; align-items: start; padding: 30px 32px; }
  .brk-kept-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brk-kept-row--main { grid-column: 1 / -1; }
  .brk-kept-row--main dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-kept-row:not(.brk-kept-row--main) dl { grid-template-columns: 1fr; }
  .brk-rights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-terms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brk-checks > div { grid-template-columns: 1fr; gap: 8px; }
  .brk-cooks-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .brk-cooks-pic { margin-right: 0; }
  .brk-cooks-words { width: auto; margin: 0 0 0 -110px; }
}

@media (min-width: 1400px) {
  .brk-small-words h1 { font-size: 72px; }
}