/* Single post (single.php). Based on design/single-post-v2.html: no
   sidebar, centred reading column. The page prints its own document
   shell, so only the brand fonts and tokens, the shared site header and
   footer and this file load here. Design values are unchanged; the block
   at the end maps WordPress's own block markup onto the design's prose
   classes. */

:root{
  --forest:#0E3B2E;--forest-2:#0A2E24;--forest-3:#145140;
  --lime:#C6F36B;--lime-deep:#A9DB45;
  --cream:#F4F1EA;--cream-2:#ECE7DC;--paper:#FBFAF6;
  --ink:#0F1F1A;--muted:#5B6B65;--line:#DDD6C8;--line-dark:rgba(244,241,234,.14);
  --shadow:0 1px 0 rgba(14,59,46,.04), 0 12px 32px -16px rgba(14,59,46,.22);
  --display:"Space Grotesk",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --img-ratio:4/5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--body);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px}

/* progress bar */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--lime);z-index:100;transition:width .1s linear}

/* ---------- SHARED HEADER on this page ----------
   The design's header scrolls away and the "now reading" strip takes
   over, so the site header is not sticky here. */
.site-top{position:static;padding:18px 24px 0;background:var(--cream)}
.site-head{max-width:1192px;border-color:var(--line);box-shadow:var(--shadow)}

.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;border-radius:12px;padding:14px 22px;font-size:16px;transition:transform .15s, background .2s;cursor:pointer;border:0;font-family:var(--body)}
.btn:hover{transform:translateY(-1px)}
.btn-forest{background:var(--forest);color:var(--lime)}
.btn-lime{background:var(--lime);color:var(--forest)}
.btn-lime:hover{background:var(--lime-deep)}

/* ---------- POST HEADER ---------- */
.post-head{position:relative;padding:56px 0 48px;overflow:hidden;background:var(--cream)}
.post-head::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(14,59,46,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(14,59,46,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 60% 70% at 30% 0%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 30% 0%,#000 10%,transparent 70%)}
.post-head .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:center}
.crumbs{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--muted);flex-wrap:wrap}
.crumbs a:hover{color:var(--forest)}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--forest)}
.post-head .meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin-top:22px}
.tag{font-family:var(--mono);font-size:12.5px;font-weight:500;padding:6px 10px;border-radius:8px;background:var(--cream-2);color:var(--forest)}
.tag.lime{background:var(--lime)}
.meta .sep{width:4px;height:4px;border-radius:50%;background:var(--line)}
.post-head h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,58px);line-height:1.04;letter-spacing:-.03em;color:var(--forest);margin:18px 0 18px}
.post-head .lead{font-size:19px;color:var(--muted);max-width:620px}
.byline{display:flex;align-items:center;gap:14px;margin-top:28px;padding-top:24px;border-top:1px dashed var(--line);flex-wrap:wrap}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--forest);color:var(--lime);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.byline b{display:block;font-size:15px;color:var(--forest)}
.byline small{font-size:13px;color:var(--muted)}
.byline .share{margin-left:auto;display:flex;gap:6px}
.share a,.share button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--forest);cursor:pointer;transition:all .2s}
.share a:hover,.share button:hover{background:var(--forest);color:var(--lime);border-color:var(--forest)}
.share svg{width:18px;height:18px}

