/* Article template: answer first, long reading, light surfaces. Dark only for the header and the closing call.
   Content is plain HTML; this file only sets measure, rhythm and a few quiet devices. */

.art{padding-top:clamp(40px,5vw,72px)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr);--read:clamp(1.125rem,1.06rem + .25vw,1.1875rem)}
.art-head,.toc,.art-body{min-width:0}

/* ---------- breadcrumb ---------- */
.crumbs{margin-bottom:clamp(22px,3vw,36px);font-size:var(--fs-label);line-height:1.4}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin:0 10px;color:var(--slate);opacity:.55}
.crumbs a{color:var(--slate)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
@media (max-width:699px){.crumbs li:last-child{flex-basis:100%;margin-top:2px}.crumbs li:last-child::before{display:none}}

/* ---------- title ---------- */
.deck{max-width:40em;margin-top:clamp(18px,2.2vw,26px);font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);line-height:1.5;color:var(--slate)}
.art h1{font-size:var(--fs-hero);line-height:1.06;max-width:21em;text-wrap:balance}

.art-body .qa-panel{margin:0 0 clamp(28px,3vw,40px)}

/* ---------- key takeaways ---------- */
.takeaways{margin:2em 0 2.2em}
.art-body .takeaways h2{margin:0 0 .7em;padding:0;border:0;font:600 var(--fs-label)/1.3 var(--sans);letter-spacing:.02em;color:var(--gold-ink)}
.takeaways ul{margin:0;padding:0;list-style:none;counter-reset:k}
.takeaways li{position:relative;max-width:62ch;padding:12px 0 12px 44px;border-top:1px solid var(--line);color:var(--ink);font-size:1.0625rem;line-height:1.5;counter-increment:k}
.takeaways li:last-child{border-bottom:1px solid var(--line)}
.takeaways li::before{content:counter(k,decimal-leading-zero);position:absolute;left:0;top:14px;font:600 .8125rem/1.5 var(--sans);font-variant-numeric:tabular-nums;color:var(--gold-ink)}

/* ---------- byline as a lower third ---------- */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(26px,3vw,34px)}
.byline-meta{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:baseline;margin:0;color:var(--slate)}
.art-head{margin-bottom:clamp(28px,4vw,48px)}

/* ---------- contents: a row of links on small screens, a sticky rail on wide ones ---------- */
.toc{margin-top:28px;padding-block:18px;border-block:1px solid var(--line)}
.toc-label{margin-bottom:8px}
.toc ol{display:flex;flex-wrap:wrap;gap:2px 22px;margin:0;padding:0;list-style:none}
.toc a{display:inline-block;padding:6px 0;font-size:.875rem;line-height:1.35;color:var(--slate);text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-ink)}
.toc a[aria-current="true"]{color:var(--ink);font-weight:600}

/* ---------- reading column ---------- */
.art-body{margin-top:clamp(28px,4vw,44px);font-size:var(--read);line-height:1.72;color:color-mix(in srgb,var(--slate) 78%,var(--ink))}
.art-body p{max-width:66ch}
.art-body p+p{margin-top:1.15em}
.art-body a{color:var(--ink);font-weight:500;text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:var(--gold);text-underline-offset:.2em}
.art-body a:hover{text-decoration-color:var(--ink)}
.art-body strong{color:var(--ink)}
.art-body h2{margin:2.3em 0 .6em;padding-top:1.1em;border-top:1px solid var(--line);font-size:clamp(1.75rem,1.4rem + 1.5vw,2.4rem);line-height:1.1;max-width:20em}
.art-body h3{margin:2em 0 .45em;font-size:clamp(1.35rem,1.2rem + .6vw,1.65rem);line-height:1.2;max-width:26em}
.art-body h2+p,.art-body h3+p{margin-top:0}
.art-body :target{scroll-margin-top:96px}

/* video, poster first */
.art-video{margin:0 0 2em}
.art-video img{object-position:center 20%}
.art-video .video-poster{aspect-ratio:16/9;color:var(--white);text-decoration:none;font-weight:400}
.art-video .video-poster:hover{text-decoration:none}
.art-video figcaption{margin-top:10px;font-size:var(--fs-label);line-height:1.5;color:var(--slate)}

/* the one distinction the article turns on */
.callout{margin:2.2em 0;padding:1.3em 0;border-block:1px solid var(--ink);max-width:66ch}
.callout-label{margin-bottom:.4em;font:600 var(--fs-label)/1.3 var(--sans);color:var(--amber-ink)}
.callout p:last-child{color:var(--ink)}

/* the pull quote */
.pull{margin:2.6em 0;max-width:24em}
.pull::before{content:"";display:block;width:48px;height:3px;margin-bottom:20px;background:var(--gold)}
.pull p{max-width:none;font:italic 400 clamp(1.55rem,1.2rem + 1.4vw,2.1rem)/1.28 var(--serif);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}

/* ---------- FAQ (shared .faq pattern) ---------- */
.art-faq{margin-top:2.6em}
.art-faq h2{margin-top:0}
.art-faq .faq{font-size:1rem;line-height:1.65}
.art-faq .faq-a p{max-width:62ch;color:var(--slate)}

