/* ============================================================
   ROCKWATER MEDIA — Bold editorial design system v2
   Display: Bebas Neue (oversized condensed) | Body/UI: Inter
   Ink #0F0D0B · Cream #F7F3EA · Gold #D4A017 · Terracotta #E25A2C
   Mixed dark/light sections for maximum contrast and drama.
   ============================================================ */

:root{
  --ink:#0F0D0B;
  --ink-soft:#3A352E;
  --paper:#F7F3EA;
  --paper-deep:#EDE5D3;
  --line:#E2DBC8;
  --line-dark:rgba(255,255,255,0.14);
  --gold:#D4A017;
  --gold-light:#E8B82C;
  --terracotta:#E25A2C;
  --terracotta-deep:#B8431D;
  --forest:#23382A;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper);
  color:var(--ink);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
  line-height:0.95;
  margin:0;
  color:var(--ink);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:'Inter',sans-serif;cursor:pointer;}

.wrap{max-width:1320px;margin:0 auto;padding:0 5%;}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--terracotta);}
.eyebrow.on-dark{color:var(--gold);}

/* ---------- top bar ---------- */
.topbar{background:var(--ink);color:#9c9588;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;border-bottom:3px solid var(--gold);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 5%;}
.topbar .social a{opacity:0.85;margin-left:1rem;}
.topbar .social a:hover{color:var(--gold);opacity:1;}

/* ---------- header / masthead ---------- */
header.site{position:sticky;top:0;z-index:200;background:var(--ink);border-bottom:1px solid var(--line-dark);}
header.site .inner{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 5%;}
.logo{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:2.2rem;letter-spacing:0.02em;display:flex;align-items:center;gap:0.5rem;color:#fff;line-height:1;}
.logo .accent{color:var(--gold);}
.hamburger{background:none;border:none;padding:0.3rem;display:flex;color:var(--gold);}
nav.main-nav{display:flex;gap:0;}
nav.main-nav a{font-size:0.78rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;padding:0.6rem 1rem;color:rgba(255,255,255,0.7);border-bottom:3px solid transparent;}
nav.main-nav a.active,nav.main-nav a:hover{border-bottom-color:var(--terracotta);color:#fff;}
.header-actions{display:flex;align-items:center;gap:0.7rem;}
.icon-btn{background:none;border:none;padding:0.3rem;display:flex;color:#fff;}
.btn-outline{background:transparent;color:var(--gold);border:1.5px solid var(--gold);padding:0.5rem 1.1rem;font-weight:800;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;border-radius:2px;}
.btn-outline:hover{background:var(--gold);color:var(--ink);}
.search-bar{border-top:1px solid var(--line-dark);background:var(--ink);padding:0.9rem 5%;display:flex;gap:0.6rem;}
.search-bar input{flex:1;padding:0.7rem 0.9rem;border:1.5px solid var(--line-dark);border-radius:4px;font-size:0.9rem;background:rgba(255,255,255,0.06);color:#fff;}

@media(max-width:900px){ nav.main-nav{display:none;} }

/* mobile drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(15,13,11,0.7);z-index:500;display:none;}
.drawer-overlay.open{display:block;}
.drawer{width:320px;max-width:85vw;height:100%;background:var(--ink);color:#fff;padding:1.5rem;display:flex;flex-direction:column;gap:0.2rem;border-right:4px solid var(--gold);}
.drawer-close{align-self:flex-end;background:none;border:none;color:#fff;margin-bottom:1rem;}
.drawer a{padding:0.9rem 0.6rem;border-bottom:1px solid var(--line-dark);font-size:1.1rem;font-family:'Bebas Neue',sans-serif;letter-spacing:0.03em;}
.drawer a.home-link{color:var(--gold);background:rgba(212,160,23,0.1);}
.drawer .social-row{display:flex;gap:1.1rem;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--line-dark);}
.drawer .social-row a{padding:0;border:none;font-size:0.78rem;color:#9c9588;font-family:'Inter',sans-serif;}

/* ---------- buttons ---------- */
.btn-primary{background:var(--terracotta);color:#fff;border:none;padding:0.9rem 1.8rem;font-weight:800;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;border-radius:2px;display:inline-flex;align-items:center;gap:0.5rem;}
.btn-primary:hover{background:var(--terracotta-deep);}
.btn-gold{background:var(--gold);color:var(--ink);border:none;padding:0.9rem 1.8rem;font-weight:800;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;border-radius:2px;display:inline-flex;align-items:center;gap:0.5rem;}
.btn-gold:hover{background:var(--gold-light);}

/* ---------- tags / badges ---------- */
.tag{font-size:0.65rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:0.32rem 0.7rem;border-radius:0;display:inline-block;}
.tag-cat{background:var(--terracotta);color:#fff;clip-path:polygon(0 0,100% 0,94% 100%,0% 100%);padding-right:1rem;}
.tag-muted{background:var(--paper-deep);color:var(--ink-soft);}
.tag-gold{background:var(--gold);color:var(--ink);}

/* ---------- masthead strip (category color key) ---------- */
.category-strip{display:flex;height:6px;}
.category-strip span{flex:1;}
.cs-news{background:var(--gold);} .cs-reviews{background:var(--terracotta);} .cs-nollywood{background:var(--forest);}
.cs-hollywood{background:#7a4a9c;} .cs-trending{background:var(--terracotta-deep);}

/* ---------- hero slider ---------- */
.hero-slider{position:relative;width:100%;height:min(68vh,580px);overflow:hidden;background:var(--ink);}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.9s ease;pointer-events:none;cursor:pointer;}
.hero-slide.active{opacity:1;pointer-events:auto;}
.hero-slide img{width:100%;height:100%;object-fit:cover;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(15,13,11,0.96) 0%,rgba(15,13,11,0.75) 32%,rgba(15,13,11,0.3) 62%,rgba(15,13,11,0.1) 100%),linear-gradient(0deg,rgba(15,13,11,0.85) 0%,rgba(15,13,11,0.15) 55%,rgba(15,13,11,0.02) 100%);}
.hero-text{position:absolute;left:0;right:0;bottom:0;max-width:1320px;margin:0 auto;padding:0 5% 3.2rem;width:100%;box-sizing:border-box;}
.hero-text-inner{max-width:660px;}
.hero-text h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:0.96;margin:0.9rem 0 0.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hero-text p{color:rgba(255,255,255,0.75);font-size:0.95rem;line-height:1.55;max-width:520px;margin:0 0 1.1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;}
.hero-meta{display:flex;align-items:center;gap:1rem;color:rgba(255,255,255,0.6);font-size:0.76rem;font-weight:700;flex-wrap:wrap;text-transform:uppercase;letter-spacing:0.03em;}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);background:rgba(15,13,11,0.5);color:var(--gold);display:flex;align-items:center;justify-content:center;z-index:5;}
.hero-arrow:hover{background:var(--gold);color:var(--ink);}
.hero-arrow.left{left:1.2rem;} .hero-arrow.right{right:1.2rem;}
.hero-dots{position:absolute;bottom:1.4rem;right:5%;display:flex;gap:0.4rem;z-index:5;}
.hero-dots button{width:8px;height:8px;border-radius:0;background:rgba(255,255,255,0.4);border:none;transform:rotate(45deg);}
.hero-dots button.active{background:var(--terracotta);}

/* ---------- layout grid ---------- */
.main-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:3rem;padding:4rem 0;}
@media(max-width:900px){ .main-grid{grid-template-columns:1fr;} }
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;}
@media(max-width:900px){ .card-grid{grid-template-columns:1fr;} }
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;}
@media(max-width:1000px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .cat-grid{grid-template-columns:1fr;} }

.section-heading{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1.8rem;}
.section-heading h2{font-size:2.4rem;}
.section-heading .rule{flex:1;height:3px;background:var(--ink);margin-bottom:0.4rem;}

/* ---------- story card ---------- */
.story-card{background:var(--white);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;height:100%;transition:transform 0.2s, box-shadow 0.2s;}
.story-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,13,11,0.14);}
.story-card .thumb{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--ink);}
.story-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.story-card:hover .thumb img{transform:scale(1.06);}
.story-card .thumb .tag{position:absolute;top:0;left:0;}
.story-card .body{padding:1.3rem;display:flex;flex-direction:column;flex:1;}
.story-card .meta{font-size:0.68rem;font-weight:800;color:var(--ink-soft);margin-bottom:0.55rem;text-transform:uppercase;letter-spacing:0.04em;}
.story-card h3{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;line-height:1.05;margin-bottom:0.7rem;letter-spacing:0.01em;}
.story-card p{font-size:0.85rem;color:var(--ink-soft);line-height:1.6;margin:0 0 1rem;flex:1;font-weight:500;}
.story-card .foot{display:flex;align-items:center;justify-content:space-between;padding-top:0.9rem;border-top:2px solid var(--ink);}
.story-card .readmore{font-size:0.72rem;font-weight:800;color:var(--terracotta);text-transform:uppercase;letter-spacing:0.04em;}
.story-card .stats{display:flex;gap:0.8rem;font-size:0.72rem;color:var(--ink-soft);font-weight:700;}

