/* tinydns.org — "Follow it down"
   Palette (5, each with a job):
     --ground   #0C1140  deep ultramarine .. page ground, largest area
     --ink      #ECE7DA  ecru ............. type on ground
     --paper    #ECE7DA  ecru ............. light band ground (real area)
     --accent   #F2A423  amber ........... saturated, hue ~40  (bands, marks, links)
     --flag     #3B5BF5  electric blue ... saturated, hue ~228 (diagram, alerts, fills)
   The two saturated members sit ~188 degrees apart in hue. */

:root{
  --ground:#0C1140; --ground-2:#131A56; --ground-3:#0A0E33;
  --ink:#ECE7DA; --ink-2:#DCDFF5; --ink-dim:#BEC4EE; --mute:#7C86CC;
  --paper:#ECE7DA; --paper-ink:#0C1140; --paper-dim:#3B4180; --stone:#B8B09A;
  --accent:#F2A423; --flag:#3B5BF5;
  --rule:#26307C; --rule-2:#1D2668;
  --display:'Unbounded',system-ui,sans-serif;
  --text:'Azeret Mono',ui-monospace,SFMono-Regular,monospace;
  --t-mega:clamp(40px,6.2vw,104px);
  --t-xl:clamp(32px,4.6vw,68px);
  --t-l:clamp(26px,3.2vw,46px);
  --t-m:clamp(21px,2.1vw,30px);
  --t-body:17px; --t-read:18px; --t-small:15px; --t-micro:12.5px;
}

