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

:root{
  --bg:#f7f1df;
  --text:#000;
  --card:#fff;
  --line:#000;
  --muted:#444;
  --accent:#ff4fd8;
  --acid:#b5ff34;
  --yellow:#ffe941;
  --shadow:#000;
  --panel:#111;
  --panelText:#fff;
}

body.dark{
  --bg:#050505;
  --text:#f7f1df;
  --card:#0b0b0b;
  --line:#333;
  --muted:#bdbdbd;
  --accent:#ff4fd8;
  --acid:#d8ff00;
  --yellow:#d8ff00;
  --shadow:#2a2a2a;
  --panel:#000;
  --panelText:#f7f1df;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .3s,color .3s;
}

a,button{
}

.cursor-dot{
  position:fixed;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid var(--text);
  z-index:9999;
  pointer-events:none;
  transform:translate(-50%,-50%);
}

.cursor-hand{
  position:fixed;
  z-index:9998;
  pointer-events:none;
  width:42px;
  height:42px;
  transform:translate(10px,8px) rotate(-12deg);
  filter:drop-shadow(3px 3px 0 #000);
  opacity:.98;
}

.cursor-hand::before{
  content:"";
  position:absolute;
  left:4px;
  top:0;
  width:0;
  height:0;
  border-left:14px solid var(--text);
  border-top:28px solid transparent;
  border-bottom:0 solid transparent;
  transform:skew(-12deg);
}

.cursor-hand::after{
  content:"";
  position:absolute;
  left:18px;
  top:24px;
  width:18px;
  height:7px;
  background:var(--text);
  transform:rotate(45deg);
}

.topbar{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px);
}

.logo{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--text);
}

.logo h1{
  font-family:'Archivo Black',sans-serif;
  font-size:34px;
  line-height:1;
  letter-spacing:-2px;
}

.logo p{
  font-size:10px;
  letter-spacing:3px;
  font-weight:bold;
}

.planet{
  width:54px;
  height:54px;
  border-radius:50%;
  border:3px solid var(--text);
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#000;
  font-size:24px;
  box-shadow:4px 4px 0 var(--shadow);
}

nav{
  display:flex;
  gap:10px;
}

nav button,
.actions button,
.hero-buttons span,
.topic-card button,
.category-grid button{
  border:2px solid var(--text);
  background:var(--card);
  color:var(--text);
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  box-shadow:4px 4px 0 var(--shadow);
  transition:.2s;
}

button:hover,
a:hover,
.hashtag-pill:hover{
  transform:translateY(-4px);
}

.search,
.theme-toggle{
  width:52px;
  height:52px;
  background:var(--acid) !important;
  color:#000 !important;
}

.menu-btn{
  background:var(--text) !important;
  color:var(--bg) !important;
}

.actions{
  display:flex;
  gap:10px;
}

.hashtag-bar{
  position:sticky;
  top:91px;
  z-index:80;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  padding:10px 0;
}

.hashtag-track{
  width:max-content;
  display:flex;
  gap:16px;
  align-items:center;
  animation:tagScroll 28s linear infinite;
  padding-left:16px;
}

.hashtag-track:hover{
  animation-play-state:paused;
}

.hashtag-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:2px solid var(--text);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:8px 16px;
  font-size:24px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
  transition:.2s;
}

.hashtag-pill.active{
  background:var(--yellow);
  color:#000;
}

.emoji{
  font-size:34px;
  line-height:1;
}

@keyframes tagScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.overlay{
  position:fixed;
  inset:0;
  background:#000;
  color:#f7f1df;
  z-index:200;
  padding:40px;
  display:none;
}

.overlay.active{
  display:block;
}

.overlay-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.overlay-header p{
  color:var(--acid);
  letter-spacing:5px;
  font-weight:900;
}

.overlay-header h2{
  font-family:'Archivo Black',sans-serif;
  font-size:120px;
  letter-spacing:-6px;
}

.overlay-header button{
  width:70px;
  height:70px;
  border-radius:50%;
  border:none;
  font-size:30px;
  background:var(--accent);
}

.overlay-links{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px;
}

.overlay-links a{
  color:#fff;
  text-decoration:none;
  font-size:52px;
  font-weight:900;
  border-bottom:2px solid #fff;
}

.breaking{
  display:flex;
  gap:20px;
  margin:18px 24px 0;
  padding:14px 20px;
  border:2px solid var(--accent);
  border-radius:999px;
  overflow:hidden;
  color:var(--accent);
  font-weight:900;
  transition:.2s ease;
}

.breaking:hover{
  background:var(--accent);
  color:#000;
}

.breaking span{
  color:inherit;
  white-space:nowrap;
}

.hero{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
  padding:24px;
  align-items:stretch;
}

.hero-card{
  position:relative;
  display:block;
  min-height:520px;
  border:2px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--card) 90%, transparent) 0 42%, transparent),
    url('https://images.unsplash.com/photo-1619983081563-430f63602796?auto=format&fit=crop&w=1400&q=80') center/cover;
  padding:42px;
  color:var(--text);
  text-decoration:none;
  overflow:hidden;
}

.hero-card:after{
  content:"☻";
  position:absolute;
  right:46px;
  bottom:32px;
  font-size:80px;
  color:var(--accent);
  text-shadow:4px 4px 0 #000;
}

.pickup{
  position:absolute;
  top:18px;
  right:20px;
  background:var(--acid);
  color:#000;
  border:2px solid #000;
  padding:10px 18px;
  border-radius:999px;
  font-weight:900;
  transform:rotate(4deg);
}

.tiny{
  letter-spacing:4px;
  font-size:12px;
  font-weight:900;
}

.hero-card h2{
  font-family:'Archivo Black',sans-serif;
  font-size:68px;
  line-height:.92;
  max-width:560px;
  margin-top:28px;
  letter-spacing:-3px;
}

.desc{
  margin-top:20px;
  max-width:420px;
  font-size:18px;
  font-weight:500;
}

.hero-buttons{
  display:flex;
  gap:14px;
  margin-top:28px;
}

.pink{
  background:var(--yellow) !important;
  color:#000 !important;
}


.hero-side{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:20px;
  min-height:520px;
}

.side-card{
  border:2px solid var(--line);
  border-radius:28px;
  background:var(--card);
  padding:26px;
  overflow:hidden;
  color:var(--text);
}

.pill-label{
  display:inline-block;
  color:#000;
  border-radius:999px;
  padding:10px 22px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:20px;
}

.pill-label.acid{ background:var(--acid); }
.pill-label.pink{ background:var(--accent); }

.most-read ol{
  list-style:none;
  display:grid;
}

.most-read li{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  align-items:start;
  padding:11px 0;
  border-bottom:1px solid color-mix(in srgb, var(--text) 18%, transparent);
}

.most-read li span{
  font-size:30px;
  line-height:1;
  font-weight:400;
}

.most-read li a{
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  line-height:1.35;
  text-transform:uppercase;
}

.view-all{
  display:inline-block;
  margin-top:16px;
  color:var(--yellow);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}

.agenda-card{
  background:var(--panel);
  color:var(--panelText);
}

.event-row{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid color-mix(in srgb, var(--panelText) 20%, transparent);
}

.event-row strong{
  font-size:30px;
  line-height:.9;
  font-weight:400;
}

.event-row strong span{
  display:block;
  font-size:12px;
  margin-top:4px;
}

.event-row p{
  font-size:14px;
  line-height:1.25;
  font-weight:900;
  text-transform:uppercase;
}

.event-row small{
  color:color-mix(in srgb, var(--panelText) 72%, transparent);
  font-weight:700;
}


.topics{
  padding:70px 24px;
}

.section-title{
  margin-bottom:30px;
}

.section-title p{
  letter-spacing:5px;
  font-size:12px;
  font-weight:900;
  color:var(--accent);
}

.section-title h2{
  font-family:'Archivo Black',sans-serif;
  font-size:92px;
  line-height:.9;
  letter-spacing:-4px;
}

.article-grid{
  display:grid;
  gap:24px;
}

.topic-card{
  display:grid;
  grid-template-columns:90px 180px 220px 1fr 100px;
  gap:20px;
  align-items:center;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  text-decoration:none;
  padding:20px;
  transition:.2s;
}

.topic-card img{
  width:100%;
  height:130px;
  object-fit:cover;
  border:1px solid var(--line);
  filter:saturate(.85) contrast(1.05);
}

.number{
  font-size:64px;
  font-weight:900;
}

.meta span,
.tag-mini{
  display:inline-block;
  margin-top:8px;
  background:var(--acid);
  color:#000;
  border:1px solid #000;
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:900;
}

.content h3{
  font-family:'Archivo Black',sans-serif;
  font-size:34px;
  line-height:1;
  letter-spacing:-1px;
}

.content p{
  margin-top:10px;
  color:var(--muted);
}

.topic-card button{
  background:var(--accent);
  color:#000;
}

.empty-state{
  display:none;
  padding:30px;
  border:1px solid var(--line);
  font-weight:900;
}

.ranking{
  background:var(--panel);
  color:var(--panelText);
  padding:70px 24px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.center{
  text-align:center;
}

.ranking-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
}

.rank-card{
  border:1px solid color-mix(in srgb, var(--panelText) 40%, transparent);
  padding:24px;
  min-height:220px;
}

.rank-card span{
  color:var(--acid);
  font-weight:900;
}

.rank-card h3{
  margin-top:16px;
  font-family:'Archivo Black',sans-serif;
  font-size:28px;
  line-height:1.1;
}

.categories{
  padding:70px 24px;
}

.category-card{
  border:1px solid var(--line);
  padding:30px;
}

.category-card p{
  letter-spacing:5px;
  font-weight:900;
  color:var(--accent);
}

.category-card h2{
  font-family:'Archivo Black',sans-serif;
  font-size:72px;
}

.category-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:24px;
}

.category-grid button{
  border-radius:0;
  padding:30px 12px;
  font-size:18px;
}

.article-page{
  padding:52px 24px 90px;
  max-width:1320px;
  margin:auto;
}

.back-link{
  color:var(--text);
  text-decoration:none;
  font-weight:900;
}

.article-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:50px;
  margin-top:36px;
}

.article-main h1{
  font-family:'Archivo Black',sans-serif;
  font-size:72px;
  line-height:.95;
  letter-spacing:-3px;
  max-width:900px;
}

