/* ============================================================
   FILM.CSS — Cinematic Scrollytelling for index.html only
   Design direction: Inkwash Apothecary Cinema (水墨药铺电影感)
   Layered ON TOP of style.css — only redefines tokens inside .film scope
   ============================================================ */

.film {
  /* --- Film design tokens (scoped, won't break other pages) --- */
  --f-ink:        #0B0908;
  --f-walnut:     #2A1A12;
  --f-vellum:     #C9B991;
  --f-rice:       #EDE2C9;
  --f-gold:       #B89456;
  --f-gold-hi:    #E0C378;
  --f-cinnabar:   #8E2A1F;
  --f-jade:       #5A6B5A;
  --f-smoke:      rgba(255,240,210,.06);
  --f-line:       rgba(184,148,86,.18);

  --f-display-cn: 'Noto Serif SC', 'Songti SC', serif;
  --f-display-en: 'Cormorant Garamond', Georgia, serif;
  --f-mono:       'JetBrains Mono', 'SF Mono', monospace;

  --f-ease:       cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   GLOBAL FILM SHELL
   ============================================================ */
body:has(.film) {
  background: #0B0908;
  color: #C9B991;
}

/* English-only decorative text — hidden in CN mode, shown in EN mode */
.en-only { display: none !important; }
body.lang-en .en-only { display: revert !important; }

/* Pure-English decorative classes — auto-hidden in CN mode (no HTML changes needed) */
body:not(.lang-en) .ch-title-eyebrow,
body:not(.lang-en) .ch2-credit,
body:not(.lang-en) .ch3-en,
body:not(.lang-en) .ch5-header p,
body:not(.lang-en) .ch4-title small,
body:not(.lang-en) .ch7-eyebrow,
body:not(.lang-en) .spread-num,
body:not(.lang-en) .spread-name small,
body:not(.lang-en) .drawer-label .en {
  display: none !important;
}

/* hide marquee/value-section-style legacy */
.film,
.film * {
  box-sizing: border-box;
}

.film img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Chapter pin shell — GSAP ScrollTrigger handles pinning via pinSpacing,
   so outer = pin = 100svh exactly. No empty trailing space → no gap between sections. */
.chapter {
  position: relative;
  width: 100%;
  height: 100svh;
  background: var(--f-ink);
  isolation: isolate;
}
.chapter-pin {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
}
.ch6 { height: auto; }   /* chapter 6 is a container of multiple .spread items */

/* Chapter number badge — top-right of every pin */
.ch-num {
  position: absolute;
  top: 32px;
  right: 32px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .35em;
  color: var(--f-gold);
  opacity: .65;
  z-index: 5;
}
.ch-title-eyebrow {
  position: absolute;
  top: 36px;
  left: 32px;
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--f-gold);
  opacity: .55;
  z-index: 5;
}

/* ============================================================
   I — 序 OVERTURE
   ============================================================ */
