/* Ash Street Saloon — "Low Light" · tokens per PICK_SPEC */
:root{
  --paper:#080705; --ink:#F2ECDC; --panel:#2B2620; --amber:#D9A441;
  --mute:rgba(242,236,220,.62); --faint:rgba(242,236,220,.42); --line:rgba(242,236,220,.14);
  --disp:'Big Shoulders Display',sans-serif; --serif:'Instrument Serif',serif;
  --body:'Newsreader',serif; --mono:'IBM Plex Mono',monospace;
  --fs-body:19.5px; --fs-lead:23px; --fs-h1:clamp(44px,6vw,76px); --fs-h2:clamp(26px,3vw,33px);
}
*{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:var(--fs-body);line-height:1.75;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:var(--amber)}
a:hover{opacity:.75}
p{margin:0 0 26px}
.k{font:500 10.5px/1.7 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin:0 0 18px}
.kicker{font:400 11px/1.7 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:0 0 20px}
.kicker a{color:var(--amber);text-decoration:none}
.monolink{font:500 11px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);text-decoration:none}
.m{font:400 10.5px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--disp);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.standing{font:400 10.5px/1.6 var(--mono);letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.mastnav{display:flex;gap:26px;flex-wrap:wrap}
.mastnav a{font:500 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.mastnav a:hover{color:var(--amber);opacity:1}
.mastnav a.on{color:var(--amber)}
.mast-big{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 24px 30px;text-align:center}
.mast-big .wordmark{font-size:clamp(34px,5vw,52px);line-height:1}
.mast-big .mastnav{margin-top:14px;justify-content:center}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 32px;flex-wrap:wrap}
.mast-row .lockup{display:flex;flex-direction:column;gap:3px}
.mast-row .wordmark{font-size:22px;line-height:1.1}
.mast-row .standing{font-size:8.5px}
.intro-strip{text-align:center;padding:22px 24px 0;margin:0;font:400 11.5px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* ---------- homepage ---------- */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:0 64px;max-width:1320px;margin:0 auto;padding:0 40px}
.feed{min-width:0}
.feed section{border-top:1px solid var(--line);padding:64px 0}
.feed section:first-child{border-top:none;padding-top:56px}
.opener h1.q{margin:0 0 22px}
h1.q,h2.q{font-family:var(--serif);font-style:italic;font-weight:400}
h1.q{font-size:var(--fs-h1);line-height:1.04;margin:0}
h1.q a,h2.q a{color:var(--ink);text-decoration:none}
h1.q a:hover,h2.q a:hover{color:var(--amber);opacity:1}
.frag{font-size:19px;line-height:1.75;color:var(--mute);max-width:62ch}
.opener .monolink,.qa .monolink{display:inline-block;margin-top:4px}
.questions{display:flex;flex-direction:column;gap:36px}
.questions>.k{margin:0}
.qa{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.qa.right{align-items:flex-end;text-align:right}
.qa h2.q{font-size:clamp(26px,2.6vw,34px);line-height:1.12;margin:0}
.qa .retort{font-size:15.5px;line-height:1.6;color:var(--mute);max-width:52ch;margin:0}
.qa .monolink{font-size:10px}
.interlude{margin:0;border-top:1px solid var(--line);padding:56px 0}
.interlude img{width:100%;max-height:340px;object-fit:cover}
.interlude figcaption{padding-top:10px;font:400 10px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.well{display:flex;flex-direction:column;gap:32px}
.well>.k{margin:0}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.card:hover{opacity:1}
.card:hover .t{color:var(--amber)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card .t{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.15;margin:16px 0 8px}
.card .d{font-size:15.5px;line-height:1.6;color:var(--mute)}
.card .m{margin-top:auto;padding-top:14px}
.card-flag img{aspect-ratio:21/9}
.card-flag .t{font-size:clamp(32px,3.6vw,44px)}
.card-flag .d{max-width:64ch}
.well-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:32px;align-items:stretch}
.asking h2.q{font-size:clamp(30px,3.6vw,44px);margin:0 0 18px}
.ask-links{display:flex;gap:32px;flex-wrap:wrap;margin-top:6px}

/* ---------- sponsor rail ---------- */
.rail{padding:56px 0 64px;border-left:1px solid var(--line);padding-left:32px;display:flex;flex-direction:column;gap:18px}
.rail-head .k{margin-bottom:12px}
.rail-note{font-size:13.5px;line-height:1.65;color:var(--mute);margin:0 0 12px}
.rail-div{font:italic 400 14px/1.5 var(--serif);color:var(--faint);text-align:center;margin:10px 0 0}
.rail-feat,.rail-roll{display:grid;gap:12px}
.rail-feat{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.rail-roll{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.sponsor{display:block;background:var(--panel);border:1px solid var(--line);overflow:hidden;aspect-ratio:5/2}
.sponsor.feat{aspect-ratio:16/9}
.sponsor img{width:100%;height:100%;object-fit:contain;padding:10%;box-sizing:border-box}
.sponsor:hover{border-color:var(--amber);opacity:1}
.sponsor-blurb{display:block;font:400 11px/1.5 var(--mono);color:var(--mute);padding:8px 10px}
.sponsor-blurb:empty{display:none}

/* ---------- article ---------- */
.post .art-head{max-width:1000px;margin:0 auto;padding:64px 24px 6px}
.standfirst{font:400 14px/1.8 var(--mono);color:var(--mute);max-width:74ch;margin:22px 0 0}
.article-figure{margin:0}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{padding-top:10px;font:400 10px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.article-figure.hero{max-width:1160px;margin:40px auto 12px;padding:0 24px}
.article-figure.hero img{max-height:560px}
.article-body{display:grid;grid-template-columns:1fr min(66ch,100%) 1fr;padding:36px 24px 48px}
.article-body>*{grid-column:2;min-width:0}
.article-body h2{font:italic 400 var(--fs-h2)/1.25 var(--serif);margin:26px 0 20px}
.article-body p.lead{font-size:var(--fs-lead);line-height:1.65}
.breakwide{grid-column:1/-1;justify-self:center;width:min(940px,100%)}
.article-body .article-figure{margin:20px 0 46px}
.article-body .article-figure img{max-height:480px}
.callout{background:var(--panel);border-top:2px solid var(--amber);padding:28px 34px 24px;margin:20px 0 46px}
.callout .k{margin-bottom:14px}
.callout ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.callout li{font-size:16.5px;line-height:1.6;color:var(--ink)}
.hinge{background:var(--panel);border-top:2px solid var(--amber);padding:30px 34px 28px;margin:20px 0 46px}
.hinge-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px 44px}
.hinge .hw{display:block;font:italic 400 34px/1.1 var(--serif);color:var(--amber);margin-bottom:10px}
.hinge .hd{display:block;font-size:16px;line-height:1.6;color:var(--ink)}
.pullquote{margin:28px 0 52px;padding:0 24px;border:0;text-align:center}
.pullquote p{font:italic 400 clamp(28px,3.4vw,38px)/1.3 var(--serif);color:var(--amber);margin:0}
.photo-well .well-frame{aspect-ratio:16/7;border:1px dashed var(--line);background:rgba(43,38,32,.4);display:flex;align-items:center;justify-content:center;text-align:center;padding:28px;font:400 11px/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.note{font-size:16px;line-height:1.7;color:var(--mute);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:8px 0 34px}
.related{max-width:940px;margin:0 auto;padding:0 24px 72px}
.related .k{border-top:1px solid var(--line);padding-top:26px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px 40px}
.related-links li{display:flex;flex-direction:column;gap:6px}
.related-links a{font:italic 400 24px/1.2 var(--serif);color:var(--ink);text-decoration:none}
.related-links a:hover{color:var(--amber);opacity:1}

/* ---------- category ---------- */
.cat-head{max-width:880px;margin:0 auto;padding:72px 24px 20px;text-align:left}
.cat-head h1.q{margin:0 0 20px}
.cat-blurb{font-size:19px;line-height:1.7;color:var(--mute);max-width:60ch;margin:0}
.cat-list{list-style:none;max-width:880px;margin:0 auto;padding:24px 24px 88px}
.cat-list li{border-top:1px solid var(--line);padding:32px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:baseline}
.cat-list li:last-child{border-bottom:1px solid var(--line)}
.cat-list a{font:italic 400 clamp(26px,3vw,32px)/1.15 var(--serif);color:var(--ink);text-decoration:none}
.cat-list a:hover{color:var(--amber);opacity:1}
.cat-list .dek{grid-column:1;font-size:15.5px;line-height:1.65;color:var(--mute);max-width:66ch;margin:0}
.cat-list .m{white-space:nowrap}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:24px}
.foot-grid{max-width:1320px;margin:0 auto;padding:36px 40px 48px;display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-legal{max-width:620px;display:flex;flex-direction:column;gap:8px}
.foot-legal p{font:400 11px/1.8 var(--mono);color:var(--faint);margin:0}
.foot-legal .addr{color:var(--mute)}
.foot-nav{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.foot-nav a{font:400 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.foot-nav a:hover{color:var(--amber);opacity:1}

/* ---------- styleguide components ---------- */
.blockquote{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0 38px;padding:22px 0}
.blockquote p{font:italic 400 22px/1.5 var(--serif);margin:0 0 10px}
.blockquote cite{font:400 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-style:normal}
.versus,.datatable{width:100%;border-collapse:collapse;margin:8px 0 42px;font-size:16px}
.versus th,.datatable th{font:500 10.5px/1.6 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);text-align:left;padding:10px 14px;border-bottom:1px solid var(--amber)}
.versus td,.datatable td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.55}
.versus td:first-child{font:500 10.5px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin:8px 0 42px}
.statblock{background:var(--panel);border-top:2px solid var(--amber);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:600 44px/1 var(--disp);color:var(--amber)}
.stat-label{font:400 12px/1.6 var(--mono);color:var(--mute)}
.timeline{list-style:none;margin:8px 0 42px;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line)}
.timeline .t-when{font:500 11px/1.7 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.timeline .t-what{font-size:16.5px;line-height:1.6;color:var(--ink)}
.chart{margin:8px 0 46px}
.chart svg{width:100%;height:auto}
.chart .cl{font:11px 'IBM Plex Mono',monospace;fill:var(--mute)}
.chart .cn{font:11px 'IBM Plex Mono',monospace;fill:var(--amber)}
.chart figcaption{padding-top:10px;font:400 10px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:8px 0 46px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding-top:8px;font:400 10px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:8px 0 46px;align-items:stretch}
.profile-card{background:var(--panel);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%}
.profile-card h3{font:italic 400 24px/1.15 var(--serif);margin:6px 0 0}
.profile-card .p-role{font:500 10.5px/1.7 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0}
.profile-card p{font-size:15px;line-height:1.6;color:var(--mute);margin:0}
.profile-card .p-links{margin-top:auto;padding-top:10px;display:flex;gap:16px}
.profile-card .p-links a{font:400 12px var(--mono);text-decoration:none}
.profile-card .p-attr{font:400 10px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:8px 0 46px}
.org-card{display:grid;grid-template-columns:52px 1fr;gap:4px 14px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:14px 16px;text-decoration:none}
.org-card:hover{border-color:var(--amber);opacity:1}
.org-logo{width:52px;height:52px;object-fit:contain;grid-row:1/3}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-size:16px;line-height:1.3;color:var(--ink)}
.org-host{font:400 10.5px var(--mono);letter-spacing:.08em;color:var(--faint)}
.entity-ref{text-decoration:none;border-bottom:1px dotted var(--amber)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:8px 0 46px}
.further-grid a{background:var(--panel);border:1px solid var(--line);padding:18px 20px;font:italic 400 21px/1.25 var(--serif);color:var(--ink);text-decoration:none;display:flex;align-items:flex-start;min-height:92px}
.further-grid a:hover{border-color:var(--amber);color:var(--amber);opacity:1}

/* ---------- mobile ---------- */
@media (max-width:980px){
  .home-grid{grid-template-columns:1fr;gap:0;padding:0 22px}
  .rail{border-left:none;border-top:1px solid var(--line);padding-left:0}
  .rail-feat{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .rail-roll{grid-template-columns:repeat(auto-fit,minmax(76px,1fr))}
}
@media (max-width:640px){
  :root{--fs-body:18px;--fs-lead:21px}
  .mast-row{padding:16px 20px}
  .mastnav{gap:4px 16px}
  .mastnav a,.monolink,.foot-nav a{display:inline-block;padding-block:12px}
  .ask-links{gap:8px 28px}
  .related-links a{display:inline-block;padding-block:6px}
  .qa.right{align-items:flex-start;text-align:left}
  .article-body,.post .art-head,.article-figure.hero,.related{padding-left:20px;padding-right:20px}
  .cat-head,.cat-list{padding-left:20px;padding-right:20px}
  .cat-list li{grid-template-columns:1fr}
  .cat-list .m{white-space:normal}
  .callout{padding:22px 20px 18px}
  .foot-grid{padding:30px 20px 40px}
  .timeline li{grid-template-columns:1fr;gap:4px}
}
/* sp-rail-width: our partner marks are horizontal wordmarks — median 4.5:1, up to 13:1 across the
   400-logo pool — so a 96px track renders them illegibly. In this rail the roll resolved to two 97px
   columns and the featured tiles to 203x114 with the blurb clipped mid-sentence. Give every mark the
   full rail width and let the tile grow to its text. */
.rail-roll{grid-template-columns:1fr!important;gap:12px}
.rail-roll .sponsor,.rail-feat .sponsor{min-height:0;height:auto}
.rail-roll .sponsor img{max-height:34px;max-width:100%;width:auto;height:auto;object-fit:contain}
.rail-feat .sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.rail .sponsor-blurb{overflow:visible;display:block;-webkit-line-clamp:none;max-height:none}
/* `.sponsor{aspect-ratio:5/2;overflow:hidden}` locks every tile to a fixed box, so any blurb longer
   than it was silently cut mid-sentence ("...shows what happens when young"). A logo-only tile can
   keep the ratio; a tile carrying copy has to grow to its text. */
.sponsor:has(.sponsor-blurb:not(:empty)){aspect-ratio:auto;overflow:visible;padding-bottom:10px}
.rail .sponsor{aspect-ratio:auto;overflow:visible}
.rail .sponsor img{display:block;margin:0 auto;max-width:calc(100% - 16px)}
/* sp-center: the logo sat hard against the top of its tile with the copy beneath it, so short marks
   floated and the tiles read ragged. Centre the whole slot — mark and text — on both axes. */
.rail .sponsor,.sponsor{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.rail .sponsor img,.sponsor img{margin:0 auto;align-self:center}
.rail .sponsor-blurb,.sponsor-blurb{text-align:center;width:100%}


/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;font-size:13.5px;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-padding: the mark and its copy sat tight to the tile edges. Give the contents room to breathe. */
.rail .sponsor,.sponsors .sponsor,.sponsor{padding:18px 16px 16px}
.rail .sponsor-blurb,.sponsor-blurb{padding:10px 4px 0}
.rail-roll{gap:14px}
.rail-feat{gap:14px}

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

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.rail-feat .feat.sponsor .sp-logo.sp-logo{padding:8px 12px!important;box-sizing:border-box!important;height:44px!important;max-height:none!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.rail-feat .feat.sponsor .sp-logo.sp-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.rail-roll .sponsor .sp-logo.sp-logo{padding:8px 12px!important;box-sizing:border-box!important;height:38px!important;max-height:none!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.rail-roll .sponsor .sp-logo.sp-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}

/* sp-direct-fix: the blurb carried margin-left:20px against margin-right:0, so its box sat
   20px right of the tile and `text-align:center` centred the text inside that shifted box —
   every line landed 10px right of the tile's centre. Margin only; the centring was correct.*/
[data-partner] .sponsor-blurb{margin-left:0!important;margin-right:0!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1471px at 390, 21% of the whole page. Two columns bring it to
   1002px (32% shorter). Checked before writing: no new overflow, smallest mark still
   106px wide, longest blurb 6 lines, tile heights 139-206px.
   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 (.rail-roll), 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){
  .rail-roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .rail-roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .rail-roll > * *{min-width:0!important;max-width:100%}
    .rail-roll img,.rail-roll svg{max-width:100%;height:auto}
  .rail-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 6 rows at 390, 405px of tier across
   4 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .rail-feat .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:70px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 710px (93 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "1fr min(66ch, 100%) 1fr" (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.article-body{grid-template-columns:1fr min(781px, 100%) 1fr!important}
}
@media (min-width:1600px){
  div.article-body{grid-template-columns:1fr min(clamp(781px, 54.236vw, 937px), 100%) 1fr!important}
  div.article-body > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .rail-feat 6 rows at 768, .rail-roll 5 rows at 1440). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .rail-feat .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:calc(2lh + 10px)!important;min-height:0!important;overflow:hidden!important}
  .rail-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:calc(2lh + 10px)!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.post > figure.article-figure.hero > img,
  div.article-body > figure.article-figure.breakwide > img,
  div.article-body > figure.article-figure.breakwide.photo-well > img,
  div.well-grid > a.card > img,
  main.feed > figure.interlude > img,
  section.well > a.card.card-flag > img){height:auto}
/* op-img-dims:end */
@media (min-width:700px) and (max-width:999px){.rail-roll:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.rail-roll:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}