/* ============================================================
   TRENDRADER PUBLIC FRONTEND
   Editorial Design System 6.0

   Principles:
   - Mobile-first
   - Data-driven editorial sections
   - No empty category blocks
   - Premium inline SVG iconography
   - Strong content hierarchy
   - Accessible interaction states
   - Responsive editorial layouts
   ============================================================ */

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{
  --paper:#f3f1eb;
  --surface:#fbfaf7;
  --surface-2:#eeece5;
  --paper-deep:#e4dfd4;

  --ink:#111216;
  --ink-soft:#2b2c32;

  --muted:#77766f;
  --muted-light:#99978f;

  --line:rgba(17,18,22,.12);
  --line-strong:rgba(17,18,22,.22);

  --accent:#e35f4d;
  --accent-deep:#bd493a;

  --dark:#0d0e13;
  --dark-2:#15161c;
  --dark-line:rgba(255,255,255,.12);

  --white:#fff;

  --politics:#e9f0f6;
  --business:#eee5d1;
  --culture:#eee7f1;
  --sports:#e7f0e8;
  --trend:#ece8f2;

  --politics-accent:#386f87;
  --business-accent:#9a6b20;
  --culture-accent:#785987;
  --sports-accent:#347248;
  --trend-accent:#70547f;

  --content:1240px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.2,.75,.25,1);

  --header-h:72px;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 18px);
  background:var(--paper);
}

body{
  background:var(--paper);
  color:var(--ink);

  font-family:"DM Sans",Arial,sans-serif;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  text-rendering:optimizeLegibility;

  overflow-x:hidden;
}

