/* theshirelles.com — Tonight's bill
   PALETTE
   --paper   #EFE6D2  ground: every reading surface
   --ink     #1A1712  ink: body text, rules, the heavy type
   --amber   #E39B1F  accent: the marquee light — numerals, kickers, links on dark
   --petrol  #0D6B66  secondary: whole bands, panels, links on paper
   --stage   #0B0A09  the dark ground: masthead, photo mats, logo boxes
*/
:root{
  --paper:#EFE6D2;
  --paper-2:#E4D9C0;
  --ink:#1A1712;
  --ink-2:#3A342A;
  --amber:#E39B1F;
  --petrol:#0D6B66;
  --petrol-lift:#9FCBC7;
  --stage:#0B0A09;
  --muted:#7A7060;
  --rule:#B9AC91;
  --cream-dim:#C9BFA8;
  --dim:#9C9284;
  --display:'Chivo','Helvetica Neue',Helvetica,sans-serif;
  --body:Spectral,Georgia,serif;
  --measure:70ch;
  --pad:clamp(18px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.62;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:var(--petrol);text-decoration:none}
a:hover{color:#8A5A08;text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:0.92;margin:0;letter-spacing:-0.005em}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.wrap{max-width:1480px;margin:0 auto;padding-inline:var(--pad)}
.measure{max-width:var(--measure)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--amber);color:var(--stage);padding:8px 12px;z-index:20}
.kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.12em;font-size:15px;line-height:1.2;color:var(--petrol);display:flex;align-items:center;gap:9px;margin:0 0 12px}
.kicker--onDark{color:var(--amber)}
.sec-icon{flex:none;width:22px;height:22px}
.sec-icon--lg{width:34px;height:34px}

