:root{
  --pg-bg:#fff; --pg-surface:#fff; --pg-band:var(--rose-100);
  --pg-border:1px solid var(--color-neutral-lt); --pg-radius:0;
  --pg-shadow:0 2px 10px rgba(133,32,27,.05);
  --pg-hw:700; --pg-track:-.015em; --pg-btn-radius:0; --pg-measure:42rem;
}

body{background:var(--pg-bg)}
main{display:block}

/* ---------- breadcrumb ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  font-size:.75rem;color:var(--ink-subtle);padding:var(--spacing-lg) 0 0}
.crumb a:hover{color:var(--color-accent)}
.crumb .sep{color:var(--color-neutral-lt)}

/* ---------- article masthead ---------- */
.mast{padding:var(--spacing-lg) 0 var(--spacing-xl);max-width:var(--pg-measure)}
.mast h1{font-size:clamp(1.75rem,4.2vw,2.875rem);font-weight:var(--pg-hw);
  letter-spacing:var(--pg-track);line-height:1.2;margin:.6rem 0}
.mast .dek{font-size:1.0625rem;color:var(--ink-mid);margin-top:var(--spacing-sm)}
.byline{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  margin-top:var(--spacing-md);padding-top:var(--spacing-sm);
  border-top:1px solid var(--color-neutral-lt);font-size:.8125rem;color:var(--ink-subtle)}
.byline b{color:var(--ink-mid);font-weight:700}
.hero-fig{margin:0 0 var(--spacing-xl)}
.hero-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--pg-radius)}
.hero-fig figcaption{margin-top:.6rem;font-size:.75rem;color:var(--ink-subtle)}

/* ---------- two-column page grid ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--spacing-2xl);
  align-items:start;padding-bottom:var(--spacing-2xl)}
/* An article is 672 of text and a 300 rail. Held inside the 1180 wrap the
   leftover 208px sat between them as a dead band, which is what Matt circled.
   Narrow the article wrap to exactly what the two columns need. */
.article .wrap{width:min(1020px,100% - 2.5rem)}
.article .cols{grid-template-columns:var(--pg-measure) 300px;
  justify-content:space-between;gap:var(--spacing-xl)}
@media(max-width:1020px){.article .cols{grid-template-columns:1fr}}
/* Matt, 2026-09-08: the rail pinned at 4rem while the sticky header is 71px
   tall, so the top edge of the first box sat under it and read as cut off.
   Clear the header, then a gap. */
.side{position:sticky;top:5.5rem;display:grid;gap:var(--spacing-lg)}
.sidebox{background:var(--pg-surface);border:var(--pg-border);border-radius:var(--pg-radius);
  box-shadow:var(--pg-shadow);padding:var(--spacing-md)}
.sidebox h3{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-dusty);margin-bottom:var(--spacing-sm)}
.sidelist{display:grid;gap:.75rem}
.sidelist a{display:grid;grid-template-columns:1.6rem 1fr;gap:.6rem;align-items:start}
.sidelist span{font-size:.8125rem;line-height:1.5;color:var(--ink-mid)}
.sidelist a:hover span{color:var(--color-accent)}
.sidelist .rank{font-family:var(--font-display);font-weight:700;color:var(--rose-300);
  font-size:.875rem}

/* ---------- prose ---------- */
.prose{max-width:var(--pg-measure);font-size:1.0625rem;line-height:1.9;color:var(--ink-mid)}
.prose > * + *{margin-top:var(--spacing-md)}
.prose h2{font-size:clamp(1.25rem,2.6vw,1.625rem);font-weight:700;letter-spacing:-.01em;
  margin-top:var(--spacing-xl);scroll-margin-top:5rem}
.prose h2 .hsub{display:block;font-size:.8125rem;font-weight:400;letter-spacing:.02em;
  margin-top:.25rem}
.prose h2 .hsub a{color:var(--ink-subtle)}
.prose h2 .hsub a:hover{color:var(--color-accent)}
.prose h3{font-size:1.125rem;margin-top:var(--spacing-lg)}
.prose strong{color:var(--color-accent)}
.prose figure{margin:var(--spacing-xl) 0}
.prose figure img{width:100%;border-radius:var(--pg-radius)}
.prose figcaption{margin-top:.5rem;font-size:.75rem;color:var(--ink-subtle)}