::selection{
  background:var(--ink);
  color:var(--paper);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input{
  font:inherit;
}

button{
  cursor:pointer;
}

img{
  display:block;
  width:100%;
  height:auto;
}

[hidden]{
  display:none!important;
}

.section-wrap{
  width:min(var(--content),calc(100% - 32px));
  margin-inline:auto;
}


/* ============================================================
   READING PROGRESS
   ============================================================ */

.reading-progress{
  position:fixed;
  z-index:300;
  top:0;
  left:0;
  width:100%;
  height:2px;
  pointer-events:none;
}

.reading-progress span{
  display:block;
  width:0;
  height:100%;
  background:var(--accent);
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header{
  position:sticky;
  z-index:200;
  top:0;

  background:rgba(243,241,235,.96);

  border-bottom:1px solid var(--line);

  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);

  transition:
    box-shadow .3s ease,
    background .3s ease;
}

.site-header.scrolled{
  background:rgba(243,241,235,.985);
  box-shadow:0 12px 35px rgba(0,0,0,.075);
}

.header-inner{
  width:min(1280px,calc(100% - 24px));
  min-height:var(--header-h);

  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;

  min-width:0;
}

.brand-mark{
  width:44px;
  height:44px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:var(--ink);
  color:#fff;

  font-family:"Newsreader",Georgia,serif;
  font-size:29px;
  line-height:1;

  box-shadow:
    0 7px 18px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.brand-lockup{
  min-width:0;

  display:flex;
  flex-direction:column;
  gap:5px;
}

.brand-name{
  display:block;

  font-size:12px;
  font-weight:700;
  line-height:1;

  letter-spacing:.18em;
  white-space:nowrap;
}

.brand-subtitle{
  display:block;

  color:var(--muted-light);

  font-size:7px;
  line-height:1;

  font-weight:600;
  letter-spacing:.18em;

  white-space:nowrap;
}

.desktop-nav{
  display:none;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.icon-button,
.menu-button{
  width:44px;
  height:44px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border:1px solid var(--line-strong);
  border-radius:50%;

  background:rgba(255,255,255,.25);

  transition:
    background .25s ease,
    border-color .25s ease,
    transform .25s var(--ease);
}

.icon-button:hover,
.menu-button:hover{
  background:rgba(255,255,255,.65);
  border-color:rgba(17,18,22,.32);
  transform:translateY(-1px);
}

.icon-button svg{
  width:20px;
  height:20px;

  fill:none;
  stroke:var(--ink);
  stroke-width:1.8;
  stroke-linecap:round;
}

.menu-button{
  position:relative;
}

.menu-button span{
  position:absolute;

  left:50%;

  width:19px;
  height:1.5px;

  background:var(--ink);

  transform:translateX(-50%);

  transition:
    transform .3s var(--ease),
    top .3s var(--ease);
}

.menu-button span:first-child{
  top:17px;
}

.menu-button span:last-child{
  top:25px;
}

.menu-button.menu-open span:first-child{
  top:21px;
  transform:translateX(-50%) rotate(45deg);
}

.menu-button.menu-open span:last-child{
  top:21px;
  transform:translateX(-50%) rotate(-45deg);
}


/* ============================================================
   SEARCH
   ============================================================ */

.search-panel{
  max-height:0;
  overflow:hidden;

  background:var(--surface);

  border-top:1px solid transparent;

  transition:
    max-height .4s var(--ease),
    border-color .3s ease;
}

.search-panel.open{
  max-height:130px;
  border-color:var(--line);
}

.search-panel form{
  width:min(1280px,calc(100% - 32px));

  margin:auto;

  padding:14px 0;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;

  gap:10px;
}

.search-input-wrap{
  display:flex;
  align-items:center;
  gap:12px;

  min-width:0;

  border-bottom:1px solid var(--line-strong);
}

.search-index{
  color:var(--muted-light);

  font-size:8px;
  font-weight:700;
  letter-spacing:.15em;
}

.search-input-wrap input{
  width:100%;
  min-width:0;
  height:44px;

  border:0;
  outline:0;

  background:transparent;

  color:var(--ink);

  font-size:15px;
}

.search-input-wrap input::placeholder{
  color:#aaa8a1;
}

.search-panel form>button{
  min-width:90px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  border:0;
  border-radius:4px;

  background:var(--ink);
  color:#fff;

  padding:0 16px;

  font-size:10px;
  font-weight:700;
}

.search-panel form>button svg{
  width:14px;
  height:14px;

  fill:none;
  stroke:var(--accent);

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============================================================
   MOBILE NAV
   ============================================================ */

.mobile-nav{
  display:grid;
  grid-template-columns:1fr 1fr;

  max-height:0;
  overflow:hidden;

  background:var(--surface);

  border-top:1px solid var(--line);

  transition:max-height .45s var(--ease);
}

.mobile-nav.open{
  max-height:440px;
}

.mobile-nav a{
  display:flex;
  align-items:center;

  min-height:58px;

  padding:0 16px;

  border-bottom:1px solid var(--line);

  font-size:12px;
  font-weight:600;

  transition:
    background .25s ease,
    padding-left .25s var(--ease);
}

.mobile-nav a:nth-child(odd){
  border-right:1px solid var(--line);
}

.mobile-nav a:hover{
  background:rgba(0,0,0,.025);
  padding-left:20px;
}

.mobile-nav a span{
  width:29px;

  color:var(--muted-light);

  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
}


/* ============================================================
   DESKTOP NAV
   ============================================================ */

.desktop-nav a{
  position:relative;

  padding:8px 0;

  color:#686760;

  font-size:10px;
  font-weight:600;
}

.desktop-nav a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:1px;

  width:0;
  height:1px;

  background:var(--ink);

  transition:width .3s var(--ease);
}

.desktop-nav a:hover,
.desktop-nav a.active{
  color:var(--ink);
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after{
  width:100%;
}


/* ============================================================
   LIVE TICKER
   ============================================================ */

.ticker{
  height:34px;

  display:flex;
  overflow:hidden;

  background:var(--paper-deep);

  border-bottom:1px solid var(--line);
}

.ticker-label{
  display:flex;
  align-items:center;
  gap:8px;

  flex:0 0 auto;

  padding:0 14px;

  border-right:1px solid var(--line);

  background:inherit;

  font-size:8px;
  font-weight:700;
  letter-spacing:.15em;
}

.ticker-label span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 0 5px rgba(227,95,77,.12);
}

.ticker-track{
  min-width:0;

  display:flex;
  overflow:hidden;

  white-space:nowrap;
}

.ticker-content{
  display:flex;
  align-items:center;
  gap:20px;

  flex:0 0 auto;

  padding-right:20px;

  animation:tickerMove 42s linear infinite;
}

.ticker-content a{
  color:#686760;
  font-size:10px;
}

.ticker-content i{
  font-style:normal;
  color:var(--accent);
}

@keyframes tickerMove{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-100%);
  }
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
  padding:42px 0 54px;

  display:flex;
  flex-direction:column;

  gap:30px;
}

.hero-copy{
  max-width:720px;
}

.hero-kicker,
.section-eyebrow,
.dark-kicker,
.newsletter-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;

  color:var(--muted);

  font-size:8px;
  font-weight:700;
  letter-spacing:.17em;
}

