/* =====================================================
   PAKLAB / STORY PAGE · DARK THEME
   Premium editorial long-form. Reading-first.
   ===================================================== */

/* Base body (dark) */
body.dark { background: var(--ink); color: var(--bone); }

/* Container variant for comfortable reading width */
.container.narrow {
  max-width: 740px;
  padding-left: 32px;
  padding-right: 32px;
  margin: 0 auto;
}

/* ============================================
   HERO (dark)
   ============================================ */
.story-hero {
  padding: 120px 0 80px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: var(--ink);
  color: var(--bone);
}
.story-hero .container {
  max-width: 1100px;
}
.story-hero-eye {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.story-hero-eye .dash { color: var(--red); font-weight: 600; }
.story-hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0 0 28px;
  max-width: 960px;
  color: #fff;
  font-weight: 400;
}
.story-hero-sub {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 680px;
  margin: 0 0 36px;
  font-weight: 400;
}
.story-hero-meta {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.10);
  max-width: 680px;
}

/* ============================================
   ARTICLE · CHAPTERS (dark)
   ============================================ */
.story-article {
  padding: 80px 0 100px;
  background: var(--ink);
  color: var(--bone);
}

.ch {
  padding: 64px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.ch:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.ch-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 20px;
}
.ch-n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.22em;
}
.ch-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

.ch-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 0 32px;
  color: #fff;
  font-weight: 400;
}

.ch-body p {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.75;
  margin: 0 0 18px;
  color: rgba(255,255,255,0.82);
}
.ch-body p strong { font-weight: 600; color: #fff; }
.ch-body p em { font-style: italic; color: rgba(255,255,255,0.55); }

.ch-pullquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  margin: 28px 0;
  padding: 8px 0 8px 22px;
  border-left: 2px solid var(--red);
  color: #fff;
  font-weight: 500;
  max-width: 640px;
}

.ch-divider {
  border: none;
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: 32px 0;
  width: 80px;
}

.ch-closer {
  margin-top: 24px;
  font-size: 18px;
  color: #fff;
}
.ch-closer strong { font-weight: 700; color: #fff; }

/* ============================================
   END CTA (red strip - keeps red energy)
   ============================================ */
.story-end {
  background: var(--red);
  color: #fff;
  padding: 120px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.story-end::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0,0,0,0.25), transparent);
  pointer-events: none;
}
.end-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.end-eye {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 24px;
  text-transform: uppercase;
}
.end-eye .dash { color: #fff; font-weight: 700; }
.end-h {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0 auto 48px;
  color: #fff;
  font-weight: 400;
  max-width: 640px;
}
.end-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.end-ctas .cta-red,
.end-ctas .cta-ghost {
  padding: 14px 24px;
}
.story-end .cta-red {
  background: #fff;
  color: var(--red);
}
.story-end .cta-red:hover {
  background: var(--ink);
  color: #fff;
}
.end-ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
}
.end-ghost:hover {
  background: #fff;
  color: var(--red) !important;
  border-color: #fff !important;
}

/* ============================================
   FOOTER on dark body
   ============================================ */