.article-kicker{
  display:inline-block;
  color:var(--acid);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:20px;
  font-weight:900;
}

.article-meta{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin:24px 0 40px;
  font-weight:900;
  color:var(--muted);
}

.article-image{
  width:100%;
  height:520px;
  object-fit:cover;
  border:1px solid var(--line);
}

.article-body{
  max-width:820px;
  margin-top:40px;
}

.article-body p{
  font-size:20px;
  line-height:1.65;
  margin-bottom:24px;
}

.article-quote{
  margin:40px 0;
  color:var(--yellow);
  font-family:'Archivo Black',sans-serif;
  font-size:32px;
  line-height:1.1;
  text-transform:uppercase;
}

.article-sidebar{
  border-left:1px solid var(--line);
  padding-left:28px;
}

.article-sidebar h3{
  font-size:18px;
  letter-spacing:2px;
  margin-bottom:18px;
}

.share{
  display:flex;
  gap:12px;
  margin-bottom:40px;
}

.share a{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  border-radius:50%;
  font-weight:900;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}

.share a:hover{
  transform:translateY(-2px);
  background:var(--accent);
  color:#000;
}

.share a[data-share-x]{
  font-size:18px;
  letter-spacing:0;
}

.sidebar-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:42px;
}

.sidebar-tags a{
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px;
  font-size:12px;
  font-weight:900;
}

.related{
  display:grid;
  gap:20px;
}

.related a{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:14px;
  color:var(--text);
  text-decoration:none;
}

.related img{
  width:80px;
  height:80px;
  object-fit:cover;
  border:1px solid var(--line);
}

.related h4{
  font-size:14px;
  line-height:1.2;
}

.related p{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

footer{
  text-align:center;
  padding:60px 24px;
  background:#000;
  color:#fff;
}

footer h2{
  font-family:'Archivo Black',sans-serif;
  font-size:120px;
  line-height:1;
  margin-top:12px;
  letter-spacing:-6px;
}

@media(max-width:980px){
  body{
    cursor:auto;
  }

  a,button{
    cursor:pointer;
  }

  .cursor-dot,.cursor-hand{
    display:none;
  }

  nav{
    display:none;
  }

  .topbar{
    padding:14px;
  }

  .logo h1{
    font-size:28px;
  }

  .logo p{
    display:none;
  }

  .hashtag-bar{
    top:82px;
  }

  .hashtag-pill{
    font-size:20px;
  }

  .hero{
    grid-template-columns:1fr;
    padding:14px;
  }

  .hero-side{
    min-height:auto;
    grid-template-rows:auto auto;
  }

  .hero-card{
    min-height:560px;
    background:
      linear-gradient(0deg, color-mix(in srgb, var(--card) 90%, transparent) 0 48%, transparent),
      url('https://images.unsplash.com/photo-1619983081563-430f63602796?auto=format&fit=crop&w=1400&q=80') center/cover;
    padding:24px;
  }

  .hero-card h2{
    font-size:44px;
    margin-top:240px;
  }

  .breaking{
    margin:14px;
  }

  .section-title h2{
    font-size:52px;
  }

  .topic-card{
    grid-template-columns:1fr;
  }

  .topic-card img{
    height:220px;
  }

  .ranking-grid,
  .category-grid{
    grid-template-columns:1fr;
  }

  .article-shell{
    grid-template-columns:1fr;
  }

  .article-main h1{
    font-size:44px;
  }

  .article-image{
    height:360px;
  }

  .article-sidebar{
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--line);
    padding-top:28px;
  }

  footer h2{
    font-size:70px;
  }

  .overlay-header h2{
    font-size:64px;
  }

  .overlay-links{
    grid-template-columns:1fr;
  }

  .overlay-links a{
    font-size:34px;
  }
}


/* v4 hero refinements */
.hero{
  grid-template-columns:2fr 1fr;
  align-items:stretch;
}

.hero-card{
  min-height:520px;
  border:4px solid var(--text);
  border-radius:36px;
  background:var(--card) !important;
  box-shadow:10px 10px 0 var(--shadow);
  color:var(--text);
}

.hero-card:after{
  display:none;
}

.hero-card h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:92px;
  line-height:.88;
  max-width:760px;
  letter-spacing:-4px;
}

.hero-card .desc{
  max-width:720px;
  font-size:22px;
  font-weight:700;
}

.hero-side.single{
  display:block;
  min-height:520px;
}

.agenda-feature{
  height:100%;
  border:4px solid var(--text);
  border-radius:36px;
  box-shadow:10px 10px 0 var(--shadow);
  background:var(--panel);
}

.agenda-feature h3{
  font-family:'Archivo Black',sans-serif;
  font-size:42px;
  line-height:1;
  margin-bottom:20px;
}

.agenda-feature .event-row{
  padding:18px 0;
}

.rotation{
  padding:70px 24px;
}

.rotation-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.rotation-card{
  position:relative;
  min-height:360px;
  overflow:hidden;
  border:4px solid var(--text);
  border-radius:28px;
  color:#fff;
  text-decoration:none;
  background:#000;
  box-shadow:8px 8px 0 var(--shadow);
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.rotation-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.72;
  transition:.25s;
}

.rotation-card:hover img{
  transform:scale(1.05);
  opacity:.9;
}

.rotation-card span,
.rotation-card h3,
.rotation-card p{
  position:relative;
  z-index:1;
}

.rotation-card span{
  width:max-content;
  background:var(--yellow);
  color:#000;
  border:2px solid #000;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  margin-bottom:12px;
}

.rotation-card h3{
  font-family:'Archivo Black',sans-serif;
  font-size:28px;
  line-height:1;
}

.rotation-card p{
  margin-top:14px;
  font-weight:900;
}

.newsletter-block{
  margin:0 24px 70px;
  border:4px solid var(--text);
  border-radius:36px;
  background:var(--accent);
  color:#000;
  box-shadow:10px 10px 0 var(--shadow);
  padding:34px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:center;
}

.newsletter-block p{
  font-weight:900;
  letter-spacing:.4em;
}

.newsletter-block h2{
  font-family:'Archivo Black',sans-serif;
  font-size:54px;
  line-height:.95;
  margin:8px 0;
}

.newsletter-block span{
  font-weight:800;
}

.newsletter-block form{
  display:flex;
  gap:10px;
}

.newsletter-block input{
  width:100%;
  border:3px solid #000;
  border-radius:999px;
  padding:16px 20px;
  font:inherit;
  font-weight:800;
}

.newsletter-block button{
  white-space:nowrap;
  border:3px solid #000;
  border-radius:999px;
  background:var(--yellow);
  padding:16px 20px;
  font-weight:900;
  box-shadow:4px 4px 0 #000;
}

@media(max-width:980px){
  .hero{
    grid-template-columns:1fr;
  }

  .hero-card{
    min-height:auto;
  }

  .hero-card h2{
    font-size:54px;
    margin-top:24px;
  }

  .hero-side.single{
    min-height:auto;
  }

  .rotation-grid,
  .newsletter-block{
    grid-template-columns:1fr;
  }

  .newsletter-block form{
    flex-direction:column;
  }
}


/* v5 featured carousel */
.featured-carousel{
  position:relative;
  margin:24px;
  min-height:580px;
}

.featured-track{
  position:relative;
  min-height:580px;
}

.featured-slide{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:52px;
  border:4px solid var(--text);
  border-radius:36px;
  color:#000;
  text-decoration:none;
  overflow:hidden;
  box-shadow:10px 10px 0 var(--shadow);
  background:
    linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.82) 45%, rgba(255,255,255,.2) 100%),
    var(--bgimg) center/cover;
  opacity:0;
  pointer-events:none;
  transform:translateX(18px);
  transition:.45s ease;
}

.featured-slide.active{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}

.featured-slide .tiny{
  letter-spacing:8px;
  font-size:13px;
  font-weight:900;
}

.featured-slide h2{
  max-width:820px;
  margin-top:24px;
  font-family:'Archivo Black',sans-serif;
  font-size:70px;
  line-height:.94;
  letter-spacing:-3px;
}

.featured-slide .desc{
  max-width:620px;
  margin-top:24px;
  font-size:20px;
  font-weight:800;
}

.read-btn{
  width:max-content;
  margin-top:30px;
  border:3px solid #000;
  border-radius:999px;
  background:var(--yellow);
  color:#000;
  padding:14px 22px;
  font-weight:900;
  box-shadow:5px 5px 0 #000;
}

.carousel-controls{
  position:absolute;
  left:52px;
  bottom:32px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:14px;
}

.carousel-controls button{
  width:44px;
  height:44px;
  border:2px solid #000;
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:#000;
  font-weight:900;
}

.carousel-dots{
  display:flex;
  gap:9px;
}

.carousel-dots button{
  width:10px;
  height:10px;
  border:0;
  background:rgba(0,0,0,.35);
  padding:0;
  box-shadow:none;
}

.carousel-dots button.active{
  background:var(--accent);
  transform:scale(1.4);
}

.agenda-strip{
  margin:0 24px 54px;
  border:4px solid var(--text);
  border-radius:36px;
  background:var(--panel);
  color:var(--panelText);
  box-shadow:10px 10px 0 var(--shadow);
  padding:26px;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:24px;
  align-items:center;
}

.agenda-title span{
  display:inline-block;
  background:var(--accent);
  color:#000;
  border-radius:999px;
  padding:10px 20px;
  font-weight:900;
  margin-bottom:14px;
}

.agenda-title h3{
  font-family:'Archivo Black',sans-serif;
  font-size:34px;
  line-height:1;
}

.agenda-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.agenda-list .event-row{
  border-bottom:0;
  border-left:1px solid color-mix(in srgb, var(--panelText) 22%, transparent);
  padding:0 0 0 18px;
}

.news-card-list{
  display:grid;
  gap:18px;
}

.news-style-card{
  position:relative;
  min-height:220px;
  grid-template-columns:90px 1fr 120px !important;
  border:4px solid var(--text);
  border-radius:30px;
  overflow:hidden;
  box-shadow:8px 8px 0 var(--shadow);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--card) 96%, transparent) 0%, color-mix(in srgb, var(--card) 88%, transparent) 58%, transparent 100%),
    var(--cardimg) right center/520px auto no-repeat;
}

