/* Burner Tools, "The Forge". Built into dist/style.css by scripts/build.mjs. */

@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-extra-bold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("assets/fonts/space-variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Saira Stencil One"; src: url("assets/fonts/SairaStencilOne-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --black: #07090c;
  --steel-1: #0d1116;
  --steel-2: #151b22;
  --steel-3: #232b34;
  --edge: #374556;
  --text: #e6ebf1;
  --muted: #a3afbc;
  --dim: #7d8a98;
  --paper: #f3f2ee;
  --paper-2: #e6e4dd;
  --ink: #101722;
  --ink-2: #3a4553;
  --blue: #0750D6;
  --blue-hover: #003BAA;
  --cyan: #24D6F2;
  --tape: #e8dcae;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --ease: cubic-bezier(.2,.75,.25,1);
  --gut: 16px;
  --rail-h: 52px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--text); font: 400 16px/1.6 "Space Grotesk", system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
main:focus { outline: none; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 90; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 4px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 12px; }
.stencil { font-family: "Saira Stencil One", var(--cond); font-weight: 400; }
.kicker { font: 700 13px/1 var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }

/* buttons + links */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 4px; background: var(--blue); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.2; box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px -10px rgba(7,80,214,.9); transition: background 160ms var(--ease); }
.btn:hover { background: var(--blue-hover); }
.btn--big { font: 800 20px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; padding: 14px 22px; min-height: 52px; }
.tlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: #cfe8ff; text-decoration: underline; text-decoration-color: rgba(36,214,242,.5); text-underline-offset: 4px; transition: color 160ms var(--ease); }
.tlink:hover { color: #fff; text-decoration-color: var(--cyan); }
.nolink { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--dim); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }

