/*
Theme Name: Zeszyt Babci
Theme URI: https://pl.mygrannysquare.com/
Author: Zeszyt Babci
Description: Przepisy z zeszytu w kratkę: w gramach i z historią każdego dania. Recipe theme with the story behind every dish, tick-off ingredients and steps, a servings scaler, Recipe schema and ad-friendly flat article columns.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zeszyt-babci
*/
@font-face{font-family:"Literata";font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/literata-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Literata";font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/literata-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/caveat-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/caveat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/fonts/figtree-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
:root{--paper:#F8F6EE;--paper-deep:#EFEADB;--sheet:#FFFEFA;--grid:rgba(66,120,190,.12);--grid-strong:rgba(66,120,190,.22);--rule:rgba(66,120,190,.26);--rule-strong:rgba(66,120,190,.5);--margin:#E07070;--ink:#1E2433;--ink-soft:#424A5C;--muted:#667085;--line:#E4DFD0;--line-strong:#C8C0AB;--accent:#A3214B;--accent-deep:#7D1838;--on-accent:#FFFFFF;--dill:#4C7A2F;--honey:#D99A1E;--link:#8E1C41;--marker:rgba(246,205,80,.62);--tape:rgba(233,214,148,.8);--sticky-1:#FFF1A6;--sticky-2:#FFDCE2;--sticky-3:#DCF1D4;--tab-1:#A3214B;--tab-2:#F2C14E;--tab-3:#8CC7A1;--tab-4:#7FA7E0;--cover:#1F2B4A;--cover-ink:#F3EFE4;--cover-line:rgba(255,255,255,.05);--cover-line-strong:rgba(255,255,255,.16);--focus:#D99A1E;--focus-soft:rgba(217,154,30,.16);--easy:#E3F0DA;--easy-ink:#3C6B22;--medium:#FBEBC7;--medium-ink:#7A5306;--hard:#F7DCE3;--hard-ink:#8E1C41;--shadow:0 18px 36px -22px rgba(30,36,51,.45);--shadow-sm:0 3px 10px -5px rgba(30,36,51,.22);--font-display:"Literata", Georgia, "Times New Roman", serif;--font-hand:"Caveat", "Segoe Print", "Bradley Hand", cursive;--font-body:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}
/* ==========================================================================
   Zeszyt — the squared school notebook. Site tokens (:root) and @font-face
   are prepended by build.py.

   Ad rule of the house: text columns (.zb-flow) keep their paragraphs, lists
   and headings as DIRECT children and never clip (no overflow:hidden, no
   contain, no transform on them), so Auto ads can open a gap between any two
   blocks. Paper effects live on backgrounds and pseudo-elements only.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.68;
	background-color: var(--paper);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 24px 24px;
	background-position: -1px -1px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 720; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); margin: 0 0 .5em; text-wrap: balance; font-variation-settings: "opsz" 48; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.8vw, 4.4rem); font-weight: 780; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + .5vw, 1.4rem); }
p { margin: 0 0 1em; }
mark { background: linear-gradient(180deg, transparent 55%, var(--marker) 55%, var(--marker) 92%, transparent 92%); color: inherit; padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
button { font: inherit; }

.zb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zb-skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--sheet); padding: .6rem 1rem; border-radius: 4px; }
.zb-skip:focus { top: 1rem; }
.zb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zb-icon { width: 1.15em; height: 1.15em; flex: none; }

.zb-shell { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 700px) { .zb-shell { padding-inline: 28px; } }
.zb-narrow { max-width: 880px; }

.zb-hand-kicker { display: inline-block; margin: 0 0 .35rem; font-family: var(--font-hand); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--accent); transform: rotate(-2deg); transform-origin: left center; }

/* ---------------------------------------------------------------- buttons */
.zb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 46px; padding: .7em 1.2em; border-radius: 6px;
	font-weight: 700; font-size: 1rem; line-height: 1.1; text-decoration: none; cursor: pointer;
	transition: transform .15s, box-shadow .15s, background .2s, color .2s, border-color .2s;
}
.zb-btn-ink { background: var(--accent); color: var(--on-accent); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.zb-btn-ink:hover { color: var(--on-accent); background: var(--accent-deep); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.zb-btn-ink:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.zb-btn-pencil { background: var(--sheet); color: var(--ink); border: 1.5px solid var(--ink-soft); }
.zb-btn-pencil:hover { color: var(--accent); border-color: var(--accent); }
.zb-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: none; }
.zb-arrow .zb-icon { transition: transform .2s; }
.zb-arrow:hover .zb-icon { transform: translateX(3px); }

/* ---------------------------------------------------------------- header */
.zb-top { position: relative; z-index: 20; background: var(--sheet); border-bottom: 3px double var(--ink); }
.zb-top::before { content: ""; display: block; height: 7px; background: radial-gradient(circle at 12px 3.5px, var(--paper-deep) 2.2px, transparent 2.6px) 0 0 / 24px 7px repeat-x, var(--cover); }
.zb-top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; }
.zb-logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; min-width: 0; }
.zb-logo:hover { color: var(--ink); }
.zb-logo-mark { display: inline-flex; width: 46px; height: 46px; flex: none; }
.zb-logo-mark svg { width: 100%; height: 100%; }
.zb-logo-words { display: grid; min-width: 0; }
.zb-logo-name { font-family: var(--font-display); font-weight: 760; font-size: 1.4rem; line-height: 1.05; letter-spacing: -.01em; }
.zb-logo-sub { display: none; font-family: var(--font-hand); font-size: 1.12rem; line-height: 1.15; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
@media (min-width: 560px) { .zb-logo-sub { display: block; } }
.zb-burger { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem .85rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--sheet); color: var(--ink); cursor: pointer; font-weight: 700; }
.zb-tabs { display: none; }
.zb-tabs.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--sheet); border-bottom: 3px double var(--ink); padding: .5rem 16px 1.25rem; box-shadow: var(--shadow); }
.zb-tab-list { list-style: none; margin: 0; padding: 0; }
.zb-tab-list a { display: block; padding: .8rem .25rem; color: var(--ink); text-decoration: none; font-weight: 650; border-bottom: 1px dashed var(--line-strong); }
.zb-tab-list a[aria-current="page"], .zb-tab-list .current-menu-item > a { color: var(--accent); }
.zb-find { display: flex; margin-top: 1rem; border-bottom: 2px solid var(--ink); }
.zb-find input { flex: 1; min-width: 0; border: 0; padding: .6rem .2rem; font: inherit; background: transparent; color: var(--ink); }
.zb-find input:focus { outline: none; }
.zb-find button { border: 0; background: transparent; padding: 0 .5rem; color: var(--ink); cursor: pointer; }
@media (min-width: 1060px) {
	.zb-burger { display: none; }
	.zb-tabs, .zb-tabs.is-open { display: flex; align-items: center; gap: 1.1rem; position: static; padding: 0; background: none; border: 0; box-shadow: none; }
	.zb-tab-list { display: flex; align-self: stretch; gap: .1rem; }
	.zb-tab-list li { display: flex; }
	.zb-tab-list a { position: relative; display: flex; align-items: center; border: 0; padding: .4rem .65rem; font-size: .96rem; white-space: nowrap; }
	.zb-tab-list a::before { content: ""; position: absolute; left: .55rem; right: .55rem; top: -4px; height: 5px; border-radius: 0 0 3px 3px; background: var(--tab-1); transform: scaleY(0); transform-origin: top; transition: transform .2s; }
	.zb-tab-list li:nth-child(4n+2) a::before { background: var(--tab-2); }
	.zb-tab-list li:nth-child(4n+3) a::before { background: var(--tab-3); }
	.zb-tab-list li:nth-child(4n) a::before { background: var(--tab-4); }
	.zb-tab-list a:hover::before, .zb-tab-list a[aria-current="page"]::before { transform: scaleY(1); }
	.zb-find { margin: 0; width: 200px; }
	.zb-find input { font-size: .95rem; padding: .4rem .2rem; }
}

