/* Blog index page styles.
   Extracted from BlogIndexPageController's inline <style> on 2026-09-07. That block was
   BLOCKED by the site CSP: style-src carries hashes computed from the static HTML files,
   and this page is server-rendered, so its style element matched no hash and the whole
   blog layout silently went unstyled (.bl-wrap resolved to max-width:none). An external
   sheet is covered by 'self', needs no hash, and is cacheable. */
*{box-sizing:border-box}
body.blog-page{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-sans);line-height:1.6}
.blog-page a{color:inherit;text-decoration:none}
.blog-page img{max-width:100%;display:block}
.bl-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.bl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bl-nav{position:sticky;top:0;z-index:30;background:rgba(6,8,10,.94);border-bottom:1px solid var(--border-subtle);backdrop-filter:blur(12px)}
.bl-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.bl-logo img{height:30px;width:auto}
.bl-nav-links{display:flex;gap:26px;color:var(--text-secondary);font-size:.92rem}
.bl-nav-links a:hover,.bl-nav-links a.on{color:var(--accent)}
.bl-btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#0a0c10;font-weight:700;
  padding:13px 20px;border-radius:4px;font-size:.92rem;white-space:nowrap}
.bl-btn:hover{background:var(--accent-pressed)}
.bl-btn-sm{padding:10px 16px;font-size:.86rem}
.bl-crumb{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;
  font-size:.82rem;color:var(--text-secondary)}
.bl-crumb b{color:var(--accent);font-weight:600}
.bl-crumb a:hover{color:var(--accent)}
.bl-coast{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:600}
.bl-hero{position:relative;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);
  background:var(--charcoal-900);overflow:hidden}
.bl-hero-img{position:absolute;inset:0 0 0 42%;}
.bl-hero-img img{width:100%;height:100%;object-fit:cover}
.bl-hero-img:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--charcoal-900) 0%,rgba(6,8,10,.75) 32%,rgba(6,8,10,.15) 100%)}
.bl-hero-inner{position:relative;z-index:2;padding:78px 24px 82px}
.bl-hero-copy{max-width:560px}
.bl-kicker{color:var(--accent);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 14px}
.bl-hero h1{color:var(--text-primary);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.08;margin:0 0 18px;letter-spacing:-.02em}
.bl-hero-sub{color:var(--text-secondary);font-size:1.02rem;max-width:460px;margin:0 0 14px}
.bl-hero-meta{color:var(--text-secondary);font-size:.84rem;margin:0 0 24px}
.bl-hero-plain .bl-wrap{padding:70px 24px}
.bl-pills{display:flex;flex-wrap:wrap;gap:10px;padding:26px 0 4px}
.bl-pill{border:1px solid var(--border-subtle);color:var(--text-secondary);padding:9px 15px;border-radius:4px;font-size:.85rem}
.bl-pill:hover{border-color:var(--accent);color:var(--accent)}
.bl-pill.on{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}
.bl-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;padding:8px 24px 70px;align-items:start}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:22px}
.bl-card{border:1px solid var(--border-subtle);background:var(--bg-card);border-radius:6px;overflow:hidden;
  transition:border-color .15s ease}