/* ---------- GEO: the answer box a model can lift whole ---------- */
.tldr{background:var(--burgundy-100);border-left:3px solid var(--color-accent);
  padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--pg-radius);
  max-width:var(--pg-measure)}
.tldr h2{font-family:var(--font-display);font-size:.6875rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--burgundy-700);margin:0 0 .6rem}
.tldr ol{display:grid;gap:.5rem;padding-left:1.2rem;list-style:decimal;
  font-size:.9375rem;line-height:1.7;color:var(--ink-mid)}
.tldr p{font-size:.9375rem;line-height:1.75}

.pull{border-top:2px solid var(--color-accent);border-bottom:1px solid var(--color-neutral-lt);
  padding:var(--spacing-md) 0;margin:var(--spacing-xl) 0;max-width:var(--pg-measure)}
.pull p{font-family:var(--font-display);font-size:clamp(1.125rem,2.4vw,1.5rem);
  font-weight:var(--pg-hw);line-height:1.45;letter-spacing:var(--pg-track);color:var(--color-accent)}

/* ---------- FAQ (FAQPage schema sits in the head) ---------- */
.faq{max-width:var(--pg-measure);margin-top:var(--spacing-2xl)}
.faq > h2{font-size:1.375rem;margin-bottom:var(--spacing-md)}
.faq details{border-bottom:1px solid var(--color-neutral-lt);padding:.9rem 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--color-accent);
  font-family:var(--font-display);font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--color-primary);font-weight:400;font-size:1.25rem}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:.6rem;font-size:.9375rem;line-height:1.8}

/* ---------- tags / author ---------- */
.tagrow{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:var(--spacing-xl);
  max-width:var(--pg-measure)}
.tagrow a,.tagrow span{font-size:.75rem;padding:.3rem .7rem;border-radius:999px;
  border:1px solid var(--color-neutral-lt);color:var(--ink-subtle)}
.tagrow a:hover{border-color:var(--color-dusty);color:var(--color-dusty)}

/* ---------- section heads / bands ---------- */
.shead{display:flex;align-items:baseline;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}
.shead h2{font-size:1.375rem}
.shead .line{flex:1;height:1px;background:var(--color-neutral-lt)}
.shead a{font-size:.8125rem;color:var(--ink-subtle);white-space:nowrap}
.band{background:var(--pg-band);padding:var(--spacing-2xl) 0;margin-top:var(--spacing-3xl)}

/* ---------- cards ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}
.cardgrid.two{grid-template-columns:repeat(2,1fr)}
.pcard{display:flex;flex-direction:column;background:var(--pg-surface);
  border:var(--pg-border);border-radius:var(--pg-radius);box-shadow:var(--pg-shadow);
  overflow:hidden;transition:.25s}
.pcard:hover{transform:translateY(-4px)}
.pcard img{width:100%;height:auto;display:block}
.pcard .b{padding:var(--spacing-md);display:flex;flex-direction:column;gap:.45rem;flex:1}
.pcard h3{font-size:1rem;line-height:1.5}
.pcard:hover h3{color:var(--color-dusty)}
.pcard p{font-size:.875rem;color:var(--ink-subtle);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .m{margin-top:auto;padding-top:.4rem;font-size:.75rem;color:var(--ink-subtle)}
.kchip{display:inline-block;align-self:flex-start;font-family:var(--font-display);
  font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:999px;background:var(--burgundy-100);color:var(--burgundy-700)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--color-accent);color:#fff;
  font-family:var(--font-display);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;padding:.9rem 2rem;border-radius:var(--pg-btn-radius);transition:.2s}
.btn:hover{background:var(--burgundy-700)}
.btn.ghost{background:transparent;color:var(--color-accent);border:1px solid var(--color-accent)}
.btn.ghost:hover{background:var(--color-accent);color:#fff}

/* ---------- ads ---------- */
/* A slot is a hole of a fixed size. The creative fills it; nothing sits beside
   it. Dashed edge + size tag are demo scaffolding and come off with the manager.
   Class names avoid ad-blocker filter keywords on purpose — see SLOT_CLASS. */