.hero-kicker span:first-child,
.dark-kicker span:first-child,
.section-eyebrow span{
  color:var(--accent);
}

.hero-kicker i{
  width:20px;
  height:1px;

  background:var(--line-strong);
}

.hero-copy h1{
  max-width:700px;

  margin-top:18px;

  font-size:clamp(46px,13vw,78px);
  line-height:.91;

  font-weight:600;

  letter-spacing:-.067em;
}

.hero-copy h1 em{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
  letter-spacing:-.035em;
}

.hero-intro{
  max-width:570px;

  margin-top:20px;

  color:var(--muted);

  font-size:13px;
  line-height:1.68;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:9px;

  margin-top:18px;

  color:var(--muted-light);

  font-size:8px;
  font-weight:600;

  text-transform:uppercase;
  letter-spacing:.09em;
}

.meta-dot{
  width:3px;
  height:3px;

  border-radius:50%;

  background:var(--accent);
}


/* ============================================================
   REVEALS
   ============================================================ */

.reveal{
  opacity:1;
  transform:none;
}

.js-reveal-enabled .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}

.js-reveal-enabled .reveal.visible{
  opacity:1;
  transform:none;
}


/* ============================================================
   LEAD STORY
   ============================================================ */

.lead-story-mount{
  min-height:0;
}

.lead-story{
  display:block;
}

.lead-image{
  position:relative;

  overflow:hidden;

  aspect-ratio:4/3;

  background:#ddd9d1;

  border-radius:2px;
}

.lead-image-inner{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  background:#ddd9d1;
}

.lead-image-inner img{
  width:100%!important;
  height:100%!important;

  object-fit:cover;

  transition:transform .8s var(--ease);
}

.image-shade{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(0,0,0,.64)
    );

  pointer-events:none;
}