/* ---------------------------------------------------------------- shared section heads */
.zb-head { text-align: center; max-width: 760px; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); }
.zb-head .zb-hand-kicker { transform-origin: center; }
.zb-head-left { text-align: left; margin-left: 0; }
.zb-head-left .zb-hand-kicker { transform-origin: left center; }
.zb-head-lead { color: var(--ink-soft); font-size: 1.1rem; margin: 0; }
.zb-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; max-width: none; text-align: left; }
.zb-head-row > div { max-width: 680px; }

/* ---------------------------------------------------------------- cover (home hero) */
.zb-cover { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); overflow-x: clip; }
.zb-cover-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 940px) { .zb-cover-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; } }
.zb-notes { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; margin: 0 0 .9rem; padding: 0; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.2; color: var(--ink-soft); }
.zb-notes li::before { content: "✓"; margin-right: .35rem; color: var(--dill); font-weight: 700; }
.zb-cover-title { margin-bottom: .45em; }
.zb-cover-lead { position: relative; max-width: 44ch; margin: 0; padding: 1.15rem 1.3rem; background: var(--sheet); border: 1px solid var(--line); font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); color: var(--ink-soft); box-shadow: var(--shadow-sm); transform: rotate(-.6deg); background-image: repeating-linear-gradient(180deg, transparent 0 1.95em, var(--rule) 1.95em calc(1.95em + 1px)); background-position: 0 .55em; }
.zb-cover-lead::before { content: ""; position: absolute; left: 50%; top: -11px; width: 92px; height: 22px; margin-left: -46px; background: var(--tape); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.zb-cover-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.zb-tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0 0; max-width: 520px; }
.zb-tally > div { padding: .1rem .9rem; border-left: 2px dashed var(--line-strong); }
.zb-tally > div:first-child { border-left: 0; padding-left: 0; }
.zb-tally dt { font-family: var(--font-hand); font-weight: 700; font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.9rem); line-height: 1; color: var(--accent); }
.zb-tally dd { margin: .2rem 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }

.zb-cover-art { position: relative; min-height: 320px; }
.zb-snaps { position: relative; height: 100%; min-height: inherit; }
.zb-snap { position: absolute; width: 62%; padding: 10px 10px 2.4rem; background: var(--sheet); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .25s; }
.zb-snap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }
.zb-snap::before { content: ""; position: absolute; left: 50%; top: -12px; width: 86px; height: 24px; margin-left: -43px; background: var(--tape); transform: rotate(4deg); }
.zb-snap-cap { position: absolute; left: 12px; right: 12px; bottom: .45rem; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-snap-1 { left: 4%; top: 6%; transform: rotate(-4deg); z-index: 3; }
.zb-snap-2 { right: 2%; top: 0; transform: rotate(5deg); z-index: 2; }
.zb-snap-3 { left: 26%; bottom: 0; transform: rotate(-1deg); z-index: 1; }
.zb-snaps-1 .zb-snap-1 { left: 12%; width: 76%; }
.zb-snap:hover { transform: rotate(0) translateY(-4px); z-index: 4; }
@media (min-width: 940px) { .zb-cover-art { min-height: 460px; } }
@media (max-width: 599px) { .zb-cover-art { min-height: 260px; } .zb-snap { width: 66%; } .zb-snap-3 { display: none; } }

.zb-book { display: grid; place-items: center; min-height: inherit; }
.zb-book-label { position: relative; display: grid; justify-items: center; align-content: center; gap: .6rem; width: min(78%, 340px); aspect-ratio: 3 / 4; padding: 1.5rem 1.2rem 1.5rem 2.6rem; border-radius: 6px 14px 14px 6px; color: var(--ink); text-align: center; transform: rotate(3deg); box-shadow: var(--shadow), inset 10px 0 0 rgba(0,0,0,.12);
	background-color: var(--cover);
	background-image: radial-gradient(circle at 15px 50%, var(--paper) 5px, transparent 5.5px), linear-gradient(var(--cover-line) 1px, transparent 1px), linear-gradient(90deg, var(--cover-line) 1px, transparent 1px);
	background-size: 30px 28px, 16px 16px, 16px 16px;
	background-repeat: repeat-y, repeat, repeat; }
.zb-book-label > * { position: relative; }
.zb-book-label::after { content: ""; position: absolute; left: 22%; right: 10%; top: 28%; bottom: 28%; background: var(--sheet); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--accent); }
.zb-book-mark { width: 72px; z-index: 1; }
.zb-book-name { font-family: var(--font-display); font-weight: 780; font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); line-height: 1.1; z-index: 1; padding-inline: 18%; }
.zb-book-line { width: 46%; height: 1px; background: var(--rule-strong); z-index: 1; margin-left: 10%; }

/* ---------------------------------------------------------------- table of contents (categories) */
.zb-index { padding-block: clamp(1.5rem, 4vw, 3rem); }
.zb-index-page {
	position: relative; padding: clamp(1.75rem, 4vw, 3rem) clamp(1.1rem, 4vw, 3rem) clamp(1.75rem, 4vw, 3rem) clamp(2.6rem, 6vw, 5.5rem);
	background: linear-gradient(90deg, transparent clamp(1.9rem, 4.6vw, 4.2rem), var(--margin) clamp(1.9rem, 4.6vw, 4.2rem), var(--margin) calc(clamp(1.9rem, 4.6vw, 4.2rem) + 2px), transparent calc(clamp(1.9rem, 4.6vw, 4.2rem) + 2px)), var(--sheet);
	border: 1px solid var(--line); box-shadow: var(--shadow);
}
.zb-index-page .zb-head { text-align: left; margin-left: 0; }
.zb-index-page .zb-head .zb-hand-kicker { transform-origin: left center; }
.zb-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem 3rem; }
@media (min-width: 920px) { .zb-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zb-toc-row { padding: .55rem 0 .7rem; border-bottom: 1px solid var(--rule); }
.zb-toc-line { display: flex; align-items: baseline; gap: .6rem; color: var(--ink); text-decoration: none; }
a.zb-toc-line:hover .zb-toc-name { color: var(--accent); }
.zb-toc-n { font-family: var(--font-hand); font-weight: 700; font-size: 1.45rem; color: var(--accent); min-width: 2ch; }
.zb-toc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.2; }
.zb-toc-dots { flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--line-strong); transform: translateY(-.3em); }
.zb-toc-count { font-size: .86rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.zb-toc-desc { margin: .25rem 0 0 calc(2ch + .6rem); font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }

/* ---------------------------------------------------------------- index cards (recipes) */
.zb-fresh { padding-block: clamp(3rem, 7vw, 5rem); }
.zb-entries { display: grid; gap: 2rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.zb-entry { position: relative; display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); padding: 10px; transition: transform .2s, box-shadow .2s; }
.zb-entry:nth-child(3n+1) { transform: rotate(-.7deg); }
.zb-entry:nth-child(3n+2) { transform: rotate(.5deg); }
.zb-entry:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow); }
.zb-entry::before { content: ""; position: absolute; z-index: 2; right: 18px; top: -10px; width: 70px; height: 20px; background: var(--tape); transform: rotate(6deg); }
.zb-entry-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--paper-deep); }
.zb-entry-photo img { width: 100%; height: 100%; object-fit: cover; }
.zb-entry-blank { position: absolute; inset: 0; display: grid; place-items: center; background-color: var(--paper-deep); background-image: linear-gradient(var(--grid-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px); background-size: 18px 18px; }
.zb-entry-blank svg { width: 32%; }
.zb-entry-body { display: flex; flex-direction: column; gap: .35rem; padding: .95rem .45rem .35rem; flex: 1; }
.zb-entry-kicker { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dill); }
.zb-entry-title { font-size: 1.3rem; margin: 0; }
.zb-entry-title a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--marker), var(--marker)); background-size: 0 .35em; background-position: 0 88%; background-repeat: no-repeat; transition: background-size .25s; }
.zb-entry-title a:hover { background-size: 100% .35em; }
.zb-entry-meta { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin: auto 0 0; padding: .45rem 0 0; border-top: 1px dashed var(--line-strong); font-size: .88rem; color: var(--muted); }
.zb-entry-meta li { display: inline-flex; align-items: center; gap: .35rem; }
.zb-level { font-family: var(--font-hand); font-size: 1.2rem; font-weight: 700; padding: 0 .5rem; border: 1.5px solid currentColor; border-radius: 48% 52% 46% 54% / 60% 50% 55% 45%; line-height: 1.35; }
.zb-level-easy { color: var(--easy-ink); }
.zb-level-medium { color: var(--medium-ink); }
.zb-level-hard { color: var(--hard-ink); }
.zb-entries-ad { grid-column: 1 / -1; }
.zb-entries-ad:empty { display: none; }