.ch1 .chapter-pin { background: #000; }
.ch1-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.55) saturate(.85) contrast(1.05);
}
.ch1-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 60%, transparent 0%, rgba(11,9,8,.55) 60%, var(--f-ink) 100%),
    linear-gradient(180deg, rgba(11,9,8,.7) 0%, transparent 35%, transparent 70%, rgba(11,9,8,.85) 100%);
}
.ch1-eyebrow {
  position: absolute;
  left: 50%; top: 22%;
  transform: translateX(-50%);
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .5em;
  color: var(--f-gold);
  opacity: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.ch1-logo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display-cn);
  font-weight: 900;
  font-size: clamp(64px, 12vw, 180px);
  letter-spacing: .12em;
  color: var(--f-rice);
  text-align: center;
  display: flex;
  gap: clamp(8px, 1.2vw, 24px);
  white-space: nowrap;
}
.ch1-logo > span {
  opacity: 0;
  transform: translateY(60px);
}
.ch1-logo > span[data-lang="cn"] { display: inline-block; }
.ch1-logo > span[data-lang="en"] { display: none; }
body.lang-en .ch1-logo > span[data-lang="cn"] { display: none; }
body.lang-en .ch1-logo > span[data-lang="en"] { display: inline-block; }
.ch1-logo-en {
  font-family: var(--f-display-en);
  font-style: italic;
  font-weight: 300;
  letter-spacing: .12em;
}
.ch1-tagline {
  position: absolute;
  left: 50%; bottom: 22%;
  transform: translateX(-50%);
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: .25em;
  color: var(--f-vellum);
  opacity: 0;
  white-space: nowrap;
}
.ch1-stroke {
  position: absolute;
  left: 50%; top: calc(50% + clamp(60px, 9vw, 130px));
  transform: translateX(-50%);
  width: clamp(220px, 30vw, 480px);
  height: 24px;
  opacity: 0;
}
.ch1-stroke path {
  fill: none;
  stroke: var(--f-gold);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.ch1-scroll-hint {
  position: absolute;
  left: 50%; bottom: 42px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .4em;
  color: var(--f-gold);
  opacity: .5;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ch1-scroll-hint::after {
  content: '';
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--f-gold), transparent);
  animation: scroll-pulse 2.4s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================
   II — 千年 THE MEMORY  (horizontal scroll painting)
   ============================================================ */
.ch2 .chapter-pin { background: #050402; }
.scroll-painting {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;   /* fits image natural width — JS reads scrollWidth */
  will-change: transform;
}
.scroll-painting > img {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  filter: brightness(.85) saturate(.9);
}
.ch2-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--f-ink) 0%, transparent 12%, transparent 88%, var(--f-ink) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(5,4,2,.7) 100%);
  pointer-events: none;
  z-index: 2;
}
.ch2-text-stack {
  position: absolute;
  left: clamp(32px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px);
  max-width: 460px;
}
.ch2-line {
  font-family: var(--f-display-cn);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.55;
  color: var(--f-rice);
  opacity: 0;
  transform: translateY(20px);
  letter-spacing: .04em;
}
.ch2-line em {
  font-style: normal;
  color: var(--f-gold-hi);
  font-weight: 400;
}
.ch2-credit {
  position: absolute;
  right: 32px; bottom: 32px;
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: 12px;
  letter-spacing: .25em;
  color: var(--f-gold);
  opacity: .5;
  z-index: 3;
}

/* ============================================================
   III — 失传 THE SILENCE
   ============================================================ */
.ch3 .chapter-pin {
  background: #000;
  display: grid;
  place-items: center;
}
.ch3-stage {
  position: relative;
  width: min(900px, 90%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vh, 72px);
  text-align: center;
}
.ch3-fragment {
  width: clamp(180px, 22vw, 320px);
  opacity: 0;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.8));
}
.ch3-line {
  font-family: var(--f-display-cn);
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: .25em;
  color: var(--f-vellum);
  opacity: 0;
}
.ch3-final {
  font-family: var(--f-display-cn);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: .15em;
  color: var(--f-rice);
  opacity: 0;
  margin-top: 12px;
}
.ch3-seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(140px, 18vw, 220px);
  transform: translate(-50%, -50%) scale(2);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(142,42,31,.4));
}
.ch3-en {
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: .3em;
  color: var(--f-gold);
  opacity: 0;
  text-transform: uppercase;
}

/* ============================================================
   IV — 复刻 THE RETURN  (split panel)
   ============================================================ */
