/* cnkendo-da.com — "Four Staves"
   Palette roles: ground(paper) · secondary ground(mat) · ink · secondary(indigo) · accent(persimmon) */
:root{
  --paper:#F3EFE7;
  --mat:#E6E0D4;
  --ink:#16151A;
  --indigo:#23306B;
  --persimmon:#C0421A;
  --rule:rgba(22,21,26,.16);
  --rule-strong:rgba(22,21,26,.55);
  --quiet:rgba(22,21,26,.62);
  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --text:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(18px,4vw,56px);
  --measure:68ch;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.6;
  text-wrap:pretty;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--persimmon)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.005em;margin:0}
svg{flex:none}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding-inline:var(--gutter)}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--persimmon);display:flex;align-items:center;gap:8px}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:20}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--ink)}
.masthead-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 56px;padding-block:22px 14px}
.wordmark{display:flex;align-items:center;gap:13px}
.wordmark svg{color:var(--indigo)}
.wordmark-name{font-family:var(--display);font-size:clamp(26px,3.4vw,34px);line-height:1;display:block}
.wordmark-sub{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--quiet);margin-top:7px;display:block}
.nav{display:flex;flex-wrap:wrap;gap:12px 24px;padding-bottom:5px}
.nav a{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a svg{color:var(--indigo)}
.nav a:hover{border-bottom-color:var(--persimmon)}
.nav a[aria-current="page"]{border-bottom-color:var(--persimmon)}
.nav a[aria-current="page"] svg{color:var(--persimmon)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--ink);margin-top:72px}
.footer-in{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;padding-block:30px 44px}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13px;letter-spacing:.05em}
.footer-note{max-width:62ch;font-size:13.5px;color:var(--quiet);line-height:1.55}

/* ---------- home: opener ---------- */
.opener{position:relative;margin-top:0}
.opener-img{position:relative;width:100%;height:clamp(320px,58vw,660px);overflow:hidden}
.opener-img img{width:100%;height:100%;object-fit:cover}
.opener-panel{background:var(--paper);padding:26px clamp(20px,3vw,32px) 22px;max-width:560px}
.opener-panel h1{font-size:clamp(32px,4.6vw,50px);line-height:1.05;margin:12px 0 14px}
.opener-panel p{margin:0;font-size:clamp(15.5px,1.3vw,17px);line-height:1.5}
.opener-credit{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:16px}
@media (min-width:900px){
  .opener .wrap{position:absolute;inset:auto 0 44px 0}
  .opener-panel{max-width:520px}
}

/* ---------- home: quiet line ---------- */
.statement{padding-block:clamp(48px,7vw,86px);border-bottom:1px solid var(--rule)}
.statement p{margin:0;max-width:22em;font-family:var(--display);font-size:clamp(22px,2.6vw,32px);line-height:1.34}

/* ---------- register (signature table) ---------- */
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.band-head h2{font-size:clamp(21px,2.2vw,27px);display:flex;align-items:center;gap:11px}
.band-head h2 svg{color:var(--indigo)}
.register{width:100%;border-collapse:collapse;font-size:16px}
.register th{text-align:left;font-family:var(--text);font-weight:600;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);padding:12px 14px 12px 0;border-bottom:1px solid var(--rule)}
.register td{padding:15px 14px 15px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.register tr:last-child td{border-bottom:0}
.register .r-no{width:52px;font-size:12.5px;letter-spacing:.06em;color:var(--indigo);font-weight:700;white-space:nowrap}
.register .r-name{font-family:var(--display);font-size:19px;width:24%}
.register .r-gloss{color:var(--quiet);width:20%}
.register .r-mat{text-align:right;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);white-space:nowrap}
@media (max-width:760px){
  .register,.register tbody,.register tr,.register td{display:block;width:auto}
  .register thead{display:none}
  .register tr{border-bottom:1px solid var(--rule);padding-block:14px}
  .register td{border:0;padding:2px 0}
  .register .r-name{font-size:21px}
  .register .r-mat{text-align:left;margin-top:6px}
}

