/* forgesonges.org — Direction B, "The Curve"
   PALETTE — 5 members, each with a job:
     --ground     #1B1F1A  page ground (dark, near-black green)
     --ink        #EDE7D9  body ink on the ground
     --accent     #E0A21B  saturated amber — rules, kickers, figures, links (hue ~42)
     --secondary  #3B2FB8  saturated indigo — whole bands and panels (hue ~250)
     --muted      #8f9488  quiet ink: credits, meta
   The two saturated members sit ~208 degrees apart in hue and both are used at area size:
   amber on the drawn figures and rules, indigo as a full-width band ground.            */

:root{
  --ground:#1B1F1A;
  --ground-deep:#12150F;
  --ground-raise:#232821;
  --ink:#EDE7D9;
  --ink-dim:#b6b8aa;
  --muted:#8f9488;
  --accent:#E0A21B;
  --accent-deep:#8a6410;
  --secondary:#0C6E68;
  --secondary-ink:#EAF3F0;
  --line:#3a4036;
  --line-soft:#2b3027;

  --display:'Libre Caslon Display', 'Times New Roman', serif;
  --text:'Lora', Georgia, serif;

  --pad:clamp(20px, 4vw, 60px);
  --measure:68ch;
  --wide:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--text); font-size:18px; line-height:1.68;
  text-wrap:pretty; overflow-x:hidden;
}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--display); font-weight:400; line-height:1.06; margin:0}
p{margin:0}
a{color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(224,162,27,.38)}
a:hover{color:#fff; border-bottom-color:#fff}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
hr{border:0; border-top:1px solid var(--line); margin:0}
.wrap{max-width:var(--wide); margin:0 auto; padding-inline:var(--pad)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--accent); color:#17140F; padding:8px 14px; z-index:99}

/* ── drawn device: one system. 24-grid, 1.6 stroke, round joins, currentColor ── */
.ico{width:22px; height:22px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px}
.ico-lg{width:34px; height:34px}
.rule-amber{border:0; border-top:2px solid var(--accent)}

/* ── kickers / meta ── */
.kicker{font-family:var(--display); font-size:15px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px}
.kicker a{color:inherit; border:0}
.meta{font-size:15px; color:var(--muted)}

/* ══════════════ MASTHEAD ══════════════
   Three arrangements were drawn; this is the one shipped: a stacked wordmark with the
   drawn curve beside it, the four sections on ONE running line, and the whole second
   level (every guide) always visible in the indigo panel beneath. No dropdown, no row
   of equal section columns. */
.masthead{border-bottom:1px solid var(--line)}
.mast-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 44px; padding-block:20px 18px}
.mast-logo{display:flex; align-items:center; gap:16px; border:0}
.mast-logo .wordmark{font-size:clamp(34px,3.6vw,56px)}
.mast-logo:hover .wordmark{color:var(--accent)}
.mast-mark{width:clamp(40px,4vw,54px); height:auto; flex:none; color:var(--accent);
  stroke:currentColor; fill:none; stroke-width:1.5; stroke-linejoin:round}
.wordmark{display:block; font-family:'Libre Caslon Text', var(--display); font-weight:700;
  font-size:clamp(46px,6vw,88px); line-height:.92; letter-spacing:-.015em; color:var(--ink); border:0}
.wordmark:hover{color:var(--ink)}
.wordmark em{font-style:normal; color:var(--accent)}
.mast-line{font-size:16px; color:var(--ink-dim); max-width:none; white-space:nowrap;
  text-align:right; overflow:hidden; text-overflow:ellipsis}
.mast-emblem{width:100%; height:auto}
.mast-nav{border-top:1px solid var(--line); padding-block:16px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  font-family:var(--display); font-size:clamp(19px,2vw,27px)}
.mast-nav a{color:var(--ink); border:0; display:flex; align-items:center; gap:9px}
.mast-nav a:hover{color:var(--accent)}
.mast-nav a[aria-current]{color:var(--accent)}
.mast-nav .slash{color:var(--line); font-size:.8em}
/* ── main nav: one compact row, submenu on hover / focus, no dead gap ── */
.mainnav{border-top:1px solid var(--line); background:var(--ground-deep)}
.navrow{display:flex; flex-wrap:wrap; align-items:stretch; gap:0 clamp(4px,2.2vw,36px);
  padding-inline:calc(var(--pad) - 14px)}
