/* ════════════════════════════════════════════════════════════════════════
   NO FREE LUNCH — design system
   paper + ink + chili. Editorial serif, honest mono, receipts & menus.
   ════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..900,0..100;1,9..144,300..900,0..100&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  --paper: #F4EEE2; --paper-2: #ECE4D3; --card: #FBF7EF; --ink: #1B1A17; --ink-2: #4A463E; --ink-3: #7A7366; --rule: #D9CFBB;
  --chili: #E5462B; --chili-soft: #FBE1D9; --plum: #5B3B8C; --plum-soft: #E8E0F2; --teal: #0E7C7B; --teal-soft: #D7ECE9;
  --lime: #C8E64A; --mustard: #D99A00;
  --serif: "Fraunces", Georgia, serif; --sans: "IBM Plex Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow: 4px 4px 0 var(--ink); --shadow-sm: 2px 2px 0 var(--ink); --radius: 14px;
  --maxw: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
body::before { /* paper grain */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
a { color: inherit; }
::selection { background: var(--lime); color: var(--ink); }
code, kbd { font-family: var(--mono); font-size: .88em; }
:not(pre) > code { background: var(--paper-2); padding: .1em .38em; border-radius: 5px; border: 1px solid var(--rule); }
mark, .hl { background: linear-gradient(transparent 55%, var(--lime) 55%, var(--lime) 92%, transparent 92%); color: inherit; padding: 0 .1em; }
h1, h2, h3, h4 { font-family: var(--serif); font-variation-settings: "SOFT" 60; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.dim { opacity: .22; filter: grayscale(1); }
em { font-style: italic; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2.2rem); background: rgba(244, 238, 226, .86); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 700 1.28rem/1 var(--serif); letter-spacing: -.02em; }
.brand em { color: var(--chili); font-style: normal; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 1.15rem/1 var(--mono); box-shadow: 2px 2px 0 var(--chili); }
.topbar nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.topbar nav a { text-decoration: none; font: 600 .86rem var(--sans); padding: .42rem .8rem; border-radius: 999px; border: 1.5px solid transparent; }
.topbar nav a:hover { border-color: var(--ink); background: var(--card); }

/* ── buttons & pills ─────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.25rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 .97rem var(--sans); text-decoration: none; box-shadow: 3px 3px 0 var(--chili); transition: transform .15s, box-shadow .15s; cursor: pointer; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--chili); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { box-shadow: 4px 4px 0 var(--ink); }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); font: 600 .76rem var(--mono); text-transform: lowercase; }
.pill.tier.must { background: var(--chili); color: #fff; border-color: var(--chili); }
.pill.tier.good { background: var(--plum); color: #fff; border-color: var(--plum); }
.pill.heat { letter-spacing: .02em; }

/* ════════════════════ LANDING ════════════════════ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.2rem); }
.eyebrow { font: 600 .78rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chili); }
.hero { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.7rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; font-variation-settings: "SOFT" 100, "opsz" 144; margin: .9rem 0 1.4rem; }
.hero h1 .strike { position: relative; white-space: nowrap; }
.hero h1 .strike::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .09em; background: var(--chili); transform: rotate(-3deg); }
.hero h1 .ital { font-style: italic; font-weight: 400; color: var(--chili); }
.hero .lede { font-size: 1.2rem; color: var(--ink-2); max-width: 36rem; margin: 0 0 2rem; }
.hero .ctas { display: flex; gap: .9rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 2rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-stats > div > b { display: block; font: 800 2rem/1 var(--serif); }
.hero-stats > div > span { font: 500 .78rem var(--mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }

/* receipt (landing hero + model pages) */
.receipt { position: relative; background: #FFFDF8; border: 1.5px solid var(--ink); padding: 1.4rem 1.4rem 1.6rem; font: 500 .84rem/1.5 var(--mono); box-shadow: 6px 6px 0 rgba(27, 26, 23, .9); transform: rotate(1.6deg); }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: conic-gradient(from -45deg at bottom, #FFFDF8 90deg, transparent 0) 0 0 / 14px 100%; }
.receipt-head { text-align: center; font: 800 1.15rem var(--mono); letter-spacing: .2em; border-bottom: 1.5px dashed var(--ink); padding-bottom: .7rem; margin-bottom: .8rem; }
.receipt-head small { display: block; font-size: .68rem; letter-spacing: .08em; font-weight: 500; color: var(--ink-3); }
.receipt ul { list-style: none; margin: 0; padding: 0; }
.receipt li, .receipt-total { display: flex; align-items: baseline; gap: .4rem; padding: .22rem 0; }
.receipt li i, .receipt-total i { flex: 1; border-bottom: 1.5px dotted var(--ink-3); transform: translateY(-4px); min-width: 1rem; }
.receipt li > span { flex: 0 1 auto; }
.receipt li > b { font-weight: 700; text-align: right; max-width: 62%; }
.receipt-total { border-top: 1.5px dashed var(--ink); margin-top: .7rem; padding-top: .7rem; font-weight: 800; }
.receipt-total b { color: var(--chili); text-align: right; max-width: 70%; }
.receipt-foot { text-align: center; margin-top: 1rem; font-size: .72rem; letter-spacing: .25em; color: var(--ink-3); }
.hero .receipt li { animation: printIn .5s both; }
@keyframes printIn { from { opacity: 0; transform: translateY(-6px); } }

/* marquee */
.marquee { overflow: hidden; border-block: 1.5px solid var(--ink); background: var(--ink); color: var(--paper); padding: .8rem 0; }
.marquee-track { display: flex; gap: 2.6rem; width: max-content; animation: scroll 50s linear infinite; font: 600 1.05rem var(--serif); font-style: italic; }
.marquee-track span::after { content: "✺"; margin-left: 2.6rem; color: var(--chili); font-style: normal; }
@keyframes scroll { to { transform: translateX(-50%); } }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-head { max-width: 46rem; margin-bottom: 2.6rem; }
.section-head h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 700; margin: .5rem 0 .8rem; letter-spacing: -.025em; }
.section-head p { color: var(--ink-2); font-size: 1.1rem; margin: 0; }