.bl-card:hover{border-color:var(--accent)}
.bl-card-img{aspect-ratio:16/10;background:var(--charcoal-900)}
.bl-card-img img{width:100%;height:100%;object-fit:cover}
.bl-card-noimg{background:linear-gradient(135deg,var(--charcoal-700),var(--charcoal-900))}
.bl-card-body{padding:16px 17px 18px}
.bl-card-body h3{color:var(--text-primary);font-size:1.06rem;line-height:1.32;margin:0 0 9px}
.bl-card-sum{color:var(--text-secondary);font-size:.87rem;margin:0 0 14px}
.bl-card-meta{color:var(--text-secondary);font-size:.78rem;margin:0;padding-top:12px;border-top:1px solid var(--border-subtle)}
.bl-dot{opacity:.6;padding:0 4px}
.bl-side{display:grid;gap:18px;margin-top:22px}
.bl-scard{border:1px solid var(--border-subtle);background:var(--bg-card);border-radius:6px;padding:20px}
.bl-scard h2{color:var(--text-primary);font-size:1.06rem;margin:0 0 6px;padding-bottom:10px;position:relative}
.bl-scard h2:after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--accent)}
.bl-pop{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border-subtle)}
.bl-pop:last-child{border-bottom:0;padding-bottom:0}
.bl-pop:hover b{color:var(--accent)}
.bl-thumb{width:62px;height:48px;object-fit:cover;border-radius:4px;flex:none;background:var(--charcoal-900)}
.bl-thumb-empty{display:block;background:linear-gradient(135deg,var(--charcoal-700),var(--charcoal-900))}
.bl-pop b{display:block;color:var(--text-primary);font-size:.85rem;font-weight:600;line-height:1.35}
.bl-pop em{display:block;color:var(--text-secondary);font-size:.75rem;font-style:normal;margin-top:5px}
.bl-scard-cta p{color:var(--text-secondary);font-size:.87rem;margin:10px 0 14px}
.bl-link{color:var(--accent);font-weight:600;font-size:.88rem;display:inline-flex;gap:8px;align-items:center}
.bl-band{border-top:1px solid var(--border-subtle);background:var(--bg-card)}
.bl-band-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;padding-top:30px;padding-bottom:30px}
.bl-band-copy h2{color:var(--text-primary);font-size:1.25rem;margin:0 0 5px}
.bl-band-copy p{color:var(--text-secondary);font-size:.9rem;margin:0}
.bl-stats{display:flex;gap:34px;margin:0}
.bl-stats div{text-align:left}
.bl-stats dt{color:var(--text-primary);font-size:1.7rem;font-weight:700;line-height:1}
.bl-stats dt span{color:var(--accent)}
.bl-stats dd{color:var(--text-secondary);font-size:.75rem;margin:6px 0 0;max-width:130px}
.bl-footer{background:var(--bg-footer);border-top:1px solid var(--border-subtle);padding:52px 0 26px;margin-top:0}
.bl-footer-inner{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px}
.bl-footer-brand img{height:34px;width:auto;margin-bottom:16px}
.bl-footer-brand p{color:var(--text-secondary);font-size:.85rem;max-width:300px;margin:0}
.bl-footer h3{color:var(--text-primary);font-size:.95rem;margin:0 0 14px}
.bl-footer-inner div a{display:block;color:var(--text-secondary);font-size:.85rem;padding:5px 0}
.bl-footer-inner div a:hover{color:var(--accent)}
/* Bottom bar as designed: copyright on the left, legal links on the right. */
/* Owner instruction 2026-09-09: the closing block follows the HOME PAGE standard, which
   centres it - styles.css .copyright is text-align:center and .footer-legal is
   justify-content:center. The Blog was the odd one out with copyright left and the legal
   links pushed right. Copyright now sits centred with the legal links centred beneath it. */
.bl-footer-legal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  margin-top:34px;text-align:center;color:var(--text-secondary);font-size:.78rem}
/* The divider is drawn INSIDE the content box, not as a border on .bl-wrap. .bl-wrap carries
   24px of horizontal padding, and a border-top spans the padding as well, so the rule used to
   run 24px wider than the cards and the footer columns above it on each side. Stretching a
   child across the content box lines it up with them exactly. */
.bl-footer-legal::before{content:"";align-self:stretch;height:1px;background:var(--border-subtle);
  margin-bottom:18px}
.bl-footer-legal a:hover{color:var(--accent)}
/* Colour and size are inherited from .bl-footer-legal exactly as Sitemap already was, so the row
   keeps the footer's existing visual language. The Cookie Preferences control is a <button>
   because it opens a dialog rather than navigating, reset to match its sibling links. */
.bl-footer-legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;align-items:center}
.bl-footer-legal-links button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.bl-footer-legal-links button:hover{color:var(--accent)}
.bl-empty{color:var(--text-secondary);font-size:.9rem}
@media(max-width:980px){
  .bl-main{grid-template-columns:1fr}
  .bl-hero-img{position:relative;inset:auto;height:230px}
  .bl-hero-img:after{background:linear-gradient(0deg,var(--charcoal-900) 4%,rgba(6,8,10,.2) 100%)}
  .bl-hero-inner{padding:30px 24px 44px}
  .bl-nav-links{display:none}
  .bl-footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){.bl-stats{gap:20px}.bl-footer-inner{grid-template-columns:1fr}}