/* ==================== ROOT & VARIABLES ==================== */
:root {
  --primary: #000;
  --secondary: #fff;
  --accent: #ff4444;
  --light-gray: #f5f5f5;
  --medium-gray: #999;
  --dark-gray: #333;
  --border: #ddd;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --transition: all 0.3s ease;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--dark-gray);
  background: var(--secondary);
  line-height: 1.6;
}

/* --- Loading spinner --- */
.loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.9); display: grid; place-items: center; z-index: 10000; transition: opacity 0.3s ease; }
.loader.hidden { opacity: 0; pointer-events: none; }
.spinner {
  width: 48px; height: 48px; border: 4px solid var(--line, #ddd);
  border-top-color: var(--accent, #ff4444); border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==================== CINEMATIC SITE OPENER ==================== */
/* Bright masthead reveal — uses the EXACT header title font (Fraunces 700)
   and colours ("Pan Africa View" in ink) on paper. */
.site-intro {
  position: fixed; inset: 0; z-index: 11000;
  display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(1100px 720px at 50% 40%, #ffffff 0%, #f8f4ec 58%, #f1ebdf 100%);
  color: var(--ink, #211b15);
  overflow: hidden;
  animation: introOut .9s cubic-bezier(.7,0,.3,1) 3s forwards; /* auto fade at 3s */
}
/* subtle drifting warm sheen for a filmic feel */
.site-intro::after {
  content: ""; position: absolute; inset: -20%;
  background: radial-gradient(620px 320px at 50% 42%, rgba(156,43,34,.06), transparent 70%);
  animation: introSheen 4s ease-in-out infinite alternate;
  pointer-events: none;
}
.intro-skip .site-intro { display: none !important; }
.site-intro.done { opacity: 0; visibility: hidden; pointer-events: none; }

.intro-inner { position: relative; z-index: 2; padding: 2rem; }
.intro-kicker {
  display: block; font-family: var(--sans, 'Inter', sans-serif);
  font-size: .74rem; letter-spacing: .5em; text-transform: uppercase;
  color: rgba(33,27,21,.5); margin-bottom: 1.4rem;
  opacity: 0; animation: introFade .9s ease .05s forwards;
}
/* Exact header-title identity: Fraunces 700, ink. (!important mirrors the
   header's own .brand-word rule, which needs it to beat a global heading font.) */
.intro-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 700; line-height: .98; letter-spacing: .005em;
  color: var(--ink, #211b15);
  font-size: clamp(2.8rem, 9vw, 6.4rem);
  margin: 0; display: flex; gap: .28em; justify-content: center; flex-wrap: wrap;
}
.intro-title .iw {
  display: inline-block;
  opacity: 0; filter: blur(22px); transform: translateY(24px);
  animation: introWordIn 1s cubic-bezier(.2,.8,.2,1) var(--d, 0s) forwards;
}
/* "Magazine" — exact header accent: Fraunces 700, rust (not italic). */
.intro-sub {
  display: block; font-family: 'Fraunces', Georgia, serif !important;
  font-style: normal; font-weight: 700; letter-spacing: .005em;
  font-size: clamp(1.6rem, 5vw, 3rem); color: var(--rust, #9c2b22);
  margin-top: .12em;
  opacity: 0; filter: blur(14px); animation: introWordIn 1s ease .85s forwards;
}
.intro-line {
  display: block; width: 0; height: 2px; margin: 1.6rem auto 1.2rem;
  background: linear-gradient(90deg, transparent, var(--rust, #9c2b22), transparent);
  animation: introLine 1s ease 1.1s forwards;
}
.intro-tag {
  display: block; font-family: var(--sans, 'Inter', sans-serif);
  font-size: .8rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(33,27,21,.5);
  opacity: 0; animation: introFade 1s ease 1.4s forwards;
}
@keyframes introWordIn {
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes introFade { to { opacity: 1; } }
@keyframes introLine { to { width: min(280px, 60vw); } }
@keyframes introSheen { from { transform: translateY(-8px) scale(1); } to { transform: translateY(10px) scale(1.08); } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .site-intro, .site-intro::after, .intro-title .iw, .intro-sub, .intro-line, .intro-kicker, .intro-tag { animation: none !important; }
  .intro-title .iw, .intro-sub { opacity: 1; filter: none; transform: none; }
}

/* ==================== PERSONALISED WELCOME (backend login) ==================== */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 11000;
  display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(700px 480px at 22% 20%, rgba(155,140,255,.28), transparent 60%),
    radial-gradient(700px 480px at 80% 82%, rgba(255,160,210,.24), transparent 60%),
    radial-gradient(900px 600px at 50% 45%, #14141b 0%, #0a0a0d 65%, #050506 100%);
  color: #fff;
  transition: opacity .8s ease, visibility .8s ease;
}
.welcome-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome-inner { padding: 2rem; }
.welcome-eyebrow {
  display: block; font-family: var(--sans, 'Inter', sans-serif);
  font-size: .72rem; letter-spacing: .4em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 1.1rem;
  opacity: 0; animation: introFade .8s ease .1s forwards;
}
/* The whole "Welcome, {name}" line is white and does the blur-reveal as one
   piece of text — the blur is on the text itself, not the background. */
.welcome-name {
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-weight: 500; font-size: clamp(2.2rem, 7vw, 4.6rem);
  margin: 0; line-height: 1.05; color: #fff;
  opacity: 0; filter: blur(24px); transform: scale(1.04);
  letter-spacing: .18em;
  animation: welcomeBlurIn 1.5s cubic-bezier(.2,.8,.2,1) .3s forwards;
}
.welcome-name #welcomeName { color: #fff; }
.welcome-sub {
  display: block; margin-top: 1.1rem;
  font-family: var(--sans, 'Inter', sans-serif); font-size: .95rem;
  letter-spacing: .12em; color: rgba(255,255,255,.6);
  opacity: 0; animation: introFade 1s ease 1.5s forwards;
}
@keyframes welcomeBlurIn {
  0%   { opacity: 0; filter: blur(24px); transform: scale(1.04); letter-spacing: .18em; }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: none; letter-spacing: .015em; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-name, .welcome-eyebrow, .welcome-sub { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; letter-spacing: normal !important; }
}

/* ==================== NAVBAR ==================== */
.navbar {
  background: var(--primary);
  color: var(--secondary);
  padding: 1.5rem 0;
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  flex: 1;
}

.nav-brand h1 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 0.2rem;
}

.tagline {
  font-size: 0.8rem;
  color: var(--accent);
  font-style: italic;
}

.nav-links {
  display: flex;
  gap: 2rem;
  margin: 0 2rem;
}

.nav-links a {
  color: var(--secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-auth {
  position: relative;
}

.btn-auth {
  padding: 0.7rem 1.5rem;
  background: var(--accent);
  color: var(--secondary);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-auth:hover {
  background: #ff2222;
}

.user-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1rem;
  margin-top: 0.5rem;
  min-width: 200px;
  box-shadow: var(--shadow-lg);
}

.user-menu.hidden {
  display: none;
}

.user-menu span {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--dark-gray);
}

/* ==================== BUTTONS ==================== */
.btn-primary, .btn-secondary, .btn-sm, .btn-danger {
  padding: 0.7rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-size: 0.9rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--secondary);
}

.btn-primary:hover {
  background: #ff2222;
}

.btn-primary.full {
  width: 100%;
}

.btn-secondary {
  background: var(--light-gray);
  color: var(--dark-gray);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: #e0e0e0;
}

.btn-sm {
  padding: 0.5rem 1rem;
  background: var(--light-gray);
  color: var(--dark-gray);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  margin: 0.3rem;
}

.btn-sm:hover {
  background: #e0e0e0;
}

.btn-sm.danger {
  background: #ffcccc;
  color: #cc0000;
}

.btn-danger {
  background: #ff6b6b;
  color: white;
}

.hidden {
  display: none !important;
}

/* ==================== MAIN CONTENT ==================== */
main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  min-height: calc(100vh - 200px);
}

.page {
  display: none;
  animation: fadeIn 0.3s ease;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==================== HERO ==================== */
.hero {
  background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
  color: var(--secondary);
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 8px;
  margin: 2rem 0;
}

.hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 800;
}

.hero-content p {
  font-size: 1.3rem;
  color: #ccc;
}

/* ==================== SECTIONS ==================== */
.featured-section, .videos-section {
  margin: 3rem 0;
}

.featured-section h3, .videos-section h3, .page-header h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 0.5rem;
  display: inline-block;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0;
}
.page-subhead { color: #6b6b6b; font-size: .95rem; margin: -1rem 0 1.6rem; max-width: 60ch; }

/* ==================== GRIDS ==================== */
.stories-grid, .videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.story-card, .video-card {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow);
}

.story-card:hover, .video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--light-gray);
}

.card-content {
  padding: 1.5rem;
}

.card-content h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.card-meta {
  font-size: 0.8rem;
  color: var(--medium-gray);
  margin-bottom: 0.5rem;
}

.card-excerpt {
  color: var(--medium-gray);
  font-size: 0.9rem;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.card-views {
  font-size: 0.8rem;
  color: var(--medium-gray);
}

/* ==================== FORMS ==================== */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.1);
}

.form-toggle {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.form-toggle a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.form-toggle a:hover {
  text-decoration: underline;
}

.form-actions {
  display: flex;
  gap: 1rem;
}

.form-actions button {
  flex: 1;
}

small {
  font-size: 0.8rem;
  color: var(--medium-gray);
  margin-top: 0.3rem;
}

/* ==================== MODALS ==================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--secondary);
  border-radius: 8px;
  padding: 2rem;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.modal-content.large {
  max-width: 800px;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--dark-gray);
}

.modal-close:hover {
  color: var(--accent);
}

/* ==================== AUTH ==================== */
.auth-container {
  min-height: 300px;
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.auth-form h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* ==================== DASHBOARD ==================== */
/* ============================================================
   USER PANEL — futuristic frosted glass (whitish · pastel · black)
   ============================================================ */
.dashboard-container {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1.6rem;
  margin: 2rem 0;
  min-height: 500px;
  position: relative;
  padding: 1.6rem;
  border-radius: 26px;
  /* Whitish base washed with soft pastel light-orbs — the colour the frosted
     panels refract. Kept pale so the overall feel stays clean and futuristic. */
  background:
    radial-gradient(560px 420px at 6% -10%, rgba(155,140,255,.40), transparent 62%),  /* lavender */
    radial-gradient(560px 420px at 104% 0%, rgba(120,205,255,.38), transparent 60%),  /* sky      */
    radial-gradient(620px 480px at 78% 116%, rgba(255,160,210,.34), transparent 60%), /* pink     */
    radial-gradient(520px 420px at 20% 120%, rgba(150,240,215,.30), transparent 60%), /* mint     */
    linear-gradient(160deg, #f7f8fc 0%, #eceef6 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
  overflow: hidden;
}
/* faint fine-grid overlay for a techy, futuristic surface */
.dashboard-container::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(20,22,40,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,22,40,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 55%, transparent 100%);
}
.dashboard-sidebar, .dashboard-main { position: relative; z-index: 1; }

/* Frosted-glass panels — high blur, bright edge, cool layered shadow */
.dashboard-sidebar {
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.34));
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 18px 46px -22px rgba(24,26,54,.35),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.25);
  padding: 1.4rem;
  border-radius: 20px;
  height: fit-content;
  position: sticky;
  top: 100px;
}

.dashboard-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nav-item {
  padding: 0.8rem 1rem;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
}

.nav-item {
  border-radius: 12px;
  color: #14161f;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.55);
}

/* Active nav = solid black pill — the "black" anchor of the palette. */
.nav-item.active {
  background: #101218;
  border-left-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(16,18,24,.7);
}

.dashboard-main {
  background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.36));
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  padding: 2rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    0 22px 60px -30px rgba(24,26,54,.4),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.25);
}

.dashboard-tab {
  display: none;
}

.dashboard-tab.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

.dashboard-tab h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.stat-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.4));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    0 12px 30px -20px rgba(24,26,54,.35),
    inset 0 1px 0 rgba(255,255,255,.9);
  padding: 1.6rem 1.5rem;
  border-radius: 18px;
  text-align: center;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* pastel top hairline accent */
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #9b8cff, #78cdff, #ffa0d2, #96f0d7);
  opacity: .85;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -22px rgba(24,26,54,.45), inset 0 1px 0 rgba(255,255,255,.9);
}

.stat-card h4 {
  color: #4a4d5e;
  font-size: 0.82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: #101218;
  letter-spacing: -.01em;
}

