/* GrammarPath articles, blog index, legal pages and thanks page.
   Load after /assets/brand/brand.css and /assets/brand/site.css (the gp:head partial).
   Uses only --gp-* tokens, so a brand change is made in brand.json, not here.
   Class names are kept from the original article template because
   scripts/build_article.py, scripts/build_links.py and scripts/build_index.py emit them.
   Colour rules: violet is the brand signature (links, eyebrows, small accents), not the
   fill for big blocks. Big dark blocks are Night with white text and yellow highlights,
   yellow is the one main button per view, and topic colours carry meaning (Scores and
   Maths blue, Admissions Night, Schools violet, Preparation yellow, subjects their own). */

:root{
  --art-gutter:max(16px,5%);
  --art-nav:68px;
  --art-text:var(--gp-night);
}
body{overflow-x:hidden}
main{display:block}

/* ── Shared bits ─────────────────────────────────────── */
.eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gp-violet);margin:0 0 12px}
.pill{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 13px;border-radius:99px;background:var(--gp-white);color:var(--gp-violet);border:1px solid var(--gp-line)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--gp-violet);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.02em;flex-shrink:0}
.btn-amber,.btn-navy{font-family:var(--gp-font);font-weight:700;font-size:16px;line-height:1.2;padding:14px 26px;border-radius:var(--gp-radius);border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn-amber{background:var(--gp-yellow);color:var(--gp-night);box-shadow:0 4px 0 var(--gp-yellow-deep)}
.btn-amber:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--gp-yellow-deep)}
.btn-navy{background:var(--gp-violet);color:#fff;box-shadow:0 4px 0 var(--gp-violet-deep)}
.btn-navy:hover{background:var(--gp-violet-deep)}
.link-arrow,.read-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:15px;color:var(--gp-violet);text-decoration:none}
.link-arrow:hover,.read-link:hover{text-decoration:underline;text-underline-offset:4px}
.wrap{max-width:1120px;margin:0 auto}

/* reading progress bar, sits under the fixed header */
.progress{position:fixed;top:var(--art-nav);left:0;height:3px;width:0;z-index:99;background:var(--gp-violet);transition:width .08s linear}

/* ── Article header ──────────────────────────────────── */
.art-head{background:var(--gp-cloud);padding:calc(var(--art-nav) + clamp(32px,5vw,56px)) var(--art-gutter) clamp(36px,5vw,56px)}
.art-head-inner{max-width:760px;margin:0 auto;position:relative}
@media (min-width:1200px){
  .art-head-inner{max-width:1120px;display:grid;grid-template-columns:56px minmax(0,720px) 300px;gap:0 32px}
  .art-head-inner > *{grid-column:2}
  .art-head-inner > .pill{justify-self:start}
}
.art-head h1{font-size:clamp(32px,4.2vw,52px);font-weight:var(--gp-w-display);line-height:1.08;letter-spacing:-.025em;color:var(--gp-night);margin:18px 0 18px;text-wrap:balance}
.art-head .lede{font-size:clamp(18px,1.6vw,20px);color:var(--gp-muted);line-height:1.6;margin:0 0 26px;max-width:62ch}
.art-meta{display:flex;align-items:center;gap:10px 14px;font-size:15px;color:var(--gp-muted);flex-wrap:wrap}
.art-meta strong{color:var(--gp-night);font-weight:600}
.art-meta .dot,.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--gp-line);display:inline-block}
.updated{background:var(--gp-white);color:var(--gp-night);border:1px solid var(--gp-line);font-size:13px;font-weight:600;padding:4px 12px;border-radius:99px}
.art-banner{margin-top:32px}
.art-banner img{width:100%;height:auto;display:block;border-radius:var(--gp-radius-lg);box-shadow:var(--gp-shadow)}

