/* ALL DOOM - corporate news layout: black on white, dark navy header.
   Header palette follows the CNBC reference: navy bar, deeper navy nav row. */
:root{
  --navy:#002f6c;
  --navy-deep:#001e5a;
  --navy-ink:#071d39;
  --blue:#005594;
  --blue-dark:#00436f;
  --ink:#101318;
  --muted:#5a6472;
  --rule:#e2e6ec;
  --bg-soft:#f5f7fa;
  --max:1180px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:520px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;color:var(--ink);padding:8px 12px;z-index:20}

/* ---------- masthead ---------- */
.masthead{background:var(--navy);color:#fff}
.masthead a{color:#fff}
.masthead-row{display:flex;align-items:center;gap:16px;padding:9px 24px 8px;flex-wrap:nowrap}
.wordmark{font-size:21px;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;text-decoration:none;line-height:1.1;white-space:nowrap}
.wordmark:hover{text-decoration:none;opacity:.9}
.tagline{margin:0;font-size:12px;color:#9db4d6;flex:1 1 auto;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.masthead-links{display:flex;gap:16px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;white-space:nowrap}
.topics{background:var(--navy-deep);position:relative}
/* One line, always: the row never wraps and each label never breaks. Sized so
   all ten tabs fit a full-width desktop; narrower windows scroll sideways.
   space-between spreads the spare width evenly between tabs, so the first sits
   flush with the left edge of the content column and the last flush with the
   right, with the same 24px inset at each end as the masthead above. */
.topics-row{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:18px;overflow-x:auto;padding:0 24px;scrollbar-width:none}
.topics-row::-webkit-scrollbar{display:none}
.topics-row a{display:block;padding:9px 0 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border-bottom:2px solid transparent}
/* Only below the width where the tabs stop fitting (about 1130px), so the
   fade never tints the right-most tab on a screen that is not scrolling. */
@media (max-width:1120px){
  .topics::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
    background:linear-gradient(to right,rgba(0,30,90,0),var(--navy-deep))}
}
.topics-row a:hover{text-decoration:none;border-bottom-color:rgba(255,255,255,.5)}
.topics-row a.current{border-bottom-color:#fff}

/* ---------- editing bar ---------- */
.editbar{background:#101318;color:#fff;font-size:12px}
.editbar a,.editbar button{color:#fff}
.editbar-row{display:flex;align-items:center;gap:18px;padding:6px 24px}
.editbar span{text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#8fb6e6}
.editbar form{margin:0}
.editbar button{background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline;padding:0}

/* ---------- front page ---------- */
main{padding:26px 0 56px}
.lead-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:40px;padding-bottom:36px;border-bottom:1px solid var(--rule);align-items:start}
.lead a{color:inherit;display:block}
.lead a:hover{text-decoration:none}
.lead a:hover .lead-title{color:var(--blue)}
.thumb{display:block;background:var(--bg-soft) center/cover no-repeat;border-radius:2px}
.thumb-lead{height:300px;margin-bottom:18px}
.kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.lead-title{margin:0 0 12px;font-size:42px;line-height:1.1;letter-spacing:-.02em;font-weight:800}
.lead-dek{margin:0 0 12px;font-size:19px;color:#333c48;line-height:1.5}
.meta{margin:0;font-size:13px;color:var(--muted)}

/* The front page runs the newest article in full, in the left-hand column. */
.home-lead{max-width:100%;margin:0;padding-bottom:0}
.home-lead .thumb-lead{margin-bottom:18px}
.home-lead .story-head{border-bottom:1px solid var(--rule);padding-bottom:18px;margin-bottom:24px}
.home-lead .story-head h1{font-size:40px;line-height:1.1;margin:6px 0 12px}
.home-lead .story-head h1 a{color:inherit}
.home-lead .story-head h1 a:hover{color:var(--blue);text-decoration:none}
.home-lead .story-body{max-width:68ch}
.story-permalink{margin:26px 0 0;font-size:14px;font-weight:600;border-top:1px solid var(--rule);padding-top:16px}
.latest{border-left:1px solid var(--rule);padding-left:32px}
.latest{position:sticky;top:16px;align-self:start}
.rail-head{margin:0 0 14px;font-size:14px;text-transform:uppercase;letter-spacing:.1em;border-bottom:3px solid var(--blue);padding-bottom:8px}
.latest-list{list-style:none;margin:0;padding:0}
.latest-list li{border-bottom:1px solid var(--rule);padding:12px 0}
.latest-list li:last-child{border-bottom:0}
.latest-list a{color:inherit;display:block}
.latest-list a:hover{text-decoration:none}
.latest-list a:hover .latest-title{color:var(--blue)}
.latest-title{display:block;font-weight:700;font-size:16px;line-height:1.35;margin-bottom:4px}
.latest-list .kicker{font-size:11px;margin-bottom:5px}
.latest-list .meta{display:block}

/* ---------- sections ---------- */
.section{padding:36px 0 8px;border-bottom:1px solid var(--rule)}
.section:last-of-type{border-bottom:0}
.section-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;border-top:3px solid var(--ink);padding-top:12px;margin-bottom:22px}
.section-head h2{margin:0;font-size:24px;letter-spacing:-.01em}
.section-head h2 a{color:inherit}
.section-head p{margin:0;color:var(--muted);font-size:15px;flex:1 1 320px}
.section-more{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.grid{display:grid;gap:32px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card-link{color:inherit;display:block}
.card-link:hover{text-decoration:none}
.card-link:hover .card-title{color:var(--blue)}
.card .thumb{height:160px;margin-bottom:14px}
.card-title{margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em}
.card-dek{margin:0 0 10px;color:#3c4653;font-size:15px}

/* ---------- section + article pages ---------- */
.page-head{padding:8px 0 28px;border-bottom:1px solid var(--rule);margin-bottom:30px}
.page-head h1{margin:6px 0 10px;font-size:38px;letter-spacing:-.02em}
.page-dek{margin:0;color:#3c4653;font-size:18px;max-width:70ch}
.eyebrow{margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.eyebrow a{color:inherit}
.sep{color:var(--muted);margin:0 4px}
.topic-lead{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--rule)}
.topic-lead a{color:inherit;display:block}
.topic-lead a:hover{text-decoration:none}

.story{max-width:720px;margin:0 auto;padding-bottom:12px}
.story-head{border-bottom:1px solid var(--rule);padding-bottom:20px;margin-bottom:26px}
.story-head h1{margin:8px 0 14px;font-size:40px;line-height:1.12;letter-spacing:-.02em}
.story-dek{margin:0 0 14px;font-size:20px;line-height:1.5;color:#333c48}
.draft-flag{margin:12px 0 0;background:#fff6e0;border-left:3px solid #d08700;padding:8px 12px;font-size:14px}
.story-body{font-family:var(--serif);font-size:19px;line-height:1.72;color:#181c22}
.story-body p{margin:0 0 22px}
.story-body h2{font-family:var(--sans);font-size:24px;line-height:1.25;margin:38px 0 14px;letter-spacing:-.01em}
.story-body h3{font-family:var(--sans);font-size:19px;margin:30px 0 10px}
.story-body ul,.story-body ol{margin:0 0 22px;padding-left:22px}
.story-body li{margin-bottom:10px}
.story-body blockquote{margin:30px 0;padding:4px 0 4px 22px;border-left:4px solid var(--blue);font-family:var(--sans);font-size:21px;line-height:1.45;font-weight:600;color:#0d2a4d}
.story-body blockquote p{margin:0}
.story-body a{text-decoration:underline}
.story-edit{margin:28px 0 0}
.empty{color:var(--muted);padding:24px 0}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-ink);color:#c7cfda;margin-top:24px;padding:40px 0 24px;font-size:14px}
.site-footer a{color:#c7cfda}
.footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}
.footer-mark{margin:0 0 8px;font-size:20px;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.footer-note{margin:0;max-width:46ch;color:#95a1b1}
.footer-head{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#fff}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:7px}
.footer-legal{margin-top:28px;padding-top:16px;border-top:1px solid #1b3355;color:#7d8898;font-size:13px}
.footer-legal p{margin:0}

/* ---------- forms shared with admin ---------- */
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:3px;padding:11px 18px;font:600 15px/1 var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--blue-dark);text-decoration:none;color:#fff}
.btn-quiet{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn-quiet:hover{background:#eef4fb;color:var(--blue-dark)}
.stack{display:flex;flex-direction:column;gap:8px;max-width:420px}
.stack label{font-size:14px;font-weight:600}
.stack input{padding:11px 12px;border:1px solid #c4ccd6;border-radius:3px;font:16px var(--sans)}
.stack .btn{margin-top:10px;align-self:flex-start}
.alert{background:#fdecec;border-left:3px solid #c0362c;padding:10px 14px;font-size:15px}
.alert-ok{background:#e9f5ec;border-left-color:#1f7a3d}

@media (max-width:980px){
  .lead-grid{grid-template-columns:1fr;gap:28px}
  .latest{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:20px;position:static}
  .home-lead .story-head h1{font-size:32px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .tagline{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .masthead-row{gap:12px}
  .wordmark{font-size:19px}
  .lead-title{font-size:30px}
  .story-head h1{font-size:29px}
  .page-head h1{font-size:28px}
  .story-body{font-size:18px}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .thumb-lead{height:200px}
}