/* ---------- section blocks ---------- */
.sections-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));border-top:1px solid var(--rule)}
.sec-block{display:flex;flex-direction:column;gap:9px;padding:30px clamp(18px,2vw,34px) 34px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.sec-block:hover{background:var(--mat)}
.sec-block svg{color:var(--indigo)}
.sec-block h3{font-size:24px}
.sec-block p{margin:0;font-size:15.5px;color:var(--quiet);line-height:1.5}
.sec-block .sec-count{margin-top:auto;padding-top:14px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}

/* ---------- feed (the edit) ---------- */
.feed-lead{display:grid;gap:clamp(20px,3vw,42px);align-items:start;padding-block:34px;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.feed-lead{grid-template-columns:1.05fr .95fr}}
.feed-lead h3{font-size:clamp(25px,3vw,36px);line-height:1.12;margin:12px 0 12px}
.feed-lead p{margin:0;font-size:16.5px;line-height:1.55;color:rgba(22,21,26,.82)}
.feed-rows{display:flex;flex-direction:column}
.feed-row{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--rule)}
.feed-row h3{font-family:var(--display);font-size:21px;line-height:1.25;max-width:52ch;font-weight:400}
.feed-row .eyebrow{display:flex;align-items:center;gap:7px;white-space:nowrap}
.feed-row .eyebrow svg{color:var(--indigo)}

/* ---------- supporters ---------- */
.supporters{padding-block:clamp(34px,5vw,52px)}
.supporters .eyebrow{margin-bottom:16px}
.sponsor-mosaic{display:flex;flex-wrap:wrap;gap:12px}
/* ONE logo-box presentation for every slot: identical box height and identical mark cap.
   Prominence is a CLASS (.feat) and changes only the tile's ground area, never the mark. */
.sponsor{flex:0 0 240px;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:12px 16px;min-height:72px}
.sponsor.feat{flex:0 0 300px;padding:18px 22px;min-height:96px}
.sponsor img{width:100%;max-width:100%;height:auto;max-height:44px;object-fit:contain;opacity:.9}
.sponsor:hover img{opacity:1}
@media (max-width:560px){
  .sponsor,.sponsor.feat{flex:0 0 100%}
}

/* ---------- article ---------- */
.article-head{padding-block:clamp(34px,5vw,58px) 26px}
.article-head h1{font-size:clamp(34px,5vw,60px);line-height:1.04;margin:16px 0 18px;max-width:26ch}
.article-deck{font-size:clamp(17px,1.6vw,21px);line-height:1.5;max-width:58ch;margin:0;color:rgba(22,21,26,.86)}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:22px;padding-top:14px;border-top:1px solid var(--rule);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet)}
.article-body{display:grid;grid-template-columns:1fr min(var(--measure),100%) 1fr;column-gap:0}
.article-body>*{grid-column:2}
.article-body>.breakout{grid-column:1/-1}
.article-body p{font-size:18px;line-height:1.72;margin:0 0 22px}
.article-body h2{font-size:clamp(24px,2.6vw,31px);line-height:1.2;margin:38px 0 16px}
.article-body h2 .h2-mark{display:block;width:38px;border-top:2px solid var(--persimmon);margin-bottom:14px}
.article-body em{font-style:italic}
.article-body a:not(.entity-ref){border-bottom:1px solid var(--persimmon);color:var(--ink)}
.article-body a:not(.entity-ref):hover{background:var(--mat);color:var(--persimmon)}
.disclaimer{font-size:14.5px;line-height:1.55;color:var(--quiet);font-style:italic;border-top:1px solid var(--rule);padding-top:18px;margin-top:34px}

