@charset "utf-8";
/* softwareunity.com — palette: ground / ink / accent / secondary / muted */
:root{
  --ground:#131210;      /* ground  — the page */
  --ground-2:#1e1c18;    /* ground, raised — mats, plates, panels */
  --ink:#F4F0E8;         /* ink     — all reading text */
  --ink-2:#cfc9bd;       /* ink, secondary — body on ground */
  --accent:#FF3D18;      /* accent  — vermilion: section fields, kickers, rules */
  --accent-dk:#E5350F;
  --secondary:#3D6BFF;   /* secondary — cobalt: dates, numerals, second level */
  --muted:#8F887A;       /* muted   — credits, folios, quiet furniture */
  --hair:#3a352c;
  --hair-2:#241f1a;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"Courier Prime",ui-monospace,monospace;
  --measure:68ch;
  --pad:clamp(20px,4vw,44px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 19px/1.62 var(--body);text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.94;margin:0}
p{margin:0}
::selection{background:var(--accent);color:var(--ground)}
.wrap{max-width:1380px;margin:0 auto;padding-inline:var(--pad)}
.kicker,.folio,.credit,.plate{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--ground);padding:8px 12px;z-index:9}

/* ── drawn system: one mark, four corner brackets round a selected dot ── */
.ico{width:22px;height:22px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:square}
.ico--lg{width:34px;height:34px;stroke-width:1.5}
.mark{width:50px;height:50px;color:var(--accent);stroke:currentColor;fill:none;flex:0 0 auto}
.mark .m-inner{stroke:var(--muted);stroke-width:2;fill:none}
.home .mark{width:62px;height:62px}

/* ── masthead ── */
.masthead{border-bottom:3px solid var(--accent)}
.masthead .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;padding-block:24px 20px}
.brand{display:flex;align-items:flex-end;gap:16px;flex:0 0 auto;white-space:nowrap}
.brand-name{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.1vw,40px);line-height:1;letter-spacing:-.045em;white-space:nowrap}
.home .brand-name{font-size:clamp(30px,4.3vw,58px)}
.nav{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:1 1 auto;min-width:0}
.nav-standing{display:flex;gap:20px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.16em;color:var(--muted);white-space:nowrap}
.nav-sections{display:flex;gap:10px 18px;flex-wrap:wrap;justify-content:flex-end}
.nav-sections a,.nav-sections span{display:flex;align-items:center;gap:7px;white-space:nowrap;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.015em}
.nav-sections a[aria-current]{color:var(--accent)}
.nav-toggle{display:none}

/* ── homepage bands ── */
.lead-figure{position:relative}
.lead-figure img{width:100%;height:clamp(320px,54vw,660px);object-fit:cover}
.crop::after{content:"";position:absolute;inset:22px;pointer-events:none;
  background:
    linear-gradient(var(--accent),var(--accent)) 0 0/34px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 0/2px 34px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0/34px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 0/2px 34px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100%/34px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 0 100%/2px 34px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/34px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 100% 100%/2px 34px no-repeat}
.crop--ink::after{background-image:linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ground),var(--ground)),linear-gradient(var(--ground),var(--ground))}
.lead-text{display:grid;grid-template-columns:1fr 400px;gap:52px;align-items:start;padding-block:40px 12px}
.lead-text h2{font-size:clamp(38px,5.6vw,74px);line-height:.92;letter-spacing:-.038em}
.lead-dek{font-size:19px;line-height:1.5;color:var(--ink-2)}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;color:var(--accent)}
.band{padding-block:clamp(48px,7vw,84px)}
.band--field{background:var(--accent);color:var(--ground)}
.band--field a{color:var(--ground)}
.band--field a:hover{color:var(--ink)}
.band--plate{background:var(--ground-2)}
.rule-top{border-top:1px solid var(--hair);padding-top:22px}

/* the signature: 2006 · 2016 · eleven lines */
.signature{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(24px,4vw,56px);align-items:start}
.signature > div{border-top:3px solid var(--ground);padding-top:14px}
.sig-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(64px,9vw,132px);line-height:.8;letter-spacing:-.05em}
.sig-what{display:block;margin-top:14px;font-size:18px;line-height:1.45;max-width:22em}