/* featured image: existing WP image, filled, 4:5 */
.hero-img{position:relative;border-radius:24px;overflow:hidden;background:#F7F4EE;border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(14,59,46,.45);aspect-ratio:var(--img-ratio);max-width:460px;justify-self:end;width:100%}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img .corner{position:absolute;top:18px;left:18px;width:40px;height:40px;border-radius:50%;background:var(--forest);color:var(--lime);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(247,244,238,.9)}
.hero-img .corner svg{width:18px;height:18px}
.hero-img .noimg{display:none;position:absolute;inset:0;place-items:center;font-family:var(--display);font-weight:700;font-size:24px;color:var(--forest);padding:24px;text-align:center}
.hero-img.missing img{display:none}.hero-img.missing .noimg{display:grid}

/* ---------- LAYOUT: no sidebar, centred reading column ---------- */
.layout{display:block;padding:8px 0 40px}
article{max-width:760px;margin:0 auto}

/* key takeaways */
.tldr{background:var(--forest);color:var(--cream);border-radius:22px;padding:26px 28px;position:relative;overflow:hidden;margin-bottom:40px}
.tldr::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(198,243,107,.22),transparent 65%);right:-80px;top:-80px}
.tldr .lbl{font-family:var(--mono);font-size:13px;color:var(--lime);margin-bottom:12px}
.tldr ul{list-style:none;display:flex;flex-direction:column;gap:9px;position:relative}
.tldr li{display:flex;gap:12px;font-size:15.5px;line-height:1.5}
.tldr li::before{content:"→";color:var(--lime);font-family:var(--mono);flex:none}
.tldr code{font-family:var(--mono);font-size:.9em;background:rgba(198,243,107,.12);color:var(--lime);padding:1px 6px;border-radius:5px}
.tldr strong{color:#fff}

/* sticky "now reading" strip */
.readbar{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(244,241,234,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transform:translateY(-100%);transition:transform .3s}
.readbar.show{transform:none}
.readbar .in{max-width:1240px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:16px;font-size:14px}
.readbar .lbl{font-family:var(--mono);font-size:12px;color:var(--forest-3);flex:none}
.readbar .cur{font-family:var(--display);font-weight:600;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.readbar .pct{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none}
.readbar .bar{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--lime)}
.readbar .btn{padding:8px 14px;font-size:13.5px;flex:none}
.admin-bar .readbar{top:32px}
@media (max-width:782px){.admin-bar .readbar{top:46px}}

/* inline contents */
.toc-inline{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin-bottom:36px}
.toc-inline summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:13px;color:var(--forest-3)}
.toc-inline summary::-webkit-details-marker{display:none}
.toc-inline summary .chev{transition:transform .2s}
.toc-inline[open] summary .chev{transform:rotate(180deg)}
.toc-inline ol{list-style:none;margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;counter-reset:toc}
.toc-inline li.h3{display:none}
.toc-inline a{display:flex;gap:10px;padding:7px 0;font-size:15px;color:var(--ink);border-bottom:1px dashed var(--line)}
.toc-inline a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--forest-3);padding-top:3px}
.toc-inline a:hover{color:var(--forest)}
.toc-inline a.active{color:var(--forest);font-weight:600}

