/* ============================================================
   SolarWaterKits.com - site.css
   Otaku manga teaching site for solar water systems
   ============================================================ */

:root{
  --blue:#0067c8;
  --blue2:#003b7a;
  --sky:#25a8ff;
  --water:#00c8ff;
  --navy:#061a34;
  --deep:#041120;
  --yellow:#ffd234;
  --orange:#ff8a00;
  --red:#e32929;
  --green:#18a957;
  --purple:#7434c8;
  --ink:#101827;
  --muted:#64748b;
  --paper:#fffaf0;
  --white:#ffffff;
  --soft:#eef8ff;
  --line:rgba(6,26,52,.16);
  --shadow:0 18px 45px rgba(0,0,0,.22);
  --comic-shadow:5px 5px 0 rgba(0,0,0,.22);
  --radius:22px;
  --max:1180px;
}

/* ============================================================
   Base
   ============================================================ */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 5%, rgba(37,168,255,.18), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(255,210,52,.16), transparent 24%),
    linear-gradient(180deg,#f3fbff 0%,#ffffff 44%,#eef8ff 100%);
  line-height:1.6;
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color:var(--blue);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

p{
  margin:0 0 1rem;
}

h1,h2,h3,h4{
  margin:0 0 .7rem;
  line-height:1.05;
  letter-spacing:-.03em;
}

h1{
  font-size:clamp(2.35rem,6vw,5.35rem);
}

h2{
  font-size:clamp(1.9rem,4vw,3.35rem);
}

h3{
  font-size:clamp(1.35rem,2.6vw,2rem);
}

strong{
  color:#000;
}

.wrapper,
.container{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
}

.section{
  padding:72px 0;
}

.section.tight{
  padding:42px 0;
}

/* ============================================================
   Header / Navigation
   ============================================================ */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(4,17,32,.92);
  backdrop-filter:blur(14px);
  border-bottom:4px solid var(--yellow);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.header-inner{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 0;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-weight:950;
  letter-spacing:-.04em;
  text-transform:none;
  font-size:clamp(1.2rem,2.4vw,2rem);
  line-height:1;
}

.logo:hover{
  text-decoration:none;
}

.logo-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--water),var(--blue));
  border:3px solid #fff;
  box-shadow:3px 3px 0 rgba(0,0,0,.3);
  font-size:1.45rem;
}

.logo small{
  display:block;
  font-size:.65rem;
  letter-spacing:.08em;
  color:var(--yellow);
  text-transform:uppercase;
  margin-top:4px;
}

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

.nav a{
  color:#fff;
  font-weight:850;
  font-size:.92rem;
  padding:9px 12px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}

.nav a:hover,
.nav a.active{
  background:var(--yellow);
  color:#081525;
  text-decoration:none;
  border-color:var(--yellow);
}

.menu-toggle{
  display:none;
}

/* ============================================================
   Hero
   ============================================================ */

.hero{
  position:relative;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(4,17,32,.94),rgba(0,59,122,.72)),
    radial-gradient(circle at 80% 10%,rgba(255,210,52,.38),transparent 26%),
    linear-gradient(135deg,var(--navy),var(--blue));
  overflow:hidden;
}

.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 2px,transparent 2px 16px);
  opacity:.45;
  pointer-events:none;
}

.hero-inner{
  position:relative;
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  min-height:620px;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:36px;
  padding:76px 0;
}

.hero-copy{
  position:relative;
  z-index:2;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#061a34;
  background:var(--yellow);
  border:3px solid #fff;
  border-radius:999px;
  padding:8px 14px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
  box-shadow:var(--comic-shadow);
  margin-bottom:18px;
}

.hero h1{
  text-transform:uppercase;
  color:#fff;
  text-shadow:
    4px 4px 0 #00142b,
    7px 7px 0 rgba(0,0,0,.25);
}

.hero h1 span{
  color:var(--yellow);
}