/* product screenshot under the header (pillar guide) */
.art-shot-wrap{max-width:820px;margin:clamp(28px,4vw,44px) auto 0;padding:0 var(--art-gutter);position:relative}
.art-shot{position:relative}
.art-shot img{display:block;width:100%;height:auto;border-radius:var(--gp-radius-lg);box-shadow:var(--gp-shadow-lg);border:1px solid var(--gp-line)}
.art-shot .float-badge{position:absolute;top:-14px;left:16px;background:var(--gp-violet);color:#fff;font-size:13px;font-weight:700;padding:7px 14px;border-radius:99px;box-shadow:var(--gp-shadow)}

/* ── Layout: share rail, article, sidebar ────────────── */
.art-layout{max-width:1120px;margin:0 auto;padding:clamp(36px,5vw,56px) var(--art-gutter) 0;display:grid;grid-template-columns:56px minmax(0,720px) 300px;gap:32px;align-items:start;box-sizing:content-box}
.share-rail{position:sticky;top:100px;display:flex;flex-direction:column;gap:10px}
.share-rail a{width:44px;height:44px;border-radius:12px;border:1px solid var(--gp-line);background:var(--gp-white);display:flex;align-items:center;justify-content:center;color:var(--gp-muted);text-decoration:none;font-weight:700;font-size:15px;transition:border-color .2s,color .2s,background .2s}
.share-rail a:hover{border-color:var(--gp-violet);color:var(--gp-violet);background:var(--gp-cloud)}
.art-main{min-width:0}

/* table of contents */
.toc{background:var(--gp-cloud);border-radius:var(--gp-radius-lg);padding:clamp(20px,3vw,26px) clamp(20px,3vw,28px);margin:0 0 44px}
.toc .eyebrow{margin-bottom:14px}
.toc ol{list-style:none;counter-reset:t;margin:0;padding:0}
.toc li{counter-increment:t;margin:0 0 10px}
.toc li:last-child{margin-bottom:0}
.toc a{text-decoration:none;color:var(--gp-night);font-size:16px;font-weight:500;line-height:1.45;display:flex;gap:14px}
.toc a::before{content:counter(t,decimal-leading-zero);color:var(--gp-violet);font-weight:800;font-variant-numeric:tabular-nums;flex-shrink:0}
.toc a:hover{color:var(--gp-violet);text-decoration:underline;text-underline-offset:4px}

/* ── Prose ───────────────────────────────────────────── */
.prose{font-size:18px;line-height:1.75;color:var(--art-text)}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(26px,2.8vw,34px);font-weight:var(--gp-w-display);line-height:1.18;letter-spacing:-.02em;color:var(--gp-night);margin:56px 0 16px;scroll-margin-top:100px}
.prose h3{font-size:clamp(20px,2vw,23px);font-weight:var(--gp-w-head);line-height:1.3;color:var(--gp-night);margin:34px 0 10px;scroll-margin-top:100px}
.prose h4{font-weight:var(--gp-w-head)}
.prose p{font-size:18px;line-height:1.75;color:var(--art-text);margin:0 0 22px}
.prose p strong,.prose li strong{color:var(--gp-night);font-weight:700}
.prose em{font-style:italic}
.prose ul{margin:0 0 24px;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;font-size:18px;line-height:1.7;color:var(--art-text);margin:0 0 12px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--gp-violet)}
.prose ol{margin:0 0 24px;padding-left:24px}
.prose ol li{font-size:18px;line-height:1.7;margin:0 0 10px;padding-left:4px}
.prose ol li::marker{color:var(--gp-violet);font-weight:700}
.prose a:not(.gp-btn){color:var(--gp-violet)}
.prose a.link{color:var(--gp-violet);font-weight:600;text-decoration:underline;text-decoration-color:rgba(107,59,255,.35);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .15s,color .15s}
.prose a.link:hover{color:var(--gp-violet-deep);text-decoration-color:currentColor}
.prose hr{border:0;border-top:1px solid var(--gp-line);margin:40px 0}
.prose img{height:auto;border-radius:var(--gp-radius)}