.navitem{position:relative}
.navitem:last-child{margin-left:auto}
.navlink{display:flex; align-items:center; gap:11px; padding:15px 14px; border:0;
  font-family:'Libre Caslon Text', var(--display); font-weight:400; letter-spacing:0;
  font-size:clamp(17px,1.8vw,23px); color:var(--ink); white-space:nowrap}
.navlink .ico{color:var(--accent)}
.navitem:hover>.navlink .ico,.navitem:focus-within>.navlink .ico{color:var(--ink)}
.navlink[aria-current] .ico{color:var(--ink)}
.navitem:hover>.navlink,.navitem:focus-within>.navlink{color:var(--accent); background:#191d17}
.navlink[aria-current]{color:var(--accent); box-shadow:inset 0 -3px 0 var(--accent)}
.navlink .ico{width:26px; height:26px}
.navpanel{position:absolute; top:100%; left:0; min-width:320px; z-index:60;
  background:#191d17; border:1px solid var(--line); border-top:2px solid var(--accent);
  padding:16px 18px 18px; opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity .14s ease, transform .14s ease}
.navitem:hover>.navpanel,.navitem:focus-within>.navpanel{opacity:1; visibility:visible; transform:none}
.navitem:last-child>.navpanel{left:auto; right:0}
.navpanel .pk{font-family:var(--display); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:12px}
.navpanel ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.navpanel a{font-size:15.5px; color:var(--ink); border-bottom:1px solid transparent; line-height:1.3}
.navpanel a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.navpanel .all{display:block; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--display); font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border-bottom:0}

.mast-sub{background:var(--secondary); color:var(--secondary-ink); border-top:2px solid var(--accent)}
.sub-head{display:flex; align-items:baseline; gap:9px; font-family:var(--display);
  font-size:clamp(16px,1.4vw,19px); line-height:1.12; color:var(--secondary-ink); border:0;
  padding-bottom:7px}