/* ==================== CONTENT LIST ==================== */
.content-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.content-item {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-left: 3px solid #101218;
  box-shadow: 0 8px 22px -16px rgba(24,26,54,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.content-item:hover {
  transform: translateX(2px);
  box-shadow: 0 14px 28px -18px rgba(24,26,54,.5);
}

.content-item h5 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.content-item-meta {
  font-size: 0.85rem;
  color: var(--medium-gray);
}

.content-item-actions {
  display: flex;
  gap: 0.5rem;
}

/* ==================== VIDEO UPLOAD TABS ==================== */
.video-upload-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  padding: 0.8rem 1rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: 600;
  transition: var(--transition);
  color: var(--medium-gray);
}

.tab-btn.active {
  color: var(--dark-gray);
  border-bottom-color: var(--accent);
}

.upload-tab {
  display: none;
}

.upload-tab.active {
  display: block;
}

/* Two-phase upload widget: a labelled status row + a bar that switches from
   a determinate byte-progress fill to an indeterminate "processing" sweep. */
.upload-progress { margin: 1rem 0; }
.upload-progress.hidden { display: none; }
.upload-status-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .45rem;
}
.upload-status { font-size: .82rem; font-weight: 600; color: var(--dark-gray, #333); }
.upload-percent { font-size: .8rem; font-weight: 700; color: var(--accent); }

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--light-gray);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-bar.hidden {
  display: none;
}

.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* Processing phase — the fill spans the track and an animated sheen sweeps
   across it so the user can see work is still happening server-side. */
.upload-progress.is-processing .progress-bar-fill {
  width: 100% !important;
  background-image: linear-gradient(90deg,
    var(--accent) 0%, var(--accent) 40%,
    rgba(255,255,255,.55) 50%,
    var(--accent) 60%, var(--accent) 100%);
  background-size: 220% 100%;
  animation: uploadSweep 1.1s linear infinite;
}
@keyframes uploadSweep {
  from { background-position: 200% 0; }
  to   { background-position: -20% 0; }
}

/* ==================== STORY DETAIL ==================== */
.story-detail {
  margin: 2rem 0;
}

.story-detail h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.story-detail-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--medium-gray);
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.story-detail img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.story-detail-content {
  line-height: 1.8;
  font-size: 1.05rem;
}

/* ==================== COMMENTS ==================== */
.comments-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.comments-section h4 {
  margin-bottom: 1.5rem;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.comment {
  background: var(--light-gray);
  padding: 1rem;
  border-radius: 4px;
}

.comment-author {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.comment-date {
  font-size: 0.8rem;
  color: var(--medium-gray);
}

.comment-text {
  margin-top: 0.5rem;
  line-height: 1.6;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links {
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
  }

  .stories-grid, .videos-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-container {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    display: flex;
    gap: 1rem;
    flex-direction: row;
    position: static;
    background: transparent;
    overflow-x: auto;
  }

  .dashboard-nav {
    flex-direction: row;
    gap: 0;
  }

  .hero-content h2 {
    font-size: 1.8rem;
  }

  .featured-section h3, .videos-section h3 {
    font-size: 1.5rem;
  }

  .modal-content {
    max-width: 90vw;
    max-height: 90vh;
    padding: 1.5rem;
  }

  .form-actions {
    flex-direction: column;
  }
}

/* ==================== UTILITY ==================== */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--medium-gray);
}

.mt-2 {
  margin-top: 1rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.gap-1 {
  gap: 0.5rem;
}

/* ============================================================
   THE NEW BLACK MAGAZINE — PureModa + ZAVO design system
   Light, rounded, bento, pill buttons, hashtag tags
   ============================================================ */
:root {
  --ink: #111111;
  --paper: #ffffff;
  --bg: #f4f4f2;
  --card: #ebebe8;
  --line: #e2e2de;
  --muted2: #8c8c88;
  --accent: #6b1414;     /* magazine maroon */
  --accent-2: #2b6cb0;   /* logo blue */
  --radius: 22px;
  --radius-sm: 16px;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; }
main { max-width: 1320px; padding: 0 1.5rem 4rem; }

/* ---------- Header (rounded, PureModa) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); padding: 0.9rem 1.5rem 0.4rem;
}
.header-inner {
  max-width: 1320px; margin: 0 auto;
  background: var(--paper); border-radius: 999px;
  box-shadow: 0 2px 18px rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.5rem 0.7rem 0.5rem 1.4rem;
}
.brand-logo { display: flex; align-items: center; flex: 0 0 auto; }
.brand-logo img { height: 40px; width: auto; display: block; border-radius: 6px; }
.cat-nav { display: flex; gap: 1.6rem; margin: 0 auto; flex-wrap: wrap; }
.cat-nav a {
  text-decoration: none; color: var(--ink); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; padding: 0.3rem 0; position: relative;
  transition: color .2s;
}
.cat-nav a:hover { color: var(--accent); }
.cat-nav a.active { color: var(--accent); }
.cat-nav a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; position: relative; }
.search-pill {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg); border-radius: 999px; padding: 0.45rem 0.9rem;
}
.search-ico { color: var(--muted2); font-size: 1rem; }
.search-pill input { border: none; background: transparent; outline: none; font-size: 0.85rem; width: 120px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg); font-size: 1rem; display: grid; place-items: center;
}
.icon-btn:hover { background: var(--card); }

/* ---------- Pill buttons ---------- */
.pill-btn {
  border: none; cursor: pointer; border-radius: 999px;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em;
  padding: 0.7rem 1.4rem; display: inline-flex; align-items: center; gap: 0.5rem;
  transition: transform .15s ease, background .2s ease;
}
.pill-btn:hover { transform: translateY(-1px); }
.pill-btn.dark { background: var(--ink); color: #fff; }
.pill-btn.dark:hover { background: var(--accent); }
.pill-btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.pill-btn.ghost:hover { background: var(--ink); color: #fff; }
.pill-btn.wide { padding: 0.8rem 1.7rem; }
.pill-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); font-size: 0.75rem; }
.user-menu { position: absolute; right: 0; top: calc(100% + 10px); border-radius: var(--radius-sm); }

/* ---------- Bento hero (PureModa) ---------- */
.bento {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem; margin: 1.2rem 0 3rem;
}
.bento-headline {
  grid-row: span 1; background: var(--card); border-radius: var(--radius);
  padding: 2.4rem 2.2rem; display: flex; flex-direction: column; justify-content: center;
}
.bento-feature { grid-column: 2; grid-row: 1 / span 2; }
.bento-sub { grid-column: 1; }
.bento-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 1rem; }
.bento-headline h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: 1.02; letter-spacing: -0.02em;
  text-transform: uppercase; cursor: pointer; margin-bottom: 1.1rem;
}
.bento-headline h1 .arrow { font-weight: 400; }
.bento-headline p { color: #444; font-size: 0.98rem; max-width: 48ch; margin-bottom: 1.6rem; }
.bento-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* Shared media tiles — CNN-style: photo on top, copy in a plain block below
   (not overlaid on the image). Category kicker, title and byline all sit on
   the page's normal paper background, so legibility never depends on how
   bright or busy the photo is. */
.tile { cursor: pointer; display: flex; flex-direction: column; }
.tile-media {
  position: relative; overflow: hidden; background: #161310;
  aspect-ratio: 16/11;
}
.tile-media.tall { aspect-ratio: auto; height: 100%; min-height: 420px; }
.tile-media-img, .tile-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center; object-fit: cover;
  border: 0; transition: transform .35s ease;
}
.tile:hover .tile-media-img, .tile:hover .tile-video { transform: scale(1.04); }

/* Inline edit pencil for logged-in contributors — overlays the card media,
   top-right, and opens the edit modal without triggering the card link. */
.edit-pencil {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(11,12,15,.78); color: #fff;
  font-size: .95rem; line-height: 1; display: grid; place-items: center;
  backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.tile:hover .edit-pencil, .river-item:hover .edit-pencil,
.edit-pencil:focus-visible { opacity: 1; transform: translateY(0); }
.edit-pencil:hover { background: var(--accent); }
/* On touch devices (no hover) keep it always visible so it's reachable. */
@media (hover: none) {
  .edit-pencil { opacity: 1; transform: none; }
}

/* Full "Edit story" button inside the open article view. */
.article-edit-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  margin: 0 0 1rem; padding: .5rem 1rem;
  background: var(--ink, #0b0c0f); color: #fff;
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em;
  transition: background .18s ease;
}
.article-edit-btn:hover { background: var(--accent); }

.tile-body { padding: 0.85rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }
.tile-eyebrow {
  font-family: var(--type); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--rust);
}
.tile-body h4 {
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tile-meta { font-size: 0.72rem; color: var(--muted2); }

/* Circular READ NOW overlay (PureModa SHOP NOW) */
.bento-feature { cursor: pointer; }
.circle-cta {
  position: absolute; right: 1.6rem; bottom: 1.6rem;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,.7);
  color: #fff; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em;
  display: grid; place-items: center; text-align: center; line-height: 1.15;
  transition: background .25s ease, transform .25s ease;
}
.bento-feature:hover .circle-cta { background: var(--accent); transform: scale(1.06); border-color: var(--accent); }

/* ---------- Category sections (standard news arrangement) ---------- */
.cat-section { margin: 0 0 3rem; }
.cat-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.1rem; padding-bottom: 0.7rem; border-bottom: 1.5px solid var(--ink);
}
.cat-head h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: -0.01em;
}
.text-link { font-size: 0.78rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* ---------- MMG neon mosaic (Tech / Arts / Entertainment) ---------- */
.mmg {
  --neon: #d4ff1a;
  --mmg-black: #0a0a0a;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  background: var(--mmg-black);
  padding: 12px;
  border-radius: 14px;
  margin: 2.5rem 0 0;
  grid-template-areas:
    "lead  tall"
    "row   label";
}
.mmg-lead, .mmg-tall, .mmg-small, .mmg-label { border-radius: 10px; overflow: hidden; cursor: pointer; position: relative; }
.mmg-lead { grid-area: lead; min-height: 320px; }
.mmg-tall { grid-area: tall; min-height: 320px; }
.mmg-row  { grid-area: row; display: grid; grid-template-columns: 1fr 1.3fr; gap: 12px; }
.mmg-label { grid-area: label; }

.mmg-lead-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mmg-lead-copy { position: relative; z-index: 2; padding: 2rem; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.mmg-headline {
  font-family: var(--display); font-weight: 800; color: var(--neon);
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.6vw, 3.2rem); margin-bottom: 0.9rem; max-width: 12ch;
}
.mmg-sub { color: #e8e8e8; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.7; max-width: 44ch; font-family: var(--sans); }
.mmg-c { position: absolute; right: 1.6rem; bottom: 1.4rem; color: var(--neon); font-size: 1.4rem; opacity: 0.9; }

/* B&W image cells */
.mmg-bw { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.05); transition: filter 0.3s ease; }
.mmg-tall:hover .mmg-bw, .mmg-small:hover .mmg-bw { filter: grayscale(0.2) contrast(1.05); }
.mmg-pill {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  border: 1.5px solid var(--neon); color: var(--neon); border-radius: 999px;
  padding: 0.35rem 1.1rem; font-family: var(--display); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.08em;
}
.mmg-dot-lg { position: absolute; top: 0.9rem; right: 1rem; width: 60px; height: 60px; border-radius: 50%; background: var(--neon); z-index: 2; }

.mmg-small { min-height: 190px; }
.mmg-arrow {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--neon);
  color: var(--neon); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700;
}
.mmg-small-cap {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
  color: #fff; font-family: var(--display); font-weight: 700; font-size: 1rem; line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
.mmg-label {
  background: var(--neon); color: var(--mmg-black); text-decoration: none;
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; justify-content: center; min-height: 190px;
}
.mmg-label-big { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.2vw, 2.9rem); text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; }
.mmg-label-tag { position: absolute; top: 1.3rem; right: 1.3rem; font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.mmg-label-sub { margin-top: 0.7rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; max-width: 26ch; font-family: var(--sans); line-height: 1.5; }
.mmg-dot-sm { position: absolute; right: 1.4rem; bottom: 1.3rem; width: 24px; height: 24px; border-radius: 50%; background: var(--mmg-black); }

@media (max-width: 760px) {
  .mmg { grid-template-columns: 1fr; grid-template-areas: "lead" "tall" "row" "label"; }
}

/* Homepage grid: compact multi-category layout */
#categorySections { display: flex; flex-direction: column; gap: 1.5rem; }
.cat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cat-card-container { position: relative; }
.cat-badge {
  position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em;
  background: rgba(0, 0, 0, 0.5); color: #ddd; padding: 0.4rem 0.7rem;
  border-radius: 2px; text-transform: uppercase; white-space: nowrap;
}

/* ---------- ZAVO dark video section ---------- */
.zavo-section {
  background: #121316; border-radius: var(--radius);
  padding: 2.6rem 2.2rem 2.8rem; margin: 1rem 0 0; color: #fff;
}
.zavo-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.8rem; gap: 1rem; }
.zavo-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: #9aa0a6; }
.zavo-head h3 { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1.05; margin-top: 0.6rem; }
.circle-link {
  flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35); color: #fff; text-decoration: none;
  display: grid; place-items: center; text-align: center; font-size: 0.8rem; font-weight: 600;
  transition: background .25s ease;
}
.circle-link:hover { background: rgba(255,255,255,.12); }
.zavo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.vpanel { cursor: pointer; }
.vpanel-media {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  background-size: cover; background-position: center;
  aspect-ratio: 3/4; display: flex; align-items: flex-end;
}
.vpanel-play {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(20,16,12,.25);
  border: 1.5px solid rgba(255,255,255,.85); color: #fff; display: grid; place-items: center;
  font-size: 0.78rem; opacity: .85; transition: transform .25s ease, opacity .25s ease;
}
.vpanel:hover .vpanel-play { transform: scale(1.12); opacity: 1; }
.vpanel-label { padding: 1.2rem; color: #fff; position: relative; z-index: 2; }
.vpanel-label h4 { font-weight: 700; font-size: 1.05rem; line-height: 1.15; margin-bottom: 0.3rem; }
.vpanel-meta { font-size: 0.72rem; color: #c7c7c7; }

/* ---------- Stories / Videos standalone pages ---------- */
.page-header h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; border: none; font-size: 2.2rem; }
#stories.page, #videos.page, #about.page { padding-top: 1.5rem; }
#storiesList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
#videosList { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.empty-note { color: var(--muted2); font-size: 0.95rem; padding: 1.5rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .cat-nav { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bento-feature { grid-column: 1; grid-row: auto; }
  .tile-media.tall { min-height: 340px; }
  .cat-grid, .cat-row, .zavo-grid, #storiesList { grid-template-columns: repeat(2, 1fr); }
  #videosList { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .header-inner { flex-wrap: wrap; border-radius: var(--radius); }
  .search-pill input { width: 90px; }
  .cat-grid, .zavo-grid, #storiesList, #videosList { grid-template-columns: 1fr; }
  .cat-row { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
  .cat-row .tile-media { aspect-ratio: 4/3; }
  .cat-row .tile-body h4 { font-size: 1rem; -webkit-line-clamp: 2; }
  .cat-row .tile-eyebrow { font-size: 0.62rem; }
  .zavo-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PREMIUM LAYER — ZAVO hero + NYT/WaPo front page
   ============================================================ */
:root { --serif: 'Fraunces', Georgia, 'Times New Roman', serif; }
main { padding-top: 0; }

/* ---------------- ZAVO premium hero ---------------- */
.zhero {
  position: relative; overflow: hidden; color: #fff;
  border-radius: 26px; background: #0b0c0f;
  margin: 0.6rem 0 2.6rem; min-height: 560px;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6);
}
.zhero-ambient {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(48px) brightness(.45) saturate(1.2); transform: scale(1.2);
  opacity: .55; transition: opacity .5s ease;
}
.zhero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,9,12,.97) 0%, rgba(8,9,12,.86) 40%, rgba(8,9,12,.30) 100%);
}
.zhero-inner {
  position: relative; z-index: 2; min-height: 560px;
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 2.4rem;
  align-items: center; padding: 3.2rem 3.2rem;
}
.zhero-copy { max-width: 34rem; }
/* Hero copy — fast fade-OUT (base), slow staggered ease-IN (.show).
   Different transitions per state keep the text swap invisible. */
