/* =====================================================================
   SAPCOTE THEME — the text page, the 404 page and the search results (finishing step, 10 Nov 2026)
   Loads after the kit's shop layer (the title band, the tools row, the product card, the pager) and the kit's blog
   layer (the reading column, the contents rail, the guide card). Kit tokens only; nothing under 16px; no new colours.
   The kit css files are never edited.
   ===================================================================== */

/* ---- the title band: the shop's band with a dated line under the lead ---- */
.texthead .title .lead{max-width:68ch}
.texthead .lead .dated{margin:8px 0 0;font-size:16px;color:var(--muted)}
.texthead .sform{margin-top:16px}

/* ---- the reading column: 68ch on the kit's type, the blog's rail beside it; without a rail the column stands alone ---- */
.sec.textpage{padding-top:var(--s7)}
.textpage .post-grid{grid-template-columns:minmax(0,68ch) 272px}
.textpage .post-grid.solo{grid-template-columns:minmax(0,68ch)}
.textpage .article{max-width:68ch}
.textpage .article h3{scroll-margin-top:calc(var(--hdr-h) + 20px)}
.textpage .article h4{font-size:19px;line-height:1.3;margin:26px 0 8px}
.textpage .article p.scope{background:var(--lime-tint);border-left:4px solid var(--green);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 16px;font-size:17px}
.textpage .article ol li::marker{font-weight:700}
@media (max-width:1000px){
  .textpage .post-grid,.textpage .post-grid.solo{grid-template-columns:minmax(0,1fr)}
}

/* ---- the 404 page and an empty search: the route tiles on the tint ---- */
.sec.routes .sh2{margin-bottom:var(--s6)}

/* ---- the search results: the shop's tools row and grid, the cards lined up on one image shape ---- */
.srch .grid .card.guide .img{aspect-ratio:4/5}
.srch .grid .card.guide .img img{width:100%;height:100%;object-fit:cover}
.srch .grid .card.guide h3{font-size:17px;line-height:1.3}
.srch .grid .card.guide .line{font-size:16px}
.srch .grid .card .kind{display:block;font-size:16px;color:var(--muted);margin-top:8px}
.srch .pager{margin-top:var(--s6)}
@media (max-width:760px){
  .srch .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
}