/* HUGE News - base styles */
@import url('https://fonts.googleapis.com/css2?family=BBH+Hegarty:wght@400;700;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#111;--muted:#666;--dim:#999;--bg:#fafafa;--panel:#fff;
  --line:#e5e5e5;--accent:#1a1a2e;--shadow:0 1px 3px rgba(0,0,0,.06);
  --font:'Atkinson Hyperlegible Next',system-ui,-apple-system,sans-serif;
  --text:#111;--border:#e5e5e5;--panel-2:#f5f5f5;
  --brand-font:'BBH Hegarty','Atkinson Hyperlegible',sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#f5f5f5;--muted:#aaa;--dim:#888;--bg:#0a0a0a;--panel:#151515;
    --line:#2a2a2a;--accent:#e0e0e0;--shadow:0 1px 3px rgba(0,0,0,.4);
    --text:#f5f5f5;--border:#333;--panel-2:#1f1f1f;
  }
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* HEADER: centered logo above navbar, Milker font */
header{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:12px 24px 12px 72px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
  z-index:50;
}
.huge-hamburger{
  position:absolute;left:16px;top:50%;
  transform:translateY(-50%);
  width:48px;height:48px;padding:0;border:0;
  background:transparent;color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;z-index:51;
}
.huge-hamburger span{display:block;width:25px;height:2px;background:currentColor;transition:transform .3s ease,opacity .2s ease,width .3s ease}
.huge-hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.huge-hamburger.active span:nth-child(2){opacity:0;width:0}
.huge-hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.logo{
  font-family:var(--brand-font);
  font-size:clamp(2.4rem,6vw,3.5rem);font-weight:900;
  letter-spacing:-.03em;line-height:1;
  text-decoration:none;color:var(--ink);text-align:center;
}
header .nav{display:flex;gap:3px;flex-wrap:nowrap;justify-content:center;align-items:center;
  border-top:1px solid var(--line);padding-top:10px;width:100%;margin-top:8px}
header .nav a{padding:7px 9px;border-radius:5px;font-size:.92rem;font-weight:700;color:var(--ink);letter-spacing:.01em;transition:background .15s;white-space:nowrap}
header .nav a:hover{background:rgba(0,0,0,.06)}

/* HERO GRID — 4-column latest from each category */
.hero-grid{
  max-width:1500px;margin:0 auto;padding:0 24px;margin-top:32px;
  overflow-x:hidden;
}
@media (max-width:500px){
  .hero-grid{padding:0 12px}
}
.hero-section-title{
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--accent);
}
.hero-cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
@media (max-width:900px){
  .hero-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:500px){
  .hero-cards{grid-template-columns:1fr}
}
.hero-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.hero-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transform:translateY(-2px);
}
.hero-card-image{
  width:100%;height:140px;background-size:cover;background-position:center;
  overflow:hidden;
}
@media (max-width:500px){
  .hero-card-image{height:120px}
}
.hero-card-content{padding:12px}
.hero-card-category{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
}
.hero-card-content h3{
  font-size:.95rem;font-weight:700;line-height:1.35;
  color:var(--ink);margin-bottom:6px;
  font-family:var(--brand-font);
}
.hero-card-content p{
  font-size:.8rem;color:var(--ink);line-height:1.4;
  margin-bottom:8px;
}
.hero-card-date{
  font-size:.7rem;color:var(--ink);
}

/* LATEST */
section.latest-section{margin-top:48px;max-width:1500px;margin-left:auto;margin-right:auto;padding:0 24px;overflow-x:hidden}
.latest-title{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.article{display:grid;grid-template-columns:220px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);
  align-items:start;transition:background .15s}
@media (max-width:600px){
  .article{grid-template-columns:1fr;gap:10px}
  .article-image{width:100%;height:180px}
  section.latest-section{padding:0 8px}
}
.article:hover{background:rgba(0,0,0,.02)}
.article-image{width:220px;height:140px;background-size:cover;background-position:center;
  border-radius:10px;box-shadow:var(--shadow)}
