/* Coalwheel: zinc, white tile and aged beef. Inknut Antiqua for what we say out loud, Akt for the rest. */

@font-face { font-family: "Inknut Antiqua"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/specimen/inknut-antiqua-800.woff2") format("woff2"); }
@font-face { font-family: "Akt"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/specimen/akt-var.woff2") format("woff2"); }

.spec-coalwheel {
  --cw-zinc: #C2C4C1;
  --cw-ink: #131414;
  --cw-garnet: #821734;
  --cw-tile: #EDECE8;
  --cw-iron: #2B2D2E;
  --cw-zinc-2: #AEB1AD;
  --cw-line: rgb(19 20 20 / .22);
  --cw-ink-70: rgb(19 20 20 / .7);
  --cw-serif: "Inknut Antiqua", "Iowan Old Style", Georgia, serif;
  --cw-sans: "Akt", "Helvetica Neue", Arial, sans-serif;
  --cw-m: clamp(16px, 4.4vw, 64px);
  --cw-g: clamp(16px, 2vw, 28px);
  --cw-nav-h: 64px;
  --cw-ease: cubic-bezier(.2, .7, .1, 1);
}
body.spec-coalwheel { margin: 0; background: #C2C4C1; }

.cw-root {
  background: var(--cw-grain, none) repeat, var(--cw-zinc);
  color: var(--cw-ink);
  font: 400 1.0625rem/1.62 var(--cw-sans);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.cw-root *, .cw-root *::before, .cw-root *::after { box-sizing: border-box; }
.cw-root :where(h1, h2, h3, p, ul, figure) { margin: 0; }
.cw-root :where(ul) { padding: 0; list-style: none; }
.cw-root img { display: block; max-width: 100%; height: auto; }
.cw-root a { color: inherit; }
.cw-root :focus-visible { outline: 2px solid var(--cw-ink); outline-offset: 3px; }
.cw-root :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cw-root :is(section[id], #cw-book) { scroll-margin-top: calc(var(--bar-h, 40px) + var(--cw-nav-h)); }
.cw-fig, .cw-root .cw-tnum { font-variant-numeric: tabular-nums; }
.cw-nw { white-space: nowrap; }

/* ── nav ─────────────────────────────────────────────────────────────── */
.cw-nav {
  position: sticky; top: var(--bar-h, 40px); z-index: 60;
  height: var(--cw-nav-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--cw-m);
  background: var(--cw-grain, none) repeat, var(--cw-zinc);
  border-bottom: 1px solid transparent;
  transition: border-color .2s linear;
  font: 600 .9375rem/1 var(--cw-sans);
}
.cw-nav.is-scrolled { border-bottom-color: var(--cw-line); }
.cw-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.005em; margin-right: auto; min-height: 44px; }
.cw-mark { width: 28px; height: 28px; fill: currentColor; flex: none; }
.cw-links { display: flex; gap: 26px; }
.cw-links a, .cw-foot-links a { text-decoration: none; padding: 12px 0; }
.cw-links a, .cw-navbook { display: inline-flex; align-items: center; min-height: 44px; }
.cw-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cw-navbook { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; padding: 12px 0; margin-left: 8px; white-space: nowrap; }
.cw-nb-short { display: none; }
@media (max-width: 900px) { .cw-links { gap: 18px; } .cw-nav { gap: 18px; } }
@media (max-width: 760px) {
  .spec-coalwheel { --cw-nav-h: 56px; }
  .cw-links { display: none; }
  .cw-nb-long { display: none; }
  .cw-nb-short { display: inline; }
}

/* ── 1 · the cabinet by the door: the whole first screen is the inside of the glass, the salt-block wall glowing
   behind the rack and a rib loin's cut end on it (photographed); the drying model is drawn onto its face ──────── */
.cw-top {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--cw-g);
  align-content: start;
  min-height: calc(100svh - var(--bar-h, 40px) - var(--cw-nav-h));
  background: #B97A5E;   /* the salt's glow, until the photograph arrives */
}
.cw-root .cw-top { padding: clamp(28px, 3.6vw, 52px) var(--cw-m) clamp(24px, 3vw, 40px); }
.cw-age { position: absolute; inset: 0; z-index: 0; cursor: ew-resize; touch-action: pan-y; outline-offset: -8px; }
.cw-age:focus-visible { outline: 3px solid var(--cw-ink); }
.cw-age.is-drag { cursor: grabbing; }
.cw-wall, .cw-wall img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-wall img { object-fit: cover; object-position: 26% 42%; }
.cw-age-cv { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; display: block; pointer-events: none; opacity: 0; transition: opacity .35s linear; }
.cw-age.is-live .cw-age-cv { opacity: 1; }

.cw-top-words, .cw-age-words, .cw-age-sum { position: relative; z-index: 2; pointer-events: none; grid-column: 8 / 13; justify-self: end; text-align: right; }
.cw-top-words { grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; }
/* a quiet zone for the words: the salt wall behind them goes soft and even, as if a little out of focus */
.cw-top-words::before {
  content: ""; position: absolute; z-index: -1; inset: -48px -64px -40px -72px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(214 128 88 / .5), rgb(214 128 88 / .22) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(.85); backdrop-filter: blur(14px) saturate(.85);
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent); mask-image: radial-gradient(closest-side, #000 58%, transparent);
}
.cw-h1 { font: 800 clamp(2.75rem, .8rem + 5vw, 6.25rem)/1.04 var(--cw-serif); letter-spacing: -.02em; }
@supports (text-box: trim-both cap alphabetic) { .cw-h1 { text-box: trim-both cap alphabetic; } }
.cw-lead-a { margin-top: clamp(22px, 2.6vw, 40px); max-width: 17em; font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); font-variation-settings: "wght" 700; font-weight: 700; line-height: 1.38; }
.cw-lead-b { margin-top: 10px; max-width: 24em; font-size: clamp(1rem, .95rem + .2vw, 1.0625rem); font-variation-settings: "wght" 540; font-weight: 540; line-height: 1.5; }
.cw-age-words { grid-row: 2; margin-top: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-end; }
.cw-age-day { font: 800 clamp(1.625rem, 1rem + 1.4vw, 2.5rem)/1.12 var(--cw-serif); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cw-age-hint { margin-top: 10px; font: 700 1rem/1.3 var(--cw-sans); font-variation-settings: "wght" 700; display: inline-flex; align-items: center; gap: 10px; }
.cw-age-hint::before { content: ""; width: 34px; height: 9px; flex: none; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, conic-gradient(from -135deg at 0 50%, currentColor 90deg, transparent 0) 0 0 / 50% 100% no-repeat, conic-gradient(from 45deg at 100% 50%, currentColor 90deg, transparent 0) 100% 0 / 50% 100% no-repeat; }
.cw-hint-t { display: none; }
@media (pointer: coarse) { .cw-hint-m { display: none; } .cw-hint-t { display: inline; } }
.cw-nojs .cw-age-hint, .cw-nogl .cw-age-hint, .cw-nojs .cw-pin, .cw-nogl .cw-pin { display: none; }
.cw-nojs .cw-age, .cw-nogl .cw-age { cursor: default; }
/* what the model has done so far, on the salt above the loin, tied by a leader to the trim line */
.cw-age-sum {
  grid-column: auto; justify-self: auto; text-align: left; position: absolute;
  left: var(--cw-tag-x, 18%); top: var(--cw-tag-y, 30%); transform: translateY(-100%); width: min(22em, 32vw);
  font: 560 clamp(.9375rem, .85rem + .2vw, 1.0625rem)/1.42 var(--cw-sans); font-variation-settings: "wght" 560; font-variant-numeric: tabular-nums;
}
.cw-age-sum::before {
  content: ""; position: absolute; z-index: -1; inset: -22px -34px -18px -30px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(214 128 88 / .46), rgb(214 128 88 / .2) 72%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(.85); backdrop-filter: blur(12px) saturate(.85);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent);
}
.cw-age-sum b { display: block; font: 800 clamp(1.625rem, 1rem + 1.3vw, 2.375rem)/1.1 var(--cw-sans); font-variation-settings: "wght" 800; letter-spacing: -.02em; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .cw-age-sum b, .cw-pin-w { transition: font-variation-settings .6s var(--cw-ease); } }
.cw-lead { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .3s linear; }
.cw-lead.is-on { opacity: 1; }
.cw-lead-p { fill: none; stroke: var(--cw-ink); stroke-width: 1.5; }
.cw-lead-c { fill: none; stroke: var(--cw-tile); stroke-width: 2; }
.cw-pin { display: none; }

/* short desktop screens keep the headline and the loin's words above the rack */
@media (min-width: 761px) and (max-height: 900px) {
  .cw-h1 { font-size: min(clamp(2.75rem, .8rem + 5vw, 6.25rem), 11.5svh); }
  .cw-lead-a { margin-top: 18px; }
  .cw-age-words { margin-top: 22px; }
}
@media (min-width: 761px) and (max-height: 820px), (min-width: 761px) and (max-width: 1100px) {
  .cw-lead-b { display: none; }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .cw-top-words, .cw-age-words { grid-column: 7 / 13; }
  .cw-wall img { object-position: 22% 42%; }
}
/* portrait tablets and phones: the photograph across the width with the headline on the salt above the loin, and on
   the photograph the day, what it has lost and how to change it; under it, left-aligned, who we are, what we do, and
   what the model says */
@media (max-width: 760px), (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .cw-top { display: flex; flex-direction: column; min-height: 0; background: var(--cw-zinc); }
  .cw-root .cw-top { padding: 0 0 40px; }
  .cw-age { position: relative; inset: auto; order: 0; aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; background: #B97A5E; }
  .cw-wall img { object-position: 31% 50%; }
  .cw-top-words { display: contents; }
  .cw-top-words::before, .cw-age-sum::before { display: none; }
  .cw-h1 { position: absolute; z-index: 2; top: clamp(16px, 4vw, 28px); right: var(--cw-m); left: var(--cw-m); text-align: right; font-size: clamp(2.5rem, 1.2rem + 7vw, 4.5rem); pointer-events: none; }
  .cw-lead-a, .cw-lead-b, .cw-age-words, .cw-age-sum { align-self: stretch; text-align: left; margin-left: var(--cw-m); margin-right: var(--cw-m); }
  .cw-lead-a { order: 1; margin-top: 22px; font-size: 1.125rem; max-width: 20em; }
  .cw-lead-b { order: 2; display: block; margin-top: 8px; max-width: 30em; }
  .cw-age-words { display: none; }
  .cw-age-sum { order: 3; position: static; transform: none; width: auto; max-width: 30em; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cw-line); }
  .cw-age-sum b { font-size: 1.625rem; }
  .cw-lead { display: none; }
  /* on the photograph, where the thumb is: the day, what it has lost, and the gesture */
  .cw-pin {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px;
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0; padding: 56px var(--cw-m) 14px;
    color: var(--cw-tile); pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgb(19 20 20 / .42) 45%, rgb(19 20 20 / .66));
  }
  .cw-pin-d { font: 800 1.375rem/1.15 var(--cw-serif); letter-spacing: -.01em; }
  .cw-pin-w { font: 700 1.0625rem/1.2 var(--cw-sans); font-variation-settings: "wght" 700; font-variant-numeric: tabular-nums; }
  .cw-pin-h { flex-basis: 100%; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font: 650 .9375rem/1.2 var(--cw-sans); font-variation-settings: "wght" 650; }
  .cw-pin-h::before { content: ""; width: 30px; height: 9px; flex: none; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, conic-gradient(from -135deg at 0 50%, currentColor 90deg, transparent 0) 0 0 / 50% 100% no-repeat, conic-gradient(from 45deg at 100% 50%, currentColor 90deg, transparent 0) 100% 0 / 50% 100% no-repeat; }
}
@media (min-width: 761px) and (max-aspect-ratio: 1/1) { .cw-age { aspect-ratio: 16 / 12; } .cw-wall img { object-position: 28% 50%; } .cw-pin-d { font-size: 1.75rem; } }

/* ── 5 · the grill: one piece of it, live, on the tile ───────────────────── */
.cw-grillrow {
  --cw-room: 56px;
  --cw-wd: clamp(150px, 12.6vw, 196px);
  --cw-wx: calc(var(--cw-wd) * .56);        /* the wheel's middle, in from the piece's right edge */
  --cw-wy: calc(var(--cw-wd) * .5 + 2px);    /* and up from the foot of the band: its rim a little under the box's foot, so the words on it clear the box */
  position: relative;
  display: grid;
  grid-template-columns: [full-start main-start] minmax(0, 1fr) [main-end full-end];
  grid-template-rows: [band] auto [foot1] auto [foot2] auto [foot3] auto [foot4] auto;
  padding-top: var(--cw-room);
}
.cw-side {
  grid-column: full; grid-row: band;
  position: relative; z-index: 1;
  height: clamp(250px, 42vw, 640px);
  touch-action: pan-y;
}
.cw-poster, .cw-cv { position: absolute; left: 0; width: 100%; display: block; }
.cw-poster { top: calc(-1 * var(--cw-room)); height: calc(100% + var(--cw-room)); overflow: visible; }
.cw-cv { bottom: 0; top: calc(-1 * var(--cw-room)); height: calc(100% + var(--cw-room)); pointer-events: none; opacity: 0; }
.cw-side.is-live .cw-cv { opacity: 1; }
.cw-side.is-live .cw-poster { visibility: hidden; }
/* the poster's units are centimetres as the eye sees them, so its moves are in those units */
.cw-p-grate { transform: translateY(calc(var(--cw-p-y, -.7) * 1px)); transition: transform .35s var(--cw-ease); }
.cw-p-lift { transform: translateY(calc(var(--cw-p-lift, 0) * 1px)); transition: transform .35s var(--cw-ease); }
.cw-p-steak { transform-box: fill-box; transform-origin: 50% 50%; }
.cw-p-steak.is-flip { animation: cw-p-flip .42s ease-in-out; }
@keyframes cw-p-flip { 0% { transform: none; } 50% { transform: translateY(-.9px) scaleY(.06); } 100% { transform: none; } }

.cw-wheel {
  grid-column: full; grid-row: band;
  justify-self: end; align-self: end;
  width: var(--cw-wd); height: var(--cw-wd);
  margin-right: calc(var(--cw-wx) - var(--cw-wd) / 2);
  margin-bottom: calc(var(--cw-wy) - var(--cw-wd) / 2);
  position: relative; z-index: 4;
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
  outline-offset: 10px;
}
.cw-wheel.is-drag { cursor: grabbing; }
.cw-wheel-svg { position: absolute; inset: calc(var(--cw-wd) * -.148); width: calc(var(--cw-wd) * 1.296); height: calc(var(--cw-wd) * 1.296); overflow: visible; pointer-events: none; }
.cw-wheel-rot { filter: drop-shadow(0 .9px .5px rgb(0 0 0 / .35)); }
.cw-wheel-knurl { stroke: #1A1B1C; }
.cw-wheel-lip { stroke: #AEB1AD; opacity: .55; }
.cw-wheel-knob { fill: #55595A; }
.cw-wheel-boss { fill: #AEB1AD; opacity: .5; }
.cw-rim { font-family: var(--cw-sans); font-weight: 600; font-size: 3.7px; fill: var(--cw-ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; paint-order: stroke fill; stroke: var(--cw-tile); stroke-width: 1.2px; stroke-linejoin: round; }
.cw-rim.cw-cue { font-weight: 750; font-variation-settings: "wght" 750; letter-spacing: .015em; }
.cw-cue-arc, .cw-cue-head { fill: none; stroke: var(--cw-ink); stroke-width: .75; stroke-linecap: square; }
.cw-rim-m { display: none; }
.cw-wheel.is-touched :is(.cw-cue, .cw-cue-arc, .cw-cue-head) { opacity: .62; transition: opacity .6s linear; }
@media (prefers-reduced-motion: no-preference) {
  .cw-wheel.is-nudge :is(.cw-cue-arc, .cw-cue-head) { animation: cw-nudge 1.1s cubic-bezier(.3, 0, .2, 1) 2; transform-origin: 0 0; }
}
@keyframes cw-nudge { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(9deg); } 70% { transform: rotate(-3deg); } }

.cw-acts { display: contents; }
.cw-btns, .cw-soundline, .cw-say, .cw-cutcap { grid-column: main; justify-self: start; max-width: calc(100% - var(--cw-wx) - var(--cw-wd) * .62 - 12px); }
.cw-btns { grid-row: foot1; display: flex; flex-wrap: wrap; gap: 0 28px; padding-top: 14px; }
.cw-btn {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  font: 650 1rem/1 var(--cw-sans); font-variation-settings: "wght" 650;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  white-space: nowrap;
}
.cw-btn[aria-pressed="true"] { text-decoration-thickness: 3px; }
.cw-key { display: inline-block; white-space: pre; font-weight: 450; font-variation-settings: "wght" 450; color: var(--cw-ink-70); }
.cw-spk { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.cw-soundline { grid-row: foot2; font: 420 .875rem/1.45 var(--cw-sans); color: var(--cw-ink-70); }
.cw-say { grid-row: foot3; margin-top: 18px; font: 480 1.0625rem/1.45 var(--cw-sans); font-variant-numeric: tabular-nums; }
.cw-cutcap { grid-row: foot4; margin-top: 6px; font: 420 .875rem/1.45 var(--cw-sans); color: var(--cw-ink-70); }
.cw-noaudio .cw-btn-sound, .cw-nogl .cw-soundline { display: none; }
.cw-nosim .cw-rim-c { display: none; }
.cw-nojs .cw-btns, .cw-nojs .cw-soundline, .cw-nojs :is(.cw-cue, .cw-cue-arc, .cw-cue-head) { visibility: hidden; }

/* phones: the grill across the width with a smaller wheel bolted to its right end at the coals (as on a desk, so
   the chain still reaches it), the three controls in a row beside it, the line about the sound under them */
@media (max-width: 760px) {
  .cw-grillrow { --cw-room: 44px; --cw-wd: 116px; --cw-wx: 77px; --cw-wy: 2px; margin: 36px calc(-1 * var(--cw-m)) 0; padding-left: var(--cw-m); padding-right: 0; }
  .cw-side { height: clamp(176px, 50vw, 300px); }
  .cw-rim { font-size: 4.4px; }   /* with the wheel 77px in, "centre 56°" ends well inside the screen at 320 */
  .cw-rim.cw-cue { letter-spacing: 0; }
  .cw-rim-d { display: none; }
  .cw-rim-m { display: inline; }
  .cw-btns { max-width: calc(100% - var(--cw-wx) - var(--cw-wd) * .62 + 2px); gap: 0 18px; padding-top: 12px; position: relative; z-index: 5; }
  .cw-btn { font-size: .9375rem; gap: 6px; }
  .cw-key { display: none; }
  .cw-soundline { margin-top: max(10px, calc(var(--cw-wd) * .8 - var(--cw-wy) - 50px)); max-width: 34em; }
  .cw-say, .cw-cutcap { max-width: calc(100% - var(--cw-m)); }
}
@media (max-width: 480px) and (max-height: 600px) {
  .spec-coalwheel { --cw-nav-h: 52px; }
  .cw-grillrow { --cw-wd: 108px; }
  .cw-side { height: 186px; }
  .cw-btn { min-height: 40px; }
}

/* ── the fire and the rests ──────────────────────────────────────────── */
.cw-fire { position: relative; padding: clamp(72px, 9vw, 140px) var(--cw-m); }
.cw-fire h2 { font: 800 clamp(1.75rem, 1rem + 2.6vw, 3.25rem)/1.1 var(--cw-serif); letter-spacing: -.01em; max-width: 16em; }
.cw-root :is(h2, h3, .cw-days-t) { text-wrap: balance; }
.cw-root p { text-wrap: pretty; }
.cw-rise { transition: opacity .18s var(--cw-ease) var(--cw-d, 0ms), transform .18s var(--cw-ease) var(--cw-d, 0ms); }
.cw-rise.is-wait:not(.is-in) { opacity: 0; transform: translateY(10px); }
.cw-hard.is-wait:not(.is-in) > * { clip-path: inset(0 0 100% 0); }   /* the children, so the figure itself stays measurable */
.cw-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* a rest holds one thing in a lot of space; its height is half the fire before it, set from the page. What it holds
   stays in view while you pass through it, and moves only as the rest runs: the weight cooling, the parcel coming
   across the counter, the lamb's minutes going down */
.cw-rest { position: relative; min-height: var(--cw-rest-h, 50svh); padding: 0 var(--cw-m); display: grid; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) { .cw-rest { view-timeline: --cw-rest block; } }
}
.cw-rest .cw-stick { position: sticky; top: calc(var(--bar-h, 40px) + var(--cw-nav-h) + 16svh); }


/* rest 2: the cabinet from its open door, full bleed; the number sits on its brushed steel wall */
.cw-rest-days { padding: 0; overflow: hidden; align-content: center; min-height: max(var(--cw-rest-h, 50svh), 420px); }
.cw-days-fig { position: absolute; inset: 0; }
.cw-days-fig picture, .cw-days-fig img { width: 100%; height: 100%; }
.cw-days-fig img { object-fit: cover; object-position: 60% 58%; }
.cw-days { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; margin-left: 15.5vw; padding: 40px 0; }
.cw-days-n { font: 800 clamp(8rem, 3rem + 14vw, 17rem)/.82 var(--cw-serif); letter-spacing: -.03em; margin-left: -.04em; }
@supports (text-box: trim-both cap alphabetic) { .cw-days-n { text-box: trim-both cap alphabetic; line-height: 1; } }
.cw-days-t { font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); font-weight: 560; font-variation-settings: "wght" 560; margin-top: 22px; max-width: 15em; }

/* rest 4: the parcel photograph, and beside it what happens at the counter; the photograph comes across the counter
   as the rest arrives and is in place before it is all on screen */
.cw-rest-paper { align-content: center; }
.cw-rest-paper .cw-rest-fig { display: grid; grid-template-columns: minmax(0, 1fr) min(56vw, 880px); column-gap: clamp(28px, 4vw, 64px); align-items: end; margin: 5svh 0; }
.cw-rest-paper picture { grid-column: 2; grid-row: 1; }
.cw-rest-paper figcaption { grid-column: 1; grid-row: 1; justify-self: end; max-width: 25rem; margin: 0 0 -.1em; text-align: right; }
.cw-paper-h { font: 800 clamp(1.5rem, 1rem + 1.1vw, 2.25rem)/1.16 var(--cw-serif); text-wrap: balance; }
.cw-paper-t { margin: 18px 0 0 auto; max-width: 20em; font-size: 1rem; line-height: 1.5; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cw-rest-paper picture { display: block; animation: cw-slide linear both; animation-timeline: --cw-rest; animation-range: entry 0% entry 90%; }
  }
}
@keyframes cw-slide { from { transform: translateX(22vw) rotate(1deg); } to { transform: none; } }

/* rest 6: the steak on the rack at the pass, full bleed; the rule, then its minutes going by as the main thing */
.cw-rest-rack { padding: 0; overflow: clip; min-height: max(var(--cw-rest-h, 50svh), 520px); align-content: start; }
.cw-rack-fig { position: absolute; inset: 0; }
.cw-rack-fig picture, .cw-rack-fig img { width: 100%; height: 100%; }
.cw-rack-fig img { object-fit: cover; object-position: 53.5% 62%; }
/* the words stand on the white tiles, clear of the window and its dark jamb (the first sixth of the photograph), and
   never reach the steak. The photograph is pinned at the steak's left edge (53.5% of its width, the crust's furthest
   point left), so however the band crops it, at any width or height, the crust starts at 53.5% of the band's width;
   the words run from 19% to 50% of the width, and the countdown is sized in vw so its lines fit that column */
.cw-rest-rack .cw-rest-in { position: relative; z-index: 1; padding: clamp(36px, 5vw, 72px) 0 40px; width: 31vw; margin-left: 19vw; }
.cw-rest-rack .cw-stick { position: sticky; top: calc(var(--bar-h, 40px) + var(--cw-nav-h)); }
.cw-rack-h { font: 800 clamp(1.25rem, 1rem + .9vw, 1.875rem)/1.2 var(--cw-serif); max-width: 22em; text-wrap: balance; }
.cw-count { display: grid; margin-top: clamp(14px, 1.6vw, 24px); font: 800 clamp(2rem, 3.8vw, 4.75rem)/1.04 var(--cw-serif); letter-spacing: -.02em; text-wrap: balance; }
.cw-count span { grid-area: 1 / 1; }
.cw-count span:not(:first-child) { visibility: hidden; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cw-count span, .cw-count span:not(:first-child) { visibility: visible; opacity: 0; animation: cw-show linear; animation-timeline: --cw-rest; }
    .cw-count span:nth-child(1) { animation-range: cover 0% cover 34%; }
    .cw-count span:nth-child(2) { animation-range: cover 34% cover 47%; }
    .cw-count span:nth-child(3) { animation-range: cover 47% cover 60%; }
    .cw-count span:nth-child(4) { animation-range: cover 60% cover 74%; }
    .cw-count span:nth-child(5) { animation-range: cover 74% cover 100%; animation-fill-mode: forwards; }
  }
}
@media (prefers-reduced-motion: reduce) { .cw-count span { visibility: hidden; } .cw-count span:last-child { visibility: visible; } }
@keyframes cw-show { from, to { opacity: 1; } }

/* ── 3 · the cabinet in words, then the counter on the zinc: the names at left, the cut beside them, photographed
   from above at the same scale as every other cut, and what it is and what to do with it right under it ───────── */
.cw-counter {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cw-g);
  overflow-x: clip;
}
.cw-cab-text { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: start; }
.cw-fire .cw-cab-h { grid-column: 1 / 6; font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); }
.cw-cab-prose { grid-column: 6 / 13; columns: 2 16em; column-gap: clamp(24px, 3vw, 48px); padding-top: .4em; }
.cw-cab-prose p { break-inside: avoid; }
.cw-cab-prose p + p { margin-top: 1em; }
.cw-counter-l { grid-column: 1 / 5; grid-row: 2; align-self: start; position: relative; z-index: 1; margin-top: clamp(64px, 7vw, 112px); }
.cw-counter .cw-counter-h { font-size: clamp(1.625rem, 1rem + 1.6vw, 2.5rem); }
.cw-cuts { display: flex; flex-direction: column; align-items: flex-start; margin-top: clamp(20px, 2.2vw, 32px); }
.cw-cut {
  font: 800 clamp(1.75rem, .9rem + 3vw, 3.5rem)/1.04 var(--cw-serif); letter-spacing: -.01em;
  color: rgb(19 20 20 / .38); padding: 5px 0; text-align: left; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; text-decoration-color: transparent;
  transition: color .12s linear, text-decoration-color .12s linear;
}
.cw-cut:hover { color: rgb(19 20 20 / .7); }
.cw-cut > span { pointer-events: none; }   /* Inknut's tall text boxes reach into the next name; the button's own box decides */
.cw-cut[aria-pressed="true"] { color: var(--cw-ink); text-decoration-color: var(--cw-garnet); }
/* the stage: the cut sits on the counter's edge (the foot of the block), so the words under it are always close */
.cw-stage { grid-column: 5 / -1; grid-row: 2; position: relative; margin-top: clamp(64px, 7vw, 112px); display: flex; flex-direction: column; align-self: end; }
.cw-block { height: calc(12.8 * var(--cw-cm)); display: flex; align-items: flex-end; }
/* a cut from the sheet of photographs: every one at 28 px a centimetre on the sheet, drawn at --cw-cm a centimetre */
.spec-coalwheel { --cw-cm: min(34px, calc((100vw - 2 * var(--cw-m)) * .64 / 25.8)); }
.cw-cutimg {
  --x: 612; --y: 12; --w: 546; --h: 313; --cw-sheet: url("/assets/work/coalwheel/cuts.webp");
  width: calc(var(--w) * var(--cw-cm) / 28); height: calc(var(--h) * var(--cw-cm) / 28); flex: none;
  background: none calc(var(--x) * var(--cw-cm) / -28) calc(var(--y) * var(--cw-cm) / -28) / calc(1282 * var(--cw-cm) / 28) calc(762 * var(--cw-cm) / 28) no-repeat;
}
@media (max-width: 700px) { .cw-cutimg { --cw-sheet: url("/assets/work/coalwheel/cuts-sm.webp"); } }
/* the sheet is fetched as the counter or the parcel comes near (or at once, without scripting) */
.cw-near .cw-cutimg { background-image: var(--cw-sheet); }
@media (scripting: none) { .cw-cutimg { background-image: var(--cw-sheet); } }
.cw-cutimg[data-cut="sirloin"] { --x: 738; --y: 378; --w: 532; --h: 214; }
.cw-cutimg[data-cut="rumpcap"] { --x: 12; --y: 12; --w: 588; --h: 354; }
.cw-cutimg[data-cut="bavette"] { --x: 12; --y: 378; --w: 714; --h: 221; }
.cw-cutimg[data-cut="lamb"] { --x: 12; --y: 611; --w: 616; --h: 139; }
.cw-face { filter: drop-shadow(0 1px 1px rgb(19 20 20 / .35)) drop-shadow(0 12px 14px rgb(19 20 20 / .22)); transform-origin: 50% 100%; }
.cw-cut-show { margin-top: clamp(16px, 1.6vw, 24px); max-width: 40em; padding-top: 14px; border-top: 1px solid var(--cw-line); }
.cw-cut-line { font-size: 1.0625rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.cw-nojs .cw-cut-line + .cw-cut-line { margin-top: 12px; }
.cw-cut-line strong { font: 800 1.1875rem/1.3 var(--cw-serif); margin-right: .25em; }
.cw-cut-acts { display: flex; flex-wrap: wrap; gap: 0 30px; margin-top: 10px; }
.cw-act { font: 650 1rem/1 var(--cw-sans); font-variation-settings: "wght" 650; min-height: 44px; display: inline-flex; align-items: center; color: var(--cw-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cw-act:hover { text-decoration-thickness: 3px; }
.cw-nojs #cw-to-grill, .cw-nogl #cw-to-grill { display: none; }

/* the counter's face goes on the grill: one eased move, the square stretching into the band, blending late */
:root::view-transition-group(cw-cut) { animation-duration: .52s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
:root::view-transition-old(cw-cut), :root::view-transition-new(cw-cut) { width: 100%; height: 100%; object-fit: fill; animation-duration: .52s; animation-timing-function: linear; }
:root::view-transition-old(cw-cut) { animation-name: cw-vt-out; }
:root::view-transition-new(cw-cut) { animation-name: cw-vt-in; }
@keyframes cw-vt-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cw-vt-in { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }

/* ── 5 · the grill band, on white tile: the words across the top, the whole grill under them ──────────── */
.cw-grill { background: var(--cw-tile); padding-top: clamp(56px, 6vw, 96px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cw-g); align-items: start; }
.cw-grill-words { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; align-items: start; }
.cw-fire .cw-grill-h { grid-column: 1 / 6; font-size: clamp(1.625rem, 1rem + 1.7vw, 2.75rem); line-height: 1.12; }
.cw-grill-h span { display: block; }
.cw-grill-prose { grid-column: 6 / -1; columns: 2 16em; column-gap: clamp(24px, 3vw, 48px); padding-top: .35em; }
.cw-grill-prose p { break-inside: avoid; }
.cw-grill-prose p + p { margin-top: 1em; }
.cw-grillrow { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(8px, 1.5vw, 24px); }

/* ── 7 · the tables: the menu on the photograph of a table at lunch, the hours with it; then the form on tile ── */
.cw-tables { padding-top: 0; padding-bottom: 0; }
.cw-menu { position: relative; margin: 0 calc(-1 * var(--cw-m)); min-height: max(56.25vw, 760px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cw-g); padding: clamp(40px, 5vw, 80px) var(--cw-m); align-items: start; }
.cw-menu-fig { position: absolute; inset: 0; }
.cw-menu-fig picture, .cw-menu-fig img { width: 100%; height: 100%; }
.cw-menu-fig img { object-fit: cover; object-position: 20% 50%; }
.cw-menu-set { position: relative; z-index: 1; grid-column: 8 / 13; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(18px, 2vw, 32px); }
/* a quiet zone for the list: the tiles and steel behind it soften and lighten, as the salt does behind the headline */
@media (min-width: 901px) {
  .cw-menu-set::before {
    content: ""; position: absolute; z-index: -1; inset: -56px -64px -48px -72px; pointer-events: none;
    background: rgb(237 236 232 / .5);
    -webkit-backdrop-filter: blur(9px) saturate(.8); backdrop-filter: blur(9px) saturate(.8);
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent);
  }
}
.cw-menu h2 { grid-column: 1 / -1; font-size: clamp(1.75rem, 1rem + 2vw, 3rem); }
.cw-hours { grid-column: 1 / -1; margin-top: 14px; max-width: 26em; font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); font-weight: 620; font-variation-settings: "wght" 620; line-height: 1.4; }
.cw-menu-steaks { grid-column: 1 / -1; margin-top: clamp(26px, 3vw, 40px); }
.cw-menu-sides { grid-column: 1; margin-top: clamp(26px, 3vw, 40px); }
.cw-menu-drink { grid-column: 2; margin-top: clamp(26px, 3vw, 40px); }
.cw-menu-note { grid-column: 1 / -1; margin-top: clamp(22px, 2.4vw, 36px); max-width: 30em; font-weight: 560; font-variation-settings: "wght" 560; }
.cw-menu-group h3 { font: 800 1.0625rem/1.3 var(--cw-serif); margin-bottom: 8px; }
.cw-menu-list li { font-size: 1rem; font-weight: 560; font-variation-settings: "wght" 560; line-height: 1.4; padding: 4px 0; }
.cw-menu-plain li { font-weight: 480; font-variation-settings: "wght" 480; }
/* the steaks: each with its days in the cabinet and its weight, and each one goes on the grill */
.cw-menu-steaks li { padding: 0; border-bottom: 1px solid rgb(19 20 20 / .24); }
.cw-menu-steaks li:first-child { border-top: 1px solid rgb(19 20 20 / .24); }
.cw-mcut { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.6em; align-items: baseline; gap: 16px; padding: 9px 0; min-height: 44px; text-decoration: none; font-size: clamp(1rem, .9rem + .3vw, 1.1875rem); }
.cw-mn { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .12s linear; }
.cw-mcut:hover .cw-mn, .cw-mcut:focus-visible .cw-mn { text-decoration-color: var(--cw-garnet); }
.cw-md { font-weight: 480; font-variation-settings: "wght" 480; white-space: nowrap; }
.cw-mg { text-align: right; font-weight: 700; font-variation-settings: "wght" 700; white-space: nowrap; }
.cw-menu-hint { margin-top: 8px; font: 460 .875rem/1.4 var(--cw-sans); font-variation-settings: "wght" 460; color: var(--cw-ink-70); }
.cw-nojs .cw-menu-hint, .cw-nogl .cw-menu-hint { display: none; }

/* the form, on tile: what it is at left, the form at right; nothing beside it but its own words */
.cw-book {
  margin: 0 calc(-1 * var(--cw-m)); padding: clamp(56px, 7vw, 112px) var(--cw-m) clamp(64px, 7.5vw, 120px);
  background: var(--cw-tile);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cw-g); align-items: start;
}
.cw-book-head { grid-column: 1 / 6; grid-row: 1; position: sticky; top: calc(var(--bar-h, 40px) + var(--cw-nav-h) + 32px); }
.cw-book-h { font: 800 clamp(1.75rem, 1rem + 2.2vw, 3.25rem)/1.1 var(--cw-serif); max-width: 11em; }
.cw-book-lead { margin-top: 18px; max-width: 26em; }
.cw-form { grid-column: 7 / 13; grid-row: 1; }
.cw-mode { border: 0; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 0 32px; }
.cw-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cw-mode label {
  font: 800 clamp(1.25rem, 1rem + .8vw, 1.625rem)/1.2 var(--cw-serif); padding: 10px 0; min-height: 44px; display: inline-block; cursor: pointer;
  color: rgb(19 20 20 / .56); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: transparent; text-underline-offset: 8px;
}
.cw-mode input:checked + label { color: var(--cw-ink); text-decoration-color: currentColor; }
.cw-mode input:focus-visible + label { outline: 2px solid var(--cw-ink); outline-offset: 3px; }
.cw-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
.cw-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cw-fw { grid-column: 1 / -1; }
.cw-form:has(#cw-mode-cut:checked) .cw-ft, .cw-form:has(#cw-mode-table:checked) .cw-fc { display: none; }
.cw-f label { font: 600 .875rem/1.3 var(--cw-sans); font-variation-settings: "wght" 600; }
.cw-f label span { font-weight: 420; font-variation-settings: "wght" 420; color: var(--cw-ink-70); }
.cw-f input, .cw-f select, .cw-f textarea {
  font: 450 1.0625rem/1.4 var(--cw-sans); color: var(--cw-ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--cw-line); border-radius: 0; padding: 10px 0; min-height: 44px; width: 100%;
}
.cw-f textarea { resize: vertical; min-height: 72px; }
.cw-f select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 8px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, currentColor 50%) right 2px center / 6px 6px no-repeat;
}
.cw-f :is(input, select, textarea):focus-visible { outline: 2px solid var(--cw-ink); outline-offset: 3px; border-bottom-color: var(--cw-ink); }
.cw-step { display: flex; align-items: center; border-bottom: 1px solid var(--cw-line); }
.cw-step button { width: 44px; height: 44px; font: 600 1.25rem/1 var(--cw-sans); flex: none; }
.cw-step input { border: 0; text-align: center; width: 3.5em; flex: none; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.cw-step input::-webkit-inner-spin-button, .cw-step input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.cw-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 34px; }
.cw-sendbtn { font: 700 1.125rem/1 var(--cw-sans); font-variation-settings: "wght" 700; min-height: 44px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
.cw-sendbtn:hover { text-decoration-thickness: 3px; }
.cw-status { font: 420 .9375rem/1.45 var(--cw-sans); }

/* ── 8 · the last rest: a cut put aside, on butcher's paper on the zinc; the paper folds over it, the twine goes
   round, the stamp comes down with today's date. One number, --cw-w, runs the whole wrap from 0 (open) to 1 ────── */
.cw-rest-pk { align-content: center; padding-top: 6svh; padding-bottom: 6svh; }
.cw-pk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 4vw, 72px); align-items: center; max-width: 1360px; }
.cw-pk-scene {
  --cw-w: 1;
  --b: clamp(0, calc(var(--cw-w) / .26), 1); --t: clamp(0, calc((var(--cw-w) - .22) / .26), 1);
  --e: clamp(0, calc((var(--cw-w) - .46) / .26), 1); --s: clamp(0, calc((var(--cw-w) - .72) / .16), 1); --k: clamp(0, calc((var(--cw-w) - .92) / .08), 1);
  position: relative; aspect-ratio: 10 / 8; cursor: ns-resize;
  filter: drop-shadow(0 1px 1px rgb(19 20 20 / .22)) drop-shadow(0 16px 20px rgb(19 20 20 / .2));
}
.cw-pk-sheet, .cw-pk-f { position: absolute; background: var(--cw-paper, none) 0 0 / 160px repeat, linear-gradient(158deg, #FBFAF6, #EDEBE4 60%, #E6E3DB); }
.cw-pk-sheet {
  left: 21%; right: 21%; top: 29%; bottom: 29%;
  box-shadow: 0 1px 1px rgb(19 20 20 / .22), 0 3px 6px -2px rgb(19 20 20 / .18), 0 22px 34px -18px rgb(19 20 20 / .55);
}
/* the creases where it will fold are already in the paper */
.cw-pk-sheet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(19 20 20 / .06), transparent 3%, transparent 97%, rgb(19 20 20 / .06)), linear-gradient(rgb(19 20 20 / .05), transparent 4%, transparent 96%, rgb(19 20 20 / .06)); pointer-events: none; }
.cw-pk-cut { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 1px rgb(19 20 20 / .35)) drop-shadow(0 6px 8px rgb(19 20 20 / .2)); }
.cw-pk:not(.is-live) .cw-pk-cut { visibility: hidden; }
.cw-pk-f { backface-visibility: visible; }
.cw-pk-b { left: 21%; right: 21%; top: 71%; height: 23.1%; transform-origin: 50% 0; transform: perspective(900px) rotateX(calc(var(--b) * 179.4deg)); filter: brightness(calc(1 - var(--b) * (1 - var(--b)) * 1.2)); box-shadow: 0 calc(var(--b) * -3px) 5px rgb(19 20 20 / calc(var(--b) * .18)); }
.cw-pk-t { left: 21%; right: 21%; bottom: 71%; height: 23.1%; transform-origin: 50% 100%; transform: perspective(900px) rotateX(calc(var(--t) * -179.2deg)); filter: brightness(calc(1 - var(--t) * (1 - var(--t)) * 1.2)); box-shadow: 0 calc(var(--t) * 3px) 5px rgb(19 20 20 / calc(var(--t) * .2)); }
.cw-pk-l, .cw-pk-r { top: 29%; bottom: 29%; width: 15%; }
.cw-pk-l { right: 79%; transform-origin: 100% 50%; transform: perspective(900px) rotateY(calc(var(--e) * 179deg)); filter: brightness(calc(1 - var(--e) * (1 - var(--e)) * 1.3)); clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%); box-shadow: inset calc(var(--e) * -6px) 0 8px -6px rgb(19 20 20 / .3); }
.cw-pk-r { left: 79%; transform-origin: 0 50%; transform: perspective(900px) rotateY(calc(var(--e) * -179deg)); filter: brightness(calc(1 - var(--e) * (1 - var(--e)) * 1.3)); clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); box-shadow: inset calc(var(--e) * 6px) 0 8px -6px rgb(19 20 20 / .3); }
.cw-pk-twine, .cw-pk-knot { position: absolute; overflow: visible; pointer-events: none; }
.cw-pk-twine { left: 21%; right: 21%; top: 29%; bottom: 29%; width: 58%; height: 42%; }
.cw-pk-knot { left: 50%; top: 50%; width: 9%; transform: translate(-50%, -50%); }
.cw-tw { fill: none; stroke: var(--cw-garnet); stroke-linecap: round; stroke-dasharray: 1 2; }
.cw-pk-twine .cw-tw { stroke-width: .62; }
.cw-pk-knot .cw-tw { stroke-width: 1.3; }
.cw-tw-a { stroke-dashoffset: calc(1 - clamp(0, var(--s) * 2, 1)); }
.cw-tw-b { stroke-dashoffset: calc(1 - clamp(0, var(--s) * 2 - 1, 1)); }
.cw-tw-k { stroke-dashoffset: calc(1 - var(--k)); }
.cw-pk-stamp {
  position: absolute; left: 23.5%; top: 30.8%; width: 23%;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 1.4% 2.2%;
  color: var(--cw-garnet); border: 2px solid currentColor; border-radius: 3px;
  font: 700 clamp(.4375rem, .3rem + .28vw, .625rem)/1.1 var(--cw-sans); font-variation-settings: "wght" 700;
  opacity: calc(var(--k) * .88); transform: rotate(-5deg) scale(calc(1.25 - var(--k) * .25)); mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgb(0 0 0 / .7) 80%); mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgb(0 0 0 / .7) 80%);
}
.cw-pk-mark { width: 1.3em; height: 1.3em; fill: currentColor; }
.cw-pk-s1 { font-weight: 800; font-variation-settings: "wght" 800; }
.cw-pk-s2, .cw-pk-s3 { font-weight: 560; font-variation-settings: "wght" 560; font-variant-numeric: tabular-nums; }
.cw-pk-h { font: 800 clamp(1.5rem, 1rem + 1.2vw, 2.25rem)/1.16 var(--cw-serif); max-width: 14em; text-wrap: balance; }
.cw-pk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 18px; }
.cw-pk-hint { font: 420 .875rem/1.4 var(--cw-sans); color: var(--cw-ink-70); }
.cw-wrap { font-size: 1.0625rem; font-weight: 700; font-variation-settings: "wght" 700; }
.cw-pk-aside { display: none; }
.cw-pk.is-shut .cw-pk-aside { display: inline-flex; }
.cw-nojs .cw-pk-acts, .cw-pk.is-shut .cw-pk-hint { display: none; }
@media (pointer: coarse) { .cw-pk-hint { display: none; } }

