/* ============ DESIGN TOKENS ============ */
  :root{
    --bg-deep: #0E1912;
    --surface: #16241B;
    --surface-raised: #1C3023;
    --hairline: #2A3F30;
    --ink: #ECE7D8;
    --ink-muted: #A9B8AC;
    --ink-faint: #6F8477;
    --amber: #E3A83B;
    --amber-dim: #8A6B2E;
    --live: #D64E2A;
    --teal: #3FA796;
    --azure: #4C8DB0;
    --rose: #C56B85;
    --sage: #7FA65C;
    --radius-sm: 8px;
    --radius-md: 14px;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Inter", -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }

  body{
    margin:0;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; text-decoration: none; }
  img{ max-width:100%; display:block; }

  .skip-link{
    position:absolute; left:-999px; top:0;
    background: var(--amber); color:#0E1912; padding:10px 16px;
    font-family: var(--font-mono); font-size: .85rem; z-index: 200;
    border-radius: 0 0 8px 0;
  }
  .skip-link:focus{ left:0; }

  .wrap{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }

  /* ============ TOP UTILITY BAR ============ */
  .utility-bar{
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    color: var(--ink-faint);
  }
  .utility-bar .wrap{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:9px; padding-bottom:9px; flex-wrap:wrap; gap:8px;
  }
  .utility-bar .pulse-stat{ color: var(--ink-muted); display:flex; align-items:center; gap:8px; }
  .dot-live{
    width:7px; height:7px; border-radius:50%; background: var(--live);
    display:inline-block; box-shadow: 0 0 0 0 rgba(214,78,42,.6);
    animation: pulse 2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow: 0 0 0 0 rgba(214,78,42,.55); }
    70%{ box-shadow: 0 0 0 6px rgba(214,78,42,0); }
    100%{ box-shadow: 0 0 0 0 rgba(214,78,42,0); }
  }
  .utility-bar .links a{ margin-left:16px; color: var(--ink-faint); }
  .utility-bar .links a:hover{ color: var(--amber); }

  /* ============ MASTHEAD ============ */
  .masthead{ padding: 28px 0 18px; border-bottom: 1px solid var(--hairline); }
  .masthead .wrap{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
  .wordmark{
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .wordmark .pulse-of{ color: var(--amber); font-style: italic; font-weight: 600; }
  .tagline{
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--ink-faint);
    margin-top: 6px;
    letter-spacing: .03em;
  }
  .search-form{
    display:flex; align-items:center; gap:0;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 6px 6px 6px 16px;
    background: var(--surface);
    min-width: 260px;
  }
  .search-form input{
    background:transparent; border:none; outline:none; color:var(--ink);
    font-family: var(--font-body); font-size:.88rem; width:100%;
  }
  .search-form input::placeholder{ color: var(--ink-faint); }
  .search-form button{
    background: var(--amber); color:#0E1912; border:none; border-radius:999px;
    padding:8px 16px; font-family:var(--font-mono); font-size:.72rem; font-weight:600;
    letter-spacing:.05em; cursor:pointer;
  }

  /* ============ PRIMARY NAV ============ */
  .primary-nav{
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    position: sticky; top:0; z-index: 100;
    backdrop-filter: blur(6px);
  }
  .primary-nav .wrap{
    display:flex; gap: 2px; overflow-x:auto; scrollbar-width:none;
  }
  .primary-nav .wrap::-webkit-scrollbar{ display:none; }
  .primary-nav a{
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing:.04em;
    text-transform: uppercase;
    padding: 13px 16px;
    white-space:nowrap;
    color: var(--ink-muted);
    border-bottom: 2px solid transparent;
  }
  .primary-nav a:hover, .primary-nav a:focus-visible{ color: var(--ink); border-bottom-color: var(--amber); }
  .primary-nav a.is-active{ color: var(--amber); border-bottom-color: var(--amber); }

  /* ============ BREAKING TICKER (signature element) ============ */
  .ticker{
    background: var(--surface-raised);
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
    position: relative;
  }
  .ticker .wrap{ display:flex; align-items:center; padding:0; max-width:1280px; }
  .ticker-label{
    flex-shrink:0;
    background: var(--live);
    color: #0E1912;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
    padding: 9px 14px;
    z-index:2;
  }
  .ticker-track-holder{ overflow:hidden; width:100%; }
  .ticker-track{
    display:flex; gap:48px; white-space:nowrap;
    animation: scroll-left 42s linear infinite;
    padding-left: 100%;
  }
  .ticker:hover .ticker-track{ animation-play-state: paused; }
  @keyframes scroll-left{
    from{ transform: translateX(0); }
    to{ transform: translateX(-100%); }
  }
  .ticker-item{
    font-family: var(--font-mono); font-size:.8rem; color: var(--ink-muted);
    display:flex; align-items:center; gap:10px;
  }
  .ticker-item::before{ content:"●"; color: var(--amber); font-size:.5rem; }
  .ticker-item a:hover{ color: var(--amber); }

  /* ============ LAYOUT ============ */
  main{ padding: 40px 0 0; }
  h1, h2, h3{ font-family: var(--font-display); font-weight:700; margin:0; }

  .eyebrow{
    font-family: var(--font-mono); font-size:.72rem; letter-spacing:.09em;
    text-transform:uppercase; color: var(--ink-faint); display:flex; align-items:center; gap:8px;
    margin-bottom:10px;
  }
  .eyebrow .rule{ flex:1; height:1px; background: var(--hairline); }

  /* --- Hero --- */
  .hero-grid{
    display:grid; grid-template-columns: 1.6fr 1fr; gap: 28px;
    margin-bottom: 52px;
  }
  @media (max-width: 880px){ .hero-grid{ grid-template-columns: 1fr; } }

  .hero-lead{
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-md);
    padding: 28px; display:flex; flex-direction:column; gap:14px;
  }
  .hero-lead h1{
    font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height:1.15; letter-spacing:-0.01em;
  }
  .hero-lead h1 a:hover{ color: var(--amber); }
  .hero-lead p.dek{ color: var(--ink-muted); font-size:.98rem; max-width: 56ch; }
  .story-meta{
    font-family: var(--font-mono); font-size:.72rem; color: var(--ink-faint);
    display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  }
  .tag{
    display:inline-block; padding:3px 10px; border-radius:999px;
    font-family: var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
  }
  .tag-politics{ background: rgba(63,167,150,.16); color: var(--teal); }
  .tag-business{ background: rgba(227,168,59,.16); color: var(--amber); }
  .tag-world{ background: rgba(76,141,176,.16); color: var(--azure); }
  .tag-entertainment{ background: rgba(197,107,133,.16); color: var(--rose); }
  .tag-sports{ background: rgba(127,166,92,.16); color: var(--sage); }

  .hero-secondary{ display:flex; flex-direction:column; gap:16px; }
  .mini-story{
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-sm);
    padding:16px; display:flex; flex-direction:column; gap:8px;
  }
  .mini-story h3{ font-size:1rem; line-height:1.3; font-weight:600; }
  .mini-story h3 a:hover{ color: var(--amber); }

  /* --- Trending rail (numbered — rank is genuinely sequential) --- */
  .content-grid{ display:grid; grid-template-columns: 1fr 300px; gap: 28px; align-items:start; margin-bottom:56px; }
  @media (max-width: 980px){ .content-grid{ grid-template-columns: 1fr; } }

  .source-bento{ display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; }
  @media (max-width: 640px){ .source-bento{ grid-template-columns: 1fr; } }

  .source-card{
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-md);
    padding:20px; display:flex; flex-direction:column; gap:14px;
  }
  .source-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .source-id{ display:flex; align-items:flex-start; gap:10px; }
  .source-badge{
    width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-display); font-weight:700; font-size:.85rem; color:#0E1912;
    flex-shrink:0; margin-top:2px;
  }
  .source-name{ font-family: var(--font-display); font-weight:700; font-size:1.02rem; line-height:1.25; }
  .source-date{ font-family: var(--font-mono); font-size:.7rem; color: var(--ink-faint); letter-spacing:.02em; }
  .freshness{ flex-shrink:0; white-space:nowrap; margin-top:3px; }
  .freshness{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); }
  .freshness .pulse-dot{ width:6px; height:6px; border-radius:50%; background:var(--sage); animation: pulse-soft 2.4s infinite; flex-shrink:0; }
  @keyframes pulse-soft{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  .headline-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
  .headline-list li{ border-top:1px solid var(--hairline); padding: 10px 0; }
  .headline-list li:first-child{ border-top:none; padding-top:0; }
  .headline-list a{ font-size:.9rem; line-height:1.4; color: var(--ink); }
  .headline-list a:hover{ color: var(--amber); }
  .headline-time{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); display:block; margin-top:4px; }

  .view-all{
    font-family: var(--font-mono); font-size:.74rem; color: var(--amber);
    display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  }
  .view-all::after{ content:"→"; transition: transform .15s ease; }
  .view-all:hover::after{ transform: translateX(3px); }

  /* --- Sidebar --- */
  .sidebar-panel{
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-md);
    padding:20px; margin-bottom:20px;
  }
  .trending-list{ list-style:none; margin:0; padding:0; counter-reset: trend; }
  .trending-list li{
    counter-increment: trend; display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--hairline);
  }
  .trending-list li:first-child{ border-top:none; padding-top:0; }
  .trending-list li::before{
    content: counter(trend);
    font-family: var(--font-display); font-weight:700; font-size:1.3rem; color: var(--amber-dim);
    line-height:1; flex-shrink:0; width:22px;
  }
  .trending-list a{ font-size:.86rem; line-height:1.35; }
  .trending-list a:hover{ color: var(--amber); }

  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip-row a{
    font-family: var(--font-mono); font-size:.72rem; letter-spacing:.03em;
    padding:7px 12px; border:1px solid var(--hairline); border-radius:999px; color: var(--ink-muted);
  }
  .chip-row a:hover{ border-color: var(--amber); color: var(--amber); }

  /* --- Category strip section (sports/entertainment) --- */
  .strip-section{ margin-bottom:56px; }
  .strip-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
  @media (max-width: 900px){ .strip-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 560px){ .strip-grid{ grid-template-columns: 1fr; } }
  .strip-card{
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-sm);
    padding:16px; display:flex; flex-direction:column; gap:10px; height:100%;
  }
  .strip-card h3{ font-size:.94rem; font-weight:600; font-family:var(--font-body); line-height:1.35; }
  .strip-card h3 a:hover{ color: var(--amber); }

  /* --- Generated: all-dailies compact directory --- */
  .daily-directory-grid{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:14px;
  }
  .daily-directory-card{
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-sm);
    padding:14px; display:flex; align-items:center; gap:10px;
  }
  .daily-directory-card .source-badge{ width:26px; height:26px; font-size:.72rem; border-radius:6px; flex-shrink:0; margin:0; }
  .daily-directory-card .dd-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .daily-directory-card .dd-name{ font-family: var(--font-body); font-weight:600; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .daily-directory-card .dd-name a:hover{ color: var(--amber); }
  .daily-directory-card .dd-meta{ font-family: var(--font-mono); font-size:.66rem; color: var(--ink-faint); }

  /* --- Generated: full category directory --- */
  .category-directory{ display:flex; flex-direction:column; gap:18px; }
  .category-group{
    background: var(--surface); border:1px solid var(--hairline); border-radius: var(--radius-md);
    padding:18px 20px;
  }
  .category-group h3{
    font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
    color: var(--amber); font-weight:600; margin-bottom:12px;
  }
  .category-group .chip-row a{ font-size:.76rem; }

  /* ============ FOOTER (SEO sitemap mesh) ============ */
  footer{ border-top:1px solid var(--hairline); background: var(--surface); padding: 48px 0 28px; margin-top: 40px; }
  .footer-grid{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:26px; margin-bottom:36px;
  }
  @media (max-width: 900px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 520px){ .footer-grid{ grid-template-columns: 1fr; } }
  .footer-col h2{
    font-family: var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
    color: var(--ink-faint); font-weight:600; margin-bottom:14px;
  }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .footer-col a{ font-size:.84rem; color: var(--ink-muted); }
  .footer-col a:hover{ color: var(--amber); }
  .footer-bottom{
    border-top:1px solid var(--hairline); padding-top:22px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
    font-family: var(--font-mono); font-size:.72rem; color: var(--ink-faint);
  }
  .footer-bottom .legal a{ margin-left:16px; color: var(--ink-faint); }
  .footer-bottom .legal a:hover{ color: var(--amber); }

  :focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; }