.zb-blank-page { text-align: center; max-width: 700px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.25rem) 1.5rem; background: var(--sheet); border: 2px dashed var(--line-strong); }
.zb-blank-mark { display: inline-block; width: 80px; margin-bottom: .75rem; }
.zb-blank-page p { color: var(--ink-soft); max-width: 52ch; margin-inline: auto; }

/* ---------------------------------------------------------------- notes in the margin (benefits) */
.zb-margin { padding-block: clamp(3rem, 7vw, 5rem); background: linear-gradient(180deg, transparent, var(--paper-deep) 18%, var(--paper-deep) 82%, transparent); }
.zb-stickies { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
@media (min-width: 640px) { .zb-stickies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .zb-stickies { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zb-sticky { position: relative; padding: 1.5rem 1.4rem 1.4rem; background: var(--sticky-1); box-shadow: 0 14px 22px -16px rgba(30, 25, 10, .55); }
.zb-sticky::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: linear-gradient(135deg, rgba(0,0,0,.08) 50%, var(--paper-deep) 50%); }
.zb-sticky-2 { background: var(--sticky-2); }
.zb-sticky-3 { background: var(--sticky-3); }
.zb-sticky:nth-child(odd) { transform: rotate(-1deg); }
.zb-sticky:nth-child(even) { transform: rotate(.8deg); }
.zb-sticky-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: .5rem; border: 2px solid var(--ink); border-radius: 50% 46% 52% 48%; color: var(--ink); }
.zb-sticky-icon .zb-icon { width: 24px; height: 24px; }
.zb-sticky h3 { font-family: var(--font-hand); font-weight: 700; font-size: 1.75rem; line-height: 1.1; margin-bottom: .35rem; }
.zb-sticky p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ---------------------------------------------------------------- history */
.zb-past { padding-block: clamp(3rem, 7vw, 5rem); }
.zb-past-in { max-width: 1040px; }
.zb-ruled { max-width: 780px; padding: 1.4rem 1.4rem 1rem 3.2rem; background: linear-gradient(90deg, transparent 2.2rem, var(--margin) 2.2rem, var(--margin) calc(2.2rem + 2px), transparent calc(2.2rem + 2px)), var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.zb-leaves { list-style: none; margin: 2.5rem 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 900px) {
	.zb-leaves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 2.4rem; }
	.zb-leaf:nth-child(even) { margin-top: 2.5rem; }
	.zb-leaf-ad { grid-column: 1 / -1; }
}
.zb-leaf { position: relative; padding: 2rem 1.4rem 1.2rem; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.zb-leaf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: linear-gradient(135deg, var(--sheet) 33%, transparent 33%) 0 0 / 14px 10px repeat-x, linear-gradient(225deg, var(--sheet) 33%, transparent 33%) 0 0 / 14px 10px repeat-x; }
.zb-leaf-period { position: absolute; left: 1rem; top: -1rem; margin: 0; padding: .1rem .7rem; background: var(--tab-2); color: var(--ink); font-family: var(--font-hand); font-weight: 700; font-size: 1.3rem; line-height: 1.4; transform: rotate(-2deg); box-shadow: var(--shadow-sm); }
.zb-leaf:nth-child(3n+2) .zb-leaf-period { background: var(--tab-3); }
.zb-leaf:nth-child(3n) .zb-leaf-period { background: var(--sticky-2); }
.zb-leaf h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
.zb-leaf .zb-prose { font-size: 1rem; color: var(--ink-soft); }
.zb-leaf-ad:empty { display: none; }

/* ---------------------------------------------------------------- regions */
.zb-lands { padding-block: clamp(3rem, 7vw, 5rem); background: var(--sheet); border-block: 1px solid var(--line); }
.zb-land-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem 2.2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.zb-land { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.zb-land-n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 2px solid var(--accent); border-radius: 52% 48% 50% 46% / 46% 54% 48% 52%; font-family: var(--font-hand); font-weight: 700; font-size: 1.45rem; color: var(--accent); }
.zb-land-name { font-size: 1.25rem; margin: .25rem 0 .3rem; }
.zb-land-name a { color: var(--ink); text-decoration: none; }
.zb-land-name a:hover { color: var(--accent); }
.zb-land p { margin: 0; font-size: .96rem; color: var(--ink-soft); line-height: 1.55; }
.zb-land .zb-land-count { margin-top: .35rem; font-weight: 800; font-size: .82rem; color: var(--dill); }

/* ---------------------------------------------------------------- questions */
.zb-asks { padding-block: clamp(3rem, 7vw, 5rem); }
.zb-asks-in { display: grid; gap: 1.5rem 3rem; }
@media (min-width: 1000px) { .zb-asks-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: start; } .zb-asks-in > .zb-head { position: sticky; top: 1.5rem; } }
.zb-qa { display: grid; gap: .7rem; }
.zb-qa-item { background: var(--sheet); border: 1px solid var(--line); border-left: 4px solid var(--margin); box-shadow: var(--shadow-sm); }
.zb-qa-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }
.zb-qa-item summary::-webkit-details-marker { display: none; }
.zb-qa-q { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.35; }
.zb-qa-item summary .zb-icon { color: var(--accent); transition: transform .25s; }
.zb-qa-item[open] summary .zb-icon { transform: rotate(45deg); }
.zb-qa-a { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); }
.zb-qa-a > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- about + rules */
.zb-us { padding-block: clamp(3rem, 7vw, 5rem); }
.zb-us-grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .zb-us-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; } }
.zb-us-copy .zb-prose { color: var(--ink-soft); }
.zb-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.zb-rule { position: relative; padding: 1.3rem 1.3rem 1.2rem; padding-right: 7.5rem; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.zb-rule-stamp { position: absolute; right: 1rem; top: 1rem; max-width: 6rem; padding: .3rem .45rem; border: 3px double var(--accent); border-radius: 4px; color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center; line-height: 1.2; transform: rotate(-8deg); opacity: .9; }
.zb-rule:nth-child(2) .zb-rule-stamp { color: var(--dill); border-color: var(--dill); transform: rotate(6deg); }
.zb-rule:nth-child(3) .zb-rule-stamp { color: var(--cover); border-color: var(--cover); transform: rotate(-4deg); }
.zb-rule h3 { font-size: 1.2rem; margin-bottom: .3rem; }
.zb-rule p { margin: 0; font-size: .96rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- postcard (newsletter) */
.zb-post { padding-block: clamp(3rem, 7vw, 5rem); }
.zb-postcard { position: relative; display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--sheet); border: 12px solid transparent; border-image: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--sheet) 14px 22px, var(--cover) 22px 36px, var(--sheet) 36px 44px) 12; box-shadow: var(--shadow); }
@media (min-width: 900px) { .zb-postcard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; } .zb-postcard-form { border-left: 1.5px solid var(--line-strong); padding-left: 3rem; } }
.zb-postcard-msg h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
.zb-postcard-msg p { color: var(--ink-soft); }
.zb-postcard-form { position: relative; }
.zb-stamp { position: absolute; right: 0; top: -.4rem; width: 70px; height: 84px; padding: 10px; background: var(--paper); outline: 2px dashed var(--line-strong); outline-offset: -5px; display: grid; place-items: center; transform: rotate(4deg); }
.zb-postcard-form > .zb-line-field:first-of-type, .zb-postcard-form > .zb-note { margin-right: 88px; }
.zb-stamp svg { width: 100%; }
.zb-line-field { margin: 0 0 1rem; }
.zb-line-field label { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zb-line-field input, .zb-line-field select { width: 100%; min-height: 46px; padding: .5rem .1rem; border: 0; border-bottom: 2px solid var(--ink-soft); border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; }
.zb-line-field input:focus, .zb-line-field select:focus { outline: none; border-bottom-color: var(--accent); background: var(--focus-soft); }
.zb-tick { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); margin: .4rem 0 1.2rem; }
.zb-tick input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.zb-note { padding: .7rem 1rem; background: var(--paper-deep); font-weight: 600; border-left: 4px solid var(--honey); }
.zb-note-ok { background: var(--easy); color: var(--easy-ink); border-color: var(--dill); }
.zb-note-err { background: var(--hard); color: var(--hard-ink); border-color: var(--accent); }

