:root{
  --white:#ffffff;
  --band:#f5f5f7;
  --band-2:#eeeef1;
  --charcoal:#1d1d1f;
  --charcoal-soft:#3a3a3d;
  --muted:#6e6e73;
  --hair:rgba(0,0,0,0.08);
  --blue:#0a66ff;
  --blue-hover:#0050d6;
  --dark:#0a0a0c;
  --dark-card:#17171a;
  --dark-hair:rgba(255,255,255,0.1);
  --dark-muted:#a1a1a6;
  --red:#e2231a;
  --radius-lg:28px;
  --radius-md:18px;
  --radius-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-0.01em;
}
h1,h2,h3,.headline-font{ font-family:'Inter Tight','Inter',-apple-system,sans-serif; letter-spacing:-0.03em; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
.container{ max-width:1180px; margin:0 auto; padding:0 32px; }
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--red); }
.eyebrow.on-dark{ color:#ff6b61; }
.eyebrow.muted{ color:var(--muted); }

.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
  transition:box-shadow .3s var(--ease);
}
.header-inner{ max-width:1180px; margin:0 auto; padding:0 32px; height:56px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:26px; height:26px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-mark svg{ width:15px; height:15px; }
.brand-word{ font-size:16px; font-weight:800; letter-spacing:-0.02em; }

nav.primary-nav{ display:flex; align-items:center; gap:30px; }
nav.primary-nav a{ font-size:12.5px; font-weight:500; color:var(--charcoal-soft); padding:6px 0; position:relative; transition:color .25s var(--ease); cursor:pointer; }
nav.primary-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--charcoal); transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease); }
nav.primary-nav a:hover{ color:var(--charcoal); }
nav.primary-nav a:hover::after{ transform:scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.icon-btn{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--charcoal-soft); transition:background .25s var(--ease), color .25s var(--ease); }
.icon-btn:hover{ background:var(--band); color:var(--charcoal); }
.icon-btn svg{ width:16px; height:16px; }

.btn-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 20px; border-radius:var(--radius-pill); font-size:13px; font-weight:600; transition:transform .3s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease), color .25s var(--ease); white-space:nowrap; }
.btn-pill.blue{ background:var(--blue); color:#fff; box-shadow:0 8px 20px -8px rgba(10,102,255,0.55); }
.btn-pill.blue:hover{ background:var(--blue-hover); transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(10,102,255,0.65); }
.btn-pill.ghost{ border:1px solid var(--hair); color:var(--charcoal); }
.btn-pill.ghost:hover{ background:var(--band); }
.btn-pill.ghost-dark{ border:1px solid var(--dark-hair); color:#fff; }
.btn-pill.ghost-dark:hover{ background:rgba(255,255,255,0.08); }
.btn-pill.small{ padding:7px 15px; font-size:12.5px; }
.btn-pill:disabled{ opacity:.6; cursor:default; }

/* ---------- Hero ---------- */
.hero{ padding:88px 32px 64px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero .eyebrow{ margin-bottom:18px; display:flex; align-items:center; gap:8px; justify-content:center; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(226,35,26,0.15); }
.hero h1{ font-size:clamp(34px, 5.4vw, 68px); line-height:1.06; font-weight:800; max-width:900px; color:var(--charcoal); }
.hero p.sub{ margin-top:22px; font-size:19px; line-height:1.5; color:var(--muted); max-width:560px; font-weight:400; }
.hero .meta-row{ margin-top:22px; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); font-weight:500; flex-wrap:wrap; justify-content:center; }
.hero .meta-row .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); }
.hero .actions{ margin-top:34px; display:flex; align-items:center; gap:14px; }

