/* grain of taste — site styles. Brandbook v1.0, Oct 2026.
   Tokens are the brandbook's. No white, no gradients, no textures, no rounded cards. */

:root{
  --yellow:#ECEAC3; --paper:#F7F6EE; --blue:#6B86A6; --sky:#DCE6EF;
  --plum:#3A1E2A; --red:#C8422E; --orange:#E9602C; --ink:#2B2A26;
  --muted:#5A584F; --card:#FBFAF4;
  --hand:'Caveat',cursive; --serif:'Playfair Display',serif;
  --mono:'JetBrains Mono',monospace; --hook:'Golos Text',sans-serif;
  --bg:var(--paper); --fg:var(--ink); --accent:var(--red); --rule:var(--ink);
  --step:20px; --margin:60px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:15px;line-height:1.5}
body.yellow{--bg:var(--yellow)} body.paper{--bg:var(--paper)}
body.sky{--bg:var(--sky)}
body.blue{--bg:var(--blue);--fg:var(--paper);--accent:var(--yellow);--rule:var(--paper)}
body.plum{--bg:var(--plum);--fg:var(--paper);--accent:var(--orange);--rule:var(--paper)}
a{color:inherit;text-decoration:none}
img,video,iframe{max-width:100%;display:block}
svg.icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
svg.icon *{vector-effect:non-scaling-stroke}

/* ---------- type ---------- */
.caps{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.blue .caps,.plum .caps{color:var(--fg);opacity:.75}
.hand{font-family:var(--hand);font-weight:700;color:var(--accent);line-height:1}
.hand.tilt{display:inline-block;transform:rotate(-3deg);transform-origin:left bottom}
.thought{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.3;max-width:34em}
.num{font-family:var(--mono);font-weight:500;letter-spacing:-.04em;line-height:1}
h1,h2,h3{margin:0;font-weight:700}
h1.hand{font-size:clamp(56px,9vw,112px);margin:var(--step) 0 calc(var(--step)*1.5)}
h2.hand{font-size:clamp(40px,6vw,72px);margin:0 0 var(--step)}
h3.hand{font-size:40px}
p{margin:0 0 var(--step)}
.arrow::after{content:" →"}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,var(--margin))}
.site-header,.site-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--step);padding:28px 0;flex-wrap:wrap}
.site-header .brand{font-family:var(--hand);font-weight:700;font-size:34px;line-height:1;color:var(--fg)}
.site-header .brand span{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:14px;vertical-align:middle}
.blue .site-header .brand span,.plum .site-header .brand span{color:var(--fg);opacity:.75}
nav.main{display:flex;gap:18px 26px;flex-wrap:wrap}
nav.main a{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:2px solid transparent}
nav.main a.on,nav.main a:hover{color:var(--fg);border-color:var(--accent)}
.blue nav.main a,.plum nav.main a{color:var(--fg);opacity:.8}
.blue nav.main a.on,.plum nav.main a.on{opacity:1}
.page-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--step);padding:14px 0;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);margin-bottom:calc(var(--step)*2)}
.site-footer{border-top:2px solid var(--rule);margin-top:calc(var(--step)*4);padding:28px 0 60px}
section{margin:calc(var(--step)*3) 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--step)*2)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--step)*2)}
@media(max-width:820px){.two,.three{grid-template-columns:1fr}}

/* ---------- elements ---------- */
.plate{display:inline-flex;flex-direction:column;gap:8px;background:var(--paper);color:var(--ink);padding:26px 28px;box-shadow:0 10px 26px rgba(43,42,38,.12);min-width:150px}
.plate .num{font-size:60px}
.plate .caps{font-size:15px}
.plate.accent{background:var(--red);color:var(--paper)} .plate.accent .caps{color:var(--paper);opacity:.85}
.plum .plate.accent{background:var(--orange)}
.plates{display:flex;gap:var(--step);flex-wrap:wrap;margin:var(--step) 0}
.plates .plate{min-width:0;flex:1 1 140px}
@media(max-width:600px){.plate{padding:18px 20px}.plate .num{font-size:40px}}

.polaroid{display:inline-block;background:var(--card);padding:18px 18px 76px;box-shadow:0 16px 36px rgba(43,42,38,.18);transform:rotate(-3deg);max-width:100%;position:relative}
.polaroid.r{transform:rotate(3deg)} .polaroid.flat{transform:none}
.polaroid .ph{aspect-ratio:4/4.6;width:100%;background:#D9D3C7;object-fit:cover;display:block}
.polaroid .cap{position:absolute;left:10px;right:10px;bottom:0;height:76px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--hand);font-weight:600;font-size:32px;color:var(--ink);line-height:.95}
.polaroid.w240 .cap{font-size:28px}
.polaroid.w240{width:240px} .polaroid.w320{width:320px} .polaroid.w420{width:420px}

.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule)}
.list li{display:grid;grid-template-columns:40px 1fr;gap:22px;padding:18px 0;border-bottom:2px solid var(--rule);font-size:16px;line-height:1.45}
.list li b{font-weight:400;color:var(--muted);font-size:18px}
.blue .list li b,.plum .list li b{color:var(--fg);opacity:.7}