.hero .subhead{
  font-size:clamp(1.08rem,2vw,1.45rem);
  max-width:680px;
  color:#e8f8ff;
  font-weight:650;
  margin:18px 0 26px;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero-art{
  position:relative;
  z-index:2;
}

.hero-art img{
  width:100%;
  border-radius:30px;
  border:5px solid #fff;
  box-shadow:var(--shadow), 8px 8px 0 rgba(255,210,52,.85);
  object-fit:cover;
}

.hero-badge{
  position:absolute;
  right:18px;
  bottom:18px;
  background:#fff;
  color:var(--navy);
  border:4px solid var(--yellow);
  border-radius:20px;
  padding:14px 16px;
  font-weight:950;
  box-shadow:var(--comic-shadow);
  max-width:240px;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 18px;
  border-radius:999px;
  border:3px solid #071529;
  background:var(--yellow);
  color:#071529;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:4px 4px 0 rgba(0,0,0,.25);
}

.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}

.btn.blue{
  background:var(--blue);
  color:#fff;
  border-color:#fff;
}

.btn.white{
  background:#fff;
  color:var(--blue2);
}

.btn.red{
  background:var(--red);
  color:#fff;
  border-color:#fff;
}

/* ============================================================
   Manga / Comic Components
   ============================================================ */

.comic-title{
  text-transform:uppercase;
  font-weight:1000;
  color:var(--navy);
  text-shadow:3px 3px 0 rgba(0,200,255,.18);
}

.comic-title .pop{
  color:var(--orange);
}

.speech{
  position:relative;
  background:#fff;
  border:4px solid #061a34;
  border-radius:28px;
  padding:18px 20px;
  font-weight:850;
  box-shadow:var(--comic-shadow);
}

.speech:after{
  content:"";
  position:absolute;
  left:28px;
  bottom:-18px;
  width:30px;
  height:30px;
  background:#fff;
  border-right:4px solid #061a34;
  border-bottom:4px solid #061a34;
  transform:rotate(45deg);
}

.burst{
  display:inline-block;
  background:var(--yellow);
  color:#061a34;
  border:4px solid #061a34;
  padding:14px 18px;
  font-weight:1000;
  text-transform:uppercase;
  border-radius:18px 28px 16px 30px;
  box-shadow:var(--comic-shadow);
}

.warning-burst{
  background:var(--red);
  color:#fff;
  border:4px solid #fff;
  box-shadow:0 0 0 4px var(--red), var(--comic-shadow);
}

.note-card{
  background:#fffdf6;
  border:3px solid #061a34;
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--comic-shadow);
}

/* ============================================================
   Grids / Cards
   ============================================================ */

.grid{
  display:grid;
  gap:22px;
}

.grid.two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid.three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid.four{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.card{
  background:#fff;
  border:3px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
}

.card.comic{
  border:4px solid #061a34;
  box-shadow:var(--comic-shadow);
}

.card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}

.card-body{
  padding:22px;
}

.card h3{
  color:var(--navy);
}

.card .tag{
  display:inline-block;
  background:var(--soft);
  color:var(--blue2);
  border:2px solid rgba(0,103,200,.18);
  border-radius:999px;
  padding:5px 10px;
  font-size:.78rem;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:10px;
}

/* ============================================================
   Image Library / Gallery
   ============================================================ */

.gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.gallery-item{
  position:relative;
  background:#fff;
  border:4px solid #061a34;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--comic-shadow);
}

.gallery-item img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}

.gallery-caption{
  padding:16px 18px;
  background:#fff;
}

.gallery-caption h3{
  font-size:1.12rem;
  margin-bottom:6px;
}

.gallery-caption p{
  color:var(--muted);
  margin:0;
  font-size:.96rem;
}

/* ============================================================
   Feature / Explainer Blocks
   ============================================================ */

.explainer{
  background:#fff;
  border-top:5px solid var(--yellow);
  border-bottom:5px solid var(--yellow);
}