/* ---------- masthead + menu ---------- */
.masthead{background:var(--stage);color:var(--paper)}
.strapline{font-family:var(--display);text-transform:uppercase;letter-spacing:0.13em;font-size:13.5px;color:var(--dim);padding:9px 0;border-bottom:1px solid #241F19}
.brandrow{display:flex;align-items:flex-end;gap:clamp(14px,2.4vw,28px);padding:26px 0 22px}
.brandmark{flex:none;color:var(--amber);width:clamp(58px,7vw,96px);height:auto}
.brand{flex:1;min-width:0}
.brand a{color:inherit;text-decoration:none}
.brand-word{font-family:var(--display);font-weight:900;text-transform:none;font-size:clamp(38px,8.4vw,116px);line-height:0.8;letter-spacing:-0.02em;color:var(--paper)}
.brand-word .dot{color:var(--amber)}
.brand-line{margin:12px 0 0;font-size:17px;color:var(--cream-dim);max-width:52ch}
.menu{border-top:1px solid #241F19;padding:22px 0 30px}
.menu-grid{display:grid;grid-template-columns:minmax(300px,1.5fr) minmax(280px,1fr);gap:30px 46px}
.menu h2,.menu h3{text-transform:uppercase}
.menu-lead a.m-title{display:block;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.8vw,38px);line-height:1;color:var(--amber);text-decoration:none}
.menu-lead a.m-title:hover,.menu-rest a.m-title:hover{text-decoration:underline;text-underline-offset:4px}
.menu-rest{display:grid;gap:18px}
.menu-rest a.m-title{display:block;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.05;color:var(--paper);text-decoration:none}
.m-head{display:flex;align-items:flex-start;gap:10px}
.m-head .sec-icon{color:var(--amber);margin-top:2px}
.m-links{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px;margin:10px 0 0;padding:0;font-size:15.5px}
.m-links a{color:var(--cream-dim)}
.m-links a:hover{color:var(--amber)}
.menu-lead .m-links{font-size:16.5px;gap:6px 22px}
.menu-foot{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:24px;padding-top:16px;border-top:1px solid #241F19;font-family:var(--display);text-transform:uppercase;letter-spacing:0.1em;font-size:14.5px}
.menu-foot a{color:var(--paper)}
.menu-toggle{display:none}

/* ---------- bands ---------- */
.band{padding:clamp(46px,6vw,82px) 0}
.band--tight{padding:clamp(30px,4vw,52px) 0}
.band--dark{background:var(--stage);color:var(--paper)}
.band--dark a{color:var(--amber)}
.band--petrol{background:var(--petrol);color:var(--paper)}
.band--petrol a{color:var(--paper)}
.band--paper2{background:var(--paper-2)}
.band--lead{padding:0}
.rule-hand{display:block;width:100%;height:12px;color:var(--ink);margin:16px 0 34px}
h2.band-title{font-size:clamp(28px,3.9vw,54px)}
.deck{font-size:clamp(18px,1.5vw,21px);line-height:1.5;max-width:62ch}

/* ---------- figure system: one family, four treatments ---------- */
/* 1 · plate — dark mat, full width, caption inside the mat */
.fig{margin:0}
.fig img{width:100%;height:auto}
.fig-cap{font-size:16px;line-height:1.45;color:var(--ink-2);max-width:56ch;margin:13px 0 0;padding-left:14px;border-left:3px solid var(--amber)}
.fig-cap b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;font-size:14.5px;color:var(--petrol);display:block;margin-bottom:3px}
.fig-credit{display:block;font-size:12.5px;letter-spacing:0.05em;text-transform:uppercase;font-family:var(--display);color:var(--muted);margin-top:5px}
.fig--plate{background:var(--stage);padding:clamp(14px,1.6vw,22px)}
.fig--plate .fig-cap{color:var(--cream-dim);border-left-color:var(--amber)}
.fig--plate .fig-cap b{color:var(--amber)}
.fig--plate .fig-credit{color:#6E6455}
/* 2 · mat — cream mat with drawn corner marks */
.fig--mat{background:var(--paper-2);padding:20px;position:relative}
.fig--mat .cnr{position:absolute;width:24px;height:24px;color:var(--petrol)}
.fig--mat .cnr-tl{top:6px;left:6px}
.fig--mat .cnr-br{bottom:6px;right:6px}
/* 3 · offset — image and caption step past each other */
.fig--offset{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(190px,0.62fr);gap:26px;align-items:end}
.fig--offset .fig-cap{margin:0;border-left:none;padding-left:0;border-top:2px solid var(--ink);padding-top:12px}
/* 4 · bleed — breaks the measure */
.fig--bleed{margin-inline:calc(-1 * var(--pad));width:auto}
.fig--bleed .fig-cap{margin-inline:var(--pad)}
.fig--inset{max-width:330px}
.fig--inset .fig-cap{font-size:14.8px}

/* ---------- homepage: the bill ---------- */
.lead-hero{position:relative;background:var(--stage)}
.lead-hero img{width:100%;height:clamp(300px,64vh,720px);object-fit:cover;object-position:center 42%}
.lead-copy{background:var(--stage);color:var(--paper);padding:clamp(22px,3vw,40px) 0 clamp(28px,3.4vw,46px)}
.lead-copy h1{font-size:clamp(40px,9vw,132px);line-height:0.82;color:var(--paper);text-transform:uppercase}
.lead-grid{display:grid;grid-template-columns:minmax(300px,1.35fr) minmax(240px,0.8fr);gap:34px;margin-top:26px}
.lead-grid .big{font-size:clamp(20px,1.9vw,26px);line-height:1.45;color:var(--paper)}
.lead-grid .side{font-size:16.5px;color:var(--cream-dim)}
.hero-strip{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-bottom:clamp(26px,3vw,44px)}
.hero-strip .fig-cap{color:var(--cream-dim);border-left-color:var(--petrol-lift)}
.hero-strip .fig-cap b{color:var(--amber)}

.bill{display:grid;grid-template-columns:minmax(320px,1.5fr) minmax(290px,1fr);gap:clamp(28px,3.4vw,56px)}
.bill-lead h3{font-size:clamp(26px,3.4vw,46px);margin-top:22px}
.bill-lead h3 a{color:var(--ink)}
.bill-lead p{font-size:19.5px;margin-top:12px}
.bill-list{display:flex;flex-direction:column}
.bill-item{border-top:1px solid var(--rule);padding:18px 0 20px;display:flex;gap:14px;align-items:flex-start}
.bill-item:first-child{border-top:2px solid var(--ink)}
.bill-no{font-family:var(--display);font-weight:900;font-size:42px;line-height:0.78;color:var(--amber);flex:none;min-width:44px}
.bill-item h4{font-size:23px;line-height:1.02}
.bill-item h4 a{color:var(--ink)}
.bill-item p{font-size:16px;margin:7px 0 0;color:var(--ink-2)}
.more-link{display:inline-block;margin-top:18px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;font-size:17px;border-bottom:2px solid currentColor}
.more-link:hover{text-decoration:none}
.quiet-line{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(30px,5.2vw,74px);line-height:0.95;margin:0}
.sig-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,0.85fr);gap:clamp(26px,3.4vw,52px);align-items:start}

/* section index cards (even height) */
.sec-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px}
.sec-card{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--rule);padding:18px 18px 20px;color:var(--ink)}
.sec-card:hover{border-color:var(--petrol);text-decoration:none}
.sec-card h3{font-size:21px;line-height:1.05;min-height:2.1em}
.sec-card .sec-icon{color:var(--petrol);margin-bottom:12px}
.sec-card p{font-size:16px;color:var(--ink-2);margin:10px 0 0}
.sec-card .count{margin-top:auto;padding-top:14px;font-family:var(--display);text-transform:uppercase;letter-spacing:0.1em;font-size:14px;color:var(--muted)}