table.t{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:17px}
table.t th{font-weight:400;text-align:left;padding:14px 0;border-bottom:2px solid var(--rule)}
table.t th.r,table.t td.r{text-align:right;font-variant-numeric:tabular-nums}
table.t td{padding:14px 0;border-bottom:2px solid var(--rule)}
table.t th.caps,table.t td.caps{font-size:13px}
table.t tr.total td{font-weight:500}

.steps{display:flex;gap:20px;flex-wrap:wrap;margin:var(--step) 0}
.steps a{width:110px;height:110px;border:2px solid var(--rule);display:grid;place-items:center;font-family:var(--mono);font-size:40px;font-weight:500}
.steps a.last{background:var(--red);border-color:var(--red);color:var(--paper)}
@media(max-width:600px){.steps a{width:64px;height:64px;font-size:24px}}

.btn{display:inline-block;font-family:var(--mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;padding:14px 22px;border:2px solid var(--rule);line-height:1;cursor:pointer;background:none;color:inherit}
.btn.fill{background:var(--red);border-color:var(--red);color:var(--paper)}
.plum .btn.fill{background:var(--orange);border-color:var(--orange)}
.btn.small{font-size:13px;padding:10px 14px}

.reply{font-family:var(--hand);font-weight:700;font-size:38px;line-height:1.05;color:var(--accent);margin:var(--step) 0}
.reply::after{content:" →"}

.cover-card{display:flex;flex-direction:column;justify-content:space-between;min-height:420px;padding:26px;color:var(--ink);position:relative}
.cover-card.yellow{background:var(--yellow)} .cover-card.paper{background:var(--paper)}
.cover-card.sky{background:var(--sky)}
.cover-card.blue{background:var(--blue);color:var(--paper)} .cover-card.plum{background:var(--plum);color:var(--paper)}
.cover-card .top{display:flex;align-items:center;gap:12px}
.cover-card .no{width:26px;height:26px;border:2px solid currentColor;display:grid;place-items:center;font-size:11px;font-weight:500;letter-spacing:0}
.cover-card .caps{color:inherit;opacity:.8}
.cover-card .icon{width:72px;height:72px;margin:28px 0 20px}
.cover-card .hook{font-family:var(--hook);font-weight:900;font-size:30px;line-height:1.02;letter-spacing:-.03em;margin:0 0 14px}
.cover-card .hook i{font-style:normal;color:var(--red)}
.cover-card.blue .hook i{color:var(--yellow)} .cover-card.plum .hook i{color:var(--orange)}
.cover-card .series{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--red)}
.cover-card.blue .series{color:var(--yellow)} .cover-card.plum .series{color:var(--orange)}
.cover-card .bottom{display:flex;justify-content:space-between;margin-top:auto;padding-top:24px}
.cover-card:hover .hook{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* post list rows */
.posts{border-top:2px solid var(--rule)}
.post{display:grid;grid-template-columns:140px 1fr auto;gap:var(--step);padding:22px 0;border-bottom:2px solid var(--rule);align-items:baseline}
.post .title{font-family:var(--hook);font-weight:900;font-size:24px;letter-spacing:-.02em;line-height:1.05}
.post .sub{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);margin-top:6px}
.blue .post .sub,.plum .post .sub{color:var(--fg);opacity:.8}
@media(max-width:600px){.post{grid-template-columns:1fr}.post .caps{order:-1}}

/* ---------- recipe ---------- */
.step{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--step)*2);padding:calc(var(--step)*2) 0;border-top:2px solid var(--rule)}
.step .head{display:flex;gap:22px;align-items:flex-start;grid-column:1/-1}
.step .head .num{font-size:clamp(96px,14vw,200px)}
.step .head .hand{font-size:clamp(40px,5.5vw,64px);padding-top:.35em}
.step .side{display:flex;flex-direction:column;gap:var(--step)}
.step .icon{width:64px;height:64px}
@media(max-width:820px){.step{grid-template-columns:1fr}}

/* video slot — one per step */
.video{background:var(--ink);aspect-ratio:4/5;max-width:420px;width:100%;position:relative;display:grid;place-items:center;color:var(--paper);overflow:hidden}
.video video,.video iframe{width:100%;height:100%;object-fit:cover;border:0}
.video .empty{text-align:center;padding:20px}
.video .empty .icon{width:56px;height:56px;margin:0 auto 14px;stroke:var(--paper);opacity:.7}
.video .empty .caps{color:var(--paper);opacity:.7;display:block}
.video .empty .hand{font-size:30px;color:var(--yellow);display:block;margin-top:10px}
.video.wide{aspect-ratio:16/9;max-width:none}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1.2fr;gap:calc(var(--step)*2);align-items:start}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--step)}
.field input[type=number],.field select{font-family:var(--mono);font-size:22px;padding:12px 14px;border:2px solid var(--rule);background:var(--paper);color:var(--ink);width:100%;max-width:320px}
.field input:focus{outline:2px solid var(--red);outline-offset:2px}
.seg{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--rule);width:max-content;max-width:100%}
.seg label{padding:10px 14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-right:2px solid var(--rule)}
.seg label:last-child{border-right:0}
.seg input{display:none}
.seg input:checked+span{background:var(--red);color:var(--paper);margin:-10px -14px;padding:10px 14px;display:inline-block}
.calc-out .big{font-size:clamp(56px,8vw,120px)}
.note{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted)}
.blue .note,.plum .note{color:var(--fg);opacity:.85}