/* ---------- figure system: three treatments ---------- */
figure{margin:0}
figcaption{font-size:15px;line-height:1.5}
.article-figure .credit{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:8px}
/* F1 — plate: wide image over an offset indigo plate */
.fig-plate{position:relative;margin:38px 0 44px;padding-right:18px}
.fig-plate .plate{position:relative}
.fig-plate .plate::before{content:"";position:absolute;left:16px;top:16px;right:-16px;bottom:-16px;background:var(--indigo)}
.fig-plate img{position:relative;width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate figcaption{position:relative;margin-top:34px;max-width:64ch;border-top:2px solid var(--persimmon);padding-top:12px}
@media (max-width:600px){.fig-plate .plate::before{left:8px;top:8px;right:-8px;bottom:-8px}}
/* F2 — mat: photograph sits on a mat, caption inside the mat */
.fig-mat{background:var(--mat);padding:clamp(16px,2vw,26px);margin:34px 0 38px}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{margin-top:16px;max-width:58ch}
/* F3 — inset: hairline frame, caption hanging beside */
.fig-inset{display:grid;gap:18px 26px;margin:32px 0 36px;align-items:start}
@media (min-width:720px){.fig-inset{grid-template-columns:1.35fr 1fr}}
.fig-inset .frame{border:1px solid var(--rule-strong);padding:9px;background:var(--paper)}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fig-inset figcaption{border-top:1px solid var(--rule-strong);padding-top:11px;font-size:14.5px}

/* ---------- notes-for-design bands ---------- */
.register-band{background:var(--indigo);color:var(--paper);padding-block:clamp(34px,5vw,54px);margin:44px 0}
.register-band .eyebrow{color:rgba(243,239,231,.72)}
.register-band h2{color:var(--paper);font-size:clamp(23px,2.4vw,30px);margin:12px 0 26px;max-width:30ch}
.term-grid{display:grid;gap:0 clamp(24px,4vw,64px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.term{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-top:1px solid rgba(243,239,231,.28)}
.term dt{font-weight:600;font-size:16px}
.term dd{margin:0;font-size:15.5px;line-height:1.5;color:rgba(243,239,231,.86)}
.notes-strip{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding-block:26px 30px;margin:40px 0}
.notes-strip h2{font-size:23px;margin:10px 0 18px}
.notes-strip ul{margin:0;padding:0;list-style:none;display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.notes-strip li{font-size:16px;line-height:1.5;padding-left:18px;position:relative}
.notes-strip li::before{content:"";position:absolute;left:0;top:.62em;width:8px;border-top:2px solid var(--persimmon)}

/* ---------- components (styleguide + articles) ---------- */
.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:rgba(22,21,26,.86)}
.pullquote{margin:34px 0;border-top:2px solid var(--persimmon);border-bottom:1px solid var(--rule);padding:18px 0 20px}
.pullquote p{font-family:var(--display);font-size:clamp(21px,2.3vw,27px);line-height:1.32;margin:0}
.blockquote{margin:30px 0;padding:20px 24px;background:var(--mat)}
.blockquote p{margin:0 0 10px;font-size:17px;line-height:1.6}
.blockquote cite{font-style:normal;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.callout{margin:30px 0;background:var(--indigo);color:var(--paper);padding:22px 24px}
.callout p{margin:0;font-size:17px;line-height:1.55}
p.note{font-size:15.5px;line-height:1.55;color:var(--quiet);border-left:2px solid var(--persimmon);padding-left:14px}
.versus,.datatable{width:100%;border-collapse:collapse;font-size:15.5px;margin:28px 0}
.versus th,.datatable th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);font-weight:600;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule-strong)}
.versus td,.datatable td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus td:first-child{font-weight:600}
.datatable td:last-child,.datatable th:last-child,.versus td:last-child,.versus th:last-child{padding-right:0;text-align:right}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.statrow{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:30px 0;background:var(--rule)}
.statblock{background:var(--paper);padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-size:36px;line-height:1;color:var(--indigo)}
.stat-label{font-size:13.5px;line-height:1.4;color:var(--quiet)}
.timeline{list-style:none;margin:30px 0;padding:0;display:grid;gap:0}
.timeline li{display:grid;gap:4px 24px;padding:14px 0;border-top:1px solid var(--rule)}
@media (min-width:640px){.timeline li{grid-template-columns:minmax(160px,220px) 1fr}}
.t-when{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--persimmon);font-weight:700}
.t-what{font-size:16px;line-height:1.5}
.chart{margin:30px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:14px;font-size:14.5px;color:var(--quiet);border-top:1px solid var(--rule);padding-top:10px}
.chart text{font-family:var(--text);font-size:11px;fill:var(--ink)}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:32px 0}
.gallery figure{display:flex;flex-direction:column;gap:9px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{font-size:13.5px;line-height:1.45;color:var(--quiet)}
.profile-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:28px 0}
.profile-card{display:flex;flex-direction:column;gap:8px;background:var(--mat);padding:20px}
.profile-card .p-photo{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:6px}
.profile-card h3{font-size:21px}
.p-role{margin:0;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--persimmon);font-weight:700}
.profile-card p{margin:0;font-size:15px;line-height:1.5}
.p-links{margin-top:auto;padding-top:8px}
.p-links a,.p-attr{font-size:13.5px;border-bottom:1px solid var(--persimmon)}
.profile-card.no-photo{border-top:2px solid var(--ink);background:transparent;padding:16px 0 0}
.org-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:26px 0}
.org-card{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;align-items:center;border:1px solid var(--rule-strong);padding:14px}
.org-card:hover{background:var(--mat)}
.org-logo{grid-row:span 2;width:52px;height:52px;object-fit:contain;background:var(--ink)}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-weight:600;font-size:16px;align-self:end}
.org-host{font-size:12.5px;color:var(--quiet);align-self:start}
.entity-ref{border-bottom:1px solid var(--indigo);white-space:nowrap}
.further-grid{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));background:var(--rule);margin:28px 0}
.further-grid a{background:var(--paper);padding:18px;font-family:var(--display);font-size:19px;line-height:1.25;display:flex;min-height:104px}
.further-grid a:hover{background:var(--mat)}
.related{border-top:2px solid var(--ink);padding-top:20px;margin-top:48px}
.related-links{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));background:var(--rule)}
.related-links li{background:var(--paper)}
.related-links a{display:flex;flex-direction:column;gap:9px;padding:18px;min-height:118px;height:100%}
.related-links a:hover{background:var(--mat)}
.related-links .eyebrow{display:flex;align-items:center;gap:7px}
.related-links .eyebrow svg{color:var(--indigo)}
.related-links strong{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.25}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list>li>a{display:grid;gap:6px 28px;padding:22px 0;align-items:baseline;grid-template-columns:1fr}
@media (min-width:820px){.cat-list>li>a{grid-template-columns:64px minmax(220px,1fr) 1.15fr}}
.cat-list .c-no{font-size:12.5px;letter-spacing:.06em;color:var(--indigo);font-weight:700}
.cat-list .c-title{font-family:var(--display);font-size:23px;line-height:1.2}
.cat-list .c-brief{font-size:15.5px;line-height:1.5;color:var(--quiet)}
.cat-list>li>a:hover .c-title{color:var(--persimmon)}