/* ---------- supporters ---------- */
.sponsors-run{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
.sponsor{flex:0 0 234px;min-height:212px;display:flex;flex-direction:column;color:var(--ink);text-decoration:none;background:var(--paper);border:1px solid var(--rule);padding:12px}
.sponsor:hover{border-color:var(--petrol);text-decoration:none}
.sponsor img{background:var(--stage);width:100%;height:56px;object-fit:contain;padding:8px 12px}
.sponsor-name{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:17px;line-height:1.1;margin-top:12px;min-height:2.2em}
.sponsor-blurb{font-size:15px;line-height:1.4;color:var(--ink-2);margin-top:8px}

/* ---------- article ---------- */
.art-head{padding:clamp(34px,4vw,58px) 0 0}
.art-head h1{font-size:clamp(34px,5.6vw,80px);line-height:0.88;max-width:26ch}
.art-standfirst{font-size:clamp(19px,1.7vw,24px);line-height:1.45;max-width:56ch;margin:22px 0 0;color:var(--ink-2)}
.art-body{font-size:19.5px}
.art-body h2{font-size:clamp(24px,2.7vw,38px);margin:0 0 16px}
.art-body h3{font-size:22px;margin:0 0 12px}
.art-body>*{max-width:var(--measure)}
.art-body>.full{max-width:none}
.art-sec{margin-top:clamp(30px,3.4vw,46px)}
.lead{font-size:clamp(20px,1.8vw,25px);line-height:1.42;font-family:var(--display);font-weight:500;text-transform:none;letter-spacing:0}
.pullquote{margin:32px 0;padding:0 0 0 24px;border-left:4px solid var(--amber);max-width:34ch}
.pullquote p{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(23px,2.6vw,34px);line-height:1;margin:0}
.blockquote{margin:28px 0;padding:20px 24px;background:var(--paper-2);border-left:4px solid var(--petrol)}
.blockquote p{margin:0;font-size:19px}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--display);text-transform:uppercase;letter-spacing:0.08em;font-size:14px;color:var(--muted)}
.callout{margin:28px 0;padding:22px 24px;background:var(--stage);color:var(--paper)}
.callout p{margin:0;font-size:18.5px}
.note{font-size:16.5px;color:var(--ink-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin:24px 0}

/* notes-for-design plates: full-width interruptions, not a rail */
.plate{background:var(--paper-2);border-top:2px solid var(--ink);padding:24px var(--pad) 28px;margin:clamp(30px,3.6vw,46px) calc(-1 * var(--pad));}
.plate--dark{background:var(--stage);color:var(--paper);border-top-color:var(--amber)}
.plate h3{font-size:clamp(21px,2.2vw,30px);margin-bottom:16px}
.plate--dark h3{color:var(--paper)}
.plate-cols{columns:2;column-gap:44px}
.plate ul{list-style:none;margin:0;padding:0}
.plate li{font-size:17px;line-height:1.45;padding:9px 0;border-top:1px solid var(--rule);break-inside:avoid}
.plate--dark li{border-top-color:#2A2620;color:var(--cream-dim)}
.datatable{width:100%;border-collapse:collapse;font-size:17px}
.datatable th,.datatable td{text-align:left;padding:10px 14px 10px 0;border-top:1px solid var(--rule);vertical-align:top}
.datatable th{font-family:var(--display);text-transform:uppercase;letter-spacing:0.07em;font-size:14.5px;color:var(--muted);font-weight:700;white-space:nowrap}
.plate--dark .datatable th,.plate--dark .datatable td{border-top-color:#2A2620}
.plate--dark .datatable th{color:var(--amber)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(150px,0.42fr) 1fr;gap:8px 22px;padding:12px 0;border-top:1px solid var(--rule)}
.plate--dark .timeline li{border-top-color:#2A2620}
.t-when{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;font-size:16px;color:var(--petrol);line-height:1.15}
.plate--dark .t-when{color:var(--amber)}
.t-what{font-size:17px;line-height:1.45}
.statrow{display:flex;flex-wrap:wrap;gap:14px}
.statblock{flex:0 0 200px;border-top:2px solid var(--amber);padding:12px 0 0}
.stat-num{display:block;font-family:var(--display);font-weight:900;font-size:52px;line-height:0.82}
.stat-label{display:block;font-size:15.5px;line-height:1.35;color:var(--ink-2);margin-top:6px}
.plate--dark .stat-label{color:var(--cream-dim)}
.versus{width:100%;border-collapse:collapse;font-size:17px}
.versus th,.versus td{padding:11px 14px 11px 0;border-top:1px solid var(--rule);text-align:left;vertical-align:top}
.versus thead th{font-family:var(--display);text-transform:uppercase;font-size:14.5px;letter-spacing:0.07em;color:var(--petrol)}
.chart{margin:26px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{font-size:15.5px;color:var(--ink-2);margin-top:10px;border-left:3px solid var(--amber);padding-left:12px;max-width:56ch}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gallery figcaption{font-size:14.5px;color:var(--ink-2);margin-top:8px}
.article-figure{margin:26px 0}
.article-figure img{width:100%}
.article-figure figcaption{font-size:16px;color:var(--ink-2);margin-top:12px;padding-left:14px;border-left:3px solid var(--amber);max-width:56ch}

/* profiles / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin:26px 0}
.profile-card{display:flex;flex-direction:column;background:var(--paper-2);padding:18px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:12px}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-family:var(--display);text-transform:uppercase;letter-spacing:0.08em;font-size:14px;color:var(--petrol);margin:6px 0 10px}
.profile-card p{font-size:16px}
.profile-card .p-links{margin-top:auto;padding-top:12px;font-size:15.5px}
.profile-card.no-photo{border-left:4px solid var(--petrol)}
.org-grid{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.org-card{flex:0 0 244px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--rule);padding:12px 14px;color:var(--ink)}
.org-card:hover{border-color:var(--petrol);text-decoration:none}
.org-logo{height:34px;width:auto;object-fit:contain;background:var(--stage);padding:5px 8px;align-self:flex-start}
.org-name{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;line-height:1.1}
.org-host{font-size:14px;color:var(--muted)}
.entity-ref{border-bottom:1px solid var(--rule)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px}
.further-grid a{display:flex;flex-direction:column;border:1px solid var(--rule);padding:15px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:18px;line-height:1.05;color:var(--ink)}
.further-grid a:hover{border-color:var(--petrol);text-decoration:none;color:var(--petrol)}
.related-links{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
.related-links li{border-top:1px solid var(--rule);padding:12px 0}
.related-links a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1.05}
.related-links .r-why{display:block;font-family:var(--body);text-transform:none;font-size:16px;color:var(--ink-2);margin-top:5px;font-weight:400}

/* category / hub lists */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule);padding:16px 0}
.cat-list li:first-child{border-top:2px solid var(--ink)}
.cat-list a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.1vw,27px);line-height:1.02;color:var(--ink)}
.cat-list a:hover{color:var(--petrol);text-decoration:none}
.cat-list p{font-size:16.5px;color:var(--ink-2);margin:7px 0 0;max-width:70ch}
.cat-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(260px,0.72fr);gap:clamp(26px,3.4vw,52px);align-items:start}
.hub-sec{margin-top:clamp(30px,3.6vw,50px)}
.hub-sec h2{font-size:clamp(22px,2.5vw,34px);display:flex;gap:12px;align-items:center}
.hub-sec h2 .sec-icon{color:var(--petrol)}