/* ---------- misc ---------- */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:calc(var(--step)*2);align-items:center;padding:calc(var(--step)*2) 0}
@media(max-width:820px){.hero{grid-template-columns:1fr}}
.hero .title{font-family:var(--hand);font-weight:700;font-size:clamp(72px,12vw,170px);line-height:.95;color:var(--red)}
.hero .title span{display:block;margin-left:.6em}
.kit{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:calc(var(--step)*2)}
.kit .item{border-top:2px solid var(--rule);padding-top:18px}
.kit .item .icon{width:56px;height:56px;margin-bottom:12px}
.kit .item .ph{height:190px;width:100%;object-fit:contain;object-position:left center;margin-bottom:14px}
.kit .item h3{font-family:var(--hook);font-weight:900;font-size:22px;letter-spacing:-.02em;margin:0 0 8px}
.kit .item .must{display:inline-block;background:var(--red);color:var(--paper);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;margin-left:8px;vertical-align:middle}
.kit .item .nice{display:inline-block;border:2px solid var(--rule);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;margin-left:8px;vertical-align:middle}
.hl{background:var(--red);color:var(--paper);padding:0 .2em}
.blue .hl{background:var(--yellow);color:var(--ink)} .plum .hl{background:var(--orange)}
.article{max-width:720px;font-size:17px;line-height:1.6}
.article h2{font-family:var(--hand);font-weight:700;font-size:48px;color:var(--accent);margin:calc(var(--step)*2) 0 var(--step)}
.article .ref{border-left:2px solid var(--rule);padding:4px 0 4px 18px;margin:var(--step) 0;font-size:15px}
.article .ref .caps{display:block;margin-bottom:6px}
.article .verdict{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:var(--paper);color:var(--ink);padding:22px;box-shadow:0 10px 26px rgba(43,42,38,.12);margin:calc(var(--step)*1.5) 0}
.article .verdict .num{font-size:44px}
.article .verdict .caps{color:var(--muted)}
.slot{outline:2px dashed var(--muted);outline-offset:4px;color:var(--muted);font-family:var(--serif);font-style:italic}

/* language switcher */
.lang{display:flex;border:2px solid var(--rule)}
.lang a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;color:var(--fg);opacity:.7}
.lang a+a{border-left:2px solid var(--rule)}
.lang a.on{background:var(--red);color:var(--paper);opacity:1}
.plum .lang a.on{background:var(--orange)}
.blue .lang a.on{background:var(--yellow);color:var(--ink)}

/* ---------- layout fixes (QA) ---------- */
.page-head{flex-wrap:wrap;row-gap:6px}
.plates .plate{flex:0 1 auto}
.plate{min-width:0;max-width:100%}
.plate .num{overflow-wrap:anywhere}
.seg{width:auto;flex-wrap:wrap}
.seg label{flex:1 1 auto;text-align:center}
.hand.tilt{transform:rotate(-2deg)}
h2.hand.tilt{margin-top:calc(var(--step)*1.5)}
.step .head{min-width:0;flex-wrap:wrap}
.step .head .hand{min-width:0;overflow-wrap:anywhere}
.list li{min-width:0;overflow-wrap:anywhere}
table.t td,table.t th{overflow-wrap:anywhere}
.polaroid .ph:not([src]){visibility:visible}
@media(max-width:600px){
  .seg label{font-size:12px;padding:10px 10px}
  .site-header .brand span{display:block;margin:6px 0 0}
  .step .head .num{font-size:88px}
}
.seg label{padding:0}
.seg label span{display:block;padding:10px 14px}
.seg input:checked+span{background:var(--red);color:var(--paper);margin:0;padding:10px 14px}
table.t th{overflow-wrap:normal;vertical-align:bottom}
.btn{margin:0 6px 10px 0}
@media(max-width:600px){ table.t{font-size:15px} table.t th{font-size:13px} }
.field select{font-size:16px;max-width:420px}
/* mirror marker (only on dev.* addresses) */
.dev-bar{position:sticky;top:0;z-index:50;background:var(--red);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:6px 16px}

