/* ---- pillar hubs ----
   Loaded on top of archive.css, which already owns .archead, .arclead, #feed
   and .feedfoot. Only the parts that make a hub different from a plain archive
   live here: the lead paragraph, the fact strip, the topic rail, the two-column
   body and the explainer block. */

.pillar__head{padding-bottom:var(--s-5)}
.pillar__lead{max-width:78ch;font-size:var(--f-5);line-height:2;color:var(--ink-2)}

/* Fact strip. Reads as one continuous rule on desktop and wraps into stacked
   rows on narrow screens rather than shrinking the numbers. */
.pillar__facts{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.pillar__facts li{display:flex;flex-direction:column;gap:2px;position:relative;padding-inline-start:var(--s-4)}
.pillar__facts li::before{content:"";position:absolute;inset-inline-start:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--brand);opacity:.55}
.pillar__facts b{font-size:var(--f-4);font-weight:800;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.pillar__facts span{font-size:var(--f-1);color:var(--ink-3)}
.pillar__facts time{font-weight:inherit}

.pillar__topics{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding-block:var(--s-4);border-bottom:1px solid var(--line)}
.pillar__topics-label{flex:none;font-size:var(--f-1);font-weight:700;color:var(--ink-3)}
.pillar__topics .chips{flex:1;min-width:0}

.pillar__body{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:var(--s-7);align-items:start;padding-block:var(--s-5)}
.pillar__main{min-width:0}
/* Scrolls with the page. A sticky rail on a hub pinned itself against the
   edge for the whole of a long archive, which reads as a stuck element rather
   than a deliberate one. */
.pillar__side{display:flex;flex-direction:column;gap:var(--s-4)}
.pillar__main #feed{padding-block:0 var(--s-5)}

.pillar__services{display:flex;flex-direction:column;gap:var(--s-2)}
.pillar__service{display:block;background:var(--bg);border:1px solid var(--line);border-inline-start:3px solid var(--brand);border-radius:var(--r-s);padding:var(--s-2) var(--s-3);transition:background .15s}
.pillar__service:hover{background:var(--bg-3)}
.pillar__service-title{display:block;font-size:var(--f-3);font-weight:700;line-height:1.6}
.pillar__service:hover .pillar__service-title{color:var(--brand)}
.pillar__service-text{display:block;font-size:var(--f-1);color:var(--ink-3);line-height:1.6}

/* Explainer. Sits below the feed on purpose: readers came for headlines, and
   the copy is there to give the hub something to rank on, not to delay them. */
.pillar__guide{padding-block:var(--s-6) var(--s-7);border-top:2px solid var(--line)}
.pillar__guide-title{position:relative;font-size:var(--f-7);font-weight:800;padding-inline-start:var(--s-4);margin-bottom:var(--s-4)}
.pillar__guide-title::before{content:"";position:absolute;inset-inline-start:0;top:50%;translate:0 -50%;width:5px;height:26px;background:var(--brand);border-radius:3px}
.pillar__guide .prose{max-width:78ch}

@media(max-width:1024px){
.pillar__body{grid-template-columns:1fr;gap:var(--s-6)}
}
@media(max-width:768px){
.pillar__head{padding-bottom:var(--s-4)}
.pillar__lead{font-size:var(--f-4);line-height:1.95}
.pillar__facts{gap:var(--s-3) var(--s-4)}
.pillar__facts li{flex:1 1 40%}
.pillar__body{padding-block:var(--s-4);gap:var(--s-5)}
.pillar__guide{padding-block:var(--s-5)}
}