:root{
  --ink:#0E2A3A; --ink-soft:#41616F; --paper:#EDEBE4; --panel:#FFFFFF;
  --line:#D2CEC2; --accent:#B5822B; --accent-ink:#FFFFFF; --spine:#2E6E80;
  /* Only Newsreader and Archivo are loaded; see the Google Fonts link in
     layouts/base.njk. Zodiak and Supreme were named here and never loaded, so
     they resolved to the generic fallback while looking like a decision. */
  --display:'Newsreader',Georgia,serif;
  --body:'Newsreader',Georgia,serif;
  --ui:'Archivo',system-ui,sans-serif;
  --shell:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
.shell{max-width:var(--shell);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;z-index:99}

.h2{font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.1rem);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 1rem}
.eyebrow{font:500 .68rem/1 var(--ui);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1rem}
.prose p{margin:0 0 1.05rem;line-height:1.66;max-width:66ch}
.prose a{color:var(--accent)}

.nav{border-bottom:1px solid var(--line)}
/* padding-block only: .nav__in is also .shell, and the `0` in a `padding` shorthand
   would cancel the shell's horizontal inset, running the nav to the edge. */
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.1rem}
.nav__brand{font:700 .82rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none}
.nav nav{display:flex;gap:1.4rem}
.nav nav a{font:500 .72rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft)}
.nav nav a:hover{color:var(--accent)}

.hero{padding:clamp(2.6rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.hero__h{font-family:var(--display);font-size:clamp(2.4rem,7vw,4.8rem);line-height:.96;
  letter-spacing:-.026em;margin:0 0 1rem;max-width:15ch}
.hero__strap{font:500 .8rem/1.4 var(--ui);letter-spacing:.05em;text-transform:uppercase;
  margin:0 0 1.4rem}
.hero__body{max-width:60ch;font-size:1.06rem;color:var(--ink-soft);margin:0 0 1.8rem}

.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:.75rem 1.2rem;font:500 .72rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.btn:hover{background:var(--accent);color:var(--accent-ink)}
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--line);margin-left:.5rem}
.btn--invert{background:var(--paper);color:var(--ink)}

.prose-block{padding:clamp(2rem,5vw,3.5rem) 0;border-top:1px solid var(--line)}
/* Bands are padding-only. A vertical margin on a full-bleed section shows as a
   strip of page background between two bands that should meet. The separation
   between bands is the color change, and the breathing room is their own
   padding. scripts/lint-components.mjs fails the build if one gains a margin. */
.cta-band{background:var(--ink);color:var(--paper);padding:clamp(2.2rem,5vw,3.5rem) 0}
.cta-band__h{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.2;margin:0 0 1.3rem;max-width:26ch}
.pq{margin:0;padding:clamp(2rem,5vw,3rem) 0}
.pq blockquote{margin:0;font-family:var(--display);font-size:clamp(1.3rem,3vw,1.8rem);
  line-height:1.28;max-width:24ch}
.pq figcaption{font:500 .68rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:1rem}

.mast{padding:clamp(2.2rem,6vw,4.2rem) 0 1.8rem;border-bottom:2px solid var(--ink)}
.mast__h{font-family:var(--display);font-size:clamp(2.4rem,7vw,4.6rem);line-height:.95;
  letter-spacing:-.025em;margin:0 0 .9rem;max-width:14ch}
.mast__strap{font:500 .78rem/1.4 var(--ui);letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 1.4rem}
.mast__intro{max-width:60ch;font-size:1.04rem;color:var(--ink-soft);margin:0}
.figs{display:flex;flex-wrap:wrap;gap:clamp(1.4rem,5vw,3.2rem);margin:2.2rem 0 0;
  padding:0;list-style:none}
