/* Haskins & Sons Barbecue (concept). Colors come from the cook itself: charred post oak bark,
   ember, thin blue smoke, and pink butcher paper. --k runs 0 to 1 across the cook and
   drives the ember glow and the warmth of the light sections. */

@font-face { font-family: "Ultra"; src: url(fonts/ultra-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(fonts/instrument-sans-wght.woff2) format("woff2-variations"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(fonts/dm-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url(fonts/dm-mono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bark: #17110d;
  --bark-2: #231812;
  --bark-3: #31221a;
  --ash: #f1e9e1;
  --ash-soft: rgba(241, 233, 225, .72);
  --ember: #ff5a1f;
  --ember-2: #ffb24a;
  --smoke: #9fb2c2;
  --paper: #e8bcae;
  --paper-2: #f0cdc1;
  --ink: #2a170f;
  --ink-soft: #5d3a2c;
  --brass: #b9935c;
  --display: "Ultra", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --gut: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, .7, .12, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bark); color: var(--ash); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ash); color: var(--ink); padding: 10px 14px; border-radius: 6px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 3px; }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--ember); color: #1a0d06; font: 700 16px/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 178, 74, .35), 0 8px 30px rgba(255, 90, 31, .28); transition: transform .2s var(--ease), box-shadow .3s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 178, 74, .6), 0 10px 40px rgba(255, 90, 31, .45); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn--full { width: 100%; }

/* Loader: a thermometer coming up to temp */
.loader { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bark); transition: opacity .7s var(--ease), visibility .7s; }
.loader__k { margin: 0; font: 400 14px/1 var(--mono); color: var(--ash-soft); }
.loader__n { margin: 0; font: 400 clamp(80px, 18vw, 220px)/.9 var(--display); color: var(--ember-2); text-shadow: 0 0 40px rgba(255, 90, 31, .5); font-variant-numeric: tabular-nums; }
.loader__u { font-size: .4em; vertical-align: top; color: var(--ember); }
.loader__bar { width: min(320px, 70vw); height: 3px; background: rgba(241, 233, 225, .12); border-radius: 2px; overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--ember-2)); transition: width .2s linear; }
.loader.is-open { opacity: 0; visibility: hidden; }