/* ---------- what you need: kit steps ---------- */
.tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;line-height:1.2}
.tag.must{background:var(--red);color:var(--paper)}
.tag.swap{border:2px solid var(--rule);color:var(--fg);padding:3px 8px}
.tag.nice{background:var(--sky);color:var(--ink)}
.kit-jump{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--step)}
.kit-jump a{border-bottom:2px solid var(--rule);padding-bottom:2px}
.kit-row{display:grid;grid-template-columns:1.1fr 1fr;gap:calc(var(--step)*2);align-items:center}
.kit-text{min-width:0}
.kit-name{font-family:var(--hook);font-weight:900;font-size:clamp(30px,4vw,48px);letter-spacing:-.03em;line-height:1.02;margin:0 0 var(--step);text-wrap:balance}
.kit-intro{margin:var(--step) 0 10px;color:var(--fg)}
.kit-photos{display:flex;gap:20px;align-items:center;justify-content:center;min-width:0}
.kit-photos img{max-height:320px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(43,42,38,.18))}
.kit-photos.n2 img{max-width:calc(50% - 10px)}
.kit-photos.n3{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kit-photos.n3 img{max-height:220px;margin:auto}
.kit-photos.n3 img:first-child{grid-column:1/-1;max-height:240px}
@media(max-width:820px){.kit-row{grid-template-columns:1fr}.kit-photos{order:-1}.kit-photos img{max-height:240px}}
.kit-check{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule)}
.kit-check li{border-bottom:2px solid var(--rule)}
.kit-check label{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:16px 0;cursor:pointer}
.kit-check input{position:absolute;opacity:0;width:1px;height:1px}
.kit-check .box{width:26px;height:26px;border:2px solid var(--rule);flex:none;display:grid;place-items:center}
.kit-check input:checked+.box{background:var(--red);border-color:var(--red)}
.kit-check input:checked+.box::after{content:"";width:10px;height:6px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:rotate(-45deg) translate(1px,-1px)}
.kit-check input:focus-visible+.box{outline:2px solid var(--red);outline-offset:3px}
.kit-check .what{font-family:var(--mono);font-size:17px}
.kit-check .or{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}
.kit-check .tag{margin-left:auto}
.kit-check input:checked~.what{text-decoration:line-through;text-decoration-thickness:2px}

/* ---------- PDF download button ---------- */
.btn.pdf::before{content:"↓ "}

/* ---------- watermark (only in print / PDF) ---------- */
.watermark{display:none}
.pdf-only{display:none}

