/* ONE MIC — dumplinvalleybluegrass.com
   Palette: 5 members, each with a job.
   --ground  bone   #F4EFE4  page ground
   --ink     black  #16130E  text, rules
   --accent  clay   #C33A1B  saturated, hue ~14  — kickers, keys, section marks, one full band
   --second  pine   #106B5E  saturated, hue ~170 — opener panel, mats, filed-in marks
   --mat     wheat  #E3D6B8  image mats, quiet panels
*/

:root{
  --ground:#F4EFE4;
  --ink:#16130E;
  --accent:#C33A1B;
  --second:#106B5E;
  --mat:#E3D6B8;

  --ink-2:#2C2519;
  --ink-3:#4B4335;
  --ink-4:#7A705C;
  --rule:#C7BDA6;
  --second-tint:#9DC6BE;
  --second-rule:#4E9084;
  --desk:#CFC7B4;

  --serif:'Vollkorn',Georgia,'Times New Roman',serif;
  --sans:'Chivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --page:1360px;
  --measure:70ch;
  --gutter:44px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--second);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse;width:100%}
svg{flex:0 0 auto}
.icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--ground);padding:8px 14px;z-index:99}

.wrap{max-width:var(--page);margin:0 auto;padding-inline:var(--gutter)}
.rule-heavy{height:3px;background:var(--ink)}
.rule-thin{height:1px;background:var(--rule)}

.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
}
.kicker .icon{width:17px;height:17px}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- masthead ---------- */
.masthead{padding-top:30px}
.masthead .name{display:flex;align-items:center;justify-content:center;gap:20px}
.masthead .name .icon{width:28px;height:28px;color:var(--second)}
.masthead .name .bar{flex:1;height:1px;background:var(--ink);min-width:20px}
.wordmark{font-family:var(--serif);font-weight:900;font-size:clamp(34px,5vw,56px);line-height:1;letter-spacing:.02em;color:var(--ink)}
.wordmark:hover{color:var(--ink)}
.masthead .domain{text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);padding:12px 0 20px}

.nav{border-top:1px solid var(--ink);border-bottom:3px solid var(--ink)}
.nav ul{display:flex;flex-wrap:wrap;justify-content:center;list-style:none}
.nav li{border-right:1px solid var(--rule)}
.nav li:last-child{border-right:0}
.nav a{
  display:flex;align-items:center;gap:8px;padding:12px 20px;
  color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.nav a .icon{width:17px;height:17px;color:var(--second)}
.nav a:hover{color:var(--accent)}
.nav a:hover .icon{color:var(--accent)}
.nav a[aria-current]{background:var(--second);color:var(--ground)}
.nav a[aria-current] .icon{color:var(--ground)}
.nav .browse a{color:var(--accent)}

/* ---------- bands ---------- */
.band{padding:56px 0}
.band--tight{padding:36px 0}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:3px solid var(--ink);padding-bottom:10px;flex-wrap:wrap}
.band-head h2{font-size:30px}
.band-head .with-icon{display:flex;align-items:center;gap:10px}
.band-head .with-icon .icon{width:21px;height:21px;color:var(--accent)}

.panel-pine{background:var(--second);color:var(--ground)}
.panel-pine a{color:var(--ground)}
.panel-pine .eyebrow,.panel-pine .credit{color:var(--second-tint)}
.panel-clay{background:var(--accent);color:var(--ground)}

/* single quiet line */
.quiet{padding:84px 0;text-align:center}
.quiet .mark{width:64px;height:3px;background:var(--accent);margin:0 auto 26px}
.quiet p{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);line-height:1.25;max-width:24ch;margin:0 auto;text-wrap:pretty}

/* ---------- home opener ---------- */
.opener{background:var(--second);color:var(--ground)}
.opener-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:0}
.opener-copy{padding:56px var(--gutter) 56px 0;display:flex;flex-direction:column;justify-content:center}
.opener .kicker{color:var(--second-tint)}
.opener h1{font-size:clamp(38px,4.6vw,62px);line-height:1.03;margin-top:18px}
.opener h1 a{color:var(--ground)}
.opener h1 a:hover{color:var(--mat)}
.opener .stand{font-size:18px;line-height:1.65;color:#DCEAE6;margin-top:20px;max-width:56ch;text-wrap:pretty}
.opener-figure{position:relative;min-height:600px}
.opener-figure img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.more{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;align-self:flex-start;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--accent);padding-bottom:4px;color:var(--ground);
}
.more:hover{border-bottom-color:var(--ground)}
.more--ink{color:var(--ink)}
.more--ink:hover{color:var(--accent)}

