/* Northwire — Bloomberg-styled prototype. Light is default; dark via
   html[data-theme="dark"] variable overrides at the bottom. */
:root{
  --ink:#000; --paper:#fff; --rule:#dcdcdc; --rule-dark:#000; --band:#f6f6f4;
  --sub:#57606a; --accent:#2800d7; --up:#0a7f3f; --down:#c8102e;
  --body:#333; --body2:#444; --body3:#555; --num:#c9c9c9;
  --sans:'Archivo',-apple-system,'Helvetica Neue',sans-serif;
  --mono:'IBM Plex Mono',Menlo,monospace;
  --serif:'Source Serif 4',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover .hl, a.hl:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* ── utility bar ── */
.util{background:#000;color:#fff;font-size:11.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:30px}
.util .l{display:flex;gap:18px;color:#9aa0a6}
.util .l b{color:#fff;font-weight:600}
.util .r{display:flex;gap:16px;align-items:center}
.util .r a{color:#9aa0a6}
.util .r a:hover{color:#fff}
.util .sub{background:var(--accent);color:#fff;font-weight:700;padding:4px 12px;font-size:11px;letter-spacing:.02em}

/* ── masthead ── */
.masthead{border-bottom:2px solid var(--rule-dark);background:var(--paper);position:sticky;top:0;z-index:50}
.masthead .wrap{display:flex;align-items:center;gap:34px;height:58px}
.brand{font-weight:800;font-size:25px;letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--accent)}
nav.sections{display:flex;gap:22px;font-size:13.5px;font-weight:600;overflow-x:auto;scrollbar-width:none}
nav.sections::-webkit-scrollbar{display:none}
nav.sections a{white-space:nowrap;padding:6px 0;border-bottom:2px solid transparent}
nav.sections a:hover{border-bottom-color:var(--accent);color:var(--accent)}
nav.sections a.on{border-bottom-color:var(--rule-dark)}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.search{font-size:17px;color:#666;cursor:pointer}
.theme-btn{background:transparent;border:1px solid var(--rule);color:var(--sub);width:32px;height:32px;
  font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.theme-btn:hover{border-color:var(--sub);color:var(--ink)}
.theme-btn:focus-visible,nav.sections a:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── ticker ── */
.ticker{border-bottom:1px solid var(--rule);background:var(--paper);overflow:hidden;font-family:var(--mono);font-size:12.5px}
.ticker-track{display:flex;width:max-content;animation:tick 55s linear infinite;padding:9px 0}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ti{display:inline-flex;gap:8px;padding:0 22px;border-right:1px solid var(--rule);white-space:nowrap}
.ti b{font-weight:500}
.up{color:var(--up)} .down{color:var(--down)}
@media (prefers-reduced-motion: reduce){.ticker-track{animation:none}.ticker{overflow-x:auto}}

/* ── kickers / labels / chips ── */
.kick{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.kick.neg{color:var(--down)}
.kick.mat{background:var(--accent);color:#fff;padding:2px 7px;display:inline-block}
.time{font-family:var(--mono);font-size:11px;color:var(--sub)}
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border:1px solid var(--rule);color:var(--sub)}
.chip.rating-material-pos,.chip.rating-game-changer{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.rating-material-neg{background:var(--down);border-color:var(--down);color:#fff}
.chip.rating-routine-pos{color:var(--accent);border-color:var(--accent)}
.chip.rating-routine-neg{color:var(--down);border-color:var(--down)}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;border-top:2px solid var(--rule-dark);padding:10px 0 18px;margin-top:44px}
.sect-head h2{font-size:20px;font-weight:800;letter-spacing:-.01em}
.sect-head a{font-size:12.5px;font-weight:600;color:var(--accent)}

/* ── lead package: Bloomberg 3-panel (river | hero | latest) ── */
.home-grid{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,6fr) minmax(0,3fr);margin-top:26px}
.center{padding:0 34px}
.leftcol{border-right:1px solid var(--rule);padding-right:26px;display:flex;flex-direction:column}
.lp-item{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
.lp-item:first-of-type{padding-top:16px}
.lp-item .kick{display:block;margin-bottom:6px;font-size:10px}
.lp-item h4{font-size:15px;line-height:1.26;font-weight:700;letter-spacing:-.008em;margin-bottom:6px}
.lp-item .time{display:block}
/* "The Brief" — daily recap slot (placeholder linking to The Desk for now) */
.brief{display:block;background:var(--band);border-top:3px solid var(--accent);padding:15px 15px 16px;margin-bottom:6px}
.brief-tag{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.brief-line{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.38;margin:8px 0 10px;color:var(--ink)}
.brief-cta{font-size:11.5px;font-weight:700;color:var(--accent)}
.brief:hover .brief-cta{text-decoration:underline;text-underline-offset:3px}
.lead{padding:0}
.lead .art{aspect-ratio:16/8.6;overflow:hidden;background:#111}
.lead .art img{transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.lead:hover .art img{transform:scale(1.025)}
.lead h1{font-size:38px;line-height:1.06;font-weight:800;letter-spacing:-.02em;margin:16px 0 11px;max-width:20ch}
.lead .dek{font-size:16.5px;line-height:1.5;color:var(--body);max-width:62ch}
.lead .meta{display:flex;gap:14px;align-items:center;margin-top:12px}
.lead-support{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:30px;padding-top:26px;border-top:1px solid var(--rule)}
.sup .art{aspect-ratio:16/9;overflow:hidden;margin-bottom:12px;background:#111}
.sup h3{font-size:19.5px;line-height:1.16;font-weight:700;letter-spacing:-.012em;margin:8px 0 8px}
.sup p{font-size:13.5px;line-height:1.5;color:var(--body2)}
.sup .meta{margin-top:8px}

/* ── latest rail ── */
.rail{border-left:1px solid var(--rule);padding-left:26px}
.rail-head{display:flex;align-items:center;gap:9px;padding-bottom:14px;border-bottom:2px solid var(--rule-dark)}
.rail-head .dot{width:8px;height:8px;border-radius:50%;background:var(--down);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.rail-head h2{font-size:15px;font-weight:800;letter-spacing:.02em}
.rail ul{list-style:none}
.rail li{padding:13px 0;border-bottom:1px solid var(--rule)}
.rail .time{display:block;margin-bottom:5px}
.rail h4{font-size:14px;line-height:1.32;font-weight:600}
.rail .sym{font-family:var(--mono);font-size:10.5px;color:var(--accent);font-weight:500;margin-left:6px}

/* ── analysis band ── */
.analysis{background:var(--band);border-top:2px solid var(--rule-dark);margin-top:48px}
.analysis .inner{padding:30px 0 36px}
.analysis .label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:22px;display:flex;gap:10px;align-items:center}
.analysis .label i{font-style:normal;background:var(--rule-dark);color:var(--paper);padding:3px 8px}
.an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.an .kick{margin-bottom:10px;display:block}
.an h3{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.28;font-weight:600;letter-spacing:-.005em}
.an .meta{margin-top:10px}
.an + .an{border-left:1px solid var(--rule);padding-left:34px;margin-left:-17px}

/* ── section modules ── */
.mod-grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,5.6fr);gap:40px}
.mod-grid.flip{grid-template-columns:minmax(0,5.6fr) minmax(0,4.4fr)}
.mod-lead .art{aspect-ratio:16/9.4;overflow:hidden;margin-bottom:14px;background:#111}
.mod-lead h3{font-size:24px;line-height:1.12;font-weight:800;letter-spacing:-.015em;margin:6px 0 9px}
.mod-lead p{font-size:14px;line-height:1.52;color:var(--body2);max-width:56ch}
.mod-lead .meta{margin-top:9px}
.mod-list{list-style:none}
.mod-list li{display:grid;grid-template-columns:1fr auto;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule)}
.mod-list li:first-child{padding-top:2px}
.mod-list h4{font-size:16.5px;line-height:1.28;font-weight:700;letter-spacing:-.008em;margin:4px 0 6px}
.mod-list p{font-size:13px;line-height:1.45;color:var(--body3);max-width:58ch}
.mod-list .num{font-family:var(--mono);font-size:26px;color:var(--num);font-weight:400;padding-top:2px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px}

/* ── video band ── */
.video-band{background:#000;color:#fff;margin-top:52px}
.video-band .inner{padding:34px 0 40px}
.video-band .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.video-band .head h2{font-size:20px;font-weight:800}
.video-band .head h2 span{color:var(--down)}
.video-band .head a{font-size:12.5px;color:#9aa0a6;font-weight:600}
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vid .thumb{aspect-ratio:16/9;overflow:hidden;position:relative;background:#222}
.vid .thumb img{opacity:.92;transition:opacity .3s, transform .6s}
.vid:hover .thumb img{opacity:1;transform:scale(1.03)}
.vid .play{position:absolute;left:10px;bottom:10px;width:34px;height:34px;background:var(--down);display:flex;align-items:center;justify-content:center}
.vid .play::after{content:"";border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff;margin-left:2px}
.vid .dur{position:absolute;right:8px;bottom:10px;font-family:var(--mono);font-size:10.5px;background:rgba(0,0,0,.75);padding:2px 6px}
.vid h4{font-size:14.5px;line-height:1.3;font-weight:600;margin-top:12px}
.vid .src{font-size:11.5px;color:#9aa0a6;margin-top:6px;font-weight:500}

/* ── markets module ── */
.mkt-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}
.mkt{padding:16px 18px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.mkt:nth-child(4n+1){padding-left:0}
.mkt:nth-child(4n){border-right:none}
.mkt .n{font-size:12px;font-weight:600;color:var(--body)}
.mkt .v{font-family:var(--mono);font-size:19px;margin-top:6px}
.mkt .c{font-family:var(--mono);font-size:12px;margin-top:3px}

/* ── ARTICLE (Bloomberg-style) ─────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:90}
.art-grid{display:grid;grid-template-columns:minmax(0,7.2fr) minmax(0,3fr);margin-top:34px}
/* Section + analysis pages: main column + a persistent LATEST rail. */
.lead-grid{display:grid;grid-template-columns:minmax(0,7.2fr) minmax(0,3fr);align-items:start}
.lead-grid > div:first-child{min-width:0}
.lead-grid .rail{position:sticky;top:78px}
.art-main{padding-right:56px;max-width:780px}
.art-eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.art-main h1{font-size:42px;line-height:1.05;font-weight:800;letter-spacing:-.022em;max-width:22ch}
.art-dek{font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.42;font-weight:500;
  color:var(--body);margin-top:16px;max-width:52ch}
.byline{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:13px 0;margin:24px 0 6px;font-size:12.5px}
.byline .who{font-weight:700}
.byline .who span{color:var(--accent)}
.byline .px{font-family:var(--mono)}
.art-hero{margin:24px 0 8px}
.art-hero .im{aspect-ratio:16/8.4;overflow:hidden;background:#111}
.art-hero figcaption{font-size:11.5px;color:var(--sub);padding-top:8px;border-bottom:1px solid var(--rule);padding-bottom:12px}
/* article price chart (ported from the original site, Bloomberg-dressed) */
.chartwrap{margin:26px 0 6px;border-bottom:1px solid var(--rule);padding-bottom:18px}
/* Inside the article body the next crosshead brings its own rule — avoid doubling. */
.art-body .chartwrap{border-bottom:none;margin:34px 0 30px;padding-bottom:0}
.chart-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.crosshead-inline{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.rangebtns{display:flex;gap:6px}
.rangebtns button{background:transparent;border:1px solid var(--rule);color:var(--sub);
  font:600 11.5px var(--sans);padding:5px 12px;cursor:pointer}
.rangebtns button:hover{border-color:var(--sub);color:var(--ink)}
.rangebtns button.active{background:var(--rule-dark);color:var(--paper);border-color:var(--rule-dark)}
#pricechart{height:320px}
@media(max-width:760px){#pricechart{height:260px;touch-action:pan-y}.rangebtns{display:none}}
.art-body{margin-top:26px}
.art-body .crosshead{font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  border-top:2px solid var(--rule-dark);padding-top:12px;margin:34px 0 14px}
.art-body .crosshead:first-child{margin-top:0}
.art-body p, .art-body li{font-family:var(--serif);font-size:17.5px;line-height:1.68;color:var(--ink);margin:0 0 18px}
.art-body ul,.art-body ol{padding-left:22px;margin-bottom:18px}
.art-body h3{font-family:var(--sans);font-size:15px;font-weight:800;margin:26px 0 10px}
.art-body a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.art-body strong{font-weight:700}
.src-link{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--accent);
  border:1px solid var(--rule);padding:9px 14px;margin-top:8px}
.src-link:hover{border-color:var(--accent)}
.backlink{font-size:12.5px;font-weight:700;color:var(--accent)}
.backlink:hover{text-decoration:underline;text-underline-offset:3px}
/* Original press release: verbatim text, preserved line breaks, serif measure. */
.release-body{white-space:pre-wrap;font-family:var(--serif);font-size:16px;line-height:1.66;
  color:var(--ink);margin-top:26px;border-top:2px solid var(--rule-dark);padding-top:22px}
.more-co{margin-top:44px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.more-grid .mi{border-top:1px solid var(--rule);padding-top:12px}
.more-grid h4{font-size:15px;line-height:1.3;font-weight:700;margin:6px 0}
/* article right rail reuses .rail */
.rail .sticky{position:sticky;top:78px}

/* ── endless scroll stream ── */
#stream-sentinel{height:1px}
.next-divider{display:flex;align-items:center;gap:16px;margin:54px 0 34px;
  border-top:4px solid var(--rule-dark);padding-top:12px}
.next-divider span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.next-divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.stream-item .rail-empty{border-left:1px solid var(--rule)}
.stream-inter{margin:48px 0 0}
.stream-inter.analysis{border-bottom:2px solid var(--rule-dark)}
.an-grid-3{grid-template-columns:repeat(3,1fr)}
.stream-end{border-top:4px solid var(--rule-dark);margin-top:56px;text-align:center}
.stream-end .inner{padding:44px 20px 10px}
.stream-end .cap{font-size:24px;font-weight:800;letter-spacing:-.01em}
.stream-end p{color:var(--sub);font-size:13.5px;margin-top:8px}
.stream-end nav{display:flex;gap:14px;justify-content:center;margin-top:18px}
.stream-end nav a{font-size:12.5px;font-weight:700;color:var(--accent);border:1px solid var(--rule);padding:9px 16px}
.stream-end nav a:hover{border-color:var(--accent)}
@media(max-width:1000px){.an-grid-3{grid-template-columns:1fr}.stream-item .rail-empty{display:none}}

/* ── footer ── */
footer{background:#000;color:#8a9199;margin-top:56px;font-size:12.5px}
footer .inner{padding:34px 0;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .brand{color:#fff;font-size:19px}
footer nav{display:flex;gap:20px}
footer a:hover{color:#fff}

/* ── entrance ── */
@media (prefers-reduced-motion: no-preference){
  .lead,.rail,.sup,.art-main{animation:rise .55s ease-out both}
  .sup:nth-child(1){animation-delay:.08s}.sup:nth-child(2){animation-delay:.16s}
  .rail{animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ── responsive ── */
@media(max-width:1000px){
  .home-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:0}
  .home-grid .rail{grid-column:1 / -1;border-left:none;padding-left:0;margin-top:34px}
  .art-grid{grid-template-columns:1fr}
  .lead-grid{grid-template-columns:1fr}
  .lead-grid .rail{position:static;border-left:none;padding-left:0;margin-top:34px}
  .lead-grid > div:first-child{padding-right:0 !important}
  .center{padding:0 0 0 34px}
  .rail{border-left:none;padding-left:0;margin-top:34px}
  .lead,.art-main{padding-right:0}
  .lead h1{font-size:33px}
  .art-main h1{font-size:31px}
  .an-grid{grid-template-columns:1fr 1fr;gap:26px}
  .an + .an{border-left:none;padding-left:0;margin-left:0}
  .mod-grid,.mod-grid.flip,.two-col{grid-template-columns:1fr}
  .vid-grid,.more-grid{grid-template-columns:1fr 1fr}
  .mkt-grid{grid-template-columns:1fr 1fr}
  .mkt:nth-child(odd){padding-left:0}.mkt{border-right:none}
}
@media(max-width:560px){
  .home-grid{grid-template-columns:1fr}
  .leftcol{border-right:none;padding-right:0;order:2;margin-top:30px;
    border-top:2px solid var(--rule-dark);padding-top:8px}
  .center{padding:0;order:1}
  .home-grid .rail{order:3}
  .lead-support,.an-grid,.vid-grid,.more-grid{grid-template-columns:1fr}
  .util .l span:nth-child(2){display:none}
  nav.sections{display:none}
}

/* ── dark theme ── */
html[data-theme="dark"]{
  --ink:#e8eaed; --paper:#0e0e11; --rule:#26262c; --rule-dark:#e8eaed; --band:#16161a;
  --sub:#9aa0a6; --accent:#918bff; --up:#3fb968; --down:#ff6363;
  --body:#c7cbd1; --body2:#b6bac1; --body3:#a2a7ae; --num:#3f3f46;
}
html[data-theme="dark"] .util{border-bottom:1px solid #26262c}
html[data-theme="dark"] .video-band{border-top:1px solid #26262c}
html[data-theme="dark"] .art img,
html[data-theme="dark"] .art-hero img,
html[data-theme="dark"] .vid .thumb img{filter:brightness(.85)}
html[data-theme="dark"] .kick.mat{color:#0e0e11}
html[data-theme="dark"] .util .sub{color:#0e0e11}
html[data-theme="dark"] .chip.rating-material-pos,
html[data-theme="dark"] .chip.rating-game-changer{color:#0e0e11}
html[data-theme="dark"] .chip.rating-material-neg{color:#0e0e11}