/* The Reading Chair — an independent books letter
   Direction: "The Long Read". One review carries the front page. */

:root{
  --ground:#241730;      /* deep plum, the desk the letter sits on */
  --ground-2:#3B2440;    /* plum bands */
  --paper:#EFE7DA;       /* warm oat */
  --paper-2:#E6DCCB;     /* oat, one step down */
  --ink:#3B2440;         /* ink is plum, never black */
  --ink-soft:#5A4160;
  --muted:#7A5F80;
  --brass:#C08B4A;
  --tan:#7A4A2E;
  --rule:rgba(59,36,64,.2);
  --rule-soft:rgba(59,36,64,.12);
  --shell:min(1320px, calc(100% - clamp(28px,6vw,132px)));
  --measure:36em;
  --air:clamp(56px,7vw,104px);
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --prose:"Source Serif 4",Georgia,serif;
  --meta:"Archivo","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--prose);
  font-size:21px;
  line-height:1.72;
  font-synthesis-weight:none;
}
img{max-width:100%;display:block}
a{color:var(--tan);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#8A5A22}
::selection{background:var(--brass);color:var(--ground)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* ── shell ─────────────────────────────────────────────── */
.shell{max-width:var(--shell);margin:0 auto;background:var(--paper);box-shadow:0 30px 90px rgba(0,0,0,.42)}
.band{padding-inline:clamp(24px,6vw,88px)}
.masthead.band{padding-inline:clamp(16px,2.5vw,30px)}
.hr-brass{border:0;height:2px;background:var(--ground-2);margin:0}

/* ── kickers, metas, labels ────────────────────────────── */
.kicker{font-family:var(--meta);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--tan);margin:0}
.kicker--brass{color:var(--brass)}
.meta{font-family:var(--meta);font-size:14px;letter-spacing:.1em;color:var(--muted);margin:0}
.eyebrow{font-family:var(--meta);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.dek{font-family:var(--display);font-style:italic;font-size:clamp(21px,2.2vw,26px);line-height:1.45;color:var(--ink-soft);margin:.7em 0 0;text-wrap:pretty}

/* ── masthead ──────────────────────────────────────────── */
.masthead{padding-top:34px;max-width:var(--shell);margin:0 auto;background:var(--paper);color:var(--ink);box-shadow:0 -30px 90px rgba(0,0,0,.42)}
.masthead__strip{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:baseline;
  padding-inline:clamp(8px,2vw,26px);
  font-family:var(--meta);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.masthead__wordmark{display:block;text-align:center;margin:44px 0 0;text-decoration:none;color:var(--ink)}
.masthead__wordmark span{display:block;font-family:var(--display);font-weight:400;font-size:clamp(46px,7.6vw,94px);line-height:1;letter-spacing:-.03em}
.masthead__strapline{text-align:center;font-family:var(--display);font-style:italic;font-size:clamp(18px,2vw,23px);color:var(--ink-soft);margin:16px 0 40px}

/* ── nav + dropdowns (CSS only) ─────────────────────────── */
.nav{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:visible}
.nav__list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0;gap:0 10px}
.nav__list>li{position:relative}
.nav__list>li>a{position:relative}
.nav__list a{display:block;padding:15px 14px;font-family:var(--meta);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav__list a[aria-current="page"]{color:var(--tan);box-shadow:inset 0 -3px 0 var(--brass)}
.nav__list>li>a:hover{background:var(--ground-2);color:var(--paper)}
.nav-sub{list-style:none;margin:0;padding:10px 0;position:absolute;left:0;top:100%;z-index:40;
  width:max-content;min-width:300px;max-width:min(340px,86vw);
  background:var(--ground-2);border-top:2px solid var(--brass);box-shadow:0 24px 50px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s,transform .16s}
.nav__list>li:nth-last-child(-n+4) .nav-sub{left:auto;right:0}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px} /* hover bridge */
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-sub a{color:#E6D8EA;font-family:var(--prose);font-size:17px;letter-spacing:0;text-transform:none;
  padding:9px 22px;line-height:1.35}
.nav-sub a:hover{background:rgba(192,139,74,.22);color:#fff}
.nav-sub__head{display:block;padding:4px 22px 10px;font-family:var(--meta);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass)}
.nav__toggle,.nav__toggle-label{display:none}

/* ── the long read (homepage lead) ─────────────────────── */
.longread{padding-block:var(--air) 0;text-align:center}
.longread h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.4vw,78px);line-height:1.02;
  letter-spacing:-.025em;margin:.34em auto 0;max-width:17em}