*,*::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:var(--t-body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-0.04em;line-height:1.08;margin:0}
h1{font-weight:800;letter-spacing:-0.055em}
p{margin:0 0 1.35em}
ul,ol{margin:0 0 1.35em;padding-left:1.3em}
li{margin:0 0 .5em}
table{border-collapse:collapse;width:100%}
figure{margin:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--accent);color:var(--ground);padding:8px 14px;z-index:99}
.kick{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.kick--accent{color:var(--accent)}
.num{font-family:var(--display);font-weight:800;font-size:14px;color:var(--accent);letter-spacing:0}
.ico{width:22px;height:22px;flex:0 0 22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ico--lg{width:40px;height:40px;flex-basis:40px;stroke-width:1.5}

/* ---------- shell + rail (the header: a standing index, not a dropdown) ---------- */
.shell{display:flex;align-items:flex-start;max-width:2100px;margin:0 auto}
.rail{flex:0 0 302px;min-width:262px;position:sticky;top:0;max-height:100vh;overflow-y:auto;
  padding:24px 20px 34px;border-right:1px solid var(--rule);background:var(--ground);z-index:40}
.main{flex:1 1 460px;min-width:0}
.brand{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round}
.brand-name{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.045em}
.brand-name b{color:var(--accent);font-weight:800}
.brand-host{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.rail-say{font-size:13px;line-height:1.6;color:var(--ink-dim);margin:20px 0 18px;text-wrap:pretty}
.hr{height:1px;background:var(--rule);border:0;margin:18px 0}
.railsec{border-top:1px solid var(--rule-2)}
.railsec>summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:center;
  padding:11px 0;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.railsec>summary::-webkit-details-marker{display:none}
.railsec>summary:hover{color:var(--ink)}
.railsec[open]>summary{color:var(--ink)}
.railsec .ico{color:var(--accent)}
.railsec ul{list-style:none;margin:0 0 12px;padding:0 0 0 32px;display:flex;flex-direction:column;gap:8px}
.railsec ul a{font-size:12.5px;line-height:1.45;color:var(--ink-dim);display:block}
.railsec ul a[aria-current]{color:var(--accent)}
.rail-meta{display:flex;flex-direction:column;gap:9px;padding-top:13px;border-top:1px solid var(--rule-2)}
.rail-meta a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:1040px){
  .shell{display:block}
  .rail{position:static;max-height:none;flex:none;min-width:0;width:100%;
    border-right:0;border-bottom:1px solid var(--rule);padding:20px clamp(18px,5vw,40px) 24px}
  .rail-say{margin:14px 0}
  .railnav{columns:2;column-gap:34px}
  .railsec{break-inside:avoid}
}
@media (max-width:520px){.railnav{columns:1}}

/* ---------- bands ---------- */
.band{padding:clamp(46px,6vw,92px) clamp(18px,4vw,56px)}
.band--tight{padding-top:clamp(30px,3vw,44px);padding-bottom:clamp(30px,3vw,44px)}
.band--paper{background:var(--paper);color:var(--paper-ink)}
.band--paper .kick{color:var(--paper-dim)}
.band--paper a{color:var(--paper-ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px}
.band--paper a:hover{color:var(--flag)}
/* dark-panel components keep their own ink when they sit on the paper ground */
.band--paper .card,.band--paper .run>a,.band--paper .sponsor,.band--paper .org-card,
.band--paper .further-grid a,.band--paper .related-links a{color:var(--ink);text-decoration:none}
.band--paper .card:hover,.band--paper .run>a:hover,.band--paper .sponsor:hover,
.band--paper .org-card:hover{color:var(--ink);text-decoration:none}
.band--paper .card h3,.band--paper .card-body h3,.band--paper .run>a strong,
.band--paper .org-name{color:var(--ink)}
.band--paper .card-body p,.band--paper .run>a span,.band--paper .sponsor-blurb,
.band--paper .related-links span{color:var(--ink-dim)}
.band--paper .card-foot,.band--paper .org-host,.band--paper .sponsor-name{color:var(--mute)}
.band--paper .card-foot span{color:var(--mute)}
.band--paper .further-grid a:hover,.band--paper .related-links a:hover{color:var(--accent)}
.band--amber{background:var(--accent);color:var(--ground)}
.band--amber a{color:var(--ground)}
.band--flag{background:var(--flag);color:var(--ink)}
.band--dark{background:var(--ground-3)}
.band+.band{border-top:1px solid var(--rule-2)}
.band--paper+.band,.band+.band--paper,.band--amber+.band,.band+.band--amber{border-top:0}
.measure{max-width:70ch}
.measure--wide{max-width:96ch}
.head-rule{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-end;
  border-bottom:1px solid currentColor;padding-bottom:18px;margin-bottom:34px}
.head-rule h2{font-size:var(--t-l);max-width:22ch;text-wrap:balance}
.head-rule p{margin:0;max-width:34ch;font-size:var(--t-small);line-height:1.6;opacity:.82}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(75deg,rgba(12,17,64,.94) 0%,rgba(12,17,64,.72) 42%,rgba(12,17,64,.18) 88%)}
.hero-in{position:relative;z-index:2;padding:clamp(34px,5vw,72px) clamp(18px,4vw,56px);max-width:1080px}
.hero h1{font-size:var(--t-mega);max-width:15ch;margin:18px 0 0;text-wrap:balance}
.hero h1 span{color:var(--accent)}
.hero-say{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ink-2);max-width:50ch;margin:26px 0 0;text-wrap:pretty}
.hero-cap{position:relative;z-index:2;align-self:flex-end;margin-left:auto;background:var(--ground);
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);padding:16px 22px;max-width:330px;
  font-size:13.5px;line-height:1.5;color:var(--ink-dim)}
@media (max-width:900px){.hero{display:block}.hero-cap{max-width:none;border-left:0}}

/* ---------- the cutaway (signature) ---------- */
.cut{display:flex;align-items:flex-start;border-bottom:1px solid var(--rule-2)}
.cut-diag{flex:0 0 288px;min-width:240px;position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;padding:36px 22px;border-right:1px solid var(--rule)}
.cut-diag svg{width:100%;height:100%}
.cut-stops{flex:1 1 400px;min-width:0}
.stop{min-height:82vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,3.4vw,54px);align-items:center;
  padding:clamp(44px,5vw,64px) clamp(18px,4vw,56px);border-bottom:1px solid var(--rule-2)}
.stop-txt{display:flex;flex-direction:column;align-items:flex-start}
.stop--flip .stop-txt{order:2}
.stop--flip .stop-fig{order:1}
.stop-fig{margin:0}
.stop-fig img{aspect-ratio:16/10;object-fit:cover}
@media (max-width:1180px){.stop{grid-template-columns:1fr;align-items:start}
  .stop--flip .stop-txt{order:1}.stop--flip .stop-fig{order:2}}