.hero-media{ margin-top:56px; width:100%; max-width:1040px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,0.28); aspect-ratio:16/8.2; background:linear-gradient(135deg,#e9e9ec,#d7d7dc); position:relative; }
.hero-media.go-article{ cursor:pointer; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media .caption{ position:absolute; left:0; right:0; bottom:0; padding:22px 26px; background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); color:#fff; font-size:13px; font-weight:500; text-align:left; }

/* ---------- Section shell ---------- */
section.band{ padding:96px 32px; }
section.band.light{ background:var(--band); }
section.band.white{ background:var(--white); }
section.band.dark{ background:var(--dark); color:#fff; }

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; max-width:1180px; margin:0 auto 44px; gap:24px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(24px,3vw,34px); font-weight:800; }
.section-head p{ color:var(--muted); font-size:15px; margin-top:6px; max-width:460px; }
section.band.dark .section-head p{ color:var(--dark-muted); }
.section-head .see-all{ font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--blue); padding-bottom:2px; flex-shrink:0; cursor:pointer; }
.section-head .see-all svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
.section-head .see-all:hover svg{ transform:translateX(3px); }

/* ---------- Story cards ---------- */
.story-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.story-card{ background:var(--white); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--hair); transition:transform .45s var(--ease), box-shadow .45s var(--ease); display:flex; flex-direction:column; }
.story-card:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -24px rgba(0,0,0,0.22); }
.story-media{ aspect-ratio:4/3; overflow:hidden; background:linear-gradient(135deg,#e2e2e6,#cfcfd4); position:relative; }
.story-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.story-card:hover .story-media img{ transform:scale(1.06); }
.story-tag{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.92); padding:5px 11px; border-radius:var(--radius-pill); font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--charcoal); }
.story-body{ padding:22px 22px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.story-body h3{ font-size:19px; font-weight:700; line-height:1.28; cursor:pointer; }
.story-body h3:hover{ color:var(--blue); }
.story-body .dek{ font-size:14.5px; color:var(--muted); line-height:1.5; }
.story-foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--hair); }
.read-more{ font-size:13px; font-weight:600; color:var(--blue); display:flex; align-items:center; gap:5px; cursor:pointer; }
.read-more svg{ width:12px; height:12px; transition:transform .3s var(--ease); }
.story-card:hover .read-more svg{ transform:translateX(3px); }
.story-actions{ display:flex; align-items:center; gap:4px; }
.story-actions button{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:background .25s var(--ease), color .25s var(--ease); }
.story-actions button:hover{ background:var(--band); color:var(--charcoal); }
.story-actions button.active{ color:var(--blue); }
.story-actions svg{ width:15px; height:15px; }

