/* =====================================================================
   SAPCOTE KIT — blog layer v1 (loads after sgc-kit.css + sgc-kit-v8.css + sgc-kit-pages.css)
   The post page and the category archive, 7 Nov 2026 (Round 36). Built by _build_blog_pages.py from the live posts.
   A reading page, not a landing page: no hero, the chrome unchanged (the open-now strip sits directly under the header
   because there is no hero for it to follow), the title on white in the kit's base type (56px h1, the token the kit's
   first stylesheet gives h1 before the hero raised it to 72; 38px on the phone), the article at a measured reading width
   (640px at 18px Lato: 60 to 75 characters a line, see the hand-over), headings in the kit's display face, lists with the
   kit green marker, links in the kit green with the underline offset under the letters, images full column width with the
   card radius and shadow, a sticky "On this page" rail at desktop (a closed details above the article on the phone), the
   post's Quick answers as the kit FAQ, a short band with the kit's two buttons and one review bar, then the kit's own
   guides, hub grid, Facebook and footer. Every class here was grepped against the three kit files first (the builder
   asserts it). Nothing under 16px that is not the kit's own eyebrow. Lato only.
   ===================================================================== */

/* ---- the reading wrap: the article column plus the rail, narrower than the kit's 1200 blocks -------------------------- */
.wrap.post{max-width:1040px}

/* ---- title block ----------------------------------------------------------------------------------------------------- */
.sec.post{padding:var(--s7) 0 var(--s8)}
.post-head{margin-bottom:var(--s7)}
.post-head .crumbs{margin-bottom:var(--s5)}
.post-head .eyebrow a{color:inherit;text-decoration:none}
.post-head .eyebrow a:hover{text-decoration:underline;text-underline-offset:3px}
.post-head h1{font-size:56px;line-height:1.05;letter-spacing:-.02em;max-width:820px;margin:0 0 var(--s4)}
.post-head .standfirst{font-size:21px;line-height:1.45;color:var(--muted);max-width:640px;margin:0 0 var(--s4)}
.post-head .postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:16px;color:var(--muted);margin:0}
.post-head .postmeta time{color:var(--ink);font-weight:700}
/* a Christmas guide keeps the neutral chrome; the season shows as the kit's own xmas-head accent on the page's sections
   (red eyebrow with the holly, gold heading rules and underline, the kit grounds), so the h1 takes the same gold as the h2s */
.sec.xmas-head .post-head h1{--u-color:var(--xgold)}

/* ---- the featured image: the kit's band ratio (2.06:1, the inner-page banner cut) at the reading wrap's width ---------- */
.post-fig{margin:32px 0}
.post-fig img{width:100%;height:auto;border-radius:var(--r);box-shadow:var(--shadow-card);background:#eef0ea}
.post-fig figcaption{font-size:16px;line-height:1.45;color:var(--muted);margin-top:10px}
.post-fig.lead{margin:0 0 var(--s7)}
.post-fig.lead img{aspect-ratio:2.06/1;object-fit:cover;border-radius:16px}

/* ---- the reading grid: the article at 640px, the rail at 272px, 88px between ------------------------------------------- */
.post-grid{display:grid;grid-template-columns:minmax(0,640px) 272px;column-gap:88px;justify-content:space-between;align-items:start}
.article{font-size:var(--fs-body);line-height:1.6;min-width:0}
.article p{margin:0 0 22px}
.article p:last-child{margin-bottom:0}
.article h2{font-size:30px;line-height:1.15;letter-spacing:-.015em;margin:44px 0 14px;scroll-margin-top:calc(var(--hdr-h) + 20px)}
.article h2:first-child{margin-top:0}
.article h3{font-size:22px;line-height:1.25;margin:32px 0 10px}
.article ul,.article ol{margin:0 0 22px;padding-left:1.35em}
.article li{margin:0 0 8px}
.article li::marker{color:var(--green)}
.article a{color:var(--green-dark);font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;overflow-wrap:anywhere}
.article a:hover{color:var(--green)}
.article .post-fig{margin:32px 0}
.post-embed{aspect-ratio:16/9;margin:32px 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-card);background:#eef0ea}
.post-embed iframe{display:block;width:100%;height:100%;border:0}

/* ---- the contents rail: a white card, sticky under the header, the H2s as links, the section in view marked ------------ */
.toc{position:sticky;top:calc(var(--hdr-h) + 24px);background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:20px 22px 16px}
.toc summary{list-style:none;cursor:default;pointer-events:none;display:flex;align-items:center;gap:8px;font:700 14px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin:0 0 12px}
.toc summary::-webkit-details-marker{display:none}
.toc summary .ic{display:none}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:7px 0 7px 14px;border-left:3px solid transparent;color:var(--muted);text-decoration:none;font-size:16px;line-height:1.35;transition:color .2s var(--ease),border-color .2s var(--ease)}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--green-dark);font-weight:700;border-left-color:var(--lime)}
#quick-answers{scroll-margin-top:calc(var(--hdr-h) + 20px)}