.ch4 .chapter-pin { background: #000; }
.ch4-split {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ch4-half {
  position: relative;
  overflow: hidden;
  margin: 0;
}
.ch4-half img {
  position: absolute; inset: 0;
  width: 100%; height: 110%;
  object-fit: cover;
  filter: brightness(.7) saturate(.95);
  will-change: transform;
}
.ch4-half::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.ch4-divider {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--f-gold) 30%, var(--f-gold) 70%, transparent);
  opacity: .25;
  z-index: 2;
}
.ch4-overlay {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  pointer-events: none;
}
.ch4-title {
  font-family: var(--f-display-cn);
  font-weight: 900;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 1.05;
  letter-spacing: .15em;
  color: var(--f-rice);
  text-align: center;
  mix-blend-mode: difference;
  text-shadow: 0 0 40px rgba(0,0,0,.8);
}
.ch4-title small {
  display: block;
  font-family: var(--f-display-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 20px);
  letter-spacing: .35em;
  color: var(--f-gold);
  margin-top: 16px;
  mix-blend-mode: normal;
  text-shadow: none;
  opacity: .8;
}
.ch4-credits {
  position: absolute;
  left: 50%; bottom: 8vh;
  transform: translateX(-50%);
  display: flex; gap: clamp(24px, 4vw, 80px);
  list-style: none;
  padding: 0; margin: 0;
  z-index: 4;
  pointer-events: none;
}
.ch4-credits li {
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .25em;
  color: var(--f-vellum);
  opacity: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.ch4-credits li strong {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-weight: 400;
  color: var(--f-gold);
  font-size: 10px;
  margin-bottom: 6px;
  letter-spacing: .4em;
}

/* ============================================================
   V — 九象 NINE CONSTITUTIONS  (apothecary cabinet)
   ============================================================ */
.ch5 .chapter-pin { background: #000; }
.ch5-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.32) saturate(.7);
  will-change: transform;
}
.ch5-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.7) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.5) 100%);
}
.ch5-header {
  position: absolute;
  left: 50%; top: 12vh;
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
}
.ch5-header h2 {
  font-family: var(--f-display-cn);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: .35em;
  color: var(--f-rice);
}
.ch5-header p {
  margin-top: 12px;
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: .4em;
  color: var(--f-gold);
  text-transform: uppercase;
  opacity: .7;
}
.ch5-grid {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 4vh;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  width: min(820px, 86%);
  aspect-ratio: 3/3;
  z-index: 4;
}
.drawer {
  position: relative;
  background: rgba(11,9,8,.55);
  border: 1px solid var(--f-line);
  overflow: hidden;
  transition:
    background .8s var(--f-ease),
    border-color .8s var(--f-ease),
    transform .9s var(--f-ease);
  cursor: pointer;
}
.drawer img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 1s var(--f-ease), transform 1.4s var(--f-ease);
}
.drawer-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 60%, transparent 100%);
  z-index: 2;
  transition: background 0.6s var(--f-ease);
}
.drawer-label .cn {
  display: block;
  font-family: var(--f-display-cn);
  font-weight: 600;
  font-size: clamp(13px, 1.3vw, 18px);
  letter-spacing: .25em;
  color: var(--f-rice);
}
.drawer-label .en {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--f-gold);
  opacity: .65;
  margin-top: 3px;
  text-transform: uppercase;
}
.drawer.open {
  border-color: var(--f-gold);
  background: rgba(11,9,8,.2);
}
.drawer.open img {
  opacity: 1;
  transform: scale(1);
}
.drawer.open .drawer-label {
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 70%, transparent 100%);
}
.drawer:hover { transform: translateY(-2px); }

.ch5-cta {
  position: absolute;
  left: 50%; bottom: 8vh;
  transform: translateX(-50%);
  font-family: var(--f-display-cn);
  font-size: 13px;
  letter-spacing: .35em;
  color: var(--f-gold);
  text-decoration: none;
  border: 1px solid var(--f-gold);
  padding: 14px 36px;
  z-index: 5;
  transition: all .4s var(--f-ease);
  white-space: nowrap;
}
.ch5-cta:hover {
  color: var(--f-ink);
  background: var(--f-gold-hi);
  border-color: var(--f-gold-hi);
}

/* ============================================================
   VI — 香谱 THE FRAGRANCE LIBRARY  (per-product spreads)
   ============================================================ */