/* ================= THE PASS (hero) ================= */
.pass {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(60% 45% at 30% 38%, rgba(7,80,214,.22), transparent 70%),
    radial-gradient(40% 30% at 70% 10%, rgba(36,214,242,.08), transparent 70%),
    linear-gradient(180deg, rgba(7,9,12,.9), rgba(7,9,12,.97) 60%, var(--black)),
    var(--tile) 0 0 / 120px 60px;
}
.lamps { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-around; pointer-events: none; }
.lamps span { position: relative; width: 18%; height: 10px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #58626d, #1d232a); box-shadow: 0 6px 60px 18px rgba(36,214,242,.10), 0 30px 120px 40px rgba(7,80,214,.12); }
.lamps span::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2px; height: 3px; border-radius: 2px; background: #9befff; box-shadow: 0 0 12px 2px rgba(36,214,242,.8); }
.lamps span::after { content: ""; position: absolute; left: -10%; right: -10%; top: 10px; height: 340px; background: linear-gradient(180deg, rgba(36,214,242,.07), transparent 80%); clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); }
.topbar { position: relative; z-index: 2; width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { font: 800 24px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; color: #f3f6fa; }
.brand--sm span { font-size: 18px; }
.topbar ul { display: flex; gap: 2px; }
.topbar ul a { display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15px; color: #c9d2dc; }
.topbar ul a:hover { color: #fff; background: rgba(255,255,255,.06); }

.pass__hero { position: relative; z-index: 1; flex: 1; width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 24px 56px; padding: 8px 0 28px; }
.pass__mark { width: min(100%, 380px, 44vh); justify-self: center; transform: rotate(9deg); filter: drop-shadow(0 0 60px rgba(36,214,242,.28)) drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.pass__copy h1 { margin: 18px 0 20px; font: 800 clamp(54px, min(8vw, 12.5vh), 118px)/.86 var(--cond); text-transform: uppercase; letter-spacing: .005em; color: #f5f8fb; }
.pass__copy h1 span { color: transparent; background: linear-gradient(95deg, #7fe9fb, #24D6F2 30%, #3d86ff 80%); -webkit-background-clip: text; background-clip: text; }
.pass__lede { max-width: 34em; font-size: 18px; color: #c3cdd8; }
.pass__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }

/* the ticket rail over the pass */
.pass__rail { position: relative; z-index: 1; padding: 0 0 0; }
.pass__bar { position: relative; height: 14px; margin: 0 auto; width: 100%; background: linear-gradient(180deg, #eef2f5, #9aa5b0 45%, #5b6570 55%, #c9d1d8); box-shadow: 0 4px 12px rgba(0,0,0,.6); }
.hts { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; width: min(1320px, calc(100% - 2 * var(--gut))); margin: -8px auto 0; padding-bottom: 34px; }
.ht { transform: rotate(var(--r)); transform-origin: 50% 0; transition: transform 260ms var(--ease); }
.ht a {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 14px 18px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #fbfbf8, var(--paper) 30%, var(--paper-2));
  box-shadow: 0 18px 30px -12px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.6) inset;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), 94% 100%, 88% calc(100% - 6px), 82% 100%, 76% calc(100% - 6px), 70% 100%, 64% calc(100% - 6px), 58% 100%, 52% calc(100% - 6px), 46% 100%, 40% calc(100% - 6px), 34% 100%, 28% calc(100% - 6px), 22% 100%, 16% calc(100% - 6px), 10% 100%, 4% calc(100% - 6px), 0 100%);
}
.ht a::before { content: ""; position: absolute; left: 50%; top: -4px; width: 34px; height: 14px; margin-left: -17px; border-radius: 3px; background: linear-gradient(180deg, #cfd6dd, #6c7682); box-shadow: 0 2px 3px rgba(0,0,0,.4); }
.ht:hover, .ht:focus-within { transform: rotate(0deg) translateY(4px); }
.ht a:focus-visible { outline-offset: -3px; }
.ht__top { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed #b7b9b5; font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.ht__name { font: 800 27px/.95 var(--cond); text-transform: uppercase; letter-spacing: .01em; margin-top: 4px; }
.ht__hook { font-size: 13.5px; line-height: 1.4; color: #2c3643; flex: 1; }
.ht__go { font: 700 12.5px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-top: 6px; }
.pass__shelf { height: 26px; background: linear-gradient(180deg, #c7cfd6, #eef2f5 20%, #8f9aa5 60%, #3a434d); box-shadow: 0 -1px 0 rgba(255,255,255,.4) inset, 0 14px 30px rgba(0,0,0,.8); }

/* ================= the sticky ticket rail (progress) ================= */
.rail { position: sticky; top: 0; z-index: 50; height: var(--rail-h); background: linear-gradient(180deg, rgba(10,13,17,.97), rgba(10,13,17,.9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #1f2730; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(180deg, #d9e0e6, #6e7883); }
.rail__in { width: min(1320px, calc(100% - 2 * var(--gut))); height: 100%; margin: 0 auto; display: flex; align-items: flex-start; gap: 16px; }
.rail__lbl { padding-top: 18px; font: 700 12px/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.rail ol { display: flex; gap: 8px; flex: 1; min-width: 0; }
.rail li { flex: 1 1 0; min-width: 0; max-width: 170px; }
.rt { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; margin-top: 3px; padding: 6px 10px 4px; text-decoration: none; color: #3b4452; background: #c8ccd0; clip-path: polygon(0 0,100% 0,100% calc(100% - 4px),90% 100%,80% calc(100% - 4px),70% 100%,60% calc(100% - 4px),50% 100%,40% calc(100% - 4px),30% 100%,20% calc(100% - 4px),10% 100%,0 calc(100% - 4px)); transform: translateY(-6px); opacity: .62; transition: transform 260ms var(--ease), opacity 260ms var(--ease), background 260ms var(--ease); }
.rt:hover { opacity: .9; transform: translateY(-2px); }
.rt__n { font: 600 12px/1 var(--mono); }
.rt__name { font: 800 16px/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt[aria-current] { opacity: 1; transform: none; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--cyan); }
.rt[aria-current] .rt__n { color: var(--blue); }
.rt[aria-current]::after { content: ""; position: absolute; right: 8px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.rt:focus-visible { outline-offset: 1px; clip-path: none; }
.rail__tb { padding: 16px 4px 0; font: 700 14px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; }
.rail__tb:hover, .rail__tb[aria-current] { color: #fff; }

/* ================= THE LINE ================= */
.line__intro { width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 72px 0 24px; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; align-items: baseline; }
.line__lede { max-width: 40em; font-size: 20px; line-height: 1.5; color: #c9d2dc; }
.line__lede b { font-family: var(--cond); font-weight: 800; font-size: 1.1em; letter-spacing: .06em; text-transform: uppercase; color: #fff; }

.station { --heat: 0; position: relative; isolation: isolate; }
/* the tile wall behind the pass, in shadow until the burner lights it */
.station::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(90deg, rgba(7,9,12,.9), rgba(7,9,12,.78) 40%, rgba(7,9,12,.9)), var(--tile) 0 0 / 120px 60px;
  border-top: 1px solid #1c232b;
}
.station::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--heat) * 1);
  background:
    radial-gradient(640px 520px at var(--gx, 22%) 42vh, rgba(36,214,242,.22), rgba(7,80,214,.14) 45%, transparent 75%),
    radial-gradient(900px 700px at 60% 30%, rgba(7,80,214,.10), transparent 70%);
  mix-blend-mode: screen; transition: opacity 500ms var(--ease);
}
.station__in { width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 56px; padding: 72px 0 96px; }

/* the stove column: a blackened-steel range top, sticky while the story scrolls */
.stove { position: relative; }
.stove::before { content: ""; position: absolute; inset: -72px 0 -96px; z-index: -1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(90deg, #0b0e12, #161b21 12%, #11151a 88%, #07090c), var(--steel-1); border-left: 1px solid #1f262e; border-right: 1px solid #2a323c; box-shadow: 30px 0 60px -30px rgba(0,0,0,.9); }
.stove__sticky { position: sticky; top: calc(var(--rail-h) + 20px); display: flex; flex-direction: column; gap: 14px; padding: 0 28px 24px; }
.stove__plate { display: flex; align-items: center; gap: 12px; font: 700 12px/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.stove__plate .stencil { font-size: 44px; line-height: .9; letter-spacing: 0; color: #2c3845; transition: color 500ms var(--ease), text-shadow 500ms var(--ease); }
.station.is-on .stove__plate .stencil { color: var(--cyan); text-shadow: 0 0 18px rgba(36,214,242,.6); }
.stove__top { position: relative; margin: 0 -8px; }
.burner-svg { width: 100%; height: auto; overflow: visible; }
.knob { position: absolute; right: -2px; bottom: 2px; width: 52px; height: 52px; }
.knob__cap { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #59626c, #20262d 60%, #0d1014); box-shadow: 0 4px 10px rgba(0,0,0,.7), 0 0 0 3px #0a0c0f; transform: rotate(-120deg); transition: transform 700ms var(--ease); }
.knob__cap::after { content: ""; position: absolute; left: 50%; top: 5px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: #cfd6dd; }
.station.is-on .knob__cap { transform: rotate(calc(-75deg + (var(--step, 1) - 1) * 45deg)); }
.station.is-on .knob__cap::after { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.knob__lbl { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font: 700 10px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--dim); transition: opacity 300ms; }
.knob__lbl--hi { opacity: 0; color: var(--cyan); }
.station.is-on .knob__lbl--off { opacity: 0; }
.station.is-on .knob__lbl--hi { opacity: 1; }

.stove__name { font: 800 clamp(34px, 3.2vw, 46px)/.92 var(--cond); text-transform: uppercase; letter-spacing: .01em; color: #f5f8fb; overflow-wrap: anywhere; }
.stove__hook { font-size: 19px; line-height: 1.4; color: #cdd6e0; }
.stove__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.stove__plat { font: 500 13px/1.3 var(--mono); color: var(--muted); }
.stamp { display: inline-block; padding: 5px 10px 4px; border: 2px solid currentColor; border-radius: 3px; font: 800 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-2deg); }
.stamp--hot { color: var(--cyan); }
.stamp--cook { color: #f0c46a; }

/* burner paint (from prototype F, tuned for a bigger ring) */
.burner-svg .tray { fill: url(#g-tray); stroke: #2b333c; stroke-width: 2.5; }
.burner-svg .drip { fill: none; stroke: rgba(255,255,255,.04); stroke-width: 2; }
.burner-svg .head { fill: #1a1f25; stroke: #3d4650; stroke-width: 3; }
.burner-svg .ports { fill: none; stroke: #06080a; stroke-width: 2.6; stroke-dasharray: 2 3.35; }
.burner-svg .sup { fill: #262d35; stroke: #090b0e; stroke-width: 1.5; }
.burner-svg .sup-hi { fill: rgba(255,255,255,.12); }
.burner-svg .glow { fill: url(#g-glow); opacity: 0; transition: opacity 700ms var(--ease); }
.burner-svg .fo { fill: url(#g-fo); }
.burner-svg .fi { fill: url(#g-fi); transition: opacity 400ms var(--ease); }
.burner-svg .st { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.3, .2); transition: transform 380ms cubic-bezier(.4,0,.8,.6); }
.burner-svg .tg { transform-box: fill-box; transform-origin: 50% 100%; }
.burner-svg .flames { opacity: .55; transition: opacity 400ms var(--ease); }
.burner-svg .pan-body { fill: url(#g-pan); stroke: #06080a; stroke-width: 2; }
.burner-svg .pan-handle { fill: #15191e; stroke: #06080a; stroke-width: 1.5; }
.burner-svg .pan-floor { fill: #0e1115; }
.burner-svg .pan-food { opacity: .55; filter: saturate(.6); transition: opacity 700ms var(--ease), filter 700ms var(--ease); }
.burner-svg .pan-sheen { fill: url(#g-sheen); pointer-events: none; }
.burner-svg .pan-rim { fill: none; stroke: #4a535d; stroke-width: 1.4; opacity: .8; }
.station.is-on .burner-svg .flames { opacity: 1; filter: url(#f-bloom); }
.station.is-on .burner-svg .glow { opacity: 1; animation: breathe 2.4s ease-in-out infinite alternate; }
.station.is-on .burner-svg .st { transform: none; transition: transform 620ms cubic-bezier(.25,1.6,.5,1) calc(var(--i) * 12ms); }
.station.is-on .burner-svg .tg { animation: flick calc(760ms + var(--i) * 41ms) ease-in-out calc(var(--i) * -170ms) infinite alternate; }
.station.is-on .burner-svg .pan-food { opacity: 1; filter: none; }
@keyframes flick { 0% { transform: scale(1,1); } 30% { transform: scale(.95,1.1); } 55% { transform: scale(1.04,.9); } 80% { transform: scale(.97,1.06); } 100% { transform: scale(1.02,.95); } }
@keyframes breathe { from { opacity: .75; } to { opacity: 1; } }
/* without JS every burner is simply lit, and nothing moves */
html:not(.js) .station .burner-svg .st { transform: none; }
html:not(.js) .station .burner-svg .flames, html:not(.js) .station .burner-svg .glow, html:not(.js) .station .burner-svg .pan-food { opacity: 1; filter: none; }
html:not(.js) .station::after { opacity: .7; }
html:not(.js) .knob__cap { transform: none; }
html:not(.js) .knob__lbl--off { opacity: 0; }
html:not(.js) .knob__lbl--hi { opacity: 1; }

/* the story column: tickets and plates, read top to bottom */
.story { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.tkt {
  position: relative; max-width: 780px; padding: 30px 34px 34px; color: var(--ink);
  background: linear-gradient(180deg, #fbfbf8, var(--paper) 18%, var(--paper-2));
  box-shadow: 0 24px 40px -18px rgba(0,0,0,.85);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 7px),97% 100%,94% calc(100% - 7px),91% 100%,88% calc(100% - 7px),85% 100%,82% calc(100% - 7px),79% 100%,76% calc(100% - 7px),73% 100%,70% calc(100% - 7px),67% 100%,64% calc(100% - 7px),61% 100%,58% calc(100% - 7px),55% 100%,52% calc(100% - 7px),49% 100%,46% calc(100% - 7px),43% 100%,40% calc(100% - 7px),37% 100%,34% calc(100% - 7px),31% 100%,28% calc(100% - 7px),25% 100%,22% calc(100% - 7px),19% 100%,16% calc(100% - 7px),13% 100%,10% calc(100% - 7px),7% 100%,4% calc(100% - 7px),1% 100%,0 calc(100% - 7px));
}
.tkt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(180deg, #aeb7c0, #6d7782); }
.tkt__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px dashed #b9bbb6; font: 600 12px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.tkt__head span:first-child { font: 800 24px/1 var(--cond); letter-spacing: .14em; color: var(--ink); }
.tkt__order { font-size: 22px; line-height: 1.5; letter-spacing: -.005em; color: #16202c; max-width: 34em; }
.tkt--order { transform: rotate(-.4deg); }
.tkt--recipe { max-width: none; transform: rotate(.25deg); }
.recipe { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.tkt__h { margin-bottom: 10px; font: 800 18px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.tkt__list { display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.tkt__list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.6; color: #1d2733; }
.tkt__list li::before { counter-increment: s; content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 3px; font: 600 11px/1.6 var(--mono); color: #7a8391; }

/* the plate: real screenshots, big */
.plate { display: flex; flex-direction: column; gap: 16px; }
.plate__label { display: flex; align-items: baseline; gap: 12px; font: 500 13px/1 var(--mono); color: var(--dim); }
.plate__label span { font: 800 24px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.dish { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dish__plate {
  position: relative; padding: 10px; border-radius: 14px;
  background: linear-gradient(145deg, #e9edf1, #a7b1bb 40%, #dfe5ea 60%, #7d8893);
  box-shadow: 0 34px 60px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.5), 0 0 80px -20px rgba(36,214,242, calc(var(--heat) * .35));
}
.dish__plate img { width: 100%; height: auto; border-radius: 6px; background: #0d1116; }
.dish figcaption { font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 60em; }
.dish--lead .dish__plate { padding: 12px; }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.sides--1 { grid-template-columns: minmax(0, 1fr); max-width: 78%; }
.plate--more { padding-left: 8%; }
.dish--side .dish__plate img[src*="mascot"] { background: #f3f6f4; padding: 20px 20%; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.pair--even { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.pair__arrow { font: 800 40px/1 var(--cond); color: var(--cyan); text-shadow: 0 0 16px rgba(36,214,242,.6); margin-top: -40px; }
.pair .dish figcaption { font-size: 13px; }

/* chef's note: marker on masking tape */
.note { position: relative; align-self: flex-start; max-width: 680px; margin: 8px 0 0 18px; padding: 22px 28px 24px; color: #1b212b; background: linear-gradient(180deg, #efe4b9, var(--tape)); transform: rotate(-1.3deg); box-shadow: 0 18px 30px -16px rgba(0,0,0,.85);
  clip-path: polygon(0 3%, 2% 0, 5% 4%, 9% 1%, 14% 3%, 30% 0, 50% 2%, 70% 0, 88% 3%, 94% 0, 98% 3%, 100% 1%, 99% 50%, 100% 98%, 96% 100%, 91% 97%, 80% 100%, 60% 98%, 40% 100%, 20% 97%, 8% 100%, 3% 97%, 0 100%, 1% 50%);
}
.note__lbl { font: 700 13px/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; color: #6b5b24; margin-bottom: 8px; }
.note__body { font: 700 23px/1.3 var(--cond); letter-spacing: .01em; }

/* pass slip: the honest status and the way out */
.pass-slip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 18px; align-items: start; max-width: 780px; padding: 20px 0 0; border-top: 1px solid #26303a; }
.pass-slip__status { font-size: 15px; color: #c3cdd8; }
.pass-slip .acts { grid-column: 1 / -1; }

/* ================= TOOLBOX (pegboard) ================= */
.toolbox { position: relative; padding: 96px 0 104px; background:
  radial-gradient(circle at 14px 14px, #06080a 3.6px, transparent 4.4px) 0 0 / 28px 28px,
  radial-gradient(120% 80% at 50% 0%, #1c232b, #11161c 70%);
  border-top: 16px solid #0b0e12; box-shadow: inset 0 18px 30px -10px rgba(0,0,0,.8); }
.toolbox__in { width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; }
.toolbox__head { max-width: 680px; margin-bottom: 44px; padding: 26px 30px; background: rgba(9,12,15,.86); border: 1px solid #2a333d; border-radius: 6px; }
.toolbox__head h2 { margin: 10px 0 8px; font: 800 clamp(40px, 5vw, 64px)/.9 var(--cond); text-transform: uppercase; color: #f5f8fb; }
.toolbox__head p:last-child { color: #c3cdd8; }
.board { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 28px; }
.board > li { flex: 0 1 calc((100% - 56px) / 3); }
.tool { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 34px 24px 20px; border-radius: 6px; background: linear-gradient(180deg, #1b2129, #12171d); border: 1px solid var(--edge); box-shadow: 0 20px 36px -18px rgba(0,0,0,.9); transform: rotate(var(--r)); transform-origin: 50% 0; transition: transform 260ms var(--ease); }
.tool:hover, .tool:focus-within { transform: rotate(0deg); }
.tool__hook { position: absolute; top: -14px; left: 50%; width: 12px; height: 26px; margin-left: -6px; border: 3px solid #a9b4bf; border-bottom: 0; border-radius: 8px 8px 0 0; }
.tool__hook::before { content: ""; position: absolute; left: -6px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #05070a; }
.tool__name { align-self: flex-start; margin: 0 0 4px -4px; padding: 6px 12px 5px; background: var(--tape); color: #1b212b; font: 800 22px/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; transform: rotate(-1.5deg); }
.tool__line { font-size: 15.5px; line-height: 1.55; color: #dbe2ea; }
.tool__status { font: 500 12.5px/1.45 var(--mono); color: var(--muted); }
.tool__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.chips { display: flex; gap: 6px; }
.chip { padding: 3px 8px; border-radius: 99px; border: 1px solid #3b4755; font: 600 11.5px/1.3 var(--mono); color: var(--muted); }

/* ================= footer ================= */
.foot { border-top: 1px solid #1a2129; background: var(--black); }
.foot__in { width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 28px 0 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-size: 14px; color: var(--muted); }
.foot__mail a { color: #dbe8f5; font-weight: 600; text-underline-offset: 3px; }
.foot__tip { margin-left: auto; }
.foot__tip a { font-size: 12.5px; color: var(--dim); text-underline-offset: 3px; }
.foot__tip a:hover { color: var(--text); }

/* ================= responsive ================= */
@media (max-width: 1180px) {
  .hts { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .station__in, .line__intro { grid-template-columns: 320px minmax(0, 1fr); gap: 40px; }
  .rt__name { font-size: 14px; }
}
@media (max-width: 900px) {
  :root { --rail-h: 48px; }
  .pass__hero { grid-template-columns: 1fr; padding-top: 12px; text-align: left; }
  .pass__mark { width: 220px; justify-self: start; }
  .line__intro { grid-template-columns: 1fr; gap: 12px; padding-top: 52px; }
  .station__in { grid-template-columns: 1fr; gap: 28px; padding: 44px 0 64px; }
  .stove::before { inset: -44px calc(-1 * var(--gut)) 0; border: 0; border-bottom: 1px solid #2a323c; }
  .stove__sticky { position: static; display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "plate plate" "top name" "top steps" "acts acts"; gap: 10px 18px; padding: 0 0 26px; align-items: end; }
  .stove__plate { grid-area: plate; }
  .stove__top { grid-area: top; margin: 0; align-self: center; }
  .stove__name { grid-area: name; font-size: clamp(36px, 9vw, 52px); }
  .steps { grid-area: steps; align-self: start; }
  .acts--stove { grid-area: acts; }
  .knob { width: 34px; height: 34px; right: -8px; bottom: -4px; }
  .knob__lbl { display: none; }
  .station::after { background: radial-gradient(420px 380px at 22% 180px, rgba(36,214,242,.22), rgba(7,80,214,.12) 45%, transparent 75%); }
  .board > li { flex-basis: calc((100% - 28px) / 2); }
  .rail__lbl, .rail__tb { display: none; }
}
@media (max-width: 640px) {
  .topbar { padding-top: 16px; }
  .brand span { font-size: 20px; white-space: nowrap; }
  .topbar ul a { padding: 10px 8px; font-size: 14px; white-space: nowrap; }
  .topbar li:last-child { display: none; }
  .pass__lede { font-size: 16.5px; }
  .pass__mark { width: 150px; margin-top: 8px; }
  .pass__copy h1 { margin-top: 12px; }
  .hts { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 var(--gut) 30px; margin: -8px 0 0; width: 100%; scrollbar-width: none; }
  .hts::-webkit-scrollbar { display: none; }
  .ht { flex: 0 0 64%; scroll-snap-align: start; }
  .ht__name { font-size: 24px; }
  .rail ol { gap: 5px; }
  .rt { padding: 6px 0 4px; justify-content: center; }
  .rt__name { display: none; }
  .rail li:has(.rt[aria-current]) { flex-grow: 2.8; }
  .rt[aria-current] { justify-content: flex-start; padding-left: 8px; }
  .rt[aria-current] .rt__name { display: block; font-size: 14px; }
  .rt[aria-current]::after { display: none; }
  .line__lede { font-size: 17px; }
  .tkt { padding: 24px 20px 28px; }
  .tkt__order { font-size: 18.5px; }
  .tkt__head { flex-direction: column; gap: 6px; }
  .recipe { grid-template-columns: 1fr; gap: 24px; }
  .sides, .sides--1 { grid-template-columns: 1fr; max-width: none; }
  .plate--more { padding-left: 0; }
  .pair, .pair--even { grid-template-columns: 1fr; gap: 10px; }
  .pair__arrow { margin: 0 auto; transform: rotate(90deg); font-size: 32px; }
  .dish__plate { padding: 6px; border-radius: 10px; }
  .dish--lead .dish__plate { padding: 7px; }
  .note { margin-left: 4px; padding: 18px 20px 20px; }
  .note__body { font-size: 20px; }
  .pass-slip { grid-template-columns: 1fr; }
  .board > li { flex-basis: 100%; }
  .board { gap: 36px; }
  .toolbox__head { padding: 20px; }
  .stove__sticky { grid-template-columns: 136px minmax(0, 1fr); }
  .foot__tip { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  /* static lit states: every burner shows its flame, nothing flickers */
  .station .burner-svg .st { transform: none; }
  .station .burner-svg .flames, .station .burner-svg .glow, .station .burner-svg .pan-food { opacity: 1; filter: none; }
  .station .knob__lbl--off { opacity: 0; }
  .station .knob__lbl--hi { opacity: 1; }
  .ht, .tool { transform: none; }
}

/* ======================================================================
   Prototype J: the line as a slide deck.
   Without JS (no .deck class) everything below the scroll-mode rules is
   inert and the page reads as one long scrolling page.
   ====================================================================== */

/* ---- shared pieces (both modes) ---- */
.story > .slide { min-width: 0; }
.slide__in { display: flex; flex-direction: column; gap: 28px; }
.slide__h:focus { outline: none; }
.intro__kick { color: var(--cyan); }
.intro__name { font: 800 clamp(56px, 6.4vw, 104px)/.86 var(--cond); text-transform: uppercase; letter-spacing: .005em; color: #f5f8fb; margin-top: -8px; overflow-wrap: anywhere; }
.intro__hook { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; color: #d7dfe8; max-width: 30em; }
.intro__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tkt--order .tkt__order { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; }
.tkt__head h3 { font: 800 24px/1 var(--cond); letter-spacing: .14em; color: var(--ink); margin: 0; }
.plate__label { display: flex; align-items: baseline; gap: 12px; font: 500 13px/1 var(--mono); color: var(--dim); margin: 0; }
.note__lbl { margin: 0 0 8px; }
.pass-slip .stamp { justify-self: start; }
.dish { align-self: flex-start; max-width: 100%; }
.dish__plate { align-self: flex-start; max-width: 100%; }

/* knob notches: one per slide, lit as the station cooks */
.knob__notches i { position: absolute; left: 50%; top: 50%; width: 3px; height: 6px; margin: -3px 0 0 -1.5px; border-radius: 2px; background: #2e3842; transform: rotate(var(--a)) translateY(-33px); transition: background 260ms var(--ease), box-shadow 260ms var(--ease); }
.station.is-on .knob__notches i.is-lit { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.station.is-on .knob__cap { transform: rotate(var(--knob, -75deg)); }

/* step progress in the burner column */
.steps { display: flex; flex-direction: column; gap: 8px; }
.steps__dots { display: flex; gap: 6px; }
.steps__dot { width: 34px; height: 6px; border-radius: 3px; background: #242d37; transition: background 260ms var(--ease), box-shadow 260ms var(--ease); }
.steps__dot.is-done { background: #1d6a80; }
.steps__dot.is-cur { background: var(--cyan); box-shadow: 0 0 10px rgba(36,214,242,.7); }
.steps__lbl { font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.steps__lbl b { color: #fff; font-weight: 700; }
.station.is-on .steps__lbl span { color: var(--cyan); }
html:not(.deck) .steps, html:not(.deck) .deckctl { display: none; }

/* the next-ticket */
.next-tkt { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 20px 14px; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #fbfbf8, var(--paper) 30%, var(--paper-2)); box-shadow: 0 16px 28px -14px rgba(0,0,0,.9); border-top: 6px solid #8a95a0; transform: rotate(-.6deg); transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.next-tkt:hover { transform: rotate(0) translateY(2px); box-shadow: 0 0 0 2px var(--cyan), 0 16px 28px -14px rgba(0,0,0,.9); }
.next-tkt__k { font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.next-tkt__t { font: 800 24px/1 var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.next-tkt__a { font: 800 26px/1 var(--cond); color: var(--blue); }

/* scroll mode footer (no JS) */
.foot__in { flex-wrap: wrap; }
.foot__mark { width: 32px; height: 32px; }
.foot__h { font: 800 22px/1 var(--cond); text-transform: uppercase; color: #f3f6fa; }

/* ================= deck mode ================= */
html.deck, html.deck body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.deck .line__intro, .deck .skip { display: none; }
.deck .scene { position: fixed; inset: 0; overflow: clip; opacity: 0; pointer-events: none; transform: translateX(7%); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
.deck .scene.is-past { transform: translateX(-7%); }
.deck .scene.is-cur { opacity: 1; pointer-events: auto; transform: none; z-index: 2; }
.deck .rail { position: fixed; left: 0; right: 0; top: 0; z-index: 60; transition: transform 450ms var(--ease); }
.deck.on-hero .rail { transform: translateY(-110%); }

/* deck controls: counter + prev/next */
.deckctl { position: fixed; right: 20px; bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 99px; background: rgba(10,13,17,.86); border: 1px solid #2a333d; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.deckctl__b { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1a2027; color: #e6ebf1; font: 700 18px/1 var(--cond); cursor: pointer; }
.deckctl__b:hover { background: var(--blue); }
@media (min-width: 901px) { .deck.on-hero .deckctl { bottom: auto; top: 84px; } }
.deckctl__b:disabled { opacity: .35; cursor: default; background: #1a2027; }
.deckctl__n { min-width: 70px; text-align: center; font: 600 13px/1 var(--mono); color: var(--muted); }
.deckctl__n b { color: #fff; }

/* hero */
.deck .pass { min-height: 0; height: 100%; }
.deck .pass__hero { padding-bottom: 20px; }

/* station scene: burner column fixed on the left, slides change on the right */
.deck .station { padding-top: var(--rail-h); }
.deck .station::after { opacity: var(--heat, 0); }
.deck .station__in { width: 100%; height: 100%; margin: 0; padding: 0; gap: 0; grid-template-columns: minmax(340px, 29%) minmax(0, 1fr); }
.deck .stove::before { inset: 0; }
.deck .stove__sticky { position: static; height: 100%; justify-content: center; gap: 16px; padding: 24px 40px 40px; }
.deck .stove__top { width: min(100%, 38vh, 330px); margin: 0; }
.deck .story { position: relative; overflow: clip; }
.deck .story > .slide { position: absolute; inset: 0; overflow: clip; opacity: 0; pointer-events: none; transform: translateY(32px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
.deck .story > .slide.is-past { transform: translateY(-32px); }
.deck .story > .slide.is-cur { opacity: 1; pointer-events: auto; transform: none; }
.deck .slide__in { height: 100%; justify-content: center; gap: 24px; padding: 36px clamp(32px, 4.5vw, 72px) 64px; max-width: 1080px; }
.deck .slide--plate .dish__plate img { width: auto; max-width: 100%; max-height: calc(100dvh - var(--rail-h) - 250px); }
.deck .slide--plate .pair .dish__plate img { max-height: calc(100dvh - var(--rail-h) - 280px); }
.deck .slide--plate .sides { width: 100%; max-width: none; }
.deck .slide--plate .sides .dish__plate img { max-height: calc(100dvh - var(--rail-h) - 300px); }
.deck .plate--more { padding: 0; }
.deck .slide--note .note__body { font-size: clamp(22px, 2.1vw, 30px); }
.deck .slide--note .pass-slip { width: 100%; }

/* toolbox scene */
.deck .toolbox { padding: calc(var(--rail-h) + 28px) 0 64px; border-top: 0; display: flex; align-items: center; }
.deck .toolbox__in { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; }
.deck .toolbox__head { margin: 0; }
.deck .board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; }
.deck .board > li { flex: none; }
.deck .tool { padding: 30px 20px 16px; gap: 8px; }
.deck .tool__line { font-size: 14.5px; line-height: 1.5; }

/* closing scene */
.deck .foot { display: grid; place-items: center; border: 0; background: radial-gradient(50% 40% at 50% 45%, rgba(7,80,214,.18), transparent 70%), var(--black); }
.deck .foot__in { flex-direction: column; justify-content: center; text-align: center; gap: 18px; padding: 0 var(--gut); }
.deck .foot__mark { width: 96px; height: 96px; transform: rotate(9deg); }
.deck .foot__h { font-size: clamp(56px, 8vw, 110px); }
.deck .foot__mail { font-size: 18px; color: #c9d2dc; }
.deck .foot__tip { margin: 8px 0 0; }

/* phones: the burner becomes a band on top; tall slides scroll inside */
@media (max-width: 900px) {
  .deck .station__in { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .deck .stove__sticky { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "top plate" "top name" "top steps"; gap: 2px 14px; padding: 10px var(--gut) 12px; height: auto; align-items: center; }
  .deck .stove__top { width: 76px; }
  .deck .stove__plate .stencil { font-size: 24px; }
  .deck .stove__plate { font-size: 10px; gap: 8px; }
  .deck .stove__name { font-size: 24px; }
  .deck .steps { display: flex; flex-direction: row; align-items: center; gap: 10px; }
  .deck .steps__dot { width: 18px; height: 4px; }
  .deck .steps__lbl { font-size: 10.5px; }
  .deck .acts--stove, .deck .knob { display: none; }
  .deck .story > .slide, .deck .pass, .deck .toolbox { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .deck .slide__in { height: auto; min-height: 100%; justify-content: safe center; padding: 22px var(--gut) 96px; gap: 20px; }
  .deck .slide--plate .dish__plate img, .deck .slide--plate .pair .dish__plate img, .deck .slide--plate .sides .dish__plate img { max-height: 58dvh; }
  .deck .toolbox { display: block; padding: calc(var(--rail-h) + 20px) 0 96px; }
  .deck .toolbox__in { grid-template-columns: 1fr; gap: 28px; }
  .deck .board { grid-template-columns: 1fr; }
  .deck .pass { padding-bottom: 72px; }
  .deckctl { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .station:not(.is-on) .knob__cap { transform: rotate(-75deg); }
  .next-tkt { transform: none; }
}

/* ======================================================================
   Prototype K: the forge. A theme layer over J's deck. Blackened steel,
   soot and firebrick; the brand's blue gas flame is the light, and hot
   orange metal is a sparing accent (the work on the anvil, gauge max).
   ====================================================================== */
:root {
  --black: #0a0908;
  --paper: #ece4d2;
  --paper-2: #dccfb3;
  --kraft: #c9b184;
  --kraft-2: #b39766;
  --tape: #c9b184;
  --ember: #ff9a3c;
  --hot: #ffc070;
  --brick: #6a3122;
}
body { background: var(--black); }
.stamp--cook { color: var(--ember); }

/* soot over firebrick */
.station::before { background: linear-gradient(90deg, rgba(10,8,7,.9), rgba(10,8,7,.8) 40%, rgba(10,8,7,.9)), var(--tile) 0 0 / 120px 60px; border-top-color: #1d1512; }
.station::after { background:
  radial-gradient(560px 460px at 16% 38%, rgba(36,214,242,.20), rgba(7,80,214,.12) 45%, transparent 75%),
  radial-gradient(420px 260px at 16% 62%, rgba(255,120,40,.10), transparent 70%); }
.pass { background:
  radial-gradient(38% 34% at 27% 58%, rgba(7,80,214,.30), transparent 70%),
  radial-gradient(24% 16% at 27% 72%, rgba(36,214,242,.18), transparent 70%),
  linear-gradient(180deg, rgba(10,8,7,.88), rgba(10,8,7,.95) 62%, var(--black)),
  var(--tile) 0 0 / 120px 60px; }

/* ---- the gas forge + anvil ---- */
.forge-svg .pipe { fill: none; stroke: #2a3037; stroke-width: 6; stroke-linecap: round; }
.forge-svg .valve { fill: #3c454e; stroke: #0b0d10; }
.forge-svg .leg { fill: #14181c; stroke: #07080a; }
.forge-svg .body { fill: url(#g-drum); stroke: #06070a; stroke-width: 2; }
.forge-svg .band { fill: #0b0d10; opacity: .75; }
.forge-svg .rivet { fill: #56606b; }
.forge-svg .lining { fill: #6b2a1c; stroke: #2a1510; stroke-width: 2; }
.forge-svg .mouth { fill: #120a08; }
.forge-svg .mouth-hot { fill: url(#g-mouth); opacity: .12; transition: opacity 700ms var(--ease); }
.forge-svg .mouth-lip { fill: none; stroke: #0a0605; stroke-width: 3; }
.forge-svg .anvil { fill: url(#g-anvil); stroke: #050607; stroke-width: 2; }
.forge-svg .anvil-hi { stroke: rgba(255,255,255,.28); stroke-width: 1.5; }
.forge-svg .block { fill: #2b1d15; }
.forge-svg .work-glow { fill: #ff7a1a; opacity: 0; filter: blur(7px); transition: opacity 700ms var(--ease); }
.forge-svg .work-bed { fill: #0d0f12; }
.forge-svg .work-edge { fill: none; stroke: var(--hot); stroke-width: 1.6; opacity: .25; transition: opacity 700ms var(--ease); }
.forge-svg .glow { fill: url(#g-glow); }
.station.is-on .forge-svg .mouth-hot { opacity: 1; }
.station.is-on .forge-svg .work-glow { opacity: .55; }
.station.is-on .forge-svg .work-edge { opacity: .9; }
html:not(.js) .forge-svg .mouth-hot { opacity: 1; }

/* ---- heat gauge (reuses the knob hooks the deck script drives) ---- */
.knob.gauge { width: 66px; height: 66px; right: -4px; bottom: 30%; }
.gauge__face { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1d2227, #0c0e11 70%); box-shadow: 0 0 0 3px #3a424b, 0 0 0 5px #0a0c0f, 0 8px 16px rgba(0,0,0,.7); }
.gauge__face::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #9aa5b0; z-index: 3; }
.knob.gauge .knob__notches i { width: 3px; height: 7px; margin: -3.5px 0 0 -1.5px; transform: rotate(var(--a)) translateY(-24px); z-index: 2; }
.station.is-on .knob__notches i.is-lit { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.station.is-on .knob__notches i.is-lit:last-child { background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.knob.gauge .knob__cap { background: none; box-shadow: none; z-index: 2; }
.knob.gauge .knob__cap::after { top: 9px; width: 3px; height: 24px; margin-left: -1.5px; background: #cfd6dd; border-radius: 2px; }
.station.is-on .knob.gauge .knob__cap::after { background: var(--hot); box-shadow: 0 0 6px rgba(255,160,70,.8); }
.knob.gauge .knob__lbl { top: -20px; }

/* ---- commission: a work-order chit ---- */
.tkt { background: linear-gradient(180deg, #f4eee0, var(--paper) 20%, var(--paper-2)); }
.tkt::before { background: linear-gradient(180deg, #7a828b, #3b424a); }
.tkt__head { border-bottom-color: #b9ad92; }

/* ---- maker's mark: struck into a steel plate ---- */
.note.mark { position: relative; max-width: 760px; padding: 26px 34px 30px 34px; color: #dfe4ea; transform: none; clip-path: none; border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, #474f58, #2a3037 55%, #1d2227);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.5), 0 22px 36px -18px rgba(0,0,0,.95); }
.mark__rivet { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #aab3bd, #3b424a 70%); box-shadow: 0 1px 1px rgba(0,0,0,.8); }
.mark__rivet:nth-child(1) { left: 10px; top: 10px; } .mark__rivet:nth-child(2) { right: 10px; top: 10px; }
.mark__rivet:nth-child(3) { left: 10px; bottom: 10px; } .mark__rivet:nth-child(4) { right: 10px; bottom: 10px; }
.note.mark .note__lbl { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 400 17px/1 "Saira Stencil One", var(--cond); letter-spacing: .12em; text-transform: uppercase; color: #aeb7c1; text-shadow: 0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.15); }
.mark__stamp { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #20252b; box-shadow: inset 0 2px 3px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.12); }
.mark__stamp img { filter: grayscale(1) brightness(.75) contrast(1.4); opacity: .8; transform: rotate(9deg); }
.note.mark .note__body { font: 700 25px/1.3 var(--cond); letter-spacing: .01em; color: #e3e8ee; text-shadow: 0 -1px 0 rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.14); }

/* ---- tag: kraft card, eyelet, honest status and links ---- */
.pass-slip.tag { position: relative; max-width: 760px; padding: 18px 24px 18px 64px; border: 0; color: #1d1a14;
  background: linear-gradient(180deg, #d7c197, var(--kraft) 40%, var(--kraft-2));
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
  box-shadow: 0 18px 30px -16px rgba(0,0,0,.9); }
.tag__eye { position: absolute; left: 22px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 4px #9c8457, 0 0 0 5px #6d5a37; }
.tag__lbl { grid-column: 1 / -1; font: 400 13px/1 "Saira Stencil One", var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #5b4a2a; }
.tag .pass-slip__status { color: #221d14; }
.tag .stamp--hot { color: #0a3fb0; }
.tag .stamp--cook { color: #9b2f12; }
.tag .tlink { color: #0b2a70; text-decoration-color: rgba(11,42,112,.5); }
.tag .tlink:hover { color: #000; }
.tag .nolink { color: #5b4a2a; }

/* ---- next: a stamped steel tag ---- */
.next-tkt { position: relative; padding: 12px 22px 14px 44px; border-top: 0; color: #e6ebf1; transform: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), linear-gradient(180deg, #56606b, #30373f 55%, #22282e);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.next-tkt::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 2px #7a848e; }
.next-tkt__k { color: #aeb7c1; }
.next-tkt__t { font-family: "Saira Stencil One", var(--cond); font-weight: 400; letter-spacing: .06em; color: #eef2f5; text-shadow: 0 -1px 0 rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.18); }
.next-tkt__a { color: var(--cyan); }
.next-tkt:hover { transform: translateY(2px); box-shadow: none; filter: brightness(1.12); }

/* ---- hero: the forge floor ---- */
.hood { position: absolute; left: 12%; top: 0; width: 30%; height: 90px; background: linear-gradient(180deg, #2a3037, #111418); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); opacity: .9; }
.pass__wall { position: relative; display: flex; flex-direction: column; align-items: center; justify-self: center; }
.pass__hook { position: absolute; top: 4%; width: 14px; height: 30px; border: 4px solid #8d97a2; border-top: 0; border-radius: 0 0 10px 10px; z-index: 2; }
.pass__hook::before { content: ""; position: absolute; left: 50%; top: -8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #3a424b; box-shadow: 0 0 0 2px #0a0c0f; }
.pass__hook--l { left: 26%; } .pass__hook--r { right: 26%; }
.pass__mark { width: min(100%, 330px, 38vh); filter: drop-shadow(0 0 50px rgba(36,214,242,.25)) drop-shadow(0 26px 30px rgba(0,0,0,.7)); }
.pass__forge { position: relative; width: min(100%, 300px); height: 64px; margin-top: 10px; border-radius: 24px; background: linear-gradient(180deg, #3e464f, #1a1e23 55%, #0d0f12); box-shadow: 0 20px 40px -10px rgba(0,0,0,.9); }
.pass__forge::before, .pass__forge::after { content: ""; position: absolute; bottom: -38px; width: 8px; height: 40px; background: #15191d; }
.pass__forge::before { left: 26px; } .pass__forge::after { right: 26px; }
.pass__mouth { position: absolute; left: 50%; top: 12px; width: 104px; height: 40px; margin-left: -52px; border-radius: 12px; background: radial-gradient(60% 70% at 50% 70%, #e9fdff, #7ce9ff 25%, #1f7cf0 55%, #0a2a7a); box-shadow: 0 0 0 5px #6b2a1c, 0 0 40px 10px rgba(36,214,242,.45), 0 0 90px 30px rgba(7,80,214,.3); }

/* work orders hanging from the rack */
.ht a { background: linear-gradient(180deg, #d7c197, var(--kraft) 40%, var(--kraft-2)); color: #1d1a14;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px); padding-top: 28px; }
.ht a::before { top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--black); box-shadow: 0 0 0 3px #9c8457; }
.ht__top { border-bottom-color: #8f7a52; color: #3d3220; }
.ht__hook { color: #2d2618; }
.ht__go { color: #0a3fb0; }
.rt { background: #b49a6a; color: #2b2418; }
.rt[aria-current] { background: var(--paper); }

/* tool rack */
.tool__name { background: linear-gradient(180deg, #d7c197, var(--kraft)); color: #1d1a14; }

/* closing */
.deck .foot { background: radial-gradient(40% 30% at 50% 48%, rgba(7,80,214,.22), transparent 70%), radial-gradient(22% 14% at 50% 64%, rgba(255,120,40,.10), transparent 70%), var(--black); }

/* ---- sparks: a short burst on slide and forge changes, never looping ---- */
.sparks { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.sparks i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #ffe0a6; box-shadow: 0 0 6px 2px rgba(255,140,40,.85); opacity: 0; animation: spark var(--t) cubic-bezier(.15,.7,.35,1) var(--d) forwards; }
.sparks i.c { background: #d8f8ff; box-shadow: 0 0 6px 2px rgba(36,214,242,.85); }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 70% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }

@media (max-width: 900px) {
  .pass__mark { width: 140px; }
  .pass__forge { width: 170px; height: 40px; border-radius: 14px; }
  .pass__mouth { width: 64px; height: 24px; margin-left: -32px; top: 8px; }
  .pass__forge::before, .pass__forge::after { display: none; }
  .pass__hook { display: none; }
  .hood { display: none; }
  .pass__wall { justify-self: start; }
  .deck .stove__top { width: 96px; }
  .deck .stove__sticky { grid-template-columns: 96px minmax(0, 1fr); }
  .pass-slip.tag { padding-left: 54px; }
  .tag__eye { left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sparks { display: none; }
}
.plate__label { flex-wrap: wrap; row-gap: 6px; }
.plate__label span { white-space: nowrap; }
@media (max-width: 900px) {
  .deck .steps { flex-wrap: wrap; row-gap: 4px; }
  .deck .steps__lbl { white-space: nowrap; }
}

/* ======================================================================
   Prototype L: overview first. The hero is the index, the showcase is one
   pinned section of six slides that hands scrolling back at both ends,
   and every project has its own page.
   ====================================================================== */
html { scroll-padding-top: var(--rail-h); }
kbd { font: 600 10.5px/1 var(--mono); padding: 3px 5px; border-radius: 3px; border: 1px solid #4a5563; color: var(--muted); }

/* rail */
.rail--l .rail__in { align-items: center; gap: 20px; }
.rail__brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.rail__txt { font: 800 16px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #eef2f5; }
.rail__links { display: flex; gap: 2px; flex: 1; }
.rail__links a { display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 14.5px; color: #c9d2dc; }
.rail__links a:hover { color: #fff; background: rgba(255,255,255,.06); }
.rail__links a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--cyan); border-radius: 0; }
.rail__all { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; border-radius: 4px; text-decoration: none; font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: #1d1a14; background: linear-gradient(180deg, #d7c197, var(--kraft)); }
.rail__all kbd { border-color: rgba(0,0,0,.3); color: #3d3220; }
.rail__all:hover { filter: brightness(1.08); }

/* ---- showcase: stacked (no JS, phones) ---- */
.showcase { position: relative; }
.sc-marker { display: block; height: 0; }
.sc-slide { padding: 56px 0 64px; }
.sc-in { width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; }
.sc-forge { display: flex; flex-direction: column; gap: 12px; }
.sc-forge__art { position: relative; width: min(100%, 300px); }
.sc-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sc-name { font: 800 clamp(48px, 6vw, 96px)/.88 var(--cond); text-transform: uppercase; color: #f5f8fb; overflow-wrap: anywhere; }
.sc-hook { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; color: #d7dfe8; }
.sc-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 6px; }
.sc-img .dish__plate img { width: auto; max-width: 100%; max-height: 60vh; }
.sc-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; }
.sc-pair .pair__arrow { margin-top: -30px; font-size: 30px; }
.sc-pair figcaption, .sc-img figcaption { font-size: 12.5px; }
.sc-side { display: flex; flex-direction: column; gap: 18px; }
.note.mark.sc-mark { padding: 18px 22px 20px; }
.sc-mark .note__lbl { margin-bottom: 10px; font-size: 14px; }
.sc-mark .mark__stamp { width: 34px; height: 34px; }
.note.mark.sc-mark .note__body { font-size: 19px; line-height: 1.32; }
.sc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.btn--read { font: 800 18px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; padding: 14px 20px; min-height: 50px; }
html:not(.deckmode) .sc-head { display: none; }

/* ---- showcase: pinned deck (desktop, JS) ---- */
html.deckmode .showcase__track { position: relative; height: calc(var(--H, 848px) * 6); }
html.deckmode .showcase__stage { position: sticky; top: var(--rail-h); height: var(--H, 848px); overflow: clip; }
html.deckmode .sc-marker { position: absolute; left: 0; top: calc(var(--k) * var(--H, 848px)); width: 1px; height: 1px; }
html.deckmode .sc-slide { position: absolute; inset: 0; padding: 0; opacity: 0; pointer-events: none; transform: translateX(6%); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
html.deckmode .sc-slide.is-past { transform: translateX(-6%); }
html.deckmode .sc-slide.is-cur { opacity: 1; pointer-events: auto; transform: none; }
html.deckmode .sc-in { width: 100%; height: 100%; grid-template-columns: minmax(300px, 27%) minmax(0, 1fr); gap: 0; align-items: stretch; }
html.deckmode .sc-forge { justify-content: center; padding: 24px 36px 80px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px), linear-gradient(90deg, #0b0e12, #161b21 12%, #11151a 88%, #07090c); border-right: 1px solid #2a323c; }
html.deckmode .sc-forge__art { width: min(100%, 36vh, 320px); }
html.deckmode .sc-body { justify-content: center; padding: 24px clamp(32px, 4vw, 64px) 84px; max-width: 1120px; }
html.deckmode .sc-img .dish__plate img { max-height: calc(var(--H, 848px) - 400px); }
html.deckmode .sc-pair .dish__plate img { max-height: calc(var(--H, 848px) - 460px); }
.sc-head { position: absolute; left: max(300px, 27%); right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 clamp(32px, 4vw, 64px); background: linear-gradient(180deg, rgba(10,8,7,0), rgba(10,8,7,.85) 40%); }
.sc-count { font: 600 12.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sc-count b { color: #fff; }
.sc-dots { display: flex; gap: 6px; }
.sc-dot { display: grid; place-items: center; width: 34px; height: 26px; text-decoration: none; background: #6f5f40; color: #2b2418; font: 600 11px/1 var(--mono); clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); opacity: .7; transition: opacity 200ms, background 200ms; }
.sc-dot:hover { opacity: 1; }
.sc-dot[aria-current] { opacity: 1; background: linear-gradient(180deg, #e2cfa5, var(--kraft)); box-shadow: inset 0 -3px 0 var(--cyan); }
.sc-dot:focus-visible { clip-path: none; }
.sc-skip { margin-left: auto; font-weight: 600; font-size: 14.5px; color: #cfe8ff; text-underline-offset: 4px; }
.sc-skip:hover { color: #fff; }

/* ---- small by choice ---- */
.ethos { position: relative; padding: 110px 0 120px; background: radial-gradient(40% 40% at 20% 30%, rgba(7,80,214,.16), transparent 70%), linear-gradient(180deg, rgba(10,8,7,.9), rgba(10,8,7,.95)), var(--tile) 0 0 / 120px 60px; border-top: 1px solid #1d1512; }
.ethos__in { width: min(1180px, calc(100% - 2 * var(--gut))); margin: 0 auto; }
.ethos h2 { margin: 12px 0 18px; font: 800 clamp(56px, 8vw, 120px)/.86 var(--cond); text-transform: uppercase; color: #f5f8fb; }
.ethos__lede { max-width: 34em; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; color: #d7dfe8; }
.ethos__marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.ethos__marks li { padding: 24px 24px 26px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3a414a, #242a30 60%, #1b2025); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 20px 34px -18px rgba(0,0,0,.95); }
.ethos__stamp { display: inline-block; margin-bottom: 12px; padding: 6px 10px 5px; border: 2px solid var(--cyan); border-radius: 3px; font: 400 15px/1 "Saira Stencil One", var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); transform: rotate(-2deg); }
.ethos__marks p { color: #dfe4ea; font-size: 16px; line-height: 1.55; }

/* ---- all work: section without JS, dialog with it ---- */
.overview { padding: 88px 0 96px; border-top: 1px solid #1d1512; }
.overview__in { width: min(1320px, calc(100% - 2 * var(--gut))); margin: 0 auto; }
.overview__head { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 24px; margin-bottom: 28px; }
.overview__head .kicker { flex-basis: 100%; }
.overview__head h2 { font: 800 clamp(40px, 5vw, 64px)/.9 var(--cond); text-transform: uppercase; color: #f5f8fb; }
.overview__close { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 4px; border: 1px solid #4a5563; background: #1a2027; color: #e6ebf1; font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.overview__close:hover { background: var(--blue); }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.ov { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 14px; border-radius: 6px; background: linear-gradient(180deg, #1b2129, #12171d); border: 1px solid var(--edge); }
.ov--rack { background: linear-gradient(180deg, #171b20, #101317); border-style: dashed; }
.ov__k { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.ov__name { font: 800 26px/.95 var(--cond); text-transform: uppercase; color: #f5f8fb; }
.ov__line { font-size: 14.5px; line-height: 1.5; color: #d2dae3; flex: 1; }
.ov__st2 { font: 500 12px/1.45 var(--mono); color: var(--muted); }
.ov__acts { display: flex; flex-wrap: wrap; gap: 0 16px; }
dialog.ovl { width: min(1240px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid #3a2a22; border-radius: 10px; background: #0e0c0b; color: var(--text); box-shadow: 0 40px 120px rgba(0,0,0,.8); }
dialog.ovl::backdrop { background: rgba(5,4,3,.72); backdrop-filter: blur(4px); }
dialog.ovl .overview { padding: 28px 0 32px; border: 0; }
dialog.ovl .overview__in { width: calc(100% - 48px); }

/* ---- closing ---- */
body.home .foot { border-top: 1px solid #1d1512; background: radial-gradient(40% 50% at 50% 40%, rgba(7,80,214,.2), transparent 70%), radial-gradient(22% 20% at 50% 62%, rgba(255,120,40,.08), transparent 70%), var(--black); }
body.home .foot__in { flex-direction: column; justify-content: center; text-align: center; gap: 16px; padding: 110px 0 90px; }
body.home .foot__mark { width: 84px; height: 84px; transform: rotate(9deg); }
body.home .foot__h { font-size: clamp(52px, 7.5vw, 104px); }
body.home .foot__mail { font-size: 18px; color: #c9d2dc; }
body.home .foot__tip { margin: 6px 0 0; }

/* ---- project pages ---- */
.pj-bar { width: min(1200px, calc(100% - 2 * var(--gut))); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.pj-bar ul { display: flex; gap: 4px; }
.pj-bar ul a { display: block; padding: 10px 12px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 15px; color: #c9d2dc; }
.pj-bar ul a:hover { color: #fff; background: rgba(255,255,255,.06); }
.pj-head { --heat: 1; padding: 48px 0 56px; }
.pj-head::after { opacity: 1; }
.pj-head__in { width: min(1200px, calc(100% - 2 * var(--gut))); margin: 0 auto; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: center; }
.pj-forge { display: flex; flex-direction: column; gap: 12px; }
.pj-title { display: flex; flex-direction: column; gap: 16px; }
.pj-main { width: min(1100px, calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 56px 0 40px; display: flex; flex-direction: column; gap: 72px; }
.pj-sec { display: flex; flex-direction: column; gap: 20px; }
.pj-h { font: 800 clamp(36px, 4vw, 52px)/.9 var(--cond); text-transform: uppercase; color: #f5f8fb; }
.pj-sub { color: var(--muted); margin-top: -8px; }
.pj-plate .sides { max-width: none; }
.pj-plate .plate--more, .pj-plate .sides--1 { padding: 0; max-width: 100%; }
.tkt__head h2 { font: 800 24px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin: 0; }
.tag h2.tag__lbl { margin: 0; }
.tag__src { grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px dashed #8f7a52; }
.tag__src-h { font: 400 12px/1 "Saira Stencil One", var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #5b4a2a; margin: 0 0 6px; }
.sources { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: #3d3220; }
.sources .tlink { min-height: 32px; margin-right: 6px; }
.pj-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid #2a2320; }
body.project .foot__in { justify-content: space-between; }

@media (max-width: 900px) {
  .rail__txt, .rail__all kbd { display: none; }
  .rail--l .rail__in { gap: 6px; }
  .rail__links a { padding: 10px 7px; font-size: 13px; }
  .rail__all { padding: 6px 9px; font-size: 13px; }
  .sc-slide { padding: 40px 0 48px; }
  .sc-in { grid-template-columns: 1fr; gap: 20px; }
  .sc-forge { flex-direction: row; align-items: center; gap: 14px; }
  .sc-forge__art { width: 128px; flex: none; }
  .sc-row { grid-template-columns: 1fr; }
  .sc-img .dish__plate img { max-height: none; width: 100%; }
  .sc-pair { grid-template-columns: 1fr; }
  .sc-pair .pair__arrow { margin: 0 auto; transform: rotate(90deg); }
  .ethos__marks { grid-template-columns: 1fr; }
  .pj-head__in { grid-template-columns: 1fr; gap: 20px; }
  .pj-forge { flex-direction: row; align-items: center; }
  .pj-forge .forge-svg { width: 150px; flex: none; }
  .pj-bar ul a { padding: 10px 8px; font-size: 14px; }
  .pj-main { gap: 52px; }
}
@media (max-width: 900px) {
  .sc-img .dish, .sc-img .dish__plate, .pj-plate .dish, .pj-plate .dish__plate { align-self: stretch; width: 100%; }
  .sc-img .dish__plate img, .pj-plate .dish__plate img { width: 100%; }
}
@media (max-width: 420px) {
  .rail__links a { padding: 10px 5px; font-size: 12.5px; }
  .rail__all { padding: 6px 7px; font-size: 12px; letter-spacing: .08em; }
}
.rail--l li { flex: none; max-width: none; min-width: 0; }

/* ---- closing CTA: keep the forge lit ---- */
.foot__lede { max-width: 34em; margin: 14px 0 0; color: var(--text, #dfe5ec); font-size: 18px; line-height: 1.5; }
.foot__fuel { margin: 22px 0 6px; }
.bmc { display: inline-block; border-radius: 12px; box-shadow: 0 6px 0 #8a3a12, 0 0 0 rgba(255,129,63,0); transition: transform .15s ease, box-shadow .25s ease; }
.bmc img { display: block; width: 200px; height: auto; border-radius: 10px; }
.bmc:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #8a3a12, 0 0 28px rgba(255,129,63,.45); }
.bmc:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a3a12; }
.bmc:focus-visible { outline: 3px solid #24d6f2; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .bmc, .bmc:hover, .bmc:active { transform: none; transition: none; } }

/* ---- source badges: what you may do with the code ---- */
.src { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px 0 6px; padding: 4px 9px 4px 7px; border-radius: 4px;
  font: 600 11.5px/1 var(--mono, ui-monospace, monospace); letter-spacing: .02em; text-decoration: none; vertical-align: middle;
  border: 1px solid; background: rgba(8,12,18,.55); white-space: nowrap; }
.src__i { width: 13px; height: 13px; flex: none; }
.src--open  { color: #7fe7f7; border-color: rgba(36,214,242,.55); }
.src--avail { color: #c9d4e0; border-color: rgba(201,212,224,.4); }
.src--public{ color: #9aa7b5; border-color: rgba(154,167,181,.35); }
a.src:hover { background: rgba(36,214,242,.12); }
a.src:focus-visible { outline: 3px solid #24d6f2; outline-offset: 3px; }

/* ================= 404 ================= */
.nf { max-width: 720px; margin: 0 auto; padding: clamp(64px, 12vh, 140px) 16px; display: flex; flex-direction: column; gap: 18px; }
.nf .acts { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }

/* ================= contrast (WCAG AA, measured against the rendered textures) =================
   axe cannot resolve contrast over these gradients and brick tiles, so these were measured by
   sampling the real background pixels behind each label. Each is the smallest nudge to reach 4.5:1. */
.ht__go { color: #072a7c; }                                  /* was 3.4:1 on the kraft ticket */
.tag .stamp--cook { color: #7d220a; }                        /* was 4.0:1 on the tag */
.tag .stamp--hot { color: #08349a; }
.tag .nolink, .tag__src-h { color: #3a2e18; }                /* was 3.6:1 */
.stove__plate { color: #8e9aa8; }                            /* was 4.4:1 on the steel plate */
.note.mark .note__lbl, .next-tkt__k { color: #c4ccd5; }      /* was 4.2 to 4.5:1 on brushed steel */

/* page load, back/forward restore and instant jumps across the showcase: no in-between frames */
html.sc-still .showcase *, html.sc-passing .showcase * { transition: none !important; }
html.sc-still .sparks, html.sc-passing .sparks { display: none; }