.sub-head .ico{align-self:center}
.sub-head:hover{color:#fff}
.sub-head[aria-current]{color:#fff; text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:5px; text-decoration-color:var(--accent)}
.mast-sub .wrap{display:grid; grid-template-columns:1.12fr 1fr 1.24fr .92fr .78fr;
  align-items:start; gap:16px 30px; padding-block:14px 16px}
.sub-group{min-width:0}
.mast-sub ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.mast-sub li{line-height:1.32}
.mast-sub a{color:var(--secondary-ink); border-bottom:1px solid rgba(239,237,255,.3); font-size:14px}
.mast-sub a:hover{border-bottom-color:#fff}

/* ══════════════ FOOTER ══════════════ */
.site-foot{border-top:1px solid var(--line)}
.foot-main{display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px 60px;
  padding-block:40px 44px}
.foot-cols{display:flex; flex-wrap:wrap; gap:32px 56px}
.foot-links{display:flex; flex-direction:column; gap:9px; font-size:16px}
.foot-links a{display:flex; align-items:center; gap:9px}
.site-foot h3{font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:12px}
.site-foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.site-foot li{font-size:16px}
.foot-line{font-size:16px; color:var(--muted); margin-top:12px; max-width:34ch}
.foot-base{border-top:1px solid var(--line-soft)}
.foot-base .wrap{padding-block:16px 20px; font-size:14.5px; color:var(--muted);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 30px}

/* ══════════════ HOMEPAGE BANDS ══════════════ */
.lead-band{position:relative; background:var(--ground-deep)}
.lead-frame{position:relative; min-height:min(78vh,760px)}
.lead-frame>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.lead-scrim{position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(18,20,15,.86) 0%, rgba(18,20,15,.5) 54%, rgba(18,20,15,.08) 84%)}
.lead-curve{position:absolute; inset:0; width:100%; height:100%}
.lead-copy{position:relative; padding-block:clamp(34px,6vw,62px) clamp(150px,22vw,260px)}
.lead-copy h1{font-size:clamp(38px,5.4vw,84px); max-width:23ch; margin-top:16px;
  text-shadow:0 2px 26px rgba(0,0,0,.55)}
.lead-copy h1 a{color:var(--ink); border:0}
.lead-copy h1 a:hover{color:var(--accent)}
.lead-dek{font-size:clamp(18px,2.1vw,25px); line-height:1.46; max-width:46ch; margin-top:20px;
  color:#ddd8ca}
.lead-more{margin-top:22px; font-family:var(--display); font-size:20px}
.lead-foot{border-top:1px solid var(--line); }
.lead-foot .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end;
  gap:8px 44px; padding-block:14px 16px; font-size:15px; color:var(--muted)}
.lead-foot strong{color:var(--ink-dim); font-weight:400}

.band{padding-block:clamp(56px,8vw,104px)}
.band-quiet{padding-block:clamp(46px,6vw,80px)}
.band-min{padding-block:13px}
.band-min .wrap{display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:6px 36px; font-size:15px}
/* a band that has to announce itself as a section */
.band-section{border-top:2px solid var(--accent); background:var(--ground-deep)}
.section-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 30px;
  border-bottom:1px solid var(--line); padding-bottom:18px}
.section-head .num-mark{font-family:var(--display); font-size:clamp(48px,6vw,86px);
  line-height:.8; color:var(--accent)}
.section-head h2{font-size:clamp(28px,3.6vw,50px); max-width:30ch; flex:1 1 340px}
.section-head h2.one-row{white-space:nowrap; font-size:clamp(22px,2.5vw,36px); flex:0 1 auto}
.section-head .more{font-size:16px}

/* the procedural band: a horizontal pairing, not a stack */
.proc-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,3vw,48px); align-items:center; margin-top:32px}
.proc-row .proc-lede{font-size:clamp(19px,2.1vw,26px); line-height:1.48; max-width:40ch}
.proc-row .fig-mat img{height:clamp(210px,24vw,320px); object-fit:cover; width:100%}
.band-indigo{background:var(--secondary); color:var(--secondary-ink)}
.band-indigo .kicker{color:rgba(239,237,255,.78)}
.band-indigo a{color:var(--secondary-ink); border-bottom-color:rgba(239,237,255,.5)}
.band-deep{background:var(--ground-deep)}
.band-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:14px 32px; border-bottom:1px solid var(--line); padding-bottom:16px}
.band-head h2{font-size:clamp(28px,3.4vw,46px); max-width:34ch}
.band-head .more{font-size:16px; font-family:var(--text)}
.band-indigo .band-head{border-bottom-color:rgba(239,237,255,.35)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center}
.split-wide{grid-template-columns:1.35fr 1fr}
.split-tall{align-items:start}
.stack{display:flex; flex-direction:column; gap:18px}

/* one big opening statement */
.statement{display:grid; grid-template-columns:96px minmax(0,900px); gap:36px; align-items:start}
.statement svg{width:96px; height:auto; color:var(--accent)}
.statement p.big{font-family:var(--display); font-size:clamp(24px,3vw,36px); line-height:1.34}

/* the record — numerals as the repeating mark */
.record{display:grid; grid-template-columns:1.55fr 1fr 1fr; gap:clamp(28px,4vw,56px); margin-top:40px}
.record .num{font-family:var(--display); color:var(--accent); line-height:.86}
.record .lead-item .num{font-size:clamp(58px,7vw,96px)}
.record .item{border-top:1px solid var(--line); padding-top:18px}
.record .item .num{font-size:clamp(38px,4vw,52px)}
.record h3{font-size:clamp(21px,2.2vw,30px); margin-top:10px}
.record h3 a{color:var(--ink); border:0}
.record h3 a:hover{color:var(--accent)}
.record p{color:var(--ink-dim); font-size:16px; margin-top:10px; line-height:1.55}
.record .row{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}