.stop:last-child{border-bottom:0}
.stop-tag{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.stop h2{font-size:var(--t-l);max-width:21ch;text-wrap:balance}
.stop p{font-size:16.5px;line-height:1.68;color:var(--ink-dim);max-width:56ch;margin:20px 0 0;text-wrap:pretty}
.stop-go{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:12.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);align-self:flex-start}
.cut-node{stroke:var(--ink);stroke-width:2;fill:none;transition:opacity .25s}
.cut-spine{stroke:var(--flag)}
@media (max-width:900px){
  .cut{display:block}
  .cut-diag{display:none}
  .stop{min-height:0;padding-top:40px;padding-bottom:44px}
}

/* ---------- section plate ---------- */
.plate{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:0 44px}
.plate-sec{border-top:1px solid var(--stone);padding:22px 0 28px}
.plate-sec h3{font-size:20px;letter-spacing:-.03em;margin:14px 0 0;text-wrap:pretty}
.plate-sec .ico{color:var(--flag)}
.plate-sec p{font-size:14.5px;line-height:1.6;color:var(--paper-dim);margin:10px 0 14px}
.plate-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.plate-list a{font-size:14.5px;line-height:1.45}

/* ---------- dense run ---------- */
.run{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:1px;background:transparent}
.run>a{display:flex;flex-direction:column;gap:10px;background:var(--ground);padding:22px 20px 26px;
  box-shadow:0 0 0 1px var(--rule-2);text-decoration:none;color:var(--ink)}
.run>a .ico{width:26px;height:26px;flex-basis:26px}
.run>a:hover{background:var(--ground-2);text-decoration:none}
.run>a .ico{color:var(--accent)}
.run>a strong{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.03em;line-height:1.2}
.run>a span{font-size:13.5px;line-height:1.55;color:var(--ink-dim);margin-top:auto}

/* ---------- cards (even height) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px}
.card{display:flex;flex-direction:column;background:var(--ground-2);border:1px solid var(--rule);
  text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--accent);text-decoration:none}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:18px 18px 20px;gap:9px}
.card-body h3{font-size:17px;letter-spacing:-.03em;line-height:1.22;min-height:2.44em}
.card-body p{font-size:13.5px;line-height:1.55;color:var(--ink-dim);margin:0}
.card-foot{margin-top:auto;padding-top:12px;display:flex;gap:9px;align-items:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.card-foot .ico{width:16px;height:16px;flex-basis:16px;color:var(--accent)}

/* ---------- article ---------- */
.art{padding:clamp(34px,4vw,62px) clamp(18px,4vw,56px) 0}
.art-kick{display:flex;gap:12px;align-items:center;color:var(--accent);font-size:var(--t-micro);
  letter-spacing:.18em;text-transform:uppercase}
.art-kick .ico{color:var(--accent)}
.art h1{font-size:var(--t-xl);max-width:20ch;margin:20px 0 0}
.lead{font-size:clamp(19px,1.7vw,23px);line-height:1.5;color:var(--accent);max-width:46ch;
  margin:24px 0 0;font-weight:400;text-wrap:pretty}
.art-body{padding:clamp(34px,4vw,54px) clamp(18px,4vw,56px) clamp(52px,6vw,86px);max-width:none}
.art-body>*{max-width:74ch;clear:both}
.art-body>.notes,.art-body>.pullquote,.art-body>.callout,.art-body>.fig--plate,
.art-body>.statrow,.art-body>.timeline,.art-body>.tablewrap,.art-body>.gallery,
.art-body>.related-links{max-width:none}
.art-body>.fig--mat{max-width:74ch}
.art-body h2{font-size:var(--t-m);margin:48px 0 18px;max-width:26ch;text-wrap:balance}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:19px;margin:34px 0 12px}
.art-body p{font-size:var(--t-read);line-height:1.72;color:var(--ink-2)}
.art-body code{font-size:.92em;background:var(--ground-2);border:1px solid var(--rule-2);padding:1px 5px;color:var(--accent)}
.art-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.art-body a:hover{text-decoration-color:var(--accent)}