.explainer-box{
  background:
    linear-gradient(180deg,#ffffff,#f2fbff);
  border:4px solid var(--navy);
  border-radius:30px;
  padding:28px;
  box-shadow:var(--comic-shadow);
}

.steps{
  counter-reset:step;
  display:grid;
  gap:16px;
}

.step{
  counter-increment:step;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  background:#fff;
  border:3px solid rgba(0,103,200,.2);
  border-radius:18px;
  padding:16px;
}

.step:before{
  content:counter(step);
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--yellow);
  color:#071529;
  font-weight:1000;
  border:3px solid #071529;
  box-shadow:3px 3px 0 rgba(0,0,0,.22);
}

.step h3{
  margin-bottom:4px;
}

/* ============================================================
   Character Pages
   ============================================================ */

.character-hero{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:32px;
  align-items:center;
}

.character-portrait{
  border-radius:34px;
  border:5px solid #061a34;
  box-shadow:var(--comic-shadow);
  background:#fff;
}

.stats{
  display:grid;
  gap:12px;
  margin:18px 0;
}

.stat{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:14px;
  background:#eef8ff;
  border:2px solid rgba(0,103,200,.22);
  font-weight:850;
}

.power-meter{
  height:16px;
  border:2px solid #061a34;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}

.power-meter span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--water),var(--blue),var(--yellow));
}

/* ============================================================
   Warning / Safety Blocks
   ============================================================ */

.safety{
  background:
    linear-gradient(135deg,#fff7ed,#ffffff);
  border:5px solid var(--red);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--comic-shadow);
}

.safety h2,
.safety h3{
  color:var(--red);
  text-transform:uppercase;
}

.safety .label{
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:7px 12px;
  border-radius:999px;
  font-weight:1000;
  text-transform:uppercase;
  margin-bottom:10px;
}

.checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

.checklist li{
  position:relative;
  padding:12px 14px 12px 44px;
  background:#fff;
  border:2px solid rgba(6,26,52,.12);
  border-radius:14px;
  font-weight:750;
}

.checklist li:before{
  content:"✓";
  position:absolute;
  left:12px;
  top:9px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  font-weight:1000;
}

.no-list li:before{
  content:"×";
  background:var(--red);
}

/* ============================================================
   Tables
   ============================================================ */

.table-wrap{
  overflow-x:auto;
  border:3px solid #061a34;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--comic-shadow);
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}

th,td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid rgba(6,26,52,.12);
}

th{
  background:var(--navy);
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.04em;
}

tr:nth-child(even) td{
  background:#f4fbff;
}

/* ============================================================
   Forms / Contact
   ============================================================ */

.form-card{
  background:#fff;
  border:4px solid #061a34;
  border-radius:26px;
  padding:24px;
  box-shadow:var(--comic-shadow);
}

label{
  display:block;
  font-weight:900;
  color:var(--navy);
  margin-bottom:6px;
}

input,
textarea,
select{
  width:100%;
  font:inherit;
  border:3px solid rgba(6,26,52,.25);
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
}

textarea{
  min-height:140px;
  resize:vertical;
}