.news-style-card img,
.news-style-card .meta{
  display:none;
}

.news-style-card .content h3{
  max-width:760px;
  font-size:38px;
}

.news-style-card .content p{
  max-width:620px;
  font-weight:700;
}

.news-style-card small{
  display:block;
  margin-top:16px;
  color:var(--muted);
  font-weight:900;
}

.news-style-card button{
  align-self:end;
  background:var(--yellow);
  color:#000;
}

.more-news-wrap{
  display:flex;
  justify-content:center;
  margin-top:30px;
}

.more-news-btn{
  display:inline-block;
  border:4px solid var(--text);
  border-radius:999px;
  background:var(--accent);
  color:#000;
  text-decoration:none;
  padding:18px 34px;
  font-weight:900;
  box-shadow:7px 7px 0 var(--shadow);
}

.news-page{
  padding:54px 24px 80px;
}

.all-news .news-style-card{
  min-height:250px;
}

@media(max-width:980px){
  .featured-carousel,
  .featured-track{
    min-height:620px;
    margin:14px;
  }

  .featured-slide{
    padding:26px;
    justify-content:flex-end;
    background:
      linear-gradient(0deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 54%, rgba(255,255,255,.1) 100%),
      var(--bgimg) center/cover;
  }

  .featured-slide h2{
    font-size:42px;
  }

  .carousel-controls{
    left:26px;
    bottom:24px;
  }

  .agenda-strip{
    grid-template-columns:1fr;
    margin:0 14px 44px;
  }

  .agenda-list{
    grid-template-columns:1fr;
  }

  .agenda-list .event-row{
    border-left:0;
    border-bottom:1px solid color-mix(in srgb, var(--panelText) 22%, transparent);
    padding:12px 0;
  }

  .news-style-card{
    grid-template-columns:1fr !important;
    background:
      linear-gradient(0deg, color-mix(in srgb, var(--card) 96%, transparent) 0%, color-mix(in srgb, var(--card) 88%, transparent) 65%, transparent 100%),
      var(--cardimg) center/cover;
    padding-top:190px;
  }

  .news-style-card .content h3{
    font-size:30px;
  }
}


/* v6: featured 3/5 + events 2/5 */
.featured-layout{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:24px;
  margin:24px;
  align-items:stretch;
}

.featured-layout .featured-carousel{
  margin:0;
  min-height:580px;
}

.featured-layout .featured-track{
  min-height:580px;
}

.featured-layout .featured-slide{
  min-height:580px;
}

.featured-layout .featured-slide h2{
  font-size:54px;
  max-width:680px;
}

.featured-layout .featured-slide .desc{
  max-width:520px;
}

.events-panel{
  min-height:580px;
  border:4px solid var(--text);
  border-radius:36px;
  background:var(--panel);
  color:var(--panelText);
  box-shadow:10px 10px 0 var(--shadow);
  padding:28px;
  display:flex;
  flex-direction:column;
}

.events-panel .agenda-title span{
  display:inline-block;
  background:var(--accent);
  color:#000;
  border-radius:999px;
  padding:10px 22px;
  font-weight:900;
  margin-bottom:18px;
}

.events-panel .agenda-title h3{
  font-family:'Archivo Black',sans-serif;
  font-size:38px;
  line-height:.95;
  margin-bottom:18px;
}

.events-list{
  display:grid;
  gap:0;
}

.events-panel .event-row{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid color-mix(in srgb, var(--panelText) 22%, transparent);
}

.events-panel .event-row strong{
  font-size:34px;
  line-height:.9;
  font-weight:400;
}

.events-panel .event-row strong span{
  display:block;
  font-size:12px;
  margin-top:4px;
}

.events-panel .event-row p{
  font-size:15px;
  line-height:1.25;
  font-weight:900;
  text-transform:uppercase;
}

.events-panel .event-row small{
  color:color-mix(in srgb, var(--panelText) 72%, transparent);
  font-weight:700;
}

.events-more{
  margin-top:auto;
  display:block;
  width:max-content;
  border:3px solid #000;
  border-radius:999px;
  background:var(--yellow);
  color:#000;
  text-decoration:none;
  padding:14px 20px;
  font-weight:900;
  box-shadow:5px 5px 0 #000;
}

@media(max-width:980px){
  .featured-layout{
    grid-template-columns:1fr;
    margin:14px;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track,
  .featured-layout .featured-slide,
  .events-panel{
    min-height:620px;
  }

  .featured-layout .featured-slide h2{
    font-size:42px;
  }

  .events-panel{
    min-height:auto;
  }
}


/* v7: featured 4/5 + events 1/5 */
.featured-layout{
  grid-template-columns:4fr 1fr;
}

.featured-layout .featured-slide h2{
  font-size:64px;
  max-width:820px;
}

.featured-layout .featured-slide .desc{
  max-width:620px;
}

.carousel-controls{
  left:auto;
  right:32px;
  bottom:28px;
  max-width:calc(100% - 64px);
}

.carousel-controls button{
  flex:0 0 auto;
}

.events-panel{
  padding:22px;
}

.events-panel .agenda-title h3{
  font-size:28px;
}

.events-panel .agenda-title span{
  padding:8px 16px;
  margin-bottom:14px;
}

.events-panel .event-row{
  grid-template-columns:46px 1fr;
  gap:12px;
  padding:14px 0;
}

.events-panel .event-row strong{
  font-size:28px;
}

.events-panel .event-row p{
  font-size:12px;
}

.events-more{
  width:100%;
  text-align:center;
  padding:12px 14px;
  font-size:12px;
}

.article-kicker{
  color:#000 !important;
  background:var(--yellow);
  border-color:#000;
}

.events-page{
  padding:54px 24px 80px;
}

.events-directory{
  display:grid;
  gap:18px;
}

.event-directory-card{
  display:grid;
  grid-template-columns:110px 1fr 150px;
  gap:24px;
  align-items:center;
  border:4px solid var(--text);
  border-radius:30px;
  background:var(--card);
  color:var(--text);
  padding:24px;
  box-shadow:8px 8px 0 var(--shadow);
}

.event-directory-card strong{
  font-size:52px;
  line-height:.9;
  font-weight:400;
}

.event-directory-card strong span{
  display:block;
  font-size:16px;
  margin-top:6px;
}

.event-directory-card h3{
  font-family:'Archivo Black',sans-serif;
  font-size:34px;
  line-height:1;
}

.event-directory-card p{
  margin-top:8px;
  color:var(--muted);
  font-weight:900;
}

.event-directory-card > span{
  justify-self:end;
  border:2px solid #000;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  padding:10px 16px;
  font-weight:900;
  font-size:13px;
}

@media(max-width:980px){
  .featured-layout{
    grid-template-columns:1fr;
  }

  .carousel-controls{
    left:26px;
    right:auto;
    bottom:24px;
  }

  .event-directory-card{
    grid-template-columns:1fr;
  }

  .event-directory-card > span{
    justify-self:start;
  }
}


/* v8 desktop layout cleanup */
.news-list-section,
.rotation,
.newsletter-block{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* v8 mobile UX refinements */
@media(max-width:980px){

  body{
    overflow-x:hidden;
  }

  .logo h1{
    font-size:24px;
  }

  .planet{
    width:42px;
    height:42px;
    font-size:18px;
  }

  .hashtag-pill{
    font-size:15px;
    padding:8px 12px;
  }

  .emoji{
    font-size:22px;
  }

  .featured-layout{
    gap:16px;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track{
    min-height:500px;
  }

  .featured-layout .featured-slide{
    min-height:500px;
    border-radius:24px;
    padding:22px;
    justify-content:flex-end;
  }

  .featured-layout .featured-slide h2{
    font-size:34px !important;
    line-height:.95;
    max-width:100%;
  }

  .featured-slide .tiny{
    font-size:10px;
    letter-spacing:4px;
  }

  .featured-layout .featured-slide .desc{
    font-size:15px;
    line-height:1.35;
    margin-top:14px;
  }

  .pickup{
    top:16px;
    right:16px;
    padding:8px 14px;
    font-size:12px;
  }

  .read-btn{
    margin-top:18px;
    padding:12px 16px;
    font-size:13px;
  }

  .carousel-controls{
    left:22px !important;
    right:22px !important;
    bottom:18px !important;
    justify-content:space-between;
    width:auto;
  }

  .carousel-controls button{
    width:38px;
    height:38px;
  }

  .carousel-dots{
    flex:1;
    justify-content:center;
  }

  .events-panel{
    min-height:auto !important;
    border-radius:24px;
    padding:18px;
  }

  .events-panel .agenda-title h3{
    font-size:22px;
  }

  .events-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .events-panel .event-row{
    grid-template-columns:40px 1fr;
    gap:10px;
    padding:10px 0;
    border-bottom:0;
  }

  .events-panel .event-row strong{
    font-size:22px;
  }

  .events-panel .event-row p{
    font-size:11px;
  }

  .events-more{
    margin-top:14px;
  }

  .section-title h2{
    font-size:38px;
  }

  .news-style-card{
    min-height:180px !important;
    border-radius:22px;
    padding-top:150px;
    padding-inline:18px;
  }

  .news-style-card .number{
    font-size:42px;
  }

  .news-style-card .content h3{
    font-size:24px !important;
  }

  .news-style-card .content p{
    font-size:13px;
    line-height:1.35;
  }

  .news-style-card button{
    width:100%;
    padding:12px;
    font-size:12px;
  }

  .rotation-card{
    min-height:250px;
    border-radius:22px;
    padding:18px;
  }

  .rotation-card h3{
    font-size:22px;
  }

  .newsletter-block{
    margin:0 14px 50px;
    border-radius:24px;
    padding:22px;
  }

  .newsletter-block h2{
    font-size:34px;
  }

  .newsletter-block span{
    font-size:14px;
  }

  .article-main h1{
    font-size:34px;
  }

  .article-body p{
    font-size:16px;
  }

  .article-quote{
    font-size:22px;
  }

  .article-image{
    height:240px;
    border-radius:18px;
  }

  footer h2{
    font-size:52px;
  }
}


/* v9: desktop 4/6 centered layout */
@media(min-width:981px){
  .featured-layout,
  .news-list-section,
  .rotation,
  .newsletter-block{
    width:66.666%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }

  .featured-layout{
    grid-template-columns:3fr 1fr;
  }

  .featured-layout .featured-slide h2{
    font-size:54px;
    max-width:680px;
  }

  .featured-layout .featured-slide .desc{
    max-width:520px;
  }

  .events-panel .agenda-title h3{
    font-size:28px;
  }

  .events-panel .event-row{
    grid-template-columns:46px 1fr;
    gap:12px;
    padding:14px 0;
  }

  .events-panel .event-row strong{
    font-size:28px;
  }

  .events-panel .event-row p{
    font-size:12px;
  }
}


/* v10 refinements */
.featured-slide{
  padding-bottom:118px;
}

.featured-slide .read-btn{
  position:absolute;
  left:52px;
  bottom:32px;
  margin-top:0;
  z-index:6;
}

.news-style-card .content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.news-style-card .tag-mini{
  margin-bottom:18px;
}

.news-style-card .content h3{
  font-size:30px !important;
  max-width:680px;
}

.events-page{
  width:66.666%;
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}

.event-directory-card p{
  font-size:16px;
}

@media(max-width:980px){
  .featured-slide{
    padding-bottom:88px;
  }

  .featured-slide .read-btn{
    left:22px;
    bottom:18px;
    max-width:calc(100% - 160px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .news-style-card .tag-mini{
    margin-bottom:14px;
  }

  .news-style-card .content h3{
    font-size:22px !important;
  }

  .events-page{
    width:auto;
    padding:54px 14px 80px;
  }
}


/* v11 fixes */
/* Desktop: smoother image blend in New Topics */
@media(min-width:981px){
  .news-style-card{
    background:
      linear-gradient(90deg,
        var(--card) 0%,
        var(--card) 54%,
        color-mix(in srgb, var(--card) 92%, transparent) 66%,
        color-mix(in srgb, var(--card) 62%, transparent) 78%,
        transparent 100%),
      var(--cardimg) right center/560px auto no-repeat;
  }

  .news-style-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      transparent 0%,
      transparent 52%,
      color-mix(in srgb, var(--card) 78%, transparent) 68%,
      transparent 92%);
  }

  .news-style-card > *{
    position:relative;
    z-index:1;
  }
}

/* Mobile: featured carousel controls + read button layout */
@media(max-width:980px){
  .featured-layout .featured-carousel,
  .featured-layout .featured-track{
    min-height:560px;
  }

  .featured-layout .featured-slide{
    min-height:560px;
    padding:20px 20px 120px;
    background:
      linear-gradient(0deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.93) 38%,
        rgba(255,255,255,.45) 68%,
        rgba(255,255,255,.08) 100%),
      var(--bgimg) center/cover;
  }

  body.dark .featured-layout .featured-slide{
    background:
      linear-gradient(0deg,
        rgba(5,5,5,.96) 0%,
        rgba(5,5,5,.92) 42%,
        rgba(5,5,5,.45) 70%,
        rgba(5,5,5,.08) 100%),
      var(--bgimg) center/cover;
    color:#f7f1df;
  }

  .featured-layout .featured-slide h2{
    font-size:30px !important;
    line-height:.98;
  }

  .featured-layout .featured-slide .desc{
    font-size:14px;
    line-height:1.35;
    margin-bottom:18px;
  }

  .featured-slide .read-btn{
    left:20px;
    bottom:68px;
    max-width:calc(100% - 40px);
    padding:10px 14px;
    font-size:12px;
  }

  .carousel-controls{
    left:20px !important;
    right:20px !important;
    bottom:18px !important;
    width:auto;
    max-width:none;
    justify-content:center;
    gap:10px;
  }

  .carousel-controls button{
    width:30px;
    height:30px;
    min-width:30px;
    padding:0;
    font-size:12px;
    box-shadow:2px 2px 0 #000;
  }

  .carousel-dots{
    flex:0 1 auto;
    gap:7px;
  }

  .carousel-dots button{
    width:8px;
    height:8px;
    min-width:8px;
  }

  /* Mobile events panel refinement */
  .events-panel{
    padding:18px;
  }

  .events-panel .agenda-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }

  .events-panel .agenda-title span{
    margin-bottom:0;
    font-size:11px;
    padding:7px 12px;
  }

  .events-panel .agenda-title h3{
    font-size:20px;
    margin-bottom:0;
    text-align:right;
  }

  .events-list{
    grid-template-columns:1fr;
    gap:0;
  }

  .events-panel .event-row{
    grid-template-columns:46px 1fr;
    padding:12px 0;
    border-bottom:1px solid color-mix(in srgb, var(--panelText) 18%, transparent);
  }

  .events-panel .event-row:last-child{
    border-bottom:0;
  }

  .events-panel .event-row strong{
    font-size:24px;
  }

  .events-panel .event-row p{
    font-size:12px;
    line-height:1.25;
  }

  .events-more{
    margin-top:12px;
    padding:12px;
    font-size:12px;
  }
}


/* v12: En Rotación becomes music curation */
.now-playing-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px;
}

