/* Design refresh, 6 Nov 2026: richer colour banners on every page that uses <section class="hero">,
   and the redesigned articles hub. Loaded after site.css (and after article-themes.css on articles),
   so each article's own colour still drives the banner through --brand and --brand-dark.
   To undo: remove the <link> to this file from the pages. */

@font-face{font-family:'FrauncesBlack';src:url('/assets/fonts/Fraunces-Black.ttf') format('truetype');font-weight:900;font-display:swap;}

/* ---------- Richer banner ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;padding:76px 0 112px;
  background:
    radial-gradient(900px 420px at 88% -12%, rgba(255,255,255,.20), rgba(255,255,255,0) 62%),
    radial-gradient(700px 360px at -8% 120%, rgba(0,0,0,.22), rgba(0,0,0,0) 60%),
    linear-gradient(152deg, var(--brand) 0%, var(--brand-dark) 100%);
}
/* soft dot texture, fading out towards the text */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.3px, transparent 1.5px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.55) 40%, transparent 78%);
          mask-image:linear-gradient(to left, #000 0%, rgba(0,0,0,.55) 40%, transparent 78%);
}
/* curved bottom edge in the colour of the section that follows */
.hero::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-2px;height:72px;pointer-events:none;
  background:var(--bg);border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.hero:has(+ section.alt)::after{background:var(--paper);}
.hero .wrap{position:relative;z-index:1;}
/* a faint ring, top right, for depth */
.hero .wrap::after{
  content:"";position:absolute;right:-40px;top:-90px;width:300px;height:300px;border-radius:50%;
  border:2px solid rgba(255,255,255,.14);box-shadow:0 0 0 26px rgba(255,255,255,.04);pointer-events:none;
}
.hero .eyebrow{
  display:inline-block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:1;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.30);border-radius:999px;padding:6px 13px;margin-bottom:18px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.hero h1{
  font-family:'FrauncesBlack',Georgia,'Times New Roman',serif;font-weight:900;
  font-size:clamp(2rem,4.2vw,3.05rem);line-height:1.08;letter-spacing:-.01em;max-width:820px;
  text-shadow:0 2px 18px rgba(0,0,0,.12);
}
.hero p.lead{font-size:1.12rem;line-height:1.6;max-width:660px;opacity:.95;}
.hero .btn.on-dark{box-shadow:0 6px 18px rgba(0,0,0,.18);}
@media(max-width:700px){
  .hero{padding:48px 0 84px;}
  .hero::after{height:44px;}
  .hero .wrap::after{width:180px;height:180px;right:-70px;top:-60px;}
  .hero h1{font-size:2rem;}
}

/* ---------- Articles hub ---------- */
.ah-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;}
.ah-jump a{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-weight:600;font-size:.9rem;text-decoration:none;color:var(--ink);transition:background .15s,border-color .15s;}
.ah-jump a:hover{background:var(--brand-soft);border-color:#cfe0da;}
.ah-section{margin:44px 0 0;}
.ah-section > h2{font-family:'FrauncesBlack',Georgia,serif;font-weight:900;font-size:1.7rem;line-height:1.15;margin:0 0 6px;color:var(--ink);}
.ah-section > p{color:var(--ink-soft);margin:0 0 20px;max-width:680px;}
.ah-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:960px){.ah-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.ah-grid{grid-template-columns:1fr;}}