.field{
  margin-bottom:16px;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer{
  background:var(--deep);
  color:#dff6ff;
  border-top:5px solid var(--yellow);
  padding:42px 0 28px;
}

.footer-grid{
  width:min(var(--max), calc(100% - 32px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:28px;
}

.footer-title{
  color:#fff;
  font-size:1.5rem;
  font-weight:1000;
  letter-spacing:-.04em;
}

.footer-title span{
  color:var(--yellow);
}

.footer-links{
  display:grid;
  gap:8px;
}

.footer-links a{
  color:#dff6ff;
  font-weight:700;
}

.footer-bottom{
  width:min(var(--max), calc(100% - 32px));
  margin:28px auto 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.18);
  color:#9fc3d9;
  font-size:.92rem;
}

/* ============================================================
   Sitemap
   ============================================================ */

.sitemap-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.sitemap-list a{
  display:block;
  background:#fff;
  border:2px solid rgba(0,103,200,.18);
  border-radius:14px;
  padding:12px 14px;
  font-weight:800;
}

.sitemap-list a:hover{
  background:var(--yellow);
  color:#061a34;
  text-decoration:none;
}

/* ============================================================
   Utility Classes
   ============================================================ */

.center{
  text-align:center;
}

.lede{
  font-size:clamp(1.05rem,2vw,1.28rem);
  color:#334155;
  max-width:820px;
}

.dark{
  background:
    radial-gradient(circle at 20% 10%,rgba(0,200,255,.18),transparent 30%),
    linear-gradient(135deg,#041120,#08234a);
  color:#fff;
}

.dark .lede{
  color:#d7f4ff;
}

.yellow{
  color:var(--yellow);
}

.blue{
  color:var(--blue);
}

.red{
  color:var(--red);
}

.green{
  color:var(--green);
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#fff;
  color:var(--navy);
  border:2px solid rgba(6,26,52,.18);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
}

.dark .pill{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.24);
}

.waterline{
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--water),var(--yellow));
  margin:24px 0;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 900px){
  .header-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .nav{
    justify-content:flex-start;
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
  }

  .nav a{
    white-space:nowrap;
    font-size:.86rem;
  }

  .hero-inner{
    grid-template-columns:1fr;
    min-height:auto;
    padding:52px 0;
  }

  .hero-art img{
    border-radius:22px;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .gallery,
  .footer-grid,
  .sitemap-list,
  .character-hero{
    grid-template-columns:1fr;
  }

  .section{
    padding:52px 0;
  }
}

@media (max-width: 560px){
  .wrapper,
  .container,
  .hero-inner,
  .footer-grid,
  .footer-bottom{
    width:min(100% - 22px, var(--max));
  }

  .logo{
    font-size:1.25rem;
  }

  .logo-mark{
    width:36px;
    height:36px;
  }

  .hero h1{
    font-size:2.25rem;
    text-shadow:
      3px 3px 0 #00142b,
      5px 5px 0 rgba(0,0,0,.24);
  }

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

  .btn{
    width:100%;
  }

  .card-body,
  .explainer-box,
  .form-card,
  .safety{
    padding:18px;
  }

  .speech{
    padding:15px 16px;
    border-width:3px;
  }

  .gallery-item,
  .card.comic,
  .note-card{
    box-shadow:3px 3px 0 rgba(0,0,0,.22);
  }
}

/* ============================================================
   Optional mobile hamburger support
   Use with:
   <button class="menu-toggle">Menu</button>
   <nav class="nav" id="nav">...</nav>
   body.nav-open .nav { display:flex; }
   ============================================================ */

@media (max-width: 720px){
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--yellow);
    color:#061a34;
    border:3px solid #fff;
    border-radius:999px;
    padding:8px 14px;
    font-weight:950;
    box-shadow:3px 3px 0 rgba(0,0,0,.25);
  }

  .header-inner{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
  }

  .nav{
    display:none;
    flex-direction:column;
    align-items:stretch;
    overflow:visible;
    width:100%;
  }

  body.nav-open .nav,
  .nav.open{
    display:flex;
  }

  .nav a{
    width:100%;
    border-radius:14px;
  }
}

/* Fix: Meet the Manga Crew white-on-white card text */
#cast .card,
#cast .card-body,
#cast .card.comic {
  background: #ffffff;
  color: #071529;
}

#cast .card h2,
#cast .card h3,
#cast .card p,
#cast .card li,
#cast .card .card-body h2,
#cast .card .card-body h3,
#cast .card .card-body p,
#cast .card .card-body li {
  color: #071529 !important;
}

#cast .card .tag {
  background: #ffd234;
  color: #061a34 !important;
  border: 2px solid #061a34;
}

#cast .card a {
  color: #003b7a;
}

#cast .center h2,
#cast .center p,
#cast .lede {
  color: #ffffff;
}