/* prose */
.prose{font-size:17.5px;line-height:1.75;color:var(--ink)}
.prose>*+*{margin-top:1.25em}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,34px);line-height:1.12;letter-spacing:-.025em;color:var(--forest);margin-top:2.2em;padding-top:.6em;border-top:1px dashed var(--line);display:flex;align-items:baseline;gap:14px}
.prose h2 .n{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--lime);background:var(--forest);padding:4px 9px;border-radius:7px;flex:none;position:relative;top:-3px}
.prose h3{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.015em;color:var(--forest);margin-top:1.8em}
.prose h4,.prose h5,.prose h6{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25;color:var(--forest);margin-top:1.5em}
.prose p strong{color:var(--forest)}
.prose a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:3px}
.prose a:hover{background:var(--lime);text-decoration:none}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--forest-3);font-family:var(--mono);font-size:.9em}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--cream-2);color:var(--forest);padding:2px 7px;border-radius:6px}
.prose pre{background:var(--forest-2);color:var(--cream);border-radius:16px;padding:0;overflow:hidden;font-size:14.5px;line-height:1.65;position:relative;border:1px solid rgba(244,241,234,.08);font-family:var(--mono)}
.prose pre .ph{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 10px 16px;border-bottom:1px dashed var(--line-dark);font-family:var(--mono);font-size:12.5px;color:rgba(244,241,234,.55)}
.prose pre .ph .dots{display:flex;gap:6px}.prose pre .ph .dots i{width:9px;height:9px;border-radius:50%;background:rgba(244,241,234,.18)}.prose pre .ph .dots i:first-child{background:var(--lime)}
.prose pre code{display:block;background:none;color:inherit;padding:16px 18px 18px;overflow-x:auto;font-size:inherit;border-radius:0;white-space:pre}
.copy{font-family:var(--mono);font-size:12px;color:var(--lime);background:rgba(198,243,107,.1);border:1px solid rgba(198,243,107,.25);padding:4px 10px;border-radius:7px;cursor:pointer}
.copy:hover{background:rgba(198,243,107,.2)}
.c-k{color:var(--lime)}.c-s{color:#F2C879}.c-c{color:rgba(244,241,234,.45)}
.prose blockquote{border-left:4px solid var(--lime);background:var(--paper);border-radius:0 16px 16px 0;padding:18px 24px;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.4;color:var(--forest);letter-spacing:-.01em}
.prose blockquote p+p{margin-top:.6em}
.prose blockquote cite{display:block;font-family:var(--mono);font-style:normal;font-size:12.5px;color:var(--muted);margin-top:10px}
.prose figure{margin:2em 0}
.prose figure .img,.prose figure>img,.prose .wp-block-image img{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#F7F4EE;box-shadow:var(--shadow)}
.prose figcaption{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center}
.prose table{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.prose th{text-align:left;font-family:var(--mono);font-weight:500;font-size:12.5px;color:var(--forest-3);background:var(--cream-2);padding:12px 16px}
.prose td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
.prose td:first-child{font-weight:600;color:var(--forest)}
.ok{color:var(--forest);font-family:var(--mono);font-size:13px;background:var(--lime);padding:2px 8px;border-radius:6px}
.bad{color:#8a3b2a;font-family:var(--mono);font-size:13px;background:#F6D9D1;padding:2px 8px;border-radius:6px}
/* callouts */
.note{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:var(--paper)}
.note .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--cream-2);color:var(--forest)}
.note .ic svg{width:20px;height:20px}
.note b{display:block;font-family:var(--mono);font-size:12.5px;color:var(--forest-3);margin-bottom:4px;font-weight:500}
.note p{font-size:15.5px;margin:0}
.note.tip{background:rgba(198,243,107,.18);border-color:rgba(169,219,69,.5)}.note.tip .ic{background:var(--lime)}
.note.warn{background:#FBF2EC;border-color:#EFCDBE}.note.warn .ic{background:#F6D9D1;color:#8a3b2a}.note.warn b{color:#8a3b2a}
/* checklist */
.check{list-style:none;padding:0!important;display:flex;flex-direction:column;gap:8px}
.check li{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0!important;font-size:15.5px}
.check li::before{content:"";width:20px;height:20px;border-radius:6px;border:2px solid var(--forest);flex:none;margin-top:2px;background:linear-gradient(var(--lime),var(--lime)) center/0 0 no-repeat}
.check li.done::before{background-size:100% 100%;border-color:var(--lime);box-shadow:inset 0 0 0 2px var(--lime)}
/* mid-article CTA */
.midcta{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--forest);color:var(--cream);border-radius:20px;padding:24px 26px;position:relative;overflow:hidden;margin:2.4em 0!important}
.midcta::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(198,243,107,.22),transparent 65%);right:-80px;top:-90px}
.midcta .lbl{font-family:var(--mono);font-size:12.5px;color:var(--lime);margin-bottom:6px}
.midcta b{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2;display:block;letter-spacing:-.01em}
.midcta span.sub{font-size:14.5px;color:rgba(244,241,234,.75)}
.midcta .btn{position:relative;flex:none}
/* wide figures can break out a little on big screens */
.prose .wide,.prose .alignwide{margin-left:-60px;margin-right:-60px}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;padding-top:28px;border-top:1px dashed var(--line)}
.tags a{font-family:var(--mono);font-size:13px;padding:8px 12px;border-radius:9px;background:var(--paper);border:1px solid var(--line);color:var(--forest)}
.tags a:hover{background:var(--lime);border-color:var(--lime)}