.now-main{
  border:4px solid var(--text);
  border-radius:30px;
  background:var(--panel);
  color:var(--panelText);
  box-shadow:8px 8px 0 var(--shadow);
  padding:24px;
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  align-items:center;
}

.cover-art{
  aspect-ratio:1;
  border:4px solid #000;
  border-radius:24px;
  background:
    radial-gradient(circle at 35% 35%, var(--accent), transparent 30%),
    radial-gradient(circle at 70% 60%, var(--acid), transparent 28%),
    linear-gradient(135deg, #111, #333);
  display:grid;
  place-items:center;
  font-size:76px;
  color:#fff;
  box-shadow:6px 6px 0 #000;
}

.now-main span{
  display:inline-block;
  background:var(--yellow);
  color:#000;
  border:2px solid #000;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
  margin-bottom:14px;
}

.now-main h3{
  font-family:'Archivo Black',sans-serif;
  font-size:54px;
  line-height:.9;
}

.now-main p{
  margin-top:8px;
  font-size:20px;
  font-weight:900;
}

.now-main small{
  display:block;
  margin-top:12px;
  max-width:420px;
  color:color-mix(in srgb, var(--panelText) 75%, transparent);
  font-size:14px;
  line-height:1.4;
}

.now-main button{
  margin-top:18px;
  border:3px solid #000;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  padding:12px 18px;
  font-weight:900;
  box-shadow:4px 4px 0 #000;
}

.track-list{
  display:grid;
  gap:14px;
}

.track-list article{
  border:4px solid var(--text);
  border-radius:24px;
  background:var(--card);
  color:var(--text);
  box-shadow:6px 6px 0 var(--shadow);
  padding:18px;
  display:grid;
  grid-template-columns:54px 1fr;
  gap:16px;
  align-items:center;
}

.track-list strong{
  font-size:34px;
  line-height:1;
  font-weight:400;
}

.track-list h4{
  font-family:'Archivo Black',sans-serif;
  font-size:22px;
  line-height:1;
}

.track-list p{
  color:var(--muted);
  font-size:13px;
  margin-top:6px;
  font-weight:900;
}

/* v12 mobile fixes */
@media(max-width:980px){
  .featured-layout{
    margin:14px;
    gap:14px;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track,
  .events-panel{
    width:100%;
    max-width:100%;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track{
    min-height:520px;
    margin:0;
  }

  .featured-layout .featured-slide{
    min-height:520px;
    padding:20px 20px 112px;
  }

  .featured-slide .read-btn{
    bottom:62px;
    left:20px;
    max-width:calc(100% - 40px);
  }

  .carousel-controls{
    left:20px !important;
    right:20px !important;
    bottom:16px !important;
    width:calc(100% - 40px) !important;
    max-width:calc(100% - 40px) !important;
    display:grid;
    grid-template-columns:30px 1fr 30px;
    align-items:center;
  }

  .carousel-controls button{
    width:28px;
    height:28px;
    min-width:28px;
    padding:0;
  }

  .carousel-dots{
    justify-content:center;
    min-width:0;
  }

  /* New Topics mobile: horizontal compact, no image */
  .news-style-card{
    min-height:auto !important;
    padding:16px !important;
    display:grid;
    grid-template-columns:48px 1fr;
    align-items:start;
    background:var(--card) !important;
    border-radius:20px;
  }

  .news-style-card .number{
    font-size:32px;
    line-height:1;
  }

  .news-style-card .content h3{
    font-size:19px !important;
    line-height:1.05;
  }

  .news-style-card .content p{
    display:none;
  }

  .news-style-card small{
    font-size:10px;
    margin-top:10px;
  }

  .news-style-card button{
    grid-column:1 / -1;
    margin-top:10px;
  }

  .news-style-card::after{
    display:none;
  }

  .now-playing-grid{
    grid-template-columns:1fr;
  }

  .now-main{
    grid-template-columns:92px 1fr;
    gap:16px;
    padding:18px;
    border-radius:24px;
  }

  .cover-art{
    border-radius:18px;
    font-size:38px;
  }

  .now-main h3{
    font-size:32px;
  }

  .now-main p{
    font-size:15px;
  }

  .now-main small{
    display:none;
  }

  .now-main button{
    padding:10px 14px;
    font-size:12px;
  }

  .track-list article{
    grid-template-columns:42px 1fr;
    padding:14px;
    border-radius:18px;
  }

  .track-list strong{
    font-size:26px;
  }

  .track-list h4{
    font-size:18px;
  }
}


/* v13: interactive En Rotación */
.rotation-read-btn{
  display:inline-block;
  margin-top:18px;
  border:3px solid #000;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  text-decoration:none;
  padding:12px 18px;
  font-weight:900;
  box-shadow:4px 4px 0 #000;
}

.now-main button{
  display:none;
}

.rotation-selector{
  gap:10px;
}

.rotation-selector button{
  width:100%;
  text-align:left;
  border:4px solid var(--text);
  border-radius:22px;
  background:var(--card);
  color:var(--text);
  box-shadow:5px 5px 0 var(--shadow);
  padding:14px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:14px;
  align-items:center;
  transition:.2s;
}

.rotation-selector button:hover,
.rotation-selector button.active{
  background:var(--yellow);
  color:#000;
  transform:translateY(-3px);
}

.rotation-selector button.active{
  box-shadow:5px 5px 0 var(--accent);
}

.rotation-selector button strong{
  font-size:28px;
  line-height:1;
  font-weight:400;
}

.rotation-selector button h4{
  font-family:'Archivo Black',sans-serif;
  font-size:20px;
  line-height:1;
}

.rotation-selector button p{
  font-size:12px;
  margin-top:5px;
  font-weight:900;
  color:inherit;
  opacity:.75;
}

@media(max-width:980px){
  .rotation-selector button{
    grid-template-columns:38px 1fr;
    padding:12px;
    border-radius:18px;
  }

  .rotation-selector button strong{
    font-size:24px;
  }

  .rotation-selector button h4{
    font-size:17px;
  }

  .rotation-read-btn{
    padding:10px 14px;
    font-size:12px;
  }
}


/* v14: rotation viewer cover art + button positioning */
.now-main{
  position:relative;
  padding-bottom:88px;
}

.cover-art{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(0,0,0,.25), rgba(0,0,0,.55)),
    var(--cover) center/cover no-repeat;
}

.cover-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 30%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.25) 100%);
}