/* section landing */
.cat-head{display:grid;gap:clamp(22px,3vw,52px);align-items:end;padding-block:clamp(30px,4vw,50px) 32px;border-bottom:2px solid var(--ink)}
@media (min-width:900px){.cat-head{grid-template-columns:1fr 420px}}
.cat-head h1{font-size:clamp(40px,6vw,66px);line-height:1;margin:14px 0 16px}
.cat-head p{margin:0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;max-width:52ch}
.page-body{padding-block:clamp(28px,4vw,44px);max-width:74ch}
.page-body h2{font-size:26px;margin:34px 0 12px}
.page-body p{font-size:17.5px;line-height:1.7;margin:0 0 20px}
.page-body ul{padding-left:20px}
.page-body li{margin-bottom:8px}

/* styleguide only */
.sg-section{padding-block:34px;border-bottom:1px solid var(--rule)}
.sg-section>h2{font-size:27px;margin-bottom:6px}
.sg-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--persimmon);font-weight:700;margin-bottom:16px}
.sg-narrow{max-width:360px;border:1px dashed var(--rule-strong);padding:12px}

/* ---------- home: the parts (tip to grip) ---------- */
.parts-band{background:var(--indigo);color:var(--paper);padding-block:clamp(40px,6vw,72px)}
.parts-band .parts-in{display:grid;gap:clamp(26px,4vw,64px)}
@media (min-width:920px){.parts-band .parts-in{grid-template-columns:340px 1fr;align-items:start}}
.parts-intro .eyebrow{color:rgba(243,239,231,.7)}
.parts-intro h2{color:var(--paper);font-size:clamp(28px,3.4vw,40px);line-height:1.1;margin:14px 0 14px}
.parts-intro p{margin:0 0 22px;font-size:16.5px;line-height:1.55;color:rgba(243,239,231,.86);max-width:34ch}
.parts-intro .frame{border:1px solid rgba(243,239,231,.4);padding:9px;max-width:320px}
.parts-intro .frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.parts-intro figcaption{font-size:12.5px;line-height:1.45;color:rgba(243,239,231,.7);margin-top:10px;max-width:320px}
.parts-list{list-style:none;margin:0;padding:0;counter-reset:part}
.parts-list li{border-top:1px solid rgba(243,239,231,.26)}
.parts-list li:last-child{border-bottom:1px solid rgba(243,239,231,.26)}
.parts-list a{display:grid;gap:2px 22px;padding:17px 14px 18px 0;grid-template-columns:52px 1fr;align-items:baseline;color:var(--paper)}
.parts-list a:hover{background:rgba(243,239,231,.07);color:var(--paper)}
.parts-list a:hover .part-name{color:#fff}
.part-no{grid-row:span 2;font-family:var(--display);font-size:26px;line-height:1;color:rgba(243,239,231,.5);padding-top:2px}
.part-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.part-name{font-family:var(--display);font-size:22px;line-height:1.15;border-bottom:1px solid rgba(243,239,231,.45)}
.part-en{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,231,.62)}
.part-gloss{font-size:16px;line-height:1.5;color:rgba(243,239,231,.85);max-width:60ch}
.part-mat{grid-column:2;margin-top:7px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,239,231,.62);display:flex;align-items:center;gap:9px}
.part-mat::before{content:"";width:18px;border-top:2px solid var(--persimmon)}
@media (min-width:1060px){
  .parts-list a{grid-template-columns:52px minmax(0,1fr) 190px}
  .part-mat{grid-column:3;grid-row:1/span 2;margin-top:0;justify-content:flex-end;text-align:right}
}
@media (max-width:520px){
  .parts-list a{grid-template-columns:38px 1fr;padding-right:0}
  .part-name{font-size:20px}
}

