/* Navid's Daily — "Ink & Ember": warm newsprint-noir with a vermillion pressroom accent. */
:root{
  --ink:#0b0a09;--ink-2:#131110;--ink-3:#1b1817;--ink-4:#241f1d;
  --paper:#f7f2e9;--paper-2:#ddd4c6;--paper-dim:#9d9385;
  --rule:#2e2926;--rule-soft:#221e1c;
  --accent:#ff4b26;--accent-2:#f3b23e;
  --blue:#3b82f6;--blue-hi:#5b9dff;
  --serif:"Raleway","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Raleway","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nav-h:54px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.5;
  background-image:radial-gradient(1100px 420px at 50% -160px,#1e1613 0%,rgba(30,22,19,0) 72%);
  background-repeat:no-repeat;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#12100f}
a:focus-visible,.navlink:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:3px}

/* ---------- masthead ---------- */
.edge{height:3px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 42%,#7a2f18 78%,var(--accent) 100%)}
header{position:relative;background:linear-gradient(180deg,#17130f 0%,#0c0a09 100%);border-bottom:1px solid var(--rule)}
.masthead{padding:32px 22px 0;text-align:center}
.masthead-inner{max-width:1180px;margin:0 auto}
.kicker{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--accent)}
.brand{font-family:var(--serif);font-weight:900;font-size:clamp(40px,8.4vw,78px);line-height:.92;
  letter-spacing:-.03em;margin:12px 0 14px;color:var(--paper);text-shadow:0 2px 30px rgba(0,0,0,.6)}
.brand .brand-mark{font-style:italic;font-weight:700;color:var(--accent);margin-left:.16em}
.dateline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  border-top:1px solid var(--rule);border-bottom:3px double var(--rule);padding:11px 0;margin-top:6px}
.date{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim)}
.dateline .dot{color:var(--accent);font-size:8px;line-height:1}
header h1 a{color:var(--paper);text-decoration:none}

/* ---------- article page topbar ---------- */
.bar{position:sticky;top:0;z-index:60;background:rgba(11,10,9,.9);backdrop-filter:blur(14px) saturate(140%);padding:0}
.bar-inner{max-width:820px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:12px}
.bar h1{margin:0;font-family:var(--serif);font-size:20px;font-weight:800;letter-spacing:-.01em}
.bar h1 a{display:inline-flex;align-items:center;gap:9px;transition:color .18s}
.bar h1 a:hover{color:var(--accent)}
.bar .back{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--accent);
  border:1px solid rgba(255,75,38,.4);border-radius:3px;padding:2px 8px;transition:background .18s,color .18s}
.bar h1 a:hover .back{background:var(--accent);color:#12100f}

/* ---------- sticky section nav ---------- */
.secnav{position:sticky;top:0;z-index:50;background:rgba(11,10,9,.88);backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--rule);box-shadow:0 10px 24px -20px #000}
.secnav-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:6px;
  padding:9px 14px;overflow-x:auto;scrollbar-width:none}
.secnav-inner::-webkit-scrollbar{display:none}
.navlink{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--paper-dim);
  padding:7px 12px;border:1px solid transparent;border-radius:999px;
  transition:color .18s,background .18s,border-color .18s,transform .18s}
.navlink:hover{color:#14110f;background:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.navlink .n{font-size:10px;font-weight:700;opacity:.62}
.navlink.lead{color:var(--accent-2);border-color:rgba(243,178,62,.35)}
.navlink.lead:hover{color:#14110f;background:var(--accent-2);border-color:var(--accent-2)}

main{max-width:1180px;margin:0 auto;padding:18px 22px 0}

/* ---------- top stories ---------- */
.top-stories{position:relative;overflow:hidden;margin:26px 0 8px;padding:22px 26px 16px;border-radius:5px;
  border:1px solid var(--rule);background:linear-gradient(145deg,#1c1613 0%,#100e0d 62%)}
.top-stories::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.top-stories h2{margin:0 0 12px;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--accent-2)}
.top-stories ol{list-style:none;margin:0;padding:0;counter-reset:top}
.top-stories li{counter-increment:top;display:flex;gap:16px;align-items:flex-start;
  padding:13px 0;border-top:1px solid var(--rule-soft)}
.top-stories li:first-child{border-top:0;padding-top:2px}
.top-stories li::before{content:counter(top,decimal-leading-zero);flex:0 0 auto;
  font-family:var(--serif);font-weight:900;font-size:27px;line-height:1;color:var(--accent);opacity:.9}
.top-body{min-width:0}
.top-stories a{font-family:var(--serif);font-size:19.5px;font-weight:700;line-height:1.24;
  color:var(--paper);text-decoration:none;transition:color .16s}
.top-stories a:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.src{display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--paper-dim);margin-bottom:4px}

/* ---------- section headers ---------- */
.section{display:flex;align-items:center;gap:12px;margin:48px 0 18px;padding-bottom:11px;
  font-family:var(--serif);font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.015em;
  color:var(--paper);border-bottom:2px solid var(--rule);scroll-margin-top:calc(var(--nav-h) + 12px)}
.section .sec-em{font-size:.8em;line-height:1;filter:saturate(1.1)}
.section .sec-name{order:1}
.section::after{content:"";order:2;flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,var(--rule),rgba(46,41,38,0))}
.count{order:3;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--accent);
  background:rgba(255,75,38,.09);border:1px solid rgba(255,75,38,.34);border-radius:999px;padding:4px 10px}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;counter-reset:card}
