/* ============================================================
Single-article styles (single.php / content-single.php).
Two parts:
A. THEME CHROME — hero, bylines, sticky TOC, author, related (theme markup).
B. .entry-content — styles the pipeline-generated post body via its stable
hook classes (TEMPLATE_RESTYLE_PLAN Tier 1) + a scoped Bootstrap grid shim.
Loaded after homesnacks.css. ============================================================ */
/* =========================================================
A. THEME CHROME
========================================================= */
/* ---- Hero ---- */
.arthero{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start;padding-bottom:48px;}
.arthero__h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(48px,6.5vw,96px);
line-height:.94;letter-spacing:-.02em;margin:0;}
.arthero__dek{max-width:560px;margin-top:24px;font-size:21px;line-height:1.45;color:var(--ink-soft);}
.arthero__dek strong{color:var(--ink);}
.bylines{display:flex;gap:32px;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule);
flex-wrap:wrap;align-items:center;}
.byline{display:flex;gap:12px;align-items:center;}
.byline__av{width:42px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--bg);background:var(--ink);flex:none;}
.byline__av--accent{background:var(--accent);}
.byline__av--img{object-fit:cover;background:none;padding:0;}
.byline__name{font-size:17px;line-height:1.1;margin-top:2px;}
.byline__name a{color:inherit;text-decoration:none;}
.byline__name a:hover{text-decoration:underline;text-underline-offset:3px;}
.byline__role{font-size:11px;color:var(--ink-soft);margin-top:2px;}
.byline__date{font-size:18px;margin-top:4px;}
.byline__spacer{flex:1;}
.byline--updated{flex-direction:column;align-items:flex-end;text-align:right;}
.arthero__card{align-self:start;}
.arthero__cardhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.arthero__cardnote{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0 0 16px;}
.arthero__cardlinks{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--rule);}
.arthero__cardlinks a{font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--accent2);text-decoration:none;}
.arthero__cardlinks a:hover{text-decoration:underline;text-underline-offset:3px;}
/* Side-card variants (hero.php): map = the body's .moneymap SVG re-hosted in
the hero; photo = featured image, cropped to a steady 4:3 so inconsistent
source images still look composed; note = the legacy text card. */
.arthero__map{background:var(--bg);border:1px solid var(--rule);border-radius:12px;padding:12px;}
.arthero__map .moneymap{display:block;width:100%;height:auto;}
.arthero__map .moneymap__pin{cursor:pointer;text-decoration:none;}
.arthero__map .moneymap__pin text{pointer-events:none;text-decoration:none;}
.arthero__map .moneymap__pin circle{transition:fill .12s ease;}
.arthero__map .moneymap__pin:hover circle,
.arthero__map .moneymap__pin:focus circle{fill:var(--ink);}
.arthero__mapcap{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--ink-soft);margin:10px 2px 14px;}
.arthero__photo{margin:0 0 16px;}
.arthero__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;}
/* ---- Body layout + sticky TOC (sidebar only appears when JS builds it) ---- */
.single-article > .section{padding:8px 0;}
.artbody{display:block;padding-top:8px;}
.artbody.has-toc{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start;}
/* Let the content column shrink instead of being stretched to its widest child.
Without this, the has-toc grid's 1fr track keeps min-width:auto and the wide
all-cities table forces the whole page past the viewport on mobile. */
.artbody,.artbody > *,.entry-content{min-width:0;}
.toc{position:sticky;top:72px;align-self:start;}
.toc__label{margin-bottom:14px;}
.toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;counter-reset:none;}
.toc a{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:baseline;padding:8px 4px 8px 12px;
text-decoration:none;border-left:2px solid transparent;}
.toc a:hover,.toc a.active{border-left-color:var(--accent);}
.toc__r{font-family:'Instrument Serif',serif;font-style:italic;font-size:16px;color:var(--ink-soft);}
.toc__n{font-family:'Newsreader',serif;font-size:15px;color:var(--ink-soft);}
.toc a:hover .toc__n,.toc a.active .toc__n{color:var(--ink);}
/* ---- Author band ---- */
.author{background:var(--bg-alt);}
.author__grid{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
max-width:1280px;margin:0 auto;padding:64px 32px;}
.author__av{width:120px;height:120px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:var(--bg);
font-family:'Instrument Serif',serif;font-size:48px;font-style:italic;background:linear-gradient(135deg,var(--accent),var(--accent3));flex:none;}
.author__av--img{object-fit:cover;background:none;}
.author__eyebrow{margin-bottom:6px;}
.author__name{font-size:36px;margin-bottom:8px;}
.author__name a{color:inherit;text-decoration:none;}
.author__name a:hover{text-decoration:underline;text-underline-offset:4px;}
.author__bio{font-size:17px;line-height:1.55;margin:0 0 12px;max-width:640px;}
.author__bio p{margin:0 0 12px;}
.author__bio p:last-child{margin-bottom:0;}
.author__bio a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px;}
.author__links{display:flex;gap:14px;font-size:14px;flex-wrap:wrap;}
.author__links a{color:var(--accent2);text-decoration:none;}
.author__links a:hover{text-decoration:underline;}
.author__cta{white-space:nowrap;}
/* ---- Related grid ---- */
.related__head{margin:56px 0 28px;}
.related__eyebrow{margin-bottom:10px;}
.related__title{font-size:48px;line-height:1;margin:0;}
.related__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:80px;}
@media(max-width:900px){
.arthero,.author__grid{grid-template-columns:1fr;gap:32px;}
.artbody.has-toc{grid-template-columns:1fr;}
/* The sidebar TOC is a desktop reading aid; stacked above the body on mobile
it's a full screen of links before the article starts. Hide it. */
.toc{display:none;}
/* Side card: only the map variant earns its place on mobile (it orients the
reader); the photo / boilerplate variants just delay the content. */
.arthero__card--photo,.arthero__card--note{display:none;}
.related__grid{grid-template-columns:1fr;}
.arthero__h1{font-size:clamp(40px,11vw,64px);}
.byline--updated{align-items:flex-start;text-align:left;}
}
@media(max-width:760px){
.author__grid{padding:48px 16px;}
.author__av{width:88px;height:88px;font-size:36px;}
.author__cta{justify-self:start;}
}
/* ---- Mobile: stop wide article elements from forcing horizontal scroll ---- */
.entry-content{overflow-wrap:anywhere;}
.entry-content iframe,.entry-content embed,.entry-content object,.entry-content video{max-width:100%;}
.entry-content #map iframe,.entry-content #stateMap iframe{width:100%;}
@media(max-width:760px){
.bylines{gap:20px 24px;}
/* Any table that isn't already in a scroll wrapper gets its own scroll box. */
.entry-content table.table{display:block;overflow-x:auto;width:100%;}
/* Tighten inner boxes: with the 16px page gutter, every extra 8px of card
padding is visible content width on a 390px screen. */
.entry-content #methodology{padding:18px 16px;}
.entry-content .hs-quicklist{padding:18px 16px;}
.entry-content blockquote{padding:14px 16px;}
.entry-content .keytakeaways{padding:18px 16px;}
.entry-content .worst-aside{padding:18px 16px;}
.entry-content .compare__card{padding:16px 12px;}
.entry-content .locator{padding:10px 12px;gap:10px;}
}
/* =========================================================
B. .entry-content — pipeline post body (hook contract)
========================================================= */
.entry-content{font-family:'Newsreader',serif;font-size:19px;line-height:1.65;color:var(--ink);max-width:820px;}
.artbody.has-toc .entry-content{max-width:none;}
.entry-content p{margin:0 0 22px;}
.entry-content a{color:var(--accent2);text-decoration:underline;text-underline-offset:3px;}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:'Instrument Serif',serif;font-weight:400;
line-height:1.05;letter-spacing:-.01em;color:var(--ink);scroll-margin-top:80px;}
.entry-content h2{font-size:clamp(32px,4vw,52px);margin:48px 0 18px;}
.entry-content h3{font-size:clamp(26px,3vw,38px);margin:40px 0 14px;}
/* Older bodies link the city heading itself () —
keep headings ink-colored, not green underlined links. */
.entry-content h2 a,.entry-content h3 a{color:inherit;text-decoration:none;}
.entry-content h2 a:hover,.entry-content h3 a:hover{color:var(--accent);
text-decoration:underline;text-underline-offset:4px;}
.entry-content h4{font-size:24px;margin:28px 0 12px;}
.entry-content ul,.entry-content ol{margin:0 0 22px;padding-left:1.4em;}
.entry-content li{margin:8px 0;}
.entry-content img{max-width:100%;border-radius:14px;margin:24px 0;height:auto;}
.entry-content blockquote{margin:28px 0;padding:18px 24px;border-left:3px solid var(--accent);
background:var(--bg-alt);border-radius:0 8px 8px 0;font-style:italic;}
.entry-content hr{border:0;border-top:1px solid var(--rule);margin:40px 0;}
/* In-body table of contents (#toc / #skip_expand: ul of li.col-md-6) */
.entry-content #toc{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
padding:24px 28px;margin:0 0 32px;list-style:none;}
.entry-content #toc ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;}
.entry-content #toc li{margin:0;}
.entry-content #toc a{font-family:'Space Grotesk',sans-serif;font-size:15px;text-decoration:none;color:var(--ink);}
.entry-content #toc a:hover{color:var(--accent);}
.entry-content #skip_expand{font-family:'Space Grotesk',sans-serif;font-size:13px;}
/* Quick top-ten list */
.entry-content #top-ten{font-family:'Space Grotesk',sans-serif;}
/* Per-city write-ups */
.entry-content .cityHeader{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
margin:48px 0 12px;padding-top:24px;border-top:1px solid var(--rule);scroll-margin-top:80px;}
.entry-content .cityName{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,4vw,48px);
line-height:1;margin:0;color:var(--ink);}
.entry-content .cityName a{color:inherit;text-decoration:none;}
.entry-content .cityName a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px;}
/* The dot-map SVG is a fill:none state outline + cyan dot — invisible on the
cream background without its own light surface. Keep the surface white in
every palette (the SVG's stroke is dark). */
.entry-content .cityMap{max-width:96px;margin:0 0 0 auto;padding:6px;
background:#fff;border:1px solid var(--rule);border-radius:10px;}
.entry-content .cityHeader p{margin:0;line-height:0;}
/* City photo (.list-image) + its "Source:" caption, kept together as a figure. */
.entry-content .list-image{width:100%;border-radius:14px;margin:8px 0 6px;}
.entry-content .list-image + .source,
.entry-content p:has(.list-image) + .source{margin:0 0 28px;}
/* "Best Places By State" link section (#stateLevel / #states) */
.entry-content #stateLevel{margin:56px 0 0;}
.entry-content .list-header{font-family:'Instrument Serif',serif;font-weight:400;
font-size:clamp(28px,3.4vw,40px);line-height:1.05;margin:0 0 18px;
padding-top:24px;border-top:1px solid var(--rule);}
.entry-content #stateLevel .row > [class*="col-"] p{margin:0 0 10px;}
.entry-content #stateLevel a{font-family:'Newsreader',serif;color:var(--accent2);
text-decoration:none;font-size:17px;}
.entry-content #stateLevel a:hover{text-decoration:underline;text-underline-offset:3px;}
/* "SnackAbility" /10 score circle */
.entry-content .score-element,.entry-content .score-outer{display:inline-flex;align-items:center;justify-content:center;
width:84px;height:84px;border-radius:999px;border:2px solid var(--accent);background:var(--paper);
font-family:'Instrument Serif',serif;font-style:italic;}
.entry-content .score-inner,.entry-content .cityGrade{font-size:30px;line-height:1;color:var(--accent);}
.entry-content .out-of{font-family:'Space Grotesk',sans-serif;font-size:11px;color:var(--ink-soft);
text-transform:uppercase;letter-spacing:.08em;}
/* Pipeline alignment utility: the review score column ships .ta-center */
.entry-content .ta-center{text-align:center;}
/* Per-city "Stat | City | State" comparison table */
.entry-content .table-responsive{overflow-x:auto;margin:0 0 24px;}
.entry-content table.table{width:100%;border-collapse:collapse;font-family:'Space Grotesk',sans-serif;font-size:14px;margin:0;}
.entry-content table.table th,.entry-content table.table td{padding:10px 14px;text-align:right;
border-bottom:1px solid var(--rule);white-space:nowrap;font-variant-numeric:tabular-nums;}
.entry-content table.table th:first-child,.entry-content table.table td:first-child{text-align:left;font-weight:600;}
.entry-content table.table-striped tbody tr:nth-child(odd){background:var(--paper);}
/* All-cities data table (#where / #ranking-table) */
.entry-content #where{margin-top:48px;}
.entry-content #ranking-table,.entry-content #ranking-table table{width:100%;border-collapse:collapse;}
.entry-content #ranking-table{display:block;max-height:600px;overflow:auto;border:1px solid var(--rule);
border-radius:14px;font-family:'Space Grotesk',sans-serif;font-size:14px;}
.entry-content #ranking-table thead th{position:sticky;top:0;background:var(--paper);z-index:1;
padding:14px 16px;text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
color:var(--ink-soft);border-bottom:1px solid var(--rule);white-space:nowrap;cursor:pointer;}
.entry-content #ranking-table th:nth-child(1),.entry-content #ranking-table th:nth-child(2){text-align:left;}
.entry-content #ranking-table td{padding:12px 16px;border-bottom:1px solid var(--rule);text-align:right;
white-space:nowrap;font-variant-numeric:tabular-nums;}
.entry-content #ranking-table td:nth-child(2){text-align:left;font-family:'Newsreader',serif;font-size:16px;}
.entry-content #ranking-table tbody tr:nth-child(odd){background:var(--paper);}
/* State map + sources */
.entry-content #map,.entry-content #stateMap{margin:24px 0;border-radius:14px;overflow:hidden;}
.entry-content .source{font-family:'Space Grotesk',sans-serif;font-size:12px;color:var(--ink-soft);}
/* Methodology / summary prose sections (dark band for methodology) */
.entry-content #methodology,.entry-content #summary{scroll-margin-top:80px;}
.entry-content #methodology{background:var(--ink);color:var(--bg);border-radius:18px;padding:40px;margin:48px 0;}
.entry-content #methodology h2,.entry-content #methodology h3{color:var(--bg);}
/* The band's own padding already spaces the header — don't double it with the
default heading top-margin on the first child. */
.entry-content #methodology > :first-child,
.entry-content #methodology > h2:first-child,
.entry-content #methodology > h3:first-child{margin-top:0;}
.entry-content #methodology a{color:var(--accent);}
/* City search widget */
.entry-content #citySearch{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
padding:24px;margin:32px 0;font-family:'Space Grotesk',sans-serif;}
.entry-content #citySearch input{padding:12px 16px;border-radius:999px;border:1px solid var(--rule);
background:var(--bg);color:var(--ink);font-size:15px;width:100%;max-width:360px;}
/* =========================================================
Legacy review-format blocks ("Review Of " + house rating).
The pipeline ships a classless div[style] wrapper; theme.js tags it
.hs-review (and the rating row .hs-review__rating) and strips the inline
styles. The img rules below don't need JS — they key off src.
========================================================= */
/* Rating icons: the pipeline ships cyan house PNGs (assets/star-on-big.png,
opaque white background — filters can't recolor it cleanly). theme.js swaps
each img for an inline SVG house (.hs-house, currentColor). The img rule is
only the no-JS fallback: at least keep them on one line (global
img{display:block} stacked them vertically). */
.entry-content img[src*="star-on"]{display:inline-block;width:18px;height:auto;
margin:0 3px 0 0;border-radius:0;vertical-align:-2px;}
.entry-content .hs-house{display:inline-block;width:19px;height:19px;
margin:0 3px 0 0;color:var(--ink);}
.entry-content .hs-house svg{display:block;width:100%;height:100%;fill:currentColor;}
.entry-content .hs-review{background:var(--paper);border:1px solid var(--rule);
border-radius:14px;padding:24px 28px;margin:32px 0;font-size:17px;}
.entry-content .hs-review b{font-family:'Space Grotesk',sans-serif;font-size:15px;}
.entry-content .hs-review b span[onclick]{color:var(--ink);cursor:pointer;}
.entry-content .hs-review .hs-review__rating{margin:10px 0 16px;line-height:1;}
.entry-content .hs-review p{margin:0 0 14px;}
.entry-content .hs-review br{display:none;}
.entry-content .hs-review .homesnacks-inline span{display:inline-block;
font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
padding:8px 16px;border:1px solid var(--rule);border-radius:999px;
background:var(--bg);color:var(--ink);cursor:pointer;}
.entry-content .hs-review .homesnacks-inline span:hover{border-color:var(--accent);color:var(--accent);}
/* Legacy embeds: per-city Google-Maps satellite views (.street-view, ported
from flymag incl. pointer-events:none so scrolling over them doesn't zoom
the map) and the photo-gallery iframes (.iframe-gallery — ships
width=300/height=150 attrs that would render it postage-stamp sized). */
.entry-content .street-view{width:100%;height:300px;border:0;border-radius:14px;
margin:8px 0 24px;pointer-events:none;}
.entry-content .iframe-gallery{width:100%;height:450px;border:0;border-radius:14px;margin:8px 0 24px;}
@media(max-width:900px){.entry-content .iframe-gallery{height:350px;}}
@media(max-width:600px){.entry-content .iframe-gallery{height:300px;}}
/* Legacy quick-list box (neighborhood/suburb formats): a classless gray
div[style] holding "The Neighborhoods In " + an .
theme.js tags it .hs-quicklist and strips the inline styles. */
.entry-content .hs-quicklist{background:var(--paper);border:1px solid var(--rule);
border-radius:14px;padding:24px 28px;margin:0 0 28px;}
.entry-content .hs-quicklist h2,.entry-content .hs-quicklist h3{font-size:24px;margin:0 0 12px;}
.entry-content .hs-quicklist ol{margin:0;padding-left:1.2em;
font-family:'Space Grotesk',sans-serif;font-size:15px;columns:2;column-gap:40px;}
.entry-content .hs-quicklist li{margin:4px 0;break-inside:avoid;}
@media(max-width:600px){.entry-content .hs-quicklist ol{columns:1;}}
/* Misc hooks */
.entry-content .homesnacks-inline{display:inline-flex;align-items:center;gap:8px;}
.entry-content .rich-item{font-family:'Space Grotesk',sans-serif;}
.entry-content .qanda{margin:24px 0;}
.entry-content .qanda dt,.entry-content .qanda strong{font-weight:600;}
/* =========================================================
Bootstrap grid shim — scoped to .entry-content ONLY.
The legacy theme loaded Bootstrap; the new theme does not. These few column
classes are all the article bodies use. Without this, every .row/.col-* in
already-published posts collapses to stacked full-width.
========================================================= */
.entry-content .row{display:flex;flex-wrap:wrap;margin-left:-12px;margin-right:-12px;}
.entry-content .row > [class*="col-"]{padding-left:12px;padding-right:12px;}
.entry-content .col-md-12,.entry-content .col-sm-12,.entry-content .col-xs-12{flex:0 0 100%;max-width:100%;}
.entry-content .col-md-10,.entry-content .col-sm-10{flex:0 0 83.3333%;max-width:83.3333%;}
.entry-content .col-md-9,.entry-content .col-sm-9{flex:0 0 75%;max-width:75%;}
.entry-content .col-md-8,.entry-content .col-sm-8{flex:0 0 66.6667%;max-width:66.6667%;}
.entry-content .col-md-7,.entry-content .col-sm-7{flex:0 0 58.3333%;max-width:58.3333%;}
.entry-content .col-md-6,.entry-content .col-sm-6{flex:0 0 50%;max-width:50%;}
.entry-content .col-md-5,.entry-content .col-sm-5{flex:0 0 41.6667%;max-width:41.6667%;}
.entry-content .col-md-4,.entry-content .col-sm-4{flex:0 0 33.3333%;max-width:33.3333%;}
.entry-content .col-md-3,.entry-content .col-sm-3{flex:0 0 25%;max-width:25%;}
.entry-content .col-md-2,.entry-content .col-sm-2{flex:0 0 16.6667%;max-width:16.6667%;}
@media(max-width:768px){
.entry-content [class*="col-sm-"],.entry-content [class*="col-md-"]{flex:0 0 100%;max-width:100%;}
.entry-content .hide-on-mobile{display:none;}
}
/* =========================================================
C. 2026 article body (.entry-content--2026)
The redesigned long-form adjective body (richest, best, ...). Everything here
is scoped to .entry-content--2026 or to hook classes (.lede, .citycard,
.statbar, #compare, .worst-aside, ...) that only the 2026 body emits, so it is
inert for the ~1000 legacy bodies still rendering Part B. A post opts in when
its HTML carries the `hs2026` marker (content-single.php adds the modifier
class + suppresses the theme TOC). Mirrors build_2026/_components.html.jinja.
========================================================= */
/* ---- Container: the 2026 body owns the full .art width (no sidebar). .art
already provides max-width:1280 + padding; entry-content stops constraining so
the bleed-band math (below) resolves against a viewport-centered box. ---- */
.entry-content--2026{max-width:none;}
/* Swallow the 100vw bleed overflow without breaking the sticky in-body TOC
(clip, unlike hidden, doesn't create a scroll container). */
.single-article{overflow-x:clip;}
.entry-content--2026 > section{margin:0;}
.entry-content--2026 > .topten,
.entry-content--2026 > #map,
.entry-content--2026 > #where{padding:56px 0;}
.entry-content .eyebrow{font-weight:600;margin:0 0 10px;}
/* Section kickers above an H2: goofier (playful italic Instrument Serif in the
accent) and tucked tight to the heading instead of floating ~48px above it
(the H2's top margin used to win the margin-collapse). The dense city-card
kicker stays the clean uppercase label. */
.entry-content .eyebrow + h2{margin-top:0;}
.entry-content .eyebrow:has(+ h2):not(.citycard__eyebrow),
.entry-content .lede__main > .eyebrow{
font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
font-size:22px;line-height:1;text-transform:none;letter-spacing:0;
color:var(--accent);margin:0 0 2px;}
/* ---- Full-bleed alternating bands ----
A banded breaks out to the full viewport width; .band__inner
re-engages the centered 1280 column so its content lines up with the
non-bleed sections. Tones alternate down the page (paper / bg-alt / ink). */
.entry-content--2026 .band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.entry-content--2026 .band__inner{max-width:1280px;margin:0 auto;padding:64px 32px;}
.entry-content--2026 .band--paper{background:var(--paper);}
/* The hero `.section` draws the divider (its border-bottom). The body lives in the
NEXT section, which stacks 8px section + 8px .artbody top padding -> 16px of cream
below the divider before the first paper band begins (the "bleed"). Pull the first
band up so the background switches cream->paper right at the divider. */
.entry-content--2026 > .band:first-child{margin-top:-16px;}
.entry-content--2026 .band--altA{background:var(--bg-alt);}
.entry-content--2026 .band--ink{background:var(--ink);color:var(--bg);}
.entry-content--2026 .band--ink h2,.entry-content--2026 .band--ink h3{color:var(--bg);}
.entry-content--2026 .band--ink a{color:var(--accent);}
.entry-content--2026 .band--ink .eyebrow{color:var(--accent);}
/* ---- Lede + key takeaways (paper band) ---- */
.entry-content .lede__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start;}
.entry-content .lede__main > p:first-of-type{font-size:24px;line-height:1.45;margin-top:0;}
.entry-content .keytakeaways{background:var(--bg);border:1px solid var(--rule);border-radius:14px;padding:24px;}
.entry-content .keytakeaways__list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.entry-content .keytakeaways__list li{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:start;
margin:0;font-family:'Newsreader',serif;font-size:16px;line-height:1.4;}
.entry-content .keytakeaways__glyph{font-family:'Instrument Serif',serif;font-style:italic;
font-size:20px;color:var(--accent);line-height:1.2;}
/* ---- Top-ten section: sticky in-body TOC + cards (NON-bleed reading column) ---- */
.entry-content .topten{display:grid;grid-template-columns:240px 1fr;gap:64px;align-items:start;}
.entry-content .topten__toc{position:sticky;top:80px;align-self:start;}
.entry-content .topten__toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;}
.entry-content .topten__toc li{margin:0;}
/* `.entry-content a` (line ~123) re-underlines at equal specificity to `.toc a`;
restate text-decoration:none here at higher specificity to keep jump links clean. */
.entry-content .topten__toc a{text-decoration:none;}
.entry-content .topten__cards{min-width:0;}
/* ---- City card ---- */
.entry-content .citycard{padding:48px 0;scroll-margin-top:80px;border-top:1px solid var(--rule);}
.entry-content .citycard:first-child{border-top:0;padding-top:0;}
/* Every nested grid/flex item must be allowed to shrink below its content's
intrinsic size, or a wide city photo forces the whole column past the
viewport on mobile (grid tracks default to min-width:auto). */
.entry-content .citycard,.entry-content .citycard__head,.entry-content .citycard__meta,
.entry-content .citycard__body,.entry-content .citycard__left,.entry-content .citycard__right,
.entry-content .lede__main,.entry-content .summary__main{min-width:0;}
.entry-content .citycard__head{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:end;}
.entry-content .citycard__rank{font-family:'Instrument Serif',serif;font-style:italic;
font-size:clamp(80px,12vw,150px);line-height:.8;color:var(--accent);letter-spacing:-.04em;}
.entry-content .citycard__eyebrow{margin-bottom:4px;}
.entry-content .citycard .cityName{margin:0;font-family:'Instrument Serif',serif;font-weight:400;
font-size:clamp(34px,4vw,52px);line-height:.98;}
.entry-content .citycard .cityName a{color:inherit;text-decoration:none;}
.entry-content .citycard .cityName a:hover{color:var(--accent);}
.entry-content .citycard__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.entry-content .tagpill{font-family:'Space Grotesk',sans-serif;font-size:12px;
padding:4px 10px;border-radius:999px;background:var(--bg-alt);color:var(--ink-soft);white-space:nowrap;}
.entry-content .tagpill--up{background:#DCFCE7;color:#166534;}
.entry-content .tagpill--down{background:#FEE2E2;color:#991B1B;}
.entry-content .citycard__badges{display:flex;flex-direction:column;align-items:center;gap:12px;}
.entry-content .citycard__body{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;
align-items:start;margin-top:24px;}
.entry-content .citycard__photo{margin:0;}
.entry-content .citycard__photo .list-image{margin:0 0 6px;}
.entry-content .citycard__right{display:grid;gap:6px;align-content:start;}
.entry-content .citycard__blurb{margin-top:28px;max-width:760px;font-size:19px;line-height:1.6;}
.entry-content .citycard__links{font-family:'Space Grotesk',sans-serif;font-size:14px;}
.entry-content .citycard__links .sep{color:var(--rule);}
/* ---- Located-in pill: recolored mini-map (left) + county/state (right) ----
The dot SVG ships a cyan (#0dceef) marker on a grey county mesh. hue-rotate
warms the marker to orange; the grey mesh is unsaturated so it's unaffected.
(Pixel-exact dot color would mean regenerating the SVGs at the source.) */
.entry-content .locator{display:flex;align-items:center;gap:14px;margin:0 0 18px;
padding:12px 16px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;
font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--ink-soft);}
/* The tile carries the bg/border (NOT filtered); only the transparent dot SVG is
filtered, so the cream tile stays cream and only the cyan marker warms up. */
.entry-content .citydot-tile{width:52px;height:52px;flex:none;display:flex;
border-radius:10px;background:var(--bg);border:1px solid var(--rule);padding:5px;}
.entry-content .citydot{width:100%;height:100%;object-fit:contain;margin:0;border-radius:0;
filter:hue-rotate(195deg) saturate(.9);}
.entry-content .locator__text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.entry-content .locator__label{text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink-soft);}
.entry-content .locator__place{font-family:'Newsreader',serif;font-size:17px;color:var(--ink);
line-height:1.2;overflow-wrap:anywhere;}
/* ---- Stat bar ----
Dark fill = city value (label left). A red line marks the state median; its
" $X" caption sits just BELOW the line so it never collides with a long
value (e.g. a $1.3M home value pushes the marker far left, under the value
text). cap_left flips the caption when the marker is near the right edge. */
.entry-content .statbar{position:relative;margin-bottom:0;padding-bottom:18px;}
.entry-content .statbar__top{display:flex;justify-content:space-between;align-items:baseline;
font-family:'Space Grotesk',sans-serif;margin-bottom:6px;}
.entry-content .statbar__label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);}
.entry-content .statbar__delta{font-size:12px;font-weight:600;}
.entry-content .statbar__delta--pos{color:var(--accent2);}
.entry-content .statbar__delta--neg{color:var(--accent3);}
.entry-content .statbar__delta--mut{color:var(--ink-soft);}
.entry-content .statbar__track{position:relative;height:30px;background:var(--bg);
border:1px solid var(--rule);border-radius:8px;overflow:hidden;}
.entry-content .statbar__fill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);
border-radius:7px 0 0 7px;display:flex;align-items:center;min-width:2px;}
/* Same fix as the compare bars: a short fill can't surface a white label and it
overflows onto the cream track. Accent reads on both the ink fill and the spill. */
.entry-content .statbar__val{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
color:var(--accent);padding-left:10px;white-space:nowrap;}
.entry-content .statbar__mark{position:absolute;top:0;bottom:0;width:2px;background:var(--accent3);z-index:2;}
.entry-content .statbar__markcap{position:absolute;bottom:0;transform:translateX(-50%);
font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;line-height:1;
color:var(--accent3);white-space:nowrap;pointer-events:none;}
.entry-content .statbar__markcap--left{transform:translateX(-100%);}
/* ---- Compare panel (bg-alt band) ---- */
.entry-content #compare .compare__dek{color:var(--ink-soft);max-width:640px;}
.entry-content .metric-toggle{display:flex;flex-wrap:wrap;gap:6px;background:var(--paper);
border:1px solid var(--rule);border-radius:999px;padding:6px;margin:16px 0 24px;width:max-content;max-width:100%;}
.entry-content .metric-toggle__btn{font-family:'Space Grotesk',sans-serif;font-size:13px;
border:0;background:transparent;color:var(--ink);padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;}
.entry-content .metric-toggle__btn.is-active{background:var(--ink);color:var(--bg);}
.entry-content .compare__card{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:20px 24px;}
.entry-content .compare-metric{display:none;}
.entry-content .compare-metric.is-active{display:block;}
.entry-content .compare-row{display:grid;grid-template-columns:180px 1fr 120px;gap:16px;align-items:center;padding:7px 0;}
.entry-content .compare-row--head{font-family:'Space Grotesk',sans-serif;font-size:11px;
text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);border-bottom:1px solid var(--rule);margin-bottom:6px;}
/* Flex so the italic rank stays a fixed leading column and a long city name wraps
with a hanging indent (wrapped lines align under the name, not the rank). */
.entry-content .compare-row__city{display:flex;align-items:baseline;gap:6px;
font-family:'Newsreader',serif;font-size:16px;line-height:1.2;}
.entry-content .compare-row__city a{text-decoration:none;color:var(--ink);}
.entry-content .compare-row__city a:hover{color:var(--accent);}
.entry-content .compare-row__rank{flex:none;font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent);}
.entry-content .compare-bar{position:relative;display:block;height:32px;background:var(--bg);
border:1px solid var(--rule);border-radius:8px;overflow:hidden;}
.entry-content .compare-bar__fill{position:absolute;top:0;left:0;height:100%;background:var(--ink);
border-radius:7px 0 0 7px;display:flex;align-items:center;justify-content:flex-end;min-width:2px;transition:width .25s ease;}
.entry-content .compare-row:hover .compare-bar__fill{background:var(--accent);}
/* Short bars don't carry enough ink to surface a white label, and the label
overflows onto the cream track. Accent (orange) reads on both the ink fill and
the cream spill. On hover the fill turns orange, so flip the label to ink then. */
.entry-content .compare-bar__val{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
color:var(--accent);padding-right:10px;white-space:nowrap;}
.entry-content .compare-row:hover .compare-bar__val{color:var(--ink);}
.entry-content .compare-bar__mark{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--accent3);}
.entry-content .compare-row__delta{font-family:'Space Grotesk',sans-serif;font-size:13px;text-align:right;}
.entry-content .delta--pos{color:var(--accent2);}
.entry-content .delta--neg{color:var(--accent3);}
.entry-content .delta--mut{color:var(--ink-soft);}
.entry-content .compare__legend{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--ink-soft);margin:16px 0 0;}
.entry-content .compare__swatch{display:inline-block;width:14px;height:3px;background:var(--accent3);vertical-align:middle;margin-right:6px;}
/* ---- State map (non-bleed) ---- */
.entry-content .statemap__grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;}
.entry-content .statemap__list{list-style:none;padding:0;margin:0;display:grid;
grid-template-columns:1fr 1fr;gap:8px 24px;font-family:'Space Grotesk',sans-serif;font-size:15px;}
.entry-content .statemap__list li{margin:0;}
.entry-content .statemap__list a{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink);}
.entry-content .statemap__list a:hover{color:var(--accent);}
.entry-content .statemap__r{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent);width:1.4em;}
/* The 2026 statemap is a plain full-section figure, but it inherits Part B's
embedded-iframe-map treatment (line ~204: margin:24px 0 + border-radius +
overflow:hidden) and the shared 56px section padding. Stacked, that's the
excess space above the header, around the image, and at the section's end.
Neutralize the iframe treatment and tighten the rhythm here. */
.entry-content--2026 > #map{padding:32px 0;}
.entry-content--2026 #map,
.entry-content--2026 #stateMap{margin:0;border-radius:0;overflow:visible;}
.entry-content--2026 .statemap__img .list-image{margin:0;}
.entry-content--2026 .statemap__img .source{margin:8px 0 0;}
/* Inline-SVG "where the money lives" map (replaces the old .jpg). The SVG is
self-contained (state outline + numbered pins, built from lat/lng); these
rules just size it and give the pins an interactive affordance. */
.entry-content--2026 .statemap__img--svg{display:block;}
.entry-content--2026 .moneymap{display:block;width:100%;height:auto;}
.entry-content--2026 .moneymap__pin{cursor:pointer;text-decoration:none;}
/* the pins are anchors; stop the global link underline from striking the
SVG number labels */
.entry-content--2026 .moneymap__pin text{pointer-events:none;text-decoration:none;}
.entry-content--2026 .moneymap__pin circle{transition:fill .12s ease;}
.entry-content--2026 .moneymap__pin:hover circle,
.entry-content--2026 .moneymap__pin:focus circle{fill:var(--ink);}
/* ---- Methodology (ink band) -- override Part B's rounded inset card (line ~209,
`.entry-content #methodology{…margin:48px 0…}`). That rule's ID specificity beats
the `.band` bleed (line ~290), so we must restate the full-bleed margins here at
the same ID level — top/bottom flush, left/right breaking out to the viewport. ---- */
.entry-content--2026 #methodology{padding:0;border-radius:0;margin:0 calc(50% - 50vw);}
.entry-content--2026 #methodology .criteria{font-family:'Space Grotesk',sans-serif;}
/* ---- Ranking dek / search (non-bleed) ---- */
.entry-content .ranking__dek{color:var(--ink-soft);}
.entry-content #ranking-table th[aria-sort]{color:var(--accent);}
/* ---- Summary + worst aside (paper band) ---- */
.entry-content .summary__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start;}
.entry-content .worst-aside{background:var(--bg-alt);border:1px solid var(--rule);border-radius:14px;padding:24px;}
.entry-content .worst-aside__eyebrow{color:var(--accent3);}
.entry-content .worst-aside__title{font-family:'Instrument Serif',serif;font-size:24px;line-height:1.1;margin:0 0 16px;}
.entry-content .worst-aside__list{list-style:none;margin:0;padding:0;counter-reset:wa;}
.entry-content .worst-aside__list li{display:flex;justify-content:space-between;align-items:baseline;
gap:12px;padding:12px 0;border-bottom:1px dashed var(--rule);margin:0;}
.entry-content .worst-aside__list li:last-child{border-bottom:0;}
.entry-content .worst-aside__city{font-family:'Newsreader',serif;font-size:18px;counter-increment:wa;}
.entry-content .worst-aside__city::before{content:counter(wa) ". ";color:var(--accent3);font-style:italic;font-family:'Instrument Serif',serif;}
.entry-content .worst-aside__pop{font-family:'Space Grotesk',sans-serif;font-size:13px;color:var(--ink-soft);white-space:nowrap;}
/* ---- Score circle on the 2026 card (re-uses Part B .score-outer) ---- */
.entry-content--2026 .score-outer{width:72px;height:72px;}
/* ---- FAQ band (config faq_source categories; questions unlinked) ---- */
.entry-content .faq .band__inner{max-width:820px;}
.entry-content .qanda{padding:20px 0;border-bottom:1px solid var(--rule);margin:0;}
.entry-content .qanda:last-of-type{border-bottom:0;}
.entry-content .qanda__q{font-family:'Instrument Serif',serif;font-size:22px;line-height:1.2;margin:0 0 10px;}
.entry-content .qanda__a p{margin:0 0 10px;}
.entry-content .qanda__a p:last-child{margin-bottom:0;}
/* =========================================================
C-mobile. 2026 body responsive
========================================================= */
@media(max-width:900px){
.entry-content--2026 .band__inner{padding:48px 20px;}
.entry-content--2026 > .topten,
.entry-content--2026 > #map,
.entry-content--2026 > #where{padding:40px 0;}
.entry-content .lede__inner,
.entry-content .summary__inner,
.entry-content .statemap__grid,
.entry-content .citycard__body{grid-template-columns:1fr;gap:28px;}
/* Photo (left) and stat bars (right) stack on mobile; tighten the gap. */
.entry-content .citycard__body{gap:18px;}
/* Block (not grid) so the horizontal TOC strip's max-content columns can't
dictate a desktop-width grid track that blows past the viewport. */
.entry-content .topten{display:block;}
.entry-content .topten__cards{margin-top:24px;}
/* TOC becomes a horizontal scroll strip above the cards */
.entry-content .topten__toc{position:static;min-width:0;max-width:100%;}
.entry-content .topten__toc ol{grid-auto-flow:column;grid-auto-columns:max-content;
overflow-x:auto;gap:8px;padding-bottom:8px;}
.entry-content .citycard__head{grid-template-columns:auto 1fr;}
/* Score circle is redundant on mobile (it's repeated in the stat bars); hide it
to reclaim horizontal room for the rank + meta. */
.entry-content .citycard__badges{display:none;}
.entry-content .citycard__rank{font-size:72px;}
.entry-content .compare-row{grid-template-columns:110px 1fr 60px;gap:10px;}
.entry-content .statemap__list{grid-template-columns:1fr;}
}
@media(max-width:760px){
/* Bands are full-bleed, so their inner padding IS the page gutter — keep it
in step with the global 16px mobile gutter. */
.entry-content--2026 .band__inner{padding-left:16px;padding-right:16px;}
}
@media(max-width:560px){
.entry-content--2026 .band__inner{padding:36px 16px;}
.entry-content .lede__main > p:first-of-type{font-size:20px;}
/* Keep rank and meta side by side (not stacked) to save vertical space. */
.entry-content .citycard__head{grid-template-columns:auto 1fr;gap:14px;align-items:center;}
.entry-content .citycard__rank{font-size:56px;line-height:.9;}
.entry-content .citycard__body{gap:16px;}
.entry-content .compare__card{padding:16px;}
.entry-content .compare-row{grid-template-columns:78px 1fr;gap:8px;}
.entry-content .compare-row__delta{display:none;}
.entry-content .metric-toggle{width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;}
}