.figs li{font:500 .64rem/1.3 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.figs b{display:block;font:700 2rem/1 var(--display);letter-spacing:-.02em;
  color:var(--ink);margin-bottom:.22rem}
.stat-row{padding:2rem 0;border-top:1px solid var(--line)}

.tools{position:sticky;top:0;z-index:20;background:var(--paper);padding:.9rem 0;
  border-bottom:1px solid var(--line);box-shadow:0 12px 12px -12px rgba(0,0,0,.09)}
.tools__row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tools__row+.tools__row{margin-top:.55rem}
.srch{flex:1 1 15rem;min-width:12rem}
.srch input{width:100%;padding:.52rem .7rem;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);border-radius:2px;font:400 .9rem/1.3 var(--ui)}
.srch input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
.chip{background:none;border:1px solid var(--line);border-radius:2px;cursor:pointer;
  padding:.42rem .68rem;color:var(--ink-soft);font:500 .7rem/1 var(--ui);
  letter-spacing:.05em;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip--clear{border-style:dashed}
.tools__lbl{font:500 .62rem/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.count{font:400 .78rem/1 var(--ui);color:var(--ink-soft);margin-left:auto}
select.chip{-webkit-appearance:none;appearance:none;padding-right:1.6rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 12px) 52%,calc(100% - 8px) 52%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}

.grid{display:grid;grid-template-columns:190px 1fr;gap:clamp(1.8rem,4.5vw,4rem);
  align-items:start;padding:2rem 0 5rem}
.rail{position:sticky;top:7.5rem}
.rail__h{font:500 .62rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0}
.rail__sub{font:400 .76rem/1.45 var(--body);color:var(--ink-soft);
  margin:.35rem 0 .9rem;font-style:italic}
.spine{display:flex;flex-direction:column;gap:1px;max-height:52vh;overflow-y:auto;
  padding-right:.4rem}
.spine__row{display:grid;grid-template-columns:2.6em 1fr 2.2em;align-items:center;
  gap:.45rem;text-decoration:none;padding:.15rem 0}
.spine__yr{font:500 .66rem/1 var(--ui);color:var(--ink-soft)}
.spine__track{height:9px;background:color-mix(in srgb,var(--line) 60%,transparent)}
.spine__bar{display:block;height:100%;background:var(--spine);opacity:.75}
.spine__n{font:400 .62rem/1 var(--ui);color:var(--ink-soft);text-align:right;opacity:0}
.spine__row:hover .spine__bar{background:var(--accent);opacity:1}
.spine__row:hover .spine__n{opacity:1}
.spine__row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.yr{content-visibility:auto;contain-intrinsic-size:0 900px}
.yr[hidden]{display:none}
.yr__h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:2.4rem 0 .3rem;padding-bottom:.45rem;border-bottom:1px solid var(--ink)}
.yr:first-child .yr__h{margin-top:0}
.yr__h span{font:700 1.45rem/1 var(--display);letter-spacing:-.02em}
.yr__h em{font:400 .66rem/1 var(--ui);font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}

.e{display:grid;grid-template-columns:5em 1fr;gap:1.2rem;padding:1.1rem 0;
  border-bottom:1px solid var(--line)}
.e[hidden]{display:none}
.e__d{font:500 .67rem/1.5 var(--ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);padding-top:.28rem}
.e__t{margin:0 0 .28rem;font-size:1.14rem;line-height:1.32;font-weight:600;
  letter-spacing:-.008em}