/* two seconds, unequal */
.seconds{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.seconds h3{font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.02;letter-spacing:-.028em}
.seconds p{margin-top:14px;font-size:18px;color:var(--ink-2);max-width:34em}

/* short group — three quiet items */
.quiet{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3.4vw,44px)}
.quiet article{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--hair);padding-top:18px;height:100%}
.quiet h3{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.08;letter-spacing:-.02em;min-height:2.16em}
.quiet p{font-size:17px;color:var(--ink-2);line-height:1.55}
.quiet .kicker{display:flex;align-items:center;gap:7px;color:var(--secondary)}

/* sections strip */
.sections-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(18px,2.4vw,32px)}
.sections-strip a{display:flex;flex-direction:column;gap:10px;border-top:2px solid var(--hair);padding:18px 0 6px;height:100%}
.sections-strip a:hover{border-top-color:var(--accent);color:inherit}
.sections-strip .s-no{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent)}
.sections-strip h3{font-family:var(--display);font-weight:600;font-size:26px;line-height:1.06;letter-spacing:-.022em;min-height:2.12em}
.sections-strip p{font-size:16px;color:var(--muted);line-height:1.5}

/* ── colophon (supporters) ── */
.colophon{border-top:3px solid var(--accent);padding-block:36px 44px}
.colophon-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 26px;margin-bottom:22px}
.colophon-head h2{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.02em}
.colophon-head .kicker{color:var(--muted)}
.sponsors{display:flex;flex-wrap:wrap;gap:1px;background:var(--hair)}
.sponsor{flex:0 0 232px;min-height:104px;display:flex;align-items:flex-end;background:var(--ground-2);padding:16px 18px}
.sponsor--wide{flex:0 0 465px}
.sponsor--tall{min-height:210px}
.sponsor-name{font-family:var(--body);font-size:19px;line-height:1.3;border-bottom:1px solid var(--hair);padding-bottom:4px}
.sponsor:hover .sponsor-name{border-bottom-color:var(--accent);color:var(--accent)}
.sponsor--wide .sponsor-name{font-size:26px}

/* ── footer ── */
.foot{background:var(--ground-2);padding-block:38px 44px;margin-top:0}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px}
.foot-brand{display:flex;align-items:flex-end;gap:12px;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em}
.foot-line{font-size:17px;color:var(--muted);max-width:36em}
.foot-nav{display:flex;flex-wrap:wrap;gap:14px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);width:100%;border-top:1px solid var(--hair);padding-top:18px}

/* ── page heads (category / article) ── */
.page-head{padding-block:clamp(38px,6vw,64px) 0}
.page-head .kicker{display:flex;align-items:center;gap:8px;color:var(--secondary)}
.page-head h1{margin-top:18px;font-size:clamp(38px,6.2vw,78px);line-height:.93;letter-spacing:-.04em;max-width:22em}
.page-head .lead{margin-top:24px}
.subnav{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:28px;padding-top:16px;border-top:1px solid var(--hair);font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--secondary)}

/* ── article ── */
.article-body{display:grid;grid-template-columns:[full-start] minmax(var(--pad),1fr) [text-start] minmax(0,var(--measure)) [text-end] minmax(var(--pad),1fr) [full-end];row-gap:26px;padding-block:clamp(34px,5vw,58px) 0}
.article-body > *{grid-column:text}
.article-body > .full{grid-column:full}
.article-body h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,38px);line-height:1.04;letter-spacing:-.028em;margin-top:26px}
.article-body h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.02em;margin-top:14px}
.article-body p{font-size:19px;line-height:1.64;color:var(--ink)}
.article-body p a,.prose-link{color:var(--accent);border-bottom:1px solid rgba(255,61,24,.4)}
.article-body p a:hover{background:var(--accent);color:var(--ground);border-bottom-color:transparent}
.article-body code{font-family:var(--mono);font-size:.88em;color:var(--ink);background:var(--ground-2);padding:1px 5px}
.lead{font-size:24px;line-height:1.42;color:var(--ink);font-family:var(--body)}
.note{font-size:17px;color:var(--muted);border-left:2px solid var(--hair);padding-left:18px}
.callout{background:var(--ground-2);border-top:3px solid var(--secondary);padding:26px 28px}
.callout p{font-size:19px;line-height:1.5}
.callout h3{margin-bottom:10px}
.pullquote{margin:14px 0;border-left:3px solid var(--accent);padding:2px 0 2px 24px}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.18;letter-spacing:-.02em}
.blockquote{margin:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:20px 0}
.blockquote p{font-size:21px;line-height:1.45}
.blockquote cite{display:block;margin-top:12px;font-family:var(--mono);font-size:13px;font-style:normal;color:var(--muted)}
.article-body ul,.article-body ol{margin:0;padding-left:1.2em}
.article-body li{margin-bottom:8px}