.ch6 { background: var(--f-ink); }
.spread {
  position: relative;
  width: 100%;
  height: 100svh;        /* GSAP pin extends scroll virtually — no empty trailing space */
}
.spread-pin {
  position: relative;
  height: 100svh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--f-ink);
  overflow: hidden;
}
.spread-image {
  position: relative;
  overflow: hidden;
  background: #000;
}
.spread-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  will-change: transform;
}
.spread-image::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 70%, rgba(11,9,8,.5) 100%);
  pointer-events: none;
}
.spread-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vw, 96px);
  position: relative;
  background: var(--f-ink);
}
.spread-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .4em;
  color: var(--f-gold);
  opacity: .7;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.spread-name {
  font-family: var(--f-display-cn);
  font-weight: 900;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1.0;
  letter-spacing: .12em;
  color: var(--f-rice);
  margin-bottom: 8px;
}
.spread-name small {
  display: block;
  font-family: var(--f-display-en);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: .35em;
  color: var(--f-gold);
  margin-top: 12px;
  text-transform: uppercase;
}
.spread-tagline {
  font-family: var(--f-display-cn);
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: .15em;
  color: var(--f-vellum);
  margin: 28px 0 20px;
  line-height: 1.7;
  max-width: 28em;
}
.spread-formula {
  display: flex; flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.spread-formula li {
  font-family: var(--f-display-cn);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--f-vellum);
  padding: 6px 14px;
  border: 1px solid var(--f-line);
  background: rgba(184,148,86,.04);
}
.spread-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--f-gold);
  margin-bottom: 36px;
  text-transform: uppercase;
  opacity: .7;
}
.spread-bottom {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.spread-price {
  font-family: var(--f-display-en);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 400;
  color: var(--f-gold-hi);
  letter-spacing: .08em;
}
.spread-add {
  font-family: var(--f-display-cn);
  font-size: 12px;
  letter-spacing: .35em;
  color: var(--f-ink);
  background: var(--f-gold-hi);
  padding: 14px 32px;
  border: 1px solid var(--f-gold-hi);
  cursor: pointer;
  transition: all .4s var(--f-ease);
  white-space: nowrap;
}
.spread-add:hover {
  background: transparent;
  color: var(--f-gold-hi);
}

/* ============================================================
   VII — 启 THE INVITATION
   ============================================================ */
.ch7 .chapter-pin {
  background: #000;
  display: grid;
  place-items: center;
}
.ch7-stage {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 4vh, 48px);
  position: relative;
}
.ch7-seal {
  width: clamp(140px, 16vw, 200px);
  opacity: 0;
  transform: scale(1.4);
  filter: drop-shadow(0 0 50px rgba(142,42,31,.3));
}
.ch7-eyebrow {
  font-family: var(--f-display-en);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .4em;
  color: var(--f-gold);
  text-transform: uppercase;
  opacity: 0;
}
.ch7-title {
  font-family: var(--f-display-cn);
  font-weight: 300;
  font-size: clamp(36px, 6vw, 84px);
  line-height: 1.3;
  letter-spacing: .25em;
  color: var(--f-rice);
  opacity: 0;
}
.ch7-title strong {
  font-weight: 900;
  color: var(--f-gold-hi);
}
.ch7-actions {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  margin-top: 12px;
  opacity: 0;
}
.ch7-cta {
  font-family: var(--f-display-cn);
  font-size: 13px;
  letter-spacing: .35em;
  color: var(--f-ink);
  background: var(--f-gold-hi);
  border: 1px solid var(--f-gold-hi);
  padding: 16px 40px;
  text-decoration: none;
  cursor: pointer;
  transition: all .4s var(--f-ease);
}
.ch7-cta:hover {
  background: transparent;
  color: var(--f-gold-hi);
}
.ch7-secondary {
  font-family: var(--f-display-cn);
  font-size: 13px;
  letter-spacing: .35em;
  color: var(--f-vellum);
  background: transparent;
  border: 1px solid var(--f-line);
  padding: 16px 40px;
  cursor: pointer;
  transition: all .4s var(--f-ease);
}
.ch7-secondary:hover {
  border-color: var(--f-gold);
  color: var(--f-rice);
}

/* ============================================================
   FILM-LEVEL TWEAKS TO EXISTING NAV/FOOTER
   ============================================================ */
body:has(.film) .nav {
  background: rgba(11,9,8,0);
  border-bottom-color: transparent;
  mix-blend-mode: difference;
}
body:has(.film) .nav.scrolled {
  background: rgba(11,9,8,.85);
  mix-blend-mode: normal;
  border-bottom-color: rgba(184,148,86,.12);
}
body:has(.film) .float-quiz { display: none; }

/* ============================================================
   MOBILE — Keep cinematic pin/scroll, adapt layouts only
   ============================================================ */