.zhero-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  color: #b9bcc4; text-transform: uppercase;
  opacity: 0; transform: translateY(7px);
  transition: opacity .28s ease, transform .28s ease;
}
.zhero-eyebrow.show { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
.zhero-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.6rem, 4.8vw, 4.7rem); line-height: 0.98;
  letter-spacing: -0.025em; margin: 1.1rem 0 1.2rem; cursor: pointer;
  opacity: 0; transform: translateY(13px);
  transition: opacity .28s ease, transform .28s ease, color .2s ease;
}
.zhero-title.show {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1) .07s, transform .62s cubic-bezier(.22,.61,.36,1) .07s, color .2s ease;
}
.zhero-title:hover { color: #f0d9c4; }
.zhero-excerpt {
  color: #c7c9d0; font-size: 1.06rem; line-height: 1.6; max-width: 46ch;
  opacity: 0; transform: translateY(11px);
  transition: opacity .28s ease, transform .28s ease;
}
.zhero-excerpt.show {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1) .15s, transform .62s cubic-bezier(.22,.61,.36,1) .15s;
}
.zhero-actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.9rem; }
.pill-btn.light { background: #fff; color: #111; }
.pill-btn.light:hover { background: #f0d9c4; }
.pill-ico.dark { background: rgba(0,0,0,.1); color: #111; }
.zhero-dots { display: flex; gap: 0.5rem; }
.zdot {
  width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.32); transition: width .35s ease, background .35s ease;
}
.zdot.active { background: #fff; width: 26px; border-radius: 99px; }

/* transitioning panels (ZAVO arched columns) */
.zhero-panels { position: relative; width: 100%; height: 440px; }
.zpanel {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden; cursor: pointer;
  background-size: cover; background-position: center; z-index: 1;
  opacity: 0; transform: translateX(34px) scale(1.035);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.zpanel.active  { opacity: 1; transform: translateX(0) scale(1); z-index: 2; }
.zpanel.leaving { opacity: 0; transform: translateX(-34px) scale(1.035); z-index: 1; }
.zpanel-cat {
  position: absolute; top: 0.9rem; left: 0.9rem;
  background: var(--paper, #f6f1e8); color: var(--ink, #211b15);
  font-family: var(--type, monospace);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.32rem 0.7rem; border-radius: 0;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .5s ease .15s, transform .5s ease .15s;
}
.zpanel.active .zpanel-cat { opacity: 1; transform: none; }

/* Featured-article badge on the hero panel + the star used in the dashboard. */
.zpanel-feat {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  background: #101218; color: #f5c542;
  font-family: var(--sans, 'Inter', sans-serif);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.32rem 0.7rem; border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
}
.feat-star { color: #e0a92e; font-size: .9em; }
.btn-sm.approve { background: #1c7c4a; color: #fff; border-color: #1c7c4a; }
.btn-sm.approve:hover { background: #15633b; }

/* Status pills in the Pending Approval list */
.pend-pill {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  vertical-align: middle;
}
.pend-pill.pend  { background: #fde68a; color: #7a5b00; }   /* pending review — amber */
.pend-pill.draft { background: #e5e7eb; color: #4b5563; }   /* draft — grey */
.pend-pill.sched { background: #dbeafe; color: #1e40af; }   /* scheduled — blue */
.pend-pill.proc  { background: #f3e8ff; color: #6b21a8; }   /* processing — purple */

/* Respect reduced-motion: cut the slide/scale, keep a clean dissolve */
@media (prefers-reduced-motion: reduce) {
  .zpanel, .zpanel.active, .zpanel.leaving { transform: none; }
  .zhero-eyebrow, .zhero-title, .zhero-excerpt { transform: none !important; }
}
.circle-link.floaty {
  position: absolute; right: 2.4rem; bottom: 2.2rem; z-index: 3;
  width: 92px; height: 92px; background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px); border-color: rgba(255,255,255,.4);
}

/* ---------------- NYT/WaPo front page ---------------- */
.rule { height: 1px; background: var(--ink); opacity: 0.12; margin: 2.6rem 0; }

.front-top { display: grid; grid-template-columns: 2fr 1fr; gap: 2.6rem; align-items: start; }
.lead { cursor: pointer; }
.lead-media {
  width: 100%; aspect-ratio: 16/9; border-radius: 12px;
  background-size: cover; background-position: center; margin-bottom: 1.2rem;
}
.kicker {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.lead-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 2.7vw, 2.7rem); line-height: 1.07;
  letter-spacing: -0.015em; margin: 0.5rem 0 0.7rem;
}
.lead:hover .lead-title { color: var(--accent); }
.lead-excerpt { color: #3c3c3c; font-size: 1.05rem; line-height: 1.6; max-width: 56ch; margin-bottom: 0.7rem; }
.byline { font-size: 0.76rem; color: var(--muted2); letter-spacing: 0.01em; }

.lead-rail { border-left: 1px solid var(--line); padding-left: 2.4rem; }
.rail-head {
  font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  padding-bottom: 0.8rem; border-bottom: 2px solid var(--ink); margin-bottom: 0.4rem;
}
.rail-item { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rail-item:last-child { border-bottom: none; }
.rail-thumb { width: 88px; height: 66px; border-radius: 8px; background-size: cover; background-position: center; flex: 0 0 auto; }
.rail-text h4 { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; line-height: 1.22; margin: 0.25rem 0; }
.rail-item:hover h4 { color: var(--accent); }

/* Featured video widget — a single admin-pinned video, horizontal, hanging
   in the sidebar rail; collapses to nothing when no video is pinned. */
.fw-card { display: block; cursor: pointer; margin-bottom: 1.4rem; padding-bottom: 1.3rem; border-bottom: 2px solid var(--ink); }
.fw-media { position: relative; aspect-ratio: 16/9; border-radius: 0; overflow: hidden; background-size: cover; background-position: center; background-color: var(--card); }
.fw-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: rgba(20,16,12,.25);
  border: 1.5px solid rgba(255,255,255,.85); color: #fff; font-size: .8rem;
  display: grid; place-items: center; opacity: .9;
}
.fw-copy { padding-top: .65rem; }
.fw-eyebrow { font-size: .68rem; letter-spacing: .14em; }
.fw-copy h4 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1.22; margin-top: .3rem; }
.fw-card:hover h4 { color: var(--accent); }

/* Opinion strip */
.opinion-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 2.4rem; }
.opinion-head {
  grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--ink); padding-bottom: 0.6rem; margin-bottom: 0.4rem;
}
.opinion-head span { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.45rem; }
.op-item { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.3rem 0; cursor: pointer; }
.op-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 0.5rem; flex: 0 0 auto; }
.op-item h4 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.12rem; line-height: 1.25; margin-bottom: 0.2rem; }
.op-item:hover h4 { color: var(--accent); }

/* Latest (CNN-style two-column list) */
.latest-block { margin: 0 0 3rem; }
.latest-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.6rem; }
.latest-item { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.latest-cat { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); flex: 0 0 86px; }
.latest-item h4 { font-family: var(--serif); font-weight: 500; font-size: 1.06rem; line-height: 1.25; flex: 1; }
.latest-item:hover h4 { color: var(--accent); }
.latest-item .byline { flex: 0 0 auto; }

/* Refine category section headers to premium broadsheet */
.cat-section .cat-head h3 { font-family: var(--serif); font-weight: 600; text-transform: none; letter-spacing: -0.01em; font-size: 1.7rem; }

/* Responsive */
@media (max-width: 960px) {
  .zhero-inner { grid-template-columns: 1fr; padding: 2.2rem; }
  .zhero-panels { height: 240px; }
  .circle-link.floaty { display: none; }
  .front-top { grid-template-columns: 1fr; gap: 1.6rem; }
  .lead-rail { border-left: none; padding-left: 0; border-top: 2px solid var(--ink); padding-top: 1rem; }
  .opinion-rail { grid-template-columns: 1fr; }
  .latest-list { grid-template-columns: 1fr; }
}

/* ============================================================
   PREMIUM++  — ticker · Netflix video · footer · tour · contact
   ============================================================ */

/* ---- Live rolling ticker ---- */
.ticker { display:flex; align-items:stretch; gap:0; background:#0b0c0f; color:#fff; overflow:hidden; }
.ticker-label {
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex:0 0 auto;
  align-self:stretch;               /* fill the full bar height — no red sliver leaking above/below */
  background:var(--accent); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  padding:0 1.1rem; line-height:1; text-transform:uppercase;
}
.live-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)} }
.ticker-view { overflow:hidden; flex:1; }
.ticker-track { display:inline-flex; align-items:center; white-space:nowrap; animation:ticker 60s linear infinite; will-change:transform; }
/* Only pause on hover for real-mouse (desktop) devices. On touch screens a
   tap registers as :hover and sticks, permanently freezing the ticker — which
   made it look "broken" on mobile. */
@media (hover: hover) {
  .ticker:hover .ticker-track { animation-play-state:paused; }
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { color:#e8e8e8; font-size:.84rem; padding:.65rem 1rem; cursor:pointer; text-decoration:none; }
.ticker-item:hover { color:#fff; }
.ticker-item b { color:var(--accent); font-weight:700; text-transform:uppercase; font-size:.7rem; letter-spacing:.06em; margin-right:.4rem; }
.ticker-sep { color:#444; }

/* ---- Cinematic video hero carousel (videos page) ---- */
.vhero {
  --gold: #c8993a; --gold-hi: #e0b257; --glyph: #2a1f12;
  position: relative; overflow: hidden; border-radius: 22px;
  min-height: 72vh; max-height: 700px; display: flex; flex-direction: column;
  background: #1a140d; color: #fff; margin: 0 0 2.5rem;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6);
}
.vhero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.1s cubic-bezier(.4,0,.2,1); will-change: opacity; }
.vhero-lead { transition: opacity .35s ease; }
.vhero-lead.vhero-fading { opacity: 0; }
.vhero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg, rgba(38,26,16,.82) 0%, rgba(38,26,16,.45) 34%, rgba(38,26,16,.10) 60%, transparent 80%); }
.vhero-scrim-b { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(20,14,8,.78) 0%, transparent 42%); }

/* Anchored to the top (not centered) so the headline always starts at the
   same baseline — centering let varying title/sub lengths shift the whole
   block up/down between slides, making the slider look like it was resizing. */
.vhero-inner { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-start; padding: 3.4rem 3.2rem 1rem; }
.vhero-lead { max-width: 620px; }
.vhero-tick { display: block; width: 30px; height: 3px; background: var(--gold); margin-bottom: 20px; }
.vhero-eyebrow { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.92); margin-bottom: 14px; }
.vhero-title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 0.98;
  letter-spacing: 0.005em; font-size: clamp(2.4rem, 5vw, 4.6rem); margin: 0; max-width: 12ch;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vhero-sub {
  font-family: var(--sans); font-weight: 400; font-size: 0.95rem; line-height: 1.7;
  color: rgba(255,255,255,.7); max-width: 430px; margin: 1.2rem 0 1.8rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vhero-actions { display: flex; align-items: center; gap: 18px; }
.vhero-play { width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--gold); color: var(--glyph); font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; padding-left: 3px; transition: background .2s ease, transform .2s ease; }
.vhero-play:hover { background: var(--gold-hi); transform: scale(1.06); }
.vhero-discover { padding: 16px 28px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; font-family: var(--sans); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.16em; border-radius: 999px; cursor: pointer; transition: all .2s ease; }
.vhero-discover:hover { background: #fff; color: var(--glyph); border-color: #fff; }

/* bottom control band */
.vhero-controls { position: relative; z-index: 3; display: flex; align-items: flex-end; padding: 0 2.6rem 2rem; gap: 1rem; }
.vhero-arrows { display: flex; gap: 14px; }
.vhero-arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: all .2s ease; display: grid; place-items: center; padding-bottom: 3px; }
.vhero-arrow:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.vhero-progress { flex: 1; max-width: 520px; height: 2px; margin: 0 40px 22px; background: rgba(255,255,255,.22); }
.vhero-progress span { display: block; height: 100%; background: var(--gold); transition: width .6s cubic-bezier(.4,0,.2,1); }
.vhero-counter {
  margin-left: auto; font-family: var(--sans); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.16em; color: rgba(255,255,255,.7); margin-bottom: 10px;
}

.vid-page-header { margin-top: 0.5rem; }

/* ---- Video catalog: genre filter bar (movie-site "browse by section") ---- */
.vid-nav {
  display: flex; flex-wrap: wrap; gap: .55rem;
  padding: .2rem 0 1.6rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.vid-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-weight: 600; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.vid-chip:hover { border-color: var(--ink); }
.vid-chip-count {
  font-size: .68rem; font-weight: 700; color: var(--muted2);
  background: var(--card); border-radius: 999px; padding: .08rem .5rem; line-height: 1.4;
  transition: background .2s ease, color .2s ease;
}
.vid-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vid-chip.active .vid-chip-count { background: rgba(255,255,255,.18); color: var(--paper); }

/* ---- Video catalog: clearly-outlined sections ---- */
.vid-sec { margin: 0 0 2.6rem; }
.vid-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .7rem; margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--ink); position: relative;
}
.vid-sec-head::after {
  content: ''; position: absolute; left: 0; bottom: -5px; width: 64px; height: 3px; background: var(--rust);
}
.vid-sec-titles { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.vid-sec-titles h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: .01em; line-height: 1; color: var(--ink);
}
.vid-sec-sub {
  font-family: var(--type); font-size: .74rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted2);
}
.vid-sec-count {
  flex: 0 0 auto; font-family: var(--type); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rust); white-space: nowrap;
}

