:root{
  --ink:#16181d;
  --muted:#646b74;
  --faint:#8b929b;
  --line:#e7e9ec;
  --line-strong:#d3d7dc;
  --paper:#ffffff;
  --wash:#f6f7f9;
  --accent:#1a4d8f;
  --accent-dark:#123a6d;
  --slate:#2a5a99;
  --breaking:#b21f24;
  --maxw:1120px;
  --sans:'Inter','Helvetica Neue',Arial,system-ui,sans-serif;
  --serif:'Georgia','Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--accent)}

/* Demo notice */
.notice{background:var(--wash);border-bottom:1px solid var(--line);font-family:var(--sans);font-size:.78rem;padding:8px 20px;text-align:center;color:var(--muted);letter-spacing:.2px}

/* Masthead */
header.masthead{border-bottom:1px solid var(--line);text-align:center;padding:26px 0 18px;background:var(--paper)}
.masthead .brand{font-family:var(--serif);font-size:2.5rem;letter-spacing:1px;font-weight:700;text-decoration:none;color:var(--ink);display:inline-block;line-height:1}
.masthead .tag{font-family:var(--sans);color:var(--faint);margin-top:10px;font-size:.82rem;text-transform:uppercase;letter-spacing:2.5px}

/* Sticky nav */
.topnav-wrap{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(8px);z-index:30;border-bottom:1px solid var(--line)}
nav.topnav{font-family:var(--sans);font-size:.8rem;letter-spacing:.4px;font-weight:600}
nav.topnav .wrap{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:0 24px}
nav.topnav a{color:var(--ink);text-decoration:none;padding:14px 12px;position:relative;transition:color .15s}
nav.topnav a:hover{color:var(--accent)}
nav.topnav a:not(.spacer):after{content:'';position:absolute;left:12px;right:12px;bottom:8px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .18s}
nav.topnav a:hover:after{transform:scaleX(1)}
nav.topnav .spacer{flex:1}
nav.topnav .spacer:after{display:none}
nav.topnav a.cta{color:var(--accent)}

/* Layout */
.grid{display:grid;grid-template-columns:2fr 1fr;gap:44px;padding:32px 0}
@media(max-width:820px){.grid{grid-template-columns:1fr;gap:24px}}

/* Cards */
.card{border-bottom:1px solid var(--line);padding:20px 0}
.card:first-child{padding-top:0}
.card h2,.card h3{margin:.4rem 0;font-family:var(--serif);line-height:1.25}
.card h2{font-size:1.4rem}
.card h2 a,.card h3 a{color:var(--ink);text-decoration:none;transition:color .15s}
.card h2 a:hover,.card h3 a:hover{color:var(--accent)}
.card .dek{color:var(--muted);font-size:.98rem}
.meta{font-family:var(--sans);font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;margin-top:10px;font-weight:600}

/* Labels */
.label{display:inline-block;font-family:var(--sans);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--breaking);padding:0 0 2px;border-bottom:2px solid var(--breaking);margin-bottom:6px}
.label.grey{color:var(--accent);border-color:var(--accent)}

/* Rewritten tag */
.rw-tag,.tag{display:inline-block;font-family:var(--sans);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#fff;background:var(--accent);padding:2px 7px;border-radius:3px;vertical-align:middle;white-space:nowrap}

/* Rewrite banner (article page) */
.rewrite-banner{font-family:var(--sans);font-size:.86rem;line-height:1.5;background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:12px 16px;margin-bottom:18px;color:var(--ink)}
.read-original{font-family:var(--sans);font-weight:600;background:var(--ink);color:#fff;text-decoration:none;padding:8px 16px;border-radius:6px;font-size:.82rem;display:inline-block;transition:background .15s}
.read-original:hover{background:#000;color:#fff}

/* Featured hero */
.hero{padding:30px 32px;background:var(--wash);border:1px solid var(--line);border-radius:10px;margin-bottom:28px}
.hero .headline{font-family:var(--serif);font-size:2.1rem;font-weight:700;margin:0 0 10px;line-height:1.15}
.hero .headline a{color:var(--ink);text-decoration:none}
.hero .headline a:hover{color:var(--accent)}
.hero .dek{font-size:1.08rem;color:var(--muted);margin-bottom:12px;line-height:1.5}
.hero .meta{margin-top:8px}
@media(max-width:560px){.hero{padding:22px 20px}.hero .headline{font-size:1.6rem}}

/* Sidebar */
.side h4{font-family:var(--sans);text-transform:uppercase;font-size:.76rem;letter-spacing:.8px;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:8px;margin:0 0 12px}
.side p{color:var(--muted);font-size:.92rem}
.side .card{padding:12px 0}
.side .card h3{font-size:1rem}

/* Article */
article.story{max-width:720px;margin:0 auto;padding:36px 0}
article.story h1{font-family:var(--serif);font-size:2.6rem;line-height:1.1;margin:8px 0 12px;letter-spacing:-.01em;color:var(--ink)}
article.story .dek{font-size:1.22rem;color:var(--muted);margin-bottom:14px;line-height:1.45}
article.story .lead{font-family:var(--serif);font-size:1.22rem;line-height:1.65;color:var(--ink);font-weight:400;margin:18px 0}
article.story p{font-family:var(--serif);font-size:1.12rem;line-height:1.7;color:#25282e}
article.story .byline{font-family:var(--sans);font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:6px}
.article-controls{display:flex;gap:14px;align-items:center;margin:14px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.article-controls button{font-family:var(--sans);font-weight:600;background:var(--ink);color:#fff;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:.82rem;transition:background .15s}
.article-controls button:hover{background:#000}
.article-controls .small{font-family:var(--sans)}
.section-h{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.2px;font-size:.78rem;font-weight:700;color:var(--accent);padding-top:22px;margin-top:30px;border-top:1px solid var(--line)}
.perspective{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:18px 0}
.perspective b{display:block;font-family:var(--sans);font-size:.92rem;margin-bottom:4px}
.gaps{background:var(--wash);padding:16px 20px;border:1px solid var(--line);border-radius:8px;list-style:none;margin:12px 0}
.gaps li{margin:8px 0;padding-left:20px;position:relative;font-family:var(--serif)}
.gaps li:before{content:'\2014';position:absolute;left:0;color:var(--faint)}
article.story ol,article.story ul.sources{padding-left:20px}
article.story ol li,article.story ul.sources li{font-family:var(--sans);font-size:.95rem;margin:8px 0;color:var(--muted)}
article.story ol li a,article.story ul li a{color:var(--accent)}

/* Footer */
footer{border-top:1px solid var(--line);margin-top:56px;padding:36px 0;font-family:var(--sans);font-size:.86rem;color:var(--muted);background:var(--wash)}
footer .cols{display:flex;gap:56px;flex-wrap:wrap}
footer b{color:var(--ink)}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent)}

/* Utility */
.center{text-align:center}
.small{font-size:.86rem;color:var(--muted)}
.muted{color:var(--faint)}