.article > div > .meta{font-size:.72rem;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.article h3{font-size:1.08rem;font-weight:800;line-height:1.3;letter-spacing:-.01em;
  font-family:var(--brand-font);margin-bottom:8px}
.article h3 a{color:var(--ink)}
.article h3 a:hover{color:var(--ink)}
.article p{font-size:.92rem;color:var(--ink);margin:0;line-height:1.55}

/* TRENDING */
.sidebar{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 16px;margin-top:40px}
.sidebar-title{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.trending{display:flex;flex-direction:column;gap:14px}
.trend{padding:12px 0;border-bottom:1px solid var(--line)}
.trend:last-child{border-bottom:none}
.trend-number{display:inline-block;font-size:.7rem;font-weight:800;color:var(--ink);
  background:var(--accent);padding:2px 8px;border-radius:4px;margin-bottom:8px;letter-spacing:.04em}
.trend h4{font-size:.95rem;font-weight:700;line-height:1.35;margin-bottom:4px}

/* NHL LIVE SCORES */
.nhl-scores{margin-top:40px;max-width:1200px;margin-left:auto;margin-right:auto;padding:0 16px}
.nhl-scores-title{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--accent)}
.nhl-scores-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.nhl-scores-title-text{font-size:1rem;font-weight:800;color:var(--ink)}
.nhl-scores-refresh{color:var(--dim);font-size:.75rem;cursor:pointer}
.nhl-scores-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.nhl-game{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;transition:background .15s}
.nhl-game:hover{background:#f5f5f5}
.nhl-game-status{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.nhl-game-status.live{color:#e63946;animation:pulse 1.5s infinite}
.nhl-game-status.final{color:var(--ink)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.nhl-game-teams{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nhl-game-team{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.nhl-game-team.away{justify-content:flex-start}
.nhl-game-team.logo{width:36px;height:36px;flex-shrink:0}
.nhl-game-team.logo img{width:100%;height:100%;object-fit:contain}
.nhl-game-team-name{font-size:.7rem;font-weight:700;color:var(--dim);margin-top:4px;line-height:1.2}
.nhl-game-team-name.full{font-size:.8rem;font-weight:800;color:var(--ink);margin-top:2px}
.nhl-game-score{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 0}
.nhl-game-score-num{font-size:1.5rem;font-weight:900;color:var(--ink);min-width:32px;text-align:center;font-family:var(--brand-font)}
.nhl-game-score-sep{font-size:1.2rem;color:var(--dim)}
.nhl-game-score-live{color:#e63946;font-size:.85rem;font-weight:700}
.nhl-game-lineup{font-size:.65rem;color:var(--dim);margin-top:6px;border-top:1px solid var(--line);padding-top:6px}
.nhl-game-lineup a{color:var(--accent);text-decoration:none;font-weight:600}
.nhl-game-lineup a:hover{text-decoration:underline}
@media (max-width:500px){
  .nhl-scores{padding:0 8px}
  .nhl-game-teams{flex-direction:column;gap:6px}
  .nhl-game-team.away{justify-content:center}
}
.trend h4 a{color:var(--ink)}
.trend h4 a:hover{color:var(--ink)}
.trend-cat{font-size:.72rem;color:var(--ink)}
.trend-cat a{color:var(--ink)}
.trend-cat a:hover{color:var(--ink)}

/* FOOTER */
footer{background:var(--panel);border-top:1px solid var(--line);padding:24px;text-align:center;
  font-size:.82rem;color:var(--ink);margin-top:60px}
footer a{color:var(--ink)}
footer a:hover{color:var(--ink)}

/* =========================================================
   HUGE.FYI
   LEFT-SIDE SECTION MENU
   ========================================================= */

.huge-hamburger {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
  z-index: 10001;
  -webkit-tap-highlight-color: transparent;
}

.huge-hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease, width .3s ease;
}

.huge-hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.huge-hamburger.active span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.huge-hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.huge-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.58);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 9998;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.huge-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.huge-left-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: min(460px, 92vw);
  height: 100dvh;
  background: #050505;
  color: #fff;
  transform: translateX(-105%);
  transition: transform .45s cubic-bezier(.77,0,.18,1);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 20px 0 60px rgba(0,0,0,.3);
}

.huge-left-menu.active {
  transform: translateX(0);
}

.huge-left-menu-header {
  height: 92px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.huge-menu-logo {
  display: flex;
  align-items: baseline;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1;
}

.huge-menu-logo span {
  font-size: 32px;
}

.huge-menu-logo small {
  font-size: 17px;
  opacity: .5;
}

.huge-menu-close {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .25s ease;
  position: relative;
}

.huge-menu-close::before,
.huge-menu-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .25s ease, background .2s ease;
}

.huge-menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.huge-menu-close:hover {
  background: #fff;
  color: #000;
  transform: rotate(90deg);
}

.huge-menu-close:hover::before,
.huge-menu-close:hover::after {
  background: #000;
  transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
}

.huge-menu-close:hover::after {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1.1);
}

.huge-section-nav {
  padding: 22px 30px 0;
  display: flex;
  flex-direction: column;
}

.huge-section-nav a {
  position: relative;
  min-height: 105px;
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  align-items: center;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: padding-left .3s ease, background .3s ease;
}

.huge-section-nav a:first-child {
  border-top: 1px solid rgba(255,255,255,.14);
}

.section-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #666;
  align-self: start;
  padding-top: 27px;
}

.section-name {
  font-size: clamp(34px, 5.5vw, 44px);
  font-weight: 900;
  letter-spacing: -.055em;
  transition: transform .3s ease;
}

.section-arrow {
  font-size: 24px;
  color: #666;
  transition: color .25s ease, transform .3s ease;
}

.huge-section-nav a:hover {
  padding-left: 10px;
}

.huge-section-nav a:hover .section-name {
  transform: translateX(4px);
}

.huge-section-nav a:hover .section-arrow {
  color: #fff;
  transform: translateX(6px);
}

.huge-menu-bottom {
  margin-top: auto;
  padding: 30px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.huge-menu-bottom div {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.huge-menu-bottom span {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .14em;
}

@media (max-width: 600px) {
  .huge-left-menu { width: 100%; }
  .huge-left-menu-header { height: 78px; padding: 0 22px; }
  .huge-section-nav { padding: 16px 22px 0; }
  .huge-section-nav a { min-height: 92px; }
  .huge-menu-bottom { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .huge-left-menu,
  .huge-menu-overlay,
  .huge-hamburger span,
  .huge-section-nav a,
  .section-name,
  .section-arrow,
  .huge-menu-close {
    transition: none !important;
  }
}



/* ─── ARTICLE PAGES ─────────────────────────────────────────────────────────── */

.article-page main{
  max-width:1500px;margin:0 auto;padding:32px 24px;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:48px;
  align-items:start;
}
@media (max-width:800px){
  .article-page main{grid-template-columns:1fr;padding:20px 12px;gap:24px}
}

/* Category label */
.category{
  display:inline-block;font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:var(--accent);padding:4px 10px;border-radius:4px;
  margin-bottom:12px;
}

/* Article title */
.article-title{
  font-family:var(--brand-font);
  font-size:clamp(2rem,4.5vw,3rem);font-weight:900;
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);
  margin-bottom:16px;
}

/* Article dek */
.article-dek{
  font-size:1.15rem;color:var(--ink);line-height:1.6;
  margin-bottom:16px;font-weight:400;
}

/* Article meta */
.article-meta{
  font-size:.85rem;color:var(--ink);margin-bottom:24px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.article-meta span + span::before{content:" · ";margin:0 4px}

/* Article image */
.article-image-container{
  margin-bottom:32px;
}
.article-image-container img{
  width:100%;max-height:500px;object-fit:cover;
  border-radius:8px;box-shadow:var(--shadow);
}
.caption{
  font-size:.8rem;color:var(--ink);margin-top:8px;
  font-style:italic;
}

/* TL;DR box */
.tldr{
  background:#f0f0f5;border-left:4px solid var(--accent);
  padding:20px 24px;margin-bottom:32px;border-radius:0 8px 8px 0;
}
.tldr-header{
  font-size:.75rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
.tldr-content{
  font-size:1rem;line-height:1.6;color:var(--ink);
}

/* Article body */
.article-body{font-size:1.05rem;line-height:1.75;color:var(--ink)}
.article-body p{margin-bottom:1.25em}
.article-body img{
  max-width:calc(100% - 300px);height:auto;float:right;margin:0 0 16px 16px;border-radius:8px;
}
@media (max-width:800px){
  .article-body img{max-width:100%;float:none;margin:0 0 12px 0}
}
.article-body h2{
  font-size:1.4rem;font-weight:800;margin:2em 0 .8em;
  letter-spacing:-.01em;color:var(--ink);
  font-family:var(--brand-font);
}
.article-body h3{
  font-size:1.15rem;font-weight:700;margin:1.5em 0 .6em;
  color:var(--ink);
}
.article-body strong{font-weight:700}
.article-body em{font-style:italic}
.article-body ul,.article-body ol{margin:1em 0 1.5em 1.5em}
.article-body li{margin-bottom:.5em}
.article-body blockquote{
  border-left:3px solid var(--accent);
  padding:12px 20px;margin:1.5em 0;
  font-style:italic;color:var(--ink);
  background:rgba(0,0,0,.02);border-radius:0 6px 6px 0;
}

/* Sources */
.sources{
  margin-top:40px;padding-top:24px;
  border-top:2px solid var(--accent);
}
.sources h2{
  font-size:1.1rem;font-weight:800;margin-bottom:16px;
  color:var(--ink);
}
.source-item{margin-bottom:8px}
.source-item a{
  color:var(--ink);text-decoration:underline;
  font-size:.95rem;
}
.source-item a:hover{color:var(--accent)}

/* Tags */
.tags{
  display:flex;flex-wrap:wrap;gap:8px;margin:24px 0;
}
.tag{
  display:inline-block;padding:6px 12px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);
  font-size:.8rem;color:var(--ink);transition:background .15s;
}
.tag:hover{background:rgba(0,0,0,.04)}

/* Sidebar */
.sidebar{
  position:sticky;top:100px;
}
.sidebar-box{
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:20px;margin-bottom:20px;
}
.sidebar-box .sidebar-title{
  font-size:.75rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:12px;
}
.share-buttons{display:flex;gap:8px}
.share-button{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);
  cursor:pointer;transition:background .15s,border-color .15s;
  font-size:.75rem;font-weight:700;
}
.share-button:hover{background:rgba(0,0,0,.04);border-color:var(--ink)}

/* Author block */
.author-block{
  display:flex;align-items:center;gap:12px;
  margin-bottom:24px;
}
.author-avatar{
  width:48px;height:48px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.9rem;flex-shrink:0;
}
.author-name{font-weight:700;color:var(--ink);font-size:.95rem}
.author-description{font-size:.85rem;color:var(--ink)}

/* Related articles */
.related-articles{
  grid-column:1 / -1;
  margin-top:48px;padding-top:32px;
  border-top:1px solid var(--line);
}
.related-articles h2{
  font-family:var(--brand-font);
  font-size:1.5rem;font-weight:900;letter-spacing:-.01em;
  margin-bottom:20px;color:var(--ink);
}
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.related-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
  transition:box-shadow .2s,transform .2s;
}
.related-card:hover{
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  transform:translateY(-2px);
}
.related-card img{
  width:100%;height:140px;object-fit:cover;
}
.related-card-content{padding:12px}
.related-card-category{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
}
.related-card h3{
  font-size:.95rem;font-weight:700;line-height:1.35;
  color:var(--ink);
}

/* ─── HUGE FEATURED SLIDER ────────────────────────────────────────────────── */

.huge-slider {
  position: relative;
  width: 100%;
  height: min(720px, 72vh);
  min-height: 500px;
  overflow: hidden;
  background: #000;
  border-bottom: 3px solid #000;
}

.huge-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 650ms cubic-bezier(.77, 0, .18, 1);
}

.huge-slide {
  position: relative;
  min-width: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.huge-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}

.huge-slide-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms ease;
}

.huge-slide:hover .huge-slide-image {
  transform: scale(1.035);
}

.huge-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.65) 32%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.05) 100%);
}