/* Top bar */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)) 12px max(var(--gut), env(safe-area-inset-left, 0px)); pointer-events: none; transition: background-color .3s; }
.bar > * { pointer-events: auto; }
.bar.is-solid { background: rgba(23, 17, 13, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; min-height: 44px; font: 400 19px/1 var(--display); text-decoration: none; letter-spacing: .01em; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.brand__amp { color: var(--ember-2); }
.brand__x { white-space: pre; }
.tag { white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border: 1px dashed rgba(241, 233, 225, .6); border-radius: 3px; color: var(--ash); background: rgba(14, 10, 8, .72); }
.bar__nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.bar__nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* Film */
.film { position: relative; height: 950vh; background: #0d0907; }
/* the stage's own color is what iPhone Safari tints its toolbars with while the film is pinned */
.film__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; background: #0d0907; --gut-s: max(var(--gut), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
.film__canvas, .film__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__fx { pointer-events: none; z-index: 2; }
.film__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 6, 4, .55) 0, rgba(10, 6, 4, 0) 110px), radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(10, 6, 4, .55) 100%); }
.film__safe { position: absolute; inset: 0; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.film__spots { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.letter { position: absolute; left: 0; right: 0; z-index: 3; height: calc(var(--lb, 0) * 9vh); background: #050302; pointer-events: none; }
.letter--t { top: 0; }
.letter--b { bottom: 0; }

/* Captions: smoked-glass cards. bbq.js places each one off its shot's subject (left/top are set inline);
   cards in the lower half rise with Safari's toolbar (--film-hide comes from the film engine). */
.caps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cap { position: absolute; left: var(--gut-s); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: min(520px, 44vw); padding: 18px 22px 20px; border-radius: 6px; background: rgba(14, 10, 8, .78); border: 1px solid rgba(185, 147, 92, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; translate: 0 calc(var(--low, 0) * -1 * var(--film-hide, 0px)); transition: opacity .45s var(--ease); }
.cap[style*="top"] { bottom: auto; }
.cap.is-on { opacity: 1; }
.cap .btn { pointer-events: auto; margin-top: 16px; }
.cap__k { margin: 0 0 10px; font: 500 13px/1.2 var(--mono); color: var(--ember-2); }
.cap__h { margin: 0; font: 400 clamp(26px, 2.9vw, 44px)/1.04 var(--display); letter-spacing: -.005em; text-wrap: balance; }
.cap--hero .cap__h { font-size: clamp(30px, 3.6vw, 56px); }
[data-layout="wide"] .cap--hero { width: min(640px, 48vw); }
.cap__tap { transition: opacity .3s; }
.cap__tap:not(.is-on) { opacity: 0; }
.cap__p { margin: 12px 0 0; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.45; color: rgba(241, 233, 225, .86); }

/* The pit card: probe dial, pit and clock, and the cook log */
.hud { position: absolute; z-index: 5; top: calc(76px + env(safe-area-inset-top, 0px)); right: var(--gut-s); translate: 0 calc(var(--low, 0) * -1 * var(--film-hide, 0px)); width: 300px; padding: 14px 16px; border-radius: 6px; background: rgba(14, 10, 8, .78); border: 1px solid rgba(185, 147, 92, .32); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hud__gauge { display: grid; grid-template-columns: 104px 1fr; grid-template-areas: "dial read" "dial row"; column-gap: 14px; align-items: center; }
.hud { transition: opacity .2s ease-out; }
.hud.is-moving { opacity: 0; transition: none; }
.gauge__dial { grid-area: dial; width: 104px; height: 104px; display: block; }
.gauge__bezel { fill: none; stroke: var(--brass); stroke-width: 6; }
.gauge__face { fill: rgba(16, 11, 8, .9); stroke: rgba(0, 0, 0, .6); stroke-width: 2; }
.gauge__track { fill: none; stroke: rgba(241, 233, 225, .16); stroke-width: 10; stroke-linecap: round; }
.gauge__stall { fill: none; stroke: var(--smoke); stroke-width: 10; opacity: .6; }
.gauge__fill { fill: none; stroke: var(--ember); stroke-width: 10; stroke-linecap: round; }
.gauge__ticks line { stroke: rgba(241, 233, 225, .55); stroke-width: 2; }
.gauge__needle { stroke: var(--ember-2); stroke-width: 4; stroke-linecap: round; transform-origin: 100px 100px; }
.gauge__hub { fill: var(--brass); }
.gauge__read { grid-area: read; align-self: end; }
.gauge__l { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(241, 233, 225, .72); }
.gauge__t { margin: 4px 0 0; font: 400 34px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ash); }
.gauge__k { margin: 6px 0 0; font: 500 11.5px/1.25 var(--mono); color: var(--ember-2); min-height: 1.25em; }
.gauge__k.is-stall { color: #b9cbd8; }
.gauge__row { grid-area: row; align-self: start; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font: 500 12px/1.2 var(--mono); }
.gauge__row div { display: flex; gap: 6px; }
.gauge__row dt { color: rgba(241, 233, 225, .72); text-transform: uppercase; letter-spacing: .08em; }
.gauge__row dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Cook log: the line for now; the whole night on tall screens */
.log { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px dashed rgba(185, 147, 92, .35); font: 400 12.5px/1.3 var(--mono); color: rgba(241, 233, 225, .78); }
.log.is-empty { visibility: hidden; }
.log li { display: none; grid-template-columns: 12px 52px 1fr; gap: 6px; align-items: baseline; }
.log li::before { content: ""; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; transform: translateY(1px); }
.log li span { font-weight: 500; }
.log li.is-now { display: grid; color: var(--ash); }
.log li.is-now::before { background: var(--ember-2); border-color: var(--ember-2); }
.is-fulllog .log li { display: grid; padding: 3px 0; }
.is-fulllog .log li.is-done { color: rgba(241, 233, 225, .8); }
.is-fulllog .log li.is-done::before { background: var(--ember); border-color: var(--ember); }
/* before 9:00 pm nothing is "now" yet: on tall screens the full log still shows, as the night's plan (hollow dots),
   so the pit card is never an empty box */
.is-fulllog .log.is-empty { visibility: visible; }

/* Short landscape screens (phones on their side): a compact card, no log */
[data-layout="short"] .hud { top: calc(58px + env(safe-area-inset-top, 0px)); width: 236px; padding: 8px 10px; }
[data-layout="short"] .hud__gauge { grid-template-columns: 64px 1fr; column-gap: 10px; }
[data-layout="short"] .gauge__dial { width: 64px; height: 64px; }
[data-layout="short"] .gauge__t { font-size: 22px; }
[data-layout="short"] .gauge__l, [data-layout="short"] .gauge__pit, [data-layout="short"] .log { display: none; }
[data-layout="short"] .gauge__row { margin-top: 4px; }
[data-layout="short"] .cap { width: min(380px, 48vw); padding: 10px 14px 12px; }
[data-layout="short"] .cap__h, [data-layout="short"] .cap--hero .cap__h { font-size: 21px; }
[data-layout="short"] .cap__k { margin-bottom: 6px; font-size: 12px; }
[data-layout="short"] .cap__p { display: none; } /* phones on their side: kicker and heading only, the picture needs the room */
[data-layout="short"] .cap .btn { margin-top: 8px; min-height: 44px; }

/* Phones upright: the pit card is a strip along the bottom, the caption sits above it or at the top */
[data-layout="tall"] .hud { top: auto; left: 12px; right: 12px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--film-hide, 0px)); padding: 8px 12px 9px; }
[data-layout="tall"] .hud__gauge { grid-template-columns: 54px auto 1fr; grid-template-areas: "dial read row"; column-gap: 10px; }
[data-layout="tall"] .gauge__dial { width: 54px; height: 54px; }
[data-layout="tall"] .gauge__l { display: none; }
[data-layout="tall"] .gauge__read { align-self: center; }
[data-layout="tall"] .gauge__t { margin: 0; font-size: 24px; }
[data-layout="tall"] .gauge__k { margin-top: 3px; font-size: 11px; max-width: 13ch; }
[data-layout="tall"] .gauge__row { align-self: center; justify-self: end; flex-direction: column; align-items: flex-end; margin: 0; gap: 4px; font-size: 11.5px; }
[data-layout="tall"] .log { margin-top: 7px; padding-top: 6px; font-size: 12px; }
[data-layout="tall"] .log li { grid-template-columns: 12px 50px 1fr; }
/* the log keeps room for a two-line entry on phones, before the first entry too, so a long one ("Brisket on, fat side
   up, point to the fire") never grows the card under a caption that was placed above it */
[data-layout="tall"] .log { min-height: calc(2.6em + 7px); }
[data-layout="tall"] .cap { width: auto; right: 12px; padding: 14px 16px 15px; }
[data-layout="tall"] .cap__h, [data-layout="tall"] .cap--hero .cap__h { font-size: clamp(23px, 6.6vw, 28px); }
[data-layout="tall"] .cap__p { margin-top: 8px; font-size: 14.5px; line-height: 1.4; }
[data-layout="tall"] .cap__k { font-size: 12.5px; }
@media (max-height: 600px) and (orientation: portrait) {
  [data-layout="tall"] .cap { padding: 11px 14px 12px; }
  [data-layout="tall"] .cap__k { margin-bottom: 6px; }
  [data-layout="tall"] .cap__h, [data-layout="tall"] .cap--hero .cap__h { font-size: 21px; }
  [data-layout="tall"] .cap__p { display: none; }
  [data-layout="tall"] .log { display: none; }
  [data-layout="tall"] .hud { padding-top: 6px; padding-bottom: 6px; }
  [data-layout="tall"] .cap .btn { margin-top: 10px; min-height: 44px; }
}

/* Tablets upright: the film is a band across the middle; the pit card sits above it */
[data-layout="band"] .hud { top: calc(72px + env(safe-area-inset-top, 0px)); left: var(--gut-s); right: var(--gut-s); width: auto; padding: 10px 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; }
[data-layout="band"] .hud__gauge { grid-template-columns: 76px auto; column-gap: 12px; }
[data-layout="band"] .gauge__dial { width: 76px; height: 76px; }
[data-layout="band"] .gauge__t { font-size: 28px; }
[data-layout="band"] .log { margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px dashed rgba(185, 147, 92, .35); }
[data-layout="band"] .cap { width: min(600px, calc(100% - 2 * var(--gut-s))); }

/* Notes tied to points on the meat: butcher-twine tags */
.note { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity .4s; pointer-events: auto; }
.note.is-on { opacity: 1; }
.note__pin { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.note__pin::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: var(--ember-2); box-shadow: 0 0 0 4px rgba(255, 178, 74, .3), 0 0 14px var(--ember); }
.note__pin:focus-visible { outline: 2px solid var(--ash); outline-offset: -4px; }
.note__card { position: absolute; width: max-content; max-width: 220px; padding: 10px 12px; background: var(--paper-2); color: var(--ink); border-radius: 2px; font-size: 13.5px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transform: rotate(var(--rot, -1.5deg)) translateY(6px); opacity: 0; transition: opacity .3s, transform .45s var(--ease); pointer-events: none; }
.note__card b { display: block; font: 500 10.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9c2f14; margin-bottom: 3px; }
.note.is-open .note__card { opacity: 1; transform: rotate(var(--rot, -1.5deg)); }
.note__line { position: absolute; left: 0; top: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--paper-2) 0 4px, transparent 4px 7px); transform-origin: 0 50%; opacity: 0; transition: opacity .3s; }
.note.is-open .note__line { opacity: .9; }

/* Shared */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 820px; }
.kick { margin: 0 0 14px; font: 500 14px/1.2 var(--mono); color: var(--ember-2); }
.kick--ink { color: #87280f; }
.h2 { margin: 0; font: 400 clamp(34px, 4.8vw, 68px)/1 var(--display); text-wrap: balance; }
.h2--ink { color: var(--ink); }
.lede { margin: 18px 0 0; max-width: 46ch; font-size: clamp(17px, 1.35vw, 20px); color: var(--ash-soft); }
.lede--ink { color: var(--ink-soft); }

/* The probe chart */
.cook { padding: clamp(90px, 14vh, 160px) 0 clamp(60px, 9vh, 100px); background: radial-gradient(80% 60% at 50% 100%, rgba(255, 90, 31, .12), transparent 70%), var(--bark); }
.chart { position: relative; max-width: 1240px; margin: 40px auto 0; padding: 0 var(--gut); height: clamp(280px, 38vw, 440px); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.chart__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart__svg .grid { stroke: rgba(241, 233, 225, .1); stroke-width: 1; }
.chart__svg .axis { fill: rgba(241, 233, 225, .7); font: 500 12.5px var(--mono); }
.chart__svg .stall { fill: rgba(159, 178, 194, .12); }
.chart__svg .rest { fill: rgba(232, 188, 174, .08); }
.chart__svg .band-l { fill: #b9cbd8; font: 500 12px var(--mono); letter-spacing: .1em; }
.chart__svg .band-l--rest { fill: var(--paper); }
.chart__svg .line { fill: none; stroke: var(--ember); stroke-width: 3; }
.chart__svg .area { fill: url(#cookFill); }
.chart__svg .cursor { stroke: var(--ash); stroke-width: 1; stroke-dasharray: 3 4; }
.chart__svg .dot { fill: var(--ember-2); stroke: var(--bark); stroke-width: 3; }
.chart__tip { position: absolute; top: 0; left: 0; display: grid; gap: 2px; padding: 10px 12px; background: var(--paper-2); color: var(--ink); border-radius: 2px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); pointer-events: none; transform: translate(var(--tx, 0), var(--ty, 0)); min-width: 150px; max-width: 210px; }
.chart__tip b { font: 500 12px/1 var(--mono); letter-spacing: .08em; }
.chart__tip span { font: 400 28px/1 var(--display); }
.chart__tip em { font-style: normal; font-size: 13px; color: var(--ink-soft); }
.chart__knob { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; cursor: grab; touch-action: none; }
.chart__knob:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 0; box-shadow: 0 0 0 5px rgba(255, 178, 74, .25); }

/* Menu board on pink butcher paper */
.menu { padding: clamp(90px, 13vh, 150px) 0; background: var(--paper); color: var(--ink); background-image: radial-gradient(rgba(42, 23, 15, .05) 1px, transparent 1px); background-size: 7px 7px; }
.menu__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.board { list-style: none; margin: 0; padding: 0; }
.board li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'n p' 'd p'; gap: 4px 20px; padding: 18px 0; border-bottom: 2px dotted rgba(42, 23, 15, .35); }
.board__n { grid-area: n; font: 400 clamp(22px, 2.2vw, 30px)/1.1 var(--display); }
.board__p { grid-area: p; align-self: center; font: 500 20px/1 var(--mono); font-variant-numeric: tabular-nums; }
.board__d { grid-area: d; color: var(--ink-soft); font-size: 15px; }

/* Catering estimator */
.cater { padding: clamp(90px, 13vh, 150px) 0; background: var(--bark-2); }
.cater__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.est { margin-top: 10px; }
.est__l { display: block; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 233, 225, .72); margin-bottom: 12px; }
.est__guests { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 30px; }
.est__guests output { font: 400 44px/1 var(--display); color: var(--ember-2); font-variant-numeric: tabular-nums; }
.est__guests input { grid-column: 1 / -1; width: 100%; margin-top: 10px; accent-color: var(--ember); height: 44px; }
.est fieldset { border: 0; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.est fieldset legend { width: 100%; padding: 0; }
.est label { position: relative; }
.est fieldset input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.est fieldset span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 4px; border: 1px solid rgba(241, 233, 225, .55); font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.est fieldset input:checked + span { background: var(--ash); color: var(--ink); border-color: var(--ash); }
.est fieldset input:focus-visible + span { outline: 2px solid var(--ember-2); outline-offset: 3px; }
.est__hint { width: 100%; margin: 4px 0 0; font-size: 14px; color: rgba(241, 233, 225, .72); }
.est__err { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #ffb59a; min-height: 0; }
.est__err:empty { display: none; }
.est fieldset input:disabled + span { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.est__date { margin-top: 30px; }
.est__date input { min-height: 48px; padding: 0 12px; border-radius: 4px; border: 1px solid rgba(241, 233, 225, .35); background: var(--bark); color: var(--ash); font: 500 16px var(--sans); color-scheme: dark; }
.est__date input[aria-invalid="true"] { border-color: #ff8a65; }
/* The order as a butcher's scale ticket: item, weight, rate, amount */
.ticket { position: sticky; top: 90px; padding: 22px 22px 20px; background: var(--paper-2); color: var(--ink); border-radius: 3px; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); border-top: 6px solid var(--ink); }
.ticket__k { margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ticket__t { width: 100%; border-collapse: collapse; font: 400 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.ticket__t th, .ticket__t td { padding: 6px 0; text-align: left; vertical-align: top; font-weight: 400; }
.ticket__t .num { text-align: right; padding-left: 10px; white-space: nowrap; }
.ticket__t thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); }
.ticket__t tbody tr + tr th, .ticket__t tbody tr + tr td { border-top: 1px dashed rgba(42, 23, 15, .3); }
.ticket__t tfoot th, .ticket__t tfoot td { padding-top: 12px; border-top: 2px solid var(--ink); }
.ticket__t tfoot th { font: 500 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: bottom; }
.ticket__t tfoot td { font: 400 clamp(34px, 3.6vw, 46px)/1 var(--display); }
.ticket .btn { margin-top: 18px; }
.ticket__note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-soft); min-height: 2.6em; }
.ticket__h { margin: 18px 0 8px; padding-top: 14px; border-top: 2px dashed rgba(42, 23, 15, .35); font: 500 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ticket__next { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.4; }
.ticket__next li { padding: 5px 0; }
.ticket__next time { display: block; font: 500 12.5px/1.3 var(--mono); color: #87280f; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pitmaster's notes: open answers in a grid, nothing to click */
.notes { padding: clamp(80px, 12vh, 140px) 0; }
.notes__grid { margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.notes__grid div { padding-top: 14px; border-top: 2px solid rgba(255, 90, 31, .55); }
.notes__grid dt { font: 400 21px/1.2 var(--display); }
.notes__grid dd { margin: 8px 0 0; color: var(--ash-soft); }

/* Footer */
.foot { padding: 34px 0 calc(28px + env(safe-area-inset-bottom, 0px)); background: #0d0907; border-top: 1px solid rgba(255, 90, 31, .25); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.foot__small { margin: 0; max-width: 70ch; font-size: 14px; color: rgba(241, 233, 225, .72); }
.foot__links { display: flex; gap: 22px; }
.foot__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; font-size: 14px; font-weight: 600; }

@media (max-width: 860px) {
  .hide-s, .bar__nav a.hide-s { display: none; }
  .bar { gap: 10px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 8px; }
  .brand { font-size: 14px; }
  .bar__nav { gap: 10px; }
  .tag { font-size: 10.5px; padding: 5px 6px; letter-spacing: .06em; }
  .film { height: 860vh; }
  .menu__grid, .cater__grid { grid-template-columns: 1fr; }
  .notes__grid { grid-template-columns: 1fr 1fr; }
  .ticket { position: relative; top: auto; }
}
@media (max-width: 400px) {
  .bar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .brand { font-size: 13px; }
  .btn--sm { padding: 0 12px; }
  .ticket { padding: 18px 14px; }
  .ticket__t { font-size: 13px; }
}
@media (max-width: 520px) { .notes__grid { grid-template-columns: 1fr; } }
/* phones: "Barbecue" steps down to a second line in the tag's mono caps, so the full name fits beside the tag and Cater it */
@media (max-width: 520px) {
  .brand { flex-wrap: wrap; align-content: center; row-gap: 4px; }
  .brand__x { flex-basis: 100%; white-space: nowrap; font: 500 9px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--ember-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .loader { display: none; }
  .film__fx { display: none; }
  .cap, .note, .note__card { transition: none; }
}

/* upright phones, the rub: the shaker, the falling rub and the meat fill the middle and right of the frame, so the
   caption becomes a narrow card on the left */
[data-layout="tall"] .cap[data-shot="2"] { right: auto; width: min(46%, 200px); padding: 10px 12px 11px; }
[data-layout="tall"] .cap[data-shot="2"] .cap__h { font-size: 19px; }
[data-layout="tall"] .cap[data-shot="2"] .cap__p { font-size: 12.5px; margin-top: 6px; }