/* ---------- feed + supporters rail ---------- */
.feedwrap{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:72px;align-items:start;padding-top:8px}
.feed{min-width:0}
.rail{min-width:0;position:sticky;top:24px}

/* three seconds */
.seconds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:30px}
.second-item h3{font-size:23px;line-height:1.2;margin-top:12px}
.second-item p{font-size:15px;line-height:1.5;color:var(--ink-3);margin-top:8px}
.second-item .plate{border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.second-item img{aspect-ratio:16/10;object-fit:cover;width:100%}

/* register */
.register{margin-top:4px}
.reg-head,.reg-row{display:grid;gap:0 24px;align-items:baseline}
.reg-head{
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
  padding:12px 0;border-bottom:1px solid var(--rule)
}
.reg-row{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.reg-row:last-child{border-bottom:3px solid var(--ink)}
a.reg-row:hover{background:rgba(195,58,27,.06)}
a.reg-row:hover .reg-title{color:var(--accent)}
.reg-title{font-family:var(--serif);font-size:21px;line-height:1.25;color:var(--ink)}
.reg-cell{font-size:15px;color:var(--ink-3)}
.reg-key{font-weight:700;color:var(--accent);font-size:15px;letter-spacing:.04em}
.reg-icon{width:22px;height:22px;color:var(--second);align-self:center}
.reg--five .reg-head,.reg--five .reg-row{grid-template-columns:38px minmax(0,1.1fr) minmax(0,1.7fr) minmax(0,1fr)}
.reg--songs .reg-head,.reg--songs .reg-row{grid-template-columns:minmax(0,2.2fr) 64px minmax(0,1fr) minmax(0,1.3fr)}
.reg--index .reg-head,.reg--index .reg-row{grid-template-columns:24px minmax(0,1fr) minmax(0,1.6fr)}

/* sections index */
.sections-index a{display:grid;grid-template-columns:24px minmax(0,200px) minmax(0,1fr);gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.sections-index a:last-child{border-bottom:3px solid var(--ink)}
.sections-index .icon{width:22px;height:22px;color:var(--accent)}
.sections-index h3{font-size:24px;font-weight:600}
.sections-index p{font-size:15px;color:var(--ink-3);line-height:1.45}
.sections-index a:hover h3{color:var(--accent)}

/* ---------- figure system: three treatments, one drawing system ---------- */
figure{margin:0}
.caption{font-size:15.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.credit{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);margin-top:8px}

/* 1 — bleed: full width, caption offset into the margin below */
.fig--bleed img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig--bleed figcaption{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding-top:14px}
.fig--bleed .caption{max-width:62ch;border-top:1px solid var(--ink);padding-top:10px}
.fig--bleed .credit{border-top:1px solid var(--rule);padding-top:10px;margin-top:0}

/* 2 — plate: heavy rule above, hairline below, caption hung under */
.fig--plate .frame{border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.fig--plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig--plate figcaption{padding-top:12px}

/* 3 — mat: photograph inset on a coloured mat, caption sits on the mat */
.fig--mat{background:var(--second);padding:26px}
.fig--mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig--mat figcaption{padding-top:16px}
.fig--mat .caption{color:var(--ground)}
.fig--mat .credit{color:var(--second-tint)}
.fig--mat.mat--wheat{background:var(--mat)}
.fig--mat.mat--wheat .caption{color:var(--ink-2)}
.fig--mat.mat--wheat .credit{color:var(--ink-4)}

/* ---------- article ---------- */
.art-head{padding:52px 0 0;max-width:960px}
.art-head h1{font-size:clamp(36px,4.8vw,60px);line-height:1.02;margin-top:14px}
.art-head .lead{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,23px);line-height:1.45;color:var(--ink-2);margin-top:18px;max-width:44ch;text-wrap:pretty}
.art-hero{margin-top:38px}

.art-body{max-width:var(--measure);margin:46px auto 0;padding-inline:0}
.art-body>h2{font-size:clamp(25px,2.8vw,31px);line-height:1.15;margin:44px 0 0}
.art-body>h2:first-child{margin-top:0}
.art-body>p{font-family:var(--serif);font-size:19.5px;line-height:1.68;color:var(--ink);margin-top:20px;text-wrap:pretty}
.art-body>figure,.art-body>blockquote,.art-body>.callout{margin-top:34px;margin-bottom:34px}
.art-body a{color:var(--accent);border-bottom:1px solid rgba(195,58,27,.35)}
.art-body a:hover{color:var(--second);border-bottom-color:var(--second)}

/* an inset that breaks the measure */
.breakout{width:calc(100% + 200px);max-width:calc(100vw - 2*var(--gutter));margin-left:-100px}
.breakout-right{width:calc(100% + 160px);margin-right:-160px}

.filed{display:flex;align-items:center;gap:10px;border-top:3px solid var(--ink);margin-top:46px;padding-top:14px;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.filed .icon{width:17px;height:17px;color:var(--accent)}
.filed a{color:var(--ink-4)}
.filed a:hover{color:var(--accent)}

/* the notes bands — full-bleed interruptions carrying the workings */
.notes{width:100vw;margin-left:calc(50% - 50vw);padding:52px 0;background:var(--mat)}
.notes--pine{background:var(--second);color:var(--ground)}
.notes--pine .notes-title{color:var(--ground)}
.notes--pine .eyebrow{color:var(--second-tint)}
.notes-inner{max-width:var(--page);margin:0 auto;padding-inline:var(--gutter)}
.notes-title{font-family:var(--serif);font-size:29px;margin-top:8px;color:var(--ink)}
.notes dl{display:grid;grid-template-columns:minmax(0,1fr);column-gap:56px;margin:22px 0 0}
.note-item{min-width:0}
.notes dt{font-family:var(--serif);font-size:20px;font-weight:600;padding-top:14px}
.notes dd{margin:4px 0 0;font-size:16px;line-height:1.55;padding-bottom:14px;border-bottom:1px solid rgba(22,19,14,.18)}
.notes--pine dd{border-bottom-color:var(--second-rule)}
.notes dl.split{grid-template-columns:repeat(2,minmax(0,1fr))}
.note-item.single dd{padding-top:14px}

/* components from the styleguide, used in article flow */
.lead{font-family:var(--serif);font-size:21px;line-height:1.5}
.pullquote{margin:0;border-left:3px solid var(--accent);padding-left:24px}
.pullquote p{font-family:var(--serif);font-size:clamp(22px,2.6vw,27px);line-height:1.32;color:var(--accent);text-wrap:pretty}
.blockquote{margin:0;background:var(--mat);padding:26px 28px}
.blockquote p{font-family:var(--serif);font-size:21px;line-height:1.45}
.blockquote cite{display:block;margin-top:12px;font-family:var(--sans);font-style:normal;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
.callout{border-top:3px solid var(--second);border-bottom:1px solid var(--rule);padding:16px 0}
.callout p{font-family:var(--serif);font-size:19px;line-height:1.5}
.note{font-size:15.5px;line-height:1.55;color:var(--ink-3);border-left:2px solid var(--rule);padding-left:16px}

.datatable,.versus{font-size:15.5px}
.datatable th,.versus th{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);
  text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--ink)}
.datatable td,.versus td{padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus td:first-child{font-family:var(--serif);font-size:18px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0}
.statblock{border-top:3px solid var(--accent);padding:14px 20px 16px 0}
.stat-num{display:block;font-family:var(--serif);font-size:44px;line-height:1;color:var(--accent)}
.stat-label{display:block;font-size:14px;line-height:1.4;color:var(--ink-3);margin-top:8px}

.timeline{list-style:none}
.timeline li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--rule)}
.timeline li:last-child{border-bottom:3px solid var(--ink)}
.timeline li.single{grid-template-columns:minmax(0,1fr)}
.t-when{font-family:var(--sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);padding-top:4px}
.t-what{font-family:var(--serif);font-size:18.5px;line-height:1.45}

.chart figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}
.chart svg{width:100%;height:auto}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}