@media print{
  @page{size:A4;margin:16mm 0 16mm 0}
  html,body{background:var(--paper)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{--bg:var(--paper)}
  .wrap{padding:0 15mm}
  .site-header,.site-footer,.lang,.dev-bar,.no-pdf,.steps,.scaler,.step .side,.btn,.kit-jump,.calc{display:none!important}
  section,.step{margin:0 0 10mm;padding-top:0}
  .step{display:block;padding:8mm 0 0;break-inside:avoid}
  .step .head .num{font-size:110px}
  .step .head .hand{font-size:44px}
  .plates{break-inside:avoid}
  .plate{box-shadow:none;border:2px solid var(--ink)}
  .plate.accent{border-color:var(--red)}
  .polaroid{box-shadow:0 0 0 1px rgba(43,42,38,.25)}
  h2,h3,.page-head{break-after:avoid}
  .list li,table.t tr{break-inside:avoid}
  .hero{padding:0;break-after:page}
  .hero .polaroid{width:380px}
  .pdf-only{display:block}
  .pdf-video{margin-top:6mm;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
  .pdf-video b{color:var(--red);font-weight:500}
  a{text-decoration:none!important}
  .watermark{display:block;position:fixed;inset:-40mm;z-index:9999;pointer-events:none;overflow:hidden}
  .watermark div{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:26mm 22mm;transform:rotate(-30deg);transform-origin:center}
  .watermark span{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:rgba(43,42,38,.085);white-space:nowrap}
  .watermark span:nth-child(2n){color:rgba(200,66,46,.10)}
}
/* sections not released on prod — marked only on the mirror / local */
a.unreleased{outline:2px dashed var(--muted);outline-offset:3px}
nav.main a.unreleased::after{content:" ·dev";color:var(--red)}
.cover-card.unreleased::before{content:"not on prod";position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--red);padding:3px 8px;border:2px dashed var(--red)}

/* about: bakery list with a small heading per item */
.bakery-list li strong{display:block;font-family:var(--hand);font-weight:700;font-size:30px;color:var(--accent);margin-bottom:6px;letter-spacing:0}
.bakery-list li{font-size:15px;line-height:1.55}

/* plates keep their own colours on dark pages (blue / plum) */
.blue .plate .caps,.plum .plate .caps{color:var(--muted);opacity:1}
.blue .plate.accent .caps,.plum .plate.accent .caps{color:var(--paper);opacity:.85}
.blue .plate .num,.plum .plate .num{color:var(--ink)}
.blue .plate.accent .num,.plum .plate.accent .num{color:var(--paper)}
/* readability on blue / orange: full-strength labels */
.blue .caps,.plum .caps,.blue nav.main a,.plum nav.main a,.blue .lang a,.blue .site-header .brand span,.plum .site-header .brand span,.cover-card.blue .caps,.cover-card.plum .caps{opacity:1}
.blue .plate.accent .caps,.plum .plate.accent .caps,.plate.accent .caps{opacity:1}
.blue .list li b,.plum .list li b{opacity:.9}
.blue .post .sub,.plum .post .sub{opacity:1}

/* calculator: segmented toggle fills its whole half (Safari) */
.seg label{display:flex}
.seg label span,.seg input:checked+span{display:block;flex:1;margin:0;padding:10px 14px;text-align:center}
.stock-note b{font-family:var(--mono);font-style:normal;font-weight:500;color:var(--fg)}
.stock-note{margin:14px 0 8px}

.field[hidden]{display:none}

/* real step videos: vertical, shown whole */
.video.tall{aspect-ratio:9/16;max-width:340px;background:var(--ink)}
.video .screen{width:100%;height:100%}
.video .screen video{width:100%;height:100%;object-fit:contain;background:var(--ink);display:block}
.clip-tabs{display:flex;flex-wrap:wrap;gap:8px;max-width:340px;margin-top:10px}
.clip-tabs button{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border:2px solid var(--rule);background:none;color:var(--fg);cursor:pointer}
.clip-tabs button.on{background:var(--red);border-color:var(--red);color:var(--paper)}
.clip-tabs button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(max-width:820px){.video.tall,.clip-tabs{max-width:100%;margin-left:auto;margin-right:auto}.video.tall{max-width:min(100%,420px)}}

/* hero: the big handwritten title spans the full width, text + photo sit below it */
.hero > .title{grid-column:1/-1;font-size:clamp(64px,11vw,140px);margin:0 0 calc(var(--step)*.5)}
.hero > .title span{white-space:nowrap}
@media(max-width:600px){.hero > .title span{white-space:normal}}
@media print{.hero > .title{font-size:120px}}

/* step squares in the hero fit one row */
.hero .steps{gap:12px}
.hero .steps a{width:72px;height:72px;font-size:28px}
@media(max-width:600px){.hero .steps{gap:8px}.hero .steps a{width:48px;height:48px;font-size:20px}}

/* recipe calculator: a highlighted band with a beginner explainer */
.calc-band{background:var(--sky);color:var(--ink);padding:clamp(18px,4vw,44px);margin-left:calc(-1 * clamp(0px,2vw,24px));margin-right:calc(-1 * clamp(0px,2vw,24px))}
.calc-band .page-head{margin-top:0}
.calc-explain{max-width:820px;margin-bottom:calc(var(--step)*2)}
.calc-explain .thought{margin-bottom:var(--step)}
.calc-explain .list li strong{font-weight:500;color:var(--ink)}
.calc-explain .list li b{color:var(--red);font-weight:500}
.calc-explain .note{margin-top:14px}
.calc-band .field input[type=number],.calc-band .field select{background:var(--card)}
@media print{.calc-band{display:none!important}}
.calc-explain .list li strong{display:block;margin-bottom:4px}
.blue .calc-explain .list li b{color:var(--accent)}
.blue .calc-explain .list li strong{color:var(--fg)}
.blue .calc-explain .list li b{opacity:1}

/* calculator v3 */
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.presets .btn{margin:0}
.calc-split{margin:-6px 0 14px;font-size:15px}
table.t tr.sum td{font-weight:500;border-top:2px solid var(--rule);border-bottom:0;padding-top:16px}
table.t tr.sum td:first-child{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.calc-actions{margin-top:18px}
.print-sheet{display:none}
@media print{
  body.print-calc .wrap > *:not(.print-sheet){display:none!important}
  body.print-calc .print-sheet{display:block!important}
  body.print-calc .print-sheet h1.hand{font-size:72px;margin:10mm 0 4mm;transform:none}
  body.print-calc .print-sheet .calc-out{display:block!important}
  body.print-calc .print-sheet .big{font-size:80px}
  body.print-calc .print-foot{margin-top:12mm}
  body.print-calc{background:var(--paper)!important;color:var(--ink)!important;--fg:var(--ink);--rule:var(--ink);--accent:var(--red)}
}

/* home: audience line + author block */
.lede{font-family:var(--hook);font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:-.02em;margin:24px 0 0;max-width:30em;text-wrap:balance}
.author-row{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--step)*2.5);align-items:center}
@media(max-width:700px){.author-row{grid-template-columns:1fr;justify-items:start}}
/* recipe: troubleshooting table */
.tscroll{overflow-x:auto}
table.trouble td:first-child{font-weight:500;width:38%;padding-right:20px}
table.trouble td:last-child{font-family:var(--serif);font-style:italic;font-size:18px}
.note.baked{margin:-4px 0 12px}
.calc-explain .note strong{font-weight:400;font-style:normal;font-family:var(--mono);font-size:14px;color:var(--fg)}

/* about: bakery gallery — polaroids in columns */
.gallery{columns:3 240px;column-gap:34px;padding:10px 6px}
.gallery .polaroid{display:block;width:100%;break-inside:avoid;margin:0 0 38px;transform:rotate(var(--t,0deg));padding:14px 14px 62px}
.gallery .polaroid .ph{aspect-ratio:auto;height:auto}
.gallery .polaroid .cap{font-size:26px;bottom:16px;height:auto}
@media(max-width:600px){.gallery{columns:2 140px;column-gap:18px}.gallery .polaroid{padding:8px 8px 44px}.gallery .polaroid .cap{font-size:19px;bottom:10px}}
@media print{.gallery-sec{display:none}}
.calc-out .big{line-height:1.05;margin-bottom:10px}
.note.baked{margin:6px 0 12px}
@media(max-width:600px){.gallery .polaroid{padding-bottom:58px}.gallery .polaroid .cap{font-size:17px;line-height:1;bottom:8px;left:6px;right:6px}}