.huge-slide-content {
  position: absolute;
  left: clamp(24px, 6vw, 90px);
  right: clamp(24px, 6vw, 90px);
  bottom: clamp(70px, 8vw, 100px);
  max-width: 1000px;
}

.huge-slide-category {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 13px;
  background: #fff;
  color: #000;
  font-size: 13px;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 1.5px;
}

.huge-slide-content h2 {
  max-width: 1000px;
  margin: 0;
  font-size: clamp(42px, 6vw, 88px);
  line-height: .93;
  letter-spacing: -5px;
  font-weight: 1000;
}

.huge-slide-content p {
  max-width: 750px;
  margin: 22px 0 0;
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.3;
  font-weight: 600;
}

.huge-slide-read {
  display: inline-block;
  margin-top: 25px;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 1px;
}

.huge-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  width: 58px;
  height: 58px;
  border: 2px solid #fff;
  background: #000;
  color: #fff;
  font-size: 27px;
  font-weight: 900;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.huge-slider-arrow:hover {
  background: #fff;
  color: #000;
}

.huge-slider-prev { left: 25px; }
.huge-slider-next { right: 25px; }

.huge-slider-dots {
  position: absolute;
  z-index: 20;
  right: clamp(25px, 6vw, 90px);
  bottom: 28px;
  display: flex;
  gap: 9px;
}