.lead-index{
  position:absolute;

  left:15px;
  bottom:14px;

  display:flex;
  align-items:center;

  gap:9px;

  color:#fff;

  font-size:8px;
  font-weight:700;
  letter-spacing:.14em;

  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

.lead-index i{
  width:18px;
  height:1px;

  background:rgba(255,255,255,.7);
}

.lead-arrow{
  position:absolute;

  right:12px;
  bottom:12px;

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;

  background:rgba(0,0,0,.3);

  color:#fff;
}

.lead-arrow svg{
  width:17px;
  height:17px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lead-content{
  padding-top:17px;
}

.story-category,
.story-info,
.editor-category,
.related-meta{
  display:flex;
  align-items:center;
  gap:8px;

  color:var(--muted);

  font-size:8px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:.11em;
}

.story-category i,
.story-info i,
.editor-category i,
.related-meta i{
  display:block;

  width:4px;
  height:4px;

  flex:0 0 auto;

  border-radius:50%;

  background:var(--accent);
}

.lead-content h2{
  margin-top:10px;

  font-size:clamp(32px,9.5vw,58px);
  line-height:.96;

  font-weight:600;

  letter-spacing:-.06em;
}

.lead-content h2 em{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
}

.lead-content p{
  max-width:650px;

  margin-top:12px;

  color:var(--muted);

  font-size:13px;
  line-height:1.62;
}

.story-byline{
  display:flex;
  align-items:center;
  gap:9px;

  margin-top:16px;

  color:var(--muted-light);

  font-size:8px;
  font-weight:600;

  text-transform:uppercase;
  letter-spacing:.08em;
}

.byline-line{
  width:18px;
  height:1px;

  background:var(--line-strong);
}


/* ============================================================
   SHARED SECTION SYSTEM
   ============================================================ */

.section-block,
.category-section{
  position:relative;

  padding:54px 0 60px;

  border-top:1px solid var(--line);
}

.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:18px;

  margin-bottom:24px;
}

.section-eyebrow{
  margin-bottom:9px;
}

.section-heading h2{
  font-size:clamp(34px,8vw,48px);
  line-height:.92;

  font-weight:600;

  letter-spacing:-.06em;
}

.view-all{
  display:inline-flex;
  align-items:center;
  gap:7px;

  flex:0 0 auto;

  font-size:10px;
  font-weight:700;

  white-space:nowrap;
}

.view-all svg{
  width:16px;
  height:16px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:transform .3s var(--ease);
}

.view-all:hover svg{
  transform:translateX(3px);
}

.feed-status{
  max-width:170px;

  color:var(--muted-light);

  font-size:8px;

  line-height:1.4;

  text-align:right;
}

.feed-status[data-state="live"]{
  color:#4e7860;
}

.feed-status[data-state="loading"]{
  color:var(--accent);
}

.feed-status[data-state="error"]{
  color:var(--accent-deep);
}


/* ============================================================
   STORY GRIDS
   ============================================================ */

.story-grid{
  display:grid;

  grid-template-columns:1fr;

  gap:30px;
}

.story-card,
.category-card{
  min-width:0;

  -webkit-tap-highlight-color:transparent;
}

.story-card>a,
.category-card>a{
  display:block;
}

.story-image,
.category-image{
  position:relative;

  overflow:hidden;

  aspect-ratio:16/10;

  background:#ddd9d1;

  border-radius:2px;
}

.story-image img,
.category-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .75s var(--ease);
}

.image-fallback{
  display:grid!important;
  place-items:center;

  background:
    linear-gradient(
      135deg,
      #dedbd3,
      #c8c5bd
    );
}

.image-fallback span{
  color:rgba(17,18,22,.4);

  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
}

.image-number{
  position:absolute;

  left:11px;
  bottom:10px;

  color:#fff;

  font-size:8px;
  font-weight:700;

  text-shadow:0 1px 7px rgba(0,0,0,.8);
}

.story-arrow{
  position:absolute;

  right:10px;
  bottom:10px;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;

  background:rgba(0,0,0,.3);

  color:#fff;
}

.story-arrow svg{
  width:15px;
  height:15px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.story-info{
  margin-top:12px;
}

.story-card h3,
.category-card h3{
  margin-top:8px;

  font-family:"Newsreader",Georgia,serif;

  font-size:25px;
  line-height:1.07;

  font-weight:500;

  letter-spacing:-.025em;
}

.story-card p,
.category-card p{
  margin-top:9px;

  color:var(--muted);

  font-size:11.5px;
  line-height:1.57;
}


/* ============================================================
   CATEGORY FEATURE LAYOUT
   NaijaNews-inspired dominant story + support stories.
   ============================================================ */

.category-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

.category-section--feature .category-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.category-section--business .category-grid,
.category-section--politics .category-grid,
.category-section--trending .category-grid{
  background:rgba(255,255,255,.18);
}

.category-section--business .category-card:first-child,
.category-section--politics .category-card:first-child,
.category-section--trending .category-card:first-child{
  padding:0;
  border-top:0;
}


/* ============================================================
   FEATURE HERO
   ============================================================ */

.category-card--hero{
  min-width:0;
}

.category-card--hero .category-image{
  aspect-ratio:16/9;

  border-radius:3px;
}

.category-card--hero .category-card-content{
  padding-top:16px;
}

.category-card--hero h3{
  margin-top:10px;

  font-size:clamp(31px,8vw,52px);
  line-height:.98;

  letter-spacing:-.055em;
}

.category-card--hero p{
  max-width:650px;

  font-size:13px;
  line-height:1.6;
}


/* ============================================================
   SUPPORTING FEATURE STORIES
   ============================================================ */

.category-support-list{
  display:grid;
  gap:0;
}

.category-card--support{
  display:grid;

  grid-template-columns:112px minmax(0,1fr);

  gap:16px;

  padding:18px 0;

  border-top:1px solid var(--line);
}

.category-card--support:first-child{
  border-top:1px solid var(--line);
}

.category-card--support .category-image{
  width:112px;
  height:112px;

  aspect-ratio:1/1;
}

.category-card--support .story-info{
  margin-top:0;
}

.category-card--support h3{
  margin-top:8px;

  font-family:"DM Sans",Arial,sans-serif;

  font-size:17px;
  line-height:1.1;

  font-weight:650;

  letter-spacing:-.035em;
}

.category-card--support p{
  display:none;
}


/* ============================================================
   CATEGORY CARD LAYOUT
   ============================================================ */

.category-section--culture .category-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:28px;
}