/* tables: Night header row (as the homepage comparison), scroll inside their own box on phones */
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:28px 0 30px;font-size:16px;background:var(--gp-white);border:1px solid var(--gp-line);border-radius:var(--gp-radius);overflow:hidden}
.prose thead th{background:var(--gp-night);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:13px 16px;border-bottom:1px solid var(--gp-night);vertical-align:bottom}
.prose tbody td{padding:14px 16px;border-top:1px solid var(--gp-line);color:var(--art-text);line-height:1.6;vertical-align:top}
.prose tbody tr:first-child td{border-top:0}
.prose tbody td strong{color:var(--gp-night)}
@media (max-width:640px){
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:15px}
  .prose thead th,.prose tbody td{padding:11px 12px;min-width:120px}
  .prose thead th:first-child,.prose tbody td:first-child{min-width:0}
}

/* key facts: a small Night panel with yellow highlights */
.keyfacts{background:var(--gp-night);border-radius:var(--gp-radius-lg);padding:clamp(22px,3.5vw,30px) clamp(22px,3.5vw,32px);margin:34px 0}
.keyfacts .eyebrow{color:var(--gp-yellow)}
.keyfacts ul{list-style:none;margin:0;padding:0}
.prose .keyfacts li{color:rgba(255,255,255,.92);font-size:16px;line-height:1.6;padding:10px 0 10px 28px;margin:0;position:relative;border-bottom:1px solid rgba(255,255,255,.12)}
.prose .keyfacts li:last-child{border-bottom:0;padding-bottom:0}
.prose .keyfacts li::before{content:"\2192";position:absolute;left:0;top:10px;width:auto;height:auto;background:none;border-radius:0;color:var(--gp-yellow);font-weight:700}
.prose .keyfacts li strong{color:#fff}

/* tutor insight: Cloud card with a violet rule */
.tutor-insight{background:var(--gp-cloud);border-left:4px solid var(--gp-violet);border-radius:0 var(--gp-radius-lg) var(--gp-radius-lg) 0;padding:clamp(22px,3vw,30px);margin:38px 0}
.tutor-insight .eyebrow{margin-bottom:8px}
.tutor-insight h4{font-size:clamp(20px,2vw,23px);font-weight:var(--gp-w-head);line-height:1.3;color:var(--gp-night);margin:0 0 12px}
.prose .tutor-insight p{font-size:17px;line-height:1.75;margin:0 0 14px}
.prose .tutor-insight p:last-child{margin-bottom:0}
.prose .tutor-insight .ti-attrib{font-size:14px;font-weight:600;color:var(--gp-violet);margin-top:18px}

/* related guides inside the article (written by scripts/build_links.py) */
.prose .related{border:1px solid var(--gp-line);border-radius:var(--gp-radius-lg);padding:24px 26px;margin:38px 0;background:var(--gp-white)}
.prose .related ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.prose .related li{margin:0;padding:0}
.prose .related li::before{display:none}
.prose .related a{color:var(--gp-violet);font-weight:700;font-size:17px;text-decoration:none}
.prose .related a:hover{text-decoration:underline;text-underline-offset:4px}
.prose .related p{color:var(--gp-muted);font-size:15px;margin:2px 0 0;line-height:1.55}

/* the article's call to action: a Night panel with a yellow eyebrow and the view's one yellow button */
.inline-cta{background:var(--gp-night);border-radius:var(--gp-radius-lg);padding:clamp(24px,3.5vw,34px);margin:40px 0;display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap}
.inline-cta > div{flex:1 1 300px}
.inline-cta .eyebrow{color:var(--gp-yellow);margin-bottom:6px}
.inline-cta h4{font-size:clamp(21px,2.2vw,25px);font-weight:var(--gp-w-display);letter-spacing:-.015em;line-height:1.2;color:#fff;margin:0 0 8px}
.prose .inline-cta p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.92);margin:0}
.inline-cta .gp-btn,.inline-cta .btn-amber{flex-shrink:0}

/* author */
.author-card{margin:56px 0 0;background:var(--gp-cloud);border-radius:var(--gp-radius-lg);padding:clamp(22px,3.5vw,30px);display:flex;gap:20px;align-items:flex-start}
.author-card .avatar{width:60px;height:60px;font-size:20px}
.author-card .eyebrow{margin-bottom:6px}
.author-card h4{font-size:21px;font-weight:var(--gp-w-head);color:var(--gp-night);margin:0 0 8px}
.prose .author-card p{font-size:16px;color:var(--gp-muted);line-height:1.65;margin:0}