/* ---------- author box ---------- */
.author{display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:start;margin-top:3em;padding:28px 0;border-block:1px solid var(--line);font-size:var(--fs-small);line-height:1.6}
.author-photo{width:112px;aspect-ratio:4/5;--vf-inset:-6px}
.author-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.author .label{margin-bottom:4px}
.art-body .author-name{margin:0 0 .5em;padding:0;border:0;font-size:1.6rem;line-height:1.1}
.author p{max-width:62ch}
.author-creds{margin:0 0 .7em;padding:0;list-style:none}
.author-creds li{position:relative;padding:3px 0 3px 18px;color:var(--ink)}
.author-creds li::before{content:"";position:absolute;left:0;top:.8em;width:8px;height:2px;background:var(--gold)}
.author .link{display:inline-block;margin-top:.7em}

/* ---------- related reading: rundown rows (shared data-fx="rows") ---------- */
.related{margin-top:3em;padding-bottom:clamp(56px,8vw,96px)}
.art-body .related h2{margin-top:0;border-top:0;padding-top:0;font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem)}
.rel{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rel>li{border-bottom:1px solid var(--line)}
.art-body .rel>li>a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 4px;font:400 clamp(1.2rem,1.1rem + .5vw,1.5rem)/1.25 var(--serif);text-decoration:none;color:var(--ink)}
.rel small{flex:none;white-space:nowrap;font:500 var(--fs-label)/1.3 var(--sans);color:var(--slate)}
.art-body .rel>li>a:focus-visible{outline-offset:-3px}


/* ---------- right rail: CTA sits low so the page reads as an article first ---------- */
.rail{display:none}
.rail-cta{padding:24px;background:linear-gradient(180deg,var(--navy-dark),var(--blackout));--vf-inset:-6px}
.rail-cta .label{margin-bottom:8px}
.rail-cta h2{margin:0 0 .5em;font-size:1.45rem;line-height:1.15}
.rail-cta p{max-width:none;font-size:.9375rem;line-height:1.55}
.rail-cta .btn{margin-top:18px}
.rail-phone{margin-top:14px !important;color:var(--mist)}
.rail-phone a{color:var(--gold);font-weight:600}

/* ---------- wide screens: contents rail, reading column, then the CTA rail ---------- */
@media (min-width:1100px){
  .art-grid{grid-template-columns:180px minmax(0,48rem);column-gap:64px;justify-content:center}
  .art-head{grid-column:1/-1;grid-row:1}
  .toc{grid-column:1;grid-row:2;margin:0;padding:0;border:0;align-self:start;height:100%}
  .art-body{grid-column:2;grid-row:2}
  .toc-in{position:sticky;top:116px}
  .toc ol{display:block;border-left:1px solid var(--line)}
  .toc li{margin:0}
  .toc a{position:relative;display:block;margin-left:-1px;padding:7px 0 7px 18px;font-size:.875rem}
  .toc a::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--gold);transform:scaleY(0);transition:transform var(--t-base) var(--e-out)}
  .toc a[aria-current="true"]::before{transform:scaleY(1)}
}
@media (min-width:1280px){
  .art-grid{grid-template-columns:176px minmax(0,44rem) 236px;column-gap:40px;justify-content:space-between}
  .rail{display:block;grid-column:3;grid-row:2;min-width:0}
  .rail-in{position:sticky;top:116px;margin-top:min(62vh,560px)}
}
html.motion-off .toc a::before{transition:none}

/* ---------- the header hairline as a reading ruler: fine ticks and a gold playhead ---------- */
.progress.ruler{height:9px;bottom:0;background:
  linear-gradient(90deg,rgba(227,203,133,.5) 1px,transparent 1px) 0 100%/60px 9px repeat-x,
  linear-gradient(90deg,rgba(201,211,227,.22) 1px,transparent 1px) 0 100%/12px 4px repeat-x}
.progress.ruler i{display:none}
.progress.ruler b{position:absolute;left:0;bottom:0;width:2px;height:100%;background:var(--gold-bright);will-change:transform}

/* ---------- below the wide layout: contents become one scrolling row of chips ---------- */
@media (max-width:1099px){
  .art-head{margin-bottom:0}
  .toc{padding-block:10px}
  .toc-label{display:none}
  .toc ol{flex-wrap:nowrap;gap:0 4px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
  .toc ol::-webkit-scrollbar{display:none}
  .toc li{flex:none}
  .toc a{padding:12px 12px;white-space:nowrap}
  .toc a[aria-current="true"]{box-shadow:inset 0 -2px var(--gold)}
}

/* ---------- phones: 44px-ish tap targets ---------- */
@media (max-width:699px){
  .crumbs a{display:inline-block;padding:14px 0}
  .crumbs ol{gap:0}
  .byline-meta a{display:inline-block;padding:12px 0}
  .author{grid-template-columns:84px minmax(0,1fr);gap:16px}
  .author-photo{width:84px}
}

@media print{.toc,.progress,.rail{display:none}}