/* ============================================================================
   article.css v2 — Bankrate-modeled editorial article (Valley West brand).
   Studied live 2026-06-29: dark brand-tinted HERO BAND -> overlapping WHITE CARD,
   avatar byline, key-takeaways accent rule, chevron FAQ, author photo, ~18px body.
   Scoped to body.ed-article. Tokens from tokens.css (--accent / --serif Newsreader /
   --sans Hanken / --t-hi / --t-mid / --border). Brand accent = red (mortgage) / green (VWI).
   ============================================================================ */

/* kill the wide site rail + section padding for article pages */
body.ed-article main section{ padding:0 !important; }
body.ed-article main .wrap{ max-width:none !important; padding:0 !important; }
body.ed-article .art{ font-family:var(--sans); }

/* ===================== HERO BAND (dark, brand-tinted) ===================== */
body.ed-article .art-hero-band{
  background:linear-gradient(165deg, color-mix(in srgb, var(--accent) 16%, #16131c), #0c0b10);
  color:#fff; padding:36px 0 70px; /* deep bottom so the white card overlaps up */
}
body.ed-article .art-hero-inner{ max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,30px); }
body.ed-article .art-hero-band .art-crumb{ color:rgba(255,255,255,.62); font-size:.8rem; margin:0 0 16px; }
body.ed-article .art-hero-band .art-crumb a{ color:rgba(255,255,255,.82); text-decoration:none; }
body.ed-article .art-hero-band .art-title{
  font-family:var(--serif); font-weight:700; color:#fff;
  font-size:clamp(30px,4.6vw,42px); line-height:1.16; letter-spacing:-.01em; margin:0 0 18px;
}
/* byline row with overlapping avatars */
body.ed-article .art-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; color:rgba(255,255,255,.85); font-size:.9rem; border:0; padding:0; margin:0; }
body.ed-article .art-avatars{ display:inline-flex; align-items:center; }
body.ed-article .art-avatars .av{ width:34px; height:34px; border-radius:50%; border:2px solid #fff; margin-left:-9px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.74rem; }
body.ed-article .art-avatars .av:first-child{ margin-left:0; }
body.ed-article .art-byline a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
body.ed-article .art-byline .verified{ display:inline-flex; align-items:center; gap:4px; color:#62d38c; font-weight:600; }
body.ed-article .art-byline .verified svg{ width:15px; height:15px; }
body.ed-article .art-meta{ color:rgba(255,255,255,.6); font-size:.82rem; margin-top:9px; }
body.ed-article .art-indep{ color:rgba(255,255,255,.58); font-size:.78rem; margin-top:13px; border-top:1px solid rgba(255,255,255,.13); padding-top:13px; }

/* ===================== WHITE CARD (overlaps up into band) ===================== */
/* selector carries .wrap.art-card so specificity beats `main .wrap{max-width:none!important}` */
body.ed-article main .wrap.art-card{
  background:#fff; border-radius:20px 20px 0 0; position:relative; z-index:2;
  margin:-46px auto 0 !important; max-width:812px !important;
  padding:8px clamp(24px,5vw,54px) 44px !important;
  box-sizing:border-box;
}
/* inner reading measure — must beat .wrap and any inherited width */
body.ed-article main .wrap.art-card > *{ max-width:704px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; }

/* hero image */
body.ed-article .art-hero{ width:100%; max-width:704px; aspect-ratio:16/9; object-fit:cover; border-radius:14px; display:block; margin:26px auto 6px; }
body.ed-article .art-figcap{ font-size:.76rem; color:var(--t-mid); margin:0 auto 8px; }

/* ===================== TYPOGRAPHY (18px body, airy) ===================== */
body.ed-article .art h2{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.4vw,31px); line-height:1.2; color:var(--t-hi); margin:1.9em 0 .55em; }
body.ed-article .art h3{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.6vw,23px); line-height:1.28; color:var(--t-hi); margin:1.5em 0 .45em; }
body.ed-article .art p, body.ed-article .art li{ font-size:1.125rem; line-height:1.74; color:#2a2a31; }
body.ed-article .art p{ margin:0 0 1.15em; }
body.ed-article .art a{ color:var(--accent); text-underline-offset:2px; }
body.ed-article .art ul, body.ed-article .art ol{ margin:0 0 1.25em; padding-left:1.3em; }
body.ed-article .art li{ margin:0 0 .55em; }
body.ed-article .art li::marker{ color:var(--accent); }
body.ed-article .art strong, body.ed-article .art b{ color:var(--t-hi); }
body.ed-article .art hr, body.ed-article .art-rule{ border:0; border-top:1px solid var(--border); margin:2.2em auto; }

/* ===================== KEY TAKEAWAYS (serif head + accent rule) ===================== */
body.ed-article .art-kt{ margin:24px auto 30px; }
body.ed-article .art-kt-head{ display:flex; align-items:center; gap:16px; font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--t-hi); margin:0 0 14px; }
body.ed-article .art-kt-head::after{ content:""; flex:1; height:2px; background:var(--accent); opacity:.5; border-radius:2px; }
body.ed-article .art-kt ul{ margin:0; padding-left:1.2em; }
body.ed-article .art-kt li{ margin:0 0 .7em; }

