@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap');
/* Better Regulation — Insights (blog) styles. Shared by the hub and all post pages. */

/* ---------- Hub: post cards ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
@media (max-width:991px){ .post-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575px){ .post-grid{ grid-template-columns:1fr; } }
.post-card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.post-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.10); border-color:rgba(82,118,172,.35); }
.post-thumb{ aspect-ratio:16/9; background:#eef2f8 center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:#9fb0c9; font-size:1.6rem; }
.post-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.post-cat{ align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.02em; padding:4px 10px; border-radius:999px; background:rgba(82,118,172,.12); color:#2f4d77; }
.post-title{ font-size:1.05rem; font-weight:800; line-height:1.32; color:var(--ink); letter-spacing:-.01em; }
.post-excerpt{ font-size:.9rem; color:var(--muted); line-height:1.5; }
.post-meta{ font-size:.78rem; color:#94a3b8; margin-top:2px; }
.post-featured{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card); text-decoration:none; color:inherit; margin-bottom:30px; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.post-featured:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(15,23,42,.12); border-color:rgba(82,118,172,.35); }
.post-featured .post-thumb{ aspect-ratio:auto; min-height:240px; }
.post-featured .post-body{ padding:26px 28px; justify-content:center; gap:10px; }
.post-featured .post-title{ font-size:1.5rem; }
@media (max-width:767px){ .post-featured{ grid-template-columns:1fr; } .post-featured .post-thumb{ min-height:180px; } }
.empty-posts{ text-align:center; color:var(--muted); padding:30px 0; font-size:.95rem; }

/* ---------- Article: shared ---------- */
.breadcrumb-bar{ font-size:.82rem; color:var(--muted); margin-bottom:8px; }
.breadcrumb-bar a{ color:var(--br-blue); text-decoration:none; }
.breadcrumb-bar a:hover{ text-decoration:underline; }
.article-headwrap{ max-width:760px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:22px; font-size:.85rem; color:#64748b; margin:18px 0 2px; }
.article-meta span{ display:inline-flex; align-items:center; }
.article-meta i{ color:#94a3b8; margin-right:7px; font-size:.95rem; }
.article-hero{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; background:#eef2f8; margin-bottom:26px; }
.article-body{ font-size:1.02rem; line-height:1.75; color:#1f2a3a; }
.article-body h2{ font-size:1.4rem; font-weight:850; letter-spacing:-.01em; margin:30px 0 12px; color:var(--ink); scroll-margin-top:96px; }
.article-body h2:first-child{ margin-top:0; }
.article-body p{ margin:0 0 18px; }
.article-body a{ color:var(--br-blue); }
.takeaways{ border-left:4px solid var(--br-green); background:#f4f8ef; border-radius:0 12px 12px 0; padding:16px 20px; margin:24px 0; }
.takeaways h3{ font-size:.95rem; font-weight:850; color:#3b6d11; margin:0 0 10px; }
.takeaways ul{ margin:0; padding-left:18px; }
.takeaways li{ margin-bottom:6px; font-size:.95rem; color:#34502a; }

/* ---------- Article: two-column layout ---------- */
.article-shell{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start; }
.article-main{ max-width:760px; min-width:0; }
.article-side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
@media (max-width:991px){
  .article-shell{ grid-template-columns:1fr; gap:0; }
  .article-side{ position:static; top:auto; margin-top:34px; }
  .toc-card{ display:none; }
}
.side-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.side-kicker{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; margin-bottom:10px; }
.toc-list{ list-style:none; margin:0; padding:0; }
.toc-list a{ display:block; padding:6px 0 6px 12px; border-left:2px solid var(--line); color:var(--muted); text-decoration:none; font-size:.9rem; line-height:1.4; transition:color .12s ease, border-color .12s ease; }
.toc-list a:hover{ color:var(--ink); }
.toc-list a.active{ color:var(--br-blue); border-left-color:var(--br-blue); font-weight:600; }
.side-cta{ background:rgba(82,118,172,.10); border:1px solid rgba(82,118,172,.22); border-radius:14px; padding:18px 20px; }
.side-cta .cta-text{ font-weight:800; color:#2f4d77; font-size:.95rem; display:block; margin-bottom:12px; }
.side-cta .btn-brand{ width:100%; }
.side-related a{ display:block; color:var(--ink); text-decoration:none; font-weight:700; font-size:.9rem; line-height:1.35; padding:10px 0; border-top:1px solid var(--line); }
.side-related a:first-of-type{ border-top:0; padding-top:0; }
.side-related a:hover{ color:var(--br-blue); }
.side-related .r-meta{ display:block; font-weight:500; font-size:.76rem; color:#94a3b8; margin-top:3px; }


/* ---------- Article movement devices ---------- */
.article-standfirst{ font-family:'Lora', Georgia, 'Times New Roman', serif; font-size:1.2rem; line-height:1.65; color:#33415a; font-weight:400; margin:0 0 22px; }
.pullquote{ font-family:'Lora', Georgia, serif; font-size:1.3rem; line-height:1.5; color:var(--ink); font-weight:500; border-left:4px solid var(--br-blue); border-radius:0; padding:4px 0 4px 22px; margin:28px 0; }
.theme-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:6px 0 26px; }
.theme-card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.theme-card .t-num{ width:26px; height:26px; border-radius:50%; background:rgba(82,118,172,.12); color:#2f4d77; font-weight:800; font-size:.8rem; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.theme-card .t-title{ font-size:1rem; font-weight:800; color:var(--ink); line-height:1.3; margin-bottom:6px; letter-spacing:-.01em; }
.theme-card .t-desc{ font-size:.88rem; color:var(--muted); line-height:1.5; }
/* Brand-mark section spacer (reused from the marketing homepage) */
.feature-sep{ display:flex; align-items:center; margin:3.5rem 0; }
.feature-sep.sep-between{ margin:0; }
.feature-sep .fs-line{ flex:1; height:2px; border-radius:2px; }
.feature-sep .fs-line-l{ background:linear-gradient(90deg, transparent, rgba(82,118,172,.45)); }
.feature-sep .fs-line-r{ background:linear-gradient(90deg, rgba(116,184,77,.45), transparent); }
.feature-sep .fs-mark{ display:flex; align-items:center; justify-content:center; flex-shrink:0; margin:0 18px; opacity:.55; }
.feature-sep .fs-mark img{ width:22px; height:22px; display:block; }


/* ---------- Key facts panel ---------- */
.keyfacts{ background:rgba(82,118,172,.07); border:1px solid rgba(82,118,172,.20); border-radius:14px; padding:18px 22px; margin:6px 0 28px; }
.keyfacts .kf-title{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#2f4d77; margin-bottom:12px; }
.keyfacts dl{ display:grid; grid-template-columns:160px 1fr; gap:9px 18px; margin:0; }
.keyfacts dt{ font-weight:700; color:var(--ink); font-size:.85rem; }
.keyfacts dd{ margin:0; color:#475569; font-size:.9rem; line-height:1.45; }
.keyfacts a{ color:var(--br-blue); }
@media (max-width:575px){ .keyfacts dl{ grid-template-columns:1fr; gap:2px 0; } .keyfacts dd{ margin-bottom:10px; } }

/* ---------- Worked-example box ---------- */
.example-box{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--br-green); border-radius:0 12px 12px 0; padding:16px 20px; margin:22px 0; }
.example-box .ex-title{ font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#3b6d11; margin-bottom:10px; }
.example-box .ex-row{ display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--line); font-size:.92rem; }
.example-box .ex-row:first-of-type{ border-top:0; }
.example-box .ex-label{ flex:1; color:var(--ink); }
.example-box .ex-from{ color:#94a3b8; text-decoration:line-through; white-space:nowrap; }
.example-box .ex-arrow{ color:#94a3b8; }
.example-box .ex-to{ font-weight:800; color:#27500A; white-space:nowrap; }
.example-box .ex-note{ font-size:.82rem; color:var(--muted); margin:10px 0 0; line-height:1.5; }
@media (max-width:480px){ .example-box .ex-row{ flex-wrap:wrap; gap:6px; } .example-box .ex-label{ flex:1 1 100%; } }


/* ---------- Icon spacing on labels ---------- */
.kf-title i, .ex-title i, .side-kicker i{ margin-right:6px; font-size:.92rem; }
.takeaways h3 i{ margin-right:7px; }

/* ---------- Print button (screen) ---------- */
.print-btn{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:.85rem; padding:8px 16px; border-radius:999px; cursor:pointer; transition:border-color .12s ease, transform .12s ease; }
.print-btn:hover{ border-color:rgba(82,118,172,.5); transform:translateY(-1px); }
.print-btn i{ color:var(--br-blue); }

/* ---------- Print-only Better Regulation branding (hidden on screen) ---------- */
.print-brand, .print-foot{ display:none; }

/* ---------- Print stylesheet ---------- */
@media print{
  .scroll-progress, .navbar, .article-side, .print-btn, .feature-sep, .site-footer, .cta-band{ display:none !important; }
  body{ background:#fff !important; }
  .hero{ background:#fff !important; padding:6px 0 0 !important; }
  .hero h1{ color:#0b1220 !important; }
  .article-headwrap{ max-width:none !important; }
  .article-shell{ display:block !important; }
  .article-main{ max-width:none !important; width:100% !important; }
  .article-body{ font-size:11.5pt; }
  a{ color:#0b1220 !important; text-decoration:underline; }
  .print-brand{ display:flex !important; align-items:center; justify-content:space-between; gap:12px; border-bottom:2px solid var(--br-blue); padding:0 0 10px; margin:0 0 18px; }
  .print-brand img{ height:30px; }
  .print-brand span{ font-size:.8rem; color:#475569; font-weight:700; }
  .print-foot{ display:block !important; border-top:1px solid #cbd5e1; margin-top:20px; padding-top:10px; font-size:.72rem; color:#475569; line-height:1.5; }
  .keyfacts, .example-box, .takeaways, .pullquote, .theme-card, .print-brand{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


/* ---------- Hub: space chips away from the first block ---------- */
#chipRow{ margin-bottom:32px; }

/* ---------- Article disclaimer (small print) ---------- */
.disclaimer{ margin:28px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:.8rem; line-height:1.55; color:#94a3b8; }
.disclaimer strong{ color:#64748b; }

/* ---------- Closing editorial note (serif, distinct from the disclaimer) ---------- */
.analysis-note{ font-family:'Lora', Georgia, serif; font-size:1.02rem; line-height:1.7; color:#475569; }

/* ---------- Themed article hero (per-post accent + cover artwork) ---------- */
/* Opt in by adding class "post-hero" to the .hero and setting:
   --accent-a, --accent-b (rgba brand colours) and --cover (url to the post SVG). */
.hero.post-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 12% 22%, var(--accent-a, rgba(82,118,172,.55)), transparent 60%),
    radial-gradient(820px 520px at 58% 30%, var(--accent-b, rgba(116,184,77,.34)), transparent 58%),
    linear-gradient(180deg, #0b1220 0%, #070b14 100%);
}
.hero.post-hero::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0;
  width:60%;
  background:var(--cover) center right / cover no-repeat;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 40%, #000 80%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 40%, #000 80%);
  opacity:.9;
  pointer-events:none;
}
.hero.post-hero .container{ position:relative; z-index:1; }
@media (max-width:991px){
  .hero.post-hero::after{ width:100%; opacity:.20; }
}
@media print{
  .hero.post-hero::after{ display:none !important; }
}