/* FAQ */
.faq{margin-top:44px}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:0 22px;margin-top:10px;transition:border-color .2s}
.faq details[open]{border-color:var(--forest)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-family:var(--display);font-weight:600;font-size:17.5px;color:var(--forest);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--forest-3);flex:none;width:30px;height:30px;border-radius:8px;background:var(--cream-2);display:grid;place-items:center;transition:transform .2s}
.faq details[open] summary::after{content:"−";background:var(--lime)}
.faq p{padding:0 0 18px;font-size:15.5px;color:var(--muted);line-height:1.65}
.faq code{font-family:var(--mono);font-size:.88em;background:var(--cream-2);color:var(--forest);padding:2px 6px;border-radius:5px}

/* floating share rail */
.rail{position:fixed;left:max(16px,calc((100vw - 1240px)/2 + 24px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s}
.rail.show{opacity:1;pointer-events:auto}
.rail .lbl{font-family:var(--mono);font-size:11px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto 6px}
.rail a,.rail button{width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;color:var(--forest);cursor:pointer;box-shadow:var(--shadow);transition:all .2s}
.rail a:hover,.rail button:hover{background:var(--forest);color:var(--lime);border-color:var(--forest)}
.rail svg{width:18px;height:18px}

/* ---------- RELATED ---------- */
.related{margin-top:24px}
.sec-label{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-family:var(--mono);font-size:14px;color:var(--forest)}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rcard{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s, box-shadow .25s}
.rcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(14,59,46,.45)}
.rcard .thumb{display:block;aspect-ratio:var(--img-ratio);background:#F7F4EE;overflow:hidden}
.rcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rcard:hover .thumb img{transform:scale(1.04)}
.rcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.rcard .meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.rcard h3{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.015em;color:var(--forest)}
.rcard .go{margin-top:auto;padding-top:10px;font-weight:600;font-size:14px;color:var(--forest);display:inline-flex;align-items:center;gap:6px}
.rcard:hover .go{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:3px;text-underline-offset:4px}

/* ---------- CTA ---------- */
.cta{margin:56px auto 0}
.cta .box{background:var(--lime);border-radius:28px;padding:48px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.cta .box::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(14,59,46,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(14,59,46,.07) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(90deg,transparent,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000)}
.cta h2{font-family:var(--display);font-size:clamp(30px,3.6vw,46px);line-height:1.02;letter-spacing:-.03em;color:var(--forest);position:relative}
.cta p{color:var(--forest-3);margin-top:12px;font-size:17px;position:relative}
.cta form{position:relative;display:flex;flex-direction:column;gap:10px}
.cta .row{display:flex;gap:8px;background:var(--paper);padding:6px;border-radius:14px}
.cta input{flex:1;border:0;outline:0;background:none;font:inherit;padding:0 14px;min-width:0;color:var(--ink)}
.cta .btn{white-space:nowrap}
.cta small{font-family:var(--mono);font-size:12.5px;color:var(--forest-3)}
.cta .wa{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;color:var(--forest);font-size:15px}
.cta .wa svg{width:20px;height:20px;flex:none}
.cta .wa:hover{text-decoration:underline;text-underline-offset:4px}

/* back to top, reveal */
.totop{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:14px;background:var(--lime);color:var(--forest);display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;transform:translateY(10px);z-index:40}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop svg{width:22px;height:22px}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}

/* ---------- WordPress block markup -> the design's prose ---------- */
.prose .wp-block-table{margin-left:0;margin-right:0;overflow-x:auto}
.prose .wp-block-table table{margin:0}
.prose .wp-block-code{white-space:normal}
.prose .wp-block-image{margin-left:0;margin-right:0}
.prose .wp-block-image img{height:auto}
.prose .wp-block-quote{margin-left:0;margin-right:0}
.prose .wp-block-embed iframe,.prose iframe{max-width:100%;border-radius:16px}
.prose .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px}
.prose .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;background:var(--forest);color:var(--cream);font-weight:600;font-size:16px;border-radius:12px;padding:14px 22px;text-decoration:none}
.prose .wp-block-button__link:hover{background:var(--forest-3);color:var(--cream)}
.prose .wp-block-separator{border:0;border-top:1px dashed var(--line);max-width:100%}
.prose .has-text-align-center{text-align:center}
.prose img.aligncenter{margin-left:auto;margin-right:auto}
.prose .wp-block-list li>ul,.prose .wp-block-list li>ol{margin-top:.45em}
.prose .wp-block-preformatted{white-space:pre-wrap}
.prose .wp-block-details{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:0 22px}
.prose .wp-block-details summary{padding:14px 0;font-weight:600;color:var(--forest);cursor:pointer}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){.rail{display:none}}
@media (max-width:1024px){
  .post-head .wrap{grid-template-columns:1fr}
  .hero-img{justify-self:start;max-width:380px}
  .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .prose .wide,.prose .alignwide{margin-left:0;margin-right:0}
  .midcta{grid-template-columns:1fr}
  .toc-inline ol{grid-template-columns:1fr}
  .cta .box{grid-template-columns:1fr;padding:32px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .site-top{padding:14px 16px 0}
  .post-head{padding:36px 0 32px}
  .prose{font-size:16.5px}
  .prose h2{font-size:26px}
  .rel-grid{grid-template-columns:1fr}
  .byline .share{margin-left:0;width:100%}
  .readbar .pct,.readbar .btn{display:none}
  .readbar .in{padding:10px 16px}
  .cta .row{flex-direction:column}
  .cta .row input{padding:12px 14px}
  .cta .btn{justify-content:center}
}

/* ---------- COMMENTS (comments.php) ---------- */
.comments{margin-top:48px}
.c-list,.c-list .children{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.c-list .children{margin-top:12px;padding-left:28px;border-left:2px solid var(--line)}
.c-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.is-author>.c-card{border-color:rgba(169,219,69,.6)}
.c-head{display:flex;align-items:center;gap:12px}
.c-head .avatar{width:40px;height:40px;font-size:13px}
.c-head b{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--forest)}
.c-head b .tag{font-size:11px;padding:3px 7px}
.c-head small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.c-head small a:hover{color:var(--forest)}
.c-reply{margin-left:auto}
.c-reply a{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--forest);padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--cream)}
.c-reply a:hover{background:var(--lime);border-color:var(--lime)}
.c-pending{font-family:var(--mono);font-size:12.5px;color:#8a3b2a;margin-top:10px}
.c-text{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--ink)}
.c-text p+p{margin-top:.7em}
.c-text a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:3px}
.c-text code{font-family:var(--mono);font-size:.88em;background:var(--cream-2);color:var(--forest);padding:2px 6px;border-radius:5px}
.c-pager{margin-top:20px;justify-content:flex-start}
.c-closed{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:16px}
.c-form-wrap{margin-top:24px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px}
.c-form-title{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--forest)}
.c-cancel a{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--muted)}
.c-cancel a:hover{color:var(--forest)}
.c-note{font-family:var(--mono);font-size:12.5px;color:var(--forest-3);margin:6px 0 16px}
.c-form label{display:block;font-size:13.5px;font-weight:600;color:var(--forest);margin-bottom:6px}
.c-form input[type=text],.c-form input[type=email],.c-form textarea{width:100%;font:inherit;font-size:15.5px;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;transition:border-color .2s}
.c-form input:focus,.c-form textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(198,243,107,.6)}
.c-form textarea{resize:vertical;min-height:130px}
.c-form .c-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.c-form p{margin:0 0 14px}
.c-form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px}
.c-form .comment-form-cookies-consent label{margin:0;font-weight:500;font-size:13.5px;color:var(--muted)}
.c-form .comment-form-cookies-consent input{accent-color:var(--forest)}
.c-form .form-submit{margin:4px 0 0}
.c-form .logged-in-as{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.c-form .logged-in-as a{color:var(--forest)}
.comment-respond .must-log-in{font-size:14px;color:var(--muted)}
@media (max-width:640px){.c-form .c-row{grid-template-columns:1fr}.c-list .children{padding-left:14px}.c-form-wrap{padding:18px}}