/* ---------------------------------------------------------------- footer (back cover) */
.zb-back { background-color: var(--cover); background-image: linear-gradient(var(--cover-line) 1px, transparent 1px), linear-gradient(90deg, var(--cover-line) 1px, transparent 1px); background-size: 24px 24px; color: var(--cover-ink); }
.zb-back-band { height: 12px; background: var(--accent); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.zb-back a { color: var(--cover-ink); }
.zb-back a:hover { color: var(--marker); }
.zb-back-grid { display: grid; gap: 2rem; padding-block: 3rem 2rem; }
@media (min-width: 720px) { .zb-back-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .zb-back-grid { grid-template-columns: 1.5fr 1fr 1fr .8fr; gap: 3rem; } }
.zb-logo-back { color: var(--cover-ink); margin-bottom: 1rem; }
.zb-logo-back:hover { color: var(--cover-ink); }
.zb-back-about p { opacity: .85; max-width: 42ch; font-size: .96rem; }
.zb-back-mail { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; }
.zb-back-h { font-family: var(--font-hand); font-weight: 700; font-size: 1.5rem; color: var(--marker); margin-bottom: .6rem; }
.zb-back ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .96rem; }
.zb-back ul a { text-decoration: none; }
.zb-back ul a:hover { text-decoration: underline; }
.zb-back-base { border-top: 1px solid var(--cover-line-strong); padding-block: 1.25rem 2rem; font-size: .85rem; opacity: .75; }
.zb-back-base p { margin: 0; }

/* ---------------------------------------------------------------- breadcrumbs */
.zb-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.25rem; padding: 0; font-size: .86rem; color: var(--muted); }
.zb-crumbs li + li::before { content: "›"; margin-right: .35rem; opacity: .7; }
.zb-crumbs a { color: var(--muted); }
.zb-crumbs [aria-current] { color: var(--ink-soft); max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- recipe: the open page */
.zb-open { padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); overflow-x: clip; }
.zb-open-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 940px) { .zb-open-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 3.25rem; } }
.zb-labels { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; }
.zb-labels a { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .75rem; background: var(--sheet); border: 1.5px solid var(--ink-soft); border-radius: 4px; color: var(--ink); font-size: .85rem; font-weight: 700; text-decoration: none; }
.zb-labels a:hover { border-color: var(--accent); color: var(--accent); }
.zb-open-title { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.7rem); margin-bottom: .35em; }
.zb-open-lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--ink-soft); max-width: 46ch; }
.zb-dateline { font-family: var(--font-hand); font-size: 1.25rem; color: var(--muted); margin: -.25rem 0 0; }
.zb-do { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
@media (max-width: 599px) {
	.zb-do { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
	.zb-do .zb-btn-ink { grid-column: 1 / -1; }
	.zb-do .zb-btn-pencil { flex-direction: column; gap: .3rem; padding: .6rem .3rem; font-size: .8rem; text-align: center; min-height: 64px; }
}
.zb-polaroid { position: relative; margin: 0; padding: 12px 12px 14px; background: var(--sheet); box-shadow: var(--shadow); transform: rotate(1.3deg); }
.zb-polaroid::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -13px; width: 110px; height: 26px; margin-left: -55px; background: var(--tape); transform: rotate(-3deg); }
.zb-polaroid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-deep); }
.zb-credit { margin-top: .5rem; font-size: .75rem; color: var(--muted); line-height: 1.4; }
.zb-credit a { color: var(--muted); }
.zb-photo-wait { display: grid; place-items: center; align-content: center; gap: .75rem; aspect-ratio: 3 / 2; padding: 1.5rem; text-align: center; color: var(--muted); font-family: var(--font-hand); font-size: 1.4rem; background-color: var(--paper-deep); background-image: linear-gradient(var(--grid-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px); background-size: 20px 20px; }
.zb-photo-wait svg { width: 90px; }
.zb-tally-wide { display: flex; flex-wrap: wrap; gap: .75rem 0; max-width: none; margin-top: 2rem; }
.zb-tally-wide > div { min-width: 7.5rem; }
.zb-tally-wide dt { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); white-space: nowrap; }