.longread h1 em,.title-em{font-style:italic}
.longread .dek{max-width:27em;margin-inline:auto}
.byline{font-family:var(--meta);font-size:14px;letter-spacing:.12em;color:var(--muted);margin:30px 0 0}
.longread__figure{margin:clamp(40px,5.5vw,64px) 0 0}
.longread__figure img{width:100%;height:clamp(260px,38vw,460px);object-fit:cover}
.longread__body{display:block;padding-top:clamp(40px,5vw,66px);text-align:left}
.longread__prose{max-width:34em;margin-inline:auto}
.longread__prose>p{margin:0 0 1.3em}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:5.2em;line-height:.76;padding:.08em .12em 0 0;color:var(--tan)}
.cta-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:36px;justify-content:center}
.btn{display:inline-block;font-family:var(--meta);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 28px;background:var(--ground-2);color:var(--paper);text-decoration:none}
.btn:hover{background:var(--brass);color:var(--ground);}
.cta-row .note-inline{font-family:var(--display);font-style:italic;color:var(--muted);font-size:18px}

/* ── book plate — typographic, never jacket art ────────── */
.plate{color:#F4EADC;padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;
  background:var(--tan)}
.plate__for{font-family:var(--meta);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.plate__title{font-family:var(--display);font-style:italic;font-size:clamp(30px,3.4vw,44px);line-height:1.02;letter-spacing:-.02em}
.plate__author{font-family:var(--meta);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.plate__rule{width:46px;height:2px;background:rgba(255,255,255,.75)}
.plate__form{font-family:var(--display);font-style:italic;font-size:17px;color:rgba(255,255,255,.82)}
.plate__argues{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.28)}
.plate__argues .eyebrow{color:rgba(255,255,255,.72);display:block;margin-bottom:8px}
.plate__argues ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.plate__argues a{color:#F4EADC;font-family:var(--display);font-size:19px;text-decoration:none;
  border-bottom:1px solid rgba(244,234,220,.35)}
.plate__argues a:hover{color:#fff;border-color:rgba(255,255,255,.8)}
/* light tints (e.g. brass) take plum ink instead of a warm white */
.plate--light{color:var(--ink)}
.plate--light .plate__for,.plate--light .plate__author{color:var(--ink)}
.plate--light .plate__form{color:var(--ink)}
.plate--light .plate__rule{background:var(--ink)}
.plate--light .plate__argues{border-top-color:rgba(59,36,64,.4)}
.plate--light .plate__argues .eyebrow{color:var(--ink)}
.plate--light .plate__argues a{color:var(--ink);border-bottom-color:rgba(59,36,64,.45)}
.plate--light .plate__argues a:hover{color:#22132A;border-color:var(--ink)}
.plate-room{padding-block:clamp(20px,3vw,44px) 0}
.plate-room h2{margin-block:.35em 1em!important}
.plate--wide{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(22px,3vw,44px);align-items:center}

/* ── pull-quote rail ───────────────────────────────────── */
.rail{padding-block:var(--air) clamp(36px,4.5vw,56px)}
.rail__head{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:baseline;justify-content:space-between}
.rail__head h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,40px);margin:0}
.rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,380px);gap:34px;
  overflow-x:auto;padding:36px 0 14px;scroll-snap-type:x proximity}
.rail__track>*{scroll-snap-align:start}
.railquote{margin:0;padding:26px 0 0;border-top:3px solid var(--brass);display:flex;flex-direction:column;
  justify-content:space-between;gap:18px}
.railquote p{font-family:var(--display);font-size:25px;line-height:1.32;font-style:italic;margin:0}
.railquote cite{font-family:var(--meta);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-style:normal;color:var(--muted)}
.railquote cite a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
.railquote cite a:hover{color:var(--tan)}

