/* ============================================================
   TIMEWAVER 8 — Pop Energy Theme
   Visual layer only: it does not alter HTML, JavaScript,
   keyframes, or animation declarations.
   Inspired by repetition, primary colour, bold outlines,
   and playful asymmetry — expressed as a TIMEWAVER 8 original.
   ============================================================ */

:root {
  --wt-paper: #fffaf0;
  --wt-paper-alt: #f2eadc;
  --wt-ink: #19170f;
  --wt-red: #e94d35;
  --wt-blue: #2d68b3;
  --wt-pink: #e95e90;
  --wt-yellow: #f2c542;
  --wt-indigo: #263a62;
  --wt-green: #79aa70;

  --bg: var(--wt-paper);
  --bg-alt: var(--wt-paper-alt);
  --bg-deep: var(--wt-ink);
  --bg-card: #fffdf8;
  --bg-card-hover: #fff8e9;
  --text: var(--wt-ink);
  --text-mid: #5b5348;
  --text-light: #897f71;
  --border: rgba(25, 23, 15, 0.26);
  --border-warm: rgba(233, 77, 53, 0.42);
  --border-dim: rgba(25, 23, 15, 0.14);
  --accent: var(--wt-red);
  --accent-warm: var(--wt-yellow);
  --accent-glow: rgba(233, 77, 53, 0.22);
}

::selection { color: var(--wt-paper); background: var(--wt-red); }

body {
  color: var(--wt-ink);
  background-color: var(--wt-paper);
  background-image:
    radial-gradient(rgba(25, 23, 15, 0.09) 0.65px, transparent 0.8px);
  background-size: 9px 9px;
}

body::after {
  opacity: 0.16;
  mix-blend-mode: multiply;
}

/* ---------- common navigation: poster-like, but same behaviour ---------- */
#site-header.scrolled {
  background: rgba(255, 250, 240, 0.94);
  border-bottom: 3px solid var(--wt-ink);
}

.logo { color: var(--wt-ink); font-weight: 500; }
.logo span { color: var(--wt-red); }

#site-nav {
  background: var(--wt-red);
  backdrop-filter: blur(24px);
}

#site-nav ul li:not(.nav-sep):not(:has(.nav-cta)) {
  border-bottom: 2px solid rgba(25, 23, 15, 0.55);
}

#site-nav ul li:not(.nav-sep):not(:has(.nav-cta))::before {
  color: var(--wt-yellow);
  opacity: 1;
}

#site-nav a:not(.nav-cta),
.nav-sns-text a {
  color: var(--wt-paper) !important;
  font-weight: 500;
}

#site-nav a:not(.nav-cta):hover,
.nav-sns-text a:hover { color: var(--wt-yellow) !important; }

.nav-cta,
.btn-page-summary,
.btn-header-gpt,
.btn-header-search {
  border: 2px solid var(--wt-ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--wt-ink);
}

.nav-cta--line { background: var(--wt-yellow); color: var(--wt-ink); }
.nav-cta--gpt,
.btn-header-gpt { background: var(--wt-blue); color: var(--wt-paper); }
.btn-page-summary,
.btn-header-search { background: var(--wt-paper); color: var(--wt-ink); }

.hamburger span { background: var(--wt-ink); }

/* ---------- hero: keep moving circles, change the stage ---------- */
.hero {
  background: var(--wt-red);
  border-bottom: 4px solid var(--wt-ink);
}

.hero::before {
  opacity: 0.23;
  background:
    linear-gradient(90deg, transparent 48%, rgba(25, 23, 15, 0.1) 48%, rgba(25, 23, 15, 0.1) 52%, transparent 52%);
  background-size: 42px 42px;
}

.hero-label {
  color: var(--wt-ink);
  background: var(--wt-yellow);
  display: inline-block;
  padding: 5px 9px;
  border: 2px solid var(--wt-ink);
}

.hero-text h1 { color: var(--wt-paper); text-shadow: 4px 4px 0 var(--wt-ink); }
.hero-desc { color: var(--wt-paper); font-weight: 500; }

.btn-primary,
.btn-secondary {
  border: 3px solid var(--wt-ink);
  border-radius: 0;
  background: var(--wt-paper);
  color: var(--wt-ink);
  box-shadow: 6px 6px 0 var(--wt-ink);
}

.btn-primary:hover,
.btn-secondary:hover {
  box-shadow: 2px 2px 0 var(--wt-ink);
}

.scroll-indicator { color: var(--wt-ink); }

/* ---------- page sections ---------- */
.section,
.section-alt,
.section-for,
.section-voice,
.section-poem {
  border-bottom: 3px solid var(--wt-ink);
}