.cw-foot { padding: 36px var(--cw-m) 48px; border-top: 1px solid var(--cw-line); display: flex; flex-wrap: wrap; gap: 14px 40px; align-items: center; font: 500 .9375rem/1.4 var(--cw-sans); }
.cw-foot-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; margin-right: auto; }
.cw-foot-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.cw-foot-links a { display: inline-block; padding: 12px 0; }

/* ── in between: small laptops and tablets ───────────────────────────── */
@media (max-width: 1180px) {
  .cw-menu-set { grid-column: 7 / 13; }
}
@media (max-width: 900px) {
  .cw-counter-l { grid-column: 1 / -1; grid-row: 2; }
  .cw-stage { grid-column: 1 / -1; grid-row: 3; margin-top: 28px; }
  .cw-cuts { flex-direction: row; flex-wrap: wrap; gap: 0 22px; }
  .cw-cut { font-size: clamp(1.625rem, 1rem + 2vw, 2.25rem); }
  .cw-counter-l { margin-top: clamp(56px, 8vw, 96px); }
  .spec-coalwheel { --cw-cm: calc((100vw - 2 * var(--cw-m)) / 25.8); }
  .cw-fire .cw-cab-h { grid-column: 1 / -1; }
  .cw-cab-prose { grid-column: 1 / -1; margin-top: 20px; }
  .cw-grill-words { display: block; }
  .cw-grill-prose { margin-top: clamp(20px, 3vw, 32px); }
  .cw-grillrow { margin-top: 20px; }
  .cw-book-head { grid-column: 1 / -1; position: static; }
  .cw-form { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(28px, 4vw, 40px); }
  /* the photograph above, the list under it on the zinc */
  .cw-menu { display: block; min-height: 0; padding: 0; margin: 0 calc(-1 * var(--cw-m)); }
  .cw-menu-fig { position: relative; inset: auto; }
  .cw-menu-fig img { aspect-ratio: 16 / 10; height: auto; object-position: 22% 60%; }
  .cw-menu-set { padding: clamp(36px, 6vw, 56px) var(--cw-m) clamp(48px, 7vw, 72px); max-width: 640px; }
  .cw-pk { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .cw-pk-scene { width: min(100%, 720px); margin: 0 auto; }
}

/* ── phones ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .cw-days-fig img { object-position: 19% 58%; }
  .cw-days { margin-left: var(--cw-m); }
  .cw-days-n { font-size: min(44vw, 15rem); }
  .cw-days-t { max-width: 9.5em; }
  .cw-rest-paper .cw-rest-fig { display: block; margin: 7svh 0; }
  .cw-rest-paper figcaption { max-width: 16em; margin: 18px 0 0; text-align: left; justify-self: start; }
  .cw-paper-h { font-size: 1.375rem; }
  .cw-paper-t { margin: 10px 0 0; }
  .cw-rest-rack { min-height: max(var(--cw-rest-h, 50svh), 560px); }
  .cw-rest-rack .cw-rest-in { margin-left: 0; width: auto; max-width: none; padding: clamp(36px, 5vw, 72px) var(--cw-m) 72px; background: linear-gradient(rgb(237 236 232 / .9), rgb(237 236 232 / .8) 62%, transparent); }
  .cw-rack-fig img { object-position: 64% 100%; }
  .cw-count { font-size: clamp(1.875rem, 8.6vw, 2.5rem); }

  .cw-counter { display: block; }
  /* the five names wrap onto two or three lines, every one whole: nothing hides off the edge */
  .cw-cuts { flex-wrap: wrap; gap: 0 18px; margin-top: 20px; }
  .cw-cut { font-size: clamp(1.5rem, 6.4vw, 1.875rem); min-height: 48px; }
  .cw-stage { margin-top: 20px; }
  .cw-cut-line { font-size: 1rem; }

  .cw-cab-text { display: block; }
  .cw-cab-prose { columns: 1; }
  .cw-grill, .cw-menu, .cw-book { display: block; }
  .cw-fire .cw-grill-h { font-size: clamp(1.75rem, 1rem + 3vw, 2.25rem); }
  .cw-grill-h span { display: inline; }
  .cw-grill-prose { columns: 1; }
  .cw-pk-scene { margin: 0 -8px; }
  .cw-pk-stamp { font-size: clamp(.4375rem, 2.1vw, .5625rem); border-width: 1.5px; }
  .cw-menu-fig img { aspect-ratio: 4 / 3; object-position: 18% 70%; }
  .cw-menu-set { column-gap: 18px; }
  .cw-mcut { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .cw-mg { grid-column: 2; }
  .cw-md { grid-column: 1; grid-row: 2; font-size: .9375rem; color: var(--cw-ink-70); }
  .cw-fields { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cw-form { margin-top: 30px; }
}