/* ── the index (sortable) ──────────────────────────────── */
.index{padding-block:var(--air) 0}
.index__head{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:baseline;justify-content:space-between;
  border-top:2px solid var(--ground-2);padding-top:26px}
.index__head h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,40px);margin:0}
.sorters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sorters .eyebrow{margin-right:4px}
.sortbtn{font-family:var(--meta);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;
  background:transparent;color:var(--ink);border:1px solid var(--rule);cursor:pointer}
.sortbtn:hover{border-color:var(--brass)}
.sortbtn[aria-pressed="true"]{background:var(--ground-2);color:var(--paper);border-color:var(--ground-2)}
table.index-table{width:100%;border-collapse:collapse;margin-top:26px}
.index-table th{text-align:left;font-family:var(--meta);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:0 14px 12px 0;border-bottom:1px solid var(--rule)}
.index-table td{padding:26px 14px 26px 0;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
.index-table tr:hover td{background:rgba(192,139,74,.1)}
.index-table .c-tag{font-family:var(--meta);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tan);white-space:nowrap;width:1%}
.index-table .c-head{font-family:var(--display);font-size:clamp(21px,2.2vw,27px);line-height:1.26}
.index-table .c-head a{color:var(--ink);text-decoration:none}
.index-table .c-head a:hover{color:var(--tan);text-decoration:underline}
.index-table .c-min{font-family:var(--meta);font-size:14px;color:var(--muted);text-align:right;white-space:nowrap;width:1%}
/* CSS-only "more" */
.more-toggle{position:absolute;opacity:0;pointer-events:none}
.more-rows{display:none}
.more-toggle:checked ~ table .more-rows{display:table-row}
.more-label{display:inline-block;margin-top:30px;font-family:var(--meta);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;padding:15px 28px;border:1px solid var(--rule);cursor:pointer;color:var(--ink)}
.more-label:hover{border-color:var(--brass)}
.more-toggle:checked ~ .more-label .more-label__more,
.more-label__less{display:none}
.more-toggle:checked ~ .more-label .more-label__less{display:inline}
.more-toggle:focus-visible ~ .more-label{outline:2px solid var(--brass);outline-offset:2px}

/* ── start here ladder ─────────────────────────────────── */
.starthere{background:var(--ground-2);color:#E9DCEE;margin-top:var(--air);
  padding-block:clamp(44px,6vw,76px);display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(30px,5vw,76px);align-items:start}
.starthere h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.08;
  margin:12px 0 0;color:var(--paper)}