/* footer */
.site-foot{background:var(--stage);color:var(--dim);padding:clamp(34px,4vw,54px) 0 40px;margin-top:clamp(40px,5vw,70px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.foot-grid h2,.foot-grid p{color:var(--paper)}
.foot-word{font-family:var(--display);font-weight:900;font-size:32px;line-height:0.9;color:var(--paper)}
.foot-word .dot{color:var(--amber)}
.foot-list{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.95}
.foot-list a{color:var(--cream-dim)}
.foot-list a:hover{color:var(--amber)}
.foot-note{font-size:14.5px;line-height:1.55;color:var(--dim);max-width:44ch}

@media (max-width:1000px){
  .menu-grid,.bill,.sig-grid,.cat-grid,.lead-grid,.fig--offset,.hero-strip{grid-template-columns:1fr}
  .plate-cols{columns:1}
}
@media (max-width:720px){
  body{font-size:17px}
  .art-body{font-size:18px}
  .timeline li{grid-template-columns:1fr}
  .statblock{flex:1 1 140px}
  .sponsor{flex:1 1 100%}
  .lead-hero img{height:46vh}
  .menu-toggle{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:0.1em;font-size:15px;color:var(--amber);background:none;border:1px solid #2A2620;padding:10px 14px;width:100%;text-align:left}
  .menu details>summary{list-style:none;cursor:pointer}
  .menu details>summary::-webkit-details-marker{display:none}
}

/* extras used by the styleguide + small fixes */
.brandrow{align-items:center}
.p-attr{font-size:13.5px;color:var(--muted);margin-top:8px;font-family:var(--display);text-transform:uppercase;letter-spacing:0.07em}
.org-card.no-logo{border-left:4px solid var(--amber)}
.sg-sec{border-top:2px solid var(--ink);padding:26px 0 34px}
.sg-sec>h2{font-size:26px;color:var(--petrol);margin-bottom:18px}
.sg-note{font-size:15px;color:var(--muted);margin:0 0 18px}

.brand-domain{display:block;font-family:var(--display);font-weight:700;text-transform:lowercase;letter-spacing:0.06em;font-size:clamp(14px,1.5vw,19px);color:var(--amber);margin-top:6px}
.lead-h2{font-size:clamp(28px,4.6vw,68px);line-height:0.94;color:var(--paper);text-transform:uppercase;max-width:30ch}

/* ---------- menu: one line of sections + the second level you are in ---------- */
.navbar{border-top:1px solid #241F19;padding:0 0 4px}
.navbar-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 28px;padding:12px 0}
.nav-secs{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;padding:0}
.nav-sec{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;font-size:18px;line-height:1.1;color:var(--paper);padding:6px 0;border-bottom:2px solid transparent}
.nav-sec .sec-icon{width:19px;height:19px;color:var(--muted)}
.nav-sec:hover{color:var(--amber);text-decoration:none}
.nav-sec:hover .sec-icon{color:var(--amber)}
.nav-sec.is-active{color:var(--amber);border-bottom-color:var(--amber)}
.nav-sec.is-active .sec-icon{color:var(--amber)}
.nav-util{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:0;padding:0;font-family:var(--display);text-transform:uppercase;letter-spacing:0.1em;font-size:14px}
.nav-util a{color:var(--dim)}
.nav-util a:hover{color:var(--amber)}
.nav-second{border-top:1px solid #241F19;padding:12px 0 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px}
.nav-second-label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;font-size:14px;color:var(--muted);flex:0 0 auto;max-width:30ch}
.nav-second-label:hover{color:var(--amber)}
.nav-second ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;font-size:16px}
.nav-second ul a{color:var(--cream-dim)}
.nav-second ul a:hover{color:var(--amber)}
/* footer index */
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;padding-bottom:30px;border-bottom:1px solid #241F19}
.foot-domain{font-family:var(--display);font-weight:700;text-transform:lowercase;letter-spacing:0.06em;font-size:16px;color:var(--amber);margin:5px 0 0}
.foot-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px 30px;padding:28px 0 6px}
.foot-sec{display:flex;align-items:flex-start;gap:8px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;line-height:1.1;color:var(--paper);margin-bottom:10px}
.foot-sec .sec-icon{width:17px;height:17px;color:var(--amber);flex:none;margin-top:1px}
.foot-sec:hover{color:var(--amber);text-decoration:none}
.foot-index .foot-list{font-size:15px;line-height:1.6}
.foot-index .foot-list li{padding:3px 0}
.foot-bottom{margin:22px 0 0;padding-top:16px;border-top:1px solid #241F19;font-family:var(--display);text-transform:uppercase;letter-spacing:0.09em;font-size:14px}
.foot-bottom a{color:var(--cream-dim)}
@media (max-width:720px){
  .nav-sec{font-size:16px}
  .nav-second ul{font-size:15px}
}

.nav-second-label{max-width:none;white-space:nowrap}
.navbar-row{align-items:center}
@media (max-width:1080px){
  .navbar-row{flex-direction:column;align-items:flex-start;gap:8px}
  .nav-util{order:2}
}

/* article: centre the reading field instead of pinning it left */
article .wrap{max-width:1180px}
.art-head h1,.art-head .art-standfirst,.art-head .kicker{margin-inline:auto;max-width:var(--measure)}
.art-head h1{max-width:var(--measure)}
.art-body>*{margin-inline:auto}
.art-body>.full{max-width:none;margin-inline:calc(-1 * var(--pad))}
.art-body>.plate{margin-inline:calc(-1 * var(--pad))}
.art-body>.art-sec{max-width:var(--measure)}
@media (min-width:1240px){
  article .wrap{max-width:1180px}
  .art-body{--measure:72ch}
}

/* tighter masthead on inner pages (home keeps the h1 at full size) */
.brandrow{padding:16px 0 14px}
.brandmark{width:clamp(42px,4.6vw,74px)}
div.brand-word{font-size:clamp(28px,4vw,54px);line-height:0.86}
div.brand-word + .brand-domain,.brand-domain{margin-top:4px}
.brand > div.brand-word ~ .brand-line{display:none}
.strapline{font-size:12.5px;padding:7px 0}
.navbar-row{padding:10px 0}
.nav-second{padding:10px 0 14px}
.art-head{padding-top:clamp(26px,3vw,44px)}

/* ---------- masthead: one row, nav filling the right ---------- */
.headrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 40px;padding:14px 0 12px}
.brand-block{display:flex;align-items:center;gap:14px;min-width:0}
.brand-block .brandmark{width:clamp(38px,3.4vw,54px);flex:none}
.brand{min-width:0}
.brand-word{font-size:clamp(30px,3.6vw,50px);line-height:0.86;margin:0}
h1.brand-word{font-size:clamp(34px,4.6vw,68px)}
.brand-domain{display:block;font-size:14px;margin-top:3px}
.head-nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;flex:1 1 auto;justify-content:flex-end}
.head-nav .nav-secs{gap:6px 22px}
.head-nav .nav-sec{font-size:17px}
.nav-second{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;border-top:1px solid #241F19;padding:10px 0 14px}
@media (max-width:1080px){
  .headrow{align-items:flex-start;gap:12px}
  .head-nav{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:8px}
}

/* fix: shorthand paddings were killing the wrapper gutter */
.art-head{padding:clamp(26px,3vw,44px) var(--pad) 0}
.nav-second{padding:10px var(--pad) 14px}
/* one shared reading field so every left edge lines up */
.art-head>*,.art-body>*{max-width:680px;margin-inline:auto}
.art-body>.pullquote{max-width:680px;padding-left:24px}
.art-body>.art-sec{max-width:680px}
.art-body>.full{max-width:none;margin-inline:calc(-1 * var(--pad))}
.art-body>.plate{max-width:none;margin-inline:calc(-1 * var(--pad))}

.brand-block .brandmark{width:clamp(40px,3.4vw,52px);height:auto;color:inherit}

/* alignment: these must beat the earlier measure-based rules */
.art-head h1,.art-head .art-standfirst,.art-head .kicker{max-width:680px;margin-inline:auto}

/* mark scales to the full height of the wordmark + domain stack */
.brand-block{align-items:stretch;gap:12px}
.brand-block .brandmark{align-self:stretch;width:auto;height:auto;aspect-ratio:1/1;min-width:56px;max-width:110px}
@supports not (aspect-ratio:1/1){.brand-block .brandmark{width:62px;height:62px}}
.brand{display:flex;flex-direction:column;justify-content:center}

.brand-word{white-space:nowrap}
.brand-block{flex:0 0 auto}
.brand-block .brandmark{max-width:78px}

.brand{flex:0 0 auto;min-width:max-content}
.head-nav{min-width:0;flex:1 1 320px}
.headrow{gap:10px 30px}
div.brand-word{font-size:clamp(26px,3.1vw,44px)}

/* supporters: constant tile that tiles the full container width (6 per row at desktop) */
.sponsors-run{gap:12px}
.sponsor{flex:0 0 224px;padding:12px}
@media (max-width:760px){.sponsor{flex:1 1 100%}}

.sponsors-run{justify-content:center}
.sponsor{min-height:190px}
.sponsor-name{min-height:1.25em}

.sponsor{min-height:206px}
.sponsor-blurb{min-height:3.9em}

/* Chivo is wider than the old condensed face — retune tracking and the tightest lockups */
h1,h2,h3,h4,h5{letter-spacing:-0.012em}
.kicker{letter-spacing:0.09em}
div.brand-word{font-size:clamp(22px,2.6vw,36px);letter-spacing:-0.02em}
h1.brand-word{font-size:clamp(28px,3.6vw,52px);letter-spacing:-0.02em}
.brand-domain{font-size:13px;letter-spacing:0.04em}
.nav-sec{font-size:15.5px;letter-spacing:0.03em}
.head-nav .nav-sec{font-size:15.5px}
.nav-util{font-size:12.5px;letter-spacing:0.08em}
.nav-second-label{font-size:12.5px;letter-spacing:0.05em}
.bill-no,.stat-num{letter-spacing:-0.02em}
.quiet-line{font-size:clamp(26px,4.4vw,62px)}
.lead-h2{font-size:clamp(24px,3.9vw,56px)}
.strapline{font-size:11.5px;letter-spacing:0.1em}
/* supporters: 6 tiles fit the 1400px content width with slack */
.sponsors-run{gap:10px}
.sponsor{flex:0 0 220px;padding:10px;min-height:208px}
.sponsor-name{font-size:15.5px;letter-spacing:0.02em}
.sponsor-blurb{font-size:14.5px}
@media (max-width:760px){.sponsor{flex:1 1 100%}}

.sponsor-name{min-height:2.5em}
.sponsor{min-height:218px}

/* band titles hold one line down to tablet widths */
h2.band-title{font-size:clamp(20px,2.6vw,44px);text-wrap:nowrap;white-space:nowrap;letter-spacing:-0.02em}
@media (max-width:760px){h2.band-title{white-space:normal;font-size:clamp(22px,5.4vw,32px)}}

/* ---------- the bill: a feature plate and a run of rows ---------- */
.bill{grid-template-columns:minmax(340px,1.45fr) minmax(300px,1fr);align-items:start}
.bill-feature{margin:0}
.feat-media{position:relative;display:block;background:var(--stage);overflow:hidden}
.feat-media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transform:scale(1.001);transition:transform .5s ease,opacity .3s ease;opacity:.94}
.feat-media:hover img{transform:scale(1.03);opacity:1}
.feat-plate{position:absolute;left:0;right:0;bottom:0;display:block;padding:clamp(18px,2.4vw,30px);background:linear-gradient(to top,rgba(11,10,9,.95) 8%,rgba(11,10,9,.6) 58%,rgba(11,10,9,0))}
.feat-kicker{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;font-size:13px;color:var(--amber);margin-bottom:9px}
.feat-title{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-0.02em;font-size:clamp(26px,3.1vw,46px);line-height:0.94;color:var(--paper)}
.feat-media:hover .feat-title{color:var(--amber)}
.feat-deck{font-size:19.5px;line-height:1.55;margin:20px 0 0;max-width:56ch}
.feat-cap{margin-top:20px;font-size:15px}
.bill-list-head{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:0.1em;font-size:13px;color:var(--muted);margin:0 0 10px}
.bill-row{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--rule);padding:16px 10px 17px;margin-inline:-10px;color:var(--ink);transition:background .2s ease}
.bill-row:first-of-type{border-top:2px solid var(--ink)}
.bill-row:hover{background:var(--paper-2);text-decoration:none}
.bill-row .bill-no{font-family:var(--display);font-weight:900;font-size:40px;line-height:0.8;color:var(--amber);flex:none;min-width:40px;text-align:right}
.bill-row-body{display:block}
.bill-row-title{display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;line-height:1.02;letter-spacing:-0.01em}
.bill-row:hover .bill-row-title{color:var(--petrol)}
.bill-row-brief{display:block;font-size:16px;line-height:1.45;color:var(--ink-2);margin-top:6px}
.bill-foot{margin-top:20px}
@media (max-width:1000px){.bill{grid-template-columns:1fr}}