/* ── Sidebar ─────────────────────────────────────────── */
.side{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px}
.side-card{border:1px solid var(--gp-line);border-radius:var(--gp-radius-lg);padding:22px;background:var(--gp-white)}
.side-card .gp-chip{margin-bottom:12px}
.side-card h4{font-size:19px;font-weight:var(--gp-w-head);color:var(--gp-night);line-height:1.3;margin:0 0 8px}
.side-card p{font-size:15px;color:var(--gp-muted);line-height:1.6;margin:0 0 16px}
.side-card .price{display:flex;align-items:baseline;gap:8px;margin:0 0 16px;font-size:14px;color:var(--gp-muted)}
.side-card .price b{font-size:26px;font-weight:var(--gp-w-display);color:var(--gp-night);letter-spacing:-.02em}
.side-card .gp-btn,.side-card .btn-amber,.side-card .btn-navy{width:100%;padding:12px 16px;font-size:15px}
.side-card .gp-link{display:inline-block;margin-top:12px;font-size:15px}
/* Maths Pack 1: a maths-blue rule and chip, Night text on the blue (6.4:1) */
.side-card.pack{background:var(--gp-cloud);border-color:var(--gp-cloud);border-top:6px solid var(--gp-maths)}
.side-card.pack .gp-chip{background:var(--gp-maths);color:var(--gp-night)}
.popular .eyebrow{margin-bottom:4px}
.popular a{display:block;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--gp-line)}
.popular a:last-child{border-bottom:0;padding-bottom:0}
.popular a span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gp-muted)}
.popular a p{font-size:15px;color:var(--gp-night);font-weight:600;line-height:1.4;margin:3px 0 0}
.popular a:hover p{color:var(--gp-violet);text-decoration:underline;text-underline-offset:3px}

/* ── Keep reading grid (pillar guide) ────────────────── */
.related{background:var(--gp-cloud);margin-top:72px;padding:64px var(--art-gutter)}
.grid-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.grid-head h2{font-size:clamp(26px,3vw,36px);font-weight:var(--gp-w-display);color:var(--gp-night)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post-card{background:var(--gp-white);border:1px solid var(--gp-line);border-radius:var(--gp-radius-lg);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;padding:0 0 22px;transition:box-shadow .2s,transform .2s}
.post-card:hover{box-shadow:var(--gp-shadow);transform:translateY(-3px)}
.post-card h3{font-size:19px;font-weight:var(--gp-w-head);color:var(--gp-night);line-height:1.3;margin:0 22px 10px}
.post-card p{font-size:15px;color:var(--gp-muted);line-height:1.6;margin:0 22px 16px;flex:1}
.post-card .meta{margin:0 22px}
.card-cover{height:132px;margin:0 0 20px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:16px;background:var(--gp-maths)}
/* the modifier classes predate the rebrand: plain = Scores (maths blue), .c = Schools (violet), .n = Preparation (yellow) */
.card-cover.c{background:var(--gp-violet)}
.card-cover.n{background:var(--gp-yellow)}
.card-cover .glyph{position:absolute;top:-14px;right:8px;font-size:96px;font-weight:800;letter-spacing:-.04em;line-height:1;color:rgba(27,15,74,.12);pointer-events:none}
.card-cover.c .glyph{color:rgba(255,255,255,.14)}
.card-cover .cov-tag{position:relative;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--gp-night);background:rgba(255,255,255,.6);padding:5px 11px;border-radius:99px}
.card-cover.c .cov-tag{background:rgba(255,255,255,.18);color:#fff}
.meta{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gp-muted)}
.meta strong{color:var(--gp-night);font-weight:600}