.category-section--culture .category-card{
  padding-bottom:4px;
}

.category-section--culture .category-card h3{
  font-size:26px;
}


/* ============================================================
   POLITICS
   ============================================================ */

.category-section--politics{
  background:var(--politics);

  border-top-color:rgba(56,111,135,.15);
  border-bottom:1px solid rgba(56,111,135,.15);
}

.category-section--politics .section-eyebrow span,
.category-section--politics .story-info i,
.category-section--politics .view-all{
  color:var(--politics-accent);
}

.category-section--politics .story-info i{
  background:var(--politics-accent);
}


/* ============================================================
   BUSINESS
   ============================================================ */

.category-section--business{
  background:var(--business);

  border-top-color:rgba(118,86,27,.16);
  border-bottom:1px solid rgba(118,86,27,.16);
}

.category-section--business .section-eyebrow span,
.category-section--business .view-all{
  color:var(--business-accent);
}

.category-section--business .story-info i{
  background:var(--business-accent);
}


/* ============================================================
   CULTURE
   ============================================================ */

.category-section--culture{
  background:var(--culture);

  border-top-color:rgba(95,67,107,.14);
  border-bottom:1px solid rgba(95,67,107,.14);
}

.category-section--culture .section-eyebrow span,
.category-section--culture .view-all{
  color:var(--culture-accent);
}

.category-section--culture .story-info i{
  background:var(--culture-accent);
}


/* ============================================================
   SPORTS
   Compact list
   ============================================================ */

.category-section--sports{
  background:var(--sports);

  border-top-color:rgba(55,99,65,.14);
  border-bottom:1px solid rgba(55,99,65,.14);
}

.category-section--sports .section-eyebrow span,
.category-section--sports .view-all{
  color:var(--sports-accent);
}

.category-section--sports .story-info i{
  background:var(--sports-accent);
}

.category-section--sports .category-grid{
  gap:0;
}

.category-section--sports .category-card{
  padding:20px 0;

  border-top:1px solid rgba(17,18,22,.12);
}

.category-section--sports .category-card:first-child{
  padding-top:0;
  border-top:0;
}

.category-section--sports .category-card>a{
  display:grid;

  grid-template-columns:112px minmax(0,1fr);

  gap:16px;

  align-items:start;
}

.category-section--sports .category-image{
  width:112px;
  height:112px;

  aspect-ratio:1/1;
}

.category-section--sports .story-info{
  margin-top:0;
}

.category-section--sports .category-card h3{
  margin-top:8px;

  font-family:"DM Sans",Arial,sans-serif;

  font-size:18px;
  line-height:1.08;

  font-weight:650;

  letter-spacing:-.035em;
}

.category-section--sports .category-card p{
  display:none;
}


/* ============================================================
   TRENDING
   ============================================================ */

.category-section--trending{
  background:var(--trend);

  border-top-color:rgba(83,63,104,.15);
  border-bottom:1px solid rgba(83,63,104,.15);
}

