/* Mission80: long-form article layout on top of the shared chart styles. */
.article-page{--serif:Georgia,"Iowan Old Style","Times New Roman",serif;--paper:#fcfbf8;background:var(--paper)}
.article-page .hero{height:150px}
.article-page .hero-scene:after{background:linear-gradient(0deg,var(--paper),transparent 40%)}
.article-page .hero-content{padding-top:28px}
.brand{display:inline-block;margin-top:14px;font-size:30px;font-weight:770;letter-spacing:-1.2px;color:var(--ink);text-decoration:none}
.brand:hover{color:var(--orange)}

#story{padding-bottom:20px}
.story-head{max-width:1080px;margin:10px auto 34px}

.prose{max-width:1080px;margin:0 auto}

.figure{margin:34px auto 50px}
.figure.narrow{max-width:1080px}
.figure.wide{max-width:1080px}
.figure .panel,.figure.panel{box-shadow:none;border-color:#e8e4dc}
.panel h3{font-size:19px;line-height:1.35;letter-spacing:-.5px;margin:0;font-weight:710}
.figure .mini-chart{padding:8px 18px 4px}

/* Big-number breaker between the lede and the first chapter. */
.stat-break{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;margin:46px auto 10px;border-top:2px solid #121212;border-bottom:1px solid #d9d4ca}
.stat{padding:28px 26px 30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.stat+.stat{border-left:1px solid #e3ded4}
.stat-label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#6c6c6c;font-weight:650}
.stat-value{font-size:96px;line-height:1;font-weight:760;letter-spacing:-4px;margin:16px 0 6px;color:#121212;font-variant-numeric:tabular-nums}
.stat-value.hot{color:#cc350f}
.stat-unit{font-family:var(--serif);font-size:19px;color:#333}
.stat-note{font-size:12px;color:#7a7a7a;margin-top:10px;line-height:1.5;max-width:240px}
.stat-break .primary-unit{font-size:19px;color:#333;font-weight:400;letter-spacing:0}

/* Re-flow dashboard groups that the article splits apart. */
.figure.pulse{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
.figure.profile{display:block}
.figure.profile .profile-peaks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px}
.figure.profile .peak-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.record-side-by-side{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.record-side-by-side .hottest-list{display:block}
.waves-panel .wave-list{padding:12px 24px 18px}

.about{max-width:1080px;margin:40px auto 0}
.about .chapter{margin:70px 0 22px}
.about .disclosure-body{font-size:13px}
.about .methodology-grid p{font-size:12.5px}
.baycast-section{max-width:1080px;margin:40px auto 0}

@media(max-width:900px){
  .headline{font-size:40px}
  .stat-value{font-size:72px}
  .figure.pulse,.record-side-by-side,.figure.profile .profile-peaks{grid-template-columns:1fr}
}
@media(max-width:760px){
  .article-page .hero{height:120px}
  .story-head{text-align:left}
  .headline{font-size:34px;letter-spacing:-.6px}
  .dek{font-size:18px}
  .prose p{font-size:18px;line-height:1.6}
  .chapter{font-size:25px;margin-top:48px}
  .stat-break{grid-template-columns:1fr}
  .stat+.stat{border-left:0;border-top:1px solid #e3ded4}
  .stat{padding:22px 10px}
  .stat-value{font-size:68px}
  .figure.profile .peak-cards{grid-template-columns:1fr}
  .figure{margin:26px auto 40px}
}
/* Baycast live view 30% taller than the dashboard's (460px desktop, 380px phone). */
.article-page .baycast-frame{height:598px}
@media(max-width:760px){.article-page .baycast-frame{height:494px}}
/* Heat waves: date over details, matching the hottest-days rows. */
.waves-panel .wave-list{margin-top:10px;padding:0 24px 8px}
.waves-panel .wave-list li{flex-direction:column;align-items:flex-start;gap:1px;padding:5px 0;font-size:12px}
.waves-panel .wave-list strong{font-size:13px}
.waves-panel .wave-list span{padding-left:18px}
.record-side-by-side{align-items:stretch}
/* The article shows only the top four of each list. */
.record-side-by-side .hottest-list li:nth-child(n+5),.record-side-by-side .wave-list li:nth-child(n+5){display:none}

/* Story type: sans headlines, serif body, bold lead-ins and highlighted numbers. */
.headline{font-family:var(--font);font-size:64px;line-height:1.02;font-weight:800;letter-spacing:-2.6px;margin:0 0 20px;color:#111;max-width:980px;text-wrap:balance}
.headline span{color:#cc350f}
.dek{font-family:var(--font);font-size:21px;line-height:1.5;color:#4b5563;margin:0;max-width:760px;text-wrap:pretty}
.prose{max-width:1080px;margin:0 auto}
.prose:after{content:"";display:block;clear:both}
.prose p{font-family:var(--serif);font-size:19px;line-height:1.7;color:#222;margin:0 0 20px;max-width:700px}
.prose strong{color:#111;font-weight:700}
.prose mark{background:linear-gradient(transparent 58%,#ffd6c2 58%);color:#111;font-weight:700;padding:0 2px}
.hook{font-family:var(--font)!important;font-size:46px!important;line-height:1.1!important;font-weight:800;letter-spacing:-1.6px;color:#111!important;max-width:900px!important;margin:6px 0 14px!important;text-wrap:balance}
.hook span{color:#cc350f;display:inline-block}
.hook-sub{font-family:var(--font)!important;font-size:21px!important;color:#4b5563!important;max-width:720px!important}
.hook-sub strong{color:#cc350f!important}
.chapter-kicker{font-family:var(--font)!important;font-size:12px!important;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:#b63412!important;margin:72px 0 10px!important;display:flex;align-items:center;gap:10px}
.chapter-kicker span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#cc350f;color:#fff;font-size:11px;letter-spacing:0}
.chapter{font-family:var(--font);font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-1.3px;color:#111;margin:0 0 16px;max-width:820px;text-wrap:balance}
.lead-in{font-family:var(--font)!important;font-size:24px!important;line-height:1.4!important;font-weight:650;letter-spacing:-.4px;color:#1d2b44!important;max-width:760px!important}
.pull{clear:both;margin:30px 0 34px;padding:4px 0 4px 24px;border-left:5px solid #cc350f;font-family:var(--font);font-size:30px;line-height:1.25;font-weight:750;letter-spacing:-.8px;color:#cc350f;max-width:760px;text-wrap:balance}
.fact{float:right;width:300px;margin:4px 0 20px 40px;background:#fff1e8;border-radius:14px;padding:18px 20px 16px;border:1px solid #ffe0cf}
.fact-label{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:750;color:#b63412;margin-bottom:6px}
.prose .fact p{font-family:var(--font);font-size:17px;line-height:1.4;font-weight:650;color:#3b2417;margin:0;max-width:none}
@media(max-width:1100px){.fact{width:260px;margin-left:28px}}
@media(max-width:900px){.headline{font-size:46px;letter-spacing:-1.6px}.hook{font-size:36px!important}.chapter{font-size:31px}}
@media(max-width:760px){
  .headline{font-size:36px;letter-spacing:-1.1px}
  .dek,.hook-sub{font-size:18px!important}
  .hook{font-size:30px!important;letter-spacing:-.8px}
  .chapter{font-size:27px;letter-spacing:-.7px}
  .chapter-kicker{margin-top:52px!important}
  .lead-in{font-size:20px!important}
  .prose p{font-size:18px}
  .pull{font-size:23px;padding-left:16px}
  .fact{float:none;width:auto;margin:6px 0 22px}
}
/* News clippings: real headlines that bring the record days to life. */
.clips{clear:both;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:900px;margin:8px 0 30px}
.clip{display:block;background:#fff;border:1px solid #e8e4dc;border-left:4px solid #cc350f;border-radius:10px;padding:16px 20px 18px;text-decoration:none;color:inherit;box-shadow:0 6px 18px #3b241712;transform:rotate(-.5deg);transition:transform .2s,box-shadow .2s}
.clip.tilt{transform:rotate(.6deg)}
.clip:hover{transform:rotate(0) translateY(-2px);box-shadow:0 10px 24px #3b24171f;color:inherit}
.clip-source{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:#b63412;margin-bottom:8px}
.clip-head{display:block;font-family:var(--font);font-size:19px;line-height:1.3;font-weight:750;letter-spacing:-.3px;color:#111}
.clip-quote{display:block;margin-top:10px;font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.5;color:#555}
.prose p a{color:#b63412;font-weight:600}
@media(prefers-reduced-motion:reduce){.clip,.clip.tilt{transform:none;transition:none}}
@media(max-width:760px){.clip,.clip.tilt{transform:none}.clip-head{font-size:17px}}
/* Wide desktop: let text use the column instead of wrapping early. */
@media(min-width:1101px){
  .headline{max-width:1080px;text-wrap:wrap}
  .dek{max-width:1000px}
  .hook{max-width:1080px!important;text-wrap:wrap}
  .hook span{display:block}
  .hook-sub{max-width:1000px!important}
  .chapter{max-width:1000px;text-wrap:wrap}
  .lead-in{max-width:1080px!important}
  .prose p{max-width:920px}
  .pull{max-width:1080px;text-wrap:wrap}
  .clips{max-width:1080px}
}
/* Callouts sit inside the text measure, so paragraphs wrap tightly around them. */
.prose{--measure:700px}
.prose p{max-width:var(--measure)}
.fact{margin-right:max(0px,calc(100% - var(--measure)))}
@media(min-width:1101px){.prose{--measure:920px}.prose p{max-width:var(--measure)}}
@media(max-width:760px){.fact{margin-right:0}}
/* Display face for the title and subtitle (self-hosted, SIL Open Font License). */
@font-face{font-family:"Bricolage Grotesque";src:url("/mission80/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
.headline{font-family:"Bricolage Grotesque",var(--font);font-size:86px;line-height:.98;font-weight:800;letter-spacing:-3px;font-variation-settings:"opsz" 96;margin-bottom:22px}
.dek{font-family:"Bricolage Grotesque",var(--font);font-size:19px;line-height:1.45;font-weight:500;letter-spacing:-.1px;color:#6b7280;font-variation-settings:"opsz" 14}
@media(max-width:1100px){.headline{font-size:68px;letter-spacing:-2.4px}}
@media(max-width:760px){.headline{font-size:46px;letter-spacing:-1.5px;line-height:1}.dek{font-size:16px}}
/* Key numbers: bold orange text, no highlighter band. */
.prose mark{background:none;color:#b63412;font-weight:700;padding:0}
/* Slightly larger title; on wide screens it may run past the text column to stay on two lines. */
.headline{font-size:92px;letter-spacing:-3.3px;text-wrap:balance}
@media(min-width:1300px){.headline{max-width:none;margin-right:-100px;text-wrap:wrap}}
@media(max-width:1100px){.headline{font-size:74px;letter-spacing:-2.6px}}
@media(max-width:760px){.headline{font-size:50px;letter-spacing:-1.6px}}
/* Peak cards: one-line subtitles; on phones the three merge into one compact card. */
.figure.profile .profile-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){
  .figure.profile .profile-peaks,.figure.profile .peak-cards{display:block;gap:0}
  .figure.profile .profile-peaks{background:#fff;border:1px solid #e8e4dc;border-radius:12px;overflow:hidden}
  .figure.profile .profile-stat{display:grid;grid-template-columns:104px 1fr;grid-template-areas:"v k" "v n";align-items:center;column-gap:14px;row-gap:2px;border:0;border-radius:0;box-shadow:none;padding:14px 16px;min-height:0}
  .figure.profile .profile-stat+.profile-stat,.figure.profile .peak-cards{border-top:1px solid #eee9e0}
  .figure.profile .profile-stat .section-kicker{grid-area:k;align-self:end}
  .figure.profile .profile-stat .profile-value{grid-area:v;font-size:40px;margin:0;line-height:1}
  .figure.profile .profile-stat .profile-note{grid-area:n;align-self:start;margin:0;font-size:12px;white-space:normal}
}
@media(max-width:760px){
  .figure.profile .profile-stat{grid-template-columns:88px 1fr;column-gap:12px;padding:13px 14px}
  .figure.profile .profile-stat .profile-value{font-size:36px}
  .figure.profile .profile-stat .profile-note{white-space:nowrap;font-size:11.5px}
}
@media(max-width:380px){.figure.profile .profile-stat{grid-template-columns:80px 1fr}.figure.profile .profile-stat .profile-value{font-size:33px}.figure.profile .profile-stat .profile-note{font-size:10.5px}}
/* Subtitle: blockier Barlow (self-hosted, SIL Open Font License) in the site's blue-gray. */
@font-face{font-family:"Barlow";src:url("/mission80/assets/fonts/barlow-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}
.dek{font-family:"Barlow",var(--font);font-weight:500;font-size:21px;letter-spacing:0;color:#587093;font-variation-settings:normal}
@media(max-width:760px){.dek{font-size:17px}}
/* Sources close the page, below the live map. */
.baycast-section{margin-top:60px}
.about .chapter{margin-top:56px}
.clip-cite{display:block;margin-top:4px;font-family:var(--font);font-style:normal;font-size:12px;color:#8a8a8a}