.card{position:relative;display:flex;gap:14px;counter-increment:card;overflow:hidden;
  text-decoration:none;color:inherit;border:1px solid var(--rule-soft);border-radius:4px;
  background:linear-gradient(180deg,var(--ink-2) 0%,#100e0d 100%);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s,box-shadow .2s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.card:hover{transform:translateY(-3px);border-color:#3d3532;box-shadow:0 16px 32px -14px rgba(0,0,0,.85)}
.card:hover::before{transform:scaleY(1)}
.thumb{width:118px;min-height:112px;flex-shrink:0;background:#0a0908;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),filter .35s}
.card:hover .thumb img{transform:scale(1.06);filter:saturate(1.05) contrast(1.06)}
.thumb.placeholder{display:flex;align-items:center;justify-content:center;font-size:28px;opacity:.5;
  background:repeating-linear-gradient(135deg,#161312 0 7px,#100e0d 7px 14px)}
.card-body{padding:13px 14px 14px;display:flex;flex:1 1 auto;flex-direction:column;gap:7px;min-width:0}
.card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim)}
.card-meta::before{content:counter(card,decimal-leading-zero);font-family:var(--serif);font-weight:900;
  font-size:13px;letter-spacing:0;color:#5c534d;padding-right:8px;border-right:1px solid var(--rule);
  transition:color .2s}
.card:hover .card-meta::before{color:var(--accent)}
.card-title{font-family:var(--serif);font-weight:700;font-size:17.5px;line-height:1.26;letter-spacing:-.008em;
  color:var(--paper);transition:color .16s}
.card:hover .card-title{color:#fff}
.card-summary{color:var(--paper-dim);font-size:13.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- political lean badges (blue / gray / red) ---------- */
.badge{font-family:var(--sans);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  padding:3px 7px;border-radius:2px;border:1px solid;line-height:1.4}
.badge.left{background:rgba(59,130,246,.15);color:#84b4ff;border-color:rgba(59,130,246,.45)}
.badge.center{background:rgba(170,170,170,.12);color:#c7c0b6;border-color:rgba(180,180,180,.34)}
.badge.right{background:rgba(239,68,68,.15);color:#ff9090;border-color:rgba(239,68,68,.45)}

/* ---------- article page ---------- */
.article{max-width:800px;margin:0 auto;padding:26px 22px 0}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px;
  font-size:11px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--paper-dim)}
.article-meta .outlet{color:var(--accent)}
.article h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,5.2vw,47px);line-height:1.06;
  letter-spacing:-.025em;margin:0 0 8px;color:#fff}
.article .lede-rule{width:74px;height:3px;background:var(--accent);margin:18px 0 4px}
.read-cta{margin:24px 0}
.read-btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:700;font-size:17px;
  color:#fff;text-decoration:none;padding:16px 28px;border-radius:4px;
  background:linear-gradient(180deg,#4a8bf7 0%,#1f5fdb 100%);border:1px solid #6ba0ff;
  box-shadow:0 12px 26px -12px rgba(59,130,246,.75),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s,box-shadow .18s,background .18s}
.read-btn:hover{background:linear-gradient(180deg,#66a1ff 0%,#2b6ee8 100%);transform:translateY(-2px);
  box-shadow:0 18px 34px -12px rgba(59,130,246,.9),inset 0 1px 0 rgba(255,255,255,.32)}
.read-btn:active{transform:translateY(0)}
.hero{width:100%;max-height:430px;object-fit:cover;border-radius:4px;margin:20px 0;
  border:1px solid var(--rule);filter:saturate(.95)}
.article-body{margin-top:6px}
.article-body p{font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.78;color:var(--paper-2);
  margin:0 0 20px}
.article-body>p:first-of-type::first-letter{float:left;font-family:var(--serif);font-weight:900;font-size:62px;
  line-height:.82;color:var(--accent);margin:5px 11px 0 0}
.article-body a{color:var(--blue-hi)}

/* ---------- footer ---------- */
footer{margin-top:56px;padding:30px 22px 40px;border-top:3px double var(--rule);text-align:center}
.foot-brand{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:-.01em;color:var(--paper-2)}
.foot-brand em{font-style:italic;color:var(--accent)}
footer .fine{margin-top:9px;font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:#6d6459;line-height:1.9}
footer a{color:var(--paper-dim)}

@media (max-width:680px){
  body{font-size:16px}
  main,.article{padding-left:14px;padding-right:14px}
  .grid{grid-template-columns:1fr}
  .thumb{width:96px;min-height:104px}
  .top-stories{padding:18px 16px 12px}
  .top-stories a{font-size:17.5px}
  .article-body p{font-size:17px}
  .read-btn{width:100%;justify-content:center;padding:16px 20px}
}