.category-section--trending .section-eyebrow span,
.category-section--trending .view-all{
  color:var(--trend-accent);
}

.category-section--trending .story-info i{
  background:var(--trend-accent);
}


/* ============================================================
   TECHNOLOGY DARK DESK
   ============================================================ */

.dark-feature{
  position:relative;

  overflow:hidden;

  padding:60px 0 68px;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(119,46,56,.28),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(45,48,78,.28),
      transparent 35%
    ),
    var(--dark);

  color:#fff;

  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

.dark-feature::before,
.dark-feature::after{
  content:"";

  position:absolute;

  border:1px solid rgba(255,255,255,.075);

  border-radius:50%;

  pointer-events:none;
}

.dark-feature::before{
  width:520px;
  height:520px;

  right:-270px;
  top:-260px;
}

.dark-feature::after{
  width:760px;
  height:760px;

  right:-390px;
  top:-380px;
}

.dark-inner{
  position:relative;
  z-index:1;

  display:flex;
  flex-direction:column;

  gap:38px;
}

.dark-copy{
  max-width:690px;
}

.dark-kicker{
  color:rgba(255,255,255,.52);
}

.dark-kicker span:first-child{
  color:#ff8a76;
}

.dark-copy h2{
  margin-top:16px;

  font-size:clamp(39px,11vw,66px);
  line-height:.93;

  font-weight:600;

  letter-spacing:-.065em;
}

.dark-copy h2 em{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
}

.dark-copy p{
  max-width:520px;

  margin-top:16px;

  color:rgba(255,255,255,.59);

  font-size:13px;
  line-height:1.65;
}

.dark-stories{
  display:grid;
  gap:0;
}

.dark-card{
  display:grid;

  grid-template-columns:112px minmax(0,1fr);

  gap:16px;

  padding:18px 0;

  border-top:1px solid var(--dark-line);
}

.dark-card:first-child{
  border-top:1px solid var(--dark-line);
}

.dark-card>div:first-child{
  width:112px;
  height:112px;

  overflow:hidden;

  background:#222329;
}

.dark-card>div:first-child img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:transform .75s var(--ease);
}

.dark-card .story-info{
  margin:0;

  color:rgba(255,255,255,.48);
}

.dark-card .story-info i{
  background:#ff8a76;
}

.dark-card h3{
  margin-top:8px;

  font-family:"Newsreader",Georgia,serif;

  font-size:22px;
  line-height:1.07;

  font-weight:500;
}

