/* friendsdrivesober.org — "The Designated" · warm get-home desk
   Tokens drive everything. Cream field, espresso bands, honey-gold hand, sage = home-safe. */
:root{
  --ink:#211A1A;
  --ink-soft:#372C26;
  --paper:#F6EEDF;
  --card:#FFFBF1;
  --gold:#E6A94E;
  --gold-deep:#B67F2B;
  --gold-dark:#8A5F17;
  --gold-tint:#F3DFB6;
  --sage:#7FB093;
  --sage-deep:#47705B;
  --sage-tint:#D9E7DD;
  --sage-ink:#33584A;
  --taupe:#6F6055;
  --sand:#E7DCCB;
  --sand-ink:#4A3B2E;
  --cream-on-dark:#F6EEDF;
  --mute-on-dark:#BFAE9C;
  --dark-card:#2C2321;
  --line:rgba(33,26,26,.15);
  --line-strong:rgba(33,26,26,.22);
  --line-on-dark:rgba(246,238,223,.15);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --wrap:1200px;
  --gutter:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-soft);font-family:var(--body);font-size:19px;line-height:1.65;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--gold-deep);text-decoration:none}
a:hover{color:var(--gold-dark)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);line-height:1.12;letter-spacing:-.015em;margin:0;text-wrap:pretty}
p{margin:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- buttons & chips ---------- */
.btn{display:inline-block;background:var(--ink);color:var(--cream-on-dark);font-weight:700;font-size:17px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer}
.btn:hover{color:#fff;background:#171211}
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.gold:hover{background:#EFB964;color:var(--ink)}
.btn.cream{background:var(--paper);color:var(--ink)}
.btn.cream:hover{background:#fff;color:var(--ink)}
.btn.sage{background:var(--sage-deep);color:#fff}
.btn.sage:hover{background:#3C5F4E;color:#fff}
.chip{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.chip.toolkit{background:var(--gold-tint);color:#7A5714}
.chip.road{background:var(--sage-tint);color:var(--sage-ink)}
.chip.planb{background:var(--sand);color:var(--sand-ink)}
.chip.stories{background:var(--dark-card);color:var(--gold)}
.chip.ask{background:var(--sage-tint);color:var(--sage-ink)}
.kicker{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- header ---------- */
.site-head{background:var(--ink);color:var(--cream-on-dark)}
.site-head .bar{display:flex;align-items:center;gap:26px;padding-block:16px;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--cream-on-dark);flex:none}
.wordmark b{color:var(--gold);font-weight:800}
.wordmark:hover{color:#fff}
.tagline{font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:#B4A28C}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:16px;font-weight:500;flex-wrap:wrap}
.site-nav a{color:var(--cream-on-dark);padding:10px 2px}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--gold)}
.site-nav .btn{padding:11px 20px;font-size:15px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--mute-on-dark)}
.site-foot .cols{display:flex;gap:64px;align-items:flex-start;padding-block:44px 0;flex-wrap:wrap}
.site-foot .brand{max-width:320px;display:flex;flex-direction:column;gap:10px}
.site-foot .brand p{font-size:15.5px}
.foot-col{display:flex;flex-direction:column;gap:9px;font-size:15.5px}
.foot-col span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8A7A66}
.foot-col a{color:var(--mute-on-dark)}
.foot-col a:hover{color:var(--gold)}
.foot-line{display:flex;gap:24px;flex-wrap:wrap;font-size:14.5px;border-top:1px solid var(--line-on-dark);margin-top:32px;padding-block:20px 36px}
.foot-line .right{margin-left:auto}

/* ---------- home: hero ---------- */
.hero{padding-block:clamp(40px,6vw,72px) clamp(36px,5vw,56px)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(38px,4.4vw,56px);font-weight:800}
.hero .dek{font-size:21px;line-height:1.55;color:var(--taupe);max-width:34em}
.hero .stack{display:flex;flex-direction:column;gap:20px}
.hero .cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:6px}
.hero .more{font-weight:600;font-size:17px}
.hero figure{margin:0;display:flex;flex-direction:column;gap:10px}
.hero img{width:100%;height:420px;object-fit:cover;border-radius:16px}
.hero figcaption{font-size:15px;color:#8A7A66}

/* ---------- home: 60-second plan strip ---------- */
.plan-strip{background:var(--sage-deep);color:#EAF2EC}
.plan-strip .inner{display:flex;gap:clamp(20px,3vw,40px);align-items:flex-start;padding-block:30px;flex-wrap:wrap}
.plan-strip .title{flex:none;display:flex;flex-direction:column;gap:4px;max-width:210px}
.plan-strip .title strong{font-family:var(--display);font-weight:800;font-size:21px;color:#fff}
.plan-strip .title a{color:#fff;font-size:15px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.5)}
.plan-strip ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;flex:1;min-width:min(560px,100%)}
.plan-strip li{display:flex;gap:11px;font-size:16px;line-height:1.45}
.plan-strip li b{font-family:var(--display);font-weight:800;color:#B7D4C1;font-size:19px;flex:none}
.plan-strip li small{display:block;font-size:14px;color:#C6DACD;margin-top:3px}

/* ---------- card grids (always even-height) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card .pad{padding:24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card h3{font-size:22px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--gold-deep)}
.card .brief{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--taupe);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{margin-top:auto;display:flex;align-items:center;gap:12px;font-size:14px;color:#8A7A66;padding-top:6px}
.card .meta .go{margin-left:auto;font-weight:600;font-size:15.5px;color:var(--gold-deep)}
.card .meta .go:hover{color:var(--gold-dark)}
.section-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.section-head h2{font-size:32px;font-weight:800}
.section-head .sub{font-size:17px;color:var(--taupe)}
.section-head .all{margin-left:auto;font-weight:600;font-size:16px}
.home-band{padding-block:clamp(36px,5vw,60px)}

/* ---------- home: stories dark band ---------- */
.stories-band{background:var(--ink);color:var(--cream-on-dark)}
.stories-band .section-head h2{color:var(--cream-on-dark)}
.stories-band .section-head .sub{color:var(--mute-on-dark)}
.stories-band .section-head .all{color:var(--gold)}
.stories-band .section-head .all:hover{color:#EFB964}
.story-card{display:flex;flex-direction:column;gap:14px}
.story-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}
.story-card h3{font-size:21px;font-weight:700;color:var(--cream-on-dark)}
.story-card h3 a{color:var(--cream-on-dark)}
.story-card h3 a:hover{color:var(--gold)}
.story-card p{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--mute-on-dark)}
.story-card .go{margin-top:auto;font-weight:600;font-size:15.5px;color:var(--gold)}
.quote-card{background:var(--dark-card);border:1px solid rgba(230,169,78,.35);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:16px}
.quote-card .mark{font-family:var(--display);font-weight:800;font-size:46px;line-height:.5;color:var(--gold)}
.quote-card p{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.45;color:var(--cream-on-dark)}
.quote-card cite{margin-top:auto;font-style:normal;font-size:15px;color:var(--gold)}

/* ---------- home: ask the desk ---------- */
.qa-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.qa-card{background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:14px;padding:26px 28px;display:flex;gap:18px}
.qa-card .q{flex:none;font-family:var(--display);font-weight:800;font-size:30px;color:var(--gold-deep)}
.qa-card .body{display:flex;flex-direction:column;gap:10px;flex:1}
.qa-card h3{font-size:21px;line-height:1.3}
.qa-card h3 a{color:var(--ink)}
.qa-card h3 a:hover{color:var(--gold-deep)}
.qa-card p{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--taupe)}
.qa-card .go{margin-top:auto;font-weight:600;font-size:15.5px}

/* ---------- supporters: The Ride Board ---------- */
.ride-board{border-top:1px solid var(--line);padding-block:40px 46px}
.ride-board .head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ride-board .head .kicker{color:var(--gold-deep)}
.ride-board .head h2{font-size:23px;font-weight:800}
.ride-board .head p{font-size:15.5px;color:var(--taupe)}
.board-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.sponsor{display:flex;flex-direction:column;gap:6px;border-radius:10px;overflow:hidden}
.sponsor img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--dark-card);border-radius:10px;border:1px solid rgba(33,26,26,.25)}
.sponsor:hover img{border-color:var(--gold-deep)}
.sponsor-blurb{font-size:12.5px;line-height:1.4;color:var(--taupe);display:block;min-height:0}
.sponsor-blurb:empty{display:none}

/* ---------- category pages ---------- */
.cat-head{padding-block:clamp(40px,5vw,60px) clamp(28px,4vw,40px)}
.cat-head .stack{display:flex;flex-direction:column;gap:16px;max-width:820px}
.cat-head h1{font-size:clamp(36px,4vw,48px);font-weight:800}
.cat-head .blurb{font-size:20px;line-height:1.55;color:var(--taupe)}
.cat-head.gold{background:#F3E3C0}
.cat-head.gold .kicker{color:var(--gold-dark)}
.cat-head.dark{background:var(--ink)}
.cat-head.dark h1{color:var(--cream-on-dark)}
.cat-head.dark .blurb{color:var(--mute-on-dark)}
.cat-head.dark .kicker{color:var(--gold)}
.cat-head.sage{background:var(--sage-tint)}
.cat-head.sage .kicker{color:var(--sage-deep)}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.filter-row a{font-size:14.5px;font-weight:600;padding:9px 17px;border-radius:999px;border:1px solid var(--line-strong);color:var(--sand-ink)}
.filter-row a:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.filter-row a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--cream-on-dark)}
.cat-head.dark .filter-row a{border-color:rgba(246,238,223,.35);color:var(--mute-on-dark)}
.cat-head.dark .filter-row a:hover{border-color:var(--gold);color:var(--gold)}
.cat-head.dark .filter-row a[aria-current]{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cat-body{padding-block:clamp(36px,5vw,52px)}
.cat-list{list-style:none;margin:0;padding:0}

/* ---------- article ---------- */
.article-head{padding-block:clamp(40px,5vw,64px) 0}
.article-head .frame{max-width:900px;display:flex;flex-direction:column;gap:18px}
.article-head h1{font-size:clamp(36px,4.6vw,54px);font-weight:800;line-height:1.06}
.article-head .dek{font-family:var(--serif);font-size:22px;line-height:1.55;color:var(--taupe);max-width:36em;font-style:italic}
.article-head .meta{font-size:15px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#8A7A66}
.article-hero{padding-block:34px 0}
.article-hero figure{margin:0;display:flex;flex-direction:column;gap:10px;max-width:1000px}
.article-hero img{width:100%;max-height:520px;object-fit:cover;border-radius:16px}
.article-hero figcaption,figcaption{font-size:15.5px;color:#8A7A66;line-height:1.5}
/* off-centre reading column: sits left of the frame's midline; own padding-inline for mobile */
.article-body{max-width:900px;padding-block:clamp(36px,5vw,56px) 24px;padding-inline:var(--gutter);margin-left:max(0px,calc((100vw - 1200px)/2));font-family:var(--serif);font-size:20.5px;line-height:1.72;color:var(--ink-soft)}
.article-body>*+*{margin-top:26px}
.article-body p.lead{font-size:23px;line-height:1.6;color:var(--taupe)}
.article-body .note,.article-body .stat-label,.article-body .t-what,.article-body .endnotes ol{font-family:var(--body)}
.article-body .opener::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:64px;line-height:.9;padding:6px 12px 0 0;color:var(--gold-deep)}
h2.sec{font-size:29px;font-weight:700;margin-top:44px;display:flex;gap:14px;align-items:baseline}
h2.sec .sec-no{font-size:16px;font-weight:800;color:var(--gold-deep);letter-spacing:.06em;flex:none}
.article-body h3{font-size:23px;font-weight:700;margin-top:34px}
.article-body a{border-bottom:1px solid rgba(182,127,43,.4)}
.article-body a:hover{border-bottom-color:var(--gold-dark)}
.article-body strong{color:var(--ink)}
sup.en{line-height:0}
sup.en a{font-size:13px;font-weight:700;border-bottom:0;padding:0 2px;color:var(--gold-deep)}
.endnotes{border-top:1px solid var(--line);margin-top:44px;padding-top:26px}
.endnotes h2{font-size:19px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8A7A66}
.endnotes ol{margin:16px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:16.5px;line-height:1.6;color:var(--taupe)}
.endnotes li::marker{font-weight:700;color:var(--gold-deep)}
.related{border-top:1px solid var(--line);margin-top:44px;padding-top:26px}
.related h2{font-size:19px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8A7A66}
.related-links{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.related-links a{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);border-bottom:0}
.related-links a:hover{color:var(--gold-deep)}
.related-links .tag{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep);margin-right:10px}

/* ---------- palette components ---------- */
.lead{font-family:var(--serif);font-size:23px;line-height:1.6;color:var(--taupe)}
.pullquote{margin:0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:28px 0;text-align:center}
.pullquote p{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.3;color:var(--gold-deep);text-wrap:pretty}
.blockquote{margin:0;background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:14px;padding:26px 30px}
.blockquote p{font-family:var(--display);font-weight:500;font-size:22px;line-height:1.5;color:var(--ink)}
.blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:15.5px;color:var(--gold-deep)}
.callout{background:var(--sage-tint);border-radius:14px;padding:24px 28px}
.callout p{font-size:18px;line-height:1.6;color:var(--sage-ink)}
.callout p strong{color:#274435}
.note{font-size:16.5px;line-height:1.6;color:var(--taupe);background:var(--gold-tint);border-radius:10px;padding:14px 18px}
.versus{width:100%;border-collapse:collapse;background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:14px;overflow:hidden;font-size:17px}
.versus th{font-family:var(--display);font-weight:700;font-size:18px;text-align:left;padding:14px 18px;color:var(--cream-on-dark);background:var(--ink)}
.versus th+th{border-left:1px solid rgba(246,238,223,.2)}
.versus td{padding:13px 18px;border-top:1px solid var(--line);vertical-align:top;line-height:1.5;width:50%}
.versus td+td{border-left:1px solid var(--line)}
.datatable{width:100%;border-collapse:collapse;font-size:16.5px;background:var(--card);border:1px solid rgba(33,26,26,.12)}
.datatable th{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-align:left;color:#8A7A66;padding:12px 16px;border-bottom:2px solid var(--line-strong)}
.datatable td{padding:11px 16px;border-bottom:1px solid var(--line);line-height:1.5}
.datatable tr:last-child td{border-bottom:0}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.statblock{background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-weight:800;font-size:36px;line-height:1;color:var(--gold-deep)}
.stat-label{font-size:15px;line-height:1.45;color:var(--taupe)}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.timeline li{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:16px 0;border-top:1px solid var(--line);position:relative}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--display);font-weight:700;font-size:17px;color:var(--gold-deep);line-height:1.35}
.t-what{font-size:17px;line-height:1.55}
.chart{margin:0;background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:14px;padding:22px 24px 16px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:10px}
.article-figure{margin:0;display:flex;flex-direction:column;gap:10px}
.article-figure img{width:100%;border-radius:14px;object-fit:cover}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gallery figure{margin:0;display:flex;flex-direction:column;gap:8px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.map-figure{margin:0;display:flex;flex-direction:column;gap:10px}
.map-figure .map-slot{width:100%;aspect-ratio:16/9;border-radius:14px;background:var(--sand);border:1px dashed var(--line-strong)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.profile-card{background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:10px}
.profile-card .p-photo{width:72px;height:72px;border-radius:50%;object-fit:cover}
.profile-card h3{font-size:20px}
.profile-card .p-role{font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.profile-card p{font-size:15.5px;line-height:1.55;color:var(--taupe)}
.profile-card .p-links{margin-top:auto;display:flex;gap:14px;font-size:15px;font-weight:600}
.p-attr{font-size:13px;color:#8A7A66}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.org-card{background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:12px;padding:16px 18px;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:center;color:var(--ink)}
.org-card:hover{border-color:var(--gold-deep)}
.org-logo{grid-row:1/3;width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--dark-card)}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-family:var(--display);font-weight:700;font-size:17px}
.org-host{font-size:13.5px;color:#8A7A66}
.entity-ref{font-weight:600;border-bottom:1px solid rgba(182,127,43,.4)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.further-grid a{background:var(--card);border:1px solid rgba(33,26,26,.12);border-radius:12px;padding:18px 20px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.35;color:var(--ink)}
.further-grid a:hover{border-color:var(--gold-deep);color:var(--gold-deep)}

/* CSS-only expander for long lists */
.expander{position:relative}
.expander input{position:absolute;opacity:0;pointer-events:none}
.expander .x-rest{display:none}
.expander input:checked~.x-rest{display:block}
.expander input:checked~.x-toggle .show{display:none}
.expander .x-toggle{display:inline-block;margin-top:14px;font-weight:600;cursor:pointer;color:var(--gold-deep);font-size:16px}
.expander .x-toggle:hover{color:var(--gold-dark)}
.expander input:checked~.x-toggle .hide{display:inline}
.expander .x-toggle .hide{display:none}

/* ---------- utility bands ---------- */
.cta-band{background:var(--sage-deep);color:#EAF2EC}
.cta-band .inner{display:flex;align-items:center;gap:24px;padding-block:30px;flex-wrap:wrap}
.cta-band p{font-size:18px;line-height:1.5}
.cta-band strong{color:#fff}
.cta-band .btn{margin-left:auto;flex:none}
.plain-page{padding-block:clamp(40px,5vw,64px)}
.plain-page .frame{max-width:760px;display:flex;flex-direction:column;gap:22px}
.plain-page h1{font-size:clamp(36px,4.4vw,50px);font-weight:800}
.plain-page .dek{font-size:21px;line-height:1.6;color:var(--taupe)}
.plain-page p{font-size:19.5px;line-height:1.7;font-family:var(--serif)}
.plain-page p.note,.plain-page .hint{font-family:var(--body)}
.plain-page h2{font-size:26px;margin-top:14px}

/* ---------- responsive ---------- */
@media (max-width:1260px){.article-body{margin-left:0}}
@media (max-width:1000px){
  .hero .grid{grid-template-columns:1fr}
  .hero img{height:340px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .plan-strip ol{grid-template-columns:repeat(2,1fr)}
  .board-strip{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:720px){
  body{font-size:18px}
  .card-grid,.qa-grid{grid-template-columns:1fr}
  .site-head .bar{gap:14px}
  .tagline{display:none}
  .site-nav{gap:16px;font-size:15px}
  .plan-strip ol{grid-template-columns:1fr;gap:14px}
  .board-strip{grid-template-columns:repeat(3,1fr)}
  .article-body{font-size:18.5px}
  .article-body p.lead,.lead{font-size:20px}
  .pullquote p{font-size:23px}
  .timeline li{grid-template-columns:1fr;gap:4px}
  .versus{font-size:15.5px}
  .versus th,.versus td{padding:10px 12px}
  .site-foot .cols{gap:32px}
  .cta-band .btn{margin-left:0}
  .hero img{height:260px}
}
@media (max-width:420px){
  .board-strip{grid-template-columns:repeat(2,1fr)}
  .statrow{grid-template-columns:1fr 1fr}
}

.sponsor img{object-fit:contain !important;filter:none !important;padding:12px 14px}

/* fds-final: adult blurbs exactly 2 rows, even cards */
.sponsor img{object-fit:contain !important;filter:none !important;padding:12px 14px}
.sponsor-blurb{display:-webkit-box !important;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em}

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

/* op-article-width: the article column was capped at 804px (90 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 900px (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.article-body{max-width:min(1010px, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{max-width:min(clamp(1010px, 70.139vw, 1212px), 100%)!important}
  div.article-body > :is(p, p:not([class])){font-size:clamp(20.5px,1.4236vw,24.6px)!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 → blockquote.pullquote: 44px (the gap after the band). */
  div.article-body > p:has(+ blockquote.pullquote){padding-bottom:44px!important}
/* op-article-seam:end */

/* op-article-head: the article header followed the text column (804px) and was left behind when the text went to 914px. 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){
  section.article-head p.dek{max-width:min(900px, 100%)!important}
}
@media (min-width:1600px){
  section.article-head p.dek{max-width:min(calc(clamp(900px, 62.500vw, 1080px) + 0px), 100%)!important}
}
/* op-article-head:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); color: var(--ink); line-height: 1.12; letter-spacing: -0.015em; margin: 0px; text-wrap: pretty;}
.card h2:where(.rt-h3){font-size: 22px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.card h2:where(.rt-h3) a{color: var(--ink);}
.card h2:where(.rt-h3) a:hover{color: var(--gold-deep);}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.card-grid > article.card > img,
  div.card-grid > article.story-card > img,
  div.grid.wrap > figure > img,
  div.wrap > figure > img,
  ul.card-grid.cat-list > li.card > img){height:auto}
/* op-img-dims:end */