.ah-card{
  --c:#3a5a54;--cd:#25413c;--cs:#e8efed;
  position:relative;display:flex;flex-direction:column;background:var(--paper);border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(20,20,20,.04),0 10px 28px rgba(20,20,20,.07);
  text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease;
}
.ah-card:hover,.ah-card:focus-visible{transform:translateY(-4px);box-shadow:0 2px 4px rgba(20,20,20,.05),0 18px 40px rgba(20,20,20,.12);}
.ah-card:focus-visible{outline:3px solid var(--c);outline-offset:3px;}
.ah-top{
  position:relative;padding:22px 22px 26px;min-height:168px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    linear-gradient(150deg,var(--c),var(--cd));
}
.ah-top::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.4px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(to bottom left,#000,transparent 65%);mask-image:linear-gradient(to bottom left,#000,transparent 65%);
}
.ah-kicker{position:absolute;top:18px;left:22px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 11px;}
.ah-new{position:absolute;top:18px;right:18px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800;background:#FFC94D;color:#1e2430;border-radius:999px;padding:5px 10px;box-shadow:0 2px 0 rgba(0,0,0,.15);}
.ah-top h3{position:relative;font-family:'FrauncesBlack',Georgia,serif;font-weight:900;font-size:1.28rem;line-height:1.18;margin:44px 0 0;}
.ah-body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1;}
.ah-body p{color:var(--ink-soft);font-size:.94rem;line-height:1.6;margin:0 0 18px;flex:1;}
.ah-meta{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;font-weight:700;color:var(--cd);border-top:1px solid var(--line);padding-top:14px;}
.ah-meta span:first-child{color:var(--ink-soft);font-weight:600;}
.ah-card[data-theme="coral"]{--c:#B5532E;--cd:#8A3B1E;--cs:#FBEBE3;}
.ah-card[data-theme="plum"] {--c:#6A4C93;--cd:#4B3470;--cs:#EEE8F5;}
.ah-card[data-theme="ocean"]{--c:#2F6485;--cd:#1E465F;--cs:#E3EEF5;}
.ah-card[data-theme="ochre"]{--c:#9A6A12;--cd:#6E4A0B;--cs:#FBF1DC;}
.ah-card[data-theme="rose"] {--c:#A8456B;--cd:#7A2F4D;--cs:#F8E6EE;}

/* ---------- Guide covers (CSS, matching the PDF covers) ---------- */
.g-top{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start;margin:8px 0 10px;}
.g-top .answer-box{margin-top:0;}
@media(max-width:700px){.g-top{grid-template-columns:1fr;}.g-top .gcover{width:200px;margin:0 auto;}}
.gcover{
  --c:#3A5A54;--cd:#25413C;--glow:#8FB3A9;
  position:relative;display:flex;flex-direction:column;aspect-ratio:210/297;border-radius:6px 14px 14px 6px;overflow:hidden;
  padding:18px 18px 16px;color:#fff;text-decoration:none;
  background:radial-gradient(160px 160px at 100% 0%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 70%),linear-gradient(150deg,var(--c),var(--cd));
  box-shadow:inset 6px 0 0 rgba(0,0,0,.14),0 2px 4px rgba(0,0,0,.12),0 18px 36px rgba(20,20,20,.22);
  transition:transform .18s ease,box-shadow .18s ease;
}
a.gcover:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:inset 6px 0 0 rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.14),0 26px 44px rgba(20,20,20,.26);}
.gcover::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.2) 1.1px,transparent 1.3px);background-size:12px 12px;
  -webkit-mask-image:linear-gradient(to bottom left,#000,transparent 60%);mask-image:linear-gradient(to bottom left,#000,transparent 60%);}
.gcover::after{content:"";position:absolute;right:-50px;top:-30px;width:150px;height:150px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);pointer-events:none;}
.gc-brand{position:relative;display:flex;align-items:center;gap:7px;font-size:.62rem;font-weight:700;}
.gc-brand img{width:26px;height:26px;border-radius:50%;background:#fff;padding:2px;}
.gc-kicker{position:relative;margin-top:auto;align-self:flex-start;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);border-radius:999px;padding:3px 8px;}
.gc-title{position:relative;font-family:'FrauncesBlack',Georgia,serif;font-weight:900;font-size:1.28rem;line-height:1.08;margin:10px 0 0;}
.gc-rule{position:relative;display:block;width:34px;height:4px;border-radius:2px;background:#C8962E;margin:12px 0 auto;}
.gc-badge{position:relative;align-self:flex-start;margin-top:14px;background:#C8962E;color:#1E2430;font-size:.62rem;font-weight:800;border-radius:999px;padding:4px 9px;}
.gcover[data-theme="coral"]{--c:#B5532E;--cd:#8A3B1E;--glow:#E89B7A;}
.gcover[data-theme="plum"] {--c:#6A4C93;--cd:#4B3470;--glow:#A98BD0;}
.gcover[data-theme="ocean"]{--c:#2F6485;--cd:#1E465F;--glow:#7FB0CF;}
.gcover[data-theme="ochre"]{--c:#9A6A12;--cd:#6E4A0B;--glow:#D9B064;}
.gcover[data-theme="rose"] {--c:#A8456B;--cd:#7A2F4D;--glow:#DC8CAB;}
.gcover.mini{padding:12px 11px;border-radius:4px 9px 9px 4px;}
.gcover.mini .gc-title{font-size:.78rem;margin-top:auto;}
.gcover.mini .gc-rule{width:22px;height:3px;margin:8px 0 0;}
.gc-shelf{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin:26px 0 8px;}
@media(max-width:860px){.gc-shelf{grid-template-columns:repeat(4,1fr);}}
@media(max-width:520px){.gc-shelf{grid-template-columns:repeat(3,1fr);}}
.gc-shelf-item{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);font-size:.8rem;font-weight:600;line-height:1.3;}
.gc-shelf-item:hover .gcover{transform:translateY(-3px);}
.gc-shelf-name{color:var(--ink-soft);}