/* home: bakery strip */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin:calc(var(--step)*2) 0 var(--step);padding:6px}
.strip .polaroid{width:100%;transform:rotate(var(--t,0deg));padding:10px 10px 52px}
.strip .polaroid .ph{aspect-ratio:3/4}
.strip .polaroid .cap{font-size:20px;bottom:10px;left:6px;right:6px;height:auto;line-height:1}
@media(max-width:900px){.strip{grid-template-columns:repeat(3,1fr)}.strip .polaroid:nth-child(n+4){display:none}}
@media(max-width:500px){.strip{grid-template-columns:repeat(2,1fr);gap:14px}.strip .polaroid:nth-child(n+3){display:none}.strip .polaroid .cap{font-size:16px}}
.strip{padding:6px 10px;overflow:hidden}
.author{overflow-x:clip}
.strip{overflow:visible}
.strip .polaroid{padding-bottom:60px}
@media(max-width:900px){.strip .polaroid .cap{font-size:17px}}

/* ---------- compact scale (Oct 25): less empty space, smaller display type ---------- */
:root{--step:16px}
.site-header{padding:18px 0}
.site-header .brand{font-size:30px}
.page-head{padding:10px 0;margin-bottom:calc(var(--step)*1.5)}
section{margin:calc(var(--step)*2.5) 0}
.hero{padding:var(--step) 0;align-items:start;gap:calc(var(--step)*2)}
.hero > .title{font-size:clamp(52px,7.5vw,104px);margin:0}
.hero .title span{margin-left:.5em}
.hero > div:last-child{padding-top:12px}
.lede{font-size:clamp(19px,1.8vw,24px);margin-top:4px}
.thought{font-size:19px}
h1.hand{font-size:clamp(44px,6.5vw,80px)}
h2.hand{font-size:clamp(32px,4.2vw,52px)}
.plate{padding:18px 22px;gap:6px}
.plate .num{font-size:44px}
.plate .caps{font-size:12px}
.plates{gap:14px}
.polaroid.w320{width:280px}
.reply{font-size:32px}
.step{padding:calc(var(--step)*2) 0;gap:calc(var(--step)*2)}
.step .head .num{font-size:clamp(72px,9vw,136px)}
.step .head .hand{font-size:clamp(30px,3.6vw,46px)}
.video.tall,.clip-tabs{max-width:300px}
.list li{padding:14px 0;font-size:15px}
.kit-name{font-size:clamp(26px,3vw,38px)}
.kit-photos img{max-height:260px}
.calc-out .big{font-size:clamp(48px,6vw,88px)}
.cover-card{min-height:360px}
.cover-card .hook{font-size:26px}
.hero .steps a{width:60px;height:60px;font-size:24px}
@media(max-width:600px){.plate .num{font-size:34px}.reply{font-size:26px}}
.hero{padding-top:0}
.hero > .title{line-height:.9;margin-top:-6px}
@media(min-width:821px){.hero .plates{flex-wrap:nowrap}.hero .plates .plate{flex:1 1 0;min-width:0}}
.plate .num{white-space:nowrap}
@media(min-width:821px){.hero .plates .plate .num{font-size:36px}.hero .plates .plate{padding:16px 18px}}
.polaroid.w320 .cap{font-size:27px}

/* home strip: no clipping — gentler tilt and inner padding keep cards inside */
.author{overflow:visible}
.strip{padding:10px 18px 6px;gap:26px}
.strip .polaroid{transform:rotate(calc(var(--t,0deg) * .6))}

/* calculator page photos */
.calc-intro{display:grid;grid-template-columns:1fr auto;gap:calc(var(--step)*3);align-items:center}
.polaroid.w280{width:280px}
.calc-strip{grid-template-columns:repeat(3,1fr);max-width:860px;margin:calc(var(--step)*2) auto}
@media(max-width:820px){.calc-intro{grid-template-columns:1fr}.calc-intro .polaroid{justify-self:center}}
@media print{.calc-intro .polaroid,.calc-strip{display:none}}
/* home strip on phones: flat, inside the gutter */
@media(max-width:600px){.strip{padding:6px 4px}.strip .polaroid{transform:none}}
.strip{grid-template-columns:repeat(5,minmax(0,1fr))}
.calc-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:500px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.polaroid.w280 .cap{font-size:24px}
@media(max-width:500px){.calc-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.calc-strip .polaroid:nth-child(n+3){display:none}}
.strip .polaroid,.gallery .polaroid{margin-left:0;margin-right:0}
.strip .polaroid{margin-top:0;margin-bottom:0}

/* ===================== review round, Oct 25 ===================== */