body.dark .footer {
  background: var(--ink);
  color: rgba(255,255,255,0.65);
  border-top: 1px solid rgba(255,255,255,0.10);
}
body.dark .footer a { color: rgba(255,255,255,0.75); }
body.dark .footer a:hover { color: var(--red); }
body.dark .footer h4 { color: #fff; }
body.dark .footer-wordmark { color: #fff; }
body.dark .footer-cn-name { color: rgba(255,255,255,0.55) !important; }
body.dark .footer-tag { color: rgba(255,255,255,0.55); }
body.dark .footer-bottom {
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* ============================================
   NAV on dark body
   ============================================ */
body.dark .nav { background: var(--ink); border-bottom-color: rgba(255,255,255,0.08); }
body.dark .wordmark { color: #fff; }
body.dark .nav-links a { color: rgba(255,255,255,0.75); }
body.dark .nav-links a:hover,
body.dark .nav-links a.active { color: #fff; }
body.dark .lang-toggle { border-color: rgba(255,255,255,0.2); }
body.dark .lang-toggle button { color: rgba(255,255,255,0.55); }

/* ============================================
   CHINESE TYPOGRAPHY (Noto Sans TC)
   ============================================ */
html[lang="zh-Hant"] .story-hero-title {
  font-family: 'Noto Sans TC', var(--font-display);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.25;
}
html[lang="zh-Hant"] .story-hero-sub,
html[lang="zh-Hant"] .story-hero-meta {
  font-family: 'Noto Sans TC', 'Inter', sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.65;
}
html[lang="zh-Hant"] .ch-title {
  font-family: 'Noto Sans TC', var(--font-display);
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.3;
}
html[lang="zh-Hant"] .ch-body p,
html[lang="zh-Hant"] .ch-closer {
  font-family: 'Noto Sans TC', 'Inter', sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.85;
}
html[lang="zh-Hant"] .ch-pullquote {
  font-family: 'Noto Sans TC', var(--font-display);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.5;
}
html[lang="zh-Hant"] .end-h {
  font-family: 'Noto Sans TC', var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* ============================================
   MOBILE OPTIMIZATION (iPhone-first)
   ============================================ */
@media (max-width: 768px) {
  .container.narrow {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  /* Hero */
  .story-hero {
    padding: 56px 0 44px !important;
  }
  .story-hero-eye {
    font-size: 10px !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.2em !important;
  }
  .story-hero-title {
    font-size: clamp(30px, 8.5vw, 46px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    margin-bottom: 20px !important;
  }
  html[lang="zh-Hant"] .story-hero-title {
    font-size: clamp(26px, 7.8vw, 40px) !important;
    line-height: 1.35 !important;
  }
  .story-hero-sub {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
  }
  .story-hero-meta {
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
    padding-top: 16px !important;
  }

  /* Article */
  .story-article {
    padding: 44px 0 72px !important;
  }
  .ch {
    padding: 40px 0 !important;
  }
  .ch-eyebrow {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  .ch-n, .ch-label {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
  }
  .ch-title {
    font-size: clamp(22px, 6.4vw, 32px) !important;
    line-height: 1.18 !important;
    margin-bottom: 22px !important;
    letter-spacing: 0 !important;
  }
  html[lang="zh-Hant"] .ch-title {
    font-size: clamp(21px, 6vw, 30px) !important;
    line-height: 1.38 !important;
  }
  .ch-body p {
    font-size: 15.5px !important;
    line-height: 1.78 !important;
    margin-bottom: 16px !important;
  }
  html[lang="zh-Hant"] .ch-body p {
    line-height: 1.9 !important;
  }
  .ch-pullquote {
    font-size: clamp(18px, 5vw, 22px) !important;
    padding: 4px 0 4px 14px !important;
    margin: 20px 0 !important;
    line-height: 1.38 !important;
  }
  html[lang="zh-Hant"] .ch-pullquote {
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.55 !important;
  }
  .ch-divider {
    margin: 24px 0 !important;
    width: 60px !important;
  }
  .ch-closer {
    font-size: 16px !important;
  }

  /* End CTA */
  .story-end {
    padding: 64px 22px !important;
  }
  .end-eye {
    font-size: 10px !important;
    margin-bottom: 18px !important;
  }
  .end-h {
    font-size: clamp(22px, 6.2vw, 32px) !important;
    line-height: 1.2 !important;
    margin-bottom: 32px !important;
    letter-spacing: 0 !important;
  }
  html[lang="zh-Hant"] .end-h {
    font-size: clamp(20px, 5.8vw, 28px) !important;
    line-height: 1.4 !important;
  }
  .end-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
    max-width: 300px;
    margin: 0 auto;
  }
  .end-ctas .cta-red,
  .end-ctas .cta-ghost {
    justify-content: center;
    padding: 14px 20px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 420px) {
  .story-hero {
    padding: 44px 0 36px !important;
  }
  .story-hero-title {
    font-size: clamp(26px, 8vw, 36px) !important;
  }
  html[lang="zh-Hant"] .story-hero-title {
    font-size: clamp(23px, 7.2vw, 32px) !important;
  }
  .ch-title {
    font-size: clamp(20px, 5.8vw, 28px) !important;
  }
  html[lang="zh-Hant"] .ch-title {
    font-size: clamp(19px, 5.6vw, 26px) !important;
  }
  .ch-body p {
    font-size: 15px !important;
  }
  .ch-pullquote {
    font-size: clamp(17px, 4.6vw, 20px) !important;
  }
}

/* =====================================================
   STORY PAGE · PREMIUM BACKGROUND EFFECTS
   Magazine-like grain, vertical accent, scroll glow
   ===================================================== */

/* Film grain overlay (SVG noise) */
body.dark::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Subtle vignette on hero */
.story-hero {
  position: relative;
  overflow: hidden;
}
.story-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 1200px 600px at 50% 0%,
    rgba(179, 0, 0, 0.12),
    transparent 70%
  );
  mix-blend-mode: screen;
  z-index: 0;
}
.story-hero .container { position: relative; z-index: 1; }

/* Vertical fixed red accent line - left rail */
body.dark .pk-rail {
  position: fixed;
  top: 0; left: 0;
  width: 3px;
  height: 100vh;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--red) 20%,
    var(--red) 80%,
    transparent 100%
  );
  opacity: 0.18;
  pointer-events: none;
  z-index: 99;
}

/* Animated glow orb follows scroll position */
body.dark .pk-scroll-glow {
  position: fixed;
  top: 0; left: 2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(179,0,0,0.9), rgba(179,0,0,0.3) 40%, transparent 70%);
  transform: translate(-50%, 0);
  filter: blur(4px);
  pointer-events: none;
  z-index: 100;
  transition: top 0.2s cubic-bezier(.22,.61,.36,1);
  opacity: 0.7;
}

/* Chapter number · subtle red glow on reveal */
body.dark .ch.is-visible .ch-n {
  text-shadow: 0 0 12px rgba(179, 0, 0, 0.5);
  transition: text-shadow 0.6s;
}

/* Pullquote · animated red accent fill on reveal */
body.dark .ch-pullquote {
  position: relative;
  border-left: 0;
  padding-left: 24px;
}
body.dark .ch-pullquote::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent,
    var(--red) 20%,
    var(--red) 80%,
    transparent);
  box-shadow: 0 0 12px rgba(179,0,0,0.6);
}

/* Hero large ghost text (PAKLAB watermark) */
body.dark .story-hero::before {
  content: 'PAKLAB';
  position: absolute;
  bottom: -40px;
  right: -20px;
  font-family: var(--font-display);
  font-size: clamp(180px, 22vw, 340px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  z-index: 0;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

/* Section spacing between hero and article - subtle divider */
body.dark .story-hero + .story-article::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--red);
  margin: 0 auto 40px;
  box-shadow: 0 0 10px rgba(179,0,0,0.6);
}

/* Smooth fade between sections */
body.dark .story-article {
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(10,10,10,0.96) 50%, var(--ink) 100%);
}

/* Mobile — reduce heavy effects */
@media (max-width: 768px) {
  body.dark::before {
    opacity: 0.025; /* less grain */
  }
  body.dark .story-hero::before {
    font-size: clamp(120px, 36vw, 200px) !important;
    bottom: -20px;
    right: -30px;
  }
  body.dark .pk-rail {
    width: 2px;
    opacity: 0.12;
  }
  body.dark .pk-scroll-glow {
    width: 24px;
    height: 24px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.dark::before { display: none; }
  body.dark .pk-scroll-glow { display: none; }
  body.dark .story-hero::before { display: none; }
}