.starthere p.lede{color:#CBB6D0;margin:14px 0 0;font-size:19px}
.ladder{list-style:none;margin:0;padding:0}
.ladder li{display:grid;grid-template-columns:66px minmax(0,1fr);gap:22px;padding:30px 0;border-top:1px solid rgba(239,231,218,.22)}
.ladder li:last-child{border-bottom:1px solid rgba(239,231,218,.22)}
.ladder__n{font-family:var(--display);font-size:38px;line-height:1;color:var(--brass)}
.ladder__title{font-family:var(--display);font-style:italic;font-size:27px;color:var(--paper);text-decoration:none}
.ladder__title:hover{color:var(--brass)}
.ladder__author{font-family:var(--meta);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-left:10px;font-style:normal}
.ladder p{margin:8px 0 0;color:#D6C6DA;font-size:19px}

/* ── atmosphere bands ──────────────────────────────────── */
.atmos{position:relative;margin:var(--air) 0 0}
.atmos img{width:100%;height:clamp(220px,32vw,440px);object-fit:cover}
.atmos figcaption{font-family:var(--meta);font-size:13px;letter-spacing:.12em;color:var(--muted);
  padding:16px clamp(24px,6vw,88px) 0}

/* ── supporters (The back pages) ───────────────────────── */
.backpages{background:var(--ground-2);color:#E9DCEE;padding-block:clamp(42px,5.5vw,68px);margin:var(--air) auto 0;max-width:var(--shell)}
.backpages__head{max-width:44em}
.backpages__head h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.2vw,38px);margin:12px 0 0;color:var(--paper)}
.backpages__head p{color:#CBB6D0;margin:12px 0 0;font-size:19px}
.sponsor-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:26px}
.sponsor{display:flex;flex-direction:column;gap:12px;background:#1C1226;border:1px solid rgba(239,231,218,.16);
  padding:22px 20px;text-decoration:none;color:#CBB6D0;min-height:150px;justify-content:flex-start}
.sponsor:hover{border-color:var(--brass);background:#170F20}
.sponsor img{width:100%;height:38px;object-fit:contain;object-position:left center;filter:saturate(.15) brightness(1.25)}
.sponsor-blurb{font-family:var(--meta);font-size:13px;line-height:1.45;color:#B9A6C0}
.sponsor-blurb:empty{display:none}
.sponsor-strip--quiet{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px}
.sponsor-strip--quiet .sponsor{min-height:72px;padding:14px 14px;justify-content:center}
.sponsor-strip--quiet .sponsor img{height:24px}
.backpages__tier{font-family:var(--meta);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);margin:26px 0 0}

/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--ground);color:#BFA5C6;padding-block:clamp(40px,5vw,64px);max-width:var(--shell);margin-inline:auto}
.foot__grid{display:flex;flex-wrap:wrap;gap:26px 40px;justify-content:space-between;align-items:flex-end}
.foot__wordmark{font-family:var(--display);font-size:32px;color:var(--paper)}
.foot__line{font-family:var(--display);font-style:italic;font-size:19px;margin-top:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--meta);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.foot nav a{color:#BFA5C6;text-decoration:none}
.foot nav a:hover{color:var(--brass)}

/* ══ ARTICLE ══════════════════════════════════════════════ */
.post{padding-bottom:clamp(30px,4vw,50px)}
.post__head{padding-top:clamp(30px,4vw,54px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(24px,4vw,58px);align-items:end;padding-bottom:clamp(22px,3vw,34px);border-bottom:1px solid var(--rule)}
.post__head h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.04;
  letter-spacing:-.022em;margin:.3em 0 0}
.post__crumbs{font-family:var(--meta);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.post__crumbs a{color:var(--tan);text-decoration:none}
.post__hero{margin-top:clamp(24px,3vw,40px)}
.post__hero img{width:100%;height:clamp(240px,34vw,440px);object-fit:cover}
.post__hero figcaption{font-family:var(--meta);font-size:14px;color:var(--muted);padding-top:12px;max-width:52em}
.post__colophon{margin-top:clamp(30px,4vw,48px);padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;
  font-family:var(--meta);font-size:13px;letter-spacing:.1em;color:var(--muted)}
.post__colophon a{color:var(--tan);text-decoration:none;border-bottom:1px solid var(--rule)}
.post__colophon a:hover{color:var(--ink);border-color:var(--brass)}

/* asymmetric long-read grid: numbers + notes live in the left margin */
.post__grid{display:grid;grid-template-columns:minmax(0,168px) minmax(0,1fr);gap:clamp(0px,3vw,46px);
  padding-top:clamp(26px,3.4vw,46px)}
.post__margin{position:relative}
.post__margin .sticky{position:sticky;top:26px;display:flex;flex-direction:column;gap:14px}
.post__margin .eyebrow{display:block}
.post__margin ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;
  counter-reset:tocn}
.post__margin ol a{font-family:var(--meta);font-size:13px;line-height:1.35;color:var(--muted);text-decoration:none;
  display:block;border-left:2px solid var(--rule);padding-left:10px}
.post__margin ol a:hover{color:var(--tan);border-color:var(--brass)}

.article-body{max-width:var(--measure);padding-inline:0;counter-reset:sec}
.article-body>p{margin:0 0 1.15em;font-size:21px;line-height:1.75}
.article-body h2{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,38px);line-height:1.14;
  margin:1.9em 0 .5em;padding-top:.5em;border-top:1px solid var(--rule);display:flex;gap:.6em;align-items:baseline}
.article-body h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);
  font-family:var(--meta);font-size:13px;letter-spacing:.18em;color:var(--brass);flex:none;transform:translateY(-.35em)}