/* ── Closing band ────────────────────────────────────── */
.cta-band{background:var(--gp-night);padding:clamp(56px,7vw,84px) var(--art-gutter);text-align:center;margin-top:72px}
.related + .cta-band{margin-top:0}
.cta-band .eyebrow{margin-bottom:12px;color:var(--gp-yellow)}
.cta-band h2{font-size:clamp(28px,3.4vw,42px);font-weight:var(--gp-w-display);letter-spacing:-.02em;color:#fff;margin:0 auto 14px;max-width:760px;text-wrap:balance}
.cta-band p{font-size:18px;color:rgba(255,255,255,.86);line-height:1.65;margin:0 auto 30px;max-width:620px}
.cta-band .gp-btn-outline{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.cta-band .gp-btn-outline:hover{background:rgba(255,255,255,.1)}
.cta-band .gp-btn-outline:focus-visible{outline-color:var(--gp-yellow)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width:1100px){
  .art-layout{grid-template-columns:minmax(0,1fr);gap:0;max-width:740px}
  .share-rail{position:static;flex-direction:row;margin-bottom:24px;order:0}
  .side{position:static;margin-top:52px}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .inline-cta{flex-direction:column;align-items:stretch}
  .inline-cta .gp-btn{width:100%}
  .author-card{flex-direction:column;gap:14px}
  .prose,.prose p,.prose ul li,.prose ol li{font-size:17px}
  .prose h2{margin-top:44px}
}
@media (max-width:520px){
  .cta-actions .gp-btn{width:100%}
  .art-meta{font-size:14px}
  .art-meta .dot{display:none}
}

/* ── Legal pages and thanks page ─────────────────────── */
.legal-head{background:var(--gp-cloud);padding:calc(var(--art-nav) + clamp(40px,6vw,72px)) var(--art-gutter) clamp(40px,6vw,64px);text-align:center}
.legal-head-inner{max-width:760px;margin:0 auto}
.legal-eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gp-violet);margin-bottom:14px}
.legal-head h1{font-size:clamp(34px,5vw,54px);font-weight:var(--gp-w-display);line-height:1.08;letter-spacing:-.025em;color:var(--gp-night);margin:0 0 16px;text-wrap:balance}
.legal-head .sub{font-size:clamp(17px,1.6vw,19px);color:var(--gp-muted);line-height:1.65;max-width:600px;margin:0 auto}
.legal-head .updated{display:inline-block;margin:22px 0 0;font-size:13px;color:var(--gp-muted);background:var(--gp-white)}
.legal-actions{margin:30px 0 0}
.thanks-head{min-height:calc(100vh - 260px);display:flex;align-items:center;justify-content:center;padding-bottom:clamp(72px,10vw,110px)}
.legal-wrap{padding:clamp(40px,6vw,72px) var(--art-gutter) clamp(56px,8vw,96px)}
.legal-card{max-width:760px;margin:0 auto}
.legal-content{font-size:17px;line-height:1.75;color:var(--art-text)}
.legal-content h2{font-size:clamp(21px,2.3vw,26px);font-weight:var(--gp-w-head);letter-spacing:-.01em;color:var(--gp-night);margin:44px 0 12px;padding-top:28px;border-top:1px solid var(--gp-line)}
.legal-content h2:first-child,.legal-content .lead + h2{margin-top:36px}
.legal-content h3{font-size:19px;font-weight:var(--gp-w-head);margin:26px 0 8px}
.legal-content p{font-size:17px;line-height:1.75;margin:0 0 16px}
.legal-content p.lead{font-size:clamp(18px,1.7vw,20px);color:var(--gp-muted);line-height:1.65;margin-bottom:8px}
.legal-content ul,.legal-content ol{margin:0 0 18px;padding-left:22px}
.legal-content li{font-size:17px;line-height:1.7;margin-bottom:8px;padding-left:4px}
.legal-content li::marker{color:var(--gp-violet)}
.legal-content a{color:var(--gp-violet);font-weight:600;text-decoration:underline;text-decoration-color:rgba(107,59,255,.35);text-underline-offset:3px}
.legal-content a:hover{color:var(--gp-violet-deep);text-decoration-color:currentColor}
.legal-content strong{color:var(--gp-night);font-weight:700}
.legal-content hr{border:0;border-top:1px solid var(--gp-line);margin:36px 0 24px}
.legal-back{max-width:760px;margin:40px auto 0}
.legal-back a{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--gp-violet);text-decoration:none}
.legal-back a:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Blog index ──────────────────────────────────────── */
.bi-head{background:var(--gp-cloud);padding:calc(var(--art-nav) + clamp(40px,6vw,72px)) var(--art-gutter) clamp(44px,6vw,64px)}
.bi-head-inner{max-width:1120px;margin:0 auto}
.bi-head h1{font-size:clamp(36px,5vw,60px);font-weight:var(--gp-w-display);line-height:1.05;letter-spacing:-.025em;margin:0 0 16px;max-width:820px;text-wrap:balance}
.bi-head p{font-size:clamp(17px,1.6vw,19px);color:var(--gp-muted);line-height:1.65;margin:0;max-width:640px}
.bi-list{padding:clamp(44px,6vw,72px) var(--art-gutter) 0}
.bi-inner{max-width:1120px;margin:0 auto}
.bi-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.bi-label h2{font-size:clamp(24px,2.6vw,30px);font-weight:var(--gp-w-display)}
.bi-label span{font-size:15px;color:var(--gp-muted)}
.bi-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);background:var(--gp-white);border:1px solid var(--gp-line);border-radius:var(--gp-radius-lg);overflow:hidden;text-decoration:none;margin:0 0 56px;transition:box-shadow .2s,transform .2s}
.bi-feature:hover{box-shadow:var(--gp-shadow-lg);transform:translateY(-3px)}
.bi-feature{align-items:center;padding:clamp(12px,1.6vw,18px)}
.bi-feature .bi-cover{aspect-ratio:760/300;border-radius:var(--gp-radius)}
.bi-feature .bi-body{padding:clamp(10px,2vw,20px) clamp(10px,2.4vw,28px)}
.bi-feature h2{font-size:clamp(24px,2.6vw,32px);line-height:1.2}
.bi-feature p{font-size:16px;flex:0 0 auto}
.bi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bi-card{background:var(--gp-white);border:1px solid var(--gp-line);border-radius:var(--gp-radius-lg);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.bi-card:hover{box-shadow:var(--gp-shadow);transform:translateY(-3px)}
.bi-card:hover h2,.bi-feature:hover h2{color:var(--gp-violet)}
.bi-cover{position:relative;aspect-ratio:760/300;overflow:hidden;background:var(--gp-violet);display:flex;align-items:flex-end;padding:16px}
.bi-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* fallback covers when an article has no image, by category (scripts/build_index.py) */
.bi-cover.v{background:var(--gp-violet)}
.bi-cover.n{background:var(--gp-night)}
.bi-cover.c{background:var(--gp-cloud)}
.bi-cover.m{background:var(--gp-maths)}
.bi-cover.y{background:var(--gp-yellow)}
.bi-cover.vr{background:var(--gp-verbal)}
.bi-cover.nvr{background:var(--gp-non-verbal)}
.bi-cover.en{background:var(--gp-english)}
.bi-glyph{position:absolute;top:-10px;right:10px;font-size:90px;font-weight:800;letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.16)}
.bi-cover.c .bi-glyph{color:rgba(107,59,255,.16)}
.bi-cover.m .bi-glyph,.bi-cover.y .bi-glyph,.bi-cover.vr .bi-glyph,.bi-cover.nvr .bi-glyph{color:rgba(27,15,74,.14)}
.bi-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.bi-body .gp-chip{align-self:flex-start;margin-bottom:12px}
.bi-body h2{font-size:19px;font-weight:var(--gp-w-head);line-height:1.3;letter-spacing:-.01em;color:var(--gp-night);margin:0 0 10px;transition:color .15s}
.bi-body p{font-size:15px;color:var(--gp-muted);line-height:1.6;margin:0 0 16px;flex:1}
.bi-meta{font-size:14px;color:var(--gp-muted)}
@media (max-width:980px){.bi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bi-feature{grid-template-columns:minmax(0,1fr)}.bi-feature .bi-cover{min-height:0}}
@media (max-width:640px){.bi-grid{grid-template-columns:minmax(0,1fr)}}