/* ---------- figure system: three treatments, one drawing system ---------- */
.article-figure{margin:38px 0}
.fig-cap{display:flex;gap:16px;align-items:flex-start;margin-top:13px}
.fig-lead{flex:0 0 auto;width:52px;height:26px;stroke:var(--accent);fill:none;stroke-width:1.4}
.fig-cap figcaption,figcaption.fig-txt{font-size:var(--t-small);line-height:1.55;color:var(--ink-dim);max-width:52ch;text-wrap:pretty}
.fig-credit{display:block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);margin-top:7px}
/* 1 · plate — breaks the measure, amber corner ticks */
.fig--plate{max-width:none;position:relative;margin:52px 0}
.fig--plate img{width:100%;max-height:64vh;object-fit:cover;display:block}
.fig--plate::before,.fig--plate::after{content:"";position:absolute;width:46px;height:46px;pointer-events:none}
.fig--plate::before{top:0;left:0;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.fig--plate::after{top:0;right:0;border-top:2px solid var(--accent);border-right:2px solid var(--accent)}
/* 2 · mat — image sits on a panel, caption inside the mat */
.fig--mat{background:var(--ground-2);border:1px solid var(--rule);padding:11px 11px 4px}
.fig--mat img{display:block;width:100%}
.fig--mat .fig-cap{padding:0 6px 14px}
.band--paper .fig--mat{background:#E1DACA;border-color:var(--stone)}
.band--paper .fig--mat figcaption{color:var(--paper-dim)}
/* 3 · inset — narrower than the measure, offset on an amber rule, in the flow (never floated) */
.fig--inset{max-width:46ch;margin:40px 0;padding-left:18px;border-left:2px solid var(--accent)}
.fig--inset img{display:block;width:100%}
.fig--inset figcaption{font-size:14px;line-height:1.5;color:var(--ink-dim);margin-top:11px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;max-width:none;margin:38px 0}
.gallery figure{background:var(--ground-2);border:1px solid var(--rule);padding:9px}
.gallery img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.gallery figcaption{font-size:13px;line-height:1.45;color:var(--ink-dim);margin-top:9px}

/* ---------- interruptions: the Notes material, full width, not a rail ---------- */
.notes{max-width:none;margin:52px 0;background:var(--ground-2);border-top:2px solid var(--accent);
  border-bottom:1px solid var(--rule)}
.notes-hd{display:flex;gap:14px;align-items:center;padding:18px clamp(16px,2.4vw,30px);
  border-bottom:1px solid var(--rule)}
.notes-hd h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.03em}
.notes-hd .ico{color:var(--accent)}
.notes ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.notes li{margin:0;display:flex;gap:14px;padding:16px clamp(16px,2.4vw,30px) 18px;
  border-bottom:1px solid var(--rule-2);border-right:1px solid var(--rule-2);font-size:15px;line-height:1.6;color:var(--ink-2)}
.notes li .num{padding-top:2px}
.band--paper .notes{background:#E1DACA;border-bottom-color:var(--stone)}
.pullquote{margin:48px 0;max-width:none;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);padding:26px 0}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,34px);line-height:1.16;
  letter-spacing:-.04em;color:var(--ink);margin:0;max-width:26ch;text-wrap:balance}
.blockquote{margin:38px 0;padding-left:22px;border-left:3px solid var(--flag)}
.blockquote p{font-size:var(--t-read);line-height:1.6;margin:0 0 10px}
.blockquote cite{font-style:normal;font-size:13.5px;letter-spacing:.06em;color:var(--mute)}
.callout{margin:38px 0;background:var(--accent);color:var(--ground);padding:22px 26px}
.callout p,.art-body .callout p{margin:0;font-size:17px;line-height:1.58;font-weight:500;color:var(--ground)}
.callout a,.art-body .callout a{color:var(--ground);text-decoration-color:var(--ground)}
.callout code,.art-body .callout code{background:rgba(12,17,64,.12);border-color:rgba(12,17,64,.3);color:var(--ground)}
.note{font-size:15px;line-height:1.6;color:var(--ink-dim);border-left:2px solid var(--rule);padding-left:16px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;margin:38px 0;max-width:none}
.statblock{background:var(--ground);box-shadow:0 0 0 1px var(--rule-2);padding:20px 18px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.05em;color:var(--accent)}
.stat-label{font-size:13px;line-height:1.45;color:var(--ink-dim)}
.timeline{list-style:none;margin:38px 0;padding:0;max-width:none}
.timeline li{display:grid;grid-template-columns:minmax(120px,210px) 1fr;gap:20px;
  border-top:1px solid var(--rule);padding:15px 0;margin:0;align-items:baseline}
.t-when{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);line-height:1.4}
.t-what{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:600px){.timeline li{grid-template-columns:1fr;gap:4px}}
.versus,.datatable{margin:38px 0;max-width:none;font-size:15px}
.versus caption,.datatable caption{text-align:left;font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);padding-bottom:12px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:12px 14px;
  border-bottom:1px solid var(--rule-2);vertical-align:top;line-height:1.5}