/* three index cards */
.zb-facts { padding-block: .5rem clamp(1rem, 3vw, 1.5rem); }
.zb-facts-grid { display: grid; gap: 1rem; }
@media (min-width: 780px) { .zb-facts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
.zb-fact { padding: 1rem 1.2rem 1.1rem; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background-image: linear-gradient(180deg, transparent 2.9rem, var(--margin) 2.9rem, var(--margin) calc(2.9rem + 2px), transparent calc(2.9rem + 2px)); }
.zb-fact-h { display: flex; align-items: center; gap: .45rem; height: 2rem; margin: 0 0 .85rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.zb-fact-h .zb-icon { color: var(--accent); }
.zb-fact-v { font-family: var(--font-display); font-weight: 720; font-size: 1.45rem; line-height: 1.15; margin: 0 0 .3rem; }
.zb-fact-v a { color: var(--ink); text-decoration: none; }
.zb-fact p:last-child { margin: 0; font-size: .93rem; color: var(--ink-soft); }

/* the story spread */
.zb-spread { display: grid; gap: 2.5rem; padding-block: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 1040px) { .zb-spread { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } }
.zb-story { min-width: 0; padding: 1.6rem 1.2rem 1.4rem 2.6rem; background: linear-gradient(90deg, transparent 1.6rem, var(--margin) 1.6rem, var(--margin) calc(1.6rem + 2px), transparent calc(1.6rem + 2px)), var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
@media (min-width: 700px) { .zb-story { padding: 2.4rem 2.6rem 2rem 5rem; background: linear-gradient(90deg, transparent 3.4rem, var(--margin) 3.4rem, var(--margin) calc(3.4rem + 2px), transparent calc(3.4rem + 2px)), var(--sheet); } }
.zb-story-kicker { margin-bottom: .8rem; }
.zb-story > p:nth-of-type(2) { font-size: 1.18rem; color: var(--ink); }

/* the flat prose column — see file header */
.zb-prose { font-size: 1.07rem; }
.zb-prose > h2, .zb-prose .zb-part-h { margin-top: 1.9em; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
.zb-prose > :first-child { margin-top: 0; }
.zb-prose h3 { margin-top: 1.5em; }
.zb-prose ul, .zb-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.zb-prose li { margin-bottom: .45em; }
.zb-prose li::marker { color: var(--accent); }
.zb-prose blockquote { margin: 1.5em 0; padding: .9em 1.2em; border-left: 4px solid var(--honey); background: var(--paper-deep); }
.zb-prose img { border: 8px solid var(--sheet); box-shadow: var(--shadow-sm); }
.zb-prose figure { margin: 1.5em 0; }
.zb-prose figcaption { font-family: var(--font-hand); font-size: 1.15rem; color: var(--muted); margin-top: .35em; }
.zb-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.zb-prose th, .zb-prose td { border: 1px solid var(--line-strong); padding: .5em .7em; text-align: left; }
.zb-story [data-part="mistakes"] + ul li strong, .zb-story #zb-mistakes + ul li strong { color: var(--accent); }

.zb-side { display: grid; gap: 1.6rem; align-content: start; }
.zb-side-note { position: relative; padding: 1.4rem 1.3rem; background: var(--sticky-1); text-align: center; box-shadow: 0 14px 22px -16px rgba(30, 25, 10, .55); transform: rotate(-1deg); }
.zb-side-mark { display: inline-block; width: 58px; margin-bottom: .4rem; }
.zb-side-note h2 { font-family: var(--font-hand); font-size: 1.75rem; font-weight: 700; }
.zb-side-note p { color: var(--ink-soft); font-size: .95rem; }
.zb-side-next { padding: 1.2rem; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.zb-side-next h2 { font-size: 1.3rem; }
.zb-side-next ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.zb-side-next a { display: grid; grid-template-columns: 64px 1fr; gap: .8rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.3; font-size: .97rem; }
.zb-side-next a:hover { color: var(--accent); }
.zb-side-next img, .zb-side-blank { width: 64px; height: 64px; object-fit: cover; border: 3px solid var(--sheet); box-shadow: var(--shadow-sm); }
.zb-side-blank { display: grid; place-items: center; background: var(--paper-deep); }
.zb-side-blank svg { width: 60%; }
@media (min-width: 1040px) { .zb-side-sticky { position: sticky; top: 1.5rem; } }

/* the recipe index card */
.zb-desk { padding-block: clamp(2rem, 5vw, 3.5rem); background: linear-gradient(180deg, transparent, var(--paper-deep) 6%, var(--paper-deep) 94%, transparent); }
.zb-desk-grid { display: grid; gap: 1.75rem; }
@media (min-width: 1040px) { .zb-desk-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 2.5rem; } }
@media (min-width: 1040px) { .zb-desk-grid:not(:has(> .zb-gloss)) { grid-template-columns: minmax(0, 880px); justify-content: center; } }
.zb-indexcard { position: relative; min-width: 0; padding: clamp(1.25rem, 4vw, 2.6rem); background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow); }
.zb-indexcard::before, .zb-indexcard::after { content: ""; position: absolute; top: -12px; width: 100px; height: 26px; background: var(--tape); }
.zb-indexcard::before { left: 22px; transform: rotate(-5deg); }
.zb-indexcard::after { right: 22px; transform: rotate(4deg); }
.zb-indexcard-head { padding-bottom: 1.25rem; margin-bottom: 1.6rem; border-bottom: 4px double var(--margin); }
.zb-indexcard-head h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.zb-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .8rem 1rem; margin: 1.1rem 0; }
.zb-specs div { padding-left: .7rem; border-left: 2px solid var(--rule-strong); }
.zb-specs dt { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zb-specs dd { margin: .1rem 0 0; font-weight: 700; line-height: 1.3; }
.zb-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.zb-scale { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .35rem .25rem .9rem; border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--paper); }
.zb-scale-label { font-weight: 700; font-size: .9rem; margin-right: .2rem; }
.zb-scale button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 4px; border: 1.5px solid var(--ink-soft); background: var(--sheet); color: var(--ink); cursor: pointer; }
.zb-scale button:hover { border-color: var(--accent); color: var(--accent); }
.zb-scale output { min-width: 2ch; text-align: center; font-family: var(--font-hand); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--accent); }
.zb-tool { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem .95rem; border-radius: 6px; border: 1.5px solid var(--ink-soft); background: var(--sheet); color: var(--ink); font-weight: 700; font-size: .92rem; cursor: pointer; }
.zb-tool[aria-pressed="true"] { background: var(--dill); color: #fff; border-color: var(--dill); }
.zb-tool:hover { border-color: var(--accent); }

.zb-indexcard-body > .zb-ing, .zb-indexcard-body > .zb-steps { margin-bottom: 2rem; }
.zb-indexcard-body .zb-part-h:first-child { margin-top: 0; }
.zb-counter { margin: -.3rem 0 1rem; font-family: var(--font-hand); font-size: 1.3rem; color: var(--muted); }
.zb-ing ul { list-style: none; padding: 0; }
.zb-ing li { position: relative; padding: .55rem .5rem .55rem 2.4rem; margin: 0; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.zb-ing li:hover { background: var(--paper); }
.zb-ing li::before { content: ""; position: absolute; left: .45rem; top: .78rem; width: 19px; height: 19px; border: 2px solid var(--ink-soft); border-radius: 3px 5px 2px 4px; transform: rotate(-3deg); background: var(--sheet); }
.zb-ing li.is-done { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.zb-ing li.is-done::after { content: "✓"; position: absolute; left: .55rem; top: .2rem; font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--accent); }
.zb-ing h3, .zb-steps h3 { font-family: var(--font-hand); font-size: 1.55rem; font-weight: 700; margin: 1.3rem 0 .4rem; color: var(--dill); }
.qty { font-weight: 800; color: var(--ink); white-space: nowrap; }
.zb-ing li.is-done .qty { color: var(--muted); }

.zb-steps { counter-reset: zb-step; }
.zb-steps ol { list-style: none; padding: 0; }
.zb-steps li { position: relative; counter-increment: zb-step; padding: .85rem .85rem .85rem 3.5rem; margin: 0 0 .5rem; border-bottom: 1px dashed var(--line-strong); cursor: pointer; transition: opacity .15s, background .15s; }
.zb-steps li:hover { background: var(--paper); }
.zb-steps li::before { content: counter(zb-step); position: absolute; left: .5rem; top: .6rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 52% 48% 55% 45% / 45% 55% 48% 52%; font-family: var(--font-hand); font-weight: 700; font-size: 1.35rem; color: var(--accent); background: var(--sheet); }
.zb-steps li.is-done { opacity: .55; }
.zb-steps li.is-done::before { content: "✓"; color: var(--dill); border-color: var(--dill); }
.zb-steps li:target { outline: 3px solid var(--focus); }
.zb-pencil-bar { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; padding: .85rem 1rem; margin-bottom: 1.1rem; background: var(--paper); border: 1.5px dashed var(--line-strong); }
.zb-pencil-title { margin: 0; font-weight: 800; font-size: .95rem; }
.zb-pencil-title > span { font-weight: 600; color: var(--muted); margin-left: .35rem; }
.zb-pencil-line { grid-column: 1 / -1; height: 9px; background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 14px); }
.zb-pencil-line span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 0 6px 6px 0; transition: width .3s; }
.zb-pencil-reset { grid-row: 1; grid-column: 2; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: .85rem; cursor: pointer; }
.zb-pencil-reset:hover { color: var(--accent); }
.zb-printed { display: none; }