.section-alt { background: #f7dfcf; }

.section-label {
  display: inline-block;
  color: var(--wt-paper);
  background: var(--wt-blue);
  padding: 3px 9px;
  border: 2px solid var(--wt-ink);
  letter-spacing: 0.14em;
}

.section-body h2,
.section-head h2,
.section-for h2,
.section-voice h2 {
  color: var(--wt-ink);
}

.section-body h2::after,
.section-head h2::after {
  background: var(--wt-pink);
  height: 5px;
}

.section-img img {
  border: 3px solid var(--wt-ink);
  background: var(--wt-paper);
  box-shadow: 8px 8px 0 var(--wt-yellow);
}

.link-arrow {
  color: var(--wt-ink);
  border-bottom: 2px solid var(--wt-red);
  font-weight: 700;
}

.link-arrow:hover { color: var(--wt-red); }

.section-powerspot {
  color: var(--wt-paper);
  background: var(--wt-indigo);
  border-top: 4px solid var(--wt-ink);
  border-bottom: 4px solid var(--wt-ink);
}

.section-powerspot .section-label {
  background: var(--wt-yellow);
  color: var(--wt-ink);
}

.section-powerspot h2,
.section-powerspot p { color: var(--wt-paper); }

.section-powerspot .link-arrow {
  color: var(--wt-paper);
  border-color: var(--wt-yellow);
}

.section-powerspot .link-arrow:hover { color: var(--wt-yellow); }

/* ---------- cards and repeated content ---------- */
.for-card,
.blog-card-inner,
.voice-preview-card,
.session-card,
.price-card,
.qa-item,
.faq-item,
.profile-card {
  background: var(--wt-paper);
  border: 3px solid var(--wt-ink);
  border-radius: 0;
  box-shadow: 6px 6px 0 var(--wt-pink);
}

.for-card:nth-child(2n),
.blog-card:nth-child(2n) .blog-card-inner,
.voice-preview-card:nth-child(2n) {
  box-shadow: 6px 6px 0 var(--wt-blue);
}

.for-card:nth-child(3n),
.blog-card:nth-child(3n) .blog-card-inner {
  box-shadow: 6px 6px 0 var(--wt-yellow);
}

.for-num,
.blog-date {
  color: var(--wt-red);
  font-weight: 800;
}

.section-cta {
  color: var(--wt-ink);
  background: var(--wt-yellow);
  border-top: 4px solid var(--wt-ink);
  border-bottom: 4px solid var(--wt-ink);
}

.section-cta h2,
.section-cta p { color: var(--wt-ink); }

.section-cta .section-label {
  color: var(--wt-paper);
  background: var(--wt-ink);
}

/* ---------- visible section labels ---------- */
.section-label,
.section-powerspot .section-label,
.section-cta .section-label {
  color: var(--wt-ink) !important;
  background: var(--wt-yellow) !important;
  font-size: clamp(0.84rem, 1.5vw, 0.98rem) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  padding: 5px 11px !important;
  border: 2px solid var(--wt-ink) !important;
}
/* ---------- dark panels: readable type ---------- */
.page-hero--healy h1 {
  color: var(--wt-paper) !important;
  font-weight: 500;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.48);
}

.page-hero--healy .page-hero-desc {
  color: var(--wt-paper) !important;
  font-size: clamp(0.92rem, 1.8vw, 1.05rem);
  font-weight: 500;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.48);
}

.zoom-section-wrap {
  color: var(--wt-paper) !important;
  background: var(--wt-indigo) !important;
  border-top: 3px solid var(--wt-ink) !important;
  border-bottom: 3px solid var(--wt-ink) !important;
}

.zoom-section-wrap > h2,
.zoom-section-wrap > p {
  color: var(--wt-paper) !important;
}

.zoom-section-wrap > p {
  font-size: 0.92rem !important;
  font-weight: 500;
}

.voice-cat-nav {
  background: var(--wt-indigo) !important;
  border-bottom: 3px solid var(--wt-ink) !important;
}

.voice-cat-nav a {
  color: var(--wt-paper) !important;
  font-size: clamp(0.78rem, 1.5vw, 0.88rem) !important;
  font-weight: 800;
  border-bottom-color: transparent !important;
}

.voice-cat-nav a:hover,
.voice-cat-nav a.active {
  color: var(--wt-yellow) !important;
  border-bottom-color: var(--wt-yellow) !important;
}
/* ---------- blog cards: keep a clean baseline ---------- */
.blog-card,
.blog-card-inner {
  height: 100%;
}

.blog-card-inner {
  display: flex;
  flex-direction: column;
}

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.blog-card h3 {
  min-height: 5.1em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* ---------- footer ---------- */
#site-footer {
  color: var(--wt-paper);
  background: var(--wt-ink);
  border-top: 4px solid var(--wt-red);
}

.footer-logo,
.footer-nav a,
.footer-legal a { color: var(--wt-paper); }

.footer-logo:hover,
.footer-nav a:hover { color: var(--wt-yellow); }

.footer-sns a {
  border: 2px solid var(--wt-paper);
  border-radius: 0;
}

/* Keep text and controls legible on light backgrounds. */
input,
textarea,
select {
  color: var(--wt-ink);
  background: var(--wt-paper);
  border-color: var(--wt-ink);
}

@media (max-width: 768px) {
  .hero-text h1 { text-shadow: 3px 3px 0 var(--wt-ink); }
  .btn-primary,
  .btn-secondary { box-shadow: 4px 4px 0 var(--wt-ink); }
}