/* recipe: sticky step navigation (slides in under the top edge once the cover is gone) */
.step-nav{position:fixed;left:0;right:0;top:0;z-index:40;background:var(--bg);border-bottom:2px solid var(--rule);transform:translateY(-120%);transition:transform .25s ease;box-shadow:0 6px 18px rgba(43,42,38,.08)}
.step-nav.show{transform:none}
.step-nav .in{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,var(--margin));display:flex;align-items:stretch;gap:4px;overflow-x:auto;scrollbar-width:none}
.step-nav .in::-webkit-scrollbar{display:none}
.step-nav a{flex:none;display:flex;align-items:baseline;gap:8px;padding:12px 10px 10px;border-bottom:3px solid transparent;margin-bottom:-2px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.step-nav a b{font-weight:500;font-size:18px;letter-spacing:0;color:var(--fg)}
.step-nav a.sn-extra{color:var(--fg)}
.step-nav a.sn-extra + a:not(.sn-extra){margin-left:auto}
.step-nav a:hover{color:var(--fg)}
.step-nav a.on{border-bottom-color:var(--red);color:var(--fg)}
.step-nav a.on b{color:var(--red)}
@media(max-width:820px){
  .step-nav a{padding:10px 8px 8px}
  .step-nav a:not(.sn-extra):not(.on) span{display:none}
  .step-nav a.sn-extra + a:not(.sn-extra){margin-left:6px}
}
.step,#ingredients,#calculator,#kit,#troubleshooting,#nutrition{scroll-margin-top:64px}
@media print{.step-nav{display:none!important}}

/* calculator: the explainer folds away */
.calc-how{margin-top:6px}
.calc-how summary{display:inline-flex;align-items:center;gap:12px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;border:2px solid currentColor;color:var(--fg)}
.calc-band .calc-how summary{color:var(--ink)}
.calc-how summary::-webkit-details-marker{display:none}
.calc-how summary::after{content:"+";font-size:20px;line-height:1;letter-spacing:0}
.calc-how[open] summary::after{content:"–"}
.calc-how[open] summary{margin-bottom:6px}

/* calculator: bigger instructions on coloured grounds */
.calc-explain .thought{font-size:21px}
.calc-explain .list li{font-size:17px;line-height:1.5}
.calc-explain .note{font-size:19px}
.calc-explain .note strong{font-size:16px;line-height:1.55}
.calc .field .caps,.calc .field label.caps{font-size:14px;color:var(--fg)}
.calc-band .calc .field .caps{color:var(--ink)}
.calc-out .note{font-size:18px}
.blue .note{opacity:1}

/* calculator: the grams to weigh sit on a paper card — the reason people open this page */
.calc-card{background:var(--card);color:var(--ink);padding:18px 24px 10px;margin:14px 0 18px;box-shadow:0 16px 36px rgba(43,42,38,.20);--rule:var(--ink);--fg:var(--ink);--muted:#5A584F}
.calc-card-head{margin:0 0 4px;color:var(--red)!important;font-weight:500}
.calc-card table.t{font-size:19px}
.calc-card table.t th{color:var(--muted)}
.calc-card table.t td.num{font-size:24px;font-weight:500;white-space:nowrap}
.calc-card table.t tr.sum td{border-bottom:0}
.calc-card table.t tr.sum td.num{color:var(--red)}
.calc-out .big{font-size:clamp(40px,4.6vw,64px)}
@media(max-width:600px){.calc-card{padding:12px 14px 6px}.calc-card table.t{font-size:16px}.calc-card table.t td.num{font-size:19px}}
@media print{.calc-card{box-shadow:none;padding:0;background:none}}

/* what you need: the rows take turns */
.kit-row.flip .kit-photos{order:-1}
@media(min-width:821px){.kit-row.flip{grid-template-columns:1fr 1.1fr}}
/* cards: the swaps become three cards under a wide header */
.kit-row.cards{grid-template-columns:1.1fr 1fr;align-items:end}
.kit-row.cards .swap-cards{grid-column:1/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.swap-cards li{background:var(--card);padding:20px 20px 22px;box-shadow:0 10px 24px rgba(43,42,38,.10);font-size:16px;line-height:1.45;border-top:4px solid var(--rule)}
.swap-cards li b{display:block;font-family:var(--hand);font-weight:700;font-size:30px;line-height:1;color:var(--red);margin-bottom:8px}
@media(max-width:820px){.kit-row.cards .swap-cards{grid-template-columns:1fr}}
/* wide: big photo on top, text and swaps side by side below */
.kit-row.wide{grid-template-columns:1fr 1fr;align-items:start}
.kit-row.wide .kit-photos{grid-column:1/-1;order:-1;background:var(--sky);padding:28px 20px}
.kit-row.wide .kit-photos img{max-height:340px}
.kit-swaps{min-width:0}
.kit-swaps .kit-intro{margin-top:0}
@media(max-width:820px){.kit-row.wide{grid-template-columns:1fr}}
/* duo: two smaller items side by side as comparison cards */
.kit-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--step)*2);margin:calc(var(--step)*2.5) 0}
.kit-duo > .kit-step{margin:0;background:var(--card);padding:0 24px 24px;box-shadow:0 14px 30px rgba(43,42,38,.10)}
.kit-duo .page-head{margin:0 -24px var(--step);padding:12px 24px;border-top:0;flex-wrap:wrap;gap:8px}
.kit-duo .kit-row{grid-template-columns:1fr}
.kit-duo .kit-photos{order:-1}
.kit-duo .kit-photos img{max-height:170px}
.kit-duo .kit-name{font-size:clamp(24px,2.4vw,32px)}
@media(max-width:820px){.kit-duo{grid-template-columns:1fr}}

/* about: larger reading text on plum */
.plum .thought{font-size:21px;line-height:1.38}
.plum .list li,.plum .bakery-list li{font-size:17px;line-height:1.6}
.plum .bakery-list li strong{font-size:32px}
@media(max-width:600px){.plum .thought{font-size:19px}.plum .list li,.plum .bakery-list li{font-size:16px}}