/* ---------- Dark promo band ---------- */
.promo-inner{ max-width:760px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.promo-stat{ font-family:'Inter Tight','Inter',sans-serif; font-weight:800; font-size:clamp(46px,7vw,92px); line-height:1; letter-spacing:-0.03em; background:linear-gradient(180deg,#ffffff, #b9b9bf); -webkit-background-clip:text; background-clip:text; color:transparent; }
.promo-inner h2{ margin-top:18px; font-size:clamp(22px,3vw,32px); font-weight:700; line-height:1.3; color:#fff; }
.promo-inner p{ margin-top:14px; color:var(--dark-muted); font-size:16px; max-width:480px; line-height:1.55; }
.promo-inner .actions{ margin-top:32px; display:flex; gap:14px; }

/* ---------- Category grid ---------- */
.cat-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--radius-md); overflow:hidden; }
.cat-card{ background:var(--white); padding:30px 26px; min-height:168px; display:flex; flex-direction:column; justify-content:space-between; transition:background .35s var(--ease); cursor:pointer; }
.cat-card:hover{ background:var(--band); }
.cat-card .cat-label{ font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.cat-card h4{ font-size:16.5px; font-weight:700; line-height:1.35; margin-top:14px; }
.cat-card .arrow{ margin-top:16px; width:26px; height:26px; border-radius:50%; border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.cat-card:hover .arrow{ transform:translateX(4px); background:var(--charcoal); border-color:var(--charcoal); }
.cat-card:hover .arrow svg{ stroke:#fff; }
.cat-card .arrow svg{ width:11px; height:11px; stroke:var(--charcoal); transition:stroke .35s var(--ease); }

/* ---------- Editor's picks ---------- */
.picks-list{ max-width:1180px; margin:0 auto; display:flex; flex-direction:column; }
.pick-row{ display:flex; align-items:center; gap:26px; padding:22px 6px; border-bottom:1px solid var(--hair); transition:padding-left .35s var(--ease); cursor:pointer; }
.pick-row:first-child{ border-top:1px solid var(--hair); }
.pick-row:hover{ padding-left:14px; }
.pick-num{ font-size:13px; font-weight:700; color:var(--muted); width:22px; flex-shrink:0; }
.pick-thumb{ width:72px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,#e2e2e6,#cfcfd4); }
.pick-thumb img{ width:100%; height:100%; object-fit:cover; }
.pick-text{ flex:1; min-width:0; }
.pick-text .cat{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--red); }
.pick-text h4{ font-size:16px; font-weight:600; margin-top:5px; line-height:1.35; }
.pick-meta{ font-size:12.5px; color:var(--muted); flex-shrink:0; }

/* ---------- Newsletter dark band ---------- */
.newsletter-inner{ max-width:600px; margin:0 auto; text-align:center; }
.newsletter-inner h2{ color:#fff; font-size:clamp(26px,3.4vw,38px); font-weight:800; }
.newsletter-inner p{ margin-top:14px; color:var(--dark-muted); font-size:16px; }
.subscribe-form{ margin-top:32px; display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.06); border:1px solid var(--dark-hair); border-radius:var(--radius-pill); padding:6px; max-width:440px; margin-left:auto; margin-right:auto; }
.subscribe-form input{ flex:1; background:none; border:none; outline:none; color:#fff; font-size:14px; padding:10px 16px; font-family:inherit; }
.subscribe-form input::placeholder{ color:#8b8b90; }
.subscribe-form button{ background:var(--blue); color:#fff; padding:11px 22px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:700; transition:background .25s var(--ease), transform .25s var(--ease); flex-shrink:0; }
.subscribe-form button:hover{ background:var(--blue-hover); transform:translateY(-1px); }
.newsletter-fine{ margin-top:16px; font-size:12px; color:#6b6b70; }

/* ---------- Footer ---------- */
footer{ background:var(--white); padding:64px 32px 32px; border-top:1px solid var(--hair); }
.footer-top{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; padding-bottom:44px; flex-wrap:wrap; }
.footer-brand{ max-width:280px; }
.footer-brand .brand{ margin-bottom:14px; }
.footer-brand p{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h5{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:16px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--charcoal-soft); padding:6px 0; transition:color .25s var(--ease); }
.footer-col a:hover{ color:var(--blue); }
.footer-bottom{ max-width:1180px; margin:0 auto; padding-top:26px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:12.5px; color:var(--muted); }
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom .legal-links a:hover{ color:var(--charcoal); }

/* ---------- Skeleton loading ---------- */
.skel{ background:linear-gradient(90deg, var(--band) 25%, var(--band-2) 37%, var(--band) 63%); background-size:400% 100%; animation:skel-shine 1.4s ease infinite; border-radius:8px; }
@keyframes skel-shine{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ---------- Auth modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(10,10,12,0.5); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-card{ background:#fff; border-radius:var(--radius-md); padding:36px; width:100%; max-width:380px; transform:translateY(12px) scale(.98); transition:transform .35s var(--ease); box-shadow:0 40px 80px -20px rgba(0,0,0,0.35); }
.modal-overlay.open .modal-card{ transform:translateY(0) scale(1); }
.modal-card h3{ font-size:20px; font-weight:800; }
.modal-card p.hint{ margin-top:6px; font-size:13px; color:var(--muted); }
.modal-card form{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.modal-card input{ padding:11px 14px; border-radius:12px; border:1px solid var(--hair); font-size:14px; font-family:inherit; outline:none; transition:border-color .25s var(--ease); }
.modal-card input:focus{ border-color:var(--blue); }
.modal-card .btn-pill{ justify-content:center; margin-top:4px; }
.modal-card .switch-mode{ margin-top:16px; font-size:13px; color:var(--muted); text-align:center; }
.modal-card .switch-mode a{ color:var(--blue); font-weight:600; cursor:pointer; }
.modal-card .error{ font-size:13px; color:var(--red); display:none; }
.modal-card .error.show{ display:block; }
.modal-close{ position:absolute; top:18px; right:18px; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.modal-close:hover{ background:var(--band); }
.modal-card{ position:relative; }

/* ---------- Toast ---------- */
.toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--charcoal); color:#fff; padding:12px 22px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); z-index:1200; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Article page ---------- */
.article-hero{ padding:64px 32px 0; max-width:760px; margin:0 auto; text-align:left; }
.article-hero .eyebrow{ justify-content:flex-start; }
.article-hero h1{ font-size:clamp(30px,4.6vw,48px); text-align:left; margin-top:16px; }
.article-hero p.sub{ text-align:left; margin-left:0; }
.article-body{ max-width:680px; margin:48px auto 0; padding:0 32px 96px; font-size:18px; line-height:1.75; color:var(--charcoal-soft); }
.article-body p{ margin-bottom:22px; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--muted); margin:32px auto 0; max-width:760px; padding:0 32px; }
.back-link:hover{ color:var(--charcoal); }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  nav.primary-nav{ display:none; }
  .story-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  section.band{ padding:72px 24px; }
  .hero{ padding:64px 24px 48px; }
  .footer-top{ flex-direction:column; }
}
@media (max-width:560px){
  .cat-grid{ grid-template-columns:1fr; }
  .pick-row{ flex-wrap:wrap; }
  .header-actions .btn-pill.ghost{ display:none; }
}

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}