/* the gap / spectrum */
.spectrum { position: relative; margin: 1rem 0 3rem; }
.spectrum-bar { height: 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: linear-gradient(90deg, #EFE7D6, var(--lime) 50%, #CBB9E6); }
.spectrum-ends { display: flex; justify-content: space-between; margin-top: .8rem; font: 600 .82rem var(--mono); color: var(--ink-2); gap: 1rem; }
.spectrum-ends span:last-child { text-align: right; }
.spectrum-pin { position: absolute; left: 50%; top: -48px; transform: translateX(-50%); text-align: center; font: 700 .8rem var(--mono); }
.spectrum-pin b { display: block; background: var(--chili); color: #fff; padding: .3rem .7rem; border-radius: 8px; border: 1.5px solid var(--ink); box-shadow: var(--shadow-sm); white-space: nowrap; }
.spectrum-pin::after { content: ""; display: block; width: 2px; height: 22px; background: var(--ink); margin: 0 auto; }
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.compare article { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.4rem; }
.compare article.us { background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--chili); }
.compare h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.compare ul { margin: 0; padding-left: 1.1rem; }
.compare li { margin: .3rem 0; }
.compare article.us li::marker { color: var(--lime); }

/* courses grid */
.courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: c; }
.course { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.25rem 1.3rem; position: relative; transition: transform .2s, box-shadow .2s; }
.course:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow); }
.course .n { font: 700 .76rem var(--mono); color: var(--chili); }
.course h3 { font-size: 1.2rem; margin: .35rem 0 .4rem; }
.course p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.course .ic { position: absolute; right: 1rem; top: .9rem; font-size: 1.5rem; }

