.article-page { background: var(--grad-soft); }

.article-hero { position: relative; overflow: hidden; padding: 56px 0 52px; background: var(--grad-deep); color: var(--white); }
.article-hero::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.15) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg,transparent,black 55%); }
.article-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: clamp(60px,8vw,130px); align-items: end; }
.article-hero-copy { max-width: 850px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 32px; color: rgba(255,255,255,.74); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.breadcrumbs a:hover { color: var(--orange); }
.article-hero h1 { max-width: 820px; margin: 0; font-family: var(--serif); font-size: clamp(46px,5vw,72px); line-height: .97; font-weight: 400; letter-spacing: -.042em; text-wrap: balance; }
.article-deck { max-width: 720px; margin: 20px 0 24px; color: rgba(255,255,255,.88); font-family: var(--serif); font-size: clamp(17px,1.55vw,21px); line-height: 1.42; }
.article-byline { display: flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; }
.article-byline .avatar { width: 38px; height: 38px; }
.article-byline p { margin: 0; }
.article-byline span { color: rgba(255,255,255,.78); }

.interview-map { position: relative; min-height: 300px; border: 1px solid rgba(255,255,255,.22); }
.interview-map > p { position: absolute; top: 18px; left: 20px; margin: 0; color: var(--orange); font-size: 8px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.interview-map svg { position: absolute; inset: 42px 0 0; width: 100%; height: calc(100% - 42px); }
.interview-map path, .interview-map circle { vector-effect: non-scaling-stroke; }
.interview-map .sketch-line { fill: none; stroke: rgba(255,255,255,.43); stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 6; }
.interview-map .sketch-ghost { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.interview-map .sketch-accent { fill: none; stroke: var(--orange); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.interview-map .sketch-dot { fill: var(--orange); stroke: none; }
.interview-map .sketch-ring { fill: none; stroke: rgba(255,255,255,.24); stroke-width: 1; }
.map-node { position: absolute; z-index: 1; display: grid; gap: 3px; place-items: center; width: 76px; height: 76px; background: var(--grad-deep); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-family: var(--serif); font-size: 14px; }
.map-node span { color: var(--orange); font-family: var(--sans); font-size: 8px; font-weight: 800; }
.map-node-one { top: 62px; left: 22px; }
.map-node-two { top: 82px; right: 36px; }
.map-node-three { bottom: 32px; left: 72px; }
.map-node-four { right: 18px; bottom: 18px; background: var(--coral); color: var(--ink); border-color: var(--coral); }
.map-node-four span { color: var(--ink); }

.article-layout { display: grid; grid-template-columns: 190px minmax(0,760px) minmax(210px,260px); gap: clamp(42px,5vw,78px); align-items: start; padding-top: 78px; padding-bottom: 120px; }
.article-toc, .article-sidebar > div { position: sticky; top: 142px; }
.article-toc > p { margin: 0 0 18px; color: var(--coral-text); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.article-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); counter-reset: toc; }
.article-toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.article-toc a { display: grid; grid-template-columns: 25px 1fr; gap: 7px; padding: 13px 0; color: var(--muted); font-family: var(--serif); font-size: 13px; line-height: 1.3; }
.article-toc a::before { content: "0" counter(toc); color: var(--coral-text); font-family: var(--sans); font-size: 8px; font-weight: 800; }
.article-toc a:hover { color: var(--ink); }

.article-copy { min-width: 0; }
.article-lead { margin: 0 0 34px; font-family: var(--serif); font-size: clamp(22px,2.2vw,29px); line-height: 1.45; letter-spacing: -.015em; }
.article-copy section { scroll-margin-top: 135px; margin-top: 76px; }
.article-copy section:first-of-type { margin-top: 62px; }
.section-number { margin: 0 0 15px !important; color: var(--coral-text) !important; font-family: var(--sans) !important; font-size: 9px !important; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.article-copy h2 { margin: 0 0 25px; font-family: var(--serif); font-size: clamp(36px,4vw,54px); line-height: 1.02; font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
.article-copy h3 { margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400; }
.article-copy section > p:not(.section-number), .trademark-note { margin: 0 0 22px; color: #29475c; font-family: var(--serif); font-size: 18px; line-height: 1.75; }
.article-copy blockquote { margin: 34px 0; padding: 10px 0 10px 30px; border-left: 3px solid var(--coral); font-family: var(--serif); font-size: clamp(26px,3vw,38px); line-height: 1.25; }
.article-note { padding: 22px 25px; background: var(--paper-deep); border-left: 3px solid var(--teal); }
.article-note span { color: var(--coral-text); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.article-note p { margin: 8px 0 0; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.article-note a { border-bottom: 1px solid var(--teal); color: var(--ink); }
.article-note a:hover { color: var(--coral-text); }

.interview-ladder { margin: 32px 0; border-top: 1px solid var(--ink); }
.interview-ladder > div { display: grid; grid-template-columns: 78px 155px 1fr; gap: 20px; padding: 23px 0; border-bottom: 1px solid var(--line); align-items: start; }
.interview-ladder span { color: var(--coral-text); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.interview-ladder p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.5; }
.question-funnel { margin: 32px 0; }
.question-funnel div { display: grid; grid-template-columns: 92px 1fr; border-top: 1px solid var(--line); }
.question-funnel div:last-child { border-bottom: 1px solid var(--line); }
.question-funnel dt { padding: 17px 14px 17px 0; color: var(--coral-text); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.question-funnel dd { margin: 0; padding: 17px 0 17px 22px; border-left: 1px solid var(--line); font-family: var(--serif); font-size: 18px; }

.cue-grid { margin: 30px 0; border: 1px solid var(--ink); }
.cue-grid > div { display: grid; grid-template-columns: repeat(4,1fr); }
.cue-grid > div + div { border-top: 1px solid var(--line); }
.cue-grid strong, .cue-grid span { padding: 15px 13px; border-right: 1px solid var(--line); }
.cue-grid strong:last-child, .cue-grid span:last-child { border-right: 0; }
.cue-grid strong { background: var(--grad-deep); color: var(--white); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.cue-grid span { color: var(--muted); font-family: var(--serif); font-size: 13px; line-height: 1.4; }
.pull-quote { margin: 40px 0; padding: 35px; background: var(--grad-deep); color: var(--white); }
.pull-quote p { margin: 0; font-family: var(--serif); font-size: clamp(27px,3.2vw,42px); line-height: 1.18; }
.pull-quote p::before { content: "“"; color: var(--coral); }

.judgment-loop { display: grid; grid-template-columns: repeat(3,1fr); margin: 34px 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.judgment-loop > div { min-height: 150px; padding: 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.judgment-loop span { color: var(--coral-text); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.judgment-loop h3 { margin: 26px 0 8px; font-size: 23px; }
.judgment-loop p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 1.48; }
.judgment-loop > div:last-child { background: var(--grad-deep); color: var(--white); }
.judgment-loop > div:last-child span { color: var(--orange); }
.judgment-loop > div:last-child p { color: rgba(255,255,255,.85); }

.guide-bridge { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 34px 0; }
.guide-bridge a { min-height: 180px; padding: 24px; background: var(--paper-deep); border-top: 2px solid var(--teal); transition: transform .2s ease, background .2s ease; }
.guide-bridge a:last-child { border-color: var(--coral); }
.guide-bridge span { color: var(--coral-text); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.guide-bridge h3 { margin: 42px 0 0; font-size: 26px; line-height: 1.08; }
.guide-bridge a:hover { background: var(--white); transform: translateY(-3px); }

.article-list { margin: 30px 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.article-list li { padding: 19px 0 19px 34px; border-bottom: 1px solid var(--line); color: #29475c; font-family: var(--serif); font-size: 17px; line-height: 1.55; }
.article-list li::marker { color: var(--coral); }
.article-list li::before { content: "→"; float: left; margin-left: -34px; color: var(--coral-text); font-family: var(--sans); }
.final-check { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.final-check label { display: grid; grid-template-columns: 20px 1fr; gap: 13px; padding: 18px 0; border-bottom: 1px solid var(--line); color: #29475c; font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.final-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--coral); }

.article-copy .resource-cta { margin-top: 82px; padding: clamp(30px,5vw,52px); background: var(--grad-sky); }
.resource-cta h2 { max-width: 620px; }
.article-copy .resource-cta > p:not(.eyebrow) { color: var(--ink); line-height: 1.55; }
.resource-cta > a { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 17px 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.resource-cta > a:hover span { transform: translate(3px,-3px); }
.resource-cta small { display: block; margin-top: 18px; font-size: 10px; line-height: 1.5; }
.sources ol { margin: 0; padding-left: 20px; }
.sources li { margin: 12px 0; padding-left: 7px; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.45; }
.sources a { border-bottom: 1px solid var(--line); }
.sources a:hover { color: var(--coral-text); }
.article-copy .trademark-note { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.clinical-alert { margin: 30px 0; padding: 20px 24px; background: #eaf6fe; border-left: 3px solid var(--coral); color: var(--ink); }
.clinical-alert strong { display: block; margin-bottom: 7px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.clinical-alert p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.55; }
.related-reading > a { position: relative; display: block; padding: 32px 70px 32px 30px; background: var(--paper-deep); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.related-reading > a > span { color: var(--coral-text); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.related-reading h2 { max-width: 620px; margin: 13px 0 0; font-size: clamp(30px,3.5vw,44px); }
.related-reading b { position: absolute; top: 50%; right: 30px; color: var(--coral-text); font-size: 24px; transform: translateY(-50%); transition: transform .2s ease; }
.related-reading > a:hover b { transform: translate(5px,-50%); }

.article-sidebar > div { padding: 25px 22px; background: var(--paper-deep); border-top: 3px solid var(--coral); }
.article-sidebar h2 { margin: 0 0 22px; font-family: var(--serif); font-size: 28px; font-weight: 400; }
.article-sidebar ol { margin: 0; padding: 0; list-style: none; }
.article-sidebar li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 14px; line-height: 1.4; }
.article-sidebar li span { color: var(--coral-text); font-family: var(--sans); font-size: 8px; font-weight: 800; }

@media (max-width: 1100px) {
  .article-layout { grid-template-columns: minmax(0,1fr) 230px; }
  .article-toc { display: none; }
}

@media (max-width: 850px) {
  .article-hero { padding: 42px 0 38px; }
  .article-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .article-hero-copy { max-width: 720px; }
  .article-hero h1 { max-width: 720px; font-size: clamp(44px,8vw,62px); }
  .article-deck { max-width: 650px; }
  .interview-map { display: grid; grid-template-columns: repeat(4,1fr); width: 100%; min-height: 0; padding-top: 32px; }
  .interview-map > p { top: 12px; left: 14px; }
  .interview-map svg { display: none; }
  .map-node { position: static; width: auto; height: auto; min-height: 66px; padding: 12px 8px; background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.22); border-radius: 0; font-size: 13px; }
  .map-node + .map-node { border-left: 1px solid rgba(255,255,255,.22); }
  .map-node-four { background: var(--coral); color: var(--ink); }
  .article-layout { display: block; padding-top: 60px; padding-bottom: 80px; }
  .article-sidebar { display: none; }
}

@media (max-width: 560px) {
  .article-hero { padding: 34px 0 30px; }
  .article-hero h1 { font-size: clamp(40px,12vw,50px); }
  .breadcrumbs { margin-bottom: 25px; }
  .article-deck { margin-block: 17px 20px; font-size: 17px; }
  .article-byline .avatar { width: 34px; height: 34px; }
  .interview-map { grid-template-columns: 1fr 1fr; }
  .map-node { min-height: 58px; }
  .map-node + .map-node { border-left: 0; }
  .map-node:nth-child(odd) { border-left: 1px solid rgba(255,255,255,.22); }
  .map-node:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.22); }
  .article-copy section { margin-top: 60px; }
  .article-copy h2 { font-size: 36px; }
  .interview-ladder > div { grid-template-columns: 68px 1fr; }
  .interview-ladder p { grid-column: 2; }
  .cue-grid { border: 0; }
  .cue-grid > div:first-child { display: none; }
  .cue-grid > div:last-child { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .cue-grid > div + div { border-top: 0; }
  .cue-grid span { position: relative; padding: 34px 16px 15px; background: var(--paper-deep); border: 0; border-left: 2px solid var(--teal); font-size: 15px; }
  .cue-grid span::before { content: attr(data-label); position: absolute; top: 12px; left: 16px; color: var(--coral-text); font-family: var(--sans); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .judgment-loop { grid-template-columns: 1fr 1fr; }
  .judgment-loop > div { min-height: 0; padding: 19px 16px; }
  .judgment-loop h3 { margin-top: 20px; }
  .guide-bridge { grid-template-columns: 1fr; }
  .guide-bridge a { min-height: 145px; }
  .guide-bridge h3 { margin-top: 30px; }
  .question-funnel div { grid-template-columns: 75px 1fr; }
  .question-funnel dd { font-size: 16px; }
  .article-copy .resource-cta { margin-inline: -18px; }
  .resource-cta > a { line-height: 1.4; }
  .related-reading > a { padding: 26px 55px 26px 22px; }
  .related-reading b { right: 20px; }
}

/* Publication headlines use the same sans serif voice as the newsroom. */
.article-hero h1 { font-family: var(--sans); font-size: clamp(38px,4.4vw,62px); font-weight: 750; line-height: 1.06; letter-spacing: -.04em; }
.article-copy h2, .article-copy h3 { font-family: var(--sans); font-weight: 700; line-height: 1.15; }
.article-copy h2 { font-size: clamp(30px,3.2vw,43px); }
.article-hero { padding-block: 42px; }
.article-hero-grid:has(.article-hero-media) { grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr); gap: clamp(32px,4vw,64px); align-items: center; }
.article-hero-media { --guide-image-ratio: 16/10; min-width: 0; width: 100%; margin: 0; align-self: center; }
/* The frame controls layout; portrait image dimensions never set the hero height.
   Critical frame geometry is also in the markup for stylesheet loading/caching. */
.article-image-frame { position: relative; aspect-ratio: var(--guide-image-ratio,16/9); overflow: hidden; }
.article-image-frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Older cached guides have a direct image instead of a frame. Keep those safe too. */
.article-hero-media > img { display: block; width: 100%; height: auto; aspect-ratio: var(--guide-image-ratio,16/10); object-fit: cover; }
/* Feather only the perimeter: the photo stays sharp and the actual hero shows through. */
.article-image-frame, .article-hero-media > img {
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 10%,#000 84%,transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 10%,#000 84%,transparent);
  mask-composite: intersect;
}
.article-hero-media .care-photo { object-position: center 65%; }
.article-hero-media figcaption { margin: 10px 12% 0; color: rgba(255,255,255,.88); font-size: 13px; line-height: 1.5; }
@media (max-width: 850px) {
  .article-hero-grid:has(.article-hero-media) { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .article-hero-media { --guide-image-ratio: 16/9; max-width: 600px; justify-self: center; }
}
@media (max-width: 760px) {
  .article-hero h1 { font-size: clamp(34px,8vw,47px); }
  .article-hero { padding-block: 30px; }
}
@media (max-width: 400px) {
  .judgment-loop { grid-template-columns: minmax(0,1fr); }
}