/* ===================== "SUMMARY OF" QUICK LIST ===================== */
body.ed-article .art-summary{ background:color-mix(in srgb,var(--accent) 5%,#fff); border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border)); border-radius:12px; padding:18px 22px; margin:1.4em auto; }
body.ed-article .art-summary .lbl{ font-weight:700; color:var(--t-hi); display:block; margin-bottom:8px; }

/* ===================== TOC ===================== */
body.ed-article .art-toc{ border:1px solid var(--border); border-radius:12px; padding:16px 22px; margin:1.4em auto; }
body.ed-article .art-toc .lbl{ font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--t-mid); font-weight:700; margin:0 0 9px; }
body.ed-article .art-toc ol{ margin:0; padding-left:1.25em; }
body.ed-article .art-toc a{ color:var(--t-hi); text-decoration:none; }
body.ed-article .art-toc a:hover{ color:var(--accent); text-decoration:underline; }

/* ===================== CALLOUTS ===================== */
body.ed-article .art-callout{ display:flex; gap:13px; align-items:flex-start; background:color-mix(in srgb,var(--accent) 5%,#fff); border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border)); border-left:4px solid var(--accent); border-radius:12px; padding:16px 18px; margin:1.5em auto; }
body.ed-article .art-callout .ic{ flex:0 0 auto; width:24px; height:24px; color:var(--accent); margin-top:1px; }
body.ed-article .art-callout .lbl{ font-weight:700; color:var(--t-hi); display:block; margin-bottom:3px; }
body.ed-article .art-callout p{ margin:0; }

/* ===================== TABLES ===================== */
body.ed-article .art-tablewrap{ overflow-x:auto; margin:1.4em auto; }
body.ed-article .art-table{ width:100%; border-collapse:collapse; font-size:1rem; }
body.ed-article .art-table caption{ caption-side:bottom; font-size:.78rem; color:var(--t-mid); text-align:left; padding-top:8px; }
body.ed-article .art-table th, body.ed-article .art-table td{ text-align:left; padding:12px 15px; border-bottom:1px solid var(--border); vertical-align:top; }
body.ed-article .art-table th{ background:color-mix(in srgb,var(--accent) 7%,#fff); color:var(--t-hi); font-weight:700; }

/* ===================== FAQ (chevron accordion) ===================== */
body.ed-article .art-faq{ margin:.4em auto; }
body.ed-article .art-faq details{ border-bottom:1px solid var(--border); padding:17px 0; }
body.ed-article .art-faq summary{ font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--t-hi); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
body.ed-article .art-faq summary::-webkit-details-marker{ display:none; }
body.ed-article .art-faq summary::after{ content:""; flex:0 0 auto; width:10px; height:10px; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .2s ease; margin-right:4px; }
body.ed-article .art-faq details[open] summary::after{ transform:rotate(-135deg); }
body.ed-article .art-faq .a{ padding-top:12px; }
body.ed-article .art-faq .a p:last-child{ margin-bottom:0; }

/* ===================== AUTHOR BIO (circular photo / monogram) ===================== */
body.ed-article .art-author{ display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--border); padding:22px 0 4px; margin:2em auto 0; }
body.ed-article .art-author .ph{ width:60px; height:60px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 80%,#000),var(--accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:1.2rem; }
body.ed-article .art-author .wrote{ font-size:.8rem; color:var(--t-mid); }
body.ed-article .art-author .nm{ font-family:var(--serif); font-weight:600; color:var(--t-hi); font-size:1.1rem; }
body.ed-article .art-author .ti{ font-size:.82rem; color:var(--t-mid); margin:2px 0 7px; }
body.ed-article .art-author p{ font-size:.92rem; margin:0; }

/* ===================== SOURCES ===================== */
body.ed-article .art-sources{ border-top:1px solid var(--border); margin:2.2em auto 0; padding-top:16px; }
body.ed-article .art-sources .lbl{ font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--t-mid); font-weight:700; }
body.ed-article .art-sources ol{ font-size:.85rem; color:var(--t-mid); margin:.6em 0 0; padding-left:1.4em; }
body.ed-article .art-sources li{ margin:0 0 .35em; }
body.ed-article .art-sources a{ color:var(--accent); }

/* ===================== QUIET INLINE CTA ===================== */
body.ed-article .art-cta{ background:color-mix(in srgb,var(--accent) 8%,#fff); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border)); border-radius:12px; padding:20px 22px; margin:1.8em auto; }
body.ed-article .art-cta .h{ font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--t-hi); margin:0 0 4px; }
body.ed-article .art-cta p{ margin:0 0 12px; color:var(--t-mid); font-size:.96rem; }
body.ed-article .art-cta .btn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; font-family:var(--sans); font-weight:600; font-size:.96rem; padding:11px 22px; border-radius:999px; text-decoration:none; }
body.ed-article .art-cta .btn:hover{ filter:brightness(.93); }
/* contextual "see more" line */
body.ed-article .art-seemore{ font-weight:600; }

/* ===================== related ===================== */
body.ed-article main .relg-grid, body.ed-article main .rg-grid{ gap:14px; }

/* ===================== mobile ===================== */
@media(max-width:840px){
  body.ed-article .art-card{ max-width:none; margin:-40px clamp(8px,3vw,16px) 0; padding:8px clamp(18px,5vw,26px) 36px; border-radius:18px 18px 0 0; }
  body.ed-article .art-card > *{ max-width:none; }
  body.ed-article .art p, body.ed-article .art li{ font-size:1.06rem; }
  body.ed-article .art-author{ flex-direction:column; }
}

/* ============================================================================
   v3 fixes 2026-06-29 (operator review): clear the fixed site header so the
   headline isn't cut off; centered treatment (hero + headings + boxes + CTAs +
   author); remove the oversized hero image. Body prose stays left for readability.
   ============================================================================ */
/* 1) headline was cut off under the fixed header → push hero content down */
body.ed-article .art-hero-band{ padding-top:clamp(92px,11vh,126px) !important; padding-bottom:74px !important; }
/* 2) centered hero */
body.ed-article .art-hero-inner{ text-align:center; }
body.ed-article .art-hero-band .art-crumb{ justify-content:center; }
body.ed-article .art-byline{ justify-content:center; }
body.ed-article .art-meta, body.ed-article .art-indep{ text-align:center; }
body.ed-article .art-indep{ max-width:640px; margin-left:auto; margin-right:auto; }
/* 3) centered section headings + box headings + CTAs + author */
body.ed-article .art h2, body.ed-article .art h3{ text-align:center; }
body.ed-article .art-kt-head{ justify-content:center; text-align:center; }
body.ed-article .art-kt-head::after{ display:none; } /* drop the right-extending rule when centered */
body.ed-article .art-kt-head::before{ content:""; display:none; }
body.ed-article .art-summary .lbl, body.ed-article .art-toc .lbl, body.ed-article .art-sources .lbl{ display:block; text-align:center; }
body.ed-article .art-cta{ text-align:center; }
body.ed-article .art-author{ justify-content:center; text-align:center; }
/* keep lists readable: list text left within the centered boxes */
body.ed-article .art-kt ul, body.ed-article .art-summary ol, body.ed-article .art-toc ol{ display:inline-block; text-align:left; }
/* 4) remove the oversized hero image */
body.ed-article .art-hero, body.ed-article .art-figcap{ display:none !important; }

/* ============================================================================
   v4 2026-06-29 (operator: "middle align ALL the text perfectly"):
   full editorial center-alignment. Prose, intro, callouts, CTA, FAQ all centered.
   Lists & tables keep LEFT text inside a centered inline-block wrapper so rows stay
   scannable while the block itself sits dead-center. This is the locked article look.
   ============================================================================ */
/* center every block in the card by default */
body.ed-article .art-card{ text-align:center; }
body.ed-article .art p, body.ed-article .art li{ text-align:center; }
body.ed-article .art-intro, body.ed-article .art-bottomline{ text-align:center; }
/* lists: center the list block, keep the lines left-aligned & hang markers inside */
body.ed-article .art ul, body.ed-article .art ol{
  display:inline-block; text-align:left; padding-left:1.25em; margin-left:auto; margin-right:auto;
}
body.ed-article .art li{ text-align:left; }
/* wrappers that hold a list need to become centering contexts */
body.ed-article .art-kt, body.ed-article .art-summary, body.ed-article .art-toc{ text-align:center; }
body.ed-article .art-summary .lbl, body.ed-article .art-toc .lbl{ text-align:center; }
/* callout: center the label + copy, keep the accent icon above the text */
body.ed-article .art-callout{ flex-direction:column; align-items:center; text-align:center; }
body.ed-article .art-callout .ic{ margin:0 0 6px; }
/* CTA already centered in v3 — center its button too */
body.ed-article .art-cta .btn{ margin:0 auto; }
/* FAQ: center the question; chevron sits just after the centered text */
body.ed-article .art-faq summary{ justify-content:center; gap:12px; text-align:center; }
body.ed-article .art-faq .a, body.ed-article .art-faq .a p{ text-align:center; }
/* tables: keep cell text left (data), but center the table block + caption */
body.ed-article .art-tablewrap{ text-align:center; }
body.ed-article .art-table{ margin:0 auto; text-align:left; }
body.ed-article .art-table caption{ text-align:center; }
/* sources: centered list block, left lines */
body.ed-article .art-sources{ text-align:center; }
body.ed-article .art-sources ol{ display:inline-block; text-align:left; }
/* author bio paragraph centered (already centered container from v3) */
body.ed-article .art-author p, body.ed-article .art-author .wrote{ text-align:center; }

/* ============================================================================
   v5 2026-06-29 — Bankrate-modeled 2-column shell + STICKY RIGHT-RAIL index.
   Fixes the card-overlapping-the-hero glitch (no negative margin); the content
   card now sits cleanly BELOW the band as a floating panel, with an auto-built
   "On this page" rail (article.js) on its right. Rail → desktop; inline .art-toc
   → mobile. Centered prose is preserved inside the card.
   ============================================================================ */
/* band ends cleanly — generous clearance so the H1/crumb never crowd the fixed
   header (the header is translucent glass; the band needs real breathing room). */
body.ed-article .art-hero-band{ padding-top:clamp(116px,13vh,148px) !important; padding-bottom:clamp(44px,6vh,64px) !important; }

/* the 2-col shell (article.js wraps the card + appends .art-rail).
   align-items:start keeps both columns top-aligned, BUT the rail must be able to
   travel the full article height for position:sticky to follow the scroll — so the
   rail column is forced to stretch to the row (card) height below. */
body.ed-article .art-shell{
  max-width:1180px; margin:36px auto 0; padding:0 clamp(16px,4vw,30px);
  display:grid; grid-template-columns:minmax(0,1fr) 274px; gap:46px; align-items:start;
}
body.ed-article .art-rail{ align-self:stretch; }  /* full-height column → sticky inner can travel */
/* CRITICAL sticky fix: the global body has overflow-x:hidden, which forces
   overflow-y:auto and makes BODY a scroll container — that traps position:sticky
   so the rail scrolls away instead of sticking. overflow-x:clip (NOT hidden) still
   clips horizontal bleed but does NOT establish a scroll container, so the rail
   sticks to the viewport and the index follows the scroll. */
body.ed-article{ overflow-x:clip !important; overflow-y:visible !important; }
/* card now FILLS its column (kill the v3 812px/centered-overlap rule) + becomes a clean floating panel */
body.ed-article main .wrap.art-card{
  max-width:none !important; width:auto !important; margin:0 !important;
  border-radius:20px !important; box-shadow:0 24px 60px -34px rgba(8,8,10,.28), 0 4px 14px -8px rgba(8,8,10,.10);
  border:1px solid rgba(8,8,10,.07);
  padding:clamp(22px,3vw,40px) clamp(20px,4vw,52px) 44px !important;
}
/* keep the centered reading measure inside the now-wider card */
body.ed-article main .wrap.art-card > *{ max-width:712px !important; margin-left:auto !important; margin-right:auto !important; }

/* ── STICKY RIGHT-RAIL "On this page" ── */
body.ed-article .art-rail{ position:relative; }
body.ed-article .art-rail-inner{ position:sticky; top:96px; }
body.ed-article .art-rail-h{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--t-mid,#5B5D63); margin:0 0 12px; }
body.ed-article .art-rail-nav{ display:flex; flex-direction:column; border-left:2px solid var(--border,#E6E4DF); }
body.ed-article .art-rail-nav a{
  display:block; padding:7px 0 7px 14px; margin-left:-2px; border-left:2px solid transparent;
  color:var(--t-mid,#5B5D63); text-decoration:none; font-size:13.5px; line-height:1.35; transition:color .14s, border-color .14s;
}
body.ed-article .art-rail-nav a:hover{ color:var(--accent,#D0202F); }
body.ed-article .art-rail-nav a.active{ color:var(--accent,#D0202F); font-weight:600; border-left-color:var(--accent,#D0202F); }
body.ed-article .art-rail-cta{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:18px;
  background:var(--accent,#D0202F); color:#fff; text-decoration:none; font-weight:600; font-size:13.5px;
  padding:11px 16px; border-radius:999px; transition:filter .16s;
}
body.ed-article .art-rail-cta:hover{ filter:brightness(.93); }
body.ed-article .art-rail-cta svg{ width:15px; height:15px; }

/* desktop: the rail replaces the inline TOC (only when the rail actually built) */
@media(min-width:981px){ body.art-has-rail .art-toc{ display:none !important; } }

/* ── AUTHOR BIO: no monogram circle, clean centered block, inside the card ── */
body.ed-article .art-author .ph{ display:none !important; }
body.ed-article .art-author{ flex-direction:column; align-items:center; gap:3px; text-align:center; max-width:640px; margin-left:auto; margin-right:auto; }
body.ed-article .art-author > div{ max-width:600px; }
body.ed-article .art-author .wrote{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
body.ed-article .art-author p{ margin-top:8px; line-height:1.6; }

/* ── PREMIUM RELATED ARTICLES (art-rel — built by article.js) ── */
body.ed-article .art-rel{ max-width:712px; margin:2.6em auto 0; padding-top:1.8em; border-top:1px solid var(--border,#E6E4DF); text-align:left; }
body.ed-article .art-rel-label{ font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t-mid,#5B5D63); margin:0 0 .9em; }
body.ed-article .art-rel-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
body.ed-article .art-rel-card{ border:1px solid var(--border,#E6E4DF); border-radius:14px; background:#fff; transition:border-color .16s, box-shadow .16s, transform .16s; }
body.ed-article .art-rel-card:hover{ border-color:var(--accent,#D0202F); box-shadow:0 14px 28px -18px rgba(8,8,10,.42); transform:translateY(-1px); }
body.ed-article .art-rel-link{ display:flex; align-items:center; gap:14px; padding:14px 16px; text-decoration:none; color:inherit; }
body.ed-article .art-rel-tile{ flex:none; width:46px; height:46px; border-radius:11px; display:grid; place-items:center; background:var(--accent,#D0202F); color:#fff; }
body.ed-article .art-rel-tile svg{ width:23px; height:23px; }
body.ed-article .art-rel-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
body.ed-article .art-rel-badge{ align-self:flex-start; font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; margin-bottom:2px; background:var(--accent,#D0202F); color:#fff; }
body.ed-article .art-rel-badge--family{ background:#16131c; }
body.ed-article .art-rel-title{ font-family:var(--serif); font-weight:600; font-size:1rem; line-height:1.3; color:var(--t-hi,#16181B); }
body.ed-article .art-rel-card:hover .art-rel-title{ color:var(--accent,#D0202F); }
body.ed-article .art-rel-dek{ font-size:.85rem; line-height:1.45; color:var(--t-mid,#5B5D63); }
body.ed-article .art-rel-time{ font-size:.74rem; color:var(--t-lo,#8A8D93); margin-top:1px; }
body.ed-article .art-rel-arrow{ flex:none; width:18px; height:18px; color:var(--t-lo,#B7B4AE); transition:transform .16s, color .16s; }
body.ed-article .art-rel-card:hover .art-rel-arrow{ color:var(--accent,#D0202F); transform:translateX(3px); }
@media(max-width:560px){ body.ed-article .art-rel-tile{ display:none; } }

/* tablet / mobile: single column, hide the rail, keep the inline TOC */
@media(max-width:980px){
  body.ed-article .art-shell{ grid-template-columns:1fr; gap:0; max-width:none; padding:0 clamp(8px,3vw,16px); margin-top:26px; }
  body.ed-article .art-rail{ display:none; }
  body.ed-article main .wrap.art-card{ border-radius:18px !important; padding:clamp(18px,5vw,26px) clamp(16px,5vw,24px) 36px !important; }
  body.ed-article main .wrap.art-card > *{ max-width:none !important; }
}