/* teaser rows used on bands and category pages (even height, meta pinned) */
.teasers{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,3vw,44px)}
.teaser{display:flex; flex-direction:column; border-top:1px solid var(--line); padding-top:18px}
.teaser h3{font-size:clamp(21px,2.1vw,27px); min-height:2.2em}
.teaser h3 a{color:var(--ink); border:0}
.teaser h3 a:hover{color:var(--accent)}
.teaser p{color:var(--ink-dim); font-size:16px; margin-top:10px; line-height:1.55}
.teaser .teaser-foot{margin-top:auto; padding-top:14px; font-size:15px; color:var(--muted);
  display:flex; align-items:center; gap:8px}
.teaser.big h3{font-size:clamp(26px,3vw,38px); min-height:0}
.teaser.big{border-top-width:2px; border-top-color:var(--accent)}

/* ══════════════ FIGURE SYSTEM ══════════════
   Four treatments, one drawing system: square corners, hairline insets, an amber rule
   on the caption, and the credit always a smaller quieter thing under the caption. */
figure{margin:0}
.fig-cap{margin-top:14px; font-size:16.5px; line-height:1.5; max-width:56ch}
.fig-cap .credit{display:block; font-size:13.5px; color:var(--muted); margin-top:6px; letter-spacing:.02em}

/* 1 · plate — full width of its container, caption offset under an amber rule */
.fig-plate>img{width:100%; height:auto}
.fig-plate .fig-cap{border-top:2px solid var(--accent); padding-top:12px; margin-top:16px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 32px; max-width:none}
.fig-plate .fig-cap .credit{margin:0; text-align:right; align-self:end}

/* 2 · mat — the photograph sits on a raised mat with an inset hairline */
.fig-mat{background:var(--ground-deep); padding:20px 20px 18px; border:1px solid var(--line)}
.fig-mat .frame{outline:1px solid rgba(237,231,217,.28); outline-offset:7px}
.fig-mat .fig-cap{margin-top:26px; padding-left:16px; border-left:2px solid var(--accent)}

/* 3 · inset — small, sits IN the column with prose wrapping beside it */
.fig-inset{float:none; width:100%; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:20px; align-items:start; margin:30px 0; padding-top:14px;
  border-top:1px solid var(--accent)}
.fig-inset>img{margin-top:0; height:clamp(150px,14vw,195px); object-fit:cover; width:100%}
.fig-inset>figcaption{margin-top:0}
.fig-inset .fig-cap{font-size:15px; max-width:none}

/* 4 · bleed — breaks the measure entirely, tinted to the palette */
.fig-bleed{position:relative; margin-block:clamp(34px,5vw,64px)}
.fig-bleed .shot{position:relative}
.fig-bleed .shot::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,31,26,.34), rgba(59,47,184,.16))}
.fig-bleed img{width:100%; height:clamp(240px,44vw,560px); object-fit:cover}
.fig-bleed .fig-cap{max-width:var(--wide); margin:14px auto 0; padding-inline:var(--pad);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 32px}
.fig-bleed .fig-cap .credit{margin:0; text-align:right; align-self:end}

/* the generic component named in the spec */
.article-figure>img{width:100%; height:auto}
.article-figure figcaption{margin-top:12px; font-size:16px; color:var(--ink);
  border-left:2px solid var(--accent); padding-left:14px}
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.gallery figure{background:var(--ground-deep); border:1px solid var(--line); padding:12px}
.gallery figcaption{font-size:14.5px; color:var(--ink-dim); margin-top:10px}
.map-figure{border:1px solid var(--line); background:var(--ground-deep); padding:18px}
.map-figure .map-slot{aspect-ratio:16/9; border:1px dashed var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px}
.map-figure figcaption{margin-top:14px; font-size:16px; border-left:2px solid var(--accent); padding-left:14px}

/* ══════════════ ARTICLE ══════════════
   No standing side rail. One generous measure, interrupted: the writers' own
   Notes-for-Design material lands between sections as full-width plates. */