.cover-art{
  color:#fff;
  text-shadow:3px 3px 0 rgba(0,0,0,.55);
}

.rotation-read-btn{
  position:absolute;
  right:24px;
  bottom:24px;
  margin-top:0;
}

@media(max-width:980px){
  .now-main{
    padding-bottom:78px;
  }

  .rotation-read-btn{
    right:18px;
    bottom:18px;
  }
}


/* v15: clean album preview */
.cover-art{
  font-size:0 !important;
  text-shadow:none !important;
}

.cover-art::before{
  display:none;
}


/* v16 mobile carousel dots + mobile news cards + archive news */
@media(max-width:980px){
  .carousel-dots{
    gap:5px;
  }

  .carousel-dots button{
    width:5px !important;
    height:5px !important;
    min-width:5px !important;
    border-radius:50%;
  }

  .carousel-dots button.active{
    transform:scale(1.15);
  }

  .news-style-card{
    min-height:168px !important;
    padding:16px !important;
    display:grid;
    grid-template-columns:44px 1fr;
    align-items:start;
    overflow:hidden;
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--card) 96%, transparent) 0%,
        color-mix(in srgb, var(--card) 90%, transparent) 58%,
        color-mix(in srgb, var(--card) 60%, transparent) 78%,
        transparent 100%),
      var(--cardimg) right center/230px auto no-repeat !important;
  }

  body.dark .news-style-card{
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--card) 98%, transparent) 0%,
        color-mix(in srgb, var(--card) 92%, transparent) 58%,
        color-mix(in srgb, var(--card) 65%, transparent) 78%,
        transparent 100%),
      var(--cardimg) right center/230px auto no-repeat !important;
  }

  .news-style-card .content p{
    display:block !important;
    max-width:92%;
    font-size:12px;
    line-height:1.28;
    margin-top:8px;
  }

  .news-style-card button{
    grid-column:1 / -1;
    margin-top:10px;
  }
}

/* news archive page: no rank number */
.archive-card{
  grid-template-columns:1fr 120px !important;
}

.archive-card .content h3{
  max-width:760px;
}

@media(max-width:980px){
  .archive-card{
    grid-template-columns:1fr !important;
  }
}


/* v17: hashtag filtering goes to news page + better image treatment */

/* Desktop archive news: same smooth fade as New Topics */
@media(min-width:981px){
  .archive-card{
    background:
      linear-gradient(90deg,
        var(--card) 0%,
        var(--card) 50%,
        color-mix(in srgb, var(--card) 92%, transparent) 64%,
        color-mix(in srgb, var(--card) 58%, transparent) 78%,
        transparent 100%),
      var(--cardimg) right center/560px auto no-repeat !important;
  }

  .archive-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      transparent 0%,
      transparent 48%,
      color-mix(in srgb, var(--card) 82%, transparent) 66%,
      transparent 94%);
  }

  .archive-card > *{
    position:relative;
    z-index:1;
  }
}

/* Mobile: image fills the whole news card with readable overlay */
@media(max-width:980px){
  .news-style-card,
  .archive-card{
    position:relative;
    min-height:190px !important;
    padding:16px !important;
    grid-template-columns:44px 1fr;
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--card) 98%, transparent) 0%,
        color-mix(in srgb, var(--card) 90%, transparent) 48%,
        color-mix(in srgb, var(--card) 62%, transparent) 70%,
        color-mix(in srgb, var(--card) 20%, transparent) 100%),
      var(--cardimg) center/cover no-repeat !important;
  }

  body.dark .news-style-card,
  body.dark .archive-card{
    background:
      linear-gradient(90deg,
        rgba(11,11,11,.98) 0%,
        rgba(11,11,11,.92) 48%,
        rgba(11,11,11,.68) 72%,
        rgba(11,11,11,.25) 100%),
      var(--cardimg) center/cover no-repeat !important;
  }

  .archive-card{
    grid-template-columns:1fr !important;
  }

  .archive-card .content{
    max-width:72%;
  }

  .news-style-card::after,
  .archive-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--card) 18%, transparent) 0%,
      transparent 55%,
      rgba(0,0,0,.16) 100%);
  }

  .news-style-card > *,
  .archive-card > *{
    position:relative;
    z-index:1;
  }

  .news-style-card .content p,
  .archive-card .content p{
    display:block !important;
    max-width:100%;
  }
}


/* v18: News archive layout + seamless fade */
@media(min-width:981px){
  .news-page{
    width:66.666% !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .news-page .article-grid,
  .news-page .news-card-list,
  .news-page .all-news{
    width:100%;
  }

  .news-page .archive-card{
    grid-template-columns:1fr 120px !important;
    position:relative;
    background:
      linear-gradient(90deg,
        var(--card) 0%,
        var(--card) 46%,
        color-mix(in srgb, var(--card) 96%, transparent) 57%,
        color-mix(in srgb, var(--card) 82%, transparent) 68%,
        color-mix(in srgb, var(--card) 50%, transparent) 82%,
        color-mix(in srgb, var(--card) 10%, transparent) 100%),
      var(--cardimg) right center/620px auto no-repeat !important;
  }

  .news-page .archive-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg,
        var(--card) 0%,
        color-mix(in srgb, var(--card) 98%, transparent) 48%,
        color-mix(in srgb, var(--card) 76%, transparent) 64%,
        color-mix(in srgb, var(--card) 24%, transparent) 86%,
        transparent 100%);
    z-index:0;
  }

  .news-page .archive-card::after{
    display:none !important;
  }

  .news-page .archive-card > *{
    position:relative;
    z-index:1;
  }
}


/* v30: clean empty state */
.empty-featured{
  background:var(--card) !important;
  color:var(--text);
  pointer-events:none;
}

.empty-events{
  color:var(--panelText);
  font-weight:900;
  line-height:1.4;
  opacity:.7;
}

.empty-rotation .cover-art{
  background:linear-gradient(135deg, var(--accent), var(--acid));
}





/* v35: rotation image fix without changing frame */
.cover-art{
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.32)),
    var(--cover) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* v36: editorial article quote + Spotify embed */
.article-highlight-quote{
  margin:56px 0;
  padding:0;
  border:0;
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(34px, 5vw, 72px);
  line-height:.95;
  letter-spacing:-.04em;
  text-transform:uppercase;
  color:var(--accent);
  max-width:980px;
}

body:not(.dark) .article-highlight-quote{
  color:#111;
  text-shadow:3px 3px 0 var(--accent);
}

body.dark .article-highlight-quote{
  color:var(--accent);
  text-shadow:3px 3px 0 #000;
}

.spotify-embed-wrap{
  margin-top:56px;
  border:3px solid var(--text);
  border-radius:28px;
  padding:22px;
  background:var(--card);
  box-shadow:8px 8px 0 var(--shadow);
}

.spotify-embed-wrap h3{
  font-family:'Archivo Black', sans-serif;
  font-size:28px;
  margin-bottom:16px;
  color:var(--text);
}

.spotify-embed-wrap iframe{
  display:block;
  border:0;
}

@media(max-width:980px){
  .article-highlight-quote{
    margin:38px 0;
    font-size:34px;
    line-height:1;
  }

  .spotify-embed-wrap{
    margin-top:38px;
    padding:14px;
    border-radius:22px;
  }
}


/* v37: featured cards show image stronger, content bottom half */
.featured-slide{
  justify-content:flex-end !important;
  padding:0 !important;
  background:
    linear-gradient(0deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.90) 34%,
      rgba(255,255,255,.48) 54%,
      rgba(255,255,255,.08) 76%,
      rgba(255,255,255,0) 100%),
    var(--bgimg) center/cover no-repeat !important;
}

body.dark .featured-slide{
  background:
    linear-gradient(0deg,
      rgba(5,5,5,.96) 0%,
      rgba(5,5,5,.90) 34%,
      rgba(5,5,5,.54) 54%,
      rgba(5,5,5,.10) 76%,
      rgba(5,5,5,0) 100%),
    var(--bgimg) center/cover no-repeat !important;
}

.featured-slide .tiny,
.featured-slide h2,
.featured-slide .desc{
  max-width:78%;
  margin-left:38px;
  margin-right:38px;
}

.featured-slide .tiny{
  margin-top:0 !important;
  margin-bottom:14px;
  font-size:11px !important;
  letter-spacing:5px !important;
}

.featured-slide h2{
  margin-top:0 !important;
  font-size:clamp(32px, 3.1vw, 54px) !important;
  line-height:.94 !important;
  letter-spacing:-2px !important;
}

.featured-slide .desc{
  margin-top:16px !important;
  margin-bottom:116px !important;
  font-size:16px !important;
  line-height:1.35 !important;
  max-width:60%;
}

.featured-slide .read-btn{
  left:38px !important;
  bottom:32px !important;
}

.featured-slide .pickup{
  top:24px;
  right:24px;
}