.huge-slider-dot {
  width: 34px;
  height: 5px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}

.huge-slider-dot.active {
  width: 60px;
  background: #fff;
}

/* ─── NHL PRESEASON WIDGET ──────────────────────────────────────────────── */

.nhl-preseason-widget {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 16px 32px;
}

.nhl-preseason-widget * {
  box-sizing: border-box;
}

.nhl-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(135deg, #151515 0%, #080808 60%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 42px 36px;
  margin-bottom: 28px;
}

.nhl-eyebrow {
  color: #aaa;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.nhl-title {
  font-size: clamp(32px, 5vw, 64px);
  line-height: .95;
  letter-spacing: -.045em;
  font-weight: 900;
  margin: 0;
  color: #fff;
}

.nhl-subtitle {
  color: var(--muted);
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.nhl-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  gap: 10px;
  max-width: 700px;
  margin-top: 30px;
}

.nhl-count-box {
  background: rgba(255,255,255,.055);
  border: 1px solid #303030;
  border-radius: 12px;
  padding: 18px 10px;
  text-align: center;
}

.nhl-count-number {
  display: block;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.nhl-count-label {
  display: block;
  color: #888;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 8px;
}

.nhl-start-time {
  color: #aaa;
  font-size: 13px;
  margin-top: 18px;
}

.nhl-start-time strong {
  color: #fff;
}

.nhl-conference {
  margin-top: 34px;
}

.nhl-conference-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 25px;
  letter-spacing: -.025em;
  color: var(--text);
  font-weight: 800;
}