.art-head{border-bottom:1px solid var(--line)}
.art-head .wrap{padding-block:clamp(34px,5vw,72px) clamp(26px,3vw,40px)}
.art-head h1{font-size:clamp(34px,5vw,74px); max-width:26ch; margin-top:14px}
.art-numeral{font-family:var(--display); font-size:clamp(34px,3.6vw,52px); line-height:.9;
  color:var(--muted); letter-spacing:.02em}
.art-head .grid{display:grid; grid-template-columns:150px minmax(0,860px); gap:clamp(20px,3vw,48px);
  align-items:start}
.lead{font-size:clamp(19px,2.2vw,25px); line-height:1.5; color:#d6d1c3; margin-top:20px; max-width:52ch}
.art-flags{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px; font-size:15px; color:var(--muted)}
.art-flags .flag{display:flex; align-items:center; gap:8px}

.art-body{max-width:var(--wide); margin:0 auto 96px; padding-inline:var(--pad)}
.art-body>.fig-plate:first-child{margin-top:clamp(24px,3vw,40px)}
.col{max-width:var(--measure); margin-inline:auto}
.col>*+*{margin-top:20px}
.art-body h2{font-size:clamp(25px,3.1vw,40px); max-width:30ch}
.art-body h2.sec{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  margin-top:clamp(40px,5vw,68px); clear:both}
.pullquote,.fig-bleed,.chart{clear:both}
.art-body h2.sec::after{content:''; height:1px; background:var(--line)}
.art-body h3{font-size:clamp(20px,2.2vw,27px); margin-top:36px}
.art-body p{font-size:19px; line-height:1.72}
.art-body p+p{margin-top:20px}
.art-body a{border-bottom-color:rgba(224,162,27,.45)}

/* interruption plates — full width of the body, never a rail */
.plate{clear:both; background:var(--ground-deep); border-top:2px solid var(--accent);
  border-bottom:1px solid var(--line); padding:clamp(24px,3vw,40px);
  margin-block:clamp(36px,5vw,60px)}
.plate>.kicker{margin-bottom:20px}
.plate-indigo{background:var(--secondary); color:var(--secondary-ink); border-top-color:var(--accent)}
.plate-indigo .kicker{color:rgba(239,237,255,.8)}
.plate-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:26px 40px}

/* stacked label + description — never a run-on */
.deflist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.deflist>li{display:flex; flex-direction:column; gap:6px; border-top:1px solid var(--line); padding-top:14px}
.plate-indigo .deflist>li{border-top-color:rgba(239,237,255,.3)}
.deflist .term{font-family:var(--display); font-size:19px; color:var(--accent); display:block}
.plate-indigo .deflist .term{color:#fff}
.deflist .desc{font-size:16.5px; line-height:1.55; color:var(--ink-dim); display:block}
.plate-indigo .deflist .desc{color:rgba(239,237,255,.86)}
.plainlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.plainlist>li{font-size:16.5px; line-height:1.55; padding-left:18px; position:relative; color:var(--ink-dim)}
.plainlist>li::before{content:''; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--accent)}

/* ══════════════ NAMED COMPONENTS (styleguide set) ══════════════ */
.pullquote{margin:clamp(34px,5vw,56px) 0; border:0; padding:0}
.pullquote p{font-family:var(--display); font-size:clamp(26px,3.6vw,46px); line-height:1.12;
  color:var(--accent); max-width:34ch}
.blockquote{margin:32px 0; padding:22px 26px; background:var(--ground-deep);
  border-left:3px solid var(--accent)}
.blockquote p{font-size:19px; line-height:1.6}
.blockquote cite{display:block; margin-top:12px; font-size:15px; color:var(--muted); font-style:normal}
.callout{background:var(--ground-raise); border:1px solid var(--line); border-top:2px solid var(--accent);
  padding:22px 24px; margin:32px 0}
.callout p{font-size:18px; line-height:1.6}
p.note{font-size:16px; color:var(--ink-dim); border-left:1px solid var(--line); padding-left:16px}