.versus th,.datatable th{font-weight:500;color:var(--accent);border-bottom-color:var(--rule);
  font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase}
.versus tbody th{text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink)}
.tablewrap{overflow-x:auto;max-width:none;margin:38px 0}
.tablewrap table{margin:0;min-width:460px}
.chart{margin:38px 0;max-width:none}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:14px;color:var(--ink-dim);margin-top:12px}

/* ---------- cards / references ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;margin:38px 0;max-width:none}
.profile-card{background:var(--ground-2);border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%}
.profile-card h3{font-size:18px}
.profile-card .p-role{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:14.5px;line-height:1.6;color:var(--ink-dim);margin:0}
.profile-card .p-links{margin-top:auto;padding-top:8px;display:flex;gap:14px;flex-wrap:wrap}
.profile-card .p-attr{font-size:11.5px;color:var(--mute)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:14px;margin:34px 0;max-width:none}
.org-card{display:flex;flex-direction:column;gap:5px;background:var(--ground-2);border:1px solid var(--rule);
  padding:16px 18px;text-decoration:none}
.org-card:hover{border-color:var(--accent);text-decoration:none}
.org-logo{height:26px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin-bottom:6px}
.org-name{font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.03em;color:var(--ink)}
.org-host{font-size:12px;color:var(--mute)}
.entity-ref{overflow-wrap:anywhere}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;max-width:none;margin:0}
.further-grid a{background:var(--ground);box-shadow:0 0 0 1px var(--rule-2);padding:20px;display:block;font-family:var(--display);font-weight:400;
  font-size:16px;line-height:1.28;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.further-grid a:hover{background:var(--ground-2);color:var(--accent);text-decoration:none}
.related-links{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px}
.related-links li{margin:0;background:var(--ground);box-shadow:0 0 0 1px var(--rule-2);padding:20px}
.related-links a{font-family:var(--display);font-weight:400;font-size:16px;line-height:1.28;letter-spacing:-.03em;color:var(--ink)}
.related-links a:hover{color:var(--accent)}
.related-links span{display:block;font-size:13px;line-height:1.5;color:var(--ink-dim);margin-top:8px}
.cat-list{list-style:none;padding:0;margin:0}
.cat-list li{margin:0;border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:54px minmax(0,1.05fr) minmax(0,.95fr);gap:24px;
  padding:22px 0 24px;align-items:baseline;text-decoration:none;color:var(--ink)}
.cat-list a:hover{background:var(--ground-2);text-decoration:none}
.cat-list strong{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.035em;line-height:1.16}
.cat-list em{font-style:normal;font-size:14.5px;line-height:1.6;color:var(--ink-dim)}
@media (max-width:760px){.cat-list a{grid-template-columns:1fr;gap:8px;padding:18px 0 20px}}

/* ---------- supporters ---------- */
/* Tile width is a CONSTANT derived from the container, identical on every row and at every
   count — no 1fr, no flex-grow, so a lone slot in the last row never stretches. */
.sponsors{display:flex;flex-wrap:wrap;gap:14px;margin:0;--cols:3}
/* Column count only ever falls as the viewport narrows: a wider box beats more of them. */
.sponsor{flex:0 0 calc((100% - (var(--cols) - 1) * 14px) / var(--cols));
  width:calc((100% - (var(--cols) - 1) * 14px) / var(--cols));
  background:var(--ground-3);border:1px solid var(--rule);
  padding:14px;display:flex;flex-direction:column;gap:12px;text-decoration:none;position:relative}
.sponsor::before{content:"";position:absolute;top:-1px;left:-1px;width:16px;height:16px;
  border-top:2px solid var(--accent);border-left:2px solid var(--accent);opacity:0;transition:opacity .15s}
.sponsor:hover{border-color:var(--accent);text-decoration:none}
.sponsor:hover::before{opacity:1}
.sponsor img{display:block;width:100%;height:66px;max-width:none;object-fit:contain;object-position:center;
  background:var(--ground-2);border:1px solid var(--rule-2);padding:9px 12px}
.sponsor-name{font-family:var(--display);font-weight:400;font-size:14.5px;letter-spacing:-.025em;
  color:var(--ink);line-height:1.28;border-top:1px solid var(--rule-2);padding-top:11px;margin-top:auto}