/* ============================================================
   GLOBAL READABILITY SURGERY
   Fix white-on-white / light-on-light text across all pages.
   Put this at the VERY BOTTOM of site.css.
   ============================================================ */

/* Any white card inside a dark section must use dark text */
.section.dark .card,
.section.dark .card.comic,
.section.dark .card-body,
.section.dark .note-card,
.section.dark .contact-panel,
.section.dark .contact-card,
.section.dark .contact-note,
.section.dark .faq-item,
.section.dark .faq-card,
.section.dark .faq-panel,
.section.dark .about-panel,
.section.dark .about-card,
.section.dark .about-note,
.section.dark .license-panel,
.section.dark .license-card,
.section.dark .license-note,
.section.dark .privacy-panel,
.section.dark .privacy-card,
.section.dark .privacy-note,
.section.dark .disclaimer-panel,
.section.dark .disclaimer-card,
.section.dark .disclaimer-note,
.section.dark .sitemap-panel,
.section.dark .sitemap-card,
.section.dark .sitemap-note,
.section.dark .start-card,
.section.dark .route-card,
.section.dark .home-panel,
.section.dark .home-card,
.section.dark .episode-card,
.section.dark .lesson-card,
.section.dark .story-panel,
.section.dark .contact-line,
.section.dark .license-box,
.section.dark .privacy-box,
.section.dark .disclaimer-box {
  background: #ffffff !important;
  color: #071529 !important;
}

/* Force readable text inside those white cards */
.section.dark .card h1,
.section.dark .card h2,
.section.dark .card h3,
.section.dark .card h4,
.section.dark .card p,
.section.dark .card li,
.section.dark .card span,
.section.dark .card-body h1,
.section.dark .card-body h2,
.section.dark .card-body h3,
.section.dark .card-body h4,
.section.dark .card-body p,
.section.dark .card-body li,
.section.dark .card-body span,
.section.dark .note-card h1,
.section.dark .note-card h2,
.section.dark .note-card h3,
.section.dark .note-card h4,
.section.dark .note-card p,
.section.dark .note-card li,
.section.dark .note-card span,
.section.dark .contact-panel h1,
.section.dark .contact-panel h2,
.section.dark .contact-panel h3,
.section.dark .contact-panel p,
.section.dark .contact-panel li,
.section.dark .contact-card h1,
.section.dark .contact-card h2,
.section.dark .contact-card h3,
.section.dark .contact-card p,
.section.dark .contact-card li,
.section.dark .contact-note h1,
.section.dark .contact-note h2,
.section.dark .contact-note h3,
.section.dark .contact-note p,
.section.dark .contact-note li,
.section.dark .contact-line,
.section.dark .contact-line strong,
.section.dark .license-box,
.section.dark .privacy-box,
.section.dark .disclaimer-box {
  color: #071529 !important;
}

/* Keep tags readable */
.section.dark .card .tag,
.section.dark .card-body .tag,
.section.dark .tag {
  background: #ffd234 !important;
  color: #061a34 !important;
  border: 2px solid #061a34 !important;
}

/* Keep links readable on white cards */
.section.dark .card a,
.section.dark .card-body a,
.section.dark .note-card a,
.section.dark .contact-panel a,
.section.dark .contact-card a,
.section.dark .contact-note a,
.section.dark .contact-line a,
.section.dark .faq-item a,
.section.dark .license-box a,
.section.dark .privacy-box a,
.section.dark .disclaimer-box a {
  color: #003b7a !important;
  font-weight: 1000;
}

/* Keep dark-section headings white */
.section.dark > .container > .center h1,
.section.dark > .container > .center h2,
.section.dark > .container > .center h3,
.section.dark > .container > .center p,
.section.dark > .container > .center .lede,
.section.dark > .container > .center .kicker {
  color: #ffffff !important;
}