.versus,.datatable{width:100%; border-collapse:collapse; font-size:16.5px; margin:8px 0}
.versus caption,.datatable caption{caption-side:top; text-align:left; font-family:var(--display);
  font-size:15px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); padding-bottom:12px}
.versus th,.datatable th{text-align:left; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--muted); padding:10px 12px 10px 0; vertical-align:bottom}
.versus td,.datatable td{border-bottom:1px solid var(--line-soft); padding:11px 12px 11px 0;
  color:var(--ink-dim); vertical-align:top}
.versus tbody tr td:first-child,.datatable tbody tr td:first-child{color:var(--ink)}
.table-scroll{overflow-x:auto}

.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px}
.statblock{display:flex; flex-direction:column; gap:6px; border-top:2px solid var(--accent); padding-top:14px}
.stat-num{font-family:var(--display); font-size:clamp(34px,4vw,52px); line-height:.95; color:var(--ink)}
.stat-label{font-size:15.5px; line-height:1.45; color:var(--ink-dim)}
.plate-indigo .stat-num{color:#fff}
.plate-indigo .stat-label{color:rgba(239,237,255,.85)}

.timeline{list-style:none; margin:0; padding:0; display:grid; gap:0}
.timeline>li{display:grid; grid-template-columns:minmax(180px,32%) 1fr; gap:6px 26px;
  border-top:1px solid var(--line); padding:15px 0 16px; position:relative; align-items:baseline}
.timeline>li::before{content:''; position:absolute; left:0; top:-3px; width:6px; height:6px;
  background:var(--accent); border-radius:50%}
.timeline .t-when{font-family:var(--display); font-size:18px; color:var(--accent); line-height:1.26}
.timeline .t-what{font-size:16.5px; line-height:1.55; color:var(--ink-dim)}
.plate-indigo .timeline>li{border-top-color:rgba(239,237,255,.3)}
.plate-indigo .timeline .t-when{color:#fff}
.plate-indigo .timeline .t-what{color:rgba(239,237,255,.86)}

.chart{background:#191d17; border:1px solid var(--line); padding:clamp(16px,2vw,28px)}
.chart figcaption{margin-top:16px; font-size:16px; color:var(--ink-dim);
  border-left:2px solid var(--accent); padding-left:14px; max-width:60ch}
.chart svg{width:100%; height:auto; display:block}
.chart text{font-family:var(--text); fill:var(--muted); font-size:20px;
  paint-order:stroke; stroke:#12150F; stroke-width:4px; stroke-linejoin:round; stroke-linecap:round}
.chart svg{overflow:visible}
.chart .lbl{font-family:var(--display); fill:var(--accent); font-size:22px; letter-spacing:.06em;
  stroke-width:6px}
.chart .lbl-ink{fill:var(--ink)}

.profile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px}
.profile-card{display:flex; flex-direction:column; background:var(--ground-deep);
  border:1px solid var(--line); padding:20px}
.profile-card .p-photo{width:100%; aspect-ratio:3/2; object-fit:cover; margin-bottom:16px}
.profile-card.no-photo{border-top:2px solid var(--accent)}
.profile-card h3{font-size:24px}
.profile-card .p-role{font-size:15px; color:var(--accent); margin-top:6px}
.profile-card p{font-size:16px; color:var(--ink-dim); line-height:1.55; margin-top:10px}
.profile-card .p-links{margin-top:auto; padding-top:14px; font-size:15px;
  display:flex; flex-wrap:wrap; gap:6px 16px}
.profile-card .p-attr{font-size:13.5px; color:var(--muted); margin-top:10px}

.org-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.org-card{display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--line);
  background:var(--ground-deep); border-bottom:1px solid var(--line)}
.org-card:hover{border-color:var(--accent)}
.org-logo{max-height:34px; width:auto; max-width:100%; object-fit:contain}
.org-name{font-family:var(--display); font-size:20px; color:var(--ink)}
.org-host{font-size:14px; color:var(--muted)}
.entity-ref{white-space:nowrap}
.further-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.further-grid a{display:flex; align-items:flex-start; gap:10px; padding:16px;
  border:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ground-deep);
  color:var(--ink); font-family:var(--display); font-size:20px; line-height:1.15}
.further-grid a:hover{border-color:var(--accent); color:var(--accent)}
.related-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.related-links li{border-top:1px solid var(--line); padding-top:10px; font-size:17px}
.cat-list{list-style:none; margin:0; padding:0}
.cat-list li{border-top:1px solid var(--line); padding:18px 0; display:grid;
  grid-template-columns:auto minmax(0,1fr); gap:6px 16px}
.cat-list li .ico{margin-top:5px; color:var(--accent)}
.cat-list a{font-family:var(--display); font-size:clamp(21px,2.3vw,28px); color:var(--ink); border:0}
.cat-list a:hover{color:var(--accent)}
.cat-list p{grid-column:2; font-size:16.5px; color:var(--ink-dim); line-height:1.55}

details.expander{border-top:1px solid var(--line); margin-top:8px}
details.expander>summary{cursor:pointer; list-style:none; padding:12px 0;
  font-family:var(--display); font-size:17px; color:var(--accent)}
details.expander>summary::-webkit-details-marker{display:none}
details.expander>summary::after{content:' +'}
details.expander[open]>summary::after{content:' –'}

/* ── forms (contact) ── */
.form{display:flex; flex-direction:column; gap:18px; max-width:52ch; margin-top:28px}
.form label{display:flex; flex-direction:column; gap:7px; font-size:15px; color:var(--ink-dim)}
.form input,.form textarea{font-family:var(--text); font-size:17px; color:var(--ink);
  background:var(--ground-deep); border:1px solid var(--line); padding:12px 14px}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.form button{align-self:flex-start; font-family:var(--display); font-size:19px; cursor:pointer;
  background:var(--accent); color:#17140F; border:0; padding:13px 26px}
.form button:hover{background:var(--ink)}

/* ══════════════ SUPPORTERS ══════════════
   One horizontal run. Every tile is the same self-contained unit at a CONSTANT width —
   no growing tracks, no positional rules. Prominence is the .feat class only. */
.supporters{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ground-deep)}
.supporters .wrap{padding-block:clamp(30px,4vw,46px)}
.sup-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 30px}
.sup-head h2{font-size:clamp(20px,2.2vw,27px)}
.sup-head p{font-size:15.5px; color:var(--muted); max-width:52ch}
.sup-run{display:flex; flex-wrap:wrap; gap:14px; margin-top:22px}
.sup-group-label{font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-family:var(--display); margin-top:26px}
.sponsor{flex:0 0 279px; width:279px; display:flex; flex-direction:column; gap:10px;
  padding:14px; border:1px solid var(--line); background:#0f120d; color:var(--ink)}
.sponsor:hover{border-color:var(--accent)}
.sponsor.feat{background:#151a13; border-color:var(--accent-deep)}
.sponsor img{width:100%; height:44px; max-height:44px; object-fit:contain; object-position:left center}
.sponsor .sponsor-name{font-family:var(--display); font-size:17px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sponsor .sponsor-blurb{font-size:14.5px; line-height:1.45; color:var(--ink-dim)}

/* ══════════════ MOBILE ══════════════ */
@media (max-width:1100px){
  .sponsor{flex:0 0 236px; width:236px}
}
@media (max-width:900px){
  .section-head h2.one-row{white-space:normal}
  .proc-row{grid-template-columns:1fr}
}
@media (max-width:820px){
  .mainnav{position:relative}
  .mainnav::after{content:''; position:absolute; top:0; right:0; bottom:0; width:40px;
    pointer-events:none; background:linear-gradient(90deg,rgba(20,24,19,0),var(--ground-deep) 78%)}
  .navrow{overflow-x:auto; gap:0; padding-inline:var(--pad); scrollbar-width:none;
    flex-wrap:nowrap; -webkit-overflow-scrolling:touch}
  .navrow>*{flex:0 0 auto}
  .navrow::-webkit-scrollbar{display:none}
  .navitem{border-top:0}
  .navitem+.navitem{margin-left:24px}
  .navitem:last-child{margin-left:24px}
  .navlink{padding:13px 0; white-space:nowrap}
  .navpanel{display:none}
}
@media (max-width:1000px){
  .mast-sub .wrap{grid-template-columns:1fr 1fr; gap:12px 26px; padding-block:12px 14px}
  .sub-head{font-size:15px; padding-bottom:5px}
  .mast-sub a{font-size:13.5px}
  .mast-sub li{line-height:1.24}
  .statement svg{display:none}
  .mast-line{text-align:left; white-space:normal}
  .fig-inset{grid-template-columns:1fr; gap:12px}
  .mast-top{grid-template-columns:1fr; gap:22px}
  .mast-emblem{max-width:280px}
  .site-foot .wrap{grid-template-columns:1fr 1fr}
  .foot-main{gap:26px 40px}
  .split,.split-wide{grid-template-columns:1fr}
  .record{grid-template-columns:1fr}
  .statement{grid-template-columns:1fr}
  .statement svg{width:70px}
  .art-head .grid{grid-template-columns:1fr}
  .art-numeral{font-size:34px}
}
@media (max-width:640px){
  body{font-size:17px}
  .site-foot .wrap{grid-template-columns:1fr}
  .sub-group{max-width:none; flex:1 1 100%}
  .mast-sub .wrap{grid-template-columns:1fr}
  .mast-nav{font-size:19px; gap:10px 12px}
  .mast-nav .slash{display:none}
  .mast-nav a{width:100%}
  .fig-plate .fig-cap,.fig-bleed .fig-cap{grid-template-columns:1fr}
  .fig-plate .fig-cap .credit,.fig-bleed .fig-cap .credit{text-align:left}
  .timeline>li{grid-template-columns:1fr}
  .related-links li{font-size:16.5px}
  .art-body p{font-size:17.5px}
  .sponsor{flex:0 0 100%; width:100%}
  .lead-copy{padding-bottom:clamp(90px,30vw,150px)}
  .cat-list li{grid-template-columns:1fr}
  .cat-list p{grid-column:1}
}
@media print{
  body{background:#fff; color:#000}
  .masthead,.site-foot,.supporters{border-color:#ccc}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sup-head > .sponsor{flex:1 1 0!important;min-width:0!important}
.sup-run > .sponsor{flex:1 1 0!important;min-width:0!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:start!important;flex-wrap:nowrap!important;align-items:center!important;height:auto!important;min-height:0!important}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}

/* sp-grid-stretch: fixed pixel tracks left the container part-empty. */
.further-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important}

/* 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-odd-tier-lead: .sup-run (7 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sup-run:has(> *:nth-child(odd):last-child) > *:first-child{flex:0 0 100%!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 760px (87 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .col) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.art-body div.col{--measure:min(80.068ch, 100%)!important}
}
@media (min-width:1600px){
  div.art-body div.col{--measure:min(clamp(80.068ch, 62.153vw, calc(80.068ch * 1.2)), 100%)!important}
  div.art-body div.col > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-money-readable: on phones every supporter strip (.sup-run) kept ALL its tiles on one line —
   sp-tile-uniform's flex:1 1 0 + min-width:0 never lets a run wrap — so at 360 the six "with support
   from" tiles were 42px wide, logos unreadable and the brand names running into each other. Two per
   row on phones (the fleet's phone grid); the odd-tier lead rule above still gives an odd run's
   first tile the whole row. Desktop keeps its single line. */
@media (max-width:640px){
  .sup-run > .sponsor{flex:0 0 calc(50% - 7px)!important;max-width:calc(50% - 7px)!important}
}
/* op-money-readable:end */
@media (min-width:621px) and (max-width:1199px){.sup-run.sup-run:has(> .sponsor:not(.feat)){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))!important}.sup-run.sup-run > .sponsor:not(.feat)[data-partner]{width:auto!important;max-width:none!important;flex:none!important;margin:0!important}}