@media (max-width: 768px) {

  /* outer = 100svh on mobile too — GSAP pin handles virtual scroll extension */
  .chapter, .spread { height: 100svh; }
  .ch6 { height: auto; }

  /* Ch I — smaller logo, tighter spacing */
  .ch1-logo {
    font-size: clamp(56px, 16vw, 92px);
    letter-spacing: .08em;
    gap: 6px;
  }
  .ch1-eyebrow {
    font-size: 10px;
    letter-spacing: .35em;
    top: 18%;
    padding: 0 24px;
    text-align: center;
    white-space: normal;
  }
  .ch1-tagline {
    font-size: 11px;
    letter-spacing: .2em;
    bottom: 18%;
    padding: 0 24px;
    text-align: center;
    white-space: normal;
  }
  .ch-num { top: 100px; right: 20px; }
  .ch-title-eyebrow { top: 100px; left: 20px; font-size: 11px; }

  /* Ch II — text overlay readable on phone */
  .ch2-text-stack {
    left: 16px;
    right: 16px;
    max-width: none;
    gap: 32px;
    padding: 0;
  }
  .ch2-line {
    font-size: clamp(20px, 5.5vw, 28px);
    background: linear-gradient(135deg, rgba(11,9,8,.85) 0%, rgba(11,9,8,.55) 100%);
    backdrop-filter: blur(4px);
    padding: 18px 22px;
    border-left: 2px solid var(--f-gold);
  }
  .ch2-credit { right: 16px; bottom: 16px; font-size: 10px; }

  /* Ch III — keep stacked + seal layered, just smaller */
  .ch3-stage { width: 90%; gap: clamp(24px, 4vh, 48px); }
  .ch3-fragment { width: 60vw; max-width: 280px; }
  .ch3-line { font-size: clamp(18px, 5vw, 24px); letter-spacing: .2em; }
  .ch3-final { font-size: clamp(26px, 7vw, 38px); }
  .ch3-seal { width: clamp(120px, 30vw, 180px); }

  /* Ch IV — STACK top/bottom instead of L/R */
  .ch4-split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .ch4-divider {
    left: 0; right: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--f-gold) 30%, var(--f-gold) 70%, transparent);
  }
  .ch4-title {
    font-size: clamp(40px, 11vw, 80px);
    letter-spacing: .1em;
  }
  .ch4-title small {
    font-size: 11px;
    letter-spacing: .25em;
  }
  .ch4-credits {
    flex-direction: column;
    gap: 14px;
    bottom: 4vh;
    align-items: center;
    text-align: center;
    padding: 0 16px;
  }
  .ch4-credits li { font-size: 11px; letter-spacing: .2em; }

  /* Ch V — smaller cabinet grid */
  .ch5-header { top: 8vh; padding: 0 20px; }
  .ch5-header h2 { font-size: clamp(28px, 8vw, 44px); letter-spacing: .25em; }
  .ch5-grid {
    width: 92%;
    gap: 6px;
    margin-top: 0;
  }
  .drawer-label { padding: 6px 8px 8px; }
  .drawer-label .cn { font-size: 12px; letter-spacing: .15em; }
  .drawer-label .en { font-size: 8px; letter-spacing: .2em; }
  .ch5-cta {
    bottom: 5vh;
    font-size: 11px;
    letter-spacing: .3em;
    padding: 12px 24px;
  }

  /* Ch VI — STACK image top + text bottom per spread (height handled by global rule above) */
  .spread-pin {
    grid-template-columns: 1fr;
    grid-template-rows: 50svh 50svh;
  }
  .spread-image::after {
    background: linear-gradient(to bottom, transparent 60%, rgba(11,9,8,.7) 100%);
  }
  .spread-text {
    padding: 28px 24px;
    justify-content: flex-start;
  }
  .spread-num { margin-bottom: 12px; font-size: 9px; }
  .spread-name {
    font-size: clamp(40px, 11vw, 64px);
    margin-bottom: 4px;
  }
  .spread-name small {
    font-size: 12px;
    letter-spacing: .25em;
    margin-top: 6px;
  }
  .spread-tagline {
    font-size: 13px;
    margin: 16px 0 14px;
    letter-spacing: .08em;
  }
  .spread-formula {
    margin-bottom: 16px;
    gap: 6px 8px;
  }
  .spread-formula li {
    font-size: 11px;
    padding: 4px 10px;
    letter-spacing: .1em;
  }
  .spread-meta { margin-bottom: 18px; font-size: 9px; letter-spacing: .25em; }
  .spread-bottom { gap: 16px; }
  .spread-price { font-size: clamp(22px, 7vw, 30px); }
  .spread-add { font-size: 11px; padding: 12px 24px; letter-spacing: .25em; }

  /* Ch VII */
  .ch7-stage { gap: 24px; padding: 0 24px; }
  .ch7-seal { width: clamp(120px, 30vw, 160px); }
  .ch7-eyebrow { font-size: 11px; letter-spacing: .3em; }
  .ch7-title { font-size: clamp(28px, 9vw, 56px); letter-spacing: .15em; }
  .ch7-actions { flex-direction: column; width: 100%; gap: 12px; }
  .ch7-cta, .ch7-secondary {
    width: 100%;
    text-align: center;
    font-size: 12px;
    letter-spacing: .3em;
    padding: 14px 20px;
  }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .ch1-logo { font-size: 52px; gap: 4px; }
  .ch5-grid { width: 96%; gap: 4px; }
  .drawer-label .cn { font-size: 11px; }
  .drawer-label .en { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
  }
  .chapter, .chapter-pin, .spread, .spread-pin {
    height: auto !important;
    position: relative !important;
  }
  .ch1-eyebrow, .ch1-tagline, .ch1-stroke,
  .ch1-logo span,
  .ch2-line,
  .ch3-fragment, .ch3-line, .ch3-final, .ch3-en, .ch3-seal,
  .ch4-credits li,
  .ch7-seal, .ch7-eyebrow, .ch7-title, .ch7-actions {
    opacity: 1 !important;
    transform: none !important;
  }
  .ch1-stroke path { stroke-dashoffset: 0 !important; }
  .drawer { background: rgba(11,9,8,.2); border-color: var(--f-gold); }
  .drawer img { opacity: 1 !important; transform: scale(1) !important; }
}