/* route (roadmap) */
.route-wrap { background: var(--ink); color: var(--paper); border-radius: 22px; padding: clamp(1.5rem, 4vw, 2.6rem); position: relative; overflow: hidden; }
.route-wrap h3 { font-size: 1.6rem; margin-bottom: .2rem; }
.route-wrap > p { color: #CFC6B4; margin: 0 0 1.8rem; }
.route { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.6rem 0; }
.station { position: relative; text-decoration: none; padding: 0 .6rem; }
.station::before { content: ""; position: absolute; top: 15px; left: 0; right: 0; height: 4px; background: var(--chili); }
.station.good::before { background: #9A7FCB; }
.station .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); color: var(--ink); border: 4px solid var(--chili); font: 800 .78rem var(--mono); transition: transform .2s; }
.station.good .dot { border-color: #9A7FCB; }
.station:hover .dot { transform: scale(1.18); background: var(--lime); }
.station > b { display: block; margin-top: .55rem; font: 600 .9rem/1.25 var(--sans); }
.station > small { font: 500 .7rem var(--mono); color: #A9A08E; text-transform: uppercase; letter-spacing: .06em; }
.route-legend { display: flex; gap: 1.4rem; margin-top: 1.8rem; font: 500 .8rem var(--mono); color: #CFC6B4; flex-wrap: wrap; }
.route-legend i { display: inline-block; width: 22px; height: 4px; vertical-align: middle; margin-right: .45rem; background: var(--chili); }
.route-legend i.g { background: #9A7FCB; }

/* menu */
.menu-controls { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; align-items: center; }
.chip { font: 600 .82rem var(--sans); padding: .45rem .95rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); cursor: pointer; }
.chip.on { background: var(--ink); color: var(--paper); }
.chip .ct { font: 500 .72rem var(--mono); opacity: .6; margin-left: .25rem; }
.menu-sep { width: 1.5px; height: 26px; background: var(--rule); margin: 0 .4rem; }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.menu-col { background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; padding: clamp(1.2rem, 3vw, 2rem); position: relative; }
.menu-col.must { box-shadow: 6px 6px 0 var(--chili); }
.menu-col.good { box-shadow: 6px 6px 0 var(--plum); }
.menu-col > header { text-align: center; border-bottom: 1.5px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1rem; }
.menu-col > header .eyebrow { color: var(--chili); }
.menu-col.good > header .eyebrow { color: var(--plum); }
.menu-col > header h3 { font-size: 2.2rem; font-style: italic; font-weight: 600; }
.menu-col > header p { margin: .3rem 0 0; color: var(--ink-2); font-size: .93rem; }
.menu-cat { margin-top: 1.3rem; }
.menu-cat h4 { font: 700 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.menu-cat h4::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.dish { display: block; text-decoration: none; padding: .75rem .7rem; margin: 0 -.7rem; border-radius: 12px; transition: background .15s; }
.dish:hover { background: var(--paper-2); }
.dish-top { display: flex; align-items: baseline; gap: .5rem; }
.dish-top b { font: 650 1.13rem var(--serif); }
.dish-top i { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-5px); }
.dish-top .h { font-size: .8rem; white-space: nowrap; }
.dish p { margin: .15rem 0 0; color: var(--ink-2); font-size: .92rem; }
.dish .price { display: block; font: 500 .74rem var(--mono); color: var(--chili); margin-top: .25rem; }
.menu-col.good .dish .price { color: var(--plum); }
.dish .promo, .dish-promo-inline { font: 700 .62rem var(--mono); background: var(--lime); border: 1px solid var(--ink); padding: .05rem .35rem; border-radius: 4px; vertical-align: middle; margin-left: .3rem; }
.dish.hidden, .menu-cat.hidden { display: none; }

/* picker */
.picker { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.picker-q { background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; padding: 1.6rem; }
.picker-q .step { margin-bottom: 1.3rem; }
.picker-q .step > span { display: block; font: 700 .78rem var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: .5rem; }
.picker-q .opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.picker-out { background: var(--ink); color: var(--paper); border-radius: 20px; padding: 1.6rem; box-shadow: 6px 6px 0 var(--lime); min-height: 100%; }
.picker-out h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.rec { display: block; text-decoration: none; padding: .9rem 1rem; border: 1.5px solid #4A463E; border-radius: 12px; margin-bottom: .7rem; transition: border-color .15s, transform .15s; }
.rec:hover { border-color: var(--lime); transform: translateX(4px); }
.rec > b { font: 650 1.1rem var(--serif); }
.rec .why { display: block; color: #CFC6B4; font-size: .9rem; margin-top: .15rem; }
.rec .rank { font: 700 .7rem var(--mono); color: var(--lime); text-transform: uppercase; letter-spacing: .1em; }
.picker-out .fine { font: 500 .78rem var(--mono); color: #A9A08E; margin-top: 1rem; }

/* prep plan */
.plan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.plan article { border-top: 4px solid var(--ink); padding-top: 1rem; }
.plan article b { font: 800 2.4rem/1 var(--serif); color: var(--chili); }
.plan h4 { font-size: 1.15rem; margin: .5rem 0 .4rem; }
.plan p { margin: 0; color: var(--ink-2); font-size: .94rem; }

.cta-band { text-align: center; padding: clamp(3rem, 7vw, 5rem) 1rem; border-top: 1.5px solid var(--ink); }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 1.4rem; }
.cta-band h2 em { color: var(--chili); }

.foot { border-top: 1.5px solid var(--ink); padding: 1.6rem clamp(1rem, 3vw, 2.2rem); font: 500 .82rem var(--mono); color: var(--ink-3); display: flex; gap: .5rem; flex-wrap: wrap; }
.foot span { font: 700 1rem var(--serif); color: var(--ink); }
.foot em { color: var(--chili); font-style: normal; }

/* ════════════════════ MODEL PAGE ════════════════════ */
.model-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); max-width: 1380px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.2rem); }
.toc { position: relative; }
.toc-inner { position: sticky; top: 86px; padding: 2rem 0; }
.toc-tier { font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: .35rem .6rem; border-radius: 6px; display: inline-block; margin-bottom: 1rem; color: #fff; }
.toc-tier.must { background: var(--chili); } .toc-tier.good { background: var(--plum); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--rule); }
.toc li a { display: flex; gap: .7rem; padding: .42rem .9rem; text-decoration: none; font: 500 .9rem var(--sans); color: var(--ink-2); margin-left: -1.5px; border-left: 3px solid transparent; transition: all .15s; }
.toc li a span { font: 600 .72rem var(--mono); color: var(--ink-3); padding-top: .15rem; }
.toc li a:hover { color: var(--ink); }
.toc li a.on { color: var(--ink); font-weight: 700; border-left-color: var(--chili); background: linear-gradient(90deg, var(--chili-soft), transparent); }
.tier-good .toc li a.on { border-left-color: var(--plum); background: linear-gradient(90deg, var(--plum-soft), transparent); }
.toc-nav { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; font: 500 .8rem var(--mono); }
.toc-nav a { text-decoration: none; color: var(--ink-2); } .toc-nav a:hover { color: var(--chili); }

.model-main { min-width: 0; padding-bottom: 4rem; }
.model-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); gap: 2.5rem; align-items: center; padding: 2.8rem 0 2rem; }
.crumbs { font: 500 .8rem var(--mono); color: var(--ink-3); } .crumbs a { color: var(--ink-3); }
.model-hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; margin: .7rem 0 .4rem; font-variation-settings: "SOFT" 100, "opsz" 144; }
.aka { font: 500 .9rem var(--mono); color: var(--ink-3); }
.one-liner { font: italic 400 1.45rem/1.4 var(--serif); margin: 1rem 0 1.2rem; max-width: 34rem; }
.hero-tags { display: flex; gap: .45rem; flex-wrap: wrap; }
.promo-note { background: var(--lime); border: 1.5px solid var(--ink); border-radius: 10px; padding: .6rem .9rem; font-size: .9rem; margin-top: 1.2rem; max-width: 36rem; }
.model-hero .receipt { transform: rotate(1.2deg); }