/* full-bleed interruptions built from the Notes-for-Design material */
.interrupt{background:var(--ground-2);padding-block:clamp(34px,5vw,56px)}
.interrupt--field{background:var(--accent);color:var(--ground)}
.interrupt--field .kicker{color:var(--ground)}
.interrupt .i-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;margin-bottom:26px}
.interrupt h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.024em;margin:0}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:clamp(16px,2vw,30px)}
.timeline li{display:flex;flex-direction:column;gap:10px;border-top:2px solid currentColor;padding:14px 0 0}
.t-when{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--secondary)}
.interrupt--field .t-when{color:var(--ground)}
.t-what{font-size:17px;line-height:1.5}
.factlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px 40px}
.factlist li{border-top:1px solid currentColor;padding-top:14px;font-size:18px;line-height:1.5}
.factlist b,.factlist strong{font-family:var(--display);font-weight:600;letter-spacing:-.015em;display:block;font-size:19px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(18px,2.4vw,34px)}
.statblock{border-top:2px solid var(--hair);padding:16px 0 0;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(40px,5vw,64px);line-height:.84;letter-spacing:-.04em;color:var(--accent)}
.stat-label{font-size:16px;line-height:1.4;color:var(--ink-2)}

/* ── figure system: three treatments, one drawing ── */
.article-figure{margin:0}
.article-figure img{width:100%}
.article-figure figcaption{margin-top:14px;font-size:17px;line-height:1.5;color:var(--ink-2);max-width:52ch}
.article-figure .credit{display:block;margin-top:8px;color:var(--muted);letter-spacing:.1em}
.article-figure figcaption b{display:block;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.12;letter-spacing:-.018em;margin-bottom:6px;color:var(--ink)}
.article-figure figcaption b a:hover{color:var(--accent)}
/* 1 — bleed: the image breaks the measure, crop marks, caption indented under it */
.fig-bleed{position:relative}
.fig-bleed img{height:clamp(280px,46vw,600px);object-fit:cover}
.fig-bleed figcaption{padding-inline:var(--pad);margin-top:16px}
/* 2 — mat: the photograph sits on a raised plate with an accent rule at the caption */
.fig-mat{background:var(--ground-2);padding:16px 16px 22px}
.fig-mat img{aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{border-top:2px solid var(--accent);padding-top:12px;margin-top:16px;max-width:none}
/* 3 — inset: small, in the column, caption hanging beside it */
.fig-inset{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:end}
.fig-inset img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--hair)}
.fig-inset figcaption{margin-top:0;font-size:16px;border-left:2px solid var(--secondary);padding-left:16px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.gallery figure{margin:0}
.gallery img{aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{margin-top:10px;font-size:15px;color:var(--muted)}

/* ── cards / references ── */
.cat-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(22px,3vw,40px)}
.cat-list a{display:flex;flex-direction:column;gap:12px;height:100%;border-top:2px solid var(--hair);padding:16px 0 0}
.cat-list a:hover{border-top-color:var(--accent);color:inherit}
.cat-list img{aspect-ratio:16/10;object-fit:cover}
.cat-list h3{font-family:var(--display);font-weight:600;font-size:25px;line-height:1.06;letter-spacing:-.022em;min-height:2.12em}
.cat-list p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.cat-list .kicker{margin-top:auto;color:var(--muted)}
.further-grid,.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(20px,2.6vw,36px)}
.further-grid a,.related-links a{display:flex;flex-direction:column;gap:9px;height:100%;border-top:2px solid var(--hair);padding:16px 0 0}
.further-grid a:hover,.related-links a:hover{border-top-color:var(--accent);color:inherit}
.related-links .kicker{display:flex;align-items:center;gap:7px;color:var(--secondary)}
.related-links strong{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.1;letter-spacing:-.02em}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.profile-card{background:var(--ground-2);padding:22px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{aspect-ratio:1;object-fit:cover;width:88px;border:1px solid var(--hair)}
.profile-card h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.02em}
.profile-card .p-role{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.profile-card p{font-size:17px;line-height:1.5;color:var(--ink-2)}
.profile-card .p-links a{color:var(--accent)}
.org-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--hair)}
.org-card{flex:0 0 260px;background:var(--ground-2);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.org-card:hover{background:var(--ground);color:inherit}
.org-logo{max-height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em}
.org-host{font-family:var(--mono);font-size:12px;color:var(--muted)}
.entity-ref{color:var(--secondary);border-bottom:1px solid rgba(61,107,255,.4)}
.versus,.datatable{width:100%;border-collapse:collapse;font-size:17px}
.versus caption,.datatable caption{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--hair-2);vertical-align:top}
.versus thead th,.datatable thead th{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair)}
.datatable td:first-child,.versus td:first-child{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em}
.chart{margin:0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart.donut svg{max-width:250px}
.chart .c-bar{fill:var(--accent)}
.chart .c-bar-2{fill:var(--secondary)}
.chart .c-line{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .c-dot{fill:var(--ground);stroke:var(--accent);stroke-width:2.5}
.chart .c-arc{fill:none;stroke-width:22}
.chart .c-grid{stroke:var(--hair-2);stroke-width:1}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chart-legend span{display:flex;align-items:center;gap:7px}
.chart-legend i{width:14px;height:14px;display:block}
.chart .c-axis{stroke:var(--hair);stroke-width:1}
.chart .c-label,.chart .c-val{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.chart figcaption{margin-top:14px;font-size:16px;color:var(--ink-2)}
.roster{list-style:none;margin:0;padding:0}
.roster li{border-bottom:1px solid var(--hair-2)}
.roster a{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:baseline;padding:16px 22px}.roster a:hover{color:inherit;background:var(--ground-2)}
.roster .r-no{font-family:var(--mono);font-size:13px;color:var(--secondary)}
.roster .r-title{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,27px);line-height:1.1;letter-spacing:-.022em}
.roster .r-sec{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
details.more-list{margin-top:14px}
details.more-list summary{cursor:pointer;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;color:var(--accent);list-style:none}
details.more-list summary::-webkit-details-marker{display:none}

@media (max-width:1180px){
  .home .brand-name{font-size:clamp(28px,3.6vw,42px)}
  .nav-sections a{font-size:16px}
}
@media (max-width:1000px){
  .lead-text,.seconds,.fig-inset{grid-template-columns:1fr}
  .lead-text{gap:22px}
  .sponsor,.sponsor--wide{flex:1 1 240px}
}
@media (max-width:720px){
  body{font-size:18px}
  .masthead .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  .nav{align-items:flex-start;width:100%}
  .nav-sections{justify-content:flex-start;flex-wrap:wrap;gap:12px 16px}
  .nav-sections a{font-size:15px}
  .quiet h3,.sections-strip h3,.cat-list h3{min-height:0}
  .roster a{grid-template-columns:1fr;gap:8px;padding:14px 22px}
  .lead{font-size:21px}
  .article-body p{font-size:18px}
  .sponsor,.sponsor--wide{flex:1 1 100%;min-height:0}
  .sponsor--tall{min-height:0}
}

@media (max-width:560px){
  .versus,.datatable{font-size:15px}
  .versus th,.versus td,.datatable th,.datatable td{padding:10px 10px 10px 0}
  .datatable td:first-child,.versus td:first-child{font-size:16px}
  .sig-num{font-size:clamp(52px,17vw,72px)}
  .interrupt .i-head{gap:6px 14px}
}

/* real project marks arrive as transparent SVG wordmarks — they get a light plate */
.article-figure img[src$=".svg"],.cat-list img[src$=".svg"],.gallery img[src$=".svg"],.org-logo[src$=".svg"]{background:#EDE9E1;object-fit:contain;padding:clamp(16px,3.5vw,40px)}
.fig-bleed img[src$=".svg"]{height:clamp(240px,34vw,440px)}
.fig-mat img[src$=".svg"]{aspect-ratio:16/9}
.org-logo[src$=".svg"]{padding:6px 10px;max-height:40px}

/* ── revision: masthead on two rows, menu as a full row ── */
:root{--flag:#E8A33D}          /* flag — amber, third saturated member */
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 30px;padding-block:22px 0}
.brand{align-items:center;gap:14px}
.nav{flex:1 1 100%;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--hair);margin-top:12px;padding:13px 0 15px}
.nav-standing{gap:16px;flex:0 0 auto}
.nav-sections{flex:1 1 auto;width:100%;justify-content:space-between;gap:10px 18px}
.nav-sections a{gap:9px}
.ico{stroke-width:1.9}
.nav-sections a:nth-child(1) .ico,.sections-strip a:nth-child(1) .ico{color:var(--accent)}
.nav-sections a:nth-child(2) .ico,.sections-strip a:nth-child(2) .ico{color:var(--secondary)}
.nav-sections a:nth-child(3) .ico,.sections-strip a:nth-child(3) .ico{color:var(--flag)}
.nav-sections a:nth-child(4) .ico,.sections-strip a:nth-child(4) .ico{color:var(--accent)}
.nav-sections a:nth-child(5) .ico,.sections-strip a:nth-child(5) .ico{color:var(--secondary)}
.ico--xl{width:44px;height:44px;stroke-width:1.3}
.foot-brand{align-items:center;gap:12px;font-size:24px}
.foot .mark{width:38px;height:38px}

/* ── revision: the coloured field is a deep oxblood, not pure vermilion ── */
.band--field,.interrupt--field{background:#4A1207;color:var(--ink)}
.band--field a,.interrupt--field a{color:var(--ink)}
.band--field a:hover,.interrupt--field a:hover{color:var(--flag)}
.interrupt--field .kicker,.interrupt--field .t-when{color:var(--flag)}
.signature > div{border-top:2px solid rgba(244,240,232,.28);padding-top:16px}
.sig-no{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--flag);margin-bottom:12px}
.sig-num{color:var(--accent)}
.sig-what{color:var(--ink-2)}

/* ── revision: the two seconds get numbered and one sits on a plate ── */
.seconds > article{position:relative;padding-top:38px;border-top:2px solid var(--hair)}
.seconds > article::before{position:absolute;top:12px;left:0;font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--flag)}
.seconds > article:first-child::before{content:"01"}
.seconds > article:last-child::before{content:"02"}
.seconds > article:first-child{background:var(--ground-2);border-top-color:var(--accent);padding:38px 26px 30px}
.seconds > article:first-child::before{left:26px}
.seconds > article:first-child .fig-mat{background:none;padding:0}
.seconds h3{font-size:clamp(30px,3.6vw,46px)}

/* ── revision: meta sits on the image ── */
.fig-over{position:relative}
.f-meta{position:absolute;left:0;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:13px 18px;background:rgba(19,18,16,.86);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.f-meta .ico{color:var(--accent)}

/* ── revision: the quiet group leads with the icon ── */
.quiet article{gap:14px}
.quiet .ico--xl{color:var(--accent)}
.quiet article:nth-child(2) .ico--xl{color:var(--secondary)}
.quiet article:nth-child(3) .ico--xl{color:var(--flag)}
.quiet h3{font-size:22px;min-height:0}
.quiet p{font-size:16px}

/* ── revision: five sections in one row, icon exposed ── */
.sections-strip{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.sections-strip a{gap:14px;border-top:2px solid var(--hair);padding:18px 0 4px}
.sections-strip h3{font-size:21px;min-height:0}
.sections-strip p{font-size:15px}
.sections-strip .s-no{font-family:var(--mono);font-size:12px;letter-spacing:.16em}

/* ── revision: the colophon is an even table of slots ── */
.sponsors{display:grid;grid-template-columns:repeat(auto-fit,232px);justify-content:start;gap:1px;background:var(--hair)}
.sponsor,.sponsor--wide,.sponsor--tall{flex:none;min-height:88px;display:flex;align-items:center;padding:14px 18px}
.sponsor--wide .sponsor-name{font-size:19px}

@media (max-width:1100px){
  .sections-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-sections{justify-content:flex-start}
}
@media (max-width:720px){
  .sections-strip{grid-template-columns:1fr}
  .seconds > article:first-child{padding:34px 18px 24px}
  .seconds > article:first-child::before{left:18px}
  .sponsors{grid-template-columns:1fr}
}

/* the homepage lead is the real jQuery mark at size — it needs paper under it */
.lead-figure img[src$=".svg"]{background:#E4DFD3;object-fit:contain;padding:clamp(28px,6vw,86px);height:clamp(240px,30vw,400px)}
.lead-figure.crop::after{inset:18px}

.sponsors{background:none;gap:10px}
.sponsor,.sponsor--wide,.sponsor--tall{border:1px solid var(--hair);background:var(--ground-2)}
.sponsor:hover{border-color:var(--accent)}

/* the archive is a standing page — it sits with the masthead, not in the section row */
.nav-standing{flex:0 0 auto;align-self:flex-end;font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--muted);padding-bottom:8px}
.nav-standing a{display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid var(--hair);padding-bottom:3px}
.nav-standing a::before{content:"";width:16px;height:1px;background:var(--accent)}
.nav-standing a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav{flex-direction:row}
@media (max-width:720px){.nav-standing{align-self:flex-start;padding-bottom:0}}

/* no vermilion on the oxblood ground — the numerals go paper-white */
.band--field .sig-num{color:var(--ink)}
.band--field .sig-no,.interrupt--field .kicker,.interrupt--field .t-when{color:rgba(244,240,232,.7)}
.band--field .sig-what{color:rgba(244,240,232,.82)}

/* the quiet group's icons centre and go up in size */
.quiet article{align-items:stretch}
.quiet .kicker{flex-direction:column;align-items:center;text-align:center;gap:12px;width:100%;color:var(--muted)}
.quiet .ico--xl{width:76px;height:76px;stroke-width:1.05}

/* wider reading column and canvas on large displays */
@media (min-width:1280px){
  :root{--measure:74ch}
  .article-body p{font-size:20px;line-height:1.62}
  .lead{font-size:25px}
}
@media (min-width:1680px){
  :root{--measure:80ch;--pad:64px}
  .wrap{max-width:1600px}
  .article-body p{font-size:21px}
  .lead{font-size:27px}
  .article-figure figcaption{font-size:18px;max-width:60ch}
}
@media (min-width:2100px){
  :root{--measure:86ch}
  .wrap{max-width:1840px}
}

/* ── one horizontal system: the reading column shares the masthead's left edge ── */
:root{--wrapw:1380px}
.article-body{
  grid-template-columns:[full-start] 1fr [text-start] min(calc(var(--wrapw) - 2*var(--pad)),calc(100% - 2*var(--pad))) [text-end] 1fr [full-end];
}
.article-body > *{grid-column:text;max-width:var(--measure);justify-self:start;width:100%}
.article-body > .full{grid-column:full;max-width:none}
.fig-bleed figcaption{width:min(calc(var(--wrapw) - 2*var(--pad)),calc(100% - 2*var(--pad)));margin-inline:auto;padding-inline:0;max-width:none}
.fig-bleed figcaption{max-width:none;padding-right:max(0px,calc(100% - 68ch))}
@media (min-width:1280px){:root{--measure:78ch}}
@media (min-width:1680px){:root{--measure:84ch;--wrapw:1600px}}
@media (min-width:2100px){:root{--measure:90ch;--wrapw:1840px}}

/* the bleed caption spans the track: lead-in left, the line beside it */
.fig-bleed figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(18px,3vw,52px);padding-right:0;align-items:start;border-top:2px solid var(--hair);padding-top:14px}
.fig-bleed figcaption b{max-width:none;font-size:clamp(22px,2.3vw,30px);margin-bottom:0}
.fig-bleed figcaption .credit{grid-column:1;margin-top:2px}
@media (max-width:760px){.fig-bleed figcaption{grid-template-columns:1fr;gap:10px}}

/* ── the article uses its full width: prose at measure, plates floated into the space ── */
body{overflow-x:hidden}
.article-body{display:block;max-width:var(--wrapw);margin-inline:auto;padding-inline:var(--pad);row-gap:0}
.article-body > *{margin-block:0 26px;max-width:none;width:auto}
.article-body > p,.article-body > .lead,.article-body > h2,.article-body > h3,
.article-body > ul,.article-body > .pullquote,.article-body > .callout,
.article-body > .note,.article-body > .blockquote{max-width:var(--measure)}
.article-body > h2{margin-top:34px}
.article-body > .full{width:100vw;margin-left:calc(50% - 50vw);max-width:none}
.article-body > .fig-mat,.article-body > .fig-inset{
  float:right;clear:right;width:min(44%,560px);margin:10px 0 30px clamp(30px,4vw,64px)}
.article-body > .fig-inset{grid-template-columns:1fr;display:block}
.article-body > .fig-inset img{aspect-ratio:4/3}
.article-body > .fig-inset figcaption{margin-top:14px;border-left:2px solid var(--secondary);padding-left:16px}
.article-body::after{content:"";display:block;clear:both}
@media (max-width:900px){
  .article-body > .fig-mat,.article-body > .fig-inset{float:none;width:auto;margin:0 0 26px}
}

/* ── the field ground goes deep cobalt, not oxblood ── */
.band--field,.interrupt--field{background:#141F3D;border-top:3px solid var(--secondary);color:var(--ink)}
.band--field .sig-no,.interrupt--field .kicker,.interrupt--field .t-when{color:#8FA6E8}
.band--field a:hover,.interrupt--field a:hover{color:#8FA6E8}
.signature > div{border-top-color:rgba(244,240,232,.22)}

/* section colour, same assignment as the homepage */
.sec-disagreement .ico,.sec-breakages .ico{color:var(--accent)}
.sec-library .ico,.sec-now .ico{color:var(--secondary)}
.sec-package .ico{color:var(--flag)}
.related-links a{gap:12px}
.related-links strong{font-size:22px}
/* the inset plate stacks: image then caption, no dead space above it */
.fig-inset{align-items:start}
.article-body > .fig-inset,.article-body > .fig-mat{width:min(42%,520px)}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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}
.colophon-head{flex-wrap:wrap!important}
.colophon-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsors{flex-wrap:wrap!important}
.sponsors > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

/* 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;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.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}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!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}

/* sp-mark-panel: Design set no ground on the mark, so light and dark logos cannot
   both read against the page. Give every mark the same dark plate and an inset — and
   GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:62px!important;max-height:62px!important;width:100%!important;object-fit:contain!important;border-radius:2px}

/* op-money-columns: the supporters block ran one tile per row — 13 tiles,
   896px at 390, 12% of the whole page. Two columns bring it to
   527px (41% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 2 lines, tile heights 60-84px.
   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.
   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:10px!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}

}

/* op-odd-tier-lead: .sponsors (13 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-heading-levels */
h1:where(.rt-h2){font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.94; margin: 0px;}
h2.rt-h3c{font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.94; margin: 0px;}
h2:where(.rt-h3pd666f5){font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.94; margin: 0px;}
.lead-text h1:where(.rt-h2){font-size: clamp(38px, 5.6vw, 74px); line-height: 0.92; letter-spacing: -0.038em;}
.seconds h2.rt-h3c{font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; line-height: 1.02; letter-spacing: -0.028em;}
.quiet h2.rt-h3c{font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.08; letter-spacing: -0.02em; min-height: 2.16em;}
.sections-strip h2.rt-h3c{font-family: var(--display); font-weight: 600; font-size: 26px; line-height: 1.06; letter-spacing: -0.022em; min-height: 2.12em;}
.colophon-head h1:where(.rt-h2){font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em;}
.article-body h2:where(.rt-h3pd666f5){font-family: var(--display); font-weight: 600; font-size: 23px; letter-spacing: -0.02em; margin-top: 14px;}
.cat-list h2.rt-h3c{font-family: var(--display); font-weight: 600; font-size: 25px; line-height: 1.06; letter-spacing: -0.022em; min-height: 2.12em;}
@media (max-width: 720px){.cat-list h2.rt-h3c{min-height: 0px;}}
@media (max-width: 720px){.quiet h2.rt-h3c, .sections-strip h2.rt-h3c{min-height: 0px;}}
.seconds h2.rt-h3c{font-size: clamp(30px, 3.6vw, 46px);}
.quiet h2.rt-h3c{font-size: 22px; min-height: 0px;}
.sections-strip h2.rt-h3c{font-size: 21px; min-height: 0px;}
.article-body > h2:where(.rt-h3pd666f5){max-width: var(--measure);}
h2.rt-h3pd666f5.rt-h3pd666f5{line-height:21.62px}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px){
  figure.article-figure.fig-bleed.crop.crop--ink.fig-over > figcaption, figure.article-figure.fig-bleed.crop.crop--ink.fig-over > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:max(var(--pad), 18px);padding-right:max(var(--pad), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.article-body > figure.article-figure.crop.fig-bleed > img,
  article.article-body > figure.article-figure.fig-inset > img,
  article.article-body > figure.article-figure.fig-mat > img,
  figure.article-figure.fig-inset > a > img,
  figure.article-figure.fig-mat > a > img,
  li > a > img,
  section.band--plate > figure.article-figure.crop.crop--ink > img){height:auto}
/* op-img-dims:end */
@media (min-width:728px) and (max-width:1439px){.sponsors.sponsors:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(232px,calc(50% - 6px)),1fr))!important;justify-content:stretch!important}.sponsors.sponsors > [data-partner]{width:auto!important;max-width:none!important}}