/* signature band: figure gets its own column, single-column plate */
.sig-grid{grid-template-columns:minmax(300px,1fr) minmax(320px,1.05fr)}
.sig-grid .fig--plate>div{display:block}
.sig-grid .deck{max-width:none}

.feat-media img{aspect-ratio:3/2}
.feat-deck{font-size:18.5px;margin-top:18px}
.feat-cap{margin-top:16px;font-size:14.5px}
.bill-row{padding:14px 10px 15px}
.bill-row .bill-no{font-size:36px}

/* the ban: the page's one loud line */
.ban-band{padding:clamp(56px,7vw,104px) 0;background:var(--petrol)}
.ban-wrap{display:flex;gap:clamp(18px,2.6vw,40px);align-items:stretch}
.ban-bracket{flex:none;width:clamp(22px,2.2vw,34px);height:auto;color:var(--amber);align-self:stretch}
.ban-body{flex:1 1 auto;min-width:0}
.ban-band .quiet-line{font-size:clamp(32px,6vw,86px);line-height:0.9;letter-spacing:-0.028em;color:var(--paper);max-width:26ch;margin:10px 0 0;text-wrap:balance}
.ban-band .quiet-line em{font-style:normal;color:var(--amber)}
.ban-deck{margin:clamp(20px,2.4vw,32px) 0 0;font-size:19px;line-height:1.5;max-width:56ch;color:#CFE7E4}
.ban-deck a{color:var(--paper);border-bottom:2px solid var(--amber);font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:0.04em;white-space:nowrap}
.ban-deck a:hover{color:var(--amber);text-decoration:none}
.ban-band .kicker--onDark{color:#9FCBC7}

.bill-row .bill-no{min-width:54px}

/* nowrap only for band titles that span the full band; column titles must wrap */
h2.band-title{white-space:normal;text-wrap:balance}
.wrap>h2.band-title{white-space:nowrap;text-wrap:nowrap}
.sig-grid h2.band-title,.cat-grid h2.band-title{white-space:normal;text-wrap:balance;font-size:clamp(22px,2.6vw,38px)}
@media (max-width:900px){.wrap>h2.band-title{white-space:normal;text-wrap:balance}}

.head-nav{justify-content:flex-end;align-items:center}
.nav-secs{gap:6px 24px}

/* footer: compact the index */
.site-foot{padding:clamp(26px,3vw,40px) 0 30px;margin-top:clamp(34px,4vw,56px)}
.foot-top{padding-bottom:20px;gap:22px}
.foot-word{font-size:26px}
.foot-domain{font-size:14px}
.foot-note{font-size:13.5px;line-height:1.5;max-width:52ch}
.foot-index{gap:16px 26px;padding:18px 0 4px}
.foot-sec{font-size:13.5px;letter-spacing:0.03em;margin-bottom:6px;gap:7px}
.foot-sec .sec-icon{width:15px;height:15px}
.foot-index .foot-list{font-size:13.8px;line-height:1.4}
.foot-index .foot-list li{padding:2px 0}
.foot-bottom{margin-top:16px;padding-top:12px;font-size:12.5px}

/* article: a wider reading field, clear separation between every element */
article .wrap{max-width:1260px}
.art-body{font-size:20px;line-height:1.7}
.art-head h1,.art-head .art-standfirst,.art-head .kicker{max-width:780px}
.art-body>*{max-width:780px}
.art-body>.pullquote{max-width:780px}
.art-body>.art-sec{max-width:780px}
.art-body>*+*{margin-top:1.1em}
.art-body>h2{margin-top:1.7em}
.art-body>.plate,.art-body>.full{margin-top:clamp(30px,3.4vw,46px);margin-bottom:clamp(30px,3.4vw,46px)}
.art-body>.fig,.art-body>figure{margin-top:clamp(26px,3vw,40px);margin-bottom:clamp(26px,3vw,40px)}
.art-rule{color:var(--rule);margin:clamp(26px,3vw,38px) auto;max-width:780px;height:10px}
.art-body>.art-sec{margin-top:clamp(28px,3.2vw,42px)}
.art-body .fig--offset{grid-template-columns:minmax(0,1.5fr) minmax(200px,0.7fr);gap:24px}
@media (max-width:900px){.art-body .fig--offset{grid-template-columns:1fr}}

/* breakout figures: keep every text child inside the gutter */
.art-body>.full .fig-cap,.art-body>.full figcaption,.art-body>.full p{padding-inline:var(--pad)}
.art-body>.full.fig--offset{align-items:start;gap:0 24px}
.art-body>.full.fig--offset .fig-cap{padding-top:12px}
.fig-cap b a{color:inherit;border-bottom:1px solid currentColor}
.fig-cap b a:hover{color:var(--petrol)}
.fig--plate .fig-cap b a:hover{color:var(--amber)}

/* mobile fixes (must come last) */
@media (max-width:1000px){
  .sig-grid{grid-template-columns:1fr}
  .cat-grid,.bill,.lead-grid,.hero-strip,.menu-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .datatable th{white-space:normal}
  .datatable th,.datatable td{padding-right:10px;font-size:16px}
  .plate{padding-inline:var(--pad)}
  .art-body>.full.fig--offset{grid-template-columns:1fr}
  .feat-title{font-size:clamp(22px,7vw,30px)}
  .ban-band .quiet-line{font-size:clamp(26px,8vw,38px)}
}

/* ---------- phones: shorter header, real tap targets, tighter type ---------- */
@media (max-width:760px){
  .strapline{font-size:11px;line-height:1.4;padding:6px 0}
  .headrow{padding:10px 0;gap:8px 16px}
  .brand-block .brandmark{min-width:44px;max-width:56px}
  .head-nav{width:100%}
  .nav-secs{gap:0 18px;width:100%}
  .nav-sec{min-height:44px;display:flex;align-items:center;padding:0}
  .nav-second{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;gap:0 20px;padding-top:4px;padding-bottom:4px}
  .nav-second-label{display:none}
  .nav-second ul{flex-wrap:nowrap;gap:0 20px}
  .nav-second ul a{display:flex;align-items:center;min-height:44px;white-space:nowrap}
  .art-body{font-size:17.5px;line-height:1.62}
  .art-head h1{font-size:clamp(28px,8.4vw,38px)}
  .art-standfirst{font-size:18px}
  .related-links a,.cat-list a{display:flex;align-items:center;min-height:44px}
  .foot-index .foot-list a,.foot-bottom a{display:inline-flex;align-items:center;min-height:40px}
  .more-link{display:inline-flex;align-items:center;min-height:44px}
  .bill-row{padding:12px 10px}
}

@media (max-width:760px){
  .nav-secs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain}
  .nav-sec{white-space:nowrap}
}

.foot-top{grid-template-columns:auto minmax(280px,1fr);align-items:baseline;padding-bottom:16px}
.foot-top .foot-note{max-width:62ch;justify-self:end;text-align:right}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}.foot-top .foot-note{justify-self:start;text-align:left}}