.glance { display: flex; flex-wrap: wrap; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--card); overflow: hidden; margin-bottom: 1rem; }
.glance > div { flex: 1 1 150px; padding: .8rem 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.glance > div > span { display: block; font: 600 .68rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.glance > div > b { font: 600 .92rem/1.35 var(--sans); }

.block { padding: 3.2rem 0 1rem; border-top: 1.5px solid var(--ink); margin-top: 2.2rem; }
.block-head { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: baseline; margin-bottom: 1.6rem; }
.block-head .num { font: 700 .85rem var(--mono); color: #fff; background: var(--ink); padding: .2rem .5rem; border-radius: 6px; grid-row: span 2; align-self: start; margin-top: .5rem; }
.tier-must .block-head .num { box-shadow: 2px 2px 0 var(--chili); } .tier-good .block-head .num { box-shadow: 2px 2px 0 var(--plum); }
.block-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; }
.block-head p { margin: .3rem 0 0; color: var(--ink-2); }

.prose { max-width: 50rem; }
.prose p { margin: 0 0 1em; }
.prose h4 { font-size: 1.15rem; margin: 1.3em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.3rem; } .prose li { margin: .3em 0; }
.prose .katex-display { overflow-x: auto; overflow-y: hidden; padding: .4rem 0; }
.prose blockquote, .callout { margin: 1.2em 0; padding: .9rem 1.1rem; border-left: 4px solid var(--chili); background: var(--chili-soft); border-radius: 0 10px 10px 0; }
.callout.plum { border-color: var(--plum); background: var(--plum-soft); }
.callout.teal { border-color: var(--teal); background: var(--teal-soft); }
.prose table, .setup-data table { border-collapse: collapse; font: 500 .82rem var(--mono); width: 100%; }
.prose th, .prose td, .setup-data th, .setup-data td { border-bottom: 1px solid var(--rule); padding: .4rem .55rem; text-align: left; }
.prose th, .setup-data th { font-weight: 700; border-bottom: 1.5px solid var(--ink); }

.setup { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.setup > * { width: 100%; max-width: 54rem; }
.setup-story { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.6rem; }
.setup-story h3 { font-size: 1.5rem; margin-bottom: .8rem; }
.setup-story p { margin: 0 0 .9em; }
.setup-ask { margin-top: 1.2rem; background: var(--ink); color: var(--paper); padding: 1rem 1.1rem; border-radius: 10px; font: italic 500 1.1rem/1.45 var(--serif); }
.setup-ask > span { display: block; font: 700 .68rem var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .12em; color: var(--lime); margin-bottom: .3rem; }
.setup-data { width: auto !important; max-width: 100% !important; background: #FFFDF8; border: 1.5px dashed var(--ink); border-radius: var(--radius); padding: 1.1rem 1.3rem; overflow-x: auto; font-size: .93rem; }
.setup-data table { width: auto; margin: 0 auto; }
.setup-data th, .setup-data td { white-space: nowrap; }
.setup-data p { max-width: 46rem; }
.setup-data .label { font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--chili); margin-bottom: .7rem; }
.setup-data p { margin: .8em 0 0; color: var(--ink-2); }

.levels { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.level-tab { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1.5px solid var(--ink); background: var(--card); border-radius: 12px; font: 600 .92rem var(--sans); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.level-tab:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.level-tab.on { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--chili); }
.tier-good .level-tab.on { box-shadow: 3px 3px 0 var(--plum); }
.lv-depth { font-size: .62rem; letter-spacing: .1em; opacity: .7; }
.level-body { display: none; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: clamp(1.2rem, 3vw, 2rem); max-width: none; animation: fade .3s; }
.level-body.on { display: block; }
.level-body > * { max-width: 52rem; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

/* knobs */
.knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1rem; }
.knob { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.2rem 1.25rem; display: flex; flex-direction: column; }
.knob header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.knob h4 { font-size: 1.2rem; }
.knob header code { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.knob-default { font: 500 .72rem var(--mono); color: var(--ink-3); margin-left: auto; }
.knob > p { margin: 0 0 .8rem; font-size: .95rem; }
.knob-dirs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: auto; }
.knob-dirs div { font-size: .87rem; padding: .65rem .75rem; border-radius: 10px; line-height: 1.45; }
.knob-dirs > div > span { display: block; font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .25rem; }
.knob-dirs .up { background: var(--chili-soft); } .knob-dirs .up span { color: var(--chili); }
.knob-dirs .down { background: var(--teal-soft); } .knob-dirs .down span { color: var(--teal); }
.knob-range { font: 500 .75rem var(--mono); color: var(--ink-3); margin-top: .7rem; }

/* when */
.when { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.when-col { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.when-col h4 { font-size: 1.35rem; margin-bottom: .6rem; }
.when-col ul { margin: 0; padding: 0; list-style: none; }
.when-col li { padding: .45rem 0 .45rem 1.8rem; position: relative; border-bottom: 1px dashed var(--rule); font-size: .96rem; }
.when-col li:last-child { border-bottom: 0; }
.when-col.use { background: var(--teal-soft); } .when-col.use li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 800; }
.when-col.avoid { background: var(--chili-soft); } .when-col.avoid li::before { content: "✕"; position: absolute; left: 0; color: var(--chili); font-weight: 800; }
.datachecks { margin-top: 1rem; background: #FFFDF8; border: 1.5px dashed var(--ink); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.datachecks h4, .alts h4, .docs h4 { font-size: 1.15rem; margin-bottom: .5rem; }
.datachecks ul { margin: 0; padding-left: 1.2rem; } .datachecks li { margin: .35rem 0; }
.alts { margin-top: 1.3rem; }
.alts-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
.alt { text-decoration: none; border: 1.5px solid var(--ink); border-radius: 12px; padding: .8rem 1rem; background: var(--card); transition: transform .15s, box-shadow .15s; }
.alt:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.alt > b { display: block; font: 650 1.02rem var(--serif); } .alt > span { font-size: .86rem; color: var(--ink-2); }

/* gotchas */
.gotchas { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.gotcha { position: relative; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.2rem 1.3rem 1rem 3.4rem; }
.g-num { position: absolute; left: 1rem; top: 1.1rem; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); border: 1.5px solid var(--ink); font: 800 .8rem var(--mono); }
.gotcha h4 { font-size: 1.12rem; margin-bottom: .4rem; }
.gotcha .prose { font-size: .94rem; } .gotcha .prose p:last-child { margin-bottom: 0; }

/* interview */
.iv-bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.iv-filters { display: flex; gap: .4rem; flex-wrap: wrap; }
.iv-filters button, .iv-toggle { font: 600 .8rem var(--sans); padding: .38rem .85rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); cursor: pointer; }
.iv-filters button.on { background: var(--ink); color: var(--paper); }
.iv-toggle { background: var(--lime); }
.iv { border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); margin-bottom: .6rem; overflow: hidden; }
.iv summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .7rem; padding: .95rem 1.1rem; font-weight: 600; }
.iv summary::-webkit-details-marker { display: none; }
.iv summary::after { content: "+"; margin-left: auto; font: 700 1.2rem var(--mono); transition: transform .2s; }
.iv[open] summary::after { transform: rotate(45deg); }
.iv[open] summary { border-bottom: 1px dashed var(--rule); }
.iv-num { font: 700 .76rem var(--mono); color: var(--ink-3); }
.iv-tag { font: 700 .64rem var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: .12rem .45rem; border-radius: 5px; background: var(--paper-2); white-space: nowrap; }
.iv-tag.t-scenario { background: var(--teal-soft); color: var(--teal); }
.iv-tag.t-counterfactual { background: var(--plum-soft); color: var(--plum); }
.iv-tag.t-debug { background: var(--chili-soft); color: var(--chili); }
.iv-tag.t-compare { background: #F6EBC8; color: #8A6300; }
.iv-q { flex: 1; }
.iv-a { padding: 1rem 1.2rem .4rem 1.2rem; font-size: .96rem; max-width: none; }

/* pseudo & code */
.pseudo { background: #FFFDF8; border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1.3rem 1.5rem; overflow-x: auto; font: 500 .9rem/1.7 var(--mono); box-shadow: inset 4px 0 0 var(--chili); }
.tier-good .pseudo { box-shadow: inset 4px 0 0 var(--plum); }
.pseudo .kw { color: var(--plum); } .pseudo .op { color: var(--chili); } .pseudo .cm { color: var(--ink-3); font-style: italic; }
.pseudo-note, .code-note { margin-top: 1rem; }
.codebox { border: 1.5px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: #1E1C18; box-shadow: var(--shadow); }
.codebox-bar { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1rem; background: var(--ink); color: #A9A08E; font: 600 .75rem var(--mono); border-bottom: 1px solid #3A362F; }
.codebox-bar .copy { font: 600 .72rem var(--mono); background: transparent; color: var(--lime); border: 1px solid #4A463E; border-radius: 6px; padding: .2rem .6rem; cursor: pointer; }
.codebox pre { margin: 0; padding: 1.2rem 1.4rem; overflow-x: auto; font: 500 .86rem/1.65 var(--mono); color: #EDE6D6; }
.hljs-keyword, .hljs-built_in { color: #FF8A6B; } .hljs-string { color: #C8E64A; } .hljs-comment { color: #8A8478; font-style: italic; }
.hljs-number, .hljs-literal { color: #F5C451; } .hljs-title, .hljs-title.function_ { color: #9DD6D2; } .hljs-params { color: #EDE6D6; } .hljs-attr { color: #C9B6EE; }
.docs { margin-top: 1.4rem; } .docs ul { margin: 0; padding-left: 1.2rem; } .docs a { color: var(--teal); font-weight: 600; }
.concepts-strip { border-top: 1.5px dashed var(--ink); padding-top: 2rem; }
.concepts-strip h4 { font-size: 1.1rem; margin-bottom: .7rem; }
.concepts-strip div { display: flex; gap: .5rem; flex-wrap: wrap; }
.concepts-strip a { text-decoration: none; font: 600 .82rem var(--sans); padding: .4rem .85rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); }
.concepts-strip a:hover { background: var(--lime); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.pager a { text-decoration: none; border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 1rem 1.3rem; background: var(--card); transition: transform .15s, box-shadow .15s; }
.pager a:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.pager .next { text-align: right; }
.pager small { display: block; font: 600 .74rem var(--mono); color: var(--ink-3); } .pager b { font: 650 1.25rem var(--serif); }

/* ════════════════════ LAB KIT ════════════════════ */
.lab-intro { margin-bottom: 1.2rem; }
.kit-lab { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; background: var(--card); border: 1.5px solid var(--ink); border-radius: 18px; padding: 1.2rem; box-shadow: var(--shadow); margin-bottom: 1.4rem; }
.kit-lab.stacked { grid-template-columns: 1fr; }
.kit-stage { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.kit-panel { display: flex; flex-direction: column; gap: .95rem; min-width: 0; }
.kit-row { display: grid; gap: 1rem; } .kit-row.cols-2 { grid-template-columns: 1fr 1fr; } .kit-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.kit-cell { min-width: 0; }
.kit-plot { width: 100%; }
.kit-plot canvas { display: block; border-radius: 8px; touch-action: none; }
.kit-plot-title { font: 700 .74rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: .35rem; }
.kit-heading { font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--chili); border-bottom: 1.5px solid var(--ink); padding-bottom: .35rem; }
.tier-good .kit-heading { color: var(--plum); }
.kit-control { display: block; }
.kit-label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font: 600 .85rem var(--sans); margin-bottom: .3rem; }
.kit-label output { font: 700 .82rem var(--mono); background: var(--ink); color: var(--lime); padding: .05rem .45rem; border-radius: 5px; }
.kit-hint { display: block; font-size: .78rem; color: var(--ink-3); margin-top: .25rem; line-height: 1.4; }
.kit-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; border: 1.5px solid var(--ink); background: linear-gradient(90deg, var(--chili) var(--pct, 50%), var(--paper-2) var(--pct, 50%)); outline: none; cursor: pointer; }
.tier-good .kit-slider input[type=range] { background: linear-gradient(90deg, var(--plum) var(--pct, 50%), var(--paper-2) var(--pct, 50%)); }
.kit-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); box-shadow: 1.5px 1.5px 0 var(--ink); }
.kit-slider input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.kit-select select { width: 100%; font: 600 .88rem var(--sans); padding: .45rem .6rem; border-radius: 8px; border: 1.5px solid var(--ink); background: #FFFDF8; color: var(--ink); }
.kit-seg-row { display: flex; flex-wrap: wrap; gap: .3rem; }
.kit-seg-btn { font: 600 .8rem var(--sans); padding: .35rem .7rem; border-radius: 8px; border: 1.5px solid var(--ink); background: #FFFDF8; cursor: pointer; }
.kit-seg-btn.on { background: var(--ink); color: var(--paper); }
.kit-toggle { display: flex; align-items: center; gap: .6rem; cursor: pointer; font: 600 .86rem var(--sans); }
.kit-toggle input { display: none; }
.kit-switch { width: 38px; height: 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper-2); position: relative; flex: none; transition: background .2s; }
.kit-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.kit-toggle input:checked + .kit-switch { background: var(--lime); }
.kit-toggle input:checked + .kit-switch::after { transform: translateX(16px); }
.kit-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.kit-btn { font: 600 .82rem var(--sans); padding: .45rem .85rem; border-radius: 8px; border: 1.5px solid var(--ink); background: #FFFDF8; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.kit-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.kit-btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }
.kit-btn.primary { background: var(--ink); color: var(--paper); box-shadow: 2px 2px 0 var(--chili); }
.kit-readout { border: 1.5px solid var(--ink); border-radius: 10px; overflow: hidden; }
.kit-readout-title { font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: .35rem .7rem; background: var(--ink); color: var(--paper); }
.kit-stats { display: grid; grid-template-columns: 1fr 1fr; }
.kit-stat { padding: .45rem .7rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #FFFDF8; }
.kit-stat > span { display: block; font: 600 .7rem var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.kit-stat b { font: 700 .98rem var(--mono); }
.kit-stat.good b { color: var(--teal); } .kit-stat.bad b { color: var(--chili); } .kit-stat.warn b { color: var(--mustard); }
.kit-watch { background: var(--lime); border: 1.5px solid var(--ink); border-radius: 10px; padding: .75rem .9rem; font-size: .88rem; line-height: 1.5; }
.kit-watch-title { font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .3rem; }
.kit-watch-body p { margin: 0 0 .5em; } .kit-watch-body p:last-child { margin: 0; }
.kit-legend { display: flex; flex-wrap: wrap; gap: .9rem; font: 600 .8rem var(--sans); }
.kit-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.kit-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.kit-note { font-size: .86rem; color: var(--ink-2); margin: 0; }
.kit-bars-body { display: flex; flex-direction: column; gap: .3rem; }
.kit-bar-row { display: grid; grid-template-columns: minmax(70px, 30%) 1fr 64px; align-items: center; gap: .5rem; font: 500 .78rem var(--mono); }
.kit-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-bar-track { position: relative; height: 14px; background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.kit-bar-track.centered::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--ink); }
.kit-bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: width .25s, left .25s; }
.kit-bar-val { text-align: right; font-weight: 700; }

/* ════════════════════ CONCEPTS PAGE ════════════════════ */
.concept { scroll-margin-top: 90px; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .model-shell { grid-template-columns: 1fr; }
  .toc { display: none; }
  .kit-lab { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero, .menu, .picker, .model-hero, .setup, .when { grid-template-columns: 1fr; }
  .compare, .plan, .courses { grid-template-columns: 1fr 1fr; }
  .receipt { transform: none !important; }
  .kit-row.cols-2, .kit-row.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .compare, .plan, .courses { grid-template-columns: 1fr; }
  .knob-dirs { grid-template-columns: 1fr; }
  .topbar nav a:not(:first-child) { display: none; }
  .knobs, .gotchas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── lab modes (intuitive vs deep dive) ─────────────────────────────── */
.lab-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.3rem; max-width: 640px; }
.lab-mode { text-align: left; padding: .75rem 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); cursor: pointer; transition: transform .12s, box-shadow .12s; font: inherit; color: inherit; }
.lab-mode b { display: block; font: 700 1rem var(--sans); }
.lab-mode small { font: 500 .74rem var(--mono); color: var(--ink-3); }
.lab-mode:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); }
.lab-mode.on { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--chili); }
.tier-good .lab-mode.on { box-shadow: 3px 3px 0 var(--plum); }
.lab-mode.on small { color: #CFC6B4; }
.lab-pane { display: none; } .lab-pane.on { display: block; animation: fade .3s; }
.kit-try { border: 1.5px solid var(--ink); border-radius: 10px; background: #FFFDF8; padding: .7rem .9rem; }
.kit-try-title { font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; color: var(--chili); }
.tier-good .kit-try-title { color: var(--plum); }
.kit-try ol { margin: 0; padding-left: 1.2rem; font-size: .88rem; line-height: 1.45; }
.kit-try li { margin: .3rem 0; cursor: pointer; }
.kit-try li.done { text-decoration: line-through; color: var(--ink-3); }
.kit-try li.done::marker { content: "✓ "; color: var(--teal); }
.kit-watch.big { font-size: .98rem; }
/* ── under-the-hood sub-sections & jargon tooltips ─────────────────── */
.sub-h { font-size: 1.3rem; margin: 1.8rem 0 .8rem; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.block > .sub-h:first-of-type { margin-top: 0; }
.sub-tag { font: 600 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; background: var(--lime); border: 1.5px solid var(--ink); padding: .1rem .45rem; border-radius: 5px; }
abbr[title] { text-decoration: underline dotted var(--chili); text-underline-offset: 3px; cursor: help; }

/* ── "What's in the name" acronym expansions ───────────────────────── */
.names { margin: 0 0 1.2rem; border: 1.5px solid var(--ink); border-radius: 12px; background: #FFFDF8; padding: .7rem .9rem; max-width: 40rem; }
.names-label { display: block; font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--chili); margin-bottom: .35rem; }
.tier-good .names-label { color: var(--plum); }
.name-row { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; padding: .25rem 0; border-top: 1px dashed var(--rule); }
.name-row:first-of-type { border-top: 0; }
.name-row b { font: 700 .9rem var(--mono); white-space: nowrap; }
.name-row span { font: 600 .92rem var(--sans); }
.name-row small { grid-column: 2; color: var(--ink-2); font-size: .82rem; line-height: 1.4; }
.names-inline { font-size: .9rem; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px; padding: .45rem .8rem; margin-bottom: 1rem; color: var(--ink-2); }
.names-inline b { color: var(--ink); font-family: var(--mono); font-size: .85rem; }

/* ── typography: no orphans / widows ────────────────────────────────── */
h1, h2, h3, h4, .one-liner, .setup-ask, .eyebrow, .kit-heading, .iv-q, .dish-top b, .station > b { text-wrap: balance; }
p, li, .lede, .kit-hint, .kit-watch-body, .dish p, .course p, .alt > span, figcaption, small { text-wrap: wrap; }

/* hero: title spans full width, exactly two lines on desktop */
.hero { grid-template-columns: 1.15fr .85fr; row-gap: 1.6rem; }
.hero-title { grid-column: 1 / -1; }
.hero h1 { font-size: clamp(2.1rem, 5.6vw, 4.9rem); margin: .8rem 0 0; }
.hero h1 .l { display: block; }
@media (min-width: 720px) { .hero h1 .l { white-space: nowrap; } }
.hero .lede a.ref { text-decoration: none; border-bottom: 2px solid var(--chili); }
.hero .lede a.ref:hover { background: var(--chili-soft); }
.receipt-foot a { color: inherit; text-decoration: underline dotted; }

/* nav: in-page anchors vs the separate Pantry page */
.nav-sep { width: 1.5px; align-self: stretch; background: var(--rule); margin: .2rem .5rem; }
.topbar nav a.nav-out { border: 1.5px solid var(--ink); background: var(--lime); box-shadow: 2px 2px 0 var(--ink); display: inline-flex; align-items: baseline; gap: .4rem; }
.topbar nav a.nav-out small { font: 600 .66rem var(--mono); text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.topbar nav a.nav-out:hover { background: var(--lime); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 600px) { .topbar nav a.nav-out { display: inline-flex; } .topbar nav a.nav-out small, .nav-sep { display: none; } }

/* footer credit */
.foot { justify-content: space-between; align-items: center; gap: .6rem 2rem; }
.foot .credit { font: 500 .82rem var(--mono); }
.foot .credit b { color: var(--ink); }
.foot .credit .heart { color: var(--chili); }
.foot .credit a { color: var(--ink); }

/* pantry band on landing */
.pantry-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem; text-decoration: none; border: 1.5px dashed var(--ink); border-radius: 20px; padding: 1.4rem 1.6rem; background: repeating-linear-gradient(-45deg, #FFFDF8 0 14px, var(--paper-2) 14px 15px); transition: transform .15s, box-shadow .15s; }
.pantry-band:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); border-style: solid; }
.pantry-tag { font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .1em; writing-mode: vertical-rl; transform: rotate(180deg); background: var(--ink); color: var(--lime); padding: .6rem .35rem; border-radius: 6px; }
.pantry-body h3 { font-size: 1.5rem; margin-bottom: .35rem; }
.pantry-body p { margin: 0; color: var(--ink-2); max-width: 46rem; }
.pantry-go { font: 700 .9rem var(--sans); background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: .55rem 1rem; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }
@media (max-width: 760px) { .pantry-band { grid-template-columns: 1fr; } .pantry-tag { writing-mode: horizontal-tb; transform: none; justify-self: start; } }

/* wider section heads so headlines break into ≤2 balanced lines */
.section-head { max-width: 62rem; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.section-head p { max-width: 48rem; }
.cta-band h2 { text-wrap: balance; }

/* ── knobs: collapsed rows, two columns ─────────────────────────────── */
.knobs-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .8rem; font: 500 .8rem var(--mono); color: var(--ink-3); }
.knobs-toggle { font: 600 .8rem var(--sans); padding: .38rem .85rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--lime); cursor: pointer; }
.knobs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; align-items: start; }
.knob { display: block; padding: 0; border-radius: 12px; overflow: hidden; }
.knob > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "name param plus" "gist gist gist"; column-gap: .6rem; row-gap: .15rem; align-items: baseline; padding: .7rem 1rem; }
.knob > summary::-webkit-details-marker { display: none; }
.knob > summary::after { content: "+"; grid-area: plus; font: 700 1.15rem var(--mono); transition: transform .2s; }
.knob[open] > summary::after { transform: rotate(45deg); }
.knob[open] > summary { border-bottom: 1px dashed var(--rule); background: var(--paper-2); }
.knob-name { grid-area: name; font: 650 1.05rem var(--serif); }
.knob > summary code { grid-area: param; justify-self: start; background: var(--ink); color: var(--lime); border-color: var(--ink); font-size: .74rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knob-gist { grid-area: gist; font-size: .86rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knob[open] .knob-gist { display: none; }
.knob-body { padding: .9rem 1rem 1rem; animation: fade .25s; }
.knob-body > p { margin: 0 0 .8rem; font-size: .95rem; }
.knob-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .7rem; font: 500 .75rem var(--mono); color: var(--ink-3); }
.knob-meta b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .knobs { grid-template-columns: 1fr; } }

.hero-left { min-width: 0; }
.model-hero h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; }

.toc-tier.pantry { background: var(--teal); }


/* long formulas never widen the page */
.katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding-bottom: .2rem; }
.model-main, .block, .level-body, .gotcha, .iv-a, .knob-body, .setup-story { min-width: 0; }
.level-body, .iv-a, .gotcha .prose, .knob-body { overflow-wrap: anywhere; }
.level-body .katex, .iv-a .katex, .gotcha .katex, .knob-body .katex { overflow-wrap: normal; }

/* roadmap sub-line, signature dish, menu key */
.route-wrap > p.route-sub { margin-top: -1.3rem; color: var(--lime); font: 600 .95rem var(--sans); }
.route-wrap > p { text-wrap: wrap; }
.sig-dot { color: var(--lime); font-weight: 800; margin-right: .35rem; }
.route-legend .sig-dot { color: var(--lime); }
.menu-key { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.4rem; }
.menu-key > div { display: flex; gap: .9rem; align-items: flex-start; border: 1.5px dashed var(--ink); border-radius: 14px; padding: .8rem 1rem; background: #FFFDF8; }
.menu-key p { margin: 0; font-size: .92rem; color: var(--ink-2); }
.menu-key .sig { flex: none; font: 700 .7rem var(--mono); letter-spacing: .06em; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 5px; padding: .2rem .45rem; white-space: nowrap; }
.menu-key .heat-key { flex: none; font-size: 1rem; white-space: nowrap; }
@media (max-width: 760px) { .menu-key { grid-template-columns: 1fr; } }
/* short intro paragraphs: balance lines so no sentence dangles */
/* body text fills the full width; only the last line is protected from orphans */
.section-head p, .hero .lede, .block-head p, .lab-intro p, .pantry-body p, .menu-key p, .compare li, .plan p, .course p, .dish p, .kit-hint, .kit-watch-body, .knob-body p, .alt > span { text-wrap: wrap; }

:not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }


@media (max-width: 480px) {
  .topbar { flex-wrap: wrap; row-gap: .4rem; padding: .6rem .9rem; }
  .topbar nav { gap: .15rem; }
  .topbar nav a { padding: .35rem .6rem; font-size: .8rem; }
  .brand { font-size: 1.1rem; }
}

.nw { white-space: nowrap; }


h2.two-line .l { display: block; }
@media (min-width: 720px) { h2.two-line .l { white-space: nowrap; } }
h2 code { overflow-wrap: normal; word-break: normal; white-space: nowrap; }

.section-head h2.two-line { font-size: clamp(1.7rem, 3.3vw, 3rem); }


html, body { overflow-x: clip; }


.iv-tag { flex: none; }

/* footer "coming soon" pill */
.foot .soon { display: inline-block; font: 700 .66rem var(--mono); text-transform: uppercase; letter-spacing: .08em; background: var(--lime); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: .1rem .5rem; margin: 0 .2rem 0 .4rem; vertical-align: 1px; }

/* marquee: always scrolls (gently when the OS asks for reduced motion); pause on hover */
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: scroll 120s linear infinite !important; }
}

/* ── membership UI ─────────────────────────────────────────────────── */
.topbar nav a.nav-auth { font-weight: 600; color: var(--ink-2); }
.topbar nav a.nav-auth:hover { color: var(--ink); }
@media (max-width: 600px) { .topbar nav a.nav-auth { display: none; } }
.dish .lock { font-size: .8rem; margin-left: .35rem; opacity: .75; }
.dish .free-tag { font: 700 .6rem var(--mono); letter-spacing: .06em; background: var(--teal); color: #fff; border-radius: 4px; padding: .08rem .35rem; margin-left: .4rem; vertical-align: 2px; }
.unlock-band { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; margin-top: 3rem; background: var(--ink); color: var(--paper); border-radius: 20px; padding: 1.6rem 1.8rem; box-shadow: 6px 6px 0 var(--lime); }
.unlock-band .eyebrow { color: var(--lime); }
.unlock-band h3 { font-size: 1.55rem; margin: .35rem 0 .45rem; color: var(--paper); }
.unlock-band p { margin: 0; color: #CFC6B4; max-width: 40rem; }
.unlock-ctas { display: flex; flex-direction: column; gap: .6rem; }
.unlock-band .btn { background: var(--lime); color: var(--ink); justify-content: center; }
.unlock-band .btn.ghost { background: transparent; color: var(--paper); border-color: #6B6558; box-shadow: none; }
@media (max-width: 760px) { .unlock-band { grid-template-columns: 1fr; } }

/* ── Pantry paywall ─────────────────────────────────────────────────── */
.pantry-paywall { position: relative; margin-top: 1rem; }
.pw-fade { height: 120px; margin-top: -120px; position: relative; pointer-events: none; background: linear-gradient(to bottom, rgba(244,238,226,0), var(--paper) 85%); }
.pw-card { position: relative; background: var(--ink); color: var(--paper); border-radius: 24px; padding: clamp(1.6rem, 4vw, 2.8rem); box-shadow: 8px 8px 0 var(--teal); overflow: hidden; }
.pw-card .eyebrow { color: var(--lime); }
.pw-card h2 { color: var(--paper); font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .4rem 0 .6rem; max-width: 34rem; }
.pw-sub { color: #CFC6B4; max-width: 44rem; margin: 0 0 1.2rem; }
.pw-hit { background: var(--lime); color: var(--ink); display: inline-block; border-radius: 8px; padding: .4rem .8rem; margin: 0 0 1.2rem; font-weight: 600; }
.pw-stamp { position: absolute; right: 1.4rem; top: 1.3rem; transform: rotate(6deg); border: 2px solid var(--lime); color: var(--lime); font: 800 .78rem var(--mono); letter-spacing: .18em; padding: .35rem .7rem; border-radius: 6px; opacity: .9; }
.pw-shelves { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.6rem; }
.pw-shelf { border: 1.5px dashed #6B6558; border-radius: 14px; padding: .8rem 1rem; filter: saturate(.9); }
.pw-shelf b { font: 700 .72rem var(--mono); color: var(--lime); }
.pw-shelf h4 { color: var(--paper); font-size: 1.05rem; margin: .2rem 0 .4rem; }
.pw-shelf ul { margin: 0; padding: 0; list-style: none; }
.pw-shelf li { font-size: .86rem; color: #A9A08E; padding: .12rem 0; }
.pw-shelf li::before { content: "🔒 "; font-size: .7rem; }
.pw-ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.pw-ctas .btn { background: var(--lime); color: var(--ink); }
.pw-ctas .btn.ghost { background: transparent; color: var(--paper); border-color: #6B6558; box-shadow: none; }
.pw-note { font: 500 .78rem var(--mono); color: #A9A08E; margin: 1rem 0 0; }
.toc-group .toc-lock { margin-left: auto; font-size: .7rem; }
.toc-locked-list a { opacity: .55; }
@media (max-width: 900px) { .pw-shelves { grid-template-columns: 1fr 1fr; } .pw-stamp { display: none; } }
@media (max-width: 560px) { .pw-shelves { grid-template-columns: 1fr; } }

.pw-hit[hidden] { display: none; }