/* ---------- sections grid: the icon leads ---------- */
.sec-block{gap:14px}
.sec-block svg{width:88px;height:88px;padding:19px;border:1px solid var(--rule-strong);color:var(--indigo)}
.sec-block:hover svg{background:var(--indigo);color:var(--paper);border-color:var(--indigo)}
.sec-block h3{font-size:27px;margin-top:2px}

/* ---------- feed rows ---------- */
.feed-row{align-items:start}
.feed-row .fr-tag{display:flex;align-items:center;gap:8px;order:2;white-space:nowrap;padding-top:4px}
.feed-row .fr-main{order:1;display:flex;flex-direction:column;gap:6px;max-width:64ch}
.feed-row .fr-brief{font-size:15.5px;line-height:1.5;color:var(--quiet)}

/* ---------- lead sidebar list ---------- */
.lead-aside{margin-top:26px;border-top:2px solid var(--ink);padding-top:16px}
.lead-aside .eyebrow{margin-bottom:12px}
.order-list{list-style:none;margin:0 0 18px;padding:0;counter-reset:step}
.order-list li{display:grid;grid-template-columns:30px 1fr;gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.45}
.order-list li::before{counter-increment:step;content:counter(step);font-family:var(--display);font-size:16px;color:var(--persimmon)}
.order-list b{font-weight:600}
.order-list em{font-style:italic;color:var(--quiet)}