.dark-card p{
  display:none;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state{
  padding:68px 20px;

  text-align:center;

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.empty-index{
  color:var(--accent);

  font-size:8px;
  font-weight:700;

  letter-spacing:.17em;
}

.empty-state h2{
  margin-top:16px;

  font-size:35px;
  line-height:.98;

  letter-spacing:-.055em;
}

.empty-state p{
  max-width:560px;

  margin:14px auto 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.65;
}

.empty-state a{
  display:inline-flex;
  align-items:center;
  gap:7px;

  margin-top:22px;

  padding:12px 16px;

  background:var(--ink);
  color:#fff;

  border-radius:4px;

  font-size:10px;
  font-weight:700;
}

.empty-state a svg{
  width:15px;
  height:15px;

  fill:none;
  stroke:var(--accent);

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* ============================================================
   NEWSLETTER
   ============================================================ */

.newsletter{
  margin-top:42px;

  padding:38px 22px;

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(227,95,77,.17),
      transparent 31%
    ),
    var(--dark);

  color:#fff;

  border-radius:3px;
}

.newsletter-eyebrow{
  color:rgba(255,255,255,.52);
}

.newsletter-eyebrow span{
  width:6px;
  height:6px;

  border-radius:50%;

  background:var(--accent);
}

.newsletter h2{
  max-width:700px;

  margin-top:16px;

  font-size:clamp(40px,11vw,68px);
  line-height:.92;

  letter-spacing:-.065em;
}

.newsletter h2 em{
  font-family:"Newsreader",Georgia,serif;
  font-weight:400;
}

.newsletter-copy p{
  max-width:530px;

  margin-top:13px;

  color:rgba(255,255,255,.57);

  font-size:12px;
  line-height:1.6;
}

.newsletter form{
  margin-top:27px;
}

.newsletter-field label{
  display:block;

  margin-bottom:7px;

  color:rgba(255,255,255,.52);

  font-size:8px;
  font-weight:600;

  text-transform:uppercase;
  letter-spacing:.12em;
}

.newsletter-field input{
  width:100%;
  height:48px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:3px;

  outline:0;

  background:rgba(255,255,255,.05);

  color:#fff;

  padding:0 13px;

  transition:border-color .25s ease;
}

.newsletter-field input:focus{
  border-color:rgba(255,255,255,.5);
}

.newsletter-field input::placeholder{
  color:rgba(255,255,255,.32);
}

.newsletter button{
  width:100%;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  margin-top:8px;

  border:0;
  border-radius:3px;

  background:#fff;
  color:var(--ink);

  font-size:10px;
  font-weight:700;
}

.newsletter button svg{
  width:15px;
  height:15px;

  fill:none;
  stroke:var(--accent);

  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.newsletter small{
  display:block;

  margin-top:9px;

  color:rgba(255,255,255,.4);

  font-size:9px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer{
  margin-top:0;

  background:var(--dark);
  color:#fff;

  border-top:1px solid var(--dark-line);
}

.footer-top{
  display:flex;
  flex-direction:column;

  gap:24px;

  padding:32px 0;
}

.footer-brand p{
  margin-top:14px;

  color:rgba(255,255,255,.43);

  font-size:10px;
}

.footer-index{
  display:flex;
  flex-direction:column;
  gap:5px;

  color:rgba(255,255,255,.33);

  font-size:8px;
  letter-spacing:.11em;
}

.footer-bottom{
  display:flex;
  flex-direction:column;

  gap:13px;

  padding:18px 0 27px;

  border-top:1px solid var(--dark-line);

  color:rgba(255,255,255,.34);

  font-size:8px;
}

.footer-bottom div{
  display:flex;
  gap:17px;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.icon-button:focus-visible,
.menu-button:focus-visible,
.search-panel button:focus-visible,
.newsletter button:focus-visible,
.story-card a:focus-visible,
.category-card a:focus-visible,
.dark-card:focus-visible,
.lead-story:focus-visible,
.view-all:focus-visible,
.mobile-nav a:focus-visible,
.desktop-nav a:focus-visible,
.empty-state a:focus-visible,
.footer-bottom a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}


/* ============================================================
   HOVER / DESKTOP MICRO-INTERACTIONS
   ============================================================ */

.cursor-glow{
  display:none;
}

@media(hover:hover){

  .cursor-glow{
    display:block;

    position:fixed;
    z-index:1;

    width:240px;
    height:240px;

    pointer-events:none;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(227,95,77,.07),
        transparent 68%
      );

    transform:translate(-50%,-50%);

    opacity:0;

    transition:opacity .25s ease;
  }

  .story-card,
  .category-card,
  .lead-story{
    transition:transform .35s var(--ease);
  }

  .story-card:hover,
  .category-card:hover,
  .lead-story:hover{
    transform:translateY(-3px);
  }

  .story-card:hover img,
  .category-card:hover img,
  .lead-story:hover img,
  .dark-card:hover img{
    transform:scale(1.025);
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media(min-width:700px){

  :root{
    --header-h:76px;
  }

  .section-wrap{
    width:min(var(--content),calc(100% - 48px));
  }

  .header-inner{
    min-height:76px;

    width:min(1280px,calc(100% - 48px));
  }

  .brand-mark{
    width:45px;
    height:45px;
  }

  .desktop-nav{
    display:flex;
    align-items:center;

    gap:18px;
  }

  .menu-button{
    display:none;
  }

  .hero{
    padding:76px 0 84px;

    display:grid;

    grid-template-columns:290px minmax(0,1fr);

    gap:58px;

    align-items:end;
  }

  .hero-copy h1{
    font-size:clamp(58px,6.5vw,82px);
  }

  .lead-image{
    aspect-ratio:16/9;
  }

  .story-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:24px;
  }

  .section-block,
  .category-section{
    padding:68px 0 76px;
  }

  .section-heading{
    margin-bottom:28px;
  }

  .category-section--feature .category-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);

    gap:34px;

    align-items:start;
  }

  .category-card--hero .category-image{
    aspect-ratio:16/10;
  }

  .category-support-list{
    border-top:0;
  }

  .category-card--support{
    grid-template-columns:100px minmax(0,1fr);
  }

  .category-card--support .category-image{
    width:100px;
    height:100px;
  }

  .category-section--culture .category-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:24px;
  }

  .category-section--sports .category-card>a{
    grid-template-columns:140px minmax(0,1fr);
  }

  .category-section--sports .category-image{
    width:140px;
    height:88px;

    aspect-ratio:16/10;
  }

  .dark-feature{
    padding:78px 0 84px;
  }

  .dark-inner{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:72px;

    align-items:start;
  }

  .dark-card{
    grid-template-columns:125px minmax(0,1fr);
  }

  .dark-card>div:first-child{
    width:125px;
    height:125px;
  }

  .newsletter{
    margin-top:52px;

    padding:54px 58px;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:end;
  }

  .newsletter form{
    margin-top:0;
  }

  .newsletter button{
    width:auto;

    padding:0 22px;
  }

  .footer-top{
    flex-direction:row;
    justify-content:space-between;

    gap:30px;
  }

  .footer-index{
    text-align:right;
  }

  .footer-bottom{
    flex-direction:row;
    justify-content:space-between;
  }
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media(min-width:1020px){

  .header-inner{
    gap:35px;
  }

  .desktop-nav{
    gap:26px;

    flex:1;
    justify-content:center;
  }

  .hero{
    grid-template-columns:350px minmax(0,1fr);

    gap:88px;
  }

  .lead-content{
    padding-top:23px;
  }

  .lead-content h2{
    font-size:clamp(45px,4.4vw,62px);
  }

  .story-grid{
    gap:30px;
  }

  .category-section--feature .category-grid{
    grid-template-columns:minmax(0,1.6fr) minmax(350px,1fr);

    gap:46px;
  }

  .category-card--hero .category-card-content{
    padding-top:20px;
  }

  .category-card--hero h3{
    font-size:clamp(40px,4vw,57px);
  }

  .category-card--support{
    grid-template-columns:128px minmax(0,1fr);

    padding:20px 0;
  }

  .category-card--support .category-image{
    width:128px;
    height:96px;
  }

  .category-section--culture .category-grid{
    gap:30px;
  }

  .category-section--culture .category-card h3{
    font-size:29px;
  }

  .category-section--sports .category-card>a{
    grid-template-columns:180px minmax(0,1fr);
  }

  .category-section--sports .category-image{
    width:180px;
    height:112px;
  }

  .dark-feature{
    padding:96px 0 104px;
  }

  .dark-inner{
    grid-template-columns:390px 1fr;

    gap:105px;
  }

  .dark-stories{
    grid-template-columns:repeat(2,minmax(0,1fr));

    column-gap:38px;
  }

  .dark-card{
    grid-template-columns:100px minmax(0,1fr);
  }

  .dark-card>div:first-child{
    width:100px;
    height:100px;
  }

  .newsletter{
    padding:68px 78px;
  }
}


/* ============================================================
   WIDE DESKTOP
   ============================================================ */

@media(min-width:1280px){

  .hero{
    padding-top:92px;
    padding-bottom:100px;
  }

  .section-block,
  .category-section{
    padding-top:78px;
    padding-bottom:86px;
  }

  .lead-content h2{
    max-width:900px;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  .reveal,
  .js-reveal-enabled .reveal,
  .js-reveal-enabled .reveal.visible{
    opacity:1!important;
    transform:none!important;
  }
}