.e__t a{text-decoration:none;background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .18s ease}
.e__t a:hover{background-size:100% 1px}
.e__t a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.e__s{margin:0 0 .45rem;font-size:.93rem;line-height:1.5;color:var(--ink-soft);max-width:70ch}
.e__m{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.mark{font:500 .6rem/1 var(--ui);letter-spacing:.09em;text-transform:uppercase;
  padding:.35em .55em;white-space:nowrap}
.mark--idx{color:var(--ink-soft);border:1px solid var(--line)}
.mark--pd{color:var(--spine);border:1px solid var(--spine)}
.mark--own{background:var(--accent);color:var(--accent-ink)}
.kw{font:400 .64rem/1 var(--ui);color:var(--ink-soft);opacity:.72}
.kw::before{content:"\00b7";margin-right:.4rem}
.empty{padding:3rem 0;color:var(--ink-soft);font-style:italic}

.art{display:grid;grid-template-columns:1fr 260px;gap:clamp(2rem,5vw,4rem);
  padding:2.5rem 0 5rem;align-items:start}
.art__main{max-width:66ch}
.art__meta{font:500 .68rem/1.5 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.6rem}
.art__h{font-family:var(--display);font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.06;
  letter-spacing:-.022em;margin:0 0 1.1rem}
.art__lede{font-size:1.14rem;line-height:1.6;margin:0 0 1.4rem}
.src{border-top:2px solid var(--ink);margin-top:1.8rem;padding-top:1.1rem}
.src p{margin:0 0 .8rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.aside h2{font:500 .64rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.aside+.aside{margin-top:2rem}
.rel{list-style:none;padding:0;margin:0}
.rel li{padding:.6rem 0;border-bottom:1px solid var(--line)}
.rel a{text-decoration:none;font-size:.94rem;line-height:1.38;display:block}
.rel a:hover{color:var(--accent)}
.rel time{display:block;font:500 .62rem/1 var(--ui);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.2rem}
.tagcloud{display:flex;flex-wrap:wrap;gap:.35rem}
.tagcloud span{font:400 .68rem/1 var(--ui);color:var(--ink-soft);
  border:1px solid var(--line);padding:.35em .55em}

.foot{border-top:2px solid var(--ink);padding:2rem 0 4rem;margin-top:3rem}
.foot__strap{font:500 .74rem/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 .8rem}
.foot__note{font:400 .84rem/1.6 var(--ui);color:var(--ink-soft);margin:0;max-width:70ch}

@media(max-width:860px){
  .grid,.art{grid-template-columns:1fr;gap:1.5rem}
  .rail{position:static}
  .spine{flex-direction:row;max-height:none;overflow-x:auto;gap:3px;padding-bottom:.6rem}
  .spine__row{grid-template-columns:1fr;grid-template-rows:auto auto;gap:.2rem;min-width:2.4rem}
  .spine__track{height:34px;display:flex;align-items:flex-end}
  .spine__bar{width:100%!important;height:var(--h,50%)}
  .spine__n{display:none}
  .e{grid-template-columns:1fr;gap:.3rem}
  .e__d{padding:0}
  .tools{position:static}
}
/* News section */

.news-head{padding:clamp(2rem,5vw,3.4rem) 0 1.4rem;border-bottom:2px solid var(--ink)}
.news-head__in{display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap}
.news-head__h{font-family:var(--display);font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:.95;letter-spacing:-.025em;margin:0 0 .55rem}
.news-head__sub{max-width:52ch;font-size:1rem;color:var(--ink-soft);margin:0}
.news-head__meta{font:500 .68rem/1.7 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;text-align:right}
.news-head__meta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
.news-head__meta a:hover{color:var(--accent)}

/* lead story */
.lead{padding:clamp(1.8rem,4vw,2.8rem) 0;border-bottom:1px solid var(--line)}
.lead__in{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,5vw,4rem);
  align-items:start}
.lead__kicker{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;
  font:500 .68rem/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .85rem}
.lead__h{font-family:var(--display);font-size:clamp(1.7rem,4.2vw,2.75rem);
  line-height:1.06;letter-spacing:-.022em;margin:0 0 .9rem}
.lead__h a{text-decoration:none}
.lead__h a:hover{color:var(--accent)}
.lead__sum{font-size:1.08rem;line-height:1.62;color:var(--ink-soft);margin:0 0 1.1rem;
  max-width:58ch}
.lead__more{font:500 .72rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:.25rem}
.lead__more:hover{color:var(--accent)}
.lead__side{border-left:1px solid var(--line);padding-left:clamp(1.2rem,3vw,2.2rem)}

.stack{list-style:none;padding:0;margin:0}
.stack li{padding:.85rem 0;border-bottom:1px solid var(--line)}
.stack li:first-child{padding-top:0}
.stack time{display:block;font:500 .62rem/1 var(--ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.28rem}
.stack a{text-decoration:none;font-size:1rem;line-height:1.34;font-weight:600;display:block}
.stack a:hover{color:var(--accent)}
.src-tag{display:inline-block;margin-top:.3rem;font:400 .64rem/1 var(--ui);
  letter-spacing:.06em;color:var(--ink-soft)}

/* month-grouped latest */
.news-body{display:grid;grid-template-columns:1fr 250px;
  gap:clamp(1.8rem,4.5vw,3.6rem);align-items:start;padding:2rem 0 4rem}
.mo{content-visibility:auto;contain-intrinsic-size:0 700px}
.mo[hidden]{display:none}
.mo__h{font:500 .68rem/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:2.2rem 0 .3rem;padding-bottom:.45rem;
  border-bottom:1px solid var(--ink)}
.mo:first-child .mo__h{margin-top:0}

.more-band{margin-top:2.5rem;padding-top:1.6rem;border-top:2px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.more-band p{margin:0;font:400 .88rem/1.5 var(--ui);color:var(--ink-soft)}

.news-aside{position:sticky;top:7.5rem}
.news-aside .rel a{font-size:.9rem}
.src-line{display:flex;justify-content:space-between;gap:1rem;font:400 .88rem/1.4 var(--ui);
  color:var(--ink-soft)}
.src-line b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.aside__note{font:400 .78rem/1.55 var(--body);font-style:italic;color:var(--ink-soft);
  margin:.9rem 0 0}

@media(max-width:860px){
  .lead__in{grid-template-columns:1fr;gap:2rem}
  .lead__side{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:1.4rem}
  .news-body{grid-template-columns:1fr}
  .news-aside{position:static;padding-top:1.5rem;border-top:1px solid var(--line)}
  .news-head__in{flex-direction:column;align-items:flex-start}
  .news-head__meta{text-align:left}
}
/* Creed band */
.creed{border-bottom:1px solid var(--line);background:var(--paper)}
.creed p{margin:0;padding:.85rem 0;display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:.9rem;
  font:500 .68rem/1.4 var(--ui);letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink)}
.creed i{font-style:normal;color:var(--accent);font-size:1.05em;line-height:1}
.creed--invert{background:var(--ink);border-bottom:0}
.creed--invert p{color:var(--paper)}
.creed--invert i{color:var(--accent)}
@media(max-width:640px){
}

/* ------------------------------------------------------------ founding members
   The row distributes whatever the data holds, so the member count is an
   editorial change rather than a layout one.

   Stacked on narrow screens rather than scaled down: five marks across a phone
   are unreadable, and shrinking to fit is the worse of the two failures.

   Sizing is per mark, from --mark-scale in the data, NOT a shared max-height.
   These marks run from 1.05:1 to 3.56:1, so a single height makes the square
   one look tiny and the wide one dominate. Optical weight is what has to match,
   and that can only be set by looking at the rendered row.

   Designed against white, which on this site means --paper, NOT --panel.
   brand-pass.css loads after this file and SWAPS both tokens: it sets
   --paper to #FFFFFF and --panel to var(--sand). Reading the :root block in
   this file alone gives you the opposite of what renders. */
.members{background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:clamp(2.4rem,5vw,3.6rem) 0}
.members__h{font:400 clamp(1.35rem,2.6vw,1.9rem)/1.15 var(--display);margin:0 0 .4rem}
.members__intro{font:400 1rem/1.55 var(--body);color:var(--ink-soft);
  max-width:46ch;margin:0 0 2rem}
.members__row{list-style:none;margin:0;padding:0;display:grid;gap:2.4rem 2.5rem;
  grid-template-columns:1fr;align-items:center;justify-items:start}

/* Each cell is a fixed-height box with its contents centred in it, rather than
   the grid centring items of different heights against each other. A mark is
   about 60-95px tall and a name is one 20px line; centred per item they land on
   different optical centers and the text floats. One box height fixes both the
   marks and the text fallback to the same center line. */
.member{display:flex;align-items:center;justify-content:flex-start;width:100%;
  min-height:calc(58px * 1.7)}
.member__mark{width:auto;height:auto;object-fit:contain;opacity:.9;
  max-height:calc(58px * var(--mark-scale,1));
  max-width:calc(190px * var(--mark-scale,1))}
/* Left-aligned to the page, like the heading and every other block on it. */
.member__name{font:500 .95rem/1.3 var(--ui);color:var(--ink-soft);text-align:left}
@media(min-width:720px){
  .members__row{grid-template-columns:repeat(3,1fr);gap:3rem 2.5rem}
}