.article-body h3{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.4vw,27px);margin:1.6em 0 .4em}
.article-body em{font-style:italic}
.article-body>ul,.article-body>ol{padding-left:1.1em;margin:0 0 1.2em}
.article-body li{margin-bottom:.5em}

/* ── palette components ───────────────────────────────── */
.lead{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.4vw,27px);line-height:1.42;
  color:var(--ink);margin:0 0 1.5em;text-wrap:pretty}
.article-body>h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.pullquote{margin:1.7em 0;padding:0;border-top:2px solid var(--ground-2);border-bottom:2px solid var(--ground-2)}
.pullquote p{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(26px,3.2vw,36px);
  line-height:1.28;margin:0;padding:.7em 0}
.blockquote{margin:1.7em 0;padding:.2em 0 .2em 26px;border-left:4px solid var(--brass)}
.blockquote p{font-family:var(--display);font-size:clamp(21px,2.2vw,25px);line-height:1.42;margin:0}
.blockquote cite{display:block;margin-top:12px;font-family:var(--meta);font-size:14px;letter-spacing:.1em;
  font-style:normal;color:var(--muted)}
.callout{margin:1.7em 0;background:var(--paper-2);border-top:3px solid var(--brass);padding:24px 26px}
.callout p{margin:0;font-size:20px;line-height:1.6;max-width:46em}
.callout .eyebrow{display:block;margin-bottom:8px;color:var(--tan)}
.note{font-family:var(--meta);font-size:16px;line-height:1.6;color:var(--ink-soft);margin:1.5em 0;
  padding-left:18px;border-left:2px solid var(--brass);max-width:46em}

/* data */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:18px;display:table}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-family:var(--meta);font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tan);padding-bottom:10px}
.versus th,.datatable th{font-family:var(--meta);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  text-align:left;color:var(--muted);font-weight:500;padding:0 14px 10px 0;border-bottom:1px solid var(--rule)}
.versus td,.datatable td{padding:14px 14px 14px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;line-height:1.5}
.versus tbody th{font-family:var(--meta);font-size:13px;letter-spacing:.06em;text-transform:none;color:var(--ink);
  padding-right:18px;border-bottom:1px solid var(--rule-soft);width:26%}
.datatable td:first-child{font-family:var(--display);font-style:italic;font-size:20px}
.table-scroll{overflow-x:auto;margin:1.7em 0}
.table-scroll .versus,.table-scroll .datatable{margin:0;min-width:520px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;margin:1.7em 0;
  background:var(--rule-soft)}
.statblock{background:var(--paper-2);padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-size:44px;line-height:1;color:var(--tan)}
.stat-label{font-family:var(--meta);font-size:13px;line-height:1.4;color:var(--muted)}

.timeline{list-style:none;margin:1.7em 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:8px 24px;padding:16px 0;
  border-top:1px solid var(--rule-soft);position:relative}
.timeline li::before{content:"";position:absolute;left:-1px;top:16px;width:7px;height:7px;background:var(--brass);
  border-radius:50%;transform:translateX(-4px)}
.timeline li{padding-left:18px;border-left:1px solid var(--rule)}
.t-when{font-family:var(--meta);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--tan);line-height:1.4}
.t-what{font-size:19px;line-height:1.55}