@media(max-width:980px){
  .featured-slide{
    padding:0 !important;
    background:
      linear-gradient(0deg,
        rgba(255,255,255,.97) 0%,
        rgba(255,255,255,.92) 42%,
        rgba(255,255,255,.52) 64%,
        rgba(255,255,255,.08) 84%,
        rgba(255,255,255,0) 100%),
      var(--bgimg) center/cover no-repeat !important;
  }

  body.dark .featured-slide{
    background:
      linear-gradient(0deg,
        rgba(5,5,5,.97) 0%,
        rgba(5,5,5,.92) 42%,
        rgba(5,5,5,.58) 64%,
        rgba(5,5,5,.10) 84%,
        rgba(5,5,5,0) 100%),
      var(--bgimg) center/cover no-repeat !important;
  }

  .featured-slide .tiny,
  .featured-slide h2,
  .featured-slide .desc{
    max-width:calc(100% - 40px);
    margin-left:20px;
    margin-right:20px;
  }

  .featured-slide h2{
    font-size:28px !important;
    letter-spacing:-1px !important;
  }

  .featured-slide .desc{
    font-size:13px !important;
    max-width:calc(100% - 40px);
    margin-bottom:96px !important;
  }

  .featured-slide .read-btn{
    left:20px !important;
    bottom:58px !important;
  }
}


/* v38: featured text only in bottom half, image clear on top */
.featured-slide{
  justify-content:flex-end !important;
  padding:0 !important;
  background:
    linear-gradient(0deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.92) 28%,
      rgba(255,255,255,.54) 48%,
      rgba(255,255,255,.12) 58%,
      rgba(255,255,255,0) 66%),
    var(--bgimg) center/cover no-repeat !important;
}

body.dark .featured-slide{
  background:
    linear-gradient(0deg,
      rgba(5,5,5,.98) 0%,
      rgba(5,5,5,.92) 28%,
      rgba(5,5,5,.58) 48%,
      rgba(5,5,5,.14) 58%,
      rgba(5,5,5,0) 66%),
    var(--bgimg) center/cover no-repeat !important;
}

.featured-slide .tiny{
  margin-left:38px !important;
  margin-right:38px !important;
  margin-bottom:12px !important;
  font-size:10px !important;
  letter-spacing:6px !important;
  max-width:52% !important;
}

.featured-slide h2{
  margin-left:38px !important;
  margin-right:38px !important;
  margin-top:0 !important;
  font-size:clamp(30px, 2.7vw, 46px) !important;
  line-height:.96 !important;
  letter-spacing:-2px !important;
  max-width:52% !important;
}

.featured-slide .desc{
  margin-left:38px !important;
  margin-right:38px !important;
  margin-top:18px !important;
  margin-bottom:112px !important;
  font-size:15px !important;
  line-height:1.35 !important;
  max-width:48% !important;
}

.featured-slide .read-btn{
  left:38px !important;
  bottom:32px !important;
}

.carousel-controls{
  bottom:32px !important;
}

@media(max-width:980px){
  .featured-slide{
    background:
      linear-gradient(0deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.94) 34%,
        rgba(255,255,255,.56) 54%,
        rgba(255,255,255,.12) 66%,
        rgba(255,255,255,0) 76%),
      var(--bgimg) center/cover no-repeat !important;
  }

  body.dark .featured-slide{
    background:
      linear-gradient(0deg,
        rgba(5,5,5,.98) 0%,
        rgba(5,5,5,.94) 34%,
        rgba(5,5,5,.62) 54%,
        rgba(5,5,5,.14) 66%,
        rgba(5,5,5,0) 76%),
      var(--bgimg) center/cover no-repeat !important;
  }

  .featured-slide .tiny,
  .featured-slide h2,
  .featured-slide .desc{
    max-width:calc(100% - 40px) !important;
    margin-left:20px !important;
    margin-right:20px !important;
  }

  .featured-slide h2{
    font-size:26px !important;
  }

  .featured-slide .desc{
    font-size:13px !important;
    margin-bottom:96px !important;
  }

  .featured-slide .read-btn{
    left:20px !important;
    bottom:58px !important;
  }
}


/* v38: article sidebar latest 6 */
.related{
  display:grid;
  gap:14px;
}

.related a{
  min-height:72px;
}


/* v39: featured text uses full width */
.featured-slide .tiny{
  max-width:calc(100% - 76px) !important;
}

.featured-slide h2{
  max-width:calc(100% - 76px) !important;
  font-size:clamp(28px, 2.4vw, 44px) !important;
  line-height:.94 !important;
}

.featured-slide .desc{
  max-width:calc(100% - 76px) !important;
  font-size:15px !important;
  line-height:1.28 !important;
}

@media(max-width:980px){
  .featured-slide .tiny,
  .featured-slide h2,
  .featured-slide .desc{
    max-width:calc(100% - 40px) !important;
  }

  .featured-slide h2{
    font-size:24px !important;
    line-height:.96 !important;
  }

  .featured-slide .desc{
    font-size:13px !important;
    line-height:1.25 !important;
  }
}


/* v40: featured dark text contrast */
body.dark .featured-slide,
body.dark .featured-slide .tiny,
body.dark .featured-slide h2,
body.dark .featured-slide .desc{
  color:#fff !important;
}

body.dark .featured-slide h2,
body.dark .featured-slide .desc{
  text-shadow:0 2px 18px rgba(0,0,0,.55);
}

/* v40: copy link feedback */
.share-copy-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%) translateY(20px);
  background:var(--accent);
  color:#000;
  border:3px solid #000;
  border-radius:999px;
  padding:13px 22px;
  font-weight:900;
  box-shadow:6px 6px 0 #000;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}

.share-copy-toast.active{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.share a[data-copy-link]{
  cursor:pointer;
}


/* DRKPRTY production rebrand */
.brand-eye{
  width:54px;
  height:54px;
  object-fit:cover;
  border-radius:999px;
  background:#ff4fd8;
  box-shadow:8px 8px 0 #000;
  flex:0 0 auto;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.main-nav a{
  color:var(--text);
  text-decoration:none;
  border:2px solid var(--text);
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--bg);
  box-shadow:3px 3px 0 var(--shadow);
}

.main-nav a:hover{
  background:var(--accent);
  color:#000;
  transform:translateY(-2px);
}

.about-page{
  width:66.666%;
  margin:0 auto;
  padding:40px 0 80px;
}

.about-hero{
  border:4px solid var(--text);
  border-radius:32px;
  background:var(--card);
  color:var(--text);
  box-shadow:8px 8px 0 var(--shadow);
  padding:44px;
  min-height:420px;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:32px;
  align-items:center;
}

.about-hero h1{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(42px,5vw,82px);
  line-height:.9;
  letter-spacing:-.05em;
  text-transform:uppercase;
}

.about-hero img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:32px;
  box-shadow:10px 10px 0 var(--shadow);
}

.about-grid{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.about-card{
  border:4px solid var(--text);
  border-radius:28px;
  background:var(--card);
  color:var(--text);
  box-shadow:7px 7px 0 var(--shadow);
  padding:28px;
}

.about-card span{
  display:inline-flex;
  width:48px;
  height:48px;
  align-items:center;
  justify-content:center;
  border:3px solid #000;
  border-radius:999px;
  background:var(--acid);
  color:#000;
  font-weight:900;
  margin-bottom:20px;
}

.about-card h2{
  font-family:'Archivo Black',sans-serif;
  font-size:38px;
  line-height:.95;
  margin-bottom:18px;
}

.about-card p{
  font-size:17px;
  line-height:1.45;
  color:var(--muted);
  margin-top:12px;
}

.about-submit{
  display:inline-block;
  margin-top:22px;
  border:3px solid #000;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  text-decoration:none;
  padding:14px 18px;
  font-weight:900;
  box-shadow:4px 4px 0 #000;
}

@media(max-width:980px){
  .brand-eye{
    width:42px;
    height:42px;
  }

  .main-nav{
    display:none;
  }

  .about-page{
    width:auto;
    padding:24px 14px 60px;
  }

  .about-hero{
    grid-template-columns:1fr;
    padding:24px;
    min-height:auto;
  }

  .about-hero h1{
    font-size:38px;
  }

  .about-hero img{
    max-width:220px;
  }

  .about-grid{
    grid-template-columns:1fr;
  }

  .about-card h2{
    font-size:30px;
  }
}


/* v3: scroll top + menu/events updates */
.scroll-top-btn{
  position:fixed;
  right:22px;
  bottom:24px;
  width:54px;
  height:54px;
  border:3px solid #000;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  font-size:26px;
  font-weight:900;
  box-shadow:6px 6px 0 #000;
  z-index:9998;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:.22s ease;
}

.scroll-top-btn.active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.scroll-top-btn:hover{
  transform:translateY(-3px);
}

@media(max-width:980px){
  .scroll-top-btn{
    width:48px;
    height:48px;
    right:16px;
    bottom:18px;
    font-size:22px;
  }
}


/* v6: cookies + newsletter fake subscribe */
.cookie-banner{
  position:fixed;
  left:22px;
  right:22px;
  bottom:22px;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:3px solid #000;
  border-radius:24px;
  background:var(--card);
  color:var(--text);
  box-shadow:8px 8px 0 #000;
  padding:18px 20px;
  opacity:0;
  transform:translateY(18px);
  pointer-events:none;
  transition:.25s ease;
}

.cookie-banner.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.cookie-banner strong{
  font-family:'Archivo Black', sans-serif;
  font-size:18px;
  color:var(--accent);
}

.cookie-banner p{
  margin-top:4px;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
}

.cookie-banner button{
  flex:0 0 auto;
  border:3px solid #000;
  border-radius:999px;
  background:var(--accent);
  color:#000;
  padding:13px 18px;
  font-weight:900;
  box-shadow:4px 4px 0 #000;
  cursor:pointer;
}

.newsletter-toast{
  position:fixed;
  left:50%;
  bottom:96px;
  transform:translateX(-50%) translateY(16px);
  z-index:10001;
  border:3px solid #000;
  border-radius:999px;
  background:var(--acid);
  color:#000;
  box-shadow:6px 6px 0 #000;
  padding:13px 22px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}

.newsletter-toast.active{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media(max-width:720px){
  .cookie-banner{
    left:14px;
    right:14px;
    bottom:14px;
    display:grid;
    gap:14px;
    border-radius:20px;
  }

  .cookie-banner button{
    width:100%;
  }

  .newsletter-toast{
    width:calc(100% - 28px);
    text-align:center;
    border-radius:18px;
  }
}

/* v18: mobile-only polish - no horizontal drift, desktop featured untouched */
*{
  box-sizing:border-box;
}

img,
video,
iframe{
  max-width:100%;
}

html,
body{
  max-width:100%;
  overflow-x:clip;
}

@supports not (overflow: clip){
  html,
  body{
    overflow-x:hidden;
  }
}

@media(max-width:760px){
  body{
    width:100%;
    overscroll-behavior-x:none;
  }

  .site-wrap,
  main,
  header,
  footer,
  .news-grid,
  .category-grid,
  .topic-grid{
    max-width:100%;
    overflow-x:hidden;
  }

  .featured-layout{
    width:100%;
    max-width:100%;
    grid-template-columns:1fr !important;
    gap:16px;
    overflow:visible;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden;
  }

  .featured-layout .featured-slide{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:560px !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .featured-slide .tiny,
  .featured-slide h2,
  .featured-slide .desc{
    width:auto !important;
    max-width:calc(100% - 40px) !important;
    margin-left:20px !important;
    margin-right:20px !important;
  }

  .featured-slide .desc{
    display:block !important;
    margin-bottom:132px !important;
    padding-right:0 !important;
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .featured-slide .read-btn{
    left:20px !important;
    right:auto !important;
    bottom:74px !important;
    z-index:6 !important;
    max-width:calc(100% - 40px) !important;
    white-space:nowrap !important;
  }

  .featured-layout .carousel-controls{
    left:20px !important;
    right:20px !important;
    bottom:18px !important;
    max-width:calc(100% - 40px) !important;
  }
}


/* v20: final mobile containment for featured + eye loader */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

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

img,
video,
iframe{
  max-width:100%;
}

body.is-loading,
html.is-loading{
  overflow:hidden !important;
}

.site-loader.eye-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  align-content:center;
  gap:20px;
  padding:22px;
  background:var(--bg);
  color:var(--text);
  transition:opacity .48s ease, visibility .48s ease, transform .48s ease;
}

.site-loader.eye-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(1.04);
}

.eye-loader__halo{
  position:absolute;
  width:min(72vw, 520px);
  aspect-ratio:1;
  border:2px solid var(--line);
  border-radius:50%;
  box-shadow:0 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 90px color-mix(in srgb, var(--acid) 30%, transparent);
  animation:eyePulse 1.6s ease-in-out infinite alternate;
}

.eye-loader__eye{
  position:relative;
  z-index:1;
  width:min(76vw, 360px);
  height:min(36vw, 170px);
  border:5px solid var(--text);
  border-radius:70% 30% 70% 30% / 55% 45% 55% 45%;
  transform:rotate(-8deg);
  display:grid;
  place-items:center;
  background:var(--card);
  box-shadow:10px 10px 0 var(--shadow);
  overflow:hidden;
}

.eye-loader__eye::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, var(--text) 8%, transparent) 14px 16px);
  opacity:.35;
  animation:eyeScan 1.2s linear infinite;
}