.sponsor-blurb{font-size:12.5px;line-height:1.5;color:var(--ink-dim);margin-top:-2px}
/* Rail present but narrow: the container loses 302px to it, so drop to 2. */
@media (min-width:1041px) and (max-width:1180px){.sponsors{--cols:2}}
@media (max-width:900px){.sponsors{--cols:2}}
@media (max-width:560px){.sponsors{--cols:1}}

/* ---------- footer ---------- */
.foot{background:var(--ground-3);border-top:1px solid var(--rule);padding:30px clamp(18px,4vw,56px) 26px}
.foot-top{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:baseline}
.foot-row{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;
  border-top:1px solid var(--rule-2);margin-top:18px;padding-top:14px}
.foot-lbl{flex:0 0 86px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 0;flex:1 1 340px;min-width:0}
.foot-links a{font-size:12.5px;line-height:1.35;color:#8E97D4;padding:0 18px;
  border-left:1px solid var(--rule);max-width:30ch}
.foot-links a:first-child{padding-left:0;border-left:0}
.foot-links a:hover{color:var(--ink)}
.foot-fine{border-top:1px solid var(--rule-2);margin-top:18px;padding-top:14px;font-size:12px;color:#6C76BC}
@media (max-width:620px){
  .foot-row{display:block}
  .foot-lbl{display:block;margin-bottom:10px}
  .foot-links{display:flex;flex-direction:column;gap:9px}
  .foot-links a{padding:0;border-left:0;max-width:none}
}

.stop-go .ico{width:26px;height:14px;flex-basis:26px}

/* ---------- mobile ---------- */
@media (max-width:1040px){
  .railsec>summary{padding:14px 0}
  .railsec ul{gap:0}
  .railsec ul a{padding:10px 0}
  .rail-meta{gap:0}
  .rail-meta a{padding:11px 0}
}
@media (max-width:620px){
  /* the register stacks instead of scrolling sideways */
  .tablewrap{overflow-x:visible}
  .tablewrap table,.datatable{min-width:0}
  .datatable thead{display:none}
  .datatable tr{display:block;border-top:1px solid var(--rule);padding:16px 0 18px}
  .datatable th,.datatable td{display:block;border:0;padding:0 0 7px}
  .datatable tbody th{font-family:var(--display);font-weight:600;font-size:17px;
    letter-spacing:-.03em;line-height:1.22}
  .datatable td{font-size:14.5px;line-height:1.55;color:var(--ink-dim)}
  .versus{font-size:14px}
  .versus th,.versus td{padding:10px 8px}
}

/* 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}

/* sp-mark-pad: the mark keeps the height Design declared AND the inset Design drew.
   border-box stops width:100%+padding overflowing the tile; the box grows by the
   vertical padding and border so the artwork is not shrunk to pay for the inset. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;height:86px!important;max-height:86px!important}

/* 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-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-no-mark-ground: operator: remove the extra background. Here the plate (#131A56) was LIGHTER
   than the tile (#0A0E33) — still a box around every wordmark. Fill only. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2388px at 390, 15% of the whole page. Two columns bring it to
   1400px (41% shorter). Checked before writing: no new overflow, smallest mark still
   139px wide, longest blurb 3 lines, tile heights 206-225px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsors), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsors{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsors > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors > * *{min-width:0!important;max-width:100%}
    .sponsors img,.sponsors svg{max-width:100%;height:auto}
  .sponsors .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsors (11 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){
  .sponsors:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 866px (74 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 74ch (declared in .art-body > *) to ~87 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 > :is(p:not([class])){max-width:min(1198px, 100%)!important}
}
@media (min-width:1600px){
  div.art-body > :is(p:not([class])){max-width:min(clamp(1198px, 83.194vw, 1438px), 100%)!important}
  div.art-body > :is(p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right: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 > figure.article-figure.fig--plate > img,
  article.stop > figure.article-figure.fig--mat.stop-fig > img,
  article.stop.stop--flip > figure.article-figure.fig--mat.stop-fig > img,
  div > figure.article-figure.fig--mat > img,
  div.art-body > figure.article-figure.fig--inset > img,
  div.art-body > figure.article-figure.fig--mat > img,
  div.art-body > figure.article-figure.fig--plate > img,
  div.cards > a.card > img,
  div.main > section.hero > img,
  section.band > figure.article-figure.fig--mat > img){height:auto}
/* op-img-dims:end */