/* ---- Quick answers: the kit's FAQ, the question kept as an h3 inside the summary for the schema ----------------------- */
.qa .faq summary h3{font:700 18px/1.3 var(--font);letter-spacing:0;margin:0;flex:1}
.qa .faq details p{margin:0 0 12px}
.qa .faq details p:last-child{margin-bottom:0;padding-bottom:20px}
.qa .faq details p+p{padding-top:0}

/* ---- See them in the shop: a short band, the kit's two buttons, one review as the round-30 bar ------------------------- */
.sec.shopband{padding:var(--s7) 0}
.shopband .top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5) var(--s7);align-items:end}
.shopband h2{font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.02em;margin:0 0 12px}
.shopband .top p{font-size:18px;line-height:1.5;color:var(--muted);max-width:52ch;margin:0}
.shopband .cta{display:flex;flex-wrap:wrap;gap:12px}
.shopband .rev.bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px var(--s5);align-items:center;margin-top:var(--s6);padding:20px 24px;background:var(--lime-tint)}
.shopband .rev.bar .mark{min-height:0}
.shopband .rev.bar .say{margin:0}
.shopband .rev.bar .who{text-align:right;white-space:nowrap}

/* ---- the archive: title band, the kit guide card with a date, the kit's pill language for categories and pages --------- */
.sec.blog-head{padding:var(--s7) 0 var(--s6)}
.blog-head .crumbs{margin-bottom:var(--s5)}
.blog-head h1{font-size:56px;line-height:1.05;letter-spacing:-.02em;margin:0 0 var(--s3)}
.blog-head .lead{font-size:21px;line-height:1.45;color:var(--muted);margin:0 0 var(--s5)}
.catpills{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.catpills a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--pill);border:2px solid var(--hair);background:#fff;color:var(--ink);font:700 16px/1 var(--font);text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.catpills a:hover{border-color:var(--green);color:var(--green-dark)}
.catpills a[aria-current="page"]{background:var(--green);border-color:var(--green);color:#fff}
.sec.posts{border-top:0}
.card.post .pubdate{display:block;font-size:16px;color:var(--muted);margin-top:8px}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:var(--s7)}
.pager a,.pager .cur{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 14px;border-radius:var(--pill);border:2px solid var(--hair);background:#fff;color:var(--ink);font:700 17px/1 var(--font);text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.pager a:hover{border-color:var(--green);color:var(--green-dark)}
.pager .cur{background:var(--green);border-color:var(--green);color:#fff}
.pager a.next{border-color:var(--green);color:var(--green);margin-left:6px}
.pager a.next .ic{width:16px;height:16px}

/* ---- responsive --------------------------------------------------------------------------------------------------------- */
@media (max-width:1000px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:-1;margin-bottom:var(--s6);padding:0;box-shadow:none;border:1px solid var(--hair)}
  .toc summary{pointer-events:auto;cursor:pointer;padding:16px 18px;margin:0;font:700 18px/1.3 var(--font);letter-spacing:0;text-transform:none;color:var(--ink)}
  .toc summary .ic{display:block;margin-left:auto;width:18px;height:18px;color:var(--green);transition:transform .3s var(--ease)}
  .toc[open] summary .ic{transform:rotate(90deg)}
  .toc ol{padding:0 18px 12px}
  .post-head h1,.blog-head h1{font-size:46px}
  .shopband .top{grid-template-columns:1fr}
}
@media (max-width:760px){
  .sec.post{padding:var(--s6) 0 var(--s7)}
  .post-head{margin-bottom:var(--s6)}
  .post-head h1,.blog-head h1{font-size:38px}
  .post-head .standfirst,.blog-head .lead{font-size:19px}
  .post-fig.lead{margin-bottom:var(--s6)}
  .post-fig.lead img{aspect-ratio:16/10;border-radius:var(--r)}
  .article h2{font-size:26px;margin:36px 0 12px}
  .article h3{font-size:20px;margin:28px 0 8px}
  .article .post-fig,.post-embed{margin:24px 0}
  .shopband .rev.bar{grid-template-columns:1fr;gap:10px;padding:18px 18px 16px;margin-top:var(--s5)}
  .shopband .rev.bar .who{text-align:left;white-space:normal}
  .pager{gap:8px}
}