/* Blog pages. Builds on style.css (same tokens, header, hero, buttons, footer). */

/* -------- header additions -------- */
a.brand{text-decoration:none; color:var(--ink);}
.nav-link{color:var(--ink-soft); display:inline-flex; align-items:center; min-height:44px; padding:4px 2px;}
.nav-link:hover{color:var(--ink);}
.blog .blog-link{border-color:transparent; background:var(--sage-soft);}
.editor-link{color:inherit; text-decoration:none; opacity:.7;}
.editor-link:hover, .editor-link:focus-visible{opacity:1; text-decoration:underline;}

/* -------- intro hero -------- */
.blog-hero{min-height:0; padding:150px 0 90px;}
.blog-hero h1{font-size:clamp(2.2rem, 4.6vw, 3.6rem); line-height:1.2; margin-bottom:20px;}
.blog-hero .frame{aspect-ratio:4/4.4;}

/* -------- post list -------- */
.posts{padding:90px 0; background:var(--paper);}
.posts.related{background:var(--cream);}
.tag{
  display:inline-block; font-size:.78rem; letter-spacing:.08em; color:var(--sage); background:var(--sage-soft);
  padding:5px 12px; border-radius:999px; font-weight:600; margin-bottom:14px;
}
.post-meta{display:block; font-size:.88rem; color:var(--ink-soft);}
.cover-empty{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:3rem; color:var(--terracotta); opacity:.55;
  background:linear-gradient(135deg, var(--cream-soft), var(--sage-soft));
}
.feat{
  display:grid; grid-template-columns:1.1fr 0.9fr; background:var(--cream); border:1px solid var(--line);
  border-radius:22px; overflow:hidden; text-decoration:none; margin-bottom:56px;
  transition:transform .3s ease, box-shadow .3s ease, opacity .8s ease;
}
.feat:hover, .feat:focus-visible{transform:translateY(-4px); box-shadow:var(--shadow);}
.feat-img{aspect-ratio:16/11; overflow:hidden;}
.feat-img img, .post-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.feat:hover img, .post-card:hover img{transform:scale(1.04);}
.feat-body{padding:44px 40px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;}
.feat-body h2{font-size:clamp(1.6rem, 2.8vw, 2.3rem); line-height:1.3; margin-bottom:14px;}
.feat-body p{color:var(--ink-soft); margin-bottom:18px;}
.feat-body .btn-ghost{margin-top:22px; color:var(--terracotta); border-color:var(--terracotta); font-weight:600;}

.filters{display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-bottom:32px;}
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip.is-on{background:var(--terracotta); border-color:var(--terracotta); color:var(--paper);}
.search{
  font:inherit; font-size:.95rem; min-height:44px; padding:8px 18px; border:1px solid var(--line);
  border-radius:999px; background:var(--cream); color:var(--ink); min-width:220px;
}
.search:focus-visible{outline:2px solid var(--terracotta); outline-offset:2px;}

.post-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
.post-card{
  display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--line); border-radius:18px;
  overflow:hidden; text-decoration:none; transition:transform .3s ease, box-shadow .3s ease, opacity .8s ease;
}
.related .post-card{background:var(--paper);}
.post-card:hover, .post-card:focus-visible{transform:translateY(-4px); box-shadow:var(--shadow);}
.post-card[hidden], .feat[hidden]{display:none;}
.post-card-img{aspect-ratio:16/10; overflow:hidden;}
.post-card-body{padding:24px 24px 26px; display:flex; flex-direction:column; align-items:flex-start; flex:1;}
.post-card h3{font-size:1.3rem; line-height:1.35; margin-bottom:10px;}
.post-card p{color:var(--ink-soft); font-size:.97rem; margin-bottom:16px; flex:1;}
.empty{text-align:center; color:var(--ink-soft); padding:28px 0;}

/* -------- single post -------- */
.progress{position:fixed; top:0; right:0; left:0; height:3px; z-index:150;}
.progress span{display:block; height:100%; width:0; background:var(--terracotta);}
.post{background:var(--paper); padding:130px 0 80px;}
.post-head{max-width:820px; text-align:center;}
.back{display:inline-flex; align-items:center; min-height:44px; color:var(--ink-soft); text-decoration:none; font-size:.92rem; margin-bottom:10px;}
.back:hover{color:var(--terracotta);}
.post-head .tag{display:table; margin:0 auto 14px;}
.post-head h1{font-size:clamp(2rem, 4.4vw, 3.2rem); line-height:1.22; margin-bottom:18px;}
.lead{font-size:1.22rem; color:var(--ink-soft); margin-bottom:18px;}
.post-cover{max-width:1000px; margin-top:40px;}
.post-cover img{width:100%; max-height:560px; object-fit:cover; border-radius:22px; box-shadow:var(--shadow);}
.toc{max-width:720px; margin-top:44px;}
.toc strong{font-family:var(--serif); font-size:1.1rem;}
.toc ol{list-style:none; margin-top:10px; padding-right:16px; border-right:2px solid var(--sage-soft);}
.toc a{display:inline-flex; min-height:36px; align-items:center; color:var(--ink-soft); text-decoration:none;}
.toc a:hover{color:var(--terracotta);}
.toc .l3{padding-right:18px; font-size:.95rem;}

/* -------- post canvas: style kits, sections, blocks (also used inside the editor) -------- */
.post-body{font-size:1.14rem; line-height:1.9; color:var(--ink); padding-top:24px; --gut:14px; overflow-x:clip;}
.bs-s{font-size:1.04rem;}
.bs-l{font-size:1.25rem;}