/* row variant (list) */
.story-row{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line);}
.story-row img{width:96px;height:96px;object-fit:cover;flex-shrink:0;}
.story-row h4{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;line-height:1.1;margin-bottom:0.4rem;letter-spacing:0.01em;}
.story-row .date{font-size:0.72rem;color:var(--ink-soft);font-weight:700;text-transform:uppercase;}

/* trend variant */
.story-trend{position:relative;overflow:hidden;background:var(--ink);}
.story-trend img{width:100%;height:180px;object-fit:cover;opacity:0.75;}
.story-trend .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,13,11,0.92),transparent 65%);}
.story-trend .tag{position:absolute;left:0;bottom:0;}

/* ---------- sidebar ---------- */
aside .box{background:var(--white);border:1px solid var(--line);padding:1.5rem;margin-bottom:2rem;}
aside .box-title{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:0.02em;margin-bottom:1rem;padding-bottom:0.8rem;border-bottom:3px solid var(--ink);}
.popular-item{display:flex;gap:0.9rem;align-items:flex-start;margin-bottom:1.2rem;}
.popular-item:last-child{margin-bottom:0;}
.popular-num{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--gold);font-weight:400;width:36px;flex-shrink:0;line-height:1;-webkit-text-stroke:1.5px var(--ink);}
.popular-item h4{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;line-height:1.1;margin-bottom:0.3rem;letter-spacing:0.01em;}
.popular-item span{font-size:0.7rem;color:var(--ink-soft);font-weight:700;text-transform:uppercase;}
.trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;}
.newsletter-box{background:var(--ink);color:#fff;padding:1.8rem;text-align:left;border-top:5px solid var(--gold);}
.newsletter-box h3{color:#fff;font-size:1.8rem;margin-bottom:0.6rem;}
.newsletter-box p{font-size:0.82rem;color:rgba(255,255,255,0.6);margin-bottom:1.1rem;font-weight:500;}
.newsletter-box input{width:100%;padding:0.75rem 0.9rem;margin-bottom:0.7rem;background:rgba(255,255,255,0.08);border:1px solid var(--line-dark);color:#fff;border-radius:2px;}
.newsletter-box button{width:100%;justify-content:center;}

/* ---------- single post ---------- */
.post-hero{position:relative;height:min(56vh,500px);overflow:hidden;background:var(--ink);}
.post-hero img{width:100%;height:100%;object-fit:cover;}
.post-hero .overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,13,11,0.97) 0%,rgba(15,13,11,0.4) 55%,rgba(15,13,11,0.1) 100%);}
.post-hero .content{position:absolute;left:0;right:0;bottom:0;max-width:920px;margin:0 auto;padding:0 5% 3rem;}
.post-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);margin-top:0.9rem;line-height:1;}
.post-body{max-width:760px;margin:0 auto;padding:3.2rem 5%;}
.post-body p{font-size:1.08rem;line-height:1.85;color:var(--ink);margin-bottom:1.4rem;font-family:'Inter',sans-serif;font-weight:400;}
.post-tags{display:flex;gap:0.5rem;margin-bottom:2rem;flex-wrap:wrap;}
.author-box{display:flex;align-items:center;gap:1rem;margin-top:2.5rem;padding:1.4rem;background:var(--ink);color:#fff;}
.author-avatar{width:48px;height:48px;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:1.4rem;flex-shrink:0;}
.related-section{background:var(--ink);padding:3.5rem 5%;}
.related-section .eyebrow{color:var(--gold);}
.related-section h2{color:#fff;}
.related-section .story-card{background:#1a1714;border-color:var(--line-dark);}
.related-section .story-card .meta,.related-section .story-card p{color:rgba(255,255,255,0.55);}
.related-section .story-card h3{color:#fff;}
.related-section .story-card .foot{border-top-color:rgba(255,255,255,0.2);}

/* ---------- comments ---------- */
.comments-section{max-width:760px;margin:0 auto;padding:0 5% 4rem;}
.comment-item{padding:1.2rem 0;border-bottom:1px solid var(--line);}
.comment-form textarea,.comment-form input{width:100%;padding:0.8rem 1rem;border:1.5px solid var(--line);border-radius:2px;font-family:inherit;font-size:0.9rem;margin-bottom:0.8rem;}
.comment-form textarea{resize:vertical;min-height:90px;}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:rgba(255,255,255,0.7);margin-top:2rem;border-top:6px solid var(--gold);}
footer.site .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding:3.5rem 5% 2rem;max-width:1320px;margin:0 auto;}
@media(max-width:900px){ footer.site .foot-grid{grid-template-columns:1fr 1fr;} }
footer.site .foot-brand{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:2.1rem;color:#fff;margin-bottom:0.8rem;letter-spacing:0.02em;}
footer.site .foot-heading{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;color:var(--gold);margin-bottom:1rem;letter-spacing:0.03em;}
footer.site a{display:block;font-size:0.82rem;color:rgba(255,255,255,0.55);margin-bottom:0.6rem;font-weight:500;}
footer.site a:hover{color:var(--gold);}
footer.site .bottom{border-top:1px solid var(--line-dark);padding:1.4rem 5%;text-align:center;font-size:0.76rem;color:rgba(255,255,255,0.4);}

/* ---------- empty state ---------- */
.empty-state{padding:4rem 0;text-align:center;color:var(--ink-soft);}