.article-figure img{width:100%;aspect-ratio:16/10;object-fit:cover;border-top:3px solid var(--ink);border-bottom:1px solid var(--rule)}
.article-figure figcaption{padding-top:12px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.profile-card{background:var(--mat);padding:22px;display:flex;flex-direction:column}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:22px}
.p-role{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-top:4px}
.profile-card p{font-size:15px;line-height:1.55;margin-top:10px}
.p-links{margin-top:auto;padding-top:12px}
.p-attr{font-size:12px;color:var(--ink-4)}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);padding:16px;background:#FBF8F1}
.org-card:hover{border-color:var(--accent)}
.org-logo{height:34px;width:auto;object-fit:contain}
.org-name{font-family:var(--serif);font-size:19px;color:var(--ink)}
.org-host{font-size:12.5px;letter-spacing:.1em;color:var(--ink-4)}
.entity-ref{white-space:nowrap;border-bottom:1px solid rgba(16,107,94,.4)}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 32px}
.further-grid a{display:block;font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--ink);
  border-top:1px solid var(--rule);padding:14px 0}
.further-grid a:hover{color:var(--accent)}

.related{margin-top:52px}
.related-links{list-style:none}
.related-links li{border-top:1px solid var(--rule)}
.related-links li:last-child{border-bottom:1px solid var(--rule)}
.related-links a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:15px 0;color:var(--ink)}
.related-links .r-title{font-family:var(--serif);font-size:21px;line-height:1.25}
.related-links .r-sec{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.related-links a:hover .r-title{color:var(--accent)}

/* ---------- category pages ---------- */
.cat-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:56px;align-items:end;padding:44px 0 0}
.cat-head h1{font-size:clamp(38px,5vw,64px);line-height:1;margin-top:12px}
.cat-head .intro{font-size:16.5px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.cat-list{list-style:none;margin-top:0}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:3px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;align-items:start;padding:22px 0;color:var(--ink)}
.cat-list img{width:180px;aspect-ratio:16/10;object-fit:cover;border-top:3px solid var(--ink)}
.cat-list h2{font-size:27px;line-height:1.18}
.cat-list p{font-size:15.5px;line-height:1.55;color:var(--ink-3);margin-top:8px;max-width:70ch}
.cat-list a:hover h2{color:var(--accent)}

