/* Only After Work opts into this dark graph-paper surface. Site chrome stays unchanged. */
.aw-grid { --aw-ink:#f2f1e8; --aw-muted:#b2b7aa; --aw-rule:#ffffff24; color:var(--aw-ink); background-color:#171e19; background-image:linear-gradient(#bbc49a0c 1px,transparent 1px),linear-gradient(90deg,#bbc49a0c 1px,transparent 1px); background-size:24px 24px; }
.aw-grid a { color:inherit; }
.aw-grid .back-link { color:var(--aw-muted); min-height:44px; display:inline-flex; align-items:center; }
.aw-page.aw-grid:not(.aw-page--gateway) { padding-top:8px; }
.aw-page .back-link { margin:-8px 0 -8px; }
@media(min-width:761px){ .aw-grid .back-link { min-height:36px; } }
.aw-category-title h1 { margin-block:0; }
.aw-head { padding:8px 4px 14px; }
.aw-head h1 { font-size:clamp(38px,6vw,64px); margin:0 0 16px; letter-spacing:-.04em; }
.aw-head h1 .aw-accent { color:#c5d788; }
.aw-head p { color:var(--aw-muted); font-size:13px; }
.aw-category-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin:0 0 8px; }
.aw-category-title { display:flex; align-items:center; gap:14px; }
.aw-category-title h1 { font-size:clamp(34px,5vw,58px); margin:0; letter-spacing:-.035em; }
.aw-category-title>img { width:70px; height:70px; object-fit:contain; }
.aw-switch { display:flex; gap:12px; }
.aw-switch a { min-height:44px; padding:0 14px; border:1px solid var(--aw-rule); border-radius:24px; text-decoration:none; display:flex; align-items:center; font-size:13px; }
.aw-switch a[aria-current] { background:#e8eddb; color:#252b23; font-weight:600; }
.aw-menu { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.aw-card { text-decoration:none; min-width:0; }
.aw-card__photo,.aw-card__placeholder { display:block; width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; border:4px solid #f5f0e6; }
.aw-card__placeholder { background:#252d27; display:grid; place-items:center; color:var(--aw-muted); font-size:13px; }
.aw-card__caption { display:grid; grid-template-columns:1fr auto; gap:8px; padding:16px 0 8px; border-bottom:1px solid var(--aw-rule); }
.aw-card__caption h2 { font-size:20px; margin:0; }
.aw-card__details,.aw-card__caption .spec { grid-column:1/-1; color:var(--aw-muted); margin:0; font-size:12px; }
.aw-card:hover h2 { text-decoration:underline; text-underline-offset:4px; }
.aw-empty { grid-column:1/-1; margin:4px 0 0; color:var(--aw-muted); padding:8px 0 24px; min-height:120px; }
.aw-grid :focus-visible { outline:3px solid #cfb8ee; outline-offset:5px; }
.recipe.aw-grid .recipe__head { border-color:var(--aw-rule); }
.recipe.aw-grid .spec,.recipe.aw-grid .recipe__block h2 { color:var(--aw-muted); }
.recipe__image { margin:24px 0 0; }
.recipe__image img { display:block; width:100%; height:auto; }
.recipe__image figcaption { color:var(--aw-muted); font-size:12px; margin-top:8px; overflow-wrap:anywhere; }
.recipe__image--placeholder { display:grid; place-items:center; aspect-ratio:3/1; border-radius:16px; border:1.5px dashed var(--aw-rule); color:var(--aw-muted); font-size:13px; }
.recipe.aw-grid .ingredients li { border-color:var(--aw-rule); }
@media(min-width:700px){.aw-menu:has(.aw-card:only-child){grid-template-columns:minmax(0,620px)}}
@media(max-width:700px){
 .aw-page.aw-grid:not(.aw-page--gateway) { padding-top:6px; }
 .aw-category-title { gap:8px; }
 .aw-category-title>img { width:44px; height:44px; }
 .aw-menu { grid-template-columns:1fr; }
}

/* ---- Sticker board. Positions come from _data/after_work_layout.json as unit variables; one unit is 1/bw of the board width. ---- */
.aw-board { container:aw-board/inline-size; position:relative; max-width:1200px; margin-inline:auto; }
.aw-stickers { --bw:var(--dbw); --bh:var(--dbh); position:relative; width:100%; aspect-ratio:var(--bw)/var(--bh); isolation:isolate; --u:calc(100cqw/var(--bw)); }
.aw-item { --x:var(--dx); --y:var(--dy); --w:var(--dw); --r:var(--dr); --z:var(--dz); --d:var(--dd); --lw:var(--dlw,0); --lh:var(--dlh,0);
 position:absolute; left:calc(var(--x)*var(--u)); top:calc(var(--y)*var(--u)); width:calc(var(--w)*var(--u)); rotate:calc(var(--r)*1deg); z-index:var(--z); display:var(--d);
 -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
@container aw-board (max-width:660px) {
 .aw-stickers { --bw:var(--mbw); --bh:var(--mbh); }
 .aw-item { --x:var(--mx); --y:var(--my); --w:var(--mw); --r:var(--mr); --z:var(--mz); --d:var(--md); --lw:var(--mlw,0); --lh:var(--mlh,0); }
}
.aw-item img { width:100%; display:block; }
.aw-item img, img.aw-item { height:auto; object-fit:contain; filter:drop-shadow(0 2px 2px #0005) drop-shadow(0 9px 12px #0004); pointer-events:none; }
img.aw-deco { filter:drop-shadow(0 1px 1px #0005) drop-shadow(0 5px 7px #0003); pointer-events:none; }
.aw-sticker { flex-direction:column; align-items:center; gap:calc(6*var(--u)); text-decoration:none; transition:translate .2s,scale .2s; }
/* Link labels are cream pills (the old hover tag, now always visible) below the art, 12px clear of it. --aw-pill-shift is a per-sticker optical offset for art whose visual center is not its box center (the Coffee handle widens the box to the right). On hover and keyboard focus the sticker stays still and only the pill reacts: it lifts 3px, grows 10%, turns pink-cream and its shadow deepens. */
.aw-label { position:relative; left:var(--aw-pill-shift,0); margin-top:calc(12px - 6*var(--u)); padding:3px 10px; border-radius:999px; background:#fff8e6; color:#232820; font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; box-shadow:0 3px 6px #0005; transition:translate .2s,scale .2s,background-color .2s,box-shadow .2s; }
.aw-sticker--coffee { --aw-pill-shift:-8%; }
.aw-steam { position:absolute; left:34%; top:-14%; width:30%; height:22%; pointer-events:none; }
.aw-steam b { position:absolute; bottom:0; width:6%; height:100%; border-radius:99px; background:linear-gradient(#fff0,#ffffffb0); opacity:0; filter:blur(1.5px); animation:aw-steam 2.8s ease-in-out infinite; }
.aw-steam b:nth-child(1) { left:10%; } .aw-steam b:nth-child(2) { left:44%; animation-delay:.9s; } .aw-steam b:nth-child(3) { left:78%; animation-delay:1.8s; }
@keyframes aw-steam { 0% { opacity:0; transform:translateY(20%) scaleY(.6); } 30% { opacity:.7; } 100% { opacity:0; transform:translateY(-60%) scaleY(1.1); } }
@media(hover:hover){
 .aw-sticker:hover .aw-label { translate:0 -3px; scale:1.1; background:#ffe1d6; box-shadow:0 5px 10px #0007; }
}
.aw-sticker:focus-visible { outline:none; }
.aw-sticker:focus-visible .aw-label { translate:0 -3px; scale:1.1; background:#ffe1d6; box-shadow:0 5px 10px #0007; }
.aw-sticker:active .aw-label { translate:0 -1px; scale:1.05; background:#ffe1d6; }
@keyframes aw-blink { 50% { opacity:0; } }
.aw-page--gateway { max-width:1248px; padding-top:12px; }
/* ---- owner editor (/after-work/?edit) ---- */
.aw-embed .skip-link, .aw-embed .site-header, .aw-embed .site-footer, .aw-embed .aw-head { display:none; }
.aw-embed .aw-page { padding-top:8px; }
.aw-editing .aw-stickers { outline:1px dashed #c5d78880; outline-offset:6px; }
.aw-editing .aw-item { cursor:move; touch-action:none; pointer-events:auto; }
.aw-editing .aw-item img { pointer-events:none; }
.aw-editing img.aw-item { pointer-events:auto; }
.aw-editing .aw-item.is-selected { outline:2px solid #c5d788; outline-offset:3px; }
.aw-editing .aw-item.is-bad { outline:2px solid #ff8f7a; outline-offset:3px; }
.aw-editing .aw-steam { display:none; }
.aw-editing .aw-handles, .aw-handles { pointer-events:none; outline:2px solid #c5d788; outline-offset:3px; }
.aw-knob { position:absolute; width:22px; height:22px; border-radius:50%; background:#c5d788; border:2px solid #171e19; pointer-events:auto; touch-action:none; }
.aw-knob--size { right:-14px; bottom:-14px; cursor:nwse-resize; }
.aw-knob--turn { left:50%; top:-30px; margin-left:-11px; cursor:grab; }
@media(pointer:coarse){ .aw-knob { width:44px; height:44px; } .aw-knob--size { right:-30px; bottom:-30px; } .aw-knob--turn { top:-58px; margin-left:-22px; } }
.aw-editor { margin:18px auto 0; max-width:560px; padding:14px 16px; border-radius:16px; background:#10150f; color:#f2f1e8; font-size:13px; box-shadow:0 10px 30px #000a; }
.aw-editor h2 { font-size:16px; margin:0 0 8px; } .aw-editor h3 { font-size:13px; margin:12px 0 4px; }
.aw-editor button { min-height:36px; margin:2px 4px 2px 0; padding:0 12px; border:0; border-radius:999px; background:#2a3329; color:inherit; font:inherit; cursor:pointer; }
.aw-editor button:disabled { opacity:.4; cursor:default; }
.aw-editor button[aria-pressed="true"], .aw-editor .is-primary { background:#c5d788; color:#1d241c; font-weight:700; }
.aw-editor label { display:flex; gap:8px; align-items:center; margin:6px 0; } .aw-editor input[type=range] { flex:1; }
.aw-editor fieldset { border:1px solid #ffffff24; border-radius:10px; margin:8px 0; }
.aw-editor ul, .aw-editor ol { margin:4px 0; padding-left:18px; } .aw-editor .is-ok { list-style:none; margin-left:-18px; color:#9be6b8; }
.aw-editor__warn { color:#ffb39f; } .aw-editor__hint { color:#b2b7aa; }
@media(prefers-reduced-motion:reduce){ .aw-sticker, .aw-label { transition:none; } .aw-steam b { animation:none; } .aw-steam { display:none; } }
.aw-head p { min-height:1.5em; }
.aw-typed { font-family:var(--mono, ui-monospace, monospace); }
.aw-head p.is-typing .aw-typed::after { content:""; display:inline-block; width:.55em; height:1em; margin-left:2px; vertical-align:-.15em; background:#c5d788; animation:aw-caret 1s steps(1) infinite; }
@keyframes aw-caret { 50% { opacity:0; } }
@media(prefers-reduced-motion:reduce){ .aw-head p.is-typing .aw-typed::after { animation:none; } }

/* tags, filter and timer (preview) */
.aw-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 20px; }
.aw-filter[hidden] { display:none; }
.aw-chip { min-height:36px; padding:0 14px; border:1px solid var(--aw-rule); border-radius:20px; background:transparent; color:inherit; font:inherit; font-size:13px; cursor:pointer; transition:background .15s, transform .15s, color .15s; }
.aw-chip:hover { transform:translateY(-1px); }
.aw-chip[aria-pressed="true"] { background:#e8eddb; color:#252b23; font-weight:600; }
.aw-filter__count { font-size:12px; color:var(--aw-muted); margin-left:4px; }
.aw-card { transition:opacity .18s, transform .18s; animation:aw-card-in .45s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i,0)*60ms); }
.aw-card[hidden] { display:none; }
.aw-card.is-out { opacity:0; transform:scale(.97); }
.aw-card.is-in { animation:aw-card-in .35s cubic-bezier(.2,.8,.3,1) both; }
@keyframes aw-card-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.aw-sample { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; margin-left:6px; border:1px dashed var(--aw-muted); border-radius:10px; color:var(--aw-muted); vertical-align:middle; }
.aw-sample-note { font-size:12px; color:var(--aw-muted); margin:6px 0 0; }
.aw-tags { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:8px 0 0; }
.aw-tags li { font-size:12px; padding:3px 10px; border:1px solid var(--aw-rule); border-radius:12px; color:var(--aw-muted); }
.brew-timer { display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; position:relative; }
.brew-timer__clock { font-family:'Geist',sans-serif; font-weight:700; font-size:26px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; min-width:3.2ch; }
.brew-timer__clock small { font-size:13px; font-weight:400; letter-spacing:0; color:var(--aw-muted); }
.brew-timer.is-running .brew-timer__clock small { color:var(--aw-muted); }
.brew-timer.is-running .brew-timer__clock { color:#c5d788; }
.brew-timer__btn { min-height:30px; padding:0 12px; border-radius:999px; border:1px solid transparent; background:#e8eddb; color:#252b23; font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:transform .12s; }
.brew-timer__btn:active { transform:scale(.95); }
.brew-timer__btn--ghost { background:transparent; color:inherit; border-color:var(--aw-rule); font-weight:400; }
.brew-timer__bar { flex-basis:100%; order:6; position:relative; height:2px; background:var(--aw-rule); border-radius:2px; overflow:visible; }
.brew-timer__bar s { position:absolute; top:-2px; bottom:-2px; width:1px; background:var(--aw-muted); opacity:.55; }
.brew-timer__bar i { display:block; height:100%; background:#c5d788; border-radius:2px; transform-origin:0 50%; transform:scaleX(0); transition:transform .25s linear; }
.brew-timer__step { flex-basis:100%; order:5; font:600 10px 'Geist',sans-serif; text-transform:uppercase; letter-spacing:.1em; color:var(--aw-muted); }
.steps li { transition:opacity .3s, transform .3s, background .3s; }
.steps li.is-now { background:#c5d78822; transform:translateX(4px); border-radius:6px; }
.steps li.is-done { opacity:1; color:var(--aw-muted); }
.steps li.is-done::before { background:#c5d788; border-color:#c5d788; color:#252b23; }
@media(prefers-reduced-motion:reduce){ .aw-card,.aw-card.is-in { animation:none; } .aw-card,.aw-chip,.brew-timer__btn,.steps li,.brew-timer__bar i { transition:none; } .steps li.is-now { transform:none; } }
.aw-grid .brew-timer__btn:hover { background:#fff; color:#252b23; border-color:transparent; }
.aw-grid .brew-timer__btn--ghost:hover { background:#ffffff14; color:var(--aw-ink); border-color:var(--aw-muted); }

/* One green theme for every After work page, header and footer included (light or dark site mode) */
body.is-after-work { color-scheme:dark; --bg:#171e19; --panel:#1f2a23; --fg:#f2f1e8; --muted:#b2b7aa; --line:#ffffff24; --dot:#ffffff24; --ghost:#2a3a2f; --shadow:none;
  background-color:#171e19; background-image:linear-gradient(#bbc49a0c 1px,transparent 1px),linear-gradient(90deg,#bbc49a0c 1px,transparent 1px); background-size:24px 24px; color:var(--fg); }
body.is-after-work .aw-grid { background:none; }
body.is-after-work .site-header, body.is-after-work .site-footer { background:#171e19cc; border-color:#ffffff1f; box-shadow:none; }
body.is-after-work .primary-nav { background:#1f2a23; border-color:#ffffff24; box-shadow:none; }
/* The soft-depth layer adds a bright top highlight to the nav pill (made for light pages); After work is always dark, so keep it quiet there. */
html[data-depth="soft"] body.is-after-work .primary-nav { box-shadow:none; }
body.is-after-work .primary-nav a[aria-current="page"] { background:#e8eddb; color:#252b23; }
body.is-after-work .primary-nav a:hover { background:#ffffff14; }

/* Warm-paper light mode: overview and lists follow the lamp, using the exact
   recipe-detail light tokens so all After work pages share one light theme.
   Sticker shadows soften on the light ground; dark mode is untouched. */
[data-theme="light"] body.is-after-work { color-scheme:light; --bg:#f2efe3; --panel:#fcfaf1; --fg:#232820; --muted:#66705f; --line:rgba(23,30,25,.12); --dot:rgba(23,30,25,.12); --ghost:#d8d2c2;
  background-color:#f2efe3; background-image:linear-gradient(rgba(23,30,25,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,30,25,.05) 1px,transparent 1px); color:var(--fg); }
[data-theme="light"] body.is-after-work .site-header, [data-theme="light"] body.is-after-work .site-footer { background:#f2efe3cc; border-color:rgba(23,30,25,.12); }
[data-theme="light"] body.is-after-work .primary-nav { background:#fcfaf1; border-color:rgba(23,30,25,.14); }
[data-theme="light"] body.is-after-work .primary-nav a[aria-current="page"] { background:#252b23; color:#f5f1e4; }
[data-theme="light"] body.is-after-work .primary-nav a:hover { background:rgba(23,30,25,.08); }
[data-theme="light"] body.is-after-work .aw-grid { --aw-ink:#232820; --aw-muted:#66705f; --aw-rule:rgba(23,30,25,.18); color:var(--aw-ink); background:none; }
[data-theme="light"] body.is-after-work .aw-grid :focus-visible { outline-color:#6f8347; }
[data-theme="light"] body.is-after-work .aw-head h1 .aw-accent { color:#6f8347; }
[data-theme="light"] body.is-after-work .aw-switch a[aria-current] { background:#252b23; color:#f5f1e4; }
[data-theme="light"] body.is-after-work img.aw-deco, [data-theme="light"] body.is-after-work .aw-avatar img, [data-theme="light"] body.is-after-work .aw-sticker > img { filter:drop-shadow(0 1px 0 #fff3) drop-shadow(calc(var(--px)*-3px) calc(3px + var(--py)*-2px) 4px rgba(40,35,24,.24)) drop-shadow(calc(var(--px)*-7px) calc(9px + var(--py)*-4px) 13px rgba(40,35,24,.15)); }
[data-theme="light"] body.is-after-work .aw-item img, [data-theme="light"] body.is-after-work img.aw-item { filter:drop-shadow(0 1px 1px rgba(40,35,24,.28)) drop-shadow(0 4px 6px rgba(40,35,24,.17)); }
[data-theme="light"] body.is-after-work .aw-label { box-shadow:0 2px 4px rgba(40,35,24,.22); }
[data-theme="light"] body.is-after-work .aw-sticker:hover .aw-label, [data-theme="light"] body.is-after-work .aw-sticker:focus-visible .aw-label { box-shadow:0 3px 7px rgba(40,35,24,.28); }

/* recipe detail pages */
.recipe.aw-grid { max-width:960px; }
.recipe__head h1 { font-family:'Geist',sans-serif; font-weight:700; font-size:clamp(26px,4.2vw,34px); letter-spacing:-.02em; line-height:1.12; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; margin:16px 0 0; }
@media(min-width:761px){ .stats { grid-template-columns:repeat(6,1fr); } }
.stats>div { padding:9px 12px 10px; border:1px solid var(--aw-rule); border-radius:14px; background:#ffffff08; animation:aw-card-in .45s cubic-bezier(.2,.8,.3,1) both; }
.stats>div:nth-child(2){animation-delay:.05s}.stats>div:nth-child(3){animation-delay:.1s}.stats>div:nth-child(4){animation-delay:.15s}.stats>div:nth-child(5){animation-delay:.2s}.stats>div:nth-child(6){animation-delay:.25s}
.stats dt { font:500 10px 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--aw-muted); margin:0 0 4px; }
.stats dd { margin:0; font:500 17px 'Geist Mono',monospace; font-variant-numeric:tabular-nums; }
.stats dd small { font-size:11px; font-weight:400; color:var(--aw-muted); margin-left:2px; }
.stats dd.stats__text { font-size:13px; padding-top:3px; }
.stats>div.stats__beans { grid-column:1/-1; }
.stats__beans dd { font-size:14px; font-weight:400; line-height:1.45; }
.stats__beans dt.stats__roastery { margin-top:10px; }
.dose-edit { display:inline-flex; align-items:center; gap:3px; }
.dose-val { font:500 17px 'Geist Mono',monospace; font-variant-numeric:tabular-nums; }
.dose-val small { font-size:11px; font-weight:400; color:var(--aw-muted); margin-left:2px; }
.dose-val-toggle { padding:0; border:none; background-color:transparent; color:inherit; cursor:pointer; background-image:repeating-linear-gradient(90deg,var(--aw-muted) 0 3px,transparent 3px 6px); background-size:100% 1.5px; background-position:0 100%; background-repeat:no-repeat; }
.dose-val-toggle:focus-visible { outline:2px solid #c5d788; outline-offset:2px; border-radius:3px; }
.dose-btn { min-width:30px; min-height:30px; padding:0; border-radius:999px; border:1px solid var(--aw-rule); background:transparent; color:inherit; font:600 15px 'Geist Mono',monospace; cursor:pointer; }
.dose-btn:active { transform:scale(.92); }
.dose-edit .dose-btn { display:none; min-width:20px; min-height:20px; font-size:11px; }
.dose-edit.is-editing .dose-btn { display:inline-block; }
.dose-reset { min-height:26px; padding:0 10px; border-radius:999px; border:1px solid var(--aw-rule); background:transparent; color:var(--aw-muted); font:500 11px 'Geist Mono',monospace; cursor:pointer; }
.dose-note-row { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin:8px 2px 0; }
.dose-note-row[hidden] { display:none; }
.dose-note { font-size:11px; line-height:1.4; color:var(--aw-muted); }
.recipe__body { display:block; margin-top:30px; }
.recipe__body.has-aside { display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:36px; align-items:start; }
.recipe__aside { position:sticky; top:16px; padding:18px; border:1px solid var(--aw-rule); border-radius:16px; background:#ffffff08; }
.recipe__aside h2, .recipe__main h2, .recipe__comments h2 { font:500 12px 'Geist Mono',monospace; text-transform:uppercase; letter-spacing:.08em; color:var(--aw-muted); margin:0 0 12px; }
.recipe__main .recipe__row { margin-bottom:14px; }
.recipe__main .recipe__row h2 { margin:0; }
.ingredients label { display:flex; gap:10px; align-items:flex-start; cursor:pointer; min-height:28px; }
.ingredients input { appearance:none; flex:none; width:18px; height:18px; margin-top:2px; border:1.5px solid var(--aw-muted); border-radius:5px; display:grid; place-items:center; background:transparent; transition:background .15s, border-color .15s; }
.ingredients input:checked { background:#c5d788; border-color:#c5d788; }
.ingredients input:checked::after { content:"✓"; font-size:12px; color:#252b23; font-weight:700; }
.ingredients input:checked + span { color:var(--aw-muted); text-decoration:line-through; text-decoration-color:#ffffff40; }
.ingredients input:focus-visible { outline:3px solid #cfb8ee; outline-offset:2px; }
.recipe__main .steps li { padding:12px 10px 12px 44px; margin:0; border:none; background:none; border-radius:10px; font-size:16px; line-height:1.5; }
.recipe__main .steps li::before { left:6px; top:12px; width:26px; height:26px; line-height:24px; font-size:12px; border-color:var(--aw-muted); }
.recipe__main .steps[data-tick-steps] li { cursor:pointer; }
.recipe__main .steps[data-tick-steps] li.is-done { opacity:1; color:var(--aw-muted); }
.recipe__main .steps[data-tick-steps] li:hover { background:#ffffff08; }
.steps-progress { margin:0; font-size:12px; color:var(--aw-muted); }
.recipe--coffee .recipe__row { position:sticky; top:8px; z-index:2; padding:12px 14px; margin-bottom:14px; border:1px solid var(--aw-rule); border-radius:16px; background:#1b251ecc; backdrop-filter:blur(8px); }
.recipe--coffee .recipe__row h2 { display:none; }
.recipe--coffee .brew-timer { width:100%; justify-content:flex-start; }
.recipe--coffee .brew-timer__clock { font-size:30px; }
.recipe--coffee .brew-timer__btn:first-of-type { margin-left:auto; }
.recipe__comments { margin-top:34px; padding:20px 22px; border-radius:16px; background:linear-gradient(135deg,#c5d78822,#c5d78808); border:1px solid #c5d78855; }
.recipe__comments p { margin:0; font-size:17px; line-height:1.6; }
.recipe__comments h2 { color:#c5d788; }
@media(max-width:760px){ .recipe__body.has-aside { grid-template-columns:1fr; gap:20px; } .recipe__aside { position:static; } .recipe--coffee .brew-timer__clock { font-size:30px; } }
@media(prefers-reduced-motion:reduce){ .stats>div { animation:none; } .ingredients input { transition:none; } }

/* solid cream recipe panel on the green grid */
.recipe.aw-grid { padding-bottom:40px; }
.recipe.aw-grid .back-link { min-height:36px; margin-bottom:6px; }
.recipe__sheet { --aw-ink:#2b2a22; --aw-muted:#665f50; --aw-rule:#2b2a2224; --aw-accent:#4d6a26; margin-top:6px; padding:clamp(18px,4vw,40px); border-radius:22px; background:#f5edda; color:var(--aw-ink); box-shadow:0 18px 40px -18px #000a, 0 2px 0 #fff8 inset; }
.recipe__sheet .recipe__head { border-color:var(--aw-rule); }
.recipe__sheet .eyebrow,.recipe__sheet .spec { color:var(--aw-muted); }
.recipe__sheet .stats>div,.recipe__sheet .recipe__aside { background:#fffaf0; border-color:var(--aw-rule); }
.recipe--coffee .recipe__sheet .recipe__row { background:#fffaf0ee; border-color:var(--aw-rule); backdrop-filter:none; box-shadow:0 6px 16px -10px #0006; }
.recipe__sheet .brew-timer.is-running .brew-timer__clock { color:var(--aw-accent); }
.recipe__sheet .brew-timer__btn { background:#2b2a22; color:#f5edda; }
.recipe__sheet .brew-timer__btn:hover { background:#4d6a26; color:#fff; }
.recipe__sheet .brew-timer__btn--ghost { background:transparent; color:var(--aw-ink); border-color:var(--aw-rule); }
.recipe__sheet .brew-timer__btn--ghost:hover { background:#2b2a2210; color:var(--aw-ink); border-color:var(--aw-muted); }
.recipe__sheet .brew-timer__bar i { background:var(--aw-accent); }
.recipe__sheet .ingredients input:checked { background:var(--aw-accent); border-color:var(--aw-accent); }
.recipe__sheet .ingredients input:checked::after { color:#fff; }
.recipe__sheet .ingredients input:checked + span { text-decoration-color:#2b2a2260; }
.recipe__sheet .recipe__comments { background:#e9f0d2; border-color:#4d6a2655; }
.recipe__sheet .recipe__comments h2 { color:var(--aw-accent); }
.recipe__sheet .aw-tags li { border-color:var(--aw-rule); color:var(--aw-ink); }
.recipe__sheet .aw-sample-note { color:var(--aw-muted); }
.recipe__sheet a { color:inherit; }
.recipe__sheet .steps li.is-now { background:#e9f0d2 !important; border-color:var(--aw-accent) !important; }
.recipe__sheet .steps li.is-now::before { background:var(--aw-accent); border-color:var(--aw-accent); color:#fff; }
.recipe__sheet .recipe__image { margin:16px 0 0; }
.recipe__sheet .recipe__image img { border-radius:16px; aspect-ratio:3/2; object-fit:cover; box-shadow:0 10px 24px -14px #0008; }
.recipe__sheet .recipe__image figcaption { font-size:12px; }
/* local comparison: recipe panel colour options, set with data-sheet on .recipe (not a chosen design) */
.recipe[data-sheet=taupe] .recipe__sheet { --aw-ink:#24211b; --aw-muted:#5b5547; --aw-rule:#24211b26; --aw-accent:#3f5a22; background:#bdb3a0; box-shadow:0 18px 40px -18px #000a; }
.recipe[data-sheet=taupe] .recipe__sheet .stats>div,.recipe[data-sheet=taupe] .recipe__sheet .recipe__aside { background:#cdc4b2; }
.recipe[data-sheet=taupe].recipe--coffee .recipe__sheet .recipe__row { background:#cdc4b2f2; }
.recipe[data-sheet=taupe] .recipe__sheet .brew-timer__btn { background:#24211b; color:#e9e2d0; }
.recipe[data-sheet=taupe] .recipe__sheet .recipe__comments { background:#c3cca4; border-color:#3f5a2266; }
.recipe[data-sheet=taupe] .recipe__sheet .steps li.is-now { background:#c3cca4 !important; }
.recipe[data-sheet=charcoal] .recipe__sheet { --aw-ink:#efeadc; --aw-muted:#b6b3a6; --aw-rule:#ffffff22; --aw-accent:#c5d788; background:#252a26; box-shadow:0 18px 40px -18px #000c, 0 1px 0 #ffffff14 inset; }
.recipe[data-sheet=charcoal] .recipe__sheet .stats>div,.recipe[data-sheet=charcoal] .recipe__sheet .recipe__aside { background:#2f352f; }
.recipe[data-sheet=charcoal].recipe--coffee .recipe__sheet .recipe__row { background:#2f352ff2; }
.recipe[data-sheet=charcoal] .recipe__sheet .brew-timer__btn { background:#e8eddb; color:#252b23; }
.recipe[data-sheet=charcoal] .recipe__sheet .brew-timer__btn:hover { background:#fff; color:#252b23; }
.recipe[data-sheet=charcoal] .recipe__sheet .brew-timer__btn--ghost { background:transparent; color:var(--aw-ink); }
.recipe[data-sheet=charcoal] .recipe__sheet .ingredients input:checked::after { color:#252b23; }
.recipe[data-sheet=charcoal] .recipe__sheet .ingredients input:checked + span { text-decoration-color:#ffffff50; }
.recipe[data-sheet=charcoal] .recipe__sheet .recipe__comments { background:#c5d78822; border-color:#c5d78855; }
.recipe[data-sheet=charcoal] .recipe__sheet .steps li.is-now { background:#c5d78826 !important; }
.recipe[data-sheet=charcoal] .recipe__sheet .steps li.is-now::before { color:#252b23; }

/* ---- recipe detail refresh: panel heads, step time chips, food section tabs ---- */
.recipe__panelhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.panel-count { margin:0; font:11px 'Geist Mono',monospace; color:var(--aw-muted); }
.steps__t { display:inline-block; min-width:44px; font:11.5px 'Geist Mono',monospace; color:var(--aw-muted); }
.recipe__sheet .steps li.is-now .steps__t { color:var(--aw-accent); }
.recipe__tabs { display:none; margin:20px 0 0; }
@media(max-width:760px){
 .recipe--food .recipe__tabs:not([hidden]) { display:flex; gap:4px; padding:3px; border:1px solid var(--aw-rule); border-radius:10px; }
 .recipe__tab { text-transform:lowercase; flex:1; min-height:40px; padding:8px 12px; border:0; border-radius:7px; background:transparent; color:var(--aw-muted); font:500 13px 'Geist',sans-serif; letter-spacing:.01em; cursor:pointer; }
 .recipe--food .recipe__body.has-aside { display:block; }
 .recipe--food .recipe__body.has-aside>.is-panel-off { display:none; }
 .recipe--food .recipe__aside { margin:14px 0 16px; }
 .has-tabs .recipe__panelhead h2, .has-tabs .recipe__main .recipe__row h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .has-tabs .recipe__panelhead, .has-tabs .recipe__main .recipe__row { justify-content:flex-end; }
}
.recipe__tab.is-active { background:#e8eddb; color:#252b23; }

/* ---- warm-paper light mode for recipe detail pages (charcoal stays the dark theme) ---- */
.recipe[data-sheet=charcoal] .recipe__sheet .recipe__image img { box-shadow:0 10px 24px -14px #000; }
.recipe__sheet .steps li::before { color:var(--aw-muted); }
.recipe__sheet .steps li.is-now::before { color:#fff; }
.recipe[data-sheet=charcoal] .recipe__sheet .steps li.is-now::before { color:#252b23; }

/* ---- recipe detail refresh: panel heads, step time chips, food section tabs ---- */
.recipe__panelhead { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.panel-count { margin:0; font:11px 'Geist Mono',monospace; color:var(--aw-muted); }
.steps__t { display:inline-block; min-width:44px; font:11.5px 'Geist Mono',monospace; color:var(--aw-muted); }
.recipe__sheet .steps li.is-now .steps__t { color:var(--aw-accent); }
.recipe__tab.is-active { background:#e8eddb; color:#252b23; }

/* ---- warm-paper light mode for recipe detail pages (charcoal stays the dark theme) ---- */
[data-theme="light"] body.is-recipe-page { color-scheme:light; --bg:#f2efe3; --panel:#fcfaf1; --fg:#232820; --muted:#66705f; --line:rgba(23,30,25,.12); --dot:rgba(23,30,25,.12); --ghost:#d8d2c2; background-color:#f2efe3; background-image:linear-gradient(rgba(23,30,25,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(23,30,25,.05) 1px,transparent 1px); color:var(--fg); }
[data-theme="light"] body.is-recipe-page .site-header, [data-theme="light"] body.is-recipe-page .site-footer { background:#f2efe3cc; border-color:rgba(23,30,25,.12); }
[data-theme="light"] body.is-recipe-page .primary-nav { background:#fcfaf1; border-color:rgba(23,30,25,.14); }
[data-theme="light"] body.is-recipe-page .primary-nav a[aria-current="page"] { background:#252b23; color:#f5f1e4; }
[data-theme="light"] body.is-recipe-page .primary-nav a:hover { background:rgba(23,30,25,.08); }
[data-theme="light"] body.is-recipe-page .aw-grid { --aw-ink:#232820; --aw-muted:#66705f; --aw-rule:rgba(23,30,25,.18); color:var(--aw-ink); background:none; }
[data-theme="light"] body.is-recipe-page .aw-grid :focus-visible { outline-color:#6f8347; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet { --aw-ink:#232820; --aw-muted:#5c6656; --aw-rule:rgba(23,30,25,.14); --aw-accent:#6f8347; background:#fcfaf1; box-shadow:0 14px 40px rgba(28,25,19,.10); }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .stats>div, [data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .recipe__aside { background:#f5f2e6; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal].recipe--coffee .recipe__sheet .recipe__row { background:#f5f2e6f2; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .brew-timer__btn { background:#252b23; color:#f5f1e4; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .brew-timer__btn:hover { background:#6f8347; color:#fff; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .brew-timer__btn--ghost { background:transparent; color:var(--aw-ink); }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .brew-timer__btn--ghost:hover { background:rgba(23,30,25,.08); color:var(--aw-ink); }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .ingredients input:checked::after { color:#fff; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .ingredients input:checked + span { text-decoration-color:rgba(23,30,25,.35); }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .recipe__comments { background:rgba(111,131,71,.12); border-color:rgba(111,131,71,.35); }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .recipe__comments h2 { color:#6f8347; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .steps li.is-now { background:rgba(111,131,71,.15) !important; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .steps li.is-now::before { color:#fff; }
[data-theme="light"] body.is-recipe-page .recipe[data-sheet=charcoal] .recipe__sheet .recipe__image img { box-shadow:0 10px 24px -14px rgba(28,25,19,.35); }
[data-theme="light"] body.is-recipe-page .recipe__tab.is-active { background:#252b23; color:#f5f1e4; }

/* ---- Sticker effects preview: entrance, shake, light-direction 3D ---- */
.aw-stickers { --px:0; --py:0; perspective:1400px; }
.aw-item { --i:0; }
img.aw-deco, .aw-avatar img, .aw-sticker > img { filter:drop-shadow(0 1px 0 #fff4) drop-shadow(calc(var(--px)*-5px) calc(5px + var(--py)*-3px) 6px #0006) drop-shadow(calc(var(--px)*-12px) calc(16px + var(--py)*-6px) 22px #0005); }
.aw-stickers.has-fx { transform-style:preserve-3d; transform:rotateX(calc(var(--py)*-3deg)) rotateY(calc(var(--px)*4deg)); transition:transform .25s ease-out; }
.aw-stickers.has-fx .aw-deco, .aw-stickers.has-fx .aw-avatar { translate:calc(var(--px)*var(--dz)*-.9px + var(--ox,0)*var(--u)) calc(var(--py)*var(--dz)*-.9px + var(--oy,0)*var(--u)); transition:translate .25s ease-out; }
.aw-stickers.has-fx:not(.fx-ready) .aw-item { animation:aw-pop .6s cubic-bezier(.2,.9,.3,1.25) backwards; animation-delay:calc(120ms + var(--i)*55ms); }
@keyframes aw-pop { from { opacity:0; transform:translateY(22px) scale(.82) rotate(-4deg); } to { opacity:1; transform:none; } }
.aw-stickers.has-fx .aw-item.is-shaking { animation:aw-shake .5s ease-in-out; }
@keyframes aw-shake { 0%,100% { transform:none; } 15% { transform:rotate(-7deg) translateX(-2px); } 32% { transform:rotate(6deg) translateX(2px); } 50% { transform:rotate(-4deg); } 68% { transform:rotate(3deg); } 84% { transform:rotate(-1.5deg); } }
.aw-stickers.has-fx img.aw-deco { pointer-events:auto; }
.aw-item { --dz:8; }

/* Soft title entrance: words and arrow fade in one after another, once */
@keyframes aw-title-in { from { opacity:0; transform:translateY(10px); filter:blur(3px); } to { opacity:1; transform:none; filter:none; } }
@media (prefers-reduced-motion:no-preference) {
  .aw-head h1 .aw-w1, .aw-head h1 .aw-w2, .aw-head h1 .aw-w3 { display:inline-block; animation:aw-title-in .7s cubic-bezier(.2,.7,.2,1) backwards; }
  .aw-head h1 .aw-w2 { animation-delay:.14s; }
  .aw-head h1 .aw-w3 { animation-delay:.28s; }
}

/* Loose stickers can be picked up and moved (after-work-play.js). Pushed ones glide, the held one follows the pointer. */
.aw-deco, .aw-avatar { translate:calc(var(--ox,0)*var(--u)) calc(var(--oy,0)*var(--u)); }
.aw-stickers.has-fx .aw-deco, .aw-stickers.has-fx .aw-avatar { cursor:grab; }
.aw-stickers.has-fx .aw-avatar { pointer-events:auto; }
.aw-stickers.is-dragging, .aw-stickers.is-dragging * { cursor:grabbing; }
.aw-stickers.has-fx .aw-item.is-held { transition:none; scale:1.05; z-index:60; }
.aw-stickers.has-fx .aw-item.is-held img, .aw-stickers.has-fx img.aw-item.is-held { filter:drop-shadow(0 2px 2px #0006) drop-shadow(0 14px 14px #0005); }
@media (prefers-reduced-motion:reduce) { .aw-deco, .aw-avatar { transition:none; } }