.chart{margin:1.7em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-family:var(--meta);font-size:14px;color:var(--muted);padding-top:12px;max-width:46em}
.chart .c-bar{fill:var(--tan)}
.chart .c-bar--hi{fill:var(--brass)}
.chart .c-label{font-family:var(--meta);font-size:11px;fill:#5A4160}
.chart .c-val{font-family:var(--meta);font-size:11px;fill:#7A5F80}
.chart .c-axis{stroke:var(--rule);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--tan);stroke-width:2}
.chart .c-dot{fill:var(--brass)}
.chart .c-grid{stroke:var(--rule-soft);stroke-width:1}
.chart .c-track{fill:none;stroke:var(--rule);stroke-width:18}
.chart .c-arc{fill:none;stroke:var(--tan);stroke-width:18;stroke-linecap:butt}
.chart .c-arc--2{stroke:var(--brass)}
.chart .c-mid{font-family:var(--display);font-size:26px;fill:#3B2440;text-anchor:middle}
.chart--donut{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:22px;align-items:center}
.chart--donut figcaption{padding-top:0}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-family:var(--meta);font-size:14px;color:var(--ink-soft)}
.legend span{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:baseline}

/* media */
.article-figure{margin:1.9em 0}
.article-figure img{width:100%}
.article-figure figcaption{font-family:var(--meta);font-size:14px;line-height:1.5;color:var(--muted);padding-top:10px;max-width:46em}
.breakout{max-width:none;width:min(100%,var(--measure));}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:1.9em 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:190px;object-fit:cover}
.gallery figcaption{font-family:var(--meta);font-size:13px;color:var(--muted);padding-top:8px}
.map-figure{margin:1.9em 0}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--paper-2);border:1px solid var(--rule);
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:34px 34px}
.map-figure figcaption{font-family:var(--meta);font-size:14px;color:var(--muted);padding-top:10px}

/* cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:1.7em 0}
.profile-card{background:var(--paper-2);padding:22px 22px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;height:170px;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-family:var(--display);font-size:25px;margin:0;line-height:1.15}
.profile-card .p-role{font-family:var(--meta);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tan);margin:0}
.profile-card p{margin:0;font-size:18px;line-height:1.55}
.profile-card .p-links{font-family:var(--meta);font-size:14px}
.profile-card .p-attr{font-family:var(--meta);font-size:12px;color:var(--muted)}
.profile-card.no-photo{border-left:3px solid var(--brass)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:1.7em 0}
.org-card{display:flex;flex-direction:column;gap:6px;padding:18px;background:var(--paper-2);text-decoration:none;color:var(--ink)}
.org-card:hover{background:#DFD3BF}
.org-logo{height:26px;width:auto;object-fit:contain;object-position:left}
.org-name{font-family:var(--display);font-size:20px}
.org-host{font-family:var(--meta);font-size:13px;color:var(--muted)}
.entity-ref{font-family:var(--meta);font-size:.86em;letter-spacing:.04em;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:1.4em 0;grid-auto-rows:1fr}
.further-grid a{background:var(--paper-2);padding:20px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-size:21px;line-height:1.3;display:flex;align-items:flex-start;min-height:104px}
.further-grid a:hover{background:#DFD3BF;color:var(--tan)}
.further-grid--rich a{flex-direction:column;gap:8px;min-height:0;padding:24px 22px}
.further-grid--rich .fg-title{font-family:var(--display);font-size:24px;line-height:1.15}
.further-grid--rich .fg-blurb{font-family:var(--prose);font-size:17px;line-height:1.45;color:var(--ink-soft)}
.further-grid--rich .fg-meta{font-family:var(--meta);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:8px}

/* endnotes */
.notemark{font-family:var(--meta);font-size:.62em;letter-spacing:.04em;vertical-align:super;line-height:0;
  text-decoration:none;color:var(--tan);padding:0 .12em;font-feature-settings:"tnum"}
.notemark:hover{color:var(--brass)}
.endnotes{margin-top:2.4em;border-top:2px solid var(--ground-2);padding-top:20px}
.endnotes h2{font-family:var(--display);font-weight:400;font-size:28px;margin:0 0 .5em;border:0;padding:0}
.endnotes h2::before{content:none}
.endnotes ol{list-style:none;margin:0;padding:0;counter-reset:en}
.endnotes li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:12px 0;
  border-bottom:1px solid var(--rule-soft);font-size:18px;line-height:1.55}
.endnotes li::before{counter-increment:en;content:counter(en);font-family:var(--meta);font-size:13px;color:var(--brass)}
.endnotes .back{font-family:var(--meta);font-size:12px;letter-spacing:.1em;text-decoration:none;color:var(--muted)}

.related{margin-top:2.4em;border-top:2px solid var(--ground-2);padding-top:22px}
.related h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 .2em;border:0;padding:0}
.related h2::before{content:none}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.related-links li{border-bottom:1px solid var(--rule-soft)}
.related-links a{display:block;padding:16px 0;font-family:var(--display);font-size:23px;line-height:1.3;
  color:var(--ink);text-decoration:none}