/* about: gallery as a grid with two large accents */
.gallery{--g:30px;columns:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--g);grid-auto-flow:dense;container-type:inline-size;grid-auto-rows:calc(((100cqw - 5 * var(--g)) / 6 * 2 + var(--g)) * 1.32);padding:10px 6px}
.gallery .polaroid{grid-column:span 2;margin:0;height:100%;transform:rotate(calc(var(--t,0deg) * .6))}
.gallery .polaroid .ph{position:absolute;left:14px;right:14px;top:14px;bottom:62px;width:auto;height:auto;aspect-ratio:auto;object-fit:cover}
.gallery .polaroid.big{grid-column:span 4;grid-row:span 2;padding:0;transform:rotate(calc(var(--t,0deg) * .4))}
.gallery .polaroid.big .ph{left:20px;right:20px;top:20px;bottom:84px}
.gallery .polaroid.big .cap{font-size:38px;bottom:22px}
.gallery .polaroid.land{grid-column:span 3}
@media(max-width:600px){
  .gallery{--g:16px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100cqw - var(--g)) / 2 * 1.36)}
  .gallery .polaroid,.gallery .polaroid.land{grid-column:span 1;transform:none}
  .gallery .polaroid.big{grid-column:span 2;grid-row:span 2;transform:none}
  .gallery .polaroid .ph{left:8px;right:8px;top:8px;bottom:50px}
  .gallery .polaroid.big .ph{left:12px;right:12px;top:12px;bottom:64px}
  .gallery .polaroid.big .cap{font-size:26px;bottom:14px}
}
@media(max-width:600px){.gallery .polaroid.land:last-child{grid-column:span 2}}
/* absolutely placed photos need explicit sizes (img would otherwise keep its own ratio) */
.gallery .polaroid .ph{width:calc(100% - 28px);height:calc(100% - 76px)}
.gallery .polaroid.big .ph{width:calc(100% - 40px);height:calc(100% - 104px)}
@media(max-width:600px){
  .gallery .polaroid .ph{width:calc(100% - 16px);height:calc(100% - 58px)}
  .gallery .polaroid.big .ph{width:calc(100% - 24px);height:calc(100% - 76px)}
}
.step-nav a{align-items:center}
.step-nav a.sn-extra{padding-top:13px}
.kit-row.wide .kit-photos img{max-width:min(100%,700px)}
@media(min-width:601px) and (max-width:900px){
  .gallery{--g:22px}
  .gallery .polaroid .ph{height:calc(100% - 84px)}
  .gallery .polaroid .cap{font-size:20px;line-height:1;bottom:14px}
  .gallery .polaroid.big .cap{font-size:30px}
}
/* about: my photo, 1.5× the standard hero polaroid */
.polaroid.me{width:420px;padding:22px 22px 92px}
.polaroid.me .cap{font-size:36px;height:92px}
@media(max-width:820px){.polaroid.me{width:min(420px,100%)}}
@media(max-width:500px){.polaroid.me{padding:14px 14px 70px}.polaroid.me .cap{font-size:28px;height:70px}}
@media(max-width:820px){.polaroid.me{width:min(420px,calc(100% - 28px));transform:rotate(1.5deg)}}
/* gallery v2: one accent that fits on screen — 4 columns, the big photo is 2×2 */
.gallery{--g:26px;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc((100cqw - 3 * var(--g)) / 4 * 1.34)}
.gallery .polaroid{grid-column:span 1}
.gallery .polaroid.big{grid-column:span 2;grid-row:span 2}
.gallery .polaroid.land{grid-column:span 2}
.gallery .polaroid .cap{font-size:21px;line-height:1;bottom:14px}
.gallery .polaroid.big .cap{font-size:32px}
@media(max-width:900px){
  .gallery{--g:16px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc((100cqw - var(--g)) / 2 * 1.36)}
  .gallery .polaroid,.gallery .polaroid.land,.gallery .polaroid.land:last-child{grid-column:span 1;transform:none}
  .gallery .polaroid.big{grid-column:span 2;grid-row:span 2;transform:none}
}
/* the big photo always fits the screen height; small captions get room for two lines */
@media(min-width:901px){
  .gallery{grid-auto-rows:min(calc((100cqw - 3 * var(--g)) / 4 * 1.34), calc((100vh - 140px) / 2))}
  .gallery .polaroid .ph{height:calc(100% - 82px)}
  .gallery .polaroid .cap{font-size:19px;bottom:12px}
  .gallery .polaroid.big .ph{height:calc(100% - 100px)}
  .gallery .polaroid.big .cap{font-size:30px;bottom:24px}
}
@media(max-width:600px){
  .gallery .polaroid .cap{font-size:15px;bottom:8px;left:6px;right:6px}
  .gallery .polaroid .ph{height:calc(100% - 62px)}
  .gallery .polaroid.big .cap{font-size:24px;bottom:14px}
}
@media(min-width:601px) and (max-width:900px){.gallery .polaroid .cap{font-size:19px}.gallery .polaroid .ph{height:calc(100% - 80px)}}