.eye-loader__iris{
  position:relative;
  z-index:1;
  width:min(25vw, 112px);
  aspect-ratio:1;
  border:4px solid var(--text);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle, var(--accent) 0 28%, var(--acid) 29% 58%, var(--card) 59% 100%);
  animation:eyeLook 1.1s ease-in-out infinite alternate;
}

.eye-loader__pupil{
  width:42%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--text);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--bg) 90%, transparent);
}

.eye-loader__brand{
  position:relative;
  z-index:1;
  font-family:'Archivo Black', sans-serif;
  font-size:clamp(34px, 8vw, 82px);
  line-height:.9;
  letter-spacing:-.08em;
  text-transform:uppercase;
}

.eye-loader__bar{
  position:relative;
  z-index:1;
  width:min(360px, 78vw);
  height:12px;
  border:2px solid var(--text);
  background:var(--card);
  overflow:hidden;
}

.eye-loader__bar span{
  display:block;
  width:0%;
  height:100%;
  background:repeating-linear-gradient(90deg, var(--text) 0 16px, var(--accent) 16px 32px, var(--acid) 32px 48px);
  transition:width .14s linear;
}

.eye-loader__percent{
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
}

@keyframes eyePulse{
  from{ transform:scale(.94) rotate(0deg); opacity:.55; }
  to{ transform:scale(1.04) rotate(10deg); opacity:.9; }
}

@keyframes eyeScan{
  to{ transform:translateX(32px); }
}

@keyframes eyeLook{
  from{ transform:translateX(-10px) translateY(2px); }
  to{ transform:translateX(10px) translateY(-2px); }
}

@media(max-width:760px){
  html,
  body{
    position:relative;
    width:100%;
    max-width:100vw;
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
  }

  .site-shell,
  .site-wrap,
  .page,
  main,
  header,
  footer,
  section,
  .news-grid,
  .category-grid,
  .topic-grid{
    max-width:100vw;
    min-width:0;
  }

  .featured-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    width:auto !important;
    max-width:calc(100vw - 28px) !important;
    min-width:0 !important;
    margin:14px auto !important;
    gap:16px !important;
    overflow:hidden !important;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:520px !important;
    overflow:hidden !important;
    border-radius:26px !important;
  }

  .featured-layout .featured-slide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:520px !important;
    border-width:3px !important;
    border-radius:26px !important;
    box-shadow:none !important;
    transform:translateX(0) !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .featured-slide .pickup{
    top:14px !important;
    right:14px !important;
    max-width:calc(100% - 28px) !important;
  }

  .featured-slide .tiny,
  .featured-slide h2,
  .featured-slide .desc{
    width:auto !important;
    max-width:calc(100% - 32px) !important;
    margin-left:16px !important;
    margin-right:16px !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .featured-slide .tiny{
    margin-bottom:10px !important;
    font-size:10px !important;
    letter-spacing:4px !important;
  }

  .featured-slide h2{
    font-size:clamp(23px, 8.4vw, 34px) !important;
    line-height:.98 !important;
    letter-spacing:-1.4px !important;
  }

  .featured-slide .desc{
    display:-webkit-box !important;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden !important;
    margin-top:12px !important;
    margin-bottom:126px !important;
    padding-right:0 !important;
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .featured-slide .read-btn{
    left:16px !important;
    right:auto !important;
    bottom:68px !important;
    max-width:calc(100% - 32px) !important;
    width:max-content !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    z-index:7 !important;
  }

  .featured-layout .carousel-controls,
  .carousel-controls{
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
    width:auto !important;
    max-width:calc(100% - 32px) !important;
    overflow:hidden !important;
  }

  .events-panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-shadow:none !important;
  }

  .eye-loader__eye{
    width:min(82vw, 300px);
    height:min(40vw, 136px);
    border-width:4px;
    box-shadow:6px 6px 0 var(--shadow);
  }
}


/* v21: stable featured rotation, responsive containment, admin views */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

*{
  box-sizing:border-box;
}

img,
video,
iframe{
  max-width:100%;
}

.featured-layout,
.featured-carousel,
.featured-track,
.featured-slide,
.events-panel,
.events-list,
.event-row{
  min-width:0;
}

.featured-layout .featured-carousel,
.featured-layout .featured-track,
.featured-layout .featured-slide{
  height:580px;
  min-height:580px;
  max-height:580px;
}

.featured-slide{
  overflow:hidden;
}

.featured-slide h2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  overflow-wrap:anywhere;
  font-size:clamp(42px, 5vw, 64px) !important;
}

.featured-slide .desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}

.featured-slide .read-btn{
  flex:0 0 auto;
}

.views-pill{
  background:var(--yellow) !important;
  color:#000 !important;
  border-color:#000 !important;
}

@media(max-width:980px){
  html,
  body{
    overflow-x:hidden !important;
    width:100% !important;
    max-width:100vw !important;
  }

  body > *,
  main,
  section,
  header,
  footer{
    max-width:100vw;
  }

  .featured-layout{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    margin:14px auto !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:16px !important;
    overflow:hidden !important;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track,
  .featured-layout .featured-slide{
    width:100% !important;
    max-width:100% !important;
    height:520px !important;
    min-height:520px !important;
    max-height:520px !important;
    overflow:hidden !important;
  }

  .featured-layout .featured-slide{
    padding:22px 18px 88px !important;
    border-width:3px !important;
    border-radius:24px !important;
    box-shadow:none !important;
    justify-content:flex-end !important;
  }

  .featured-slide h2{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    font-size:clamp(24px, 8vw, 34px) !important;
    line-height:.98 !important;
    letter-spacing:-1px !important;
    -webkit-line-clamp:3;
  }

  .featured-slide .tiny,
  .featured-slide .desc{
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .featured-slide .desc{
    font-size:13px !important;
    line-height:1.32 !important;
    -webkit-line-clamp:3;
    margin-bottom:0 !important;
  }

  .featured-slide .read-btn{
    position:static !important;
    display:inline-flex !important;
    width:max-content !important;
    max-width:100% !important;
    margin-top:16px !important;
    padding:11px 14px !important;
    white-space:nowrap !important;
    font-size:12px !important;
  }

  .featured-layout .carousel-controls,
  .carousel-controls{
    left:16px !important;
    right:16px !important;
    bottom:14px !important;
    width:auto !important;
    max-width:calc(100% - 32px) !important;
  }

  .events-panel{
    width:calc(100vw - 28px) !important;
    max-width:calc(100vw - 28px) !important;
    margin:0 auto !important;
    padding:18px !important;
    border-width:3px !important;
    border-radius:24px !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  .events-list{
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:100% !important;
  }

  .events-panel .event-row{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:38px minmax(0, 1fr) !important;
    gap:10px !important;
  }

  .events-panel .event-row p,
  .events-panel .event-row small,
  .events-panel .agenda-title h3{
    overflow-wrap:anywhere;
  }
}

@media(max-width:420px){
  .featured-layout .featured-carousel,
  .featured-layout .featured-track,
  .featured-layout .featured-slide{
    height:500px !important;
    min-height:500px !important;
    max-height:500px !important;
  }

  .featured-slide h2{
    font-size:clamp(22px, 7.6vw, 30px) !important;
  }
}


/* v22: fixed featured size, stable hashtag marquee, logo-only loader */
html, body{
  overflow-x:hidden !important;
  max-width:100vw !important;
}

.site-loader.eye-loader{
  background:var(--bg) !important;
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
}

.eye-loader__halo,
.eye-loader__eye,
.eye-loader__brand,
.eye-loader__bar,
.eye-loader__percent{
  display:none !important;
}

.eye-loader__logo{
  width:min(58vw, 340px);
  height:auto;
  display:block;
  animation:drkEyeLoaderPulse 1.15s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 26px rgba(255,0,111,.36));
}

@keyframes drkEyeLoaderPulse{
  from{ transform:scale(.94); opacity:.78; }
  to{ transform:scale(1.03); opacity:1; }
}

.hashtag-bar{
  width:100%;
  max-width:100vw;
  overflow:hidden !important;
  contain:paint;
}

.hashtag-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  min-width:max-content !important;
  will-change:transform;
  transform:translate3d(0,0,0);
  animation:tagScrollStable 24s linear infinite !important;
}

.hashtag-track:hover{
  animation-play-state:running !important;
}

.hashtag-pill{
  flex:0 0 auto !important;
}

@keyframes tagScrollStable{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); }
}