/* Keep intentional dark boxes dark */
.section.dark .contact-dark,
.section.dark .faq-dark-box,
.section.dark .about-dark,
.section.dark .license-dark,
.section.dark .privacy-dark,
.section.dark .disclaimer-dark,
.section.dark .sitemap-dark,
.section.dark .home-dark,
.section.dark .episode-dark,
.section.dark .dark-readable,
.section.dark .cast-strip {
  background: #061a34 !important;
  color: #ffffff !important;
  border-color: #ffd234 !important;
}

/* Text inside intentional dark boxes stays white */
.section.dark .contact-dark h1,
.section.dark .contact-dark h2,
.section.dark .contact-dark h3,
.section.dark .contact-dark p,
.section.dark .contact-dark li,
.section.dark .faq-dark-box h1,
.section.dark .faq-dark-box h2,
.section.dark .faq-dark-box h3,
.section.dark .faq-dark-box p,
.section.dark .faq-dark-box li,
.section.dark .about-dark h1,
.section.dark .about-dark h2,
.section.dark .about-dark h3,
.section.dark .about-dark p,
.section.dark .about-dark li,
.section.dark .license-dark h1,
.section.dark .license-dark h2,
.section.dark .license-dark h3,
.section.dark .license-dark p,
.section.dark .license-dark li,
.section.dark .privacy-dark h1,
.section.dark .privacy-dark h2,
.section.dark .privacy-dark h3,
.section.dark .privacy-dark p,
.section.dark .privacy-dark li,
.section.dark .disclaimer-dark h1,
.section.dark .disclaimer-dark h2,
.section.dark .disclaimer-dark h3,
.section.dark .disclaimer-dark p,
.section.dark .disclaimer-dark li,
.section.dark .sitemap-dark h1,
.section.dark .sitemap-dark h2,
.section.dark .sitemap-dark h3,
.section.dark .sitemap-dark p,
.section.dark .sitemap-dark li,
.section.dark .home-dark h1,
.section.dark .home-dark h2,
.section.dark .home-dark h3,
.section.dark .home-dark p,
.section.dark .home-dark li,
.section.dark .episode-dark h1,
.section.dark .episode-dark h2,
.section.dark .episode-dark h3,
.section.dark .episode-dark p,
.section.dark .episode-dark li,
.section.dark .dark-readable h1,
.section.dark .dark-readable h2,
.section.dark .dark-readable h3,
.section.dark .dark-readable p,
.section.dark .dark-readable li,
.section.dark .cast-strip h1,
.section.dark .cast-strip h2,
.section.dark .cast-strip h3,
.section.dark .cast-strip p,
.section.dark .cast-strip li {
  color: #ffffff !important;
}

/* Strong text in intentional dark boxes gets gold */
.section.dark .contact-dark strong,
.section.dark .faq-dark-box strong,
.section.dark .about-dark strong,
.section.dark .license-dark strong,
.section.dark .privacy-dark strong,
.section.dark .disclaimer-dark strong,
.section.dark .sitemap-dark strong,
.section.dark .home-dark strong,
.section.dark .episode-dark strong,
.section.dark .dark-readable strong,
.section.dark .cast-strip strong {
  color: #ffd234 !important;
}

/* Captions are always readable */
.gallery-caption,
.readable-caption,
.image-readable-caption {
  background: #ffffff !important;
  color: #071529 !important;
}

.gallery-caption h1,
.gallery-caption h2,
.gallery-caption h3,
.gallery-caption p,
.readable-caption h1,
.readable-caption h2,
.readable-caption h3,
.readable-caption p,
.image-readable-caption h1,
.image-readable-caption h2,
.image-readable-caption h3,
.image-readable-caption p {
  color: #071529 !important;
}

/* Global card safety: white card means dark text, everywhere */
.card,
.card-body,
.note-card {
  color: #071529;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card p,
.card li,
.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body p,
.card-body li,
.note-card h1,
.note-card h2,
.note-card h3,
.note-card h4,
.note-card p,
.note-card li {
  color: #071529;
}