/* ---------- supporters ---------- */
.supporters{border-top:3px solid var(--ink);padding-top:16px}
.sup-head .eyebrow{display:block}
.sup-head p{font-size:15px;line-height:1.5;color:var(--ink-3);margin-top:8px;max-width:46ch}
.sup-group{margin-top:24px}
.sup-group h3{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:16px}
.sup-list{display:flex;flex-wrap:wrap;gap:16px}
.sponsor{
  flex:0 0 500px;max-width:100%;
  display:grid;grid-template-columns:232px minmax(0,1fr);gap:24px;align-items:center;
  background:#FBF8F1;border:1px solid var(--rule);padding:16px;color:var(--ink);
}
.sponsor:hover{border-color:var(--accent)}
.sponsor img{
  grid-column:1;width:100%;height:48px;max-height:48px;object-fit:contain;object-position:left center;
  background:var(--ink);padding:8px 12px;
}
.sponsor .sponsor-text{grid-column:2;min-width:0}
.sponsor-name{display:block;font-family:var(--serif);font-size:19px;line-height:1.2}
.sponsor-blurb{display:block;font-size:14px;line-height:1.45;color:var(--ink-3);margin-top:6px}
.sponsor.roll{grid-template-columns:232px minmax(0,1fr);padding:12px 16px}