.featured-layout .featured-carousel,
.featured-layout .featured-track,
.featured-layout .featured-slide{
  height:580px !important;
  min-height:580px !important;
  max-height:580px !important;
}

.featured-slide{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  overflow:hidden !important;
  min-width:0 !important;
}

.featured-slide h2{
  font-size:clamp(34px, 4.4vw, 58px) !important;
  line-height:.92 !important;
  letter-spacing:-.045em !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
  overflow-wrap:anywhere !important;
  max-height:calc(.92em * 3) !important;
}

.featured-slide .desc{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}

@media(max-width:980px){
  .hashtag-bar{
    position:sticky;
    top:74px;
    padding:8px 0;
  }

  .hashtag-track{
    gap:10px !important;
    animation-duration:18s !important;
  }

  .hashtag-pill{
    font-size:15px !important;
    padding:7px 12px !important;
    border-width:1.5px !important;
  }

  .featured-layout{
    width:100% !important;
    max-width:calc(100vw - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .featured-layout .featured-carousel,
  .featured-layout .featured-track,
  .featured-layout .featured-slide{
    width:100% !important;
    max-width:100% !important;
    height:520px !important;
    min-height:520px !important;
    max-height:520px !important;
  }

  .featured-layout .featured-slide{
    padding:20px 16px 86px !important;
    border-radius:22px !important;
    box-shadow:none !important;
  }

  .featured-slide h2{
    font-size:clamp(22px, 7.1vw, 31px) !important;
    line-height:.96 !important;
    max-height:calc(.96em * 3) !important;
    letter-spacing:-.035em !important;
  }

  .featured-slide .desc{
    font-size:12.5px !important;
    line-height:1.32 !important;
    -webkit-line-clamp:3 !important;
  }

  .events-panel{
    width:100% !important;
    max-width:calc(100vw - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:hidden !important;
  }

  .events-panel *,
  .featured-layout *{
    max-width:100%;
  }
}

@media(max-width:430px){
  .featured-layout .featured-carousel,
  .featured-layout .featured-track,
  .featured-layout .featured-slide{
    height:500px !important;
    min-height:500px !important;
    max-height:500px !important;
  }

  .featured-slide h2{
    font-size:clamp(20px, 6.8vw, 28px) !important;
    -webkit-line-clamp:3 !important;
  }

  .featured-slide .desc{
    -webkit-line-clamp:2 !important;
  }

  .eye-loader__logo{
    width:min(72vw, 280px);
  }
}


/* v35: stable mobile hashtag marquee + final footer */
.hashtag-bar{
  position:sticky;
  overflow:hidden !important;
  width:100% !important;
  max-width:100vw !important;
  min-height:54px;
  isolation:isolate;
}

.hashtag-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:none !important;
  white-space:nowrap !important;
  transform:translate3d(0,0,0);
  will-change:transform;
  animation:drkprtyHashMarquee 36s linear infinite !important;
}

.hashtag-track:hover,
.hashtag-track:focus-within{
  animation-play-state:running !important;
}

.hashtag-pill{
  flex:0 0 auto !important;
}

@keyframes drkprtyHashMarquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-25%,0,0); }
}

footer{
  text-align:center;
}

footer p{
  margin:0;
  font-size:clamp(12px, 1.4vw, 16px);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:760px){
  .hashtag-bar{
    min-height:48px;
    padding:8px 0 !important;
  }

  .hashtag-track{
    gap:10px !important;
    animation-duration:22s !important;
  }
}


/* v37: requested polish - footer logo, stable slow hashtags, fixed-square rotation */
footer{
  padding:72px 24px 54px !important;
}

footer h2{
  display:block !important;
  font-family:'Archivo Black', sans-serif !important;
  font-size:clamp(58px, 14vw, 180px) !important;
  line-height:.82 !important;
  letter-spacing:clamp(-8px, -0.55vw, -2px) !important;
  margin:0 auto 18px !important;
  text-transform:uppercase !important;
}

footer p{
  margin:0 !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:2px !important;
  opacity:.82 !important;
}

.hashtag-track{
  animation:tagScrollStable 48s linear infinite !important;
  animation-play-state:running !important;
}

.hashtag-bar:hover .hashtag-track,
.hashtag-track:hover,
.hashtag-track:focus-within{
  animation-play-state:paused !important;
}

.now-playing-grid{
  align-items:start !important;
}

.now-main{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  grid-template-columns:36% 1fr !important;
  align-content:center !important;
  padding:clamp(16px, 2.2vw, 24px) !important;
  padding-bottom:88px !important;
}

.now-main > div:not(.cover-art){
  min-width:0 !important;
  overflow:hidden !important;
}

.cover-art{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  align-self:center !important;
}

.now-main h3{
  font-size:clamp(26px, 3.15vw, 52px) !important;
  line-height:.88 !important;
  letter-spacing:-.055em !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  hyphens:auto !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:4 !important;
  overflow:hidden !important;
}

.now-main h3.rotation-title-medium{ font-size:clamp(24px, 2.55vw, 42px) !important; }
.now-main h3.rotation-title-small{ font-size:clamp(21px, 2.05vw, 34px) !important; line-height:.92 !important; }
.now-main h3.rotation-title-tiny{ font-size:clamp(18px, 1.72vw, 28px) !important; line-height:.96 !important; -webkit-line-clamp:5 !important; }

.now-main p{
  font-size:clamp(13px, 1.2vw, 18px) !important;
  line-height:1.05 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.now-main small{
  font-size:clamp(11px, .95vw, 14px) !important;
  line-height:1.25 !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}

@media(max-width:980px){
  footer h2{
    font-size:clamp(48px, 19vw, 96px) !important;
    letter-spacing:-4px !important;
  }

  .now-main{
    grid-template-columns:34% 1fr !important;
    gap:14px !important;
    aspect-ratio:1 / 1 !important;
    padding:16px !important;
    padding-bottom:72px !important;
  }

  .now-main span{
    font-size:10px !important;
    padding:6px 9px !important;
    margin-bottom:8px !important;
  }

  .now-main h3{
    font-size:clamp(20px, 7vw, 30px) !important;
    line-height:.9 !important;
    -webkit-line-clamp:4 !important;
  }

  .now-main h3.rotation-title-medium{ font-size:clamp(18px, 6vw, 26px) !important; }
  .now-main h3.rotation-title-small{ font-size:clamp(16px, 5vw, 22px) !important; line-height:.94 !important; }
  .now-main h3.rotation-title-tiny{ font-size:clamp(14px, 4.2vw, 19px) !important; line-height:.98 !important; -webkit-line-clamp:5 !important; }

  .now-main p{
    font-size:12px !important;
    margin-top:6px !important;
  }

  .now-main small{
    display:-webkit-box !important;
    font-size:11px !important;
    -webkit-line-clamp:2 !important;
    margin-top:7px !important;
  }

  .rotation-read-btn{
    right:16px !important;
    bottom:16px !important;
    left:auto !important;
  }
}

@media(max-width:520px){
  .now-main{
    grid-template-columns:1fr !important;
    grid-template-rows:38% 1fr !important;
    align-content:start !important;
    gap:12px !important;
  }

  .cover-art{
    width:min(44vw, 148px) !important;
    justify-self:start !important;
  }

  .now-main h3{
    -webkit-line-clamp:3 !important;
  }

  .now-main h3.rotation-title-tiny{
    -webkit-line-clamp:4 !important;
  }
}


/* v42: scheduled publish fix + smaller fixed-square rotation */
.now-main{
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  grid-template-columns:34% 1fr !important;
}

.now-main h3{
  font-size:clamp(20px, 2.35vw, 38px) !important;
  line-height:.92 !important;
  letter-spacing:-.052em !important;
  -webkit-line-clamp:4 !important;
}

.now-main h3.rotation-title-medium{ font-size:clamp(18px, 2vw, 32px) !important; }
.now-main h3.rotation-title-small{ font-size:clamp(16px, 1.72vw, 27px) !important; line-height:.94 !important; }
.now-main h3.rotation-title-tiny{ font-size:clamp(14px, 1.42vw, 23px) !important; line-height:.98 !important; -webkit-line-clamp:5 !important; }

.now-main p{
  font-size:clamp(12px, 1vw, 16px) !important;
}

.now-main small{
  font-size:clamp(10px, .82vw, 13px) !important;
  -webkit-line-clamp:3 !important;
}

@media(max-width:980px){
  .now-main{
    width:100% !important;
    max-width:100% !important;
    aspect-ratio:1 / 1 !important;
    grid-template-columns:32% 1fr !important;
  }

  .now-main h3{
    font-size:clamp(17px, 5.2vw, 24px) !important;
  }

  .now-main h3.rotation-title-medium{ font-size:clamp(16px, 4.8vw, 22px) !important; }
  .now-main h3.rotation-title-small{ font-size:clamp(14px, 4.3vw, 19px) !important; }
  .now-main h3.rotation-title-tiny{ font-size:clamp(12px, 3.7vw, 16px) !important; -webkit-line-clamp:5 !important; }
}

@media(max-width:520px){
  .now-main{
    grid-template-rows:34% 1fr !important;
    aspect-ratio:1 / 1 !important;
  }

  .now-main h3{
    font-size:clamp(16px, 5vw, 22px) !important;
    -webkit-line-clamp:3 !important;
  }
}


/* v45: visible article share actions */
.article-share-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.article-share-actions .share-btn{
  min-width:42px;
  min-height:42px;
  flex:0 0 auto;
}
.article-share-actions .share-btn-x{
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight:900;
  letter-spacing:0;
}