/* A kit re-points the site's colour tokens for one post, so every block follows without its own rules. */
.kit-sage{--terracotta:#636A40; --terracotta-deep:#4F5533; --sage:#96501F; --terracotta-on-dark:#D5DBA8;}
.kit-ink{--terracotta:#33363B; --terracotta-deep:#1F2124; --sage:#96501F; --sage-soft:#EAE1D2; --terracotta-on-dark:#EAE1D2;}
.kit-sand{--terracotta:#9A5A22; --terracotta-deep:#7C4718; --sage:#7D6235; --sage-soft:#F1E6D3; --cream:#F6EEDD;}
.kit-rose{--terracotta:#9B4A4A; --terracotta-deep:#7D3838; --sage:#7A5C5C; --sage-soft:#F3E4E0; --terracotta-on-dark:#EBB5AC;}
.kit-mono{--terracotta:#33363B; --terracotta-deep:#000; --sage:#5B5E63; --sage-soft:#EEEDEA; --terracotta-on-dark:#FFF;}
.hf-suez :is(h2,h3){font-family:'Suez One', var(--serif), serif; font-weight:400;}
.hf-sans :is(h2,h3){font-family:var(--sans); font-weight:700;}

/* sections: full-width bands; a `section` block starts one */
.sec{position:relative; padding:4px 20px;}
.sec.pad-l{padding-block:32px;}
.sec-bg{padding-block:64px; margin-block:40px;}
.sec-bg.pad-s{padding-block:36px;}
.sec-bg.pad-l{padding-block:104px;}
.sec-bg.pad-none{padding-block:0;}
.sec-bg > .sec-in > .blk:first-child, .sec-bg > .sec-in > .blk.first-row{margin-top:0;}
.sec-in{max-width:788px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;}
.cw-narrow .sec-in{max-width:588px;}
.cw-wide .sec-in{max-width:1068px;}
.cw-full .sec-in{max-width:none;}
.sec-dark{--ink:#FBF8F2; --ink-soft:rgba(251,248,242,.82); --line:rgba(251,248,242,.24); color:var(--ink);}
.sec-dark :is(.h-kicker, .rt a, .motif, .stat-num, .div-cn, .feat-icon, cite){color:var(--terracotta-on-dark);}
.sec-dark li::marker, .sec-dark .ls-check li::before, .sec-dark .ls-dash li::before{color:var(--terracotta-on-dark);}
.sec-dark .q{border-color:var(--terracotta-on-dark);}
.sec-dark .btn-ghost{color:var(--ink); border-color:var(--ink);}

/* Light surfaces keep dark text even inside a dark section. */
.co-soft, .card, .q-card, .q-testi, .q-bubble, .cta-soft, .recipe, .feats-card > div, .sub-inline, .blk.has-bg{
  --ink:#33363B; --ink-soft:#5B5E63; --line:rgba(51,54,59,.12); --terracotta-on-dark:var(--terracotta); color:var(--ink);
}

/* blocks: each is a flex item; narrower widths sit side by side */
.blk{flex:0 0 100%; max-width:100%; min-width:0; margin-top:28px; padding-inline:var(--gut);}
.w-3-4{flex-basis:75%; max-width:75%;}
.w-2-3{flex-basis:66.666%; max-width:66.666%;}
.w-1-2{flex-basis:50%; max-width:50%;}
.w-1-3{flex-basis:33.333%; max-width:33.333%;}
.w-1-4{flex-basis:25%; max-width:25%;}
.blk.has-bg{padding:24px 28px; border-radius:18px; border-inline:var(--gut) solid transparent; background-clip:padding-box;}
.blk [id]{scroll-margin-top:100px;}
.rt p, .rt div{margin-bottom:1em;}
.rt p:last-child, .rt div:last-child{margin-bottom:0;}
.rt a, .blk figcaption a{color:var(--terracotta);}
.blk mark{background:#FFF3B0; padding:0 .15em; border-radius:3px;}

.blk-heading{margin-top:48px;}
.blk h2{font-size:1.9em; line-height:1.3;}
.blk h3{font-size:1.4em; line-height:1.35;}
.blk h4{font-size:1.15em; font-family:var(--sans); font-weight:600;}
.blk-heading h2{font-size:1.75em;}
.h-kicker{display:block; font-family:var(--sans); font-size:.72em; letter-spacing:.14em; font-weight:600; color:var(--terracotta); margin-bottom:8px;}
.hd-num .h-kicker{font-family:var(--serif); font-size:2.6em; letter-spacing:0; line-height:1; font-weight:900; opacity:.35; margin-bottom:2px;}
.hd-underline :is(h2,h3,h4)::after{content:''; display:block; width:56px; height:3px; border-radius:2px; background:var(--terracotta); margin-top:14px;}
.blk[style*="text-align:center"] .hd-underline :is(h2,h3,h4)::after{margin-inline:auto;}
.hd-motif .motif{margin-top:16px;}

.blk figure{margin:0 auto; max-width:100%;}
.blk figure img{width:100%; height:auto;}
.blk figcaption{font-size:.8em; color:var(--ink-soft); text-align:center; margin-top:10px;}
.img-round img{border-radius:18px;}
.img-shadow img{border-radius:18px; box-shadow:var(--shadow);}
.img-frame img{border-radius:18px; outline:1.5px solid var(--terracotta); outline-offset:8px;}
.img-frame{padding:10px;}
.img-polaroid{background:#fff; padding:12px 12px 16px; box-shadow:var(--shadow); transform:rotate(-1.6deg); border-radius:2px; color:#33363B;}
.blk:nth-child(even) > .img-polaroid, .gal .img-polaroid:nth-child(even){transform:rotate(1.4deg);}
.img-circle img{border-radius:50%; aspect-ratio:1 !important; object-fit:cover;}
.img-arch img{border-radius:999px 999px 18px 18px;}
.gal{display:grid; gap:16px; grid-template-columns:repeat(2, 1fr);}
.gal-3{grid-template-columns:repeat(3, 1fr);}
.gal-4{grid-template-columns:repeat(4, 1fr);}

.media{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;}
.media-1-3{grid-template-columns:1fr 2fr;}
.media-2-3{grid-template-columns:2fr 1fr;}
.media-end > figure{order:2;}
.media-body h3{font-size:1.5em; margin-bottom:12px;}
.media-body .btn-primary{margin-top:22px;}

.q{border-right:3px solid var(--terracotta); padding:6px 26px 6px 0;}
.q p{font-family:'Suez One', var(--serif), serif; font-size:1.35em; line-height:1.6;}
.q cite{display:block; font-style:normal; font-size:.8em; color:var(--ink-soft); margin-top:10px;}
.q-big{border:0; padding:0; text-align:center;}
.q-big p{font-size:1.7em; line-height:1.5;}
.q-card, .q-testi{border:0; background:var(--paper); border-radius:18px; padding:30px 32px; box-shadow:var(--shadow);}
.q-card::before{content:'"'; display:block; font-family:var(--serif); font-size:4em; line-height:.6; color:var(--terracotta); opacity:.5; margin-bottom:6px;}
.q-testi p{font-family:var(--sans); font-size:1.02em;}
.q-stars{display:block; color:#C28A2B; letter-spacing:.2em; margin-bottom:10px;}
.q-bubble{border:0; background:var(--sage-soft); border-radius:22px 22px 4px 22px; padding:22px 28px;}
.q-bubble p{font-family:var(--serif); font-size:1.25em;}

.callout{--c:var(--sage); --cbg:var(--sage-soft); border-radius:16px; padding:22px 26px;}
.callout-note{--c:var(--terracotta); --cbg:var(--cream-soft);}
.callout-warn{--c:#A23A1E; --cbg:#F6E3D6;}
.callout-heart{--c:#9B4A4A; --cbg:#F3E4E0;}
.callout > strong{display:block; font-family:var(--serif); font-size:1.15em; margin-bottom:6px;}
.co-soft{background:var(--cbg); border-right:4px solid var(--c);}
.co-outline{border:1.5px solid var(--c);}
.co-outline > strong{color:var(--c);}
.sec-dark .co-outline{border-color:var(--line);}
.sec-dark .co-outline > strong{color:var(--terracotta-on-dark);}
.co-solid{background:var(--c); color:#FBF8F2; --ink-soft:rgba(251,248,242,.85);}
.co-solid .rt a{color:inherit;}

.blk-button .btn-ghost{display:inline-block;}
.btn-sage, .btn-wa, .btn-dark, .btn-outline{
  padding:16px 34px; border-radius:999px; font-weight:600; text-decoration:none; color:var(--paper);
  display:inline-flex; align-items:center; gap:10px; transition:transform .25s ease, filter .25s ease, background .25s ease;
}
.btn-sage{background:var(--sage);}
.btn-wa{background:#1F7A4D;}
.btn-dark{background:#33363B;}
.btn-outline{color:var(--terracotta); border:1.5px solid currentColor; padding:14.5px 32.5px;}
.sec-dark .btn-outline{color:var(--ink);}
.btn-sage:hover, .btn-wa:hover, .btn-dark:hover, .btn-outline:hover{transform:translateY(-2px); filter:brightness(.93);}
.btn-big{font-size:1.15em; padding:20px 44px;}

.blk ul.rt, .blk ol.rt{padding-right:1.4em;}
.blk li{margin-bottom:.5em;}
.blk li::marker{color:var(--terracotta); font-weight:600;}
.ls-check, .ls-dash{list-style:none; padding-right:0 !important;}
.ls-check li, .ls-dash li{position:relative; padding-right:1.7em;}
.ls-check li::before, .ls-dash li::before{content:'✓'; position:absolute; right:0; color:var(--terracotta); font-weight:700;}
.ls-dash li::before{content:'–';}

.blk-divider{margin-top:44px;}
.div-line{height:1px; background:var(--line);}
.div-space{height:48px;}
.div-dots::before{content:'· · ·'; display:block; text-align:center; font-size:1.6em; letter-spacing:.4em; color:var(--terracotta);}
.div-cn{text-align:center; font-family:var(--serif); font-size:2em; color:var(--terracotta); opacity:.7;}

.video{position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:var(--shadow);}
.video iframe{position:absolute; top:0; right:0; width:100%; height:100%; border:0;}
.tbl{overflow-x:auto;}
.tbl table{width:100%; border-collapse:collapse; font-size:.9em;}
.tbl th, .tbl td{border:1px solid var(--line); padding:10px 14px; text-align:right; vertical-align:top;}
.tbl th{background:var(--sage-soft); font-weight:600; color:#33363B;}
.tbl-striped th, .tbl-striped td{border-width:0 0 1px;}
.tbl-striped tr:nth-child(odd) td{background:rgba(99,106,64,.07);}

.card{background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border-top:4px solid var(--terracotta);}
.card-herb{border-top-color:var(--sage);}
.card-plain{border-top-width:1px; border-top-color:var(--line);}
.card-body{padding:24px 26px 26px;}
.card-badge{display:inline-block; font-size:.72em; font-weight:700; letter-spacing:.06em; padding:3px 12px; border-radius:999px; background:var(--sage-soft); color:var(--sage); margin-bottom:10px;}
.card h3{font-size:1.4em;}
.card-sub{color:var(--ink-soft); font-size:.9em; margin-bottom:6px;}
.card dl{margin-top:12px;}
.card dl > div{display:grid; grid-template-columns:7.5em 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:.9em;}
.card dt{font-weight:600; color:var(--terracotta);}
.card .rt{margin-top:12px; font-size:.92em; color:var(--ink-soft);}

.recipe{background:var(--cream); border-radius:20px; padding:30px 32px;}
.recipe h3{font-size:1.5em; margin-bottom:12px;}
.recipe-meta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; font-size:.82em;}
.recipe-meta > span{background:var(--paper); border-radius:999px; padding:4px 14px;}
.recipe-cols{display:grid; grid-template-columns:1fr 1.5fr; gap:32px;}
.recipe h4{margin-bottom:10px; color:var(--terracotta);}
.recipe-note{margin-top:18px; padding-top:14px; border-top:1px dashed var(--line); font-size:.9em; color:var(--ink-soft);}

.steps{list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:22px;}
.steps > li{counter-increment:step; display:grid; grid-template-columns:46px 1fr; gap:18px; align-items:start; margin:0;}
.steps > li::before{
  content:counter(step); width:46px; height:46px; border-radius:50%; background:var(--terracotta); color:#FBF8F2;
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.1em;
}
.steps strong{display:block; font-family:var(--serif); font-size:1.15em;}
.steps .rt{color:var(--ink-soft); font-size:.95em;}
.steps-timeline{gap:0; border-right:2px solid var(--line); padding-right:26px; margin-right:6px;}
.steps-timeline > li{display:block; position:relative; padding-bottom:26px;}
.steps-timeline > li:last-child{padding-bottom:0;}
.steps-timeline > li::before{content:''; position:absolute; right:-34px; top:10px; width:12px; height:12px; background:var(--paper); border:3px solid var(--terracotta);}

.faq{display:flex; flex-direction:column; gap:10px;}
.faq-item{border:1px solid var(--line); border-radius:14px; padding:4px 20px;}
.faq-q{font-family:var(--serif); font-weight:700; font-size:1.08em; padding:12px 0; cursor:pointer; list-style-position:inside;}
.faq-q::marker{color:var(--terracotta);}
.faq-item .rt{padding:0 0 16px; color:var(--ink-soft);}

.cta{text-align:center; border-radius:22px; padding:44px 28px;}
.cta h3{font-size:1.55em; margin-bottom:8px;}
.cta p{color:var(--ink-soft); margin-bottom:22px;}
.cta-soft{background:var(--cream);}
.cta-outline{border:1.5px solid var(--terracotta);}
.cta-solid{background:var(--terracotta); color:#FBF8F2; --ink-soft:rgba(251,248,242,.85);}
.cta-solid .btn-primary{background:#FBF8F2; color:var(--terracotta); box-shadow:none;}
.sub-inline{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:32px 30px; text-align:center;}
.sub-inline h3{font-size:1.45em;}
.sub-inline > p{color:var(--ink-soft);}
.sub-inline .sub-form{text-align:right; margin-top:18px;}
.sub-inline .field-row{grid-template-columns:1fr 1fr;}
.sub-inline button{align-self:center !important;}
.sub-inline .form-msg{text-align:center;}

.stats{display:flex; flex-wrap:wrap; justify-content:space-around; gap:28px; text-align:center;}
.stats > div{flex:1; min-width:120px;}
.stat-num{display:block; font-family:var(--serif); font-weight:900; font-size:2.8em; line-height:1.1; color:var(--terracotta);}
.stat-label{display:block; font-size:.85em; color:var(--ink-soft); margin-top:4px;}

.feats{display:grid; gap:26px; grid-template-columns:repeat(3, 1fr); text-align:center;}
.feats-1{grid-template-columns:1fr;}
.feats-2{grid-template-columns:repeat(2, 1fr);}
.feats-4{grid-template-columns:repeat(4, 1fr);}
.feat-icon{display:block; font-size:2em; line-height:1.2; margin-bottom:8px; color:var(--terracotta);}
.feats strong{display:block; font-family:var(--serif); font-size:1.15em; margin-bottom:4px;}
.feats .rt{font-size:.9em; color:var(--ink-soft);}
.feats-card > div{background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:26px 20px; box-shadow:var(--shadow);}

/* hover effects sit on the block's content so they never fight the entrance animation on the block itself */
.blk[class*="hv-"] > *{transition:transform .35s ease, filter .35s ease, box-shadow .35s ease;}
.hv-lift:hover > *{transform:translateY(-6px);}
.hv-tilt:hover > *{transform:rotate(-1.8deg) scale(1.02);}
.hv-glow:hover > *{filter:drop-shadow(0 14px 26px rgba(150,80,31,.35));}
.hv-zoom figure{overflow:hidden; border-radius:18px;}
.hv-zoom img{transition:transform .6s ease;}
.hv-zoom:hover img{transform:scale(1.06);}

/* entrance effects (reveal base lives in style.css: fade + rise) */
.reveal.fx-fade{transform:none;}
.reveal.fx-slide{transform:translateX(48px);}
.reveal.fx-zoom{transform:scale(.92);}
.reveal.fx-blur{transform:none; filter:blur(12px); transition:opacity .8s ease, filter .8s ease;}
.reveal.fx-slide.in, .reveal.fx-zoom.in{transform:none;}
.reveal.fx-blur.in{filter:none;}

@media(min-width:761px){ .hide-d{display:none !important;} }
@media(max-width:760px){
  .hide-m{display:none !important;}
  .blk{flex-basis:100%; max-width:100%;}
  .blk.w-1-4{flex-basis:50%; max-width:50%;}
  .sec-bg{padding-block:44px;}
  .sec-bg.pad-l{padding-block:64px;}
  .media, .media-1-3, .media-2-3, .recipe-cols{grid-template-columns:1fr; gap:22px;}
  .media-end > figure{order:0;}
  .feats, .feats-4{grid-template-columns:1fr 1fr;}
  .feats-1{grid-template-columns:1fr;}
  .gal-3, .gal-4{grid-template-columns:repeat(2, 1fr);}
  .sub-inline .field-row{grid-template-columns:1fr;}
  .blk.has-bg, .recipe, .cta{padding:22px 20px;}
  .blk figure{width:100% !important;}
  .card dl > div{grid-template-columns:1fr; gap:2px;}
}
@media(prefers-reduced-motion: reduce){
  .blk[class*="hv-"]:hover > *, .hv-zoom:hover img{transform:none;}
  .reveal.fx-blur{filter:none;}
}

/* -------- post footer, comments, forms -------- */
.post-end{max-width:760px; margin-top:56px;}
.tags{display:flex; flex-wrap:wrap; gap:10px; color:var(--sage); font-weight:600; font-size:.92rem; margin-bottom:22px;}
.disclaimer{font-size:.88rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:18px;}
.post-cta{text-align:center; background:var(--cream); border-radius:22px; padding:44px 24px; margin:36px 0;}
.post-cta h2{font-size:1.6rem; margin-bottom:22px;}
.share{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:center; color:var(--ink-soft);}
.share .btn-ghost{background:none; border:0; border-bottom:1px solid var(--ink); font:inherit; cursor:pointer; min-height:36px;}

.comments{padding:80px 0; background:var(--cream);}
.comments .wrap, .subscribe .wrap{max-width:760px;}
.comments h2{font-size:1.8rem; margin-bottom:26px;}
.comment{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px 24px; margin-bottom:16px;}
.comment-head{display:flex; justify-content:space-between; gap:12px; margin-bottom:6px;}
.comment-head span{font-size:.85rem; color:var(--ink-soft);}
.comment p{white-space:pre-wrap; overflow-wrap:anywhere;}
.reply{margin-top:14px; padding:12px 18px 12px 0; border-right:3px solid var(--terracotta);}
.reply strong{color:var(--terracotta);}

.comment-form, .sub-form{display:flex; flex-direction:column; gap:16px; margin-top:28px;}
.blog label{display:flex; flex-direction:column; gap:6px; font-size:.92rem; font-weight:500; color:var(--ink-soft);}
.blog input[type=text], .blog input[type=email], .blog input[type=tel], .blog textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; min-height:48px; width:100%;
}
.blog input:focus-visible, .blog textarea:focus-visible{outline:2px solid var(--terracotta); outline-offset:2px;}
.blog button.btn-primary{border:0; font-family:inherit; cursor:pointer; align-self:flex-start;}
.blog button[disabled]{opacity:.6; cursor:wait;}
.field-row{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
.blog label.check{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400;}
.check input{width:20px; height:20px; margin-top:4px; flex-shrink:0; accent-color:var(--terracotta);}
.check a{color:var(--terracotta);}
.hp{position:absolute; right:-9999px; width:1px; height:1px; overflow:hidden;}
.form-actions{display:flex; flex-wrap:wrap; gap:18px; align-items:center;}
.form-msg{font-size:.92rem; color:var(--ink-soft); min-height:1.5em;}
.form-msg.ok{color:var(--sage); font-weight:600;}
.form-msg.err{color:#A23A1E; font-weight:600;}

.subscribe{padding:90px 0; background:linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%);}
.subscribe .sec-head{margin-bottom:10px;}
.subscribe .sub-form button{align-self:center;}
.subscribe .form-msg{text-align:center;}

.notice{padding:190px 0 120px; text-align:center; min-height:70vh;}
.notice h1{font-size:2.2rem; margin-bottom:16px;}
.notice p{color:var(--ink-soft); margin-bottom:26px;}
.notice .small{font-size:.9rem;}
.notice .small a{color:var(--terracotta);}

@media(max-width:900px){
  .feat{grid-template-columns:1fr;}
  .feat-body{padding:30px 26px;}
  .post-grid{grid-template-columns:1fr 1fr;}
  .field-row{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .header-inner{padding:12px 16px;}
  .header-actions{gap:10px;}
  .blog .nav-link{display:none;}
  .blog .wa-btn{width:auto; padding:0 16px; border-radius:999px; font-size:.9rem;}
  .blog .wa-btn span{display:inline;}
  .post-grid{grid-template-columns:1fr;}
  .blog-hero{padding:120px 0 60px;}
  .post{padding:104px 0 60px;}
  .post-body{font-size:1.06rem;}
  .posts, .comments, .subscribe{padding:64px 0;}
  .search{width:100%;}
}

/* ================= design options, round 2 ================= */
/* more widths + placing a lone narrow block */
.w-5-6{flex-basis:83.333%; max-width:83.333%;}
.w-3-5{flex-basis:60%; max-width:60%;}
.w-2-5{flex-basis:40%; max-width:40%;}
.w-1-5{flex-basis:20%; max-width:20%;}
.w-1-6{flex-basis:16.666%; max-width:16.666%;}
.self-start{margin-inline-end:auto;}
.self-end{margin-inline-start:auto;}

/* fonts: per post (headings / body) and per block */
.hf-sans :is(h2,h3), .ff-sans{font-family:'Heebo', sans-serif;}
.hf-suez :is(h2,h3), .ff-suez{font-family:'Suez One', serif; font-weight:400;}
.hf-rubik :is(h2,h3), .bf-rubik, .ff-rubik{font-family:'Rubik', sans-serif;}
.hf-assistant :is(h2,h3), .bf-assistant, .ff-assistant{font-family:'Assistant', sans-serif;}
.hf-david :is(h2,h3), .bf-david, .ff-david{font-family:'David Libre', serif;}
.hf-secular :is(h2,h3), .ff-secular{font-family:'Secular One', sans-serif; font-weight:400;}
.hf-varela :is(h2,h3), .bf-varela, .ff-varela{font-family:'Varela Round', sans-serif;}
.hf-amatic :is(h2,h3), .ff-amatic{font-family:'Amatic SC', cursive; font-weight:700; font-size:1.25em;}
.bf-serif, .ff-serif, .hf-serif :is(h2,h3){font-family:var(--serif);}
.blk[class*="ff-"] :is(h2,h3,h4,p,strong){font-family:inherit;}
.dropcap .rt::first-letter{float:right; font-family:var(--serif); font-weight:900; font-size:3.6em; line-height:.85; padding-left:12px; color:var(--terracotta);}

/* more kits */
.kit-forest{--terracotta:#2F5D3A; --terracotta-deep:#234A2C; --sage:#8A6A3B; --sage-soft:#E6EDE2; --terracotta-on-dark:#BFE0C4;}
.kit-ocean{--terracotta:#2F5D62; --terracotta-deep:#234A4E; --sage:#3F6E8C; --sage-soft:#E4ECEC; --terracotta-on-dark:#B9DDE1;}
.kit-plum{--terracotta:#6B3F5B; --terracotta-deep:#552F48; --sage:#7A5C6E; --sage-soft:#F0E6EC; --terracotta-on-dark:#E3BFD6;}
.kit-clay{--terracotta:#A14A2A; --terracotta-deep:#823A20; --sage:#7A6A3B; --sage-soft:#F2E7DA; --cream:#F7EDE2; --terracotta-on-dark:#F0B79E;}

/* post-wide switches */
.bt-round :is(.btn-primary,.btn-sage,.btn-wa,.btn-dark,.btn-outline,.btn-soft,.btn-grad){border-radius:12px;}
.bt-square :is(.btn-primary,.btn-sage,.btn-wa,.btn-dark,.btn-outline,.btn-soft,.btn-grad){border-radius:2px;}
.rd-none :is(.callout,.card,.cta,.recipe,.q-card,.q-testi,.q-bubble,.q-frame,.faq-item,.sub-inline,.video,.map,.linkcard,.audio,.blk.has-bg,.feats-card > div,.steps-cards > li), .rd-none :is(.img-round,.img-shadow,.img-frame) img{border-radius:0;}
.rd-s :is(.callout,.card,.cta,.recipe,.q-card,.q-testi,.q-bubble,.q-frame,.faq-item,.sub-inline,.video,.map,.linkcard,.audio,.blk.has-bg,.feats-card > div,.steps-cards > li), .rd-s :is(.img-round,.img-shadow,.img-frame) img{border-radius:8px;}
.rd-l :is(.callout,.card,.cta,.recipe,.q-card,.q-testi,.q-bubble,.q-frame,.faq-item,.sub-inline,.video,.map,.linkcard,.audio,.blk.has-bg,.feats-card > div,.steps-cards > li), .rd-l :is(.img-round,.img-shadow,.img-frame) img{border-radius:32px;}
.ps-none{--shadow:none;}
.ps-strong{--shadow:0 26px 60px -22px rgba(51,54,59,.6);}
.lk-plain .rt a{text-decoration:none;}
.lk-bold .rt a{text-decoration:none; font-weight:700;}
.pw-narrow .cw-normal .sec-in{max-width:668px;}
.pw-wide .cw-normal .sec-in{max-width:948px;}

/* block box: textures, shadows */
.tx-paper{background-image:repeating-linear-gradient(0deg, rgba(51,54,59,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(51,54,59,.03) 0 1px, transparent 1px 4px);}
.tx-dots{background-image:radial-gradient(rgba(51,54,59,.16) 1.1px, transparent 1.4px); background-size:18px 18px;}
.tx-lines{background-image:repeating-linear-gradient(135deg, rgba(51,54,59,.07) 0 1px, transparent 1px 12px);}
.tx-grid{background-image:linear-gradient(rgba(51,54,59,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(51,54,59,.07) 1px, transparent 1px); background-size:26px 26px;}
.tx-cross{background-image:repeating-linear-gradient(45deg, rgba(51,54,59,.06) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(51,54,59,.06) 0 1px, transparent 1px 14px);}
.sec-dark.tx-dots{background-image:radial-gradient(rgba(255,255,255,.2) 1.1px, transparent 1.4px);}
.sec-dark.tx-lines{background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 1px, transparent 1px 12px);}
.sec-dark.tx-grid{background-image:linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);}
.blk.sh-s{box-shadow:0 6px 18px -10px rgba(51,54,59,.35);}
.blk.sh-m{box-shadow:0 18px 40px -20px rgba(51,54,59,.42);}
.blk.sh-l{box-shadow:0 30px 70px -24px rgba(51,54,59,.55);}

/* sections: edges, height, extra padding. One six-point polygon, driven by variables, covers every top/bottom combination. */
.sec-bg{--tl:0px; --tm:0px; --tr:0px; --bl:0px; --bm:0px; --br:0px;
  clip-path:polygon(0 var(--tl), 50% var(--tm), 100% var(--tr), 100% calc(100% - var(--br)), 50% calc(100% - var(--bm)), 0 calc(100% - var(--bl)));}
.sec-bg:is(.shape-none,.shape-curve,.shape-round):is(.shapet-none,.shapet-curve,.shapet-round){clip-path:none;}
.shape-slant{--br:48px; --bm:24px; padding-bottom:96px;}
.shape-slantR{--bl:48px; --bm:24px; padding-bottom:96px;}
.shape-arrow{--bl:40px; --br:40px; padding-bottom:94px;}
.shape-notch{--bm:40px; padding-bottom:94px;}
.shape-curve{border-radius:0 0 50% 50% / 0 0 70px 70px; padding-bottom:96px;}
.shape-round{border-radius:0 0 44px 44px;}
.shapet-slant{--tl:48px; --tm:24px; padding-top:96px;}
.shapet-slantR{--tr:48px; --tm:24px; padding-top:96px;}
.shapet-arrow{--tl:40px; --tr:40px; padding-top:94px;}
.shapet-notch{--tm:40px; padding-top:94px;}
.shapet-curve{border-top-left-radius:50% 70px; border-top-right-radius:50% 70px; padding-top:96px;}
.shapet-round{border-top-left-radius:44px; border-top-right-radius:44px;}
.sec-bg.pad-xl{padding-block:150px;}
.sec-tall{display:flex; flex-direction:column; justify-content:center;}
.sec-tall.va-start{justify-content:flex-start;}
.sec-tall.va-end{justify-content:flex-end;}
.sec-tall > .sec-in{width:100%;}

/* headings */
.hd-side :is(h2,h3,h4){border-right:5px solid var(--terracotta); padding-right:16px;}
.hd-boxed :is(h2,h3,h4){display:inline-block; border:1.5px solid currentColor; padding:8px 22px; border-radius:10px;}
.hd-lines{display:flex; align-items:center; gap:18px; text-align:center;}
.hd-lines::before, .hd-lines::after{content:''; flex:1; height:1px; background:var(--line);}
.hd-ribbon :is(h2,h3,h4){display:inline; background:linear-gradient(transparent 58%, var(--sage-soft) 58%); padding:0 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.sec-dark .hd-ribbon :is(h2,h3,h4){background:linear-gradient(transparent 58%, rgba(255,255,255,.18) 58%);}

/* quotes */
.q-mark{border:0; padding:34px 0 0; position:relative; text-align:center;}
.q-mark::before{content:'\201D'; position:absolute; top:-18px; right:50%; transform:translateX(50%); font-family:var(--serif); font-size:7em; line-height:1; color:var(--terracotta); opacity:.22;}
.q-frame{border:1.5px solid var(--terracotta); border-radius:18px; padding:26px 30px; text-align:center;}

/* callouts */
.callout-info{--c:#2F5D62; --cbg:#E4ECEC;}
.callout-ok{--c:#2F5D3A; --cbg:#E6EDE2;}
.callout-ask{--c:#6B3F5B; --cbg:#F0E6EC;}
.co-dashed{border:1.5px dashed var(--c);}
.co-dashed > strong{color:var(--c);}
.sec-dark :is(.co-dashed, .co-outline){border-color:var(--line);}
.sec-dark .co-dashed > strong{color:var(--terracotta-on-dark);}
.co-topbar{background:var(--paper); border-top:5px solid var(--c); box-shadow:var(--shadow); --ink:#33363B; --ink-soft:#5B5E63; color:var(--ink);}
.co-icon{float:right; width:30px; height:30px; margin-left:12px; color:var(--c);}
.co-solid .co-icon{color:inherit;}
.co-icon svg{width:100%; height:100%;}

/* buttons */
.btn-soft, .btn-grad, .btn-arrow{padding:16px 34px; border-radius:999px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:transform .25s ease, filter .25s ease;}
.btn-soft{background:var(--sage-soft); color:var(--terracotta);}
.btn-grad{background:linear-gradient(135deg, var(--terracotta), var(--terracotta-deep) 60%, #33363B); color:#FBF8F2;}
.btn-arrow{padding:6px 0; border-radius:0; color:var(--terracotta); font-weight:700;}
.btn-arrow::after{content:'\2190'; transition:transform .25s ease;}
.btn-arrow:hover::after{transform:translateX(-6px);}
.btn-soft:hover, .btn-grad:hover{transform:translateY(-2px); filter:brightness(.95);}
.sec-dark .btn-arrow{color:var(--terracotta-on-dark);}
.blk a[class^="btn-"] svg{width:1.15em; height:1.15em; flex-shrink:0;}
.blk a.bz-s{padding:10px 22px; font-size:.86em;}
.blk a.bz-l{padding:20px 44px; font-size:1.15em;}
.blk a:is(.btn-arrow, .btn-ghost){padding-inline:0;}
.btn-row{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; justify-content:center;}
.blk[style*="text-align:right"] .btn-row{justify-content:flex-start;}
.blk[style*="text-align:left"] .btn-row{justify-content:flex-end;}

/* lists */
.ls-arrow, .ls-star, .ls-heart, .ls-circle{list-style:none; padding-right:0 !important;}
.ls-arrow li, .ls-star li, .ls-heart li{position:relative; padding-right:1.7em;}
.ls-arrow li::before, .ls-star li::before, .ls-heart li::before{position:absolute; right:0; color:var(--terracotta); font-weight:700;}
.ls-arrow li::before{content:'\2190';}
.ls-star li::before{content:'\2605';}
.ls-heart li::before{content:'\2665';}
.ls-circle{counter-reset:li;}
.ls-circle li{counter-increment:li; position:relative; padding-right:2.6em; margin-bottom:.8em;}
.ls-circle li::before{content:counter(li); position:absolute; right:0; top:.1em; width:1.8em; height:1.8em; border-radius:50%; background:var(--terracotta); color:#FBF8F2; display:flex; align-items:center; justify-content:center; font-size:.8em; font-weight:700;}
.ls-notes{font-size:.82em; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:14px;}
.sec-dark :is(.ls-arrow,.ls-star,.ls-heart) li::before{color:var(--terracotta-on-dark);}

/* dividers */
.div-double{height:5px; border-block:1px solid var(--line);}
.div-dashed{border-top:1.5px dashed var(--line);}
.div-icon{display:flex; align-items:center; gap:16px; color:var(--terracotta);}
.div-icon::before, .div-icon::after{content:''; flex:1; height:1px; background:var(--line);}
.div-icon svg{width:26px; height:26px;}
.div-shape{display:block; width:100%; height:34px; color:var(--sage-soft);}
.sec-dark .div-shape{color:rgba(255,255,255,.16);}

/* tables */
.tbl-bordered th, .tbl-bordered td{border:1.5px solid var(--ink-soft);}
.tbl-minimal th, .tbl-minimal td{border:0; border-bottom:1px solid var(--line); background:none;}
.tbl-minimal th{color:var(--terracotta); font-family:var(--serif);}
.tbl-compare th, .tbl-compare td{text-align:center; border-width:0 0 1px;}
.tbl-compare td:first-child, .tbl-compare th:first-child{text-align:right; font-weight:600;}
.tbl-compare td{font-size:1.1em;}

/* cards, steps, cta, features */
.card-accent{background:var(--terracotta); border-color:transparent; --ink:#FBF8F2; --ink-soft:rgba(251,248,242,.85); --line:rgba(251,248,242,.25); --terracotta-on-dark:#FBF8F2; color:var(--ink);}
.card-accent dt, .card-accent .card-badge{color:#FBF8F2;}
.card-accent .card-badge{background:rgba(255,255,255,.18);}
.card-dark{background:#33363B; border-color:transparent; --ink:#FBF8F2; --ink-soft:rgba(251,248,242,.8); --line:rgba(251,248,242,.2); color:var(--ink);}
.card-dark dt{color:#D3854A;}
.steps-bar{flex-direction:row; gap:0;}
.steps-bar > li{flex:1; display:block; text-align:center; position:relative; padding:0 10px;}
.steps-bar > li::before{margin:0 auto 12px; position:relative; z-index:1;}
.steps-bar > li::after{content:''; position:absolute; top:23px; right:50%; width:100%; height:2px; background:var(--line);}
.steps-bar > li:last-child::after{display:none;}
.steps-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:18px;}
.steps-cards > li{display:block; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px 20px; box-shadow:var(--shadow); --ink:#33363B; --ink-soft:#5B5E63; color:var(--ink);}
.steps-cards > li::before{margin-bottom:12px;}
.cta-grad{background:linear-gradient(135deg, var(--terracotta), #33363B); color:#FBF8F2; --ink-soft:rgba(251,248,242,.85);}
.cta-dark{background:#33363B; color:#FBF8F2; --ink-soft:rgba(251,248,242,.8);}
.cta-grad .btn-primary, .cta-dark .btn-primary{background:#FBF8F2; color:#33363B; box-shadow:none;}
.feats-line > div{border-top:3px solid var(--terracotta); padding-top:18px; text-align:right;}
.feats-side > div{display:grid; grid-template-columns:auto 1fr; column-gap:16px; text-align:right; align-items:start;}
.feats-side .feat-icon{grid-row:1 / 3; margin:0;}
.feat-icon svg{width:1.2em; height:1.2em;}
.recipe-meta svg{width:1.1em; height:1.1em; vertical-align:-.15em; margin-left:6px; color:var(--terracotta);}

/* tags, icon, tabs */
.tag-row{display:flex; flex-wrap:wrap; gap:8px 10px;}
.blk[style*="text-align:center"] .tag-row{justify-content:center;}
.tag-row > span{font-size:.8em; font-weight:600; padding:5px 14px; border-radius:999px; background:var(--sage-soft); color:var(--sage);}
.tg-outline > span{background:none; border:1.5px solid var(--terracotta); color:var(--terracotta);}
.tg-solid > span{background:var(--terracotta); color:#FBF8F2;}
.icn-wrap{display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--terracotta);}
.blk[style*="color:"] .icn-wrap{color:inherit;}
.icn{display:block;}
.icn svg{width:100%; height:100%;}
.icn-label{font-size:.9em; font-weight:600; color:var(--ink);}
.sec-dark .icn-wrap{color:var(--terracotta-on-dark);}
.tab-bar{display:flex; flex-wrap:wrap; gap:4px; border-bottom:2px solid var(--line); margin-bottom:20px;}
.tab-bar button{font:inherit; font-weight:600; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-2px; padding:10px 18px; min-height:44px; color:var(--ink-soft); cursor:pointer;}
.tab-bar button[aria-selected=true]{color:var(--terracotta); border-bottom-color:var(--terracotta);}
.tabs-pills .tab-bar{border:0; gap:8px;}
.tabs-pills .tab-bar button{border:1px solid var(--line); border-radius:999px; margin:0;}
.tabs-pills .tab-bar button[aria-selected=true]{background:var(--terracotta); color:#FBF8F2; border-color:var(--terracotta);}
.tabs-edit .tab-panel{border:1px dashed var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px;}
.tab-title{font-weight:700; color:var(--terracotta); margin-bottom:6px;}

/* embeds + link card + toc block */
.map, .insta{border-radius:18px; overflow:hidden; box-shadow:var(--shadow);}
.map iframe{width:100%; height:100%; border:0; display:block;}
.insta{max-width:420px; margin:0 auto;}
.insta iframe{width:100%; height:560px; border:0; display:block;}
.audio{background:var(--cream); border-radius:18px; padding:18px 22px; color:#33363B;}
.blk .audio figcaption{text-align:right; font-size:1em; font-weight:600; color:#33363B; margin:0 0 10px;}
.audio audio{width:100%; display:block;}
.linkcard{display:grid; grid-template-columns:auto 1fr; text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); color:#33363B; --ink-soft:#5B5E63; transition:transform .3s ease;}
.linkcard:hover{transform:translateY(-4px);}
.linkcard-img{width:200px; display:block;}
.linkcard-img img{height:100%;}
.linkcard-body{display:flex; flex-direction:column; gap:4px; padding:20px 24px; justify-content:center;}
.linkcard strong{font-family:var(--serif); font-size:1.25em; line-height:1.35;}
.linkcard-text{font-size:.9em; color:var(--ink-soft);}
.linkcard-cta{font-size:.9em; font-weight:700; color:var(--terracotta); margin-top:6px;}
.toc-blk{display:block; background:var(--cream); border-radius:18px; padding:22px 26px; color:#33363B;}
.toc-blk strong{font-family:var(--serif); font-size:1.1em;}
.toc-blk ol{margin-top:8px; padding-right:1.3em;}
.toc-blk a{color:#33363B; text-decoration:none;}
.toc-blk a:hover{color:var(--terracotta);}
.toc-blk .l3{margin-right:1.2em; font-size:.92em;}
.toc-hint{font-size:.85em; color:#5B5E63; margin-top:6px;}

/* images: masks, filters, caption overlay, before/after, carousel, lightbox */
.img-tilt img{border-radius:14px; box-shadow:var(--shadow); transform:rotate(2deg);}
.img-leaf img{border-radius:60% 4% 60% 4%;}
.img-blob img{border-radius:42% 58% 63% 37% / 46% 41% 59% 54%;}
.img-hex img{clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);}
.imf-gray img{filter:grayscale(1);}
.imf-sepia img{filter:sepia(.75);}
.imf-warm img{filter:sepia(.28) saturate(1.25);}
.imf-cool img{filter:saturate(.9) hue-rotate(12deg) brightness(1.03);}
.imf-bright img{filter:brightness(1.14) saturate(1.08);}
.imf-contrast img{filter:contrast(1.22) saturate(1.1);}
.imf-fade img{filter:saturate(.6) brightness(1.1) contrast(.9);}
.cap-over{position:relative;}
.blk .cap-over figcaption{position:absolute; right:0; left:0; bottom:0; margin:0; padding:36px 20px 16px; color:#FBF8F2; font-size:1em; font-weight:600; text-align:right; background:linear-gradient(transparent, rgba(30,26,22,.78)); border-radius:0 0 18px 18px;}
img[data-zoom]{cursor:zoom-in;}
.gal-5{grid-template-columns:repeat(5, 1fr);}
.cmp{position:relative; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); --p:50%; user-select:none;}
.cmp img{display:block; width:100%;}
.cmp-top{position:absolute; top:0; right:0; bottom:0; left:0; clip-path:inset(0 0 0 calc(100% - var(--p)));}
.cmp-top img{height:100%;}
.cmp::after{content:''; position:absolute; top:0; bottom:0; right:var(--p); width:3px; margin-right:-1.5px; background:#FBF8F2; box-shadow:0 0 0 1px rgba(51,54,59,.25); pointer-events:none;}
.cmp input{position:absolute; top:0; right:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;}
.cmp-l{position:absolute; top:12px; font-size:.75em; font-weight:700; padding:3px 12px; border-radius:999px; background:rgba(251,248,242,.88); color:#33363B; pointer-events:none;}
.cmp-la{right:12px;}
.cmp-lb{left:12px;}
.car{position:relative;}
.car-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px;}
.car-track::-webkit-scrollbar{display:none;}
.car-track figure{flex:0 0 78%; scroll-snap-align:center; margin:0;}
.car-btn{position:absolute; top:42%; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(251,248,242,.92); color:#33363B; font-size:1.4rem; line-height:1; cursor:pointer; box-shadow:var(--shadow);}
.car-prev{right:8px;}
.car-next{left:8px;}
.lightbox{position:fixed; top:0; right:0; bottom:0; left:0; z-index:400; background:rgba(30,26,22,.9); display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;}
.lightbox img{max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lightbox button{position:absolute; top:16px; left:16px; width:44px; height:44px; border-radius:50%; border:0; background:#FBF8F2; color:#33363B; font-size:1.2rem; cursor:pointer;}

/* more entrance + hover effects */
.reveal.fx-down{transform:translateY(-28px);}
.reveal.fx-left{transform:translateX(-48px);}
.reveal.fx-pop{transform:scale(.8); transition:opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);}
.reveal.fx-flip{transform:perspective(900px) rotateX(55deg); transform-origin:top;}
.reveal.fx-wipe{opacity:1; transform:none; clip-path:inset(0 0 0 100%); transition:clip-path 1s ease;}
.reveal.fx-down.in, .reveal.fx-left.in, .reveal.fx-pop.in, .reveal.fx-flip.in{transform:none;}
.reveal.fx-wipe.in{clip-path:inset(0 0 0 0);}
.hv-grow:hover > *{transform:scale(1.035);}
.hv-dim > *{opacity:.72;}
.hv-dim:hover > *{opacity:1;}
.blk[class*="hv-"] > *{transition:transform .35s ease, filter .35s ease, box-shadow .35s ease, opacity .35s ease;}

/* inline text styles applied by the text-style tool of the editor */
.hl-wavy{text-decoration:underline wavy var(--terracotta); text-decoration-thickness:1.5px; text-underline-offset:5px;}
.hl-under{background:linear-gradient(transparent 62%, var(--sage-soft) 62%);}
.hl-box{border:1.5px solid var(--terracotta); border-radius:6px; padding:0 6px;}
.hl-yellow{background:#FFF3B0; color:#33363B; padding:0 .15em; border-radius:3px;}
.hl-peach{background:#F6E3D6; color:#33363B; padding:0 .15em; border-radius:3px;}
.hl-sage{background:#E3E8CF; color:#33363B; padding:0 .15em; border-radius:3px;}
.hl-sky{background:#DDEBF0; color:#33363B; padding:0 .15em; border-radius:3px;}
.fs-s{font-size:.82em;}
.fs-l{font-size:1.3em;}
.fs-xl{font-size:1.7em; line-height:1.3;}

/* ================= reader tools ================= */
.reader-tools{position:fixed; z-index:95; bottom:calc(96px + env(safe-area-inset-bottom)); left:calc(33px + env(safe-area-inset-left)); display:flex; flex-direction:column; gap:8px;}
.reader-tools button, .reader-tools a{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font:600 .85rem var(--sans); text-decoration:none; box-shadow:0 8px 20px -12px rgba(51,54,59,.5); transition:background .2s ease, color .2s ease, opacity .3s ease;
}
.reader-tools button:hover, .reader-tools a:hover{background:var(--terracotta); color:var(--paper);}
.reader-tools svg{width:20px; height:20px;}
.reader-tools .to-top{opacity:0; pointer-events:none;}
.reader-tools .to-top.show{opacity:1; pointer-events:auto;}
.post-nav{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:36px;}
.post-nav a{display:block; text-decoration:none; border:1px solid var(--line); border-radius:16px; padding:16px 20px; transition:border-color .2s ease, transform .2s ease;}
.post-nav a:hover{border-color:var(--terracotta); transform:translateY(-2px);}
.post-nav small{display:block; color:var(--ink-soft); font-size:.8rem; margin-bottom:2px;}
.post-nav strong{font-family:var(--serif);}
.post-nav .next{text-align:left; grid-column:2;}
@media(min-width:1560px){
  /* long posts: the table of contents follows the reader down the side, in the margin outside the widest section */
  .toc-side{position:fixed; top:130px; right:calc((100vw - 1068px) / 2 - 232px); width:210px; max-height:70vh; overflow-y:auto; z-index:20; font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .3s ease;}
  .toc-side.show{opacity:1; pointer-events:auto;}
  .toc-side ol{list-style:none; padding-right:14px; border-right:2px solid var(--sage-soft); margin-top:8px;}
  .toc-side a{display:block; padding:4px 0; color:var(--ink-soft); text-decoration:none;}
  .toc-side a:hover, .toc-side a.is-now{color:var(--terracotta);}
  .toc-side a.is-now{font-weight:600;}
  .toc-side .l3{padding-right:12px;}
}
@media(max-width:1559px){ .toc-side{display:none;} }

/* reading in the dark: the same tokens, re-pointed */
html[data-theme=dark] body.blog{--cream:#24262A; --cream-soft:#2C2F34; --paper:#1D1F22; --ink:#ECE6DA; --ink-soft:#B9B4AA; --line:rgba(236,230,218,.16); --sage-soft:#33382A; --terracotta:#D3854A; --terracotta-deep:#E09B66; --sage:#B7BF8C; background:#1D1F22; color:var(--ink);}
html[data-theme=dark] body.blog header{background:rgba(29,31,34,.9);}
html[data-theme=dark] body.blog .post-body[class*="kit-"]{--terracotta:#D3854A; --terracotta-deep:#E09B66; --sage:#B7BF8C; --sage-soft:#33382A;}
html[data-theme=dark] body.blog :is(.btn-primary, .wa-btn){color:#1D1F22;}
html[data-theme=dark] body.blog :is(.co-soft, .co-topbar, .card, .q-card, .q-testi, .q-bubble, .cta-soft, .recipe, .feats-card > div, .sub-inline, .blk.has-bg, .steps-cards > li, .linkcard, .toc-blk, .audio, .sec-bg:not(.sec-dark)){--ink:#33363B; --ink-soft:#5B5E63; --line:rgba(51,54,59,.12); --paper:#FBF8F2; --cream:#F2EBDF; --sage-soft:#EDE9DA; --terracotta:#96501F; --sage:#636A40; color:#33363B;}
html[data-theme=dark] body.blog input, html[data-theme=dark] body.blog textarea{color:#33363B; background:#FBF8F2;}
html[data-size=l] body.blog .post-body{font-size:1.3rem;}
html[data-size=xl] body.blog .post-body{font-size:1.46rem;}

@media(max-width:760px){
  .blk, .blk.w-5-6, .blk.w-3-5, .blk.w-2-5{flex-basis:100%; max-width:100%;}
  .blk.w-1-5, .blk.w-1-6, .blk.m-w-1-2{flex-basis:50%; max-width:50%;}
  .blk.m-w-1{flex-basis:100%; max-width:100%;}
  .blk.m-al-right{text-align:right !important;}
  .blk.m-al-center{text-align:center !important;}
  .blk.m-al-left{text-align:left !important;}
  .blk[style*="--msz"]{font-size:calc(var(--msz) * 1em) !important;}
  .gal-5{grid-template-columns:repeat(3, 1fr);}
  .steps-bar{flex-direction:column; gap:18px;}
  .steps-bar > li{display:grid; grid-template-columns:46px 1fr; gap:18px; text-align:right; padding:0;}
  .steps-bar > li::before{margin:0;}
  .steps-bar > li::after{display:none;}
  .linkcard{grid-template-columns:1fr;}
  .linkcard-img{width:100%;}
  .car-track figure{flex-basis:88%;}
  .sec-bg.pad-xl{padding-block:84px;}
  .reader-tools{left:calc(25px + env(safe-area-inset-left));}
  .post-nav{grid-template-columns:1fr;}
  .post-nav .next{grid-column:auto;}
  .insta iframe{height:520px;}
}
@media(prefers-reduced-motion: reduce){
  .reveal.fx-wipe{clip-path:none;}
  .reveal.fx-flip, .reveal.fx-pop{transform:none;}
}

/* custom list marker, symbol divider, emoji as icon */
.ls-custom{list-style:none; padding-right:0 !important;}
.ls-custom li{position:relative; padding-right:1.9em;}
.ls-custom li::before{content:var(--mk); position:absolute; right:0; top:0; color:var(--terracotta);}
.div-sym span{font-size:1.5em; line-height:1;}
.icn-emoji{width:auto; height:auto; line-height:1.1;}
.co-emoji{width:auto; height:auto; font-size:1.6em; line-height:1;}
.feat-icon{font-family:inherit;}

/* ---- fixes ---- */
/* Block width is one variable, so a coloured box can keep a real gap from its neighbours (a margin) and its
   border and shadow hug the visible box. */
.blk{--fb:100%; flex:0 0 var(--fb); max-width:var(--fb);}
.blk.w-5-6{--fb:83.333%;} .blk.w-3-4{--fb:75%;} .blk.w-2-3{--fb:66.666%;} .blk.w-3-5{--fb:60%;} .blk.w-1-2{--fb:50%;}
.blk.w-2-5{--fb:40%;} .blk.w-1-3{--fb:33.333%;} .blk.w-1-4{--fb:25%;} .blk.w-1-5{--fb:20%;} .blk.w-1-6{--fb:16.666%;}
.blk.has-bg{border-inline-width:0; margin-inline:var(--gut); flex-basis:calc(var(--fb) - 2 * var(--gut)); max-width:calc(var(--fb) - 2 * var(--gut));}
@media(max-width:760px){
  .blk, .blk[class*=" w-"]{--fb:100%;}
  .blk.w-1-4, .blk.w-1-5, .blk.w-1-6, .blk.m-w-1-2{--fb:50%;}
  .blk.m-w-1{--fb:100%;}
  .blk:not(.has-bg){flex-basis:var(--fb); max-width:var(--fb);}
}
/* dragging the before/after handle sideways must not swallow the vertical scroll of the page */
.cmp input{touch-action:pan-y;}

/* ---------- phones and small screens ----------
   Measured on 320–430px wide screens: the header broke into two lines, the reader buttons sat on top of the text,
   the side margins took a quarter of the screen, and several links were too small to tap. */
/* every link that is only a line of text gets a finger-sized hit area, without changing how it looks */
.blog :is(.btn-ghost, .editor-link, .back, .brand){position:relative;}
.blog :is(.btn-ghost, .editor-link, .back, .brand)::after{content:""; position:absolute; inset:-12px -6px;}
.share .btn-ghost{min-height:44px;}
.search{font-size:1rem;} /* under 16px, iPhones zoom the page when the field is tapped */
.post-body{overflow-wrap:break-word;} /* a long address must wrap, not widen the page */
.tbl{-webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;}
@media(max-width:560px){
  /* header: one line */
  .blog .header-inner{padding:10px 14px; gap:10px;}
  .blog .brand{font-size:1.1rem; white-space:nowrap;}
  .blog .header-actions{gap:8px; flex:none;}
  .blog .blog-link{padding:6px 14px; white-space:nowrap;}
  .blog .wa-btn{height:44px; padding:0 14px; white-space:nowrap; font-size:.88rem;}
  .post{padding-top:88px;}
  .blog-hero{padding-top:100px;}
  /* reading width: 20px margins instead of 34px (set with the notch rule at the end) */
  .blk.has-bg, .recipe, .cta{padding:20px 16px;}
  .feats-card{grid-template-columns:1fr;} /* cards with a sentence in each need the full width */
  .hero-portrait .frame-tag{right:8px; bottom:-16px;}
}
/* also on small tablets and on a phone held sideways, where a column of buttons would sit on the text */
@media(max-width:760px), (max-height:480px){
  /* reader buttons: a row at the bottom that slides away while reading down and returns on the way up */
  .reader-tools{flex-direction:row; inset-inline:0; width:fit-content; margin-inline:auto; bottom:calc(12px + env(safe-area-inset-bottom));
    padding:6px; border-radius:999px; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px); border:1px solid var(--line);
    box-shadow:0 10px 26px -14px rgba(51,54,59,.6); transition:transform .25s ease, opacity .25s ease;}
  .reader-tools button, .reader-tools a{box-shadow:none;}
  .reader-tools .to-top:not(.show){display:none;}
  .reader-tools.away{transform:translateY(calc(100% + 28px)); opacity:0; pointer-events:none;}
  body:has(:is(input, textarea):focus) .reader-tools{display:none;} /* never over the keyboard or the field being typed in */
}
@media(max-width:380px){
  .blog .brand span{display:none;} /* the smallest phones: the name alone */
  .blog .wa-btn{padding:0 12px;}
  .post-head h1{font-size:1.75rem;}
}
/* a phone on its side: the fixed header must not take a third of the height */
@media(max-height:480px) and (orientation:landscape){
  .blog #siteHeader{position:absolute;}
}
/* notches and rounded corners */
.blog .wrap{padding-inline:max(32px, env(safe-area-inset-left), env(safe-area-inset-right));}
.sec{padding-inline:max(20px, env(safe-area-inset-left), env(safe-area-inset-right));}
@media(max-width:560px){ .blog .wrap{padding-inline:max(20px, env(safe-area-inset-left), env(safe-area-inset-right));} }
@media(max-width:560px){ .sec{padding-inline:max(6px, env(safe-area-inset-left), env(safe-area-inset-right));} }
/* the "send to my phone" page of an Instagram carousel (api/public.js) */
.ig-send ol{text-align:start; max-width:520px; margin:18px auto; padding-inline-start:1.3em; display:flex; flex-direction:column; gap:8px;}
.ig-acts{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.ig-acts button{min-height:46px; padding:0 20px; border-radius:999px; border:1px solid var(--line); background:var(--paper); font:inherit; cursor:pointer;}
.ig-acts .btn-primary{background:var(--terracotta); color:var(--paper); border-color:var(--terracotta);}
.ig-pics{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin:22px 0;}
.ig-pics img{width:100%; height:auto; border-radius:10px; box-shadow:var(--shadow);}
/* the page behind the Instagram profile link (/ig) */
.ig-bio ul{list-style:none; padding:0; margin:26px auto; max-width:620px; display:flex; flex-direction:column; gap:12px; text-align:start;}
.ig-bio li a{display:flex; gap:14px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:16px; background:var(--paper); text-decoration:none; color:inherit;}
.ig-bio li img{width:96px; height:96px; object-fit:cover; border-radius:12px; flex:0 0 auto;}
.ig-bio li span{display:flex; flex-direction:column; gap:4px;}
.ig-bio li small{color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}