/* ---------- supporters: the roll, one row ---------- */
.supporters--roll{max-width:none;padding-inline:var(--gutter)}
.supporters--roll .sponsor-mosaic{gap:12px;flex-wrap:wrap}
.supporters--roll .sponsor{flex:0 0 240px;min-height:72px}

/* ---------- mobile hardening ---------- */
body{overflow-wrap:break-word}
.article-body p,.article-deck,.part-gloss,figcaption,.c-brief,.fr-brief,.footer-note,.stat-label,.t-what,.term dd{overflow-wrap:break-word}
.feed-lead>*,.cat-head>*,.parts-band .parts-in>*,.term,.statblock,.profile-card,.org-card{min-width:0}
.parts-intro .frame,.parts-intro figcaption{max-width:100%}
.fig-plate figcaption,.fig-mat figcaption{max-width:min(64ch,100%)}
.register-band h2,.parts-intro h2,.article-head h1,.cat-head h1{max-width:100%}
.versus,.datatable{min-width:0}
@media (max-width:760px){
  .table-scroll{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
}
@media (max-width:560px){
  .supporters--roll .sponsor{flex:0 0 100%}
  .sec-block svg{width:72px;height:72px;padding:15px}
  .sec-block h3{font-size:24px}
  .article-body p{font-size:17px}
  .fig-plate{padding-right:10px}
  .article-meta{gap:6px 14px;font-size:11px}
  .masthead-in{gap:16px 24px}
  .nav{gap:10px 18px}
}
@media (max-width:400px){
  .register-band .term-grid,.notes-strip ul,.sections-grid,.term-grid{grid-template-columns:1fr}
  .order-list li{grid-template-columns:22px 1fr;gap:4px 9px}
  .stat-num{font-size:31px}
}

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

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-mosaic .sponsor.sponsor img{height:38px!important}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   912px at 390, 12% of the whole page. Two columns bring it to
   444px (51% shorter). Checked before writing: no new overflow, smallest mark still
   126px wide, longest blurb 0 lines, tile heights 72-96px.
   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.
   Only the tier(s) that were one-per-row are touched (.sponsor-mosaic), 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){
  .sponsor-mosaic{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sponsor-mosaic > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-mosaic > * *{min-width:0!important;max-width:100%}
    .sponsor-mosaic img,.sponsor-mosaic svg{max-width:100%;height:auto}
}

/* op-article-width: the article column was capped at 707px (86 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "1fr min(var(--measure),100%) 1fr" (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. 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.wrap.article-body{grid-template-columns:1fr min(835px, 100%) 1fr!important}
}
@media (min-width:1600px){
  div.wrap.article-body{grid-template-columns:1fr min(clamp(835px, 57.986vw, 1002px), 100%) 1fr!important}
  div.wrap.article-body > :is(p:not([class]), p.disclaimer){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */

/* op-hover-pad */
.parts-list a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; letter-spacing: 0.005em; margin: 0px;}
.sec-block h2:where(.rt-h3){font-size: 24px;}
.sec-block h2:where(.rt-h3){font-size: 27px; margin-top: 2px;}
@media (max-width: 560px){.sec-block h2:where(.rt-h3){font-size: 24px;}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body.wrap > figure.article-figure.fig-mat > img,
  div.cat-head.wrap > figure.article-figure.fig-mat > img,
  div.feed-lead > figure.article-figure.fig-mat > img,
  figure.article-figure.breakout.fig-plate > div.plate > img,
  figure.article-figure.fig-inset > div.frame > img,
  figure.frame-fig > div.frame > img,
  section.opener > div.opener-img > img){height:auto}
/* op-img-dims:end */
@media (min-width:660px) and (max-width:1439px){.sponsor-mosaic.sponsor-mosaic:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(240px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-mosaic.sponsor-mosaic > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}