/* Responsive poster grid — uniform cards that wrap cleanly, unlike a sparse scroll-row */
.vid-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem;
}
.vid-grid .flix-card { flex: none; width: auto; }
.vid-grid .flix-card:hover { transform: translateY(-4px); }
.vid-sec .flix-card-info h4, .vid-sec .shorts-card-info h4 { color: #fff; }
/* Keep long titles from spilling — clamp to two lines */
.vid-sec .flix-card-info h4 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vid-sec .flix-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* "See all" button to expand a section beyond the preview count */
.vid-see-more {
  display: block; margin: 1.8rem auto 0; padding: 1rem 1.8rem;
  font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rust); background: transparent;
  border: 1px solid var(--rust); border-radius: 999px; cursor: pointer;
  transition: all .2s ease;
}
.vid-see-more:hover { background: var(--rust); color: var(--paper); }

@media (max-width: 860px) {
  /* Keep the cinematic hero on tablets/phones (a modern video site leads with
     it) but shrink it into a compact 16:9-ish poster and simplify the chrome
     so it doesn't crowd the screen. */
  .vhero { min-height: 56vh; max-height: 460px; border-radius: 16px; }
  .vhero-inner { padding: 2rem 1.6rem 0.6rem; }
  .vhero-title { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
  .vhero-sub { display: none; }
  .vhero-controls { padding: 0 1.4rem 1.3rem; }
  .vhero-progress { margin: 0 16px 20px; }
  .vhero-arrow { width: 42px; height: 42px; font-size: 1.25rem; }
  .vid-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .vid-nav { gap: .45rem; padding-bottom: 1.2rem; }
  .vid-chip { font-size: .68rem; padding: .5rem .85rem; }
}

/* Phones: lead each section with the latest video as a big poster, then list
   the rest as compact, text-forward rows with a small thumbnail. */
@media (max-width: 600px) {
  .vid-grid { gap: 0; }

  /* Featured (newest) — keep the big overlaid poster, with breathing room below */
  .vid-grid .flix-card:first-child { margin-bottom: 1.1rem; }
  .vid-grid .flix-card:first-child .flix-card-info h4 { font-size: 1.15rem; }

  /* The rest — compact list rows */
  .vid-grid .flix-card:not(:first-child) {
    display: flex; align-items: center; gap: .85rem; position: static;
    padding: .85rem 0; border-top: 1px solid var(--line);
  }
  .vid-grid .flix-card:not(:first-child) .flix-card-media {
    flex: 0 0 116px; width: 116px; aspect-ratio: 16/9; border-radius: 8px; box-shadow: none;
  }
  .vid-grid .flix-card:not(:first-child) .flix-play { width: 30px; height: 30px; font-size: .58rem; }
  .vid-grid .flix-card:not(:first-child) .flix-card-info {
    position: static; padding: 0; flex: 1 1 auto; min-width: 0;
  }
  .vid-grid .flix-card:not(:first-child) .flix-card-info h4 {
    color: var(--ink); font-size: .92rem; line-height: 1.25; margin-bottom: .2rem;
  }
  .vid-grid .flix-card:not(:first-child) .flix-meta { color: var(--muted2); }
}

/* ---- Netflix-style cinematic video ---- */
.flix { background:transparent; border-radius:0; padding:0 0 2rem; margin:2.5rem 0 0; overflow:hidden; color:var(--ink);
  box-shadow:none; }
.flix-billboard { position:relative; min-height:62vh; display:flex; align-items:flex-end; border-radius:26px 26px 0 0; overflow:hidden; }
.flix-bb-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.flix-bb-copy { position:relative; z-index:2; padding:3rem 3rem 2.4rem; max-width:42rem; }
.flix-badge { font-size:.72rem; font-weight:700; letter-spacing:.16em; color:var(--accent); }
.flix-bb-copy h2 { font-family:var(--serif); font-weight:600; font-size:clamp(2.2rem,4vw,3.8rem); line-height:1; letter-spacing:-.02em; margin:.8rem 0 .8rem; color:#fff; }
.flix-bb-copy p { color:#c7c9d0; font-size:1.02rem; line-height:1.6; max-width:40ch; margin-bottom:1.6rem; }
.flix-bb-actions { display:flex; gap:.8rem; }
.pill-btn.glass { background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(8px); }
.pill-btn.glass:hover { background:rgba(255,255,255,.28); }
.flix-row-head { display:flex; align-items:baseline; justify-content:space-between; padding:1.8rem 2.4rem .9rem; }
.flix-row-head h3 { font-family:var(--serif); font-weight:600; font-size:1.5rem; color:var(--ink); }
.text-link.light { color:var(--accent); } .text-link.light:hover { color:var(--rust); }
.flix-row { display:flex; gap:.8rem; overflow-x:auto; padding:.3rem 2.4rem 1.4rem; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.flix-row::-webkit-scrollbar { height:8px; } .flix-row::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:99px; }

/* Homepage "Originals" row: the billboard above already gives the latest
   video full visual weight, so the rest are plain, compact list rows —
   small thumbnail + text beside it — not more big cards competing for
   attention. */
.flix-compact-list {
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:1.6rem; row-gap:1rem;
  padding:.3rem 2.4rem 1.6rem;
}
.flix-compact-item { display:flex; align-items:flex-start; gap:1rem; cursor:pointer; }
.flix-compact-thumb {
  position:relative; flex:0 0 128px; width:128px; height:72px; overflow:hidden;
  background-size:cover; background-position:center; background:#161310;
}
.flix-compact-thumb .iv-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.flix-compact-thumb::after {
  content:'▶'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85);
  color:#fff; font-size:.55rem; display:grid; place-items:center; background:rgba(20,16,12,.35);
}
.flix-compact-text { flex:1; min-width:0; padding-top:.1rem; }
.flix-compact-text h4 {
  font-family:var(--display); font-weight:700; font-size:.95rem; line-height:1.28; color:var(--ink);
  margin-bottom:.25rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.flix-compact-meta {
  font-size:.76rem; color:var(--muted2);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
@media (max-width: 1100px) {
  .flix-compact-list { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .flix-compact-list { grid-template-columns:1fr; padding:.3rem 1.2rem 1.4rem; }
  .flix-compact-thumb { flex:0 0 100px; width:100px; height:58px; }
}
.flix-card { position:relative; flex:0 0 330px; scroll-snap-align:start; cursor:pointer; transition:transform .35s cubic-bezier(.4,0,.2,1); }
.flix-card:hover { transform:scale(1.07); z-index:5; }
.flix-card-media { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background-size:cover; background-position:center; display:flex; align-items:flex-end; box-shadow:0 12px 30px -12px rgba(0,0,0,.7); }
.flix-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.92); opacity:.85;
  width:46px; height:46px; border-radius:50%; background:rgba(20,16,12,.25);
  border:1.5px solid rgba(255,255,255,.85); color:#fff; font-size:.85rem;
  display:grid; place-items:center; transition:.25s; backdrop-filter:blur(1px);
}
.flix-card:hover .flix-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
/* Its own layer (not baked into the background-image) so the title stays
   legible whether the card shows a static thumbnail or a looping video. */
.flix-card-scrim {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.9) 100%);
}
/* Overlaid on the thumbnail bottom by default (the cinematic look) */
.flix-card-info { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1rem; }
.flix-card-info h4 { font-weight:700; font-size:1.02rem; line-height:1.2; margin-bottom:.25rem; color:#fff; }
.flix-meta { font-size:.74rem; color:#c7c7c7; }
.empty-note.light { color:#888; padding:1rem 2.4rem; }

@media (max-width: 860px) {
  .flix-row-head { padding: 1.4rem 1.2rem .7rem; }
  .flix-row { flex-direction: column; overflow-x: visible; padding: .3rem 1.2rem 1.4rem; gap: 1rem; scroll-snap-type: none; }
  .flix-card { flex: 0 0 auto; width: 100%; }
  .flix-card:hover { transform: none; }
}

/* ---- Single latest-video viewport, woven into the article flow ---- */
.inline-video { margin: 0.5rem 0; }
.iv-card {
  position: relative; display: grid; grid-template-columns: 1.3fr 1fr;
  align-items: stretch; min-height: 280px; overflow: hidden;
  background: #0b0c0f; color: #fff; cursor: pointer;
}
.iv-media {
  position: relative; background-size: cover; background-position: center;
  filter: sepia(.32) saturate(1.05) contrast(1.04) brightness(.85);
}
.iv-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,9,12,.15) 0%, rgba(8,9,12,.7) 100%);
}
.iv-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1);
  width: 58px; height: 58px; border-radius: 50%; background: rgba(20,16,12,.25);
  border: 1.5px solid rgba(255,255,255,.85); color: #fff; display: grid; place-items: center;
  font-size: 1rem; z-index: 2; transition: transform .25s ease, background .25s ease;
}
.iv-card:hover .iv-play { transform: translate(-50%,-50%) scale(1.08); background: rgba(20,16,12,.4); }
/* Looping autoplay preview (video or YouTube embed) — pointer-events:none so
   clicks fall through to the card's onclick and still open the full video */
.iv-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; border: 0;
}