.related-links a:hover{color:var(--tan)}
.related-links .r-tag{font-family:var(--meta);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tan);display:block;margin-bottom:4px}

/* ── category / hub / simple pages ─────────────────────── */
.cat-head{padding-top:clamp(34px,4.5vw,60px);text-align:center;border-bottom:1px solid var(--rule);
  padding-bottom:clamp(26px,3.4vw,42px)}
.cat-head h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,6vw,72px);line-height:1;
  letter-spacing:-.025em;margin:.2em 0 0}
.cat-head .dek{max-width:30em;margin-inline:auto}
.cat-head__meta{font-family:var(--meta);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 0}
.cat-lead__n{font-family:var(--display);font-size:26px;letter-spacing:0;color:var(--brass);margin-right:14px;vertical-align:-2px}
.cat-lead__cta{margin:18px 0 0}
.cat-lead__cta a{font-family:var(--meta);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tan);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:4px}
.cat-lead__cta a:hover{color:var(--ink)}
.cat-list__head{margin:clamp(30px,4vw,50px) 0 0}
.cat-elsewhere{padding-block:clamp(40px,5vw,68px) clamp(48px,6vw,80px)}
.cat-elsewhere .further-grid{margin:20px 0 0}
.cat-lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);
  padding-top:clamp(28px,3.6vw,46px);align-items:start}
.cat-lead h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,50px);line-height:1.06;margin:.28em 0 0}
.cat-lead img{width:100%;height:clamp(220px,26vw,330px);object-fit:cover}
.cat-list{list-style:none;margin:18px 0 0;padding:0;border-top:2px solid var(--ground-2)}
.cat-list li{border-bottom:1px solid var(--rule-soft)}
.cat-list a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;
  padding:26px 0;text-decoration:none;color:var(--ink)}
.cat-list a:hover{background:rgba(192,139,74,.1)}
.cat-list .n{font-family:var(--display);font-size:24px;color:var(--brass);line-height:1}
.cat-list .t{font-family:var(--display);font-size:clamp(23px,2.6vw,30px);line-height:1.24}
.cat-list .b{grid-column:2;font-size:18px;color:var(--ink-soft);margin-top:2px;max-width:52em}
.cat-list .m{font-family:var(--meta);font-size:13px;color:var(--muted);white-space:nowrap}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;background:var(--rule-soft);
  margin-top:clamp(26px,3.4vw,44px)}
.hub-card{background:var(--paper);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.hub-card h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0;line-height:1.1}
.hub-card h2 a{color:var(--ink);text-decoration:none}
.hub-card h2 a:hover{color:var(--tan)}
.hub-card p{margin:0;font-size:18px;color:var(--ink-soft)}
.hub-card ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hub-card ul a{font-family:var(--prose);font-size:18px;color:var(--tan);text-decoration:none;
  border-bottom:1px solid var(--rule-soft);padding-bottom:7px;display:block}
.hub-card ul a:hover{color:var(--ink);border-color:var(--brass)}

.page-body{max-width:var(--measure);padding-block:clamp(30px,4vw,52px)}
.page-body h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,60px);line-height:1.04;margin:0}
.page-body h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,34px);margin:1.6em 0 .4em}
.page-body p{margin:0 0 1.1em}
.center-404{text-align:center;padding-block:clamp(50px,9vw,120px)}
.center-404 h1{font-family:var(--display);font-weight:400;font-size:clamp(42px,7vw,84px);line-height:1;margin:0}

/* ── styleguide ────────────────────────────────────────── */
.sg-section{padding-block:clamp(26px,3.4vw,44px);border-top:1px solid var(--rule)}
.sg-section>h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);margin:0 0 .2em}
.sg-label{font-family:var(--meta);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tan);
  margin:1.6em 0 .5em;display:block}