.mslot{position:relative;display:block;border:1px dashed var(--color-neutral-lt);
  padding:.5rem;margin-block:var(--spacing-xl)}
.mslot-cap,.mslot-dim{font-family:var(--font-display);font-size:.5625rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-subtle);line-height:1}
.mslot-cap{display:block;margin-bottom:.45rem}
.mslot-dim{position:absolute;right:.6rem;top:.5rem;font-weight:400;color:var(--color-neutral-lt)}
.mslot-box{display:block;overflow:hidden;background:var(--linen)}
.mslot-svg{display:block;width:100%;height:100%}

.mslot-w1 .mslot-box{aspect-ratio:970/250}
.mslot-w2 .mslot-box{aspect-ratio:728/90}
.mslot-r1 .mslot-box{aspect-ratio:300/250}
.mslot-r2 .mslot-box{aspect-ratio:300/600}
.mslot-m1 .mslot-box{aspect-ratio:320/100}
.mslot-r1,.mslot-r2{max-width:316px;margin-inline:auto}
/* never render a slot wider than the creative it holds */
.mslot-w1{max-width:986px;margin-inline:auto}
.mslot-w2{max-width:744px;margin-inline:auto}
.side .mslot{margin-block:0;max-width:none}

/* ---------- prev / next ---------- */
.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);
  margin-top:var(--spacing-3xl);border-top:1px solid var(--color-neutral-lt);
  padding-top:var(--spacing-lg)}
.pagenav a{display:block}
.pagenav .k{font-family:var(--font-display);font-size:.625rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-subtle)}
.pagenav .t{display:block;margin-top:.35rem;font-size:1rem;line-height:1.45;
  font-family:var(--font-display);font-weight:700;color:var(--color-accent)}
.pagenav .nx{text-align:right}

/* ---------- responsive ---------- */
@media(max-width:1020px){.cols{grid-template-columns:1fr}
  .side{position:static;grid-template-columns:1fr 1fr}
  .cardgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.nav{display:none}
  .side{grid-template-columns:1fr}
  .cardgrid,.cardgrid.two{grid-template-columns:1fr}
  /* the wide desktop units swap to the mobile size, as they would in production */
  .mslot-w1 .mslot-box,.mslot-w2 .mslot-box{aspect-ratio:320/100}
  .pagenav{grid-template-columns:1fr}.pagenav .nx{text-align:left}}

/* The eyebrow, the intro and the .chips row went on 2026-09-17, and the big
   title went with them an hour later — see the note in build_list(). The h1
   stays in the markup unseen: it is the page's only heading, and a screen
   reader landing here would otherwise be told nothing about where it is. The
   text is the same word the menu, the breadcrumb and the <title> all carry,
   so nothing is being said to a crawler that is not said to a reader. */
.cathero{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
/* Matt, 2026-09-08: an article with no picture was rendering an empty frame
   with its alt text sitting in it. No picture, no frame. */
.featured.nopic{grid-template-columns:1fr}
.featured{display:grid;grid-template-columns:1.3fr 1fr;gap:0;align-items:center;
  background:var(--pg-surface);border:var(--pg-border);border-radius:var(--pg-radius);
  box-shadow:var(--pg-shadow);overflow:hidden;margin-bottom:var(--spacing-2xl)}
.featured img{width:100%;height:auto;display:block}
.featured .b{padding:var(--spacing-xl);display:flex;flex-direction:column;
  justify-content:center;gap:.55rem}
.featured h2{font-size:clamp(1.375rem,2.8vw,2rem);font-weight:var(--pg-hw);
  letter-spacing:var(--pg-track);line-height:1.25;margin:.3rem 0}
.featured p{color:var(--ink-mid);font-size:.9375rem}
.featured .btn{align-self:flex-start;margin-top:var(--spacing-sm)}
.pager2{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:var(--spacing-2xl);padding-top:var(--spacing-lg);
  border-top:1px solid var(--color-neutral-lt);font-size:.875rem;color:var(--ink-subtle)}
.pager2 .pp{display:flex;gap:.35rem}
.pager2 .pp a{padding:.4rem .75rem;border:1px solid var(--color-neutral-lt);
  border-radius:var(--pg-btn-radius);font-family:var(--font-display);font-size:.75rem;font-weight:700}
.pager2 .pp a.on{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
@media(max-width:760px){.featured{grid-template-columns:1fr}}

.foot{margin-top:var(--spacing-3xl);padding:var(--spacing-2xl) 0 var(--spacing-lg);
  border-top:1px solid var(--color-neutral-lt)}
.footgrid{display:grid;gap:var(--spacing-xl);
  grid-template-columns:1.4fr 1fr .8fr;align-items:start}
.footlogo{opacity:.9}
.footnote{margin-top:var(--spacing-sm);font-size:.9375rem;color:var(--ink-subtle);max-width:22rem}
.footlinks,.footsocial ul{display:grid;gap:.45rem;font-size:.9375rem}
.footlinks a:hover,.footsocial a:hover{color:var(--color-accent)}
.footsocial .eyebrow{margin-bottom:.6rem}
.footbase{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:var(--spacing-xl);padding-top:var(--spacing-md);
  border-top:1px solid var(--color-neutral-lt);
  font-size:.8125rem;color:var(--ink-subtle)}
.samplenote{font-family:var(--font-display);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-primary)}
@media(max-width:820px){.footgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr}}