/* footer: section links only — the full index lives on one page */
.foot-index{display:flex;flex-wrap:wrap;gap:10px 30px;padding:16px 0 2px;border-top:1px solid #241F19}
.foot-index .foot-sec{margin:0;font-size:14px;align-items:center;min-height:34px}
@media (max-width:760px){.foot-index{flex-direction:column;gap:0}.foot-index .foot-sec{min-height:42px}}

.foot-index{gap:8px 26px;align-items:center}
.foot-index .foot-sec{font-size:13.5px;letter-spacing:0.05em;white-space:nowrap}
@media (max-width:760px){.foot-index{flex-direction:row;flex-wrap:wrap;gap:6px 20px}}

/* contrast: small caps text must clear 4.5:1 on both grounds */
.fig-credit{color:#5F574A}
.fig--plate .fig-credit,.plate .fig-credit,.hero-fig .fig-credit,.feat-fig .fig-credit{color:#9C9284}
.nav-second-label{color:#9C9284}
/* offset figure: pin the credit to the image's bottom edge instead of leaving the column short */
.art-body>.full.fig--offset{align-items:stretch}
.art-body>.full.fig--offset .fig-cap{display:flex;flex-direction:column;justify-content:flex-start;height:100%}
.art-body>.full.fig--offset .fig-credit{margin-top:auto;padding-top:14px;border-top:1px solid #D8CDB6}

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

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

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

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

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.headrow{padding-inline:var(--pad)}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2498px at 390, 25% of the whole page. Two columns bring it to
   1358px (46% shorter). Checked before writing: no new overflow, smallest mark still
   146px wide, longest blurb 3 lines, tile heights 218-218px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsors-run), 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-run{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}
    .sponsors-run > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsors-run > * *{min-width:0!important;max-width:100%}
    .sponsors-run img,.sponsors-run svg{max-width:100%;height:auto}
  .sponsors-run .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 780px (88 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 780px (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 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article div.wrap.art-body > :is(p:not([class]), blockquote.pullquote){max-width:min(902px, 100%)!important}
}
@media (min-width:1600px){
  article div.wrap.art-body > :is(p:not([class]), blockquote.pullquote){max-width:min(clamp(902px, 62.639vw, 1082px), 100%)!important}
  article div.wrap.art-body > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (780px) and was left behind when the text went to 902px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  article h1{max-width:min(902px, 100%)!important}
  article p.kicker{max-width:min(902px, 100%)!important}
  article p.art-standfirst{max-width:min(902px, 100%)!important}
}
@media (min-width:1600px){
  article h1{max-width:min(calc(clamp(902px, 62.639vw, 1082px) + 0px), 100%)!important}
  article p.kicker{max-width:min(calc(clamp(902px, 62.639vw, 1082px) + 0px), 100%)!important}
  article p.art-standfirst{max-width:min(calc(clamp(902px, 62.639vw, 1082px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px){
  div.wrap.headrow{padding-left:max(0px, calc(max(var(--pad), 18px) - max(0px, (100vw - 1480px) / 2)));padding-right:max(0px, calc(max(var(--pad), 18px) - max(0px, (100vw - 1480px) / 2)))}
}
/* op-tablet-gutter:end */