/* ===== SHORTS — vertical, phone-shot videos (Reels/Shorts/TikTok-style) ===== */
.shorts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.1rem;
}
.shorts-card { cursor: pointer; }
.shorts-card-media {
  position: relative; aspect-ratio: 9/16; border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center; display: flex;
  align-items: flex-end; box-shadow: 0 12px 30px -12px rgba(0,0,0,.7);
}
.shorts-card-info { position: relative; z-index: 2; padding: .9rem; }
.shorts-card-info h4 { font-weight: 700; font-size: .92rem; line-height: 1.25; margin-bottom: .2rem; color: #fff; }
.shorts-card .flix-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.92);
  opacity: .85; width: 40px; height: 40px; border-radius: 50%; background: rgba(20,16,12,.25);
  border: 1.5px solid rgba(255,255,255,.85); color: #fff; font-size: .75rem;
  display: grid; place-items: center; transition: .25s;
}
.shorts-card:hover .flix-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.iv-copy { padding: 2rem 2.2rem; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.iv-eyebrow { font-size: .68rem; letter-spacing: .14em; }
.iv-copy h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.12; }
.iv-copy p { color: #c7c9d0; font-size: .92rem; line-height: 1.55; max-width: 38ch; }
.iv-meta { font-size: .76rem; color: #9aa0a6; }
@media (max-width: 760px) {
  .iv-card { grid-template-columns: 1fr; }
  .iv-media { min-height: 220px; }
  .iv-copy { padding: 1.4rem 1.6rem 1.8rem; }
}

/* ---- Premium footer ---- */
.site-footer { background:#0b0c0f; color:#cfd2d6; margin-top:3.5rem; padding:3rem 1.5rem 2rem; }
.footer-cta { max-width:1320px; margin:0 auto 2.4rem; display:grid; grid-template-columns:1.4fr 1fr; gap:2rem;
  background:linear-gradient(120deg, #16181d, #101216); border:1px solid rgba(255,255,255,.07); border-radius:22px; padding:2.2rem; }
.footer-sub h3 { font-family:var(--serif); font-weight:600; color:#fff; font-size:1.7rem; margin-bottom:.4rem; }
.footer-sub p { font-size:.92rem; margin-bottom:1.1rem; }
.sub-form { display:flex; gap:.6rem; max-width:420px; }
.sub-form input { flex:1; padding:.8rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.3); color:#fff; outline:none; }
.sub-form input:focus { border-color:var(--accent); }
.sub-msg { font-size:.82rem; margin-top:.6rem; } .sub-msg.ok{color:#9be6a0} .sub-msg.err{color:#ff8b8b}
.footer-contact { border-left:1px solid rgba(255,255,255,.08); padding-left:2rem; }
.footer-contact h4 { color:#fff; font-size:1.1rem; margin-bottom:.4rem; }
.footer-contact p { font-size:.9rem; margin-bottom:1rem; }
.pill-btn.ghost-light { background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.pill-btn.ghost-light:hover { background:#fff; color:#111; }
.footer-grid { max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1.2fr 2fr 1fr; gap:2rem; padding:1.6rem 0; border-top:1px solid rgba(255,255,255,.08); }
.footer-brand { display:flex; gap:.9rem; align-items:center; }
.footer-brand img { width:54px; height:54px; border-radius:12px; }
.footer-brand p { color:#fff; font-weight:600; line-height:1.3; } .footer-brand span { color:#7e848c; font-weight:400; font-size:.8rem; }
.footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.footer-cols h5, .footer-social h5 { color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem; }
.footer-cols a { display:block; color:#aab; text-decoration:none; font-size:.88rem; padding:.25rem 0; }
.footer-cols a:hover { color:#fff; }
.social-row { display:flex; gap:.6rem; }
.social-row a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; text-decoration:none; font-size:.95rem; transition:.2s; }
.social-row a:hover { background:var(--accent); transform:translateY(-2px); }
.footer-legal { max-width:1320px; margin:1.4rem auto 0; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; font-size:.78rem; color:#7e848c; flex-wrap:wrap; gap:.5rem; }
.footer-promo { max-width:1320px; margin:0 auto; padding-top:.9rem; display:flex; justify-content:center; align-items:center; gap:.5rem; font-size:.7rem; flex-wrap:wrap; }
.footer-promo a { color:#6b7077; text-decoration:none; transition:color .2s ease; }
.footer-promo a:hover { color:#a9aeb5; }
.footer-promo-dot { color:#4a4e54; }


/* ---- Onboarding tour ---- */
/* Deep cool near-black wash with pastel glows behind the glass card. */
.tour-overlay {
  position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:1.5rem;
  background:
    radial-gradient(600px 400px at 20% 15%, rgba(155,140,255,.28), transparent 60%),
    radial-gradient(600px 400px at 82% 85%, rgba(255,160,210,.24), transparent 60%),
    rgba(10,12,20,.62);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.tour-overlay.hidden { display:none; }
/* Futuristic frosted-glass guide card (whitish · pastel · black) */
.tour-card {
  position: relative; overflow: hidden;
  width:100%; max-width:470px; border-radius:24px; padding:2.3rem;
  background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 40px 100px -30px rgba(12,14,26,.7), inset 0 1px 0 rgba(255,255,255,.95);
  animation:tourIn .4s cubic-bezier(.2,.8,.2,1);
}
/* pastel top hairline */
.tour-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, #9b8cff, #78cdff, #ffa0d2, #96f0d7);
}
@keyframes tourIn { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
.tour-progress { display:flex; gap:.4rem; margin-bottom:1.2rem; }
.tour-progress span { height:4px; flex:1; border-radius:99px; background:rgba(0,0,0,.12); transition:.3s; }
.tour-progress span.on { background:var(--accent); }
.tour-card h3 { font-family:var(--serif); font-weight:600; font-size:1.5rem; margin-bottom:.6rem; color:#1a1a1a; }
.tour-card p { color:#333; line-height:1.6; margin-bottom:1.6rem; }
.tour-actions { display:flex; justify-content:space-between; align-items:center; }
/* Keep the guide on the whitish/pastel/black palette — black primary action. */
.tour-actions .btn-primary { background:#101218; border-color:#101218; }
.tour-actions .btn-primary:hover { background:#000; }
.tour-actions .btn-sm { background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.12); }

@media (max-width:960px){
  .flix-billboard{min-height:52vh}
  .footer-cta{grid-template-columns:1fr} .footer-contact{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem}
  /* Let grid children shrink and force long emails/links to wrap inside the card */
  .footer-cta > *{ min-width:0; }
  .footer-sub, .footer-contact{ max-width:100%; }
  .footer-contact p, .footer-contact a, .footer-sub p{ overflow-wrap:anywhere; word-break:break-word; }
  .footer-grid{grid-template-columns:1fr; gap:1.5rem}
  .footer-cols{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:600px){
  .sub-form { flex-direction:column; max-width:100%; }
  .sub-form input { width:100%; }
  .sub-form button { width:100%; }
}

/* ============================================================
   RICH TEXT EDITOR + DASHBOARD ANALYTICS
   ============================================================ */
/* Word-like editor */
.rte { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.rte-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem; padding:.5rem .6rem; background:#f7f7f5; border-bottom:1px solid var(--border); }
.rte-toolbar button { min-width:34px; height:32px; padding:0 .55rem; border:1px solid transparent; background:transparent; border-radius:7px; cursor:pointer; font-size:.9rem; color:#222; transition:.15s; }
.rte-toolbar button:hover { background:#fff; border-color:var(--border); }
.rte-div { width:1px; height:20px; background:var(--border); margin:0 .35rem; }
.rte-editor { min-height:260px; max-height:48vh; overflow:auto; padding:1.1rem 1.2rem; font-family:var(--serif); font-size:1.05rem; line-height:1.7; color:#1a1a1a; outline:none; }
.rte-editor:empty:before { content:attr(data-placeholder); color:#aaa; font-family:var(--sans); font-size:.95rem; }
.rte-editor h2 { font-size:1.6rem; margin:.6rem 0 .4rem; }
.rte-editor h3 { font-size:1.25rem; margin:.6rem 0 .3rem; }
.rte-editor blockquote { border-left:3px solid var(--accent); margin:.6rem 0; padding:.2rem 0 .2rem 1rem; color:#444; font-style:italic; }
.rte-editor a { color:var(--accent); }
.rte-editor img { max-width:100%; border-radius:8px; margin:.5rem 0; }
.rte-count { display:block; margin-top:.5rem; color:var(--medium-gray); font-size:.78rem; }

/* Dashboard panels */
#analyticsPanels { margin-top:1.6rem; }
.panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.panel { background:#fff; border:1px solid var(--border); border-radius:16px; padding:1.3rem 1.4rem; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.panel-head h4 { font-family:var(--serif); font-weight:600; font-size:1.15rem; }
.badge { font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:#eee; color:#555; padding:.2rem .55rem; border-radius:99px; }
.badge.live { background:#fde8e8; color:var(--accent); }
.bar-chart { display:flex; flex-direction:column; gap:.7rem; }
.bar-row { display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:.7rem; font-size:.82rem; }
.bar-label { color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { height:10px; background:#f0f0ee; border-radius:99px; overflow:hidden; }
.bar-fill { display:block; height:100%; background:linear-gradient(90deg,var(--accent),#b02a2f); border-radius:99px; transition:width .6s ease; }
.bar-val { color:#888; font-variant-numeric:tabular-nums; }
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:1rem; text-align:center; }
.mini-stats b { display:block; font-family:var(--serif); font-size:1.6rem; }
.mini-stats span { font-size:.74rem; color:#888; }
.msg-list { display:flex; flex-direction:column; gap:.4rem; }
.msg-item { font-size:.82rem; color:#444; padding:.5rem .7rem; background:#faf9f7; border-radius:8px; }
.msg-item.muted, .muted { color:#999; }
.user-list { display:flex; flex-direction:column; gap:.5rem; margin-top:.8rem; }
.user-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.6rem .7rem; background:#faf9f7; font-size:.84rem; }
.user-row > div { display:flex; align-items:center; gap:.45rem; flex:1; flex-wrap:wrap; }
.user-row b { font-weight:600; }
.user-row-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#eee; }
.invite-form { display:flex; gap:.5rem; flex-wrap:wrap; margin:.7rem 0 .9rem; align-items:center; }
.invite-form .connect-input { width:auto; flex:1 1 150px; margin-bottom:0; }
.invite-form select.connect-input { flex:0 1 130px; }
.settings-subhead { margin-top:2.2rem; }
.form-msg { font-size:.85rem; margin-top:.5rem; }
.form-msg.ok { color:#2f5e54; }
.form-msg.err { color:#9c2b22; }

/* Permanent role badge beside a person's name — admin gets a gold-trimmed
   pill so their seniority reads at a glance without shouting. */
.role-badge {
  display:inline-flex; align-items:center; font-size:.62rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; padding:.18rem .55rem;
  border-radius:99px; background:#eee; color:#666; white-space:nowrap;
}
.role-badge--admin {
  background:linear-gradient(135deg,#2a2a2a,#0b0c0f); color:#f0d9c4;
  border:1px solid #c8993a; box-shadow:0 0 0 1px rgba(200,153,58,.25) inset;
}

.dashboard-welcome { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.welcome-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; }

/* Settings tab — profile photo uploader */
.avatar-uploader { display:flex; align-items:center; gap:1.1rem; margin:0 0 1.6rem; }
.avatar-preview { width:72px; height:72px; border-radius:50%; object-fit:cover; background:#eee; border:1px solid #e3e0da; }
.avatar-pick-btn { display:inline-block; cursor:pointer; }
.form-hint { font-size:.76rem; color:var(--muted2, #888); }

/* Title / First / Last name row — title narrow, names flexible. */
.name-fields { display:grid; grid-template-columns: 110px 1fr 1fr; gap:1rem; }
.name-fields .form-group { margin-bottom:0; }
@media (max-width:600px){ .name-fields { grid-template-columns:1fr; gap:.8rem; } }

/* Story/video featured-image & thumbnail uploaders — same pattern as the
   avatar uploader, but square previews (rectangular content images, not
   profile photos) and no forced margin (used mid-form, not as a header). */
.image-uploader { display:flex; align-items:flex-start; gap:1.1rem; margin:0 0 .4rem; }
.image-uploader-preview { width:96px; height:64px; object-fit:cover; background:#eee; border:1px solid #e3e0da; border-radius:6px; }
.image-pick-btn { display:inline-block; cursor:pointer; }
.panel.connect p { font-size:.86rem; margin-bottom:.8rem; }
.connect-input { width:100%; padding:.6rem .8rem; border:1px solid var(--border); border-radius:9px; font-size:.85rem; margin-bottom:.6rem; }
.connect-state { font-size:.78rem; color:#2e7d32; margin-top:.5rem; }
@media (max-width:760px){ .panel-grid{grid-template-columns:1fr} }

/* ============================================================
   ABOUT PAGE + FOOTER REFINEMENTS (real magazine content)
   ============================================================ */
.about-container { max-width: 720px; margin: 0 auto; padding: 2.5rem 0 4rem; }
.about-container .kicker { display:block; margin-bottom:.6rem; }
.about-container h2 { font-family: var(--serif); font-weight:600; font-size: 2.3rem; letter-spacing:-.01em; margin-bottom:1.2rem; }
.about-lead { font-family: var(--serif); font-size: 1.25rem; line-height:1.6; color:#222; margin-bottom:1.3rem; }
.about-container p { font-size: 1rem; line-height:1.75; color:#3c3c3c; margin-bottom:1.1rem; }
.about-founder { display:flex; align-items:center; gap:1rem; margin:2rem 0 1.2rem; padding:1.2rem; background:var(--card); border-radius:16px; }
.about-founder img { width:52px; height:52px; border-radius:50%; }
.about-founder h4 { font-family: var(--serif); font-weight:600; font-size:1.1rem; }
.about-founder span { font-size:.82rem; color:var(--muted2); }
.about-contact a { color: var(--accent); text-decoration:none; }
.about-contact a:hover { text-decoration:underline; }

.footer-contrib-link { display:inline-block; margin-top:1rem; color:#9aa0a6; font-size:.8rem; text-decoration:none; }
.footer-contrib-link:hover { color:#fff; }
.footer-contact a { color:#e8e8e8; }
.footer-contact a:hover { color:#fff; }

/* Login control, relocated off the masthead to the footer */
.footer-auth { position:relative; margin-top:1.1rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.footer-auth .pill-btn.ghost-light { font-size:.7rem; padding:.6rem 1.1rem; }
.footer-auth .user-menu {
  position:static; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  background:transparent; border:none; padding:0; margin:0; min-width:0; box-shadow:none;
}
.footer-auth .user-menu span { color:#fff; font-weight:600; font-size:.84rem; margin-bottom:0; }
.footer-auth .user-menu .btn-sm { border-radius:0; }

/* ============================================================
   CNN-STYLE SECTION PAGES · ARTICLE READER · COMMENTS · SHARP CARDS
   ============================================================ */

/* --- Remove rounded corners from content cards (sharp, CNN-like) --- */
.tile-media, .ed-card-media, .lead-media, .rail-thumb,
.river-media, .sl-media, .flix-card-media, .vpanel-media,
.panel, .stat-card, .content-item,
.article-hero img { border-radius: 0 !important; }

/* --- Section page (visitor clicks a section) --- */
.section-page { padding: 0.5rem 0 1rem; }
.section-masthead {
  display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 3px solid var(--accent); padding-bottom: 0.6rem; margin-bottom: 1.8rem;
}
.section-masthead h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; font-size: 1.9rem;
}
.section-count { color: var(--muted2); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }

.section-lead {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.8rem; cursor: pointer;
  margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); align-items: center;
}
.sl-media { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.sl-copy .kicker { display: block; margin-bottom: 0.5rem; }
.sl-copy h3 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 0.7rem;
}
.section-lead:hover h3 { color: var(--accent); }
.sl-copy p { color: #444; line-height: 1.6; margin-bottom: 0.8rem; font-size: 1.02rem; }

.section-river { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.4rem; }
.river-item {
  display: grid; grid-template-columns: 190px 1fr; gap: 1.1rem; cursor: pointer;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.river-media { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.river-copy .kicker { display: block; margin-bottom: 0.3rem; }
.river-copy h4 {
  font-family: var(--serif); font-weight: 600; font-size: 1.18rem; line-height: 1.22; margin-bottom: 0.4rem;
}
.river-item:hover h4 { color: var(--accent); }
.river-dek {
  font-size: 0.86rem; color: #555; line-height: 1.5; margin-bottom: 0.5rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Video player modal --- */
.video-player-modal {
  max-width: 1000px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  background: var(--paper); border-radius: 0;
}
/* id-specific: video player dialog stays centered with scroll */
#videoPlayerModal{ align-items:center; justify-content:center; padding:2.5vh 1rem; }
#videoPlayerModal .modal-content.video-player-modal{
  position:relative; width:100%; margin:0 auto;
  max-height:95vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* Sticky floating close chip — same as the story-modal close */
#videoPlayerModal .modal-close{
  position:sticky; top:0; float:right; z-index:30;
  width:42px; height:42px; display:grid; place-items:center;
  background:#fff; color:#111; border:1px solid #e0e0e0; border-radius:50%;
  font-size:1.55rem; line-height:1; cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  margin:0 0 -42px 0;            /* don't reserve vertical space above the video */
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
#videoPlayerModal .modal-close:hover{ background:#111; color:#fff; transform:scale(1.06); }
@media (max-width:600px){
  #videoPlayerModal{ padding:0; }
  #videoPlayerModal .modal-content.video-player-modal{ max-height:100vh; border-radius:0; }
  #videoPlayerModal .modal-close{ position:fixed; top:.7rem; right:.7rem; float:none; margin:0; }
}

.video-player {
  width: 100%; aspect-ratio: 16/9; border-radius: 0; background: #000;
  border: none;
}
.video-player-info { color: var(--ink); }
.video-player-info h3 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.video-player-info p { font-size: 0.95rem; line-height: 1.5; color: var(--muted2); font-family: var(--sans); }

/* --- Article reader --- */
.article-modal { max-width: 860px; padding: 2.4rem 2.6rem; }
.article .kicker { color: var(--accent); }
.article-title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08; letter-spacing: -0.015em; margin: 0.5rem 0 1.2rem;
}
.article-meta { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1.3rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.article-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex: 0 0 auto; }
.article-meta-text { display: flex; flex-direction: column; }
.article-author { font-weight: 700; font-size: 0.95rem; }
.article-sub { font-size: 0.8rem; color: var(--muted2); }
.article-share { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; }
.article-foot .article-share { margin-left: 0; }
.share-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted2); margin-right: 0.2rem; }
.share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; text-decoration: none; color: #222; font-size: 0.9rem; transition: 0.2s; }
.share-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.share-btn.fb:hover { background: #1877f2; border-color: #1877f2; }
.share-btn.in:hover { background: #0a66c2; border-color: #0a66c2; }
.share-btn.wa:hover { background: #25d366; border-color: #25d366; }
.article-hero { margin: 0 0 1.6rem; }
.article-hero img { width: 100%; display: block; }
.article-hero figcaption { font-size: 0.78rem; color: var(--muted2); padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.article-body { font-family: var(--serif); font-size: 1.18rem; line-height: 1.85; color: #1c1c1c; max-width: 700px; }
.article-body p { margin: 0 0 1.3rem; }
.article-body > p:first-of-type::first-letter { font-size: 3.6rem; font-weight: 600; float: left; line-height: 0.78; padding: 0.1rem 0.55rem 0 0; color: var(--accent); }
.article-body h2 { font-family: var(--serif); font-size: 1.6rem; margin: 1.8rem 0 0.6rem; }
.article-body h3 { font-family: var(--serif); font-size: 1.3rem; margin: 1.5rem 0 0.5rem; }
.article-body blockquote { border-left: 3px solid var(--accent); padding-left: 1.2rem; font-style: italic; color: #333; margin: 1.5rem 0; }
.article-body a { color: var(--accent); }
.article-body img { max-width: 100%; margin: 1rem 0; }
.article-foot { margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }

/* --- Comments --- */
.comments-section { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 2px solid var(--ink); }
.comments-section h4 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; margin-bottom: 1.1rem; }
.comment-count { background: var(--accent); color: #fff; font-size: 0.74rem; padding: 0.1rem 0.5rem; border-radius: 99px; margin-left: 0.3rem; vertical-align: middle; }
.comment-form { background: #f7f7f5; padding: 1.1rem; margin-bottom: 1.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.comment-name { padding: 0.65rem 0.8rem; border: 1px solid var(--border); font-size: 0.9rem; }
.comment-form textarea { padding: 0.75rem 0.8rem; border: 1px solid var(--border); min-height: 84px; font-family: inherit; font-size: 0.95rem; resize: vertical; }
.comment-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.comment-as { font-size: 0.8rem; color: var(--muted2); }
.comments-list { display: flex; flex-direction: column; gap: 1.3rem; }
.comment { display: flex; gap: 0.85rem; }
.comment-avatar { width: 38px; height: 38px; border-radius: 50%; background: #e3e3e0; color: #555; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.comment-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.comment-author { font-weight: 700; font-size: 0.9rem; }
.comment-badge { background: var(--accent); color: #fff; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.1rem 0.4rem; }
.comment-date { font-size: 0.76rem; color: var(--muted2); }
.comment-text { font-size: 0.95rem; line-height: 1.55; color: #333; }
.no-comments { color: var(--muted2); font-size: 0.9rem; }

@media (max-width: 760px) {
  .section-lead { grid-template-columns: 1fr; }
  .section-river { grid-template-columns: 1fr; }
  .river-item { grid-template-columns: 130px 1fr; }
  .article-modal { padding: 1.5rem 1.3rem; }
  .article-share { margin-left: 0; width: 100%; }
}

/* ============================================================
   VINTAGE GRUNGE RE-SKIN — aged broadsheet from a record-shop crate
   Appended last so these tokens & components win the cascade.
   ============================================================ */
:root{
  --paper:#f6f1e8;  --paper-2:#e5dac0;  --ink:#211b15;
  --bg:#f6f1e8;     --card:#e5dac0;
  --espresso:#241c16;  --accent:#cf5e2a;  --rust:#9c2b22;
  --ochre:#c0902f;  --teal:#2f5e54;  --muted2:#6f6051;
  --line:#c6b794;   --border:#c6b794;
  --serif:'Fraunces',Georgia,serif;
  --display:'Fraunces','Archivo',serif;
  --type:'Special Elite','Courier New',monospace;
  --radius:0; --radius-sm:0;
}
body{ background:var(--paper); color:var(--ink); }

/* paper grain — one fixed overlay over everything */
body::after{
  content:''; position:fixed; inset:0; z-index:9000;
  pointer-events:none; mix-blend-mode:multiply; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------
   THE MASTHEAD — "fine print" elegant, amazingly professional
   Logo is the first thing seen, centered above the menu row.
   ---------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--paper); padding:0 1.5rem;
}

/* row 1 — logo, centered and unmissable */
.header-top{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:1.15rem .1rem .95rem;
}
.hamburger-btn{ display:none; }
.hamburger-btn span{ display:block; width:18px; height:2px; background:var(--ink); margin:0 auto; transition:transform .25s ease, opacity .25s ease; }
.hamburger-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.header-left{ grid-column:1; justify-self:start; display:flex; align-items:center; }
.brand-mark-link{ display:flex; align-items:center; }
.brand-mark{ height:48px; width:auto; max-width:120px; display:block; border-radius:0; object-fit:contain; }

/* Newspaper-style text masthead — the publication's name set like a broadsheet nameplate */
.brand-logo{
  grid-column:2; justify-self:center; text-align:center;
  display:flex; flex-direction:row; align-items:baseline; justify-content:center; gap:.4rem;
  line-height:1; text-decoration:none; flex-wrap:wrap;
}
.brand-word,.brand-sub{
  font-family:var(--serif); font-weight:700; font-style:normal;
  font-size:clamp(1.65rem, 3.4vw, 2.5rem); letter-spacing:.005em; white-space:nowrap;
}
.brand-word{ color:var(--ink); }
.brand-sub{ color:var(--rust); text-transform:none; letter-spacing:.005em; margin-top:0; }
.header-actions{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:.6rem; position:relative; }

/* Single vintage dateline under the masthead — broadsheet "issue date" convention */
.masthead-dateline{
  max-width:1320px; margin:0 auto; text-align:center;
  font-family:var(--type); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); opacity:.7; padding:0 .1rem .55rem;
}

/* Drawer-only chrome (title bar, in-panel search) — hidden on desktop */
.drawer-head, .drawer-search{ display:none; }
/* Dim backdrop behind the mobile slide-in panel (inert until .show on mobile) */
.nav-backdrop{
  position:fixed; inset:0; background:rgba(20,16,11,.5); z-index:95;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.nav-backdrop.show{ opacity:1; visibility:visible; }

/* Desktop: a clean, centered nav bar — no dividers, a single hairline rule, grow-from-center underline */
.cat-nav{
  max-width:1320px; margin:0 auto;
  display:flex; gap:.15rem; flex-wrap:wrap; align-items:center; justify-content:center;
  position:relative; border-top:1px solid var(--line); border-bottom:2px solid var(--ink);
  padding:.2rem 0;
}
.cat-nav a{
  font-family:var(--display); font-weight:600;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); padding:.9rem 1.05rem; position:relative; white-space:nowrap;
  transition:color .2s ease;
}
.cat-nav a::after{
  content:''; position:absolute; left:1.05rem; right:1.05rem; bottom:.5rem;
  height:2px; background:var(--rust); transform:scaleX(0); transform-origin:center;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.cat-nav a:hover{ color:var(--rust); }
.cat-nav a:hover::after,
.cat-nav a.active::after{ transform:scaleX(1); }
.cat-nav a.active{ color:var(--rust); }

/* Desktop "More" — a tidy two-column mega panel with a pointer */
.nav-more{ position:relative; }
.nav-more-btn{
  font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink); background:transparent; border:0;
  padding:.9rem 1.05rem; cursor:pointer; display:flex; align-items:center; gap:.35rem;
  transition:color .2s ease;
}
.more-caret{ font-size:.6rem; transition:transform .25s ease; }
.nav-more-btn:hover,
.nav-more-btn[aria-expanded="true"]{ color:var(--rust); }
.nav-more-btn[aria-expanded="true"] .more-caret{ transform:rotate(180deg); }
.nav-more-menu{
  display:none; position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%);
  grid-template-columns:1fr 1fr; gap:.12rem .35rem; min-width:400px;
  background:var(--paper); border:1px solid var(--line); border-radius:5px;
  box-shadow:0 26px 50px -22px rgba(33,27,21,.55); padding:.5rem; z-index:50;
}
.nav-more-menu.open{ display:grid; }
.nav-more-menu::before{
  content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:11px; height:11px; background:var(--paper);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
}
.nav-more-menu a{
  font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); padding:.7rem .85rem; white-space:nowrap;
  border-radius:3px; transition:background .15s ease, color .15s ease;
}
.nav-more-menu a:hover{ color:var(--rust); background:var(--card); }

/* search + actions — squared, warm */
.search-pill{ background:var(--paper); border:1px solid var(--line); border-radius:0; }
.search-pill input::placeholder{ font-family:var(--type); font-size:.72rem; letter-spacing:.06em; }
.icon-btn{ background:var(--paper); border:1px solid var(--line); border-radius:0; }
.icon-btn:hover{ background:var(--card); color:var(--rust); }

/* ---------------- Mobile: hamburger menu + compact header layout ---------------- */
@media (max-width:960px){
  .header-top{ grid-template-columns:auto 1fr auto; padding:.85rem .1rem .8rem; gap:.6rem; }
  .brand-logo{ justify-self:center; }
  .brand-word,.brand-sub{ font-size:1.35rem; }
  .header-left{ gap:.5rem; }
  .brand-mark{ height:34px; }

  .hamburger-btn{
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:38px; height:38px; padding:0; background:transparent; border:1px solid var(--line);
    cursor:pointer;
  }

  .search-pill{ display:none; } /* search moves inside the drawer on small screens */
  .header-actions{ gap:.4rem; }
  body.nav-open{ overflow:hidden; } /* lock the page behind the open drawer */

  /* The menu becomes a slide-in side panel over a dimmed backdrop */
  .cat-nav{
    display:flex; position:fixed; top:0; left:0; bottom:0; right:auto;
    width:min(86vw, 340px); height:100%;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;
    background:var(--paper); border:0; border-right:1px solid var(--line);
    box-shadow:18px 0 50px -22px rgba(33,27,21,.55);
    max-height:none; overflow-y:auto; padding:0 0 1.6rem; z-index:100;
    transform:translateX(-100%); visibility:hidden;
    transition:transform .34s cubic-bezier(.4,0,.2,1), visibility .34s;
  }
  .cat-nav::after{ display:none; }
  .cat-nav.open{ transform:none; visibility:visible; }

  /* Panel header: title + close */
  .drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.15rem 1.3rem .95rem; border-bottom:1px solid var(--line); margin-bottom:.5rem;
    position:sticky; top:0; background:var(--paper); z-index:2;
  }
  .drawer-title{
    font-family:var(--display); font-weight:800; font-size:1.05rem;
    letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  }
  .drawer-close{
    width:34px; height:34px; display:grid; place-items:center; line-height:1;
    font-size:1.45rem; background:transparent; border:1px solid var(--line); border-radius:4px;
    color:var(--ink); cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .drawer-close:hover{ background:var(--card); color:var(--rust); }

  /* In-panel search */
  .drawer-search{
    display:flex; align-items:center; gap:.55rem; margin:0 1.3rem 1rem;
    border:1px solid var(--line); border-radius:999px; padding:.6rem .95rem; background:rgba(255,255,255,.5);
  }
  .ds-ico{ color:var(--muted2); font-size:1.05rem; }
  .drawer-search input{
    flex:1; min-width:0; border:0; background:transparent; outline:none;
    font-family:var(--type); font-size:.85rem; letter-spacing:.02em; color:var(--ink);
  }
  .drawer-search input::placeholder{ color:var(--muted2); }

  /* Items: roomy taps, a rust active bar, subtle hover — no clunky full-width rules */
  .cat-nav a{
    display:flex; align-items:center; width:100%;
    padding:.92rem 1.3rem; text-align:left;
    font-size:.82rem; letter-spacing:.1em;
    border:0; border-left:3px solid transparent;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .cat-nav a::after{ display:none; }
  .cat-nav a:hover{ background:var(--card); color:var(--rust); }
  .cat-nav a.active{ background:var(--card); color:var(--rust); border-left-color:var(--rust); }

  /* Flatten "More" into the same flat list */
  .nav-more{ width:100%; }
  .nav-more-btn{ display:none; }
  .nav-more-menu{
    display:flex; position:static; transform:none; flex-direction:column; width:100%;
    grid-template-columns:none; gap:0; min-width:0;
    background:transparent; border:0; border-radius:0; box-shadow:none; padding:0;
  }
  .nav-more-menu::before{ display:none; }
  .nav-more-menu a{
    width:100%; text-align:left; padding:.92rem 1.3rem; font-size:.82rem; letter-spacing:.1em;
    border:0; border-left:3px solid transparent; border-radius:0;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .nav-more-menu a:hover{ color:var(--rust); background:var(--card); }
}

/* ---------------- typewriter kickers, bylines, eyebrows ---------------- */
.kicker,.latest-cat,.zhero-eyebrow,.bento-eyebrow,.zavo-eyebrow,
.flix-badge,.byline,.section-count,.article-sub,.tile-meta,
.river-copy .kicker,.sl-copy .kicker,.comment-date,.flix-meta,.vpanel-meta{
  font-family:var(--type); letter-spacing:.04em;
}
.kicker,.zhero-eyebrow,.bento-eyebrow,.zavo-eyebrow,.flix-badge,
.latest-cat,.section-count{ color:var(--rust); }
.tagline{ font-family:var(--type); color:var(--rust); }

/* ---------------- sharp newsprint edges on every photo / card ---------------- */
.tile-media,.lead-media,.river-media,.sl-media,.vpanel-media,
.flix-card-media,.rail-thumb,.zpanel,.zhero,
.article-hero img,.stat-card,.panel,.content-item,
.story-card,.video-card,.card-image,.zhero-panels,
.search-pill,.icon-btn,.pill-btn,.modal-content,
.flix,.flix-billboard,.zavo-section,.ticker{ border-radius:0 !important; }

/* film treatment on photographs — printed, slightly aged */
.tile-media-img,.lead-media,.river-media,.sl-media,.zpanel,
.flix-bb-bg,.flix-card-media,.rail-thumb,.article-hero img,.vpanel-media{
  filter:sepia(.32) saturate(1.05) contrast(1.04) brightness(.98);
}

/* ---------------- rules, mastheads, section heads ---------------- */
.cat-head{ border-bottom:1.5px solid var(--ink); }
.section-masthead{ border-bottom:3px solid var(--rust); }
.cat-head h3,.section-masthead h2,.page-header h2{ font-family:var(--display); }

/* ---------------- dark blocks — espresso + faint halftone ---------------- */
.site-footer,.zavo-section{ background:var(--espresso) !important; position:relative; }
.zavo-section::before,.site-footer::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.10;
  background-image:radial-gradient(circle,#fff 1px,transparent 1.4px);
  background-size:6px 6px;
}
.zavo-head,.zavo-grid,
.flix-billboard,.flix-row-head,.flix-row,
.footer-cta,.footer-grid,.footer-legal{ position:relative; z-index:1; }
.ticker-label{ background:#1a1a1a; }
.ticker-item b{ color:#e8e8e8; }
.live-dot{ background:var(--ochre) !important; }
/* Breaking-news bar: a flat, plain strip — no decorative texture, just text. */
.ticker{ background:#b80f0f !important; }

/* ---------------- buttons — flat, warm ---------------- */
.pill-btn{ border-radius:0; font-family:var(--display); letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; }
.pill-btn.dark{ background:var(--ink); }
.pill-btn.dark:hover{ background:var(--accent); }
.pill-btn.light{ background:var(--ochre); color:#fff; }
.pill-btn.light:hover{ background:var(--accent); }
.pill-btn.ghost{ border-color:var(--ink); }
.pill-btn.ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-primary,.btn-auth{ background:var(--accent); border-radius:0; color:#fff; }
.btn-primary:hover,.btn-auth:hover{ background:var(--rust); }
.btn-secondary,.btn-sm,.btn-danger{ border-radius:0; }

/* ---------------- accents: drop-cap, quotes, links, tags ---------------- */
.article-body > p:first-of-type::first-letter{ color:var(--rust); font-family:var(--display); }
.article-body blockquote{ border-left:3px solid var(--rust); }
.article-body a,.text-link,.form-toggle a,.footer-contrib-link{ color:var(--rust); }
.lead:hover .lead-title,.section-lead:hover h3,.zhero-title:hover,
.river-item:hover h4,.latest-item:hover h4,.rail-item:hover h4,
.op-item:hover h4,.story-card:hover h4{ color:var(--rust); }
.op-dot{ background:var(--ochre); }
.comment-badge,.comment-count,.article-avatar{ background:var(--rust); }
/* User-panel guide + nav use the futuristic black/pastel palette, not rust. */
.tour-progress span.on{ background:linear-gradient(90deg,#9b8cff,#78cdff); }
.nav-item.active{ background:#101218; color:#fff; border-left-color:transparent; }

/* ---------------- forms / inputs / modals ---------------- */
.form-group input,.form-group textarea,.form-group select,
.comment-name,.comment-form textarea{
  border-radius:0; border-color:var(--line); background:var(--paper);
}
.form-group input:focus,.form-group textarea:focus,
.comment-name:focus,.comment-form textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(207,94,42,.15); outline:none;
}
.comment-form{ background:var(--paper-2); border-radius:0; }
.comments-section h4{ font-family:var(--display); }
.modal-content{ background:var(--paper); }
.modal-close:hover{ color:var(--rust); }

/* ================================================================
   PURE-WHITE / CNN-CLEAN RESKIN  (appended last → wins the cascade)
   - white surfaces everywhere, including the footer
   - drop the aged-paper grain texture
   - header no longer pinned, so the whole page scrolls
   ================================================================ */
:root{
  --paper:#ffffff;  --paper-2:#ffffff;  --bg:#ffffff;  --card:#f6f6f6;
  --line:#e4e4e4;   --border:#e4e4e4;
}
body{ background:#ffffff; }
body::after{ display:none !important; }          /* kill paper-grain noise overlay */

/* The masthead + nav used to stay pinned and ate ~20% of the viewport.
   Make it scroll away with the rest of the page. */
.site-header{ position:static !important; box-shadow:none; }

/* Footer: flip from dark espresso to clean white with dark text */
.site-footer{ background:#ffffff !important; color:#444; border-top:1px solid #e4e4e4; }
.site-footer::before{ display:none !important; }  /* kill halftone dots */
.footer-sub h3, .footer-brand p, .footer-cols h5, .footer-social h5{ color:#111 !important; }
.footer-sub p, .footer-brand span, .footer-legal{ color:#666 !important; }
.footer-cols a{ color:#444 !important; }
.footer-cols a:hover{ color:#000 !important; }
.footer-grid, .footer-legal{ border-top-color:#e4e4e4 !important; }
.footer-contact{ border-left-color:#e4e4e4 !important; }
.footer-social a{ color:#444 !important; }

/* ================================================================
   CNN-IFY  — clean sans typography, CNN red, flat white feature blocks
   (Inter + Archivo are already loaded in <head>, so no extra font cost)
   ================================================================ */
:root{
  --serif:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;  /* body */
  --display:'Archivo', 'Inter', system-ui, Arial, sans-serif;                          /* headlines */
  --type:'Inter', system-ui, -apple-system, Arial, sans-serif;                         /* meta/dates */
  --sans:'Inter', system-ui, -apple-system, Arial, sans-serif;
  --accent:#cc0000;  --rust:#cc0000;  --ochre:#cc0000;   /* CNN red */
}
body{ font-family:var(--serif); }
/* keep the publication wordmark as its serif identity */
.brand-word, .brand-sub{ font-family:'Fraunces', Georgia, serif !important; }

/* Headlines: bold sans like a news front page */
.zhero-title, .lead-title, .tile-body h4, .cat-head h3, .section-masthead h2,
.page-header h2, .flix-row-head h3, .rail-text h4, .latest-item h4,
.opinion-head span, .mmg-headline, .mmg-label-big {
  font-family:var(--display) !important; font-weight:800 !important; letter-spacing:-0.01em;
}
/* Kickers / categories / links in CNN red */
.tile-eyebrow, .kicker, .zhero-eyebrow, .latest-cat, .rail-text .kicker { color:var(--accent) !important; }
.text-link, .text-link.light { color:var(--accent) !important; }
.text-link:hover, .text-link.light:hover { color:#990000 !important; }

/* Square off the rounded corners (CNN is crisp/rectangular) */
.zhero, .tile-media, .tile-media-img, .tile-video, .flix-card-media,
.mmg-lead, .mmg-tall, .mmg-small, .mmg-label, .rail-thumb, .flix-compact-thumb,
.zpanel, .iv-frame, .iv-media { border-radius:0 !important; }

/* ---- Hero: flatten the dark panel to a clean white split ---- */
.zhero{
  background:#fff !important; color:var(--ink) !important;
  border-radius:0 !important; box-shadow:none !important;
  border-bottom:3px solid var(--accent); margin:0 0 2rem;
  height:520px; min-height:0 !important; max-height:520px; overflow:hidden;
}
@media (max-width:960px){
  /* Stacked layout (text above image) needs more room than the desktop
     split — grow the fixed height here rather than letting content overflow. */
  .zhero{ height:760px; max-height:760px; }
}
.zhero::after{ display:none !important; }        /* remove dark scrim */
.zhero-ambient{ display:none !important; }        /* remove blurred dark bg */
.zhero-inner{
  padding:2.2rem 0; gap:2.6rem; align-items:center;
  height:100%; min-height:0 !important; overflow-y:auto;
}
.zhero-eyebrow{ color:var(--accent) !important; }
.zhero-title{
  color:var(--ink) !important; font-weight:800 !important; line-height:1.02;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}
/* Long headlines shrink the font (class set in app.js by title length)
   instead of growing the fixed-height hero box. */
.zhero-title.zhero-title--sm{ font-size:clamp(2.1rem, 3.6vw, 3.6rem) !important; }
.zhero-title.zhero-title--xs{ font-size:clamp(1.7rem, 2.8vw, 2.7rem) !important; }
.zhero-excerpt{
  color:#444 !important; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; overflow:hidden;
}
.zpanel{ box-shadow:none; }
/* slider dots visible on white */
.zdot{ background:#cccccc !important; }
.zdot.active{ background:var(--accent) !important; }

/* ---- MMG mosaic: neon-on-black -> CNN red-on-white ---- */
.mmg{ background:#fff !important; --neon:#cc0000; --mmg-black:#111; padding:1.4rem 0 0; }
.mmg-label{ color:#fff !important; }
.mmg-label-big, .mmg-label-sub{ color:#fff !important; }
/* drop the leftover decorative ornaments (©, dots, arrow-circle, "MMG" tag) */
.mmg-c, .mmg-dot-lg, .mmg-dot-sm, .mmg-arrow, .mmg-label-tag{ display:none !important; }

/* Article body in clean sans, comfortable measure */
.article-body{ font-family:var(--serif) !important; }
.article-sub{ font-family:var(--type) !important; }

/* ---- CNN footer + contact form (clean white, red CTAs, square inputs) ---- */
/* kill the dark rounded CTA card → flat white, dark text */
.footer-cta{
  background:none !important; border:0 !important; border-bottom:1px solid #e4e4e4 !important;
  border-radius:0 !important; padding:0 0 2.2rem !important;
}
.footer-contact{ border-left:1px solid #e4e4e4 !important; }
.footer-contact h4{ color:#111 !important; font-family:var(--display) !important; font-weight:800 !important; }
.footer-contact p, .footer-contact a{ color:#555 !important; }
.footer-sub h3{ font-family:var(--display) !important; font-weight:800 !important; }
.footer-cols h5, .footer-social h5{ font-family:var(--type) !important; letter-spacing:.06em; }
/* inputs: white field, dark text, thin gray border, square */
.sub-form input, #contactForm input, #contactForm textarea,
.modal-content input, .modal-content textarea, .form-group input, .form-group textarea{
  background:#fff !important; color:#111 !important;
  border:1px solid #cfcfcf !important; border-radius:4px !important;
}
.sub-form input::placeholder, #contactForm input::placeholder, #contactForm textarea::placeholder{ color:#999 !important; }
.sub-form input:focus, #contactForm input:focus, #contactForm textarea:focus{ border-color:var(--accent) !important; }
/* CTAs in footer + contact modal → solid CNN red, square */
.site-footer .pill-btn, #contactModal .pill-btn, #contactForm button{
  background:var(--accent) !important; color:#fff !important;
  border:1px solid var(--accent) !important; border-radius:4px !important;
}
.site-footer .pill-btn:hover, #contactModal .pill-btn:hover, #contactForm button:hover{
  background:#990000 !important; border-color:#990000 !important;
}
/* contact modal heading + labels */
#contactModal h3, .modal-content h3{ font-family:var(--display) !important; font-weight:800 !important; color:#111 !important; }
#contactForm label, .form-group label{
  color:#555 !important; font-family:var(--type) !important; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.05em;
}
.footer-brand img{ border-radius:4px !important; }

/* ================================================================
   CNN-DARK FOOTER (appended last → wins over the white-reskin footer)
   ================================================================ */
.site-footer{ background:#000 !important; color:#aeb2b8; border-top:3px solid var(--accent) !important; }
.footer-sub h3, .footer-brand p, .footer-cols h5, .footer-social h5{ color:#fff !important; }
.footer-sub p, .footer-brand span, .footer-legal{ color:#8b8e94 !important; }
.footer-cols a{ color:#c7c9cd !important; }
.footer-cols a:hover{ color:#fff !important; }
.footer-grid, .footer-legal{ border-top-color:#262626 !important; }
.footer-cta{ border-bottom-color:#262626 !important; }
.footer-contact{ border-left-color:#262626 !important; }
.footer-contact h4{ color:#fff !important; }
.footer-contact p, .footer-contact a{ color:#9a9ea5 !important; }
.footer-contact a:hover{ color:var(--accent) !important; }
.footer-social a{ color:#c7c9cd !important; }
.footer-social a:hover{ color:var(--accent) !important; }
.footer-legal a{ color:#c7c9cd !important; }
/* the newsletter signup field lives directly on the black footer, so it
   needs its own dark-field treatment (separate from the white modal inputs) */
.sub-form input{
  background:#141414 !important; color:#fff !important; border:1px solid #2c2c2c !important;
}
.sub-form input::placeholder{ color:#777 !important; }
.sub-form input:focus{ border-color:var(--accent) !important; }

/* ================================================================
   MORE CNN ATTRIBUTES — red accent rule under masthead, bold uppercase
   bylines, square corners everywhere, flat hover states
   ================================================================ */
.site-header{ border-bottom:3px solid var(--accent); }
.header-inner{ border-radius:0 !important; box-shadow:none !important; border:1px solid var(--line); }
.brand-logo img{ border-radius:0 !important; }
.icon-btn, .search-pill{ border-radius:0 !important; }
.cat-nav a{ text-transform:uppercase; font-weight:700; }
.article-author, .latest-cat, .opinion-cat{ text-transform:uppercase; letter-spacing:.04em; }
.pill-btn{ border-radius:4px !important; }
.pill-btn.light, .pill-btn.ghost-light{ border-radius:4px !important; }
/* CNN-style red rule separating the kicker from the headline on a full article */
.article-title{ border-top:3px solid var(--accent); padding-top:1rem; }

/* ================================================================
   CNN-IFY VIDEO SECTION — square thumbnails, title/meta off the image
   (matches the no-text-over-image treatment already used on story cards)
   ================================================================ */
.flix-billboard, .flix-card-media, .shorts-card-media, .iv-card{ border-radius:0 !important; }
.flix-card-media{ box-shadow:none; }
.flix-card-scrim{ display:none; }                  /* no gradient needed once info sits below the thumb */
.flix-card-info{
  position:static !important; padding:.85rem 0 0 !important;
}
.flix-card-info h4{ color:var(--ink) !important; }
.flix-card .flix-meta{ color:var(--muted2) !important; }
.vid-sec .flix-card-info h4{ color:var(--ink) !important; }
.flix-row-head h3{ border-left:4px solid var(--accent); padding-left:.7rem; }
.flix-badge{ text-transform:uppercase; letter-spacing:.18em; }
/* mobile "first card big poster" rows still overlay — keep that one readable */
@media (max-width: 600px){
  .vid-grid .flix-card:first-child .flix-card-info{ position:absolute !important; padding:1rem !important; }
  .vid-grid .flix-card:first-child .flix-card-info h4{ color:#fff !important; }
  .vid-grid .flix-card:first-child .flix-card-scrim{ display:block; }
}

/* ----------------------------------------------------------------
   Section layout: moderate lead card + stacked smaller rows beside it
   ---------------------------------------------------------------- */
.vid-layout{
  display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:1.8rem; align-items:start;
}
/* lead card fills its column instead of the fixed 330px carousel width */
.vid-lead{ min-width:0; }
.vid-lead .flix-card{ flex:none; width:100%; }
.vid-lead .flix-card:hover{ transform:none; }       /* no scale-zoom for the big lead */
.vid-lead .flix-card-info h4{ font-size:1.3rem; }
.vid-lead .flix-play{ width:54px; height:54px; }

/* stacked column of small rows (thumb + text), row by row */
.vid-stack{ display:flex; flex-direction:column; }
.vid-stack .flix-compact-item{ padding:.9rem 0; border-top:1px solid var(--line); }
.vid-stack .flix-compact-item:first-child{ padding-top:0; border-top:0; }
.vid-stack .flix-compact-thumb{ flex:0 0 132px; width:132px; height:74px; }

@media (max-width: 860px){
  /* stack underneath the lead on narrow screens */
  .vid-layout{ grid-template-columns:1fr; gap:1.1rem; }
}

/* ================================================================
   STORY MODAL — sticky close (×) that follows scroll, centered dialog
   (appended last → wins the cascade)
   ================================================================ */
/* Dialog stays centered in the viewport with internal scrolling */
#storyDetailModal{ align-items:center; justify-content:center; padding:2.5vh 1rem; }
#storyDetailModal .modal-content.article-modal{
  position:relative; width:100%; margin:0 auto;
  max-height:95vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
/* The × rides along on scroll as a always-tappable floating chip, top-right */
#storyDetailModal .modal-close{
  position:sticky; top:0; float:right; z-index:30;
  width:42px; height:42px; display:grid; place-items:center;
  background:#fff; color:#111; border:1px solid #e0e0e0; border-radius:50%;
  font-size:1.55rem; line-height:1; cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  margin:0 0 -42px 0;            /* don't reserve vertical space above the article */
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
#storyDetailModal .modal-close:hover{ background:#111; color:#fff; transform:scale(1.06); }
@media (max-width:600px){
  #storyDetailModal{ padding:0; }
  #storyDetailModal .modal-content.article-modal{ max-height:100vh; border-radius:0; }
  #storyDetailModal .modal-close{ position:fixed; top:.7rem; right:.7rem; float:none; margin:0; }
}

/* ================================================================
   FEATURED VIDEO CARD — Full clickability (no parallax)
   ================================================================ */
.vhero{ cursor:pointer; user-select:none; }
.vhero:hover .vhero-bg{ opacity:0.92 !important; }
@media (max-width:1023px){
  .vhero{ cursor:default; }
}

/* ================================================================
   PHOTO OF THE DAY — compact card (photo left, text right)
   sits between the ZAVO hero and the front-top story rows.
   Clicking opens a full-view modal with the story-reader layout.
   ================================================================ */
.potd-card {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  align-items:stretch; margin:0 0 2.6rem; cursor:pointer;
  border-left:4px solid var(--accent); min-height:220px;
  background:transparent;
}
.potd-card:hover { background:var(--card); }
.potd-media {
  position:relative;
  background-size:cover; background-position:center; min-height:220px;
}
.potd-body {
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:1.4rem 1.8rem; position:relative;
}
.potd-body-inner { display:flex; flex-direction:column; gap:.3rem; }
.potd-eyebrow {
  font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.potd-title {
  font-family:var(--display); font-weight:800; font-size:1.2rem;
  line-height:1.25; color:var(--ink);
}
.potd-excerpt {
  font-size:.88rem; color:var(--muted2); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.potd-date {
  font-size:.72rem; color:var(--muted2); font-family:var(--type);
}
/* Change-photo button — only visible when a contributor is logged in */
.potd-change-btn {
  display:none; position:absolute; top:.6rem; right:.8rem;
  font-size:.62rem; padding:.35rem .7rem;
  background:transparent; border:1px solid var(--line); color:var(--muted2);
  cursor:pointer; font-family:var(--type); letter-spacing:.03em; text-transform:uppercase;
}
.potd-change-btn.show { display:inline-block; }
.potd-change-btn:hover { background:var(--ink); color:#fff; border-color:var(--ink); }

/* No photo uploaded yet — placeholder centred in the media area */
.potd-media::before {
  content:'Photo of\A the Day';
  white-space:pre; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; text-align:center;
  font-family:var(--display); font-weight:600; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
  color:var(--line);
}
/* Hide placeholder once a photo is loaded */
.potd-card[data-loaded="true"] .potd-media::before { display:none; }

/* ---- Full-view PotD modal (same layout as story article) ---- */
#potdModal{ align-items:center; justify-content:center; padding:2.5vh 1rem; }
#potdModal .modal-content.article-modal{
  position:relative; width:100%; margin:0 auto;
  max-height:95vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  max-width:860px;
}
#potdModal .modal-close{
  position:sticky; top:0; float:right; z-index:30;
  width:42px; height:42px; display:grid; place-items:center;
  background:#fff; color:#111; border:1px solid #e0e0e0; border-radius:50%;
  font-size:1.55rem; line-height:1; cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.22);
  margin:0 0 -42px 0;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
#potdModal .modal-close:hover{ background:#111; color:#fff; transform:scale(1.06); }
@media (max-width:600px){
  #potdModal{ padding:0; }
  #potdModal .modal-content.article-modal{ max-height:100vh; border-radius:0; }
  #potdModal .modal-close{ position:fixed; top:.7rem; right:.7rem; float:none; margin:0; }
}

/* Mobile: stack photo above text */
@media (max-width: 760px) {
  .potd-card { grid-template-columns:1fr; min-height:auto; }
  .potd-media { min-height:200px; }
  .potd-body { padding:1rem 1.2rem; }
}

/* ---- POTD archive gallery (past uploads in dashboard) ---- */
.potd-archive-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem;
}
.potd-archive-item {
  position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  cursor:pointer; transition:box-shadow .2s ease, transform .2s ease;
}
.potd-archive-item:hover { box-shadow:0 4px 18px rgba(0,0,0,.1); transform:translateY(-2px); }
.potd-archive-thumb {
  width:100%; aspect-ratio:3/2; object-fit:cover; background:#f0f0f0; display:block;
}
.potd-archive-meta { padding:.5rem .65rem; font-size:.68rem; color:var(--muted2); display:flex; flex-direction:column; gap:.15rem; }
.potd-archive-meta strong { display:block; font-size:.76rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.potd-archive-actions { display:flex; gap:.35rem; padding:0 .65rem .55rem; }
.potd-archive-actions button {
  flex:1; font-size:.62rem; font-family:var(--type); letter-spacing:.03em; text-transform:uppercase;
  padding:.3rem .4rem; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer;
  border-radius:4px; transition:background .15s ease, color .15s ease;
}
.potd-archive-actions button:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.potd-archive-actions button.danger:hover { background:var(--accent); border-color:var(--accent); }

/* ---- Full-page article view (#story) ---- */
.article-page{ max-width:860px; margin:0 auto; padding:2rem 1.4rem 4rem; }
.article-back{
  display:inline-block; color:var(--accent);
  font-family:var(--display); font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
  margin-bottom:1.6rem;
}
.article-back:hover{ color:var(--rust); }

.more-stories{ margin-top:2.5rem; padding-top:1.6rem; border-top:2px solid var(--ink); }
.more-stories h3{ font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:1.1rem; margin-bottom:1.2rem; }
.more-stories-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.more-story-card{ cursor:pointer; }
.more-story-thumb{ aspect-ratio:16/9; background-size:cover; background-position:center; margin-bottom:.55rem; }
.more-story-cat{ color:var(--accent); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.more-story-body h4{ font-family:var(--display); font-weight:700; font-size:.95rem; line-height:1.25; margin:.25rem 0 0; color:var(--ink); }
.more-story-card:hover h4{ color:var(--accent); }
@media (max-width:860px){ .more-stories-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .more-stories-grid{ grid-template-columns:1fr; } }