.tgtop{border-bottom:1px solid var(--color-neutral-lt);padding:var(--spacing-md) 0}
.tgtop .wrap{display:flex;align-items:center;gap:var(--spacing-lg);flex-wrap:wrap}
.tglogo img{display:block;height:auto}
.tgnav{display:flex;gap:var(--spacing-lg);margin-left:auto;flex-wrap:wrap}
.tgnav a{font-family:var(--font-display);font-size:.8125rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-subtle)}
.tgnav a:hover{color:var(--color-accent)}
.tghero{padding:var(--spacing-xl) 0 var(--spacing-lg);
  border-bottom:1px solid var(--color-neutral-lt);margin-bottom:var(--spacing-xl)}
.tghero h1{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.25rem 0 .5rem;word-break:break-word}
.tgcount{color:var(--ink-subtle);font-size:.9375rem}
.tgempty{color:var(--ink-subtle);padding:var(--spacing-xl) 0 var(--spacing-md)}
.tgempty-links{display:flex;gap:var(--spacing-lg);flex-wrap:wrap;
  padding-bottom:var(--spacing-2xl)}
.tgempty-links a{font-family:var(--font-display);font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}
.tgfoot{border-top:1px solid var(--color-neutral-lt);margin-top:var(--spacing-2xl);
  padding:var(--spacing-lg) 0;color:var(--ink-subtle);font-size:.875rem}
.tgfoot .wrap{display:flex;justify-content:space-between;gap:var(--spacing-md);flex-wrap:wrap}

/* Matt, 2026-09-10, reversing his own call of 2026-09-09: "We can have english
   on our website... reopen the langauge select button." The toggle is offered
   again on every layout, and English is a thing staff can ask for. */
.menubtn,.mnav{display:none}
@media(max-width:760px){
  .nav{display:none}
  .topbar .wrap{gap:var(--spacing-sm)}
  .topbar img{width:150px}
  /* .nav carried the margin-left:auto that pushed everything right; with it
     hidden on a phone the buttons collapsed back against the logo. */
  .topbar .langbtn{margin-left:auto}

  .menubtn{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;
    border:1px solid var(--color-neutral-lt);background:#fff;color:var(--color-accent);
    padding:0;cursor:pointer}
  .menubtn span{position:relative;display:block;width:1.05rem;height:2px;
    background:currentColor}
  .menubtn span::before,.menubtn span::after{content:"";position:absolute;left:0;
    width:100%;height:2px;background:currentColor}
  .menubtn span::before{top:-6px}
  .menubtn span::after{top:6px}
  .menubtn[aria-expanded="true"]{background:var(--color-accent);color:#fff;
    border-color:var(--color-accent)}

  .mnav{display:block;background:#fff;border-top:1px solid var(--color-neutral-lt)}
  .mnav[hidden]{display:none}
  .mnav ul{display:grid}
  .mnav a{display:block;padding:.9rem var(--spacing-md);font-size:1rem;
    color:var(--ink-mid);border-bottom:1px solid var(--color-neutral-lt)}
  .mnav a:hover,.mnav a.on{color:var(--color-accent)}
  .mnav a.on{font-weight:700}
}