.zb-gloss { align-self: start; }
.zb-gloss-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--sheet); color: var(--ink); font-weight: 800; cursor: pointer; }
@media (min-width: 1040px) { .zb-gloss { position: sticky; top: 1.5rem; } .zb-gloss-btn { display: none; } }
.zb-gloss-body { margin-top: .75rem; padding: 1.4rem 1.3rem; background: var(--sticky-1); box-shadow: 0 14px 22px -16px rgba(30, 25, 10, .55); }
@media (min-width: 1040px) { .zb-gloss-body { margin-top: 0; transform: rotate(.8deg); } }
.zb-gloss.is-collapsed .zb-gloss-body { display: none; }
.zb-gloss-body h2 { font-family: var(--font-hand); font-weight: 700; font-size: 1.8rem; }
.zb-gloss-list { margin: 0; display: grid; gap: .8rem; }
.zb-gloss-list dt { font-family: var(--font-display); font-weight: 720; }
.zb-gloss-list dd { margin: .1rem 0 0; font-size: .93rem; line-height: 1.45; color: var(--ink-soft); }

.zb-asks-recipe { padding-top: clamp(2.5rem, 6vw, 4rem); }

/* ---------------------------------------------------------------- listings */
.zb-shelf-head { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2rem); }
.zb-shelf-title { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); margin-bottom: .3em; }
.zb-shelf-lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 60ch; }
.zb-shelf-search { display: flex; gap: .7rem; max-width: 640px; margin: 1.5rem 0 0; }
.zb-shelf-search input { flex: 1; min-width: 0; min-height: 48px; padding: .6rem .9rem; border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--sheet); color: var(--ink); font: inherit; }
.zb-shelf-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-soft); }
.zb-filters { margin-top: 1.6rem; }
.zb-filter-h { margin: 1rem 0 .45rem; font-family: var(--font-hand); font-weight: 700; font-size: 1.35rem; color: var(--dill); }
.zb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.zb-chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .85rem; border: 1.5px solid var(--ink-soft); border-radius: 4px; background: var(--sheet); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; }
.zb-chips a span { font-weight: 600; color: var(--muted); font-size: .8rem; }
.zb-chips a:hover, .zb-chips a[aria-current] { background: var(--accent); border-color: var(--ink); color: var(--on-accent); box-shadow: 2px 2px 0 var(--ink); }
.zb-chips a[aria-current] span, .zb-chips a:hover span { color: var(--on-accent); opacity: .85; }
.zb-shelf { padding-block: 1rem clamp(3rem, 7vw, 5rem); }
.zb-pages { margin-top: 3rem; }
.zb-pages .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.zb-pages .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .9rem; border-radius: 4px; border: 1.5px solid var(--ink-soft); background: var(--sheet); color: var(--ink); text-decoration: none; font-weight: 700; }
.zb-pages .page-numbers.current, .zb-pages a.page-numbers:hover { background: var(--accent); border-color: var(--ink); color: var(--on-accent); }
.zb-pages .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- pages */
.zb-shelf-head-page { padding-bottom: 1rem; }
.zb-sheet-wrap { padding-bottom: clamp(3rem, 7vw, 5rem); }
.zb-sheet { padding: 1.6rem 1.2rem 1.4rem 2.6rem; background: linear-gradient(90deg, transparent 1.6rem, var(--margin) 1.6rem, var(--margin) calc(1.6rem + 2px), transparent calc(1.6rem + 2px)), var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
@media (min-width: 700px) { .zb-sheet { padding: 2.6rem 3rem 2.2rem 5rem; background: linear-gradient(90deg, transparent 3.4rem, var(--margin) 3.4rem, var(--margin) calc(3.4rem + 2px), transparent calc(3.4rem + 2px)), var(--sheet); } }
.zb-sheet h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); margin-top: 1.8em; }
.zb-sheet a { word-break: break-word; }