/* ---------- footer ---------- */
.site-footer{margin-top:72px;background:var(--ink);color:var(--rule)}
.site-footer .wrap{padding-top:40px;padding-bottom:44px}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start}
.site-footer .wordmark{color:var(--ground);font-size:30px}
.site-footer p{font-size:13.5px;line-height:1.7;max-width:50ch}
.foot-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 28px;list-style:none}
.foot-nav a{display:flex;white-space:nowrap;align-items:center;gap:8px;color:var(--rule);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.foot-nav a .icon{width:15px;height:15px;color:var(--second-tint)}
.foot-nav a:hover{color:var(--ground)}
.foot-base{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;border-top:1px solid #35301f;margin-top:32px;padding-top:18px;
  font-size:12px;letter-spacing:.1em;color:#8C8266}
.foot-base a{color:#8C8266}
.foot-base a:hover{color:var(--ground)}

/* ---------- simple pages ---------- */
.page-body{max-width:var(--measure);margin:0 auto;padding:48px 0 0}
.page-body h1{font-size:clamp(34px,4.4vw,52px);line-height:1.05}
.page-body h2{font-size:26px;margin-top:36px}
.page-body p{font-family:var(--serif);font-size:19px;line-height:1.65;margin-top:18px}
.page-body ul{margin-top:16px;padding-left:20px}
.page-body li{font-family:var(--serif);font-size:19px;line-height:1.6;margin-top:8px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .feedwrap{grid-template-columns:minmax(0,1fr);gap:56px}
  .rail{position:static}
  .supporters{max-width:540px;margin-inline:auto}
  .sup-list{gap:20px}
}
@media (max-width:1000px){
  :root{--gutter:28px}
  .opener-grid{grid-template-columns:minmax(0,1fr)}
  .opener-copy{padding:44px 0 40px;order:2}
  .opener-figure{order:1;min-height:300px;height:56vw;max-height:520px}
  .cat-head{grid-template-columns:minmax(0,1fr);gap:24px}
  .fig--bleed figcaption{grid-template-columns:minmax(0,1fr);gap:10px}
  .notes dl.split{grid-template-columns:minmax(0,1fr)}
  .breakout,.breakout-right{width:100%;max-width:100%;margin-left:0;margin-right:0}
  .foot-top{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:760px){
  body{font-size:16px}
  .seconds{grid-template-columns:minmax(0,1fr);gap:34px}
  .reg--five .reg-head,.reg--songs .reg-head,.reg--index .reg-head{display:none}
  .reg--five .reg-row{grid-template-columns:38px minmax(0,1fr);gap:6px 16px}
  .reg--five .reg-row .reg-cell{grid-column:2}
  .reg--songs .reg-row{grid-template-columns:minmax(0,1fr) 60px}
  .reg--songs .reg-row .reg-cell{grid-column:1/-1}
  .reg--index .reg-row{grid-template-columns:24px minmax(0,1fr)}
  .reg--index .reg-row .reg-cell{grid-column:2}
  .sections-index a{grid-template-columns:24px minmax(0,1fr)}
  .sections-index p{grid-column:2}
  .cat-list a{grid-template-columns:minmax(0,1fr);gap:14px}
  .cat-list img{width:100%}
  .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .sponsor,.sponsor.roll{flex:0 0 100%;grid-template-columns:minmax(0,1fr);gap:12px}
  .sponsor img,.sponsor.roll img{grid-column:1;width:100%}
  .sponsor .sponsor-text{grid-column:1}
  .art-body{margin-top:34px}
  .masthead .name .bar{display:none}
  .masthead .name{gap:12px}
  .related-links a{flex-direction:column;gap:4px}
  .related-links .r-sec{order:-1}
  .datatable th,.datatable td,.versus th,.versus td{padding-right:10px;font-size:14.5px}
  .statblock{padding-right:14px}
  .sw{flex:0 0 100%}
  .notes{padding:38px 0}
  .notes-title{font-size:24px}
  .quiet{padding:56px 0}
  .nav a{padding:13px 14px;font-size:11.5px}
}

@media print{
  .nav,.rail,.supporters,.more{display:none}
  body{background:#fff}
}

.sponsor.feat{}
.second-item a{display:block;color:var(--ink)}
.second-item a:hover h3{color:var(--accent)}
.second-item .kicker{display:flex}

@media (max-width:420px){
  .nav a{padding:13px 11px;letter-spacing:.1em}
  .art-body>p{font-size:18px}
  .fig--mat{padding:16px}
  .cat-list a{padding:18px 0}
}

/* timeline inside a workings band: match the dt/dd rhythm, and re-key the colours to the panel */
.notes .timeline li{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:32px;padding:14px 0;border-bottom:1px solid rgba(22,19,14,.18)}
.notes .timeline li:last-child{border-bottom:1px solid rgba(22,19,14,.18)}
.notes .timeline li.single{grid-template-columns:minmax(0,1fr)}
.notes .t-when{font-family:var(--serif);font-size:19.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);padding-top:0}
.notes .t-what{font-family:var(--sans);font-size:16px;line-height:1.55}
.notes--pine .timeline li,.notes--pine .timeline li:last-child{border-bottom-color:var(--second-rule)}
.notes--pine .t-when{color:var(--ground)}
.notes--pine .t-what{color:#DCEAE6}
.notes--pine dd{color:#DCEAE6}
@media (max-width:760px){
  .notes .timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .notes .t-when{font-size:18px}
}

@media (max-width:620px){
  .versus,.datatable,.versus tbody,.datatable tbody{display:block;width:100%}
  .versus thead,.datatable thead{display:none}
  .versus tr,.datatable tr{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
  .versus td,.datatable td{display:block;border:0;padding:2px 0;font-size:15.5px}
  .versus td:first-child,.datatable td:first-child{font-family:var(--serif);font-size:19px;padding-bottom:6px}
}

/* hold the workings panels to the reading measure, full-bleed ground and all */
.notes dd,.notes .note-item.single dd{max-width:72ch}
.notes .timeline li{grid-template-columns:minmax(0,240px) minmax(0,72ch)}
.notes .timeline li.single{grid-template-columns:minmax(0,72ch)}
.notes .t-what{max-width:72ch}
@media (max-width:760px){
  .notes .timeline li,.notes .timeline li.single{grid-template-columns:minmax(0,1fr)}
}

/* 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-fit: width:100% + padding must not overflow the tile */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!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-blurb-size: the supporter copy steps down from 14px to 13px.
   Worth recording that it was already SMALLER than the page's own text — body is 17px and
   article paragraphs render at 18px — so this is a deliberate step below the surrounding scale
   at the operator's request, not a correction toward it. */
/* ⚠️ I SIZED A CLASS THIS BUILD DOES NOT USE. Design styles .sponsor-blurb at 14px, but the copy
   is actually in <span class="sponsor-text">, which Design never sized — so it inherited body's
   17px. I measured one tile's .sponsor-blurb, read 14px, and reported that to the operator, who
   was looking at 17px on the page. Measure every text-bearing element in the tile, not the class
   you expect to find. */
.sponsor-text,.sponsor-blurb{font-size:13.5px!important;line-height:1.5!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1822px at 390, 22% of the whole page. Two columns bring it to
   998px (45% shorter). Checked before writing: no new overflow, smallest mark still
   124px wide, longest blurb 3 lines, tile heights 133-173px.
   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. Only the tier(s) that were one-per-row are touched (.sup-list), 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){
  .sup-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sup-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-list > * *{min-width:0!important;max-width:100%}
    .sup-list img,.sup-list svg{max-width:100%;height:auto}
  .sup-list .sponsor-text{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 732px (88 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .art-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 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.art-body{--measure:min(81.492ch, 100%)!important}
}
@media (min-width:1600px){
  div.art-body{--measure:min(clamp(81.492ch, 59.167vw, calc(81.492ch * 1.2)), 100%)!important}
  div.art-body > :is(p:not([class]), p.filed){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-article-seam: text ran into the band that follows it (0-7px) — operator: "end of paragraph nearly touches intersection. Padding is missing." The section now keeps Design's own gap before the band: p → aside.notes: 20px (the gap after the band); p → aside.notes.notes--pine: 20px (the gap after the band). */
  div.art-body > p:has(+ aside.notes){padding-bottom:20px!important}
  div.art-body > p:has(+ aside.notes.notes--pine){padding-bottom:20px!important}
/* op-article-seam:end */

/* op-hover-pad */
a.reg-row{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; margin: 0px; text-wrap: balance;}
.sections-index h2:where(.rt-h3){font-size: 24px; font-weight: 600;}
.sections-index a:hover h2:where(.rt-h3){color: var(--accent);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.plate > img,
  div.art-body > figure.fig.fig--mat > img,
  div.art-hero.wrap > figure.fig.fig--bleed > img,
  div.opener-grid > div.opener-figure > img,
  figure.breakout.fig.fig--plate > div.frame > img,
  figure.fig.fig--plate > div.frame > img,
  li > a > img){height:auto}
/* op-img-dims:end */