.nhl-conference-title::after {
  content: "";
  height: 1px;
  background: var(--border);
  flex: 1;
}

.nhl-division {
  margin-bottom: 24px;
}

.nhl-division-title {
  color: #aaa;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.nhl-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.nhl-team {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 15px 16px;
  transition: background .15s ease, border-color .15s ease;
}

.nhl-team:hover {
  background: var(--panel-2);
  border-color: #444;
}

.nhl-team-name {
  font-size: 14px;
  font-weight: 800;
}

.nhl-team-location {
  color: #777;
  font-size: 11px;
  margin-top: 3px;
}

.nhl-game {
  text-align: right;
}

.nhl-date {
  font-size: 12px;
  font-weight: 900;
}

.nhl-opponent {
  color: #aaa;
  font-size: 11px;
  margin-top: 3px;
  word-break: break-word;
}

.nhl-time {
  color: #777;
  font-size: 10px;
  margin-top: 2px;
}

.nhl-note {
  display: inline-block;
  color: #aaa;
  border: 1px solid #333;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  margin-top: 4px;
}

.nhl-footer {
  border-top: 1px solid var(--border);
  color: #666;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 30px;
  padding-top: 16px;
}

@media (max-width: 700px) {
  .nhl-preseason-widget {
    padding: 16px;
    border-radius: 12px;
    margin-left: 0;
    margin-right: 0;
  }

  .nhl-hero {
    padding: 28px 20px;
  }

  .nhl-countdown {
    grid-template-columns: repeat(2, 1fr);
  }

  .nhl-teams {
    grid-template-columns: 1fr;
  }

  .nhl-team {
      grid-template-columns: 1fr auto;
    }
  }

  /* ─── NHL SCHEDULE OVERLAY ──────────────────────────────────────────────── */

  .nhl-schedule-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .nhl-schedule-backdrop.open {
    opacity: 1;
    visibility: visible;
  }

  .nhl-schedule-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(900px, 100vw);
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: -4px 0 24px rgba(0,0,0,.4);
    z-index: 301;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .nhl-schedule-backdrop.open .nhl-schedule-panel {
    transform: translateX(0);
  }

  .nhl-schedule-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .nhl-schedule-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.03em;
    margin: 0;
    flex: 1;
  }

  .nhl-schedule-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
  }
  .nhl-schedule-close:hover {
    background: #555;
  }

  .nhl-schedule-scroll {
    padding: 24px;
    flex: 1;
  }

  /* keep existing widget styles but tighten the hero */
  .nhl-preseason-widget {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 16px 24px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .nhl-preseason-widget:hover {
    border-color: #888;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
  }

  .nhl-hero {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(circle at 85% 20%, rgba(255,255,255,.06), transparent 40%),
      linear-gradient(135deg, #181818 0%, #0a0a0a 70%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 24px;
    margin-bottom: 0;
  }

  .nhl-eyebrow {
    color: #aaa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .nhl-title {
    font-size: clamp(28px, 4vw, 48px);
    line-height: .95;
    letter-spacing: -.045em;
    font-weight: 900;
    margin: 0 0 10px;
    color: #fff;
  }

  .nhl-subtitle {
    color: var(--muted);
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    max-width: 480px;
  }

  .nhl-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-width: 480px;
    margin-top: 20px;
  }

  .nhl-count-box {
    background: rgba(255,255,255,.05);
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 14px 6px;
    text-align: center;
  }

  .nhl-count-number {
    display: block;
    font-size: clamp(24px, 3.5vw, 36px);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
  }

  .nhl-count-label {
    display: block;
    color: #777;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 6px;
  }

  .nhl-start-time {
    color: #999;
    font-size: 12px;
    margin-top: 14px;
  }

  .nhl-start-time strong {
    color: #ccc;
    font-weight: 700;
  }

  .nhl-expand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease;
  }
  .nhl-expand-link:hover {
    color: #fff;
  }

  /* responsive: stack countdown on small screens */
  @media (max-width: 480px) {
    .nhl-countdown {
      grid-template-columns: repeat(2, 1fr);
    }

    .nhl-hero {
      padding: 20px 16px;
    }

    .nhl-preseason-widget {
      padding: 12px;
      margin: 0 8px 16px;
    }

    .nhl-schedule-panel {
      width: 100vw;
    }
  }

  /* keep team card styles */
  .nhl-conference {
    margin-top: 30px;
  }

  .nhl-conference-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 22px;
    letter-spacing: -.025em;
    color: var(--text);
    font-weight: 800;
  }

  .nhl-conference-title::after {
    content: "";
    height: 1px;
    background: var(--border);
    flex: 1;
  }

  .nhl-division {
    margin-bottom: 22px;
  }

  .nhl-division-title {
    color: #999;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin: 0 0 8px;
  }

  .nhl-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .nhl-team {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    transition: background .15s ease, border-color .15s ease;
  }

  .nhl-team:hover {
    background: var(--panel-2);
    border-color: #555;
  }

  .nhl-team-name {
    font-size: 13px;
    font-weight: 800;
  }

  .nhl-team-location {
    color: #777;
    font-size: 10px;
    margin-top: 2px;
  }

  .nhl-game {
    text-align: right;
  }

  .nhl-team-name {
    overflow-wrap: anywhere;
  }

  .nhl-note {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .nhl-date {
    font-size: 11px;
    font-weight: 900;
  }

  .nhl-opponent {
    color: #aaa;
    font-size: 10px;
    margin-top: 2px;
  }

  .nhl-time {
    color: #777;
    font-size: 9px;
    margin-top: 1px;
  }

  .nhl-note {
    display: inline-block;
    color: #999;
    border: 1px solid #444;
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 8px;
    font-weight: 800;
    margin-top: 3px;
  }

  .nhl-footer {
    border-top: 1px solid var(--border);
    color: #777;
    font-size: 10px;
    line-height: 1.5;
    margin-top: 24px;
    padding-top: 12px;
  }

/* ─── MONTH VIEW CALENDAR ────────────────────────────────────────────────── */

.calendar-month {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 0 16px;
}
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.calendar-weekdays span {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--dim);
  padding: 4px 0;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-day {
  aspect-ratio: 1;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 600;
  color: #666;
  transition: transform .15s ease, box-shadow .15s ease;
  min-height: 36px;
}
.calendar-day.empty {
  background: transparent;
  cursor: default;
}
.calendar-day.level-0 { background: #fff; color: #999; }
.calendar-day.level-1 { background: #f5f5f5; color: #666; }
.calendar-day.level-2 { background: #e0e0e0; color: #333; }
.calendar-day.level-3 { background: #444; color: #fff; }
.calendar-day.level-4 { background: #111; color: #fff; }
.calendar-day:hover:not(.empty) {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  z-index: 2;
}
.calendar-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.calendar-dot.level-0 { background: #fff; border: 1px solid #ccc; }
.calendar-dot.level-1 { background: #ccc; }
.calendar-dot.level-2 { background: #999; }
.calendar-dot.level-3 { background: #444; }
.calendar-dot.level-4 { background: #000; }

/* ─── DAY VIEW SLIDE-OVER ───────────────────────────────────────────────── */

.day-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.day-view-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.day-view-panel {
  background: #fff;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.day-view-overlay.visible .day-view-panel {
  transform: translateY(0);
}
.day-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.day-view-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.day-view-date {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.day-view-count {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
}
.day-view-articles {
  overflow-y: auto;
  flex: 1;
  padding: 12px 20px 20px;
}
.day-view-empty {
  text-align: center;
  padding: 30px;
  color: var(--muted);
  font-size: .9rem;
}
.day-view-article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.day-view-article:hover {
  background: rgba(0,0,0,.02);
}
.day-view-cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(26,26,46,.08);
  padding: 4px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}
.day-view-title {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}

/* Calendar month navigation */
.calendar-month-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border-radius: 8px;
  padding: 4px 8px;
  border: 1px solid var(--line);
}
.calendar-month-arrow {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, transform .1s;
  flex-shrink: 0;
}
.calendar-month-arrow:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.05);
}
.calendar-month-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.calendar-month-dropdown {
  position: relative;
  min-width: 140px;
}
.calendar-month-display {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid transparent;
  cursor: pointer;
  transition: border-color .15s;
  text-align: center;
  user-select: none;
}
.calendar-month-display:hover {
  border-color: var(--accent);
}
.calendar-month-display span {
  font-weight: 400;
  color: var(--dim);
  font-size: .8rem;
}
.calendar-month-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: .9rem;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
  gap: 16px;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 10px;
  color: var(--dim);
}
.calendar-legend .calendar-cell {
  width: 12px;
  height: 12px;
}

/* RESPONSIVE */
@media (min-width:701px){
  .calendar-month{max-width:640px}
  .calendar-weekdays{gap:2px}
  .calendar-weekdays span{font-size:.6rem;padding:2px 0}
  .calendar-days{gap:2px}
  .calendar-day{min-height:28px;font-size:.7rem}
  .calendar-dot{width:8px;height:8px}
  .calendar-month-nav{gap:4px;padding:2px 6px}
  .calendar-month-arrow{width:26px;height:26px}
  .calendar-month-display{font-size:.8rem;padding:4px 10px}
  .calendar-month-display span{font-size:.7rem}
  .calendar-header{margin-bottom:12px;padding-bottom:6px}
  .calendar-legend{margin-top:8px;font-size:9px;gap:3px}
  .calendar-month-dropdown{min-width:120px}
}