.sg-note{font-family:var(--meta);font-size:14px;color:var(--muted);margin:0 0 1em}
.sg-wide{max-width:none}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1000px){
  .further-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post__head{grid-template-columns:minmax(0,1fr)}
  .post__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .post__margin{display:none}
  .starthere{grid-template-columns:minmax(0,1fr)}
  .cat-lead{grid-template-columns:minmax(0,1fr)}
  .plate--wide{grid-template-columns:minmax(0,1fr)}
  .article-body{max-width:none}
}
@media (max-width:760px){
  body{font-size:19px}
  .shell{box-shadow:none}
  .cat-list a{grid-template-columns:40px minmax(0,1fr);gap:4px 16px}
  .cat-list .m{grid-column:2;font-size:12px}
  .further-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .masthead{overflow:visible}
  .nav__list{flex-direction:column;align-items:stretch;max-height:0;overflow:hidden;transition:max-height .25s;gap:0}
  .nav__list>li+li{border-top:1px solid var(--rule)}
  .nav__toggle-label{display:block;font-family:var(--meta);font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;padding:14px 0;text-align:center;cursor:pointer;color:var(--ink)}
  .nav__toggle:checked ~ .nav__list{max-height:2600px}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;min-width:0;max-width:none;
    max-height:0;overflow:hidden;padding:0;border-top:0;transition:max-height .25s}
  .has-sub:focus-within .nav-sub,.has-sub:hover .nav-sub{max-height:900px;padding:8px 0;border-top:2px solid var(--brass)}
  .has-sub::after{display:none}
  .rail__track{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}
  .index-table thead{display:none}
  .index-table tr{display:block;border-bottom:1px solid var(--rule-soft);padding:16px 0}
  .index-table td{display:block;border:0;padding:2px 0;width:auto}
  .index-table .c-min{text-align:left}
  .index-table tr.more-rows{display:none}
  .more-toggle:checked ~ table .more-rows{display:block}
  .ladder li{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .statrow{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .post__hero img,.longread__figure img{height:clamp(200px,52vw,300px)}
  .dropcap::first-letter{font-size:4.2em}
  .chart{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart svg{min-width:540px}
  .chart--donut{grid-template-columns:minmax(0,1fr);gap:14px;overflow-x:visible}
  .chart--donut svg{min-width:0;max-width:180px}
}
@media (max-width:560px){
  :root{--shell:100%}
  .band{padding-inline:20px}
  .masthead.band{padding-inline:20px}
  .masthead__strip{padding-inline:0}
  .shell,.masthead,.backpages,.foot{box-shadow:none}
}
@media (max-width:1060px){
  .sponsor-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sponsor-strip>.sponsor:nth-child(4){grid-column:1/3}
  .sponsor-strip--quiet{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sponsor-strip--quiet>.sponsor:nth-child(4){grid-column:auto}
}
@media (max-width:560px){
  .sponsor-strip,.sponsor-strip--quiet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sponsor-strip>.sponsor:nth-child(5){grid-column:1/3}
  .sponsor-strip>.sponsor:nth-child(4){grid-column:auto}
  .sponsor{min-height:120px}
}
@media (max-width:380px){
  .sponsor-strip,.sponsor-strip--quiet{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media print{
  body{background:#fff}
  .nav,.backpages,.sorters{display:none}
  .shell{box-shadow:none;max-width:none}
}


/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1362px of tier across
   12 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-strip .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
  .sponsor-strip.sponsor-strip--quiet .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead REMOVED 2026-09-23 (money_slots audit): Design's own phone rules already close both strips — the 5th tile of a .sponsor-strip spans the row at <=560px — so a full-width LEAD on top of that left tile 4 (and quiet tile 9) alone beside an empty cell mid-grid. */

/* op-article-width: the article column was capped at 756px (83 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{--measure:min(44.286em, 100%)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-strip.sponsor-strip--quiet 5 rows at 1280). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sponsor-strip.sponsor-strip--quiet .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-hover-pad */
.index-table tr td:first-child{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.post > figure.post__hero > img,
  div.article-body > figure.article-figure > img,
  main.shell > figure.atmos > img,
  section.band.cat-lead > figure.article-figure > img,
  section.band.longread > figure.longread__figure > img){height:auto}
/* op-img-dims:end */