/* ---------------------------------------------------------------- 404 */
.zb-torn { padding-block: clamp(3rem, 8vw, 6rem); }
.zb-torn-page { position: relative; padding: 2.5rem 1.5rem 2rem; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: center; }
.zb-torn-page::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 11px; background: linear-gradient(-45deg, var(--sheet) 33%, transparent 33%) 0 0 / 16px 11px repeat-x, linear-gradient(45deg, var(--sheet) 33%, transparent 33%) 0 0 / 16px 11px repeat-x; }
.zb-torn-code { margin: 0; font-family: var(--font-hand); font-weight: 700; font-size: clamp(4rem, 3rem + 6vw, 7rem); line-height: 1; color: var(--accent); text-decoration: line-through; text-decoration-thickness: 4px; }
.zb-torn-page .zb-shelf-search { margin-inline: auto; margin-bottom: 1.5rem; }
.zb-torn-page .zb-shelf-lead { margin-inline: auto; }

/* ---------------------------------------------------------------- ads */
.zb-ad { margin: 2rem auto; min-height: 250px; text-align: center; clear: both; }
.zb-ad-label { display: block; margin-bottom: .35rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.zb-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
body > .zb-ad, .zb-main > .zb-ad { max-width: 1144px; padding-inline: 16px; }
.google-auto-placed { clear: both; margin-block: 1.75rem !important; }
.zb-side-sticky .zb-ad { margin-top: 0; min-height: 600px; }

/* ---------------------------------------------------------------- motion + print */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
	@page { margin: 14mm; }
	body { background: #fff; color: #000; font-size: 11.5pt; }
	.zb-top, .zb-back, .zb-open, .zb-facts, .zb-spread, .zb-asks-recipe, .zb-post, .zb-ad, .google-auto-placed, .zb-tools, .zb-pencil-bar, .zb-gloss-btn, .zb-skip, .zb-counter, ins.adsbygoogle { display: none !important; }
	.zb-desk { background: #fff; padding: 0; }
	.zb-desk-grid { display: block; padding: 0; }
	.zb-indexcard { box-shadow: none; border: 0; padding: 0; }
	.zb-indexcard::before, .zb-indexcard::after { display: none; }
	.zb-gloss, .zb-gloss.is-collapsed .zb-gloss-body { display: block !important; position: static; margin-top: 1rem; }
	.zb-gloss-body { box-shadow: none; border: 1px solid #ccc; background: #fff; transform: none; }
	.zb-steps li, .zb-ing li { break-inside: avoid; background: none; opacity: 1 !important; text-decoration: none !important; color: #000 !important; }
	.zb-printed { display: block; margin-top: 1.5rem; font-size: 9pt; color: #555; }
	a { color: #000; text-decoration: none; }
}