/*
 * Special feature: Children Bound to Chairs
 * Layered paper sculpture × traditional Chinese colour × restrained Morandi accents
 */

:root {
  --sp-paper: #f4ebdd;
  --sp-paper-deep: #e9dcc7;
  --sp-ink: #3e3b37;
  --sp-indigo: #2e4652;
  --sp-indigo-deep: #203640;
  --sp-gold: #d6b66c;
  --sp-gold-light: #f0d99a;
  --sp-ochre: #9f5f4d;
  --sp-tuihong: #e6b8a8;
  --sp-mist: #91a1ac;
  --sp-sage: #a8ada1;
  --sp-white: #fffaf0;
  --sp-shadow: 0 24px 60px rgba(38, 47, 49, .18);
  --sp-paper-shadow: 0 10px 22px rgba(48, 52, 51, .14), 0 2px 4px rgba(48, 52, 51, .1);
}

html {
  scroll-behavior: smooth;
}

body.chair-special-page {
  color: var(--sp-ink);
  background:
    radial-gradient(circle at 12% 18%, rgba(230, 184, 168, .22), transparent 26rem),
    radial-gradient(circle at 88% 38%, rgba(145, 161, 172, .25), transparent 30rem),
    linear-gradient(180deg, #f8f1e6 0%, var(--sp-paper) 46%, #ece4d8 100%);
  overflow-x: hidden;
}

body.chair-special-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image:
    repeating-linear-gradient(8deg, rgba(78, 65, 50, .035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
}

body.chair-special-page.intro-playing {
  height: 100%;
  overflow: hidden;
}

/* Four-beat opening: paper shadows → indigo doors → hospital → title. */
.special-intro[hidden] { display: none; }

.special-intro {
  --intro-duration: 9.6s;
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--sp-white);
  background: #132a32;
  isolation: isolate;
  overscroll-behavior: none;
  touch-action: none;
}

.special-intro.is-active {
  animation: intro-overlay-exit var(--intro-duration) ease-in-out forwards;
}

.special-intro.is-closing {
  animation: intro-skip-exit .46s ease forwards;
}

.intro-scene,
.intro-ancient-stage,
.intro-paper-world,
.intro-cold-light,
.intro-hospital-lines {
  position: absolute;
  inset: 0;
}

.intro-scene {
  z-index: -2;
  overflow: hidden;
  background: #132a32;
  perspective: 1300px;
}

.intro-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: .54;
  background:
    radial-gradient(circle at 50% 48%, transparent 12%, rgba(5, 20, 27, .72) 100%),
    repeating-linear-gradient(8deg, rgba(233, 222, 202, .045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(94deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 10px);
  mix-blend-mode: multiply;
}

.special-intro.is-active .intro-scene::after {
  animation: intro-vignette-shift var(--intro-duration) ease-in-out forwards;
}

/* Beat 1 — an ancient paper-shadow room and bamboo chair. */
.intro-ancient-stage {
  z-index: 2;
  overflow: hidden;
  opacity: 1;
  background: #263f40;
}

.special-intro.is-active .intro-ancient-stage {
  animation: intro-ancient-fades var(--intro-duration) ease-in-out forwards;
}

.intro-paper-world {
  z-index: 1;
  opacity: .86;
  background:
    linear-gradient(180deg, rgba(24, 48, 50, .06), rgba(13, 31, 35, .7)),
    linear-gradient(90deg, rgba(16, 36, 39, .08), rgba(16, 36, 39, .56)),
    url("art/chair-bound-child-paper-art-20260811.webp") 24% 48% / cover no-repeat;
  filter: sepia(.24) saturate(.65) brightness(.62) contrast(1.06);
  transform: scale(1.06);
}

.special-intro.is-active .intro-paper-world {
  animation: intro-world-push var(--intro-duration) ease-in-out forwards;
}

.intro-ancient-window {
  position: absolute;
  left: clamp(28px, 9vw, 150px);
  top: clamp(70px, 14vh, 150px);
  z-index: 2;
  width: clamp(130px, 23vw, 340px);
  aspect-ratio: 1;
  opacity: .34;
  border: clamp(7px, .9vw, 14px) solid rgba(25, 32, 31, .88);
  border-radius: 50% 50% 46% 46%;
  background:
    repeating-linear-gradient(90deg, transparent 0 17%, rgba(25, 32, 31, .76) 17.5% 20%, transparent 20.5% 37%),
    repeating-linear-gradient(0deg, transparent 0 17%, rgba(25, 32, 31, .7) 17.5% 20%, transparent 20.5% 37%),
    radial-gradient(circle, rgba(226, 213, 188, .3), rgba(126, 119, 103, .08) 64%, transparent 65%);
  box-shadow: 0 0 55px rgba(232, 218, 189, .08);
}

.intro-moon {
  position: absolute;
  left: 51%;
  top: 10%;
  z-index: 2;
  width: clamp(110px, 17vw, 250px);
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: rgba(232, 225, 211, .68);
  box-shadow: 0 0 90px rgba(232, 225, 211, .2);
  transform: translateX(-50%) scale(.82);
}

.special-intro.is-active .intro-moon {
  animation: intro-moon-pass var(--intro-duration) ease-in-out forwards;
}

.intro-paper-shadow {
  position: absolute;
  bottom: -3%;
  z-index: 3;
  width: min(35vw, 480px);
  height: 76%;
  opacity: 0;
  background: rgba(18, 29, 29, .78);
  filter: drop-shadow(0 12px 20px rgba(3, 14, 18, .28));
}

.intro-paper-shadow-left {
  left: -4%;
  clip-path: polygon(0 0, 30% 12%, 20% 27%, 49% 34%, 32% 48%, 60% 57%, 39% 69%, 69% 83%, 58% 100%, 0 100%);
}

.intro-paper-shadow-right {
  right: -5%;
  clip-path: polygon(100% 5%, 66% 15%, 82% 30%, 53% 38%, 69% 53%, 40% 62%, 62% 77%, 33% 88%, 45% 100%, 100% 100%);
}

.special-intro.is-active .intro-paper-shadow {
  animation: intro-paper-shadows var(--intro-duration) ease-in-out forwards;
}

.intro-chair {
  position: absolute;
  left: 50%;
  bottom: 14%;
  z-index: 5;
  width: clamp(88px, 11vw, 158px);
  height: clamp(154px, 25vh, 254px);
  opacity: 0;
  border: clamp(7px, .7vw, 11px) solid rgba(24, 31, 29, .94);
  border-bottom: 0;
  border-radius: 18px 18px 4px 4px;
  background: repeating-linear-gradient(180deg, transparent 0 12%, rgba(24, 31, 29, .9) 12.5% 16%, transparent 16.5% 25%);
  box-shadow: 0 36px 38px rgba(3, 14, 19, .5);
  transform: translateX(-50%) translateY(18px) scale(.94);
}

.intro-chair::before,
.intro-chair::after {
  content: "";
  position: absolute;
  bottom: -57px;
  width: clamp(7px, .7vw, 11px);
  height: 87px;
  border-radius: 0 0 8px 8px;
  background: rgba(24, 31, 29, .94);
}

.intro-chair::before { left: 7px; transform: rotate(2deg); }
.intro-chair::after { right: 7px; transform: rotate(-2deg); }

.intro-chair span {
  position: absolute;
  left: -9%;
  right: -9%;
  bottom: 15%;
  height: 13px;
  border-radius: 8px;
  background: rgba(24, 31, 29, .96);
  box-shadow: 0 19px 0 rgba(24, 31, 29, .62);
}

.special-intro.is-active .intro-chair {
  animation: intro-chair-appears var(--intro-duration) ease-in-out forwards;
}

.intro-shadow-child {
  position: absolute;
  left: 50%;
  bottom: 23%;
  z-index: 6;
  width: clamp(44px, 5.5vw, 74px);
  height: clamp(84px, 14.5vh, 144px);
  opacity: 0;
  border-radius: 46% 46% 36% 36% / 33% 33% 65% 65%;
  background: rgba(17, 24, 23, .72);
  filter: blur(.35px);
  transform: translateX(-50%) scale(.93);
}

.intro-shadow-child::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -35%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  transform: translateX(-50%);
}

.special-intro.is-active .intro-shadow-child {
  animation: intro-child-shadow var(--intro-duration) ease-in-out forwards;
}

/* Beat 2 — dark teal traditional doors close over the past, then open slowly. */
.intro-door {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 50.2%;
  opacity: 0;
  border-color: rgba(214, 182, 108, .3);
  border-style: solid;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 10% 90%, rgba(4, 17, 21, .25)),
    linear-gradient(180deg, transparent 6%, rgba(214, 182, 108, .2) 6.2% 6.45%, transparent 6.7% 49%, rgba(214, 182, 108, .2) 49.2% 49.45%, transparent 49.7% 93%, rgba(214, 182, 108, .18) 93.2% 93.45%, transparent 93.7%),
    linear-gradient(155deg, #355b5b 0%, #27494d 48%, #1b373c 100%);
  box-shadow:
    inset 0 0 0 clamp(10px, 1.4vw, 20px) rgba(15, 38, 40, .5),
    inset 0 0 55px rgba(3, 19, 23, .25),
    0 0 48px rgba(4, 17, 22, .48);
  will-change: transform, opacity;
}

.intro-door::before {
  content: "";
  position: absolute;
  inset: 9% 10%;
  border: 1px solid rgba(224, 196, 130, .31);
  box-shadow:
    inset 0 0 0 clamp(5px, .65vw, 10px) rgba(20, 46, 47, .46),
    0 calc(41vh - 1px) 0 -1px rgba(224, 196, 130, .26);
}

.intro-door::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(8px, .8vw, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d7ba72;
  box-shadow: 0 0 0 4px rgba(214, 182, 108, .13), 0 3px 9px rgba(4, 17, 22, .45);
}

.intro-door-left {
  left: 0;
  border-width: 0 1px 0 0;
  transform-origin: left center;
}

.intro-door-left::after { right: clamp(13px, 2.3vw, 40px); }

.intro-door-right {
  right: 0;
  border-width: 0 0 0 1px;
  transform-origin: right center;
}

.intro-door-right::after { left: clamp(13px, 2.3vw, 40px); }

.special-intro.is-active .intro-door-left {
  animation: intro-left-door var(--intro-duration) cubic-bezier(.64, .02, .32, 1) forwards;
}

.special-intro.is-active .intro-door-right {
  animation: intro-right-door var(--intro-duration) cubic-bezier(.64, .02, .32, 1) forwards;
}

.intro-cold-light {
  left: 0;
  z-index: 5;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(244, 249, 250, .94) 22% 78%, transparent);
  box-shadow: 0 0 90px rgba(234, 245, 248, .75);
  transform: scaleX(.002);
  transform-origin: center;
  will-change: transform, opacity;
}

.special-intro.is-active .intro-cold-light {
  animation: intro-light-opens var(--intro-duration) ease-in-out forwards;
}

/* Beat 3 — a restrained cold-white hospital corridor behind the doors. */
.intro-hospital-lines {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  background:
    linear-gradient(106deg, rgba(174, 190, 195, .33) 0 22%, transparent 22.2%),
    linear-gradient(254deg, rgba(174, 190, 195, .28) 0 22%, transparent 22.2%),
    linear-gradient(133deg, transparent 0 49.55%, rgba(155, 174, 180, .33) 49.7% 49.95%, transparent 50.1%),
    linear-gradient(227deg, transparent 0 49.55%, rgba(155, 174, 180, .28) 49.7% 49.95%, transparent 50.1%),
    linear-gradient(180deg, #f8fbfb 0 18%, #e0eaec 18.2% 19%, #f1f6f7 19.2% 64%, #cbd8dc 64.2% 100%);
  filter: saturate(.5) brightness(1.01);
  transform: scale(1.035);
  will-change: transform, opacity;
}

.intro-hospital-lines::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 4%;
  height: 18%;
  opacity: .95;
  background:
    linear-gradient(90deg, transparent 0 5%, #fff 5.5% 24%, transparent 24.5% 38%, #fff 38.5% 61.5%, transparent 62% 76%, #fff 76.5% 95%, transparent 95.5%);
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, .9));
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}

.intro-hospital-lines::after {
  content: "";
  position: absolute;
  left: 36%;
  right: 36%;
  bottom: -8%;
  height: 47%;
  opacity: .48;
  background: linear-gradient(90deg, transparent, rgba(238, 245, 247, .95) 46% 54%, transparent);
  clip-path: polygon(49% 0, 51% 0, 100% 100%, 0 100%);
}

.intro-hospital-door {
  position: absolute;
  left: 5%;
  top: 25%;
  width: min(16vw, 230px);
  height: 52%;
  border: clamp(5px, .6vw, 9px) solid #b9c9cc;
  background: linear-gradient(90deg, #dbe5e7, #f5f8f8 44%, #d1dee1);
  box-shadow: 12px 10px 28px rgba(95, 118, 124, .2);
}

.intro-hospital-door::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 52%;
  width: clamp(5px, .55vw, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #728a91;
}

.intro-hospital-bench {
  position: absolute;
  right: 8%;
  bottom: 20%;
  width: min(25vw, 340px);
  height: clamp(46px, 8vh, 82px);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #9aadb1, #71878d);
  box-shadow:
    0 11px 24px rgba(68, 90, 96, .23),
    12px 28px 0 -9px #667b81,
    clamp(-270px, -19vw, -100px) 28px 0 -9px #667b81;
}

.special-intro.is-active .intro-hospital-lines {
  animation: intro-hospital-arrives var(--intro-duration) ease-in-out forwards;
}

/* Beat 4 — the feature title appears only after the corridor is established. */
.intro-copy {
  position: relative;
  z-index: 20;
  width: min(100% - 44px, 940px);
  text-align: center;
  text-shadow: 0 4px 28px rgba(5, 17, 23, .82), 0 1px 3px rgba(5, 17, 23, .9);
}

.intro-copy p,
.intro-copy h1 { margin: 0; }

.intro-kicker {
  opacity: 0;
  color: var(--sp-gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.65rem, 1.1vw, .82rem);
  font-weight: 800;
  letter-spacing: .25em;
}

.intro-first-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  opacity: 0;
  color: #e9dfce;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.2rem, 2.7vw, 2rem);
  letter-spacing: .12em;
  transform: translate(-50%, -50%);
}

.intro-copy h1 {
  margin-top: 20px;
  opacity: 0;
  color: var(--sp-white);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(2.15rem, 6vw, 5.6rem);
  line-height: 1.15;
  letter-spacing: .08em;
  transform: translateY(20px);
}

.intro-copy h1 span {
  display: block;
  margin-top: 17px;
  color: var(--sp-tuihong);
  font-size: .34em;
  letter-spacing: .18em;
}

.intro-final-line {
  margin-top: 30px !important;
  opacity: 0;
  color: var(--sp-gold-light);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: .11em;
}

.special-intro.is-active .intro-kicker {
  animation: intro-kicker-sequence var(--intro-duration) ease forwards;
}

.special-intro.is-active .intro-first-line {
  animation: intro-first-line-sequence var(--intro-duration) ease forwards;
}

.special-intro.is-active .intro-copy h1 {
  animation: intro-title-sequence var(--intro-duration) ease forwards;
}

.special-intro.is-active .intro-final-line {
  animation: intro-final-line-sequence var(--intro-duration) ease forwards;
}

.intro-skip {
  position: absolute;
  right: max(clamp(16px, 3vw, 44px), env(safe-area-inset-right));
  top: max(clamp(16px, 3vw, 36px), env(safe-area-inset-top));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: rgba(255, 250, 240, .86);
  background: rgba(19, 42, 51, .58);
  border: 1px solid rgba(240, 217, 154, .45);
  border-radius: 999px;
  font: inherit;
  font-size: .82rem;
  letter-spacing: .08em;
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.intro-skip:hover,
.intro-skip:focus-visible {
  color: #fff;
  background: rgba(46, 70, 82, .94);
  border-color: var(--sp-gold-light);
  outline: 2px solid rgba(255, 250, 240, .92);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(46, 70, 82, .45);
}

.intro-timeline {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 30;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sp-ochre), var(--sp-gold), #e8f0f1);
  transform: scaleX(0);
  transform-origin: left;
}

.special-intro.is-active .intro-timeline {
  animation: intro-timeline-progress var(--intro-duration) linear forwards;
}

.intro-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 13px;
  color: var(--sp-indigo);
  background: rgba(255, 250, 240, .52);
  border: 1px solid rgba(46, 70, 82, .2);
  border-radius: 999px;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease;
}

.intro-replay:hover,
.intro-replay:focus-visible {
  color: var(--sp-ochre);
  background: rgba(255, 250, 240, .9);
  border-color: var(--sp-gold);
  outline: 2px solid var(--sp-indigo);
  outline-offset: 3px;
  transform: translateY(-2px);
}

.special-intro.is-reduced .intro-ancient-stage,
.special-intro.is-reduced .intro-door,
.special-intro.is-reduced .intro-cold-light,
.special-intro.is-reduced .intro-first-line,
.special-intro.is-reduced .intro-timeline {
  display: none;
}

.special-intro.is-reduced .intro-hospital-lines {
  opacity: 1;
  filter: saturate(.5) brightness(.78);
  transform: none;
}

.special-intro.is-reduced .intro-scene::after { opacity: .44; }

.special-intro.is-reduced .intro-kicker,
.special-intro.is-reduced .intro-copy h1,
.special-intro.is-reduced .intro-final-line {
  opacity: 1;
  transform: none;
}

@keyframes intro-overlay-exit {
  0%, 94% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes intro-skip-exit {
  to { opacity: 0; visibility: hidden; }
}

@keyframes intro-vignette-shift {
  0%, 32% { opacity: .54; }
  62%, 70% { opacity: .14; }
  78%, 94% { opacity: .4; }
  100% { opacity: .5; }
}

@keyframes intro-ancient-fades {
  0%, 30% { opacity: 1; }
  38% { opacity: .72; }
  45%, 100% { opacity: 0; }
}

@keyframes intro-world-push {
  0% { opacity: .82; transform: scale(1.06); }
  30% { opacity: .9; transform: scale(1.1); }
  45%, 100% { opacity: 0; transform: scale(1.14); }
}

@keyframes intro-moon-pass {
  0%, 3% { opacity: 0; transform: translateX(-50%) scale(.82); }
  10%, 29% { opacity: .68; transform: translateX(-50%) scale(1); }
  40%, 100% { opacity: 0; transform: translateX(-50%) scale(1.06); }
}

@keyframes intro-paper-shadows {
  0%, 3% { opacity: 0; transform: translateY(12px); }
  11%, 30% { opacity: .68; transform: translateY(0); }
  42%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes intro-chair-appears {
  0%, 4% { opacity: 0; transform: translateX(-50%) translateY(18px) scale(.94); }
  12%, 30% { opacity: .96; transform: translateX(-50%) translateY(0) scale(1); }
  42%, 100% { opacity: 0; transform: translateX(-50%) translateY(-7px) scale(1.025); }
}

@keyframes intro-child-shadow {
  0%, 7% { opacity: 0; transform: translateX(-50%) scale(.93); }
  15%, 29% { opacity: .48; transform: translateX(-50%) scale(1); }
  41%, 100% { opacity: 0; transform: translateX(-50%) scale(1.02); }
}

@keyframes intro-left-door {
  0%, 22% { opacity: 0; transform: translateX(0) rotateY(0); }
  29%, 32% { opacity: 1; transform: translateX(0) rotateY(0); }
  64%, 100% { opacity: 1; transform: translateX(-103%) rotateY(-7deg); }
}

@keyframes intro-right-door {
  0%, 22% { opacity: 0; transform: translateX(0) rotateY(0); }
  29%, 32% { opacity: 1; transform: translateX(0) rotateY(0); }
  64%, 100% { opacity: 1; transform: translateX(103%) rotateY(7deg); }
}

@keyframes intro-light-opens {
  0%, 29% { opacity: 0; transform: scaleX(.002); }
  36% { opacity: .46; transform: scaleX(.008); }
  60% { opacity: .7; transform: scaleX(.82); }
  70% { opacity: .18; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes intro-hospital-arrives {
  0%, 35% { opacity: 0; transform: scale(1.035); }
  48% { opacity: .36; transform: scale(1.02); }
  64%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes intro-kicker-sequence {
  0%, 68% { opacity: 0; transform: translateY(-7px); }
  76%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: .15; }
}

@keyframes intro-first-line-sequence {
  0%, 7% { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
  14%, 28% { opacity: 1; transform: translate(-50%, -50%); }
  38%, 100% { opacity: 0; transform: translate(-50%, calc(-50% - 8px)); }
}

@keyframes intro-title-sequence {
  0%, 73% { opacity: 0; transform: translateY(20px); letter-spacing: .13em; }
  86%, 94% { opacity: 1; transform: translateY(0); letter-spacing: .08em; }
  100% { opacity: .16; transform: translateY(-4px); letter-spacing: .08em; }
}

@keyframes intro-final-line-sequence {
  0%, 82% { opacity: 0; transform: translateY(11px); }
  90%, 94% { opacity: 1; transform: translateY(0); }
  100% { opacity: .12; }
}

@keyframes intro-timeline-progress {
  to { transform: scaleX(1); }
}

.chair-special-page header {
  position: relative;
  z-index: 50;
}

.special-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sp-ochre), var(--sp-gold), var(--sp-gold-light));
  box-shadow: 0 0 12px rgba(214, 182, 108, .72);
}

.special-breadcrumb {
  padding: 18px 0 0;
  font-size: .86rem;
  letter-spacing: .04em;
  color: rgba(62, 59, 55, .72);
}

.special-breadcrumb a {
  color: var(--sp-indigo);
  text-decoration: none;
}

.special-breadcrumb span {
  margin: 0 .5em;
  color: var(--sp-gold);
}

.special-hero {
  position: relative;
  isolation: isolate;
  padding: 34px 0 74px;
}

.special-hero::before,
.special-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  border-radius: 46% 54% 58% 42% / 54% 46% 54% 46%;
  filter: drop-shadow(0 18px 24px rgba(47, 52, 53, .12));
}

.special-hero::before {
  width: min(46vw, 650px);
  height: min(46vw, 650px);
  left: -18vw;
  top: 6%;
  background: rgba(230, 184, 168, .32);
  border: 1px solid rgba(159, 95, 77, .16);
}

.special-hero::after {
  width: min(52vw, 760px);
  height: min(52vw, 760px);
  right: -23vw;
  bottom: -13%;
  background: rgba(145, 161, 172, .3);
  border: 1px solid rgba(46, 70, 82, .14);
}

.special-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(340px, 7fr);
  gap: clamp(34px, 5vw, 82px);
  align-items: center;
}

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

.special-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--sp-ochre);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.special-eyebrow::before {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, var(--sp-ochre), var(--sp-gold));
}

.special-hero h1 {
  margin: 0;
  color: var(--sp-indigo-deep);
  font-family: "Noto Serif TC", "Noto Serif JP", "Source Han Serif TC", Georgia, serif;
  font-size: clamp(2.55rem, 5.2vw, 5rem);
  line-height: 1.08;
  letter-spacing: .045em;
  text-wrap: balance;
}

.special-hero h1 span {
  display: block;
  margin-top: 17px;
  color: var(--sp-ochre);
  font-size: clamp(1.1rem, 2.15vw, 1.72rem);
  line-height: 1.45;
  letter-spacing: .1em;
}

.special-deck {
  margin: 28px 0 22px;
  max-width: 35rem;
  color: #514c45;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.9;
}

.special-hero-quote {
  position: relative;
  margin: 24px 0;
  padding: 22px 24px 22px 28px;
  background: rgba(255, 250, 240, .7);
  border: 1px solid rgba(159, 95, 77, .2);
  border-left: 4px solid var(--sp-ochre);
  box-shadow: var(--sp-paper-shadow);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  line-height: 1.85;
}

.special-hero-quote::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, transparent 50%, rgba(214, 182, 108, .42) 51%);
}

.special-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.special-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(46, 70, 82, .08);
  border: 1px solid rgba(46, 70, 82, .15);
  color: var(--sp-indigo);
  font-size: .78rem;
  font-weight: 700;
}

.paper-art-frame {
  position: relative;
  width: min(100%, 650px);
  margin-inline: auto;
  padding: clamp(12px, 1.7vw, 20px);
  border-radius: 48% 52% 49% 51% / 2.2% 2.4% 2% 2.5%;
  background: #efe5d5;
  box-shadow: var(--sp-shadow);
}

.paper-art-frame::before,
.paper-art-frame::after,
.paper-cut-layer {
  content: "";
  position: absolute;
  pointer-events: none;
}

.paper-art-frame::before {
  inset: -14px 10px 14px -13px;
  z-index: -2;
  background: rgba(230, 184, 168, .54);
  clip-path: polygon(2% 3%, 98% 0, 100% 97%, 4% 100%, 0 48%);
  box-shadow: var(--sp-paper-shadow);
}

.paper-art-frame::after {
  inset: 16px -17px -13px 18px;
  z-index: -3;
  background: rgba(145, 161, 172, .52);
  clip-path: polygon(3% 0, 97% 3%, 100% 94%, 49% 100%, 0 97%);
  box-shadow: var(--sp-paper-shadow);
}

.paper-cut-layer.layer-one {
  left: -32px;
  bottom: 10%;
  width: 96px;
  height: 240px;
  z-index: -1;
  background: var(--sp-ochre);
  opacity: .68;
  clip-path: polygon(32% 0, 54% 16%, 48% 32%, 76% 48%, 58% 100%, 17% 84%, 25% 62%, 0 44%);
  filter: drop-shadow(10px 10px 10px rgba(45, 50, 51, .14));
}

.paper-cut-layer.layer-two {
  right: -28px;
  top: 12%;
  width: 104px;
  height: 280px;
  z-index: -1;
  background: var(--sp-indigo);
  opacity: .62;
  clip-path: polygon(15% 3%, 68% 0, 100% 27%, 71% 49%, 95% 72%, 55% 100%, 18% 82%, 0 41%);
  filter: drop-shadow(-10px 10px 10px rgba(45, 50, 51, .14));
}

.paper-art-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 983 / 1536;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(.92) contrast(1.02);
}

.paper-art-frame figcaption {
  margin: 13px 4px 2px;
  color: rgba(62, 59, 55, .76);
  font-size: .76rem;
  line-height: 1.65;
}

.special-reading-note {
  position: relative;
  z-index: 3;
  padding: 0;
  margin-top: -28px;
}

.reading-note-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 24px;
  background: rgba(255, 250, 240, .9);
  border: 1px solid rgba(159, 95, 77, .2);
  box-shadow: var(--sp-paper-shadow);
}

.reading-note-card strong {
  color: var(--sp-ochre);
  white-space: nowrap;
}

.reading-note-card p {
  margin: 0;
  line-height: 1.75;
}

.special-toc-section {
  position: relative;
  z-index: 5;
  padding: 38px 0 22px;
}

.special-toc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  background: rgba(46, 70, 82, .94);
  border: 1px solid rgba(214, 182, 108, .38);
  box-shadow: var(--sp-shadow);
}

.special-toc a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px 12px;
  color: rgba(255, 250, 240, .85);
  border: 1px solid rgba(255, 250, 240, .12);
  text-decoration: none;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.special-toc a small {
  color: var(--sp-gold);
  font-weight: 800;
  letter-spacing: .08em;
}

.special-toc a:hover,
.special-toc a.is-current {
  color: var(--sp-white);
  background: rgba(214, 182, 108, .14);
  border-color: rgba(214, 182, 108, .42);
  transform: translateY(-2px);
}

.special-article {
  padding: 22px 0 92px;
}

.story-section {
  position: relative;
  scroll-margin-top: 94px;
  padding: clamp(55px, 8vw, 104px) 0;
}

.story-section::before {
  content: attr(data-number);
  position: absolute;
  z-index: -1;
  left: max(2vw, calc(50% - 590px));
  top: 34px;
  color: rgba(214, 182, 108, .19);
  font-family: Georgia, serif;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 800;
  line-height: 1;
}

.story-section:nth-of-type(even)::before {
  right: max(2vw, calc(50% - 590px));
  left: auto;
}

.story-section.is-cool {
  background:
    linear-gradient(90deg, transparent, rgba(145, 161, 172, .11) 14%, rgba(145, 161, 172, .16) 50%, rgba(145, 161, 172, .11) 86%, transparent);
}

.story-section.is-warm {
  background:
    linear-gradient(90deg, transparent, rgba(230, 184, 168, .09) 14%, rgba(214, 182, 108, .12) 50%, rgba(230, 184, 168, .09) 86%, transparent);
}

.story-inner {
  width: min(100% - 36px, 780px);
  margin-inline: auto;
}

.story-heading {
  margin-bottom: 30px;
}

.story-heading .section-number {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-bottom: 10px;
  color: var(--sp-gold);
  font-family: Georgia, serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .2em;
}

.story-heading .section-number-zh {
  color: var(--sp-ochre);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: .78rem;
  letter-spacing: .14em;
}

.final-section .story-heading .section-number-zh {
  color: var(--sp-gold-light);
}

.story-heading h2 {
  margin: 0;
  color: var(--sp-indigo-deep);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.8rem, 3.6vw, 3.05rem);
  line-height: 1.35;
  letter-spacing: .035em;
  text-wrap: balance;
}

.evidence-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 15px;
  padding: 5px 12px;
  border-radius: 2px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.evidence-badge.legend {
  color: var(--sp-white);
  background: var(--sp-ochre);
  box-shadow: 3px 3px 0 rgba(159, 95, 77, .18);
}

.evidence-badge.judgment {
  color: var(--sp-white);
  background: var(--sp-indigo);
  border: 1px solid var(--sp-gold);
}

.evidence-badge.hearing {
  color: var(--sp-indigo-deep);
  background: var(--sp-mist);
}

.evidence-badge.inquiry {
  color: #2f3932;
  background: var(--sp-sage);
}

.story-copy {
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.04rem, 1.65vw, 1.18rem);
  line-height: 2;
}

.story-copy p {
  margin: 0 0 1.42em;
}

.story-copy strong {
  color: var(--sp-indigo-deep);
}

.paper-note,
.legal-note {
  position: relative;
  margin: 34px 0;
  padding: 28px clamp(22px, 4vw, 38px);
  background: rgba(255, 250, 240, .78);
  border: 1px solid rgba(214, 182, 108, .45);
  box-shadow: var(--sp-paper-shadow);
}

.paper-note::before,
.legal-note::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: -5px;
  height: 8px;
  background: var(--sp-paper);
  clip-path: polygon(0 42%, 6% 70%, 12% 25%, 19% 64%, 27% 35%, 35% 72%, 44% 28%, 52% 61%, 60% 32%, 69% 68%, 77% 27%, 85% 65%, 93% 30%, 100% 55%, 100% 100%, 0 100%);
}

.legal-note {
  background: rgba(46, 70, 82, .94);
  border-color: rgba(214, 182, 108, .5);
  color: rgba(255, 250, 240, .9);
}

.legal-note strong,
.legal-note h3 {
  color: var(--sp-gold-light);
}

.pull-quote {
  position: relative;
  margin: 48px auto;
  padding: 34px 14px 34px 34px;
  color: var(--sp-indigo-deep);
  border-left: 3px solid var(--sp-gold);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
  font-weight: 700;
  line-height: 1.72;
}

.pull-quote::before {
  content: "“";
  position: absolute;
  left: -6px;
  top: -35px;
  color: rgba(214, 182, 108, .38);
  font-family: Georgia, serif;
  font-size: 6rem;
}

.question-stack {
  display: grid;
  gap: 10px;
  margin: 30px 0;
}

.question-stack p {
  margin: 0;
  padding: 15px 18px;
  background: rgba(255, 250, 240, .72);
  border-left: 3px solid var(--sp-tuihong);
  box-shadow: 0 6px 16px rgba(45, 50, 51, .08);
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: min(100% - 36px, 1050px);
  margin: 42px auto;
}

.comparison-card {
  position: relative;
  padding: clamp(24px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(62, 59, 55, .14);
  box-shadow: var(--sp-paper-shadow);
}

.comparison-card.legacy {
  background: linear-gradient(145deg, #f3e5d2, #ead4b7);
}

.comparison-card.modern {
  color: rgba(255, 250, 240, .92);
  background: linear-gradient(145deg, #415965, #2e4652);
}

.comparison-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 150px;
  height: 190px;
  border: 16px solid rgba(214, 182, 108, .22);
  border-bottom: 0;
  border-radius: 70px 70px 0 0;
}

.comparison-card small {
  color: var(--sp-ochre);
  font-weight: 800;
  letter-spacing: .16em;
}

.comparison-card.modern small {
  color: var(--sp-gold-light);
}

.comparison-card h3 {
  margin: 10px 0 16px;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: 1.55rem;
}

.comparison-card p {
  margin: 0;
  line-height: 1.85;
}

.special-list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.special-list li {
  position: relative;
  padding: 16px 18px 16px 48px;
  background: rgba(255, 250, 240, .66);
  border: 1px solid rgba(46, 70, 82, .1);
}

.special-list li::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 1.3em;
  width: 12px;
  height: 12px;
  background: var(--sp-gold);
  transform: rotate(45deg);
  box-shadow: 4px 4px 0 rgba(159, 95, 77, .18);
}

.special-timeline {
  position: relative;
  display: grid;
  gap: 18px;
  margin: 36px 0;
  padding-left: 38px;
}

.special-timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  background: linear-gradient(var(--sp-ochre), var(--sp-gold), var(--sp-indigo));
}

.timeline-item {
  position: relative;
  padding: 22px 24px;
  background: rgba(255, 250, 240, .75);
  border: 1px solid rgba(214, 182, 108, .38);
  box-shadow: 0 7px 18px rgba(48, 52, 51, .08);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 28px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sp-gold);
  border: 3px solid var(--sp-paper);
  box-shadow: 0 0 0 1px var(--sp-ochre);
}

.timeline-item time {
  color: var(--sp-ochre);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.timeline-item h3 {
  margin: 6px 0 8px;
  color: var(--sp-indigo-deep);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
}

.timeline-item p {
  margin: 0;
  line-height: 1.75;
}

.responsibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0;
}

.responsibility-card {
  padding: 24px;
  background: rgba(255, 250, 240, .7);
  border: 1px solid rgba(46, 70, 82, .14);
}

.responsibility-card:nth-child(1) { border-top: 5px solid var(--sp-ochre); }
.responsibility-card:nth-child(2) { border-top: 5px solid var(--sp-indigo); }
.responsibility-card:nth-child(3) { border-top: 5px solid var(--sp-mist); }
.responsibility-card:nth-child(4) { border-top: 5px solid var(--sp-sage); }

.responsibility-card small {
  color: var(--sp-ochre);
  font-weight: 800;
}

.responsibility-card h3 {
  margin: 7px 0 10px;
  color: var(--sp-indigo-deep);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: 1.18rem;
}

.responsibility-card p {
  margin: 0;
  line-height: 1.75;
}

.final-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--sp-indigo-deep), var(--sp-indigo));
  color: rgba(255, 250, 240, .92);
}

.final-section::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -28%;
  width: min(72vw, 760px);
  height: min(72vw, 760px);
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(240, 217, 154, .4), rgba(214, 182, 108, .08) 42%, transparent 68%);
}

.final-section .story-heading h2,
.final-section .story-copy strong,
.final-section .pull-quote {
  color: var(--sp-white);
}

.final-section .story-inner {
  position: relative;
  z-index: 2;
}

.final-chapter-number {
  position: absolute;
  top: clamp(24px, 5vw, 52px);
  right: max(4vw, calc(50% - 590px));
  z-index: 1;
  color: rgba(240, 217, 154, .28);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6.5rem, 15vw, 12rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.08em;
  pointer-events: none;
  text-shadow: 0 10px 30px rgba(9, 28, 39, .24);
}

.final-mantra {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 30px 0 0;
  padding: 14px 22px;
  color: var(--sp-gold-light);
  background: rgba(255, 250, 240, .06);
  border: 1px solid rgba(240, 217, 154, .58);
  box-shadow: 6px 6px 0 rgba(214, 182, 108, .12), 0 12px 30px rgba(8, 27, 38, .16);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.65rem, 4vw, 2.65rem);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: .22em;
  text-shadow: 0 2px 14px rgba(214, 182, 108, .18);
}

.final-mantra::before,
.final-mantra::after {
  content: "";
  width: clamp(24px, 5vw, 46px);
  height: 1px;
  background: var(--sp-gold);
}

html[lang="en"] .final-mantra {
  font-size: clamp(1.4rem, 3.3vw, 2.25rem);
  letter-spacing: .08em;
}

html[lang="ja"] .final-mantra {
  letter-spacing: .12em;
}

.special-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.special-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 15px 18px;
  color: var(--sp-indigo-deep);
  background: var(--sp-paper);
  border: 1px solid var(--sp-gold);
  text-decoration: none;
  font-weight: 800;
  transition: transform .25s ease, background .25s ease;
}

.special-actions a::after {
  content: "→";
  color: var(--sp-ochre);
}

.special-actions a:hover {
  transform: translateY(-3px);
  background: var(--sp-white);
}

/* The prologue releases the article into the door sequence without adding dates. */
.chapter-transition-prologue {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 14vw, 180px) 0 clamp(118px, 16vw, 210px);
  background:
    linear-gradient(180deg, rgba(31, 54, 57, .2), rgba(20, 43, 53, .96)),
    radial-gradient(circle at 72% 28%, rgba(222, 194, 139, .16), transparent 30%),
    #243b3f;
  isolation: isolate;
}

.chapter-transition-prologue::before,
.chapter-transition-prologue::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chapter-transition-prologue::before {
  z-index: -2;
  opacity: .18;
  background:
    linear-gradient(90deg, rgba(18, 34, 38, .72), transparent 42%, rgba(18, 34, 38, .58)),
    url("art/chair-bound-child-paper-art-20260811.webp") center 43% / cover no-repeat;
  filter: sepia(.18) saturate(.62) brightness(.72);
}

.chapter-transition-prologue::after {
  z-index: -1;
  opacity: .42;
  background:
    repeating-linear-gradient(8deg, rgba(255, 250, 240, .025) 0 1px, transparent 1px 8px),
    linear-gradient(180deg, rgba(20, 43, 53, .08), #142b35 96%);
}

.chapter-transition-prologue-inner {
  width: min(100% - 40px, 760px);
  margin-inline: auto;
}

.chapter-transition-prologue p {
  margin: 0 0 2.2em;
  color: var(--sp-tuihong);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.08rem, 2vw, 1.42rem);
  font-weight: 600;
  line-height: 2;
  letter-spacing: .075em;
  text-shadow: 0 3px 22px rgba(7, 22, 29, .72);
}

.chapter-transition-prologue p:last-child {
  margin-bottom: 0;
  font-weight: 800;
}

/* 2026-08-13: the old house gives way to a present-day city. */
.chapter-transition-prologue{min-height:310vh;padding:0;background:#172f39;overflow:visible}
.chapter-transition-prologue-inner{position:relative;width:100%;min-height:310vh}
.city-memory{position:sticky;top:0;height:100vh;overflow:hidden;background:linear-gradient(180deg,#263e47,#102630 74%,#091b23)}
.city-memory::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(8deg,rgba(250,244,229,.025) 0 1px,transparent 1px 8px),radial-gradient(circle at 70% 22%,rgba(230,184,168,.12),transparent 30%);mix-blend-mode:screen}
.city-building{position:absolute;inset:7vh 8vw -8vh 28vw;background:repeating-linear-gradient(90deg,transparent 0 8.8%,rgba(218,226,225,.13) 9% 9.5%),repeating-linear-gradient(180deg,transparent 0 8.7%,rgba(218,226,225,.14) 9% 9.5%),linear-gradient(135deg,#304a52,#172e38);clip-path:polygon(13% 0,100% 8%,100% 100%,0 100%,0 14%);box-shadow:-28px 0 70px rgba(0,0,0,.3)}
.city-window{position:absolute;width:8vw;height:5vh;background:rgba(229,210,158,.16);box-shadow:0 0 22px rgba(229,210,158,.08)}
.city-window-child{right:24vw;top:43vh;background:rgba(82,93,92,.25);border:1px solid rgba(230,184,168,.22)}
.city-window-one{right:11vw;top:24vh}.city-window-two{right:38vw;top:65vh}
.city-chair-shadow{position:absolute;right:26vw;top:44vh;width:42px;height:70px;border:5px solid rgba(17,27,30,.62);border-bottom:0;filter:blur(.2px)}
.city-light-trail{position:absolute;left:-5%;right:-5%;bottom:10vh;height:3px;background:linear-gradient(90deg,transparent,#c6a569,#e7d6a9,transparent);box-shadow:0 0 12px rgba(222,194,139,.35);transform:skewY(-4deg)}
.city-ember{position:absolute;left:18vw;top:32vh;width:14px;height:14px;border-radius:50%;background:#c8755d;box-shadow:0 0 34px 12px rgba(200,117,93,.28);animation:city-ember-fade 7s ease forwards}
@keyframes city-ember-fade{to{opacity:0;transform:scale(.15)}}
.chapter-transition-prologue .prologue-line{position:absolute;z-index:3;left:50%;width:min(760px,calc(100% - 40px));margin:0;opacity:0;transform:translate(-50%,54px);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.75,.2,1)}
.chapter-transition-prologue .prologue-line span{display:block;padding:20px 24px;border-left:1px solid rgba(222,194,139,.35);background:linear-gradient(90deg,rgba(10,29,37,.82),rgba(10,29,37,.2));backdrop-filter:blur(5px)}
.chapter-transition-prologue .prologue-line:nth-of-type(1){top:28vh}.chapter-transition-prologue .prologue-line:nth-of-type(2){top:96vh}.chapter-transition-prologue .prologue-line:nth-of-type(3){top:174vh}.chapter-transition-prologue .prologue-line:nth-of-type(4){top:252vh}
.chapter-transition-prologue .prologue-line.is-visible{opacity:1;transform:translate(-50%,0)}

.next-chapter-transition{min-height:360vh;min-height:360svh}
.next-chapter-city{background:linear-gradient(90deg,rgba(16,36,44,.4),transparent 52%,rgba(11,29,36,.48)),linear-gradient(180deg,#344c54,#162f39)}
.next-chapter-city .ancient-window{left:auto;right:9vw;top:8vh;width:min(58vw,780px);height:78vh;border:0;background:repeating-linear-gradient(90deg,transparent 0 12%,rgba(224,230,225,.18) 12.3% 12.8%),repeating-linear-gradient(180deg,transparent 0 11%,rgba(224,230,225,.17) 11.3% 11.8%),linear-gradient(145deg,#405960,#203b45);clip-path:polygon(11% 0,100% 6%,100% 100%,0 100%,0 13%);box-shadow:-30px 26px 70px rgba(0,0,0,.28)}
.building-grid{position:absolute;inset:0;background:linear-gradient(112deg,transparent 46%,rgba(222,194,139,.12) 47%,transparent 49%),linear-gradient(180deg,transparent 72%,rgba(7,21,27,.5));pointer-events:none}
.next-chapter-city .ancient-chair{right:22vw;bottom:22vh}

.chapter-one-content{position:relative;display:block!important;min-height:620vh;padding:0;background:linear-gradient(180deg,#d8e0df,#eef0ea 22%,#d9d8cf 100%);overflow:clip}
.chapter-one-inner{position:relative;width:100%;max-width:none;margin:0;min-height:620vh;padding:0}
.chapter-preview-building{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,rgba(9,31,40,.14),rgba(9,31,40,.72)),repeating-linear-gradient(90deg,transparent 0 12%,rgba(240,235,220,.14) 12.2% 12.7%),repeating-linear-gradient(180deg,transparent 0 11%,rgba(240,235,220,.13) 11.2% 11.7%),linear-gradient(145deg,#435b61,#1c3740)}
.chapter-preview-building::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(7deg,rgba(255,251,241,.03) 0 1px,transparent 1px 8px);pointer-events:none}
.chapter-dialogue-stack{position:absolute;inset:0;width:min(780px,calc(100% - 40px));margin:auto;padding-top:24vh}
.chapter-dialogue-card{position:relative;min-height:58vh;margin:0 0 42vh;padding:clamp(25px,4vw,48px);border:1px solid rgba(224,194,132,.5);border-radius:3px 24px 24px 24px;background:linear-gradient(145deg,rgba(250,247,238,.96),rgba(224,229,224,.9));box-shadow:0 28px 70px rgba(5,25,33,.25),inset 0 0 0 6px rgba(255,255,255,.28);color:#203c45;opacity:.18;transform:translateY(70px) scale(.96);transition:opacity .85s ease,transform 1.1s cubic-bezier(.18,.72,.2,1),filter .8s ease;filter:blur(2px)}
.chapter-dialogue-card.is-visible{opacity:1;transform:translateY(0) scale(1);filter:none}
.chapter-dialogue-card.is-past{opacity:.42;transform:translateY(-18px) scale(.97);filter:saturate(.65)}
.chapter-one-header h2{font-size:clamp(2.5rem,8vw,5.7rem)}
.chapter-dialogue-note em{color:#b86452;font-style:normal;font-weight:900}
.chapter-dialogue-question strong{display:block;margin-top:24px;color:#173b49;font-family:"Noto Serif TC",serif;font-size:clamp(1.35rem,3vw,2rem)}
.system-tags{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px}.system-tags span{position:relative;padding:12px 8px;border:1px solid #c9aa6d;text-align:center;font-weight:900}.system-tags span:not(:last-child)::after{content:"";position:absolute;left:100%;top:50%;width:11px;border-top:1px dashed #b96d5a;transform:rotate(12deg)}
.child-signal{display:block;width:10px;height:10px;margin:28px auto 0;border-radius:50%;background:#d99579;box-shadow:0 0 0 8px rgba(217,149,121,.12),0 0 24px rgba(217,149,121,.45)}
.chapter-dialogue-record span{display:inline-block;margin:4px;padding:4px 9px;border:1px solid #b79a61}.chapter-dialogue-record strong{display:block;margin-top:20px;color:#b45d4d}
.chapter-coming-soon{display:block;min-height:62vh;padding:clamp(34px,6vw,64px)}

@media(max-width:760px){
 .chapter-transition-prologue,.chapter-transition-prologue-inner{min-height:350vh}.city-building{inset:4vh -18vw -5vh 8vw}.city-window{width:18vw}.city-window-child{right:23vw}.city-chair-shadow{right:29vw}.chapter-transition-prologue .prologue-line:nth-of-type(1){top:24vh}.chapter-transition-prologue .prologue-line:nth-of-type(2){top:105vh}.chapter-transition-prologue .prologue-line:nth-of-type(3){top:195vh}.chapter-transition-prologue .prologue-line:nth-of-type(4){top:286vh}
 .next-chapter-transition{min-height:410svh}.next-chapter-city .ancient-window{right:-28vw;width:112vw}.next-chapter-city .ancient-chair{right:20vw}
 .chapter-one-content,.chapter-one-inner{min-height:680vh}.chapter-dialogue-stack{width:calc(100% - 26px);padding-top:18vh}.chapter-dialogue-card{min-height:64vh;margin-bottom:46vh;padding:25px 21px}.system-tags{grid-template-columns:1fr 1fr}.system-tags span:nth-child(2)::after{display:none}
}

@media(prefers-reduced-motion:reduce){.chapter-transition-prologue{min-height:auto;padding:80px 0}.chapter-transition-prologue-inner{min-height:auto;width:min(760px,calc(100% - 40px))}.city-memory{position:absolute;inset:0;height:auto}.chapter-transition-prologue .prologue-line{position:relative;left:auto;top:auto!important;opacity:1;transform:none;margin:0 0 24px;width:100%}.chapter-one-content,.chapter-one-inner{min-height:auto}.chapter-preview-building{position:absolute;inset:0;height:auto}.chapter-dialogue-stack{position:relative;padding:80px 0}.chapter-dialogue-card{min-height:0;margin-bottom:28px;opacity:1;transform:none;filter:none}}

/* Prologue-to-chapter transition: two screen-heights, one visual axis, no fictional dates. */
.next-chapter-transition {
  --ancient-opacity: 1;
  --ancient-scale: 1;
  --modern-opacity: 0;
  --sunlight-opacity: .2;
  --rain-shadow-opacity: 0;
  --leaf-shadow-opacity: 0;
  --ink-opacity: 0;
  --ancient-window-opacity: .52;
  --ancient-chair-opacity: .54;
  --time-rotate: 0deg;
  --leaf-shift-x: 0vw;
  --leaf-shift-y: 0vh;
  --door-left-shift: 0%;
  --door-right-shift: 0%;
  --door-light-width: 2px;
  --door-light-opacity: .18;
  --morph-opacity: 0;
  --morph-progress: 0;
  --morph-left: 0px;
  --morph-top: 0px;
  --morph-width: 0px;
  --morph-height: 0px;
  --last-line-opacity: 1;
  --last-line-shift: 0px;
  --chapter-opacity: 0;
  --chapter-shift: 18px;
  --cta-opacity: 0;
  --cta-shift: 12px;
  --cue-opacity: 1;
  --paper-grain-opacity: .18;
  position: relative;
  min-height: 220vh;
  min-height: 220svh;
  isolation: isolate;
  overflow: clip;
  color: rgba(255, 250, 240, .94);
  background: #142b35;
}

.next-chapter-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #142b35;
}

.next-chapter-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 25, 33, .25), transparent 30%, rgba(7, 22, 29, .5)),
    radial-gradient(circle at 50% 52%, transparent 20%, rgba(9, 26, 34, .46) 100%);
}

.next-chapter-art,
.next-chapter-ancient,
.next-chapter-modern,
.door-frame {
  position: absolute;
  inset: 0;
}

.next-chapter-art {
  z-index: 0;
}

.next-chapter-ancient {
  z-index: 1;
  opacity: var(--ancient-opacity);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(28, 48, 49, .55), rgba(96, 75, 55, .08) 48%, rgba(27, 45, 47, .6)),
    linear-gradient(180deg, rgba(18, 41, 46, .15), rgba(30, 35, 31, .56)),
    url("art/chair-bound-child-paper-art-20260811.webp") center 46% / cover no-repeat;
  filter: sepia(.16) saturate(.7) brightness(.7);
  transform: scale(var(--ancient-scale));
  transform-origin: 50% 52%;
  will-change: opacity, transform;
}

.ancient-window {
  position: absolute;
  left: 7vw;
  top: 10vh;
  width: min(31vw, 440px);
  height: min(58vh, 600px);
  opacity: var(--ancient-window-opacity);
  border: clamp(8px, 1.2vw, 18px) solid rgba(58, 55, 44, .78);
  box-shadow: inset 0 0 0 2px rgba(233, 213, 171, .28), 0 20px 50px rgba(6, 22, 27, .34);
  background:
    linear-gradient(90deg, transparent 47%, rgba(58, 55, 44, .74) 48% 52%, transparent 53%),
    linear-gradient(180deg, transparent 47%, rgba(58, 55, 44, .74) 48% 52%, transparent 53%),
    rgba(205, 181, 135, .12);
}

.ancient-chair {
  position: absolute;
  right: 13vw;
  bottom: 9vh;
  width: clamp(82px, 10vw, 148px);
  height: clamp(138px, 21vh, 220px);
  opacity: var(--ancient-chair-opacity);
  border: 8px solid rgba(47, 43, 36, .78);
  border-bottom: 0;
  box-shadow:
    inset 17px 0 0 -13px rgba(47, 43, 36, .72),
    inset -17px 0 0 -13px rgba(47, 43, 36, .72),
    0 28px 28px rgba(7, 21, 26, .32);
}

.ancient-chair::before,
.ancient-chair::after {
  content: "";
  position: absolute;
  bottom: -44px;
  width: 8px;
  height: 70px;
  background: rgba(47, 43, 36, .78);
}

.ancient-chair::before { left: 8px; }
.ancient-chair::after { right: 8px; }

.time-sunlight,
.time-rain-shadow,
.time-leaf-shadow,
.time-wash,
.ink-fade {
  position: absolute;
  pointer-events: none;
}

.time-sunlight {
  inset: -15%;
  opacity: var(--sunlight-opacity);
  background: linear-gradient(112deg, transparent 18%, rgba(238, 211, 154, .72) 39%, rgba(230, 184, 168, .22) 51%, transparent 67%);
  mix-blend-mode: screen;
  transform: translate3d(-3vw, -2vh, 0) rotate(-2deg);
}

.time-rain-shadow {
  inset: -15%;
  opacity: var(--rain-shadow-opacity);
  background: repeating-linear-gradient(108deg, transparent 0 18px, rgba(26, 48, 54, .42) 19px 21px, transparent 22px 43px);
  mix-blend-mode: multiply;
  transform: translate3d(3vw, -4vh, 0) skewX(-4deg);
}

.time-leaf-shadow {
  inset: 5% 4%;
  opacity: var(--leaf-shadow-opacity);
  background:
    radial-gradient(ellipse 18px 8px at 11% 23%, rgba(29, 48, 46, .5) 0 64%, transparent 68%),
    radial-gradient(ellipse 22px 9px at 24% 31%, rgba(29, 48, 46, .48) 0 62%, transparent 67%),
    radial-gradient(ellipse 19px 8px at 36% 18%, rgba(29, 48, 46, .44) 0 62%, transparent 67%),
    radial-gradient(ellipse 24px 10px at 53% 28%, rgba(29, 48, 46, .46) 0 62%, transparent 67%),
    radial-gradient(ellipse 18px 8px at 67% 19%, rgba(29, 48, 46, .42) 0 62%, transparent 67%),
    radial-gradient(ellipse 22px 9px at 77% 36%, rgba(29, 48, 46, .48) 0 62%, transparent 67%),
    radial-gradient(ellipse 19px 8px at 88% 22%, rgba(29, 48, 46, .43) 0 62%, transparent 67%);
  transform: translate3d(var(--leaf-shift-x), var(--leaf-shift-y), 0) rotate(-4deg);
}

.time-wash {
  inset: -20%;
  opacity: .58;
  background: conic-gradient(from 40deg at 45% 48%, rgba(230, 184, 168, .04), rgba(240, 217, 154, .22), rgba(67, 94, 100, .18), rgba(230, 184, 168, .04));
  mix-blend-mode: screen;
  transform: rotate(var(--time-rotate)) scale(1.16);
}

.ink-fade {
  inset: 0;
  opacity: var(--ink-opacity);
  background:
    radial-gradient(circle at 48% 48%, rgba(112, 111, 104, .28), rgba(46, 56, 56, .62)),
    repeating-linear-gradient(8deg, rgba(232, 226, 213, .07) 0 1px, transparent 1px 7px);
  mix-blend-mode: saturation;
}

.next-chapter-modern {
  z-index: 2;
  opacity: var(--modern-opacity);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(233, 239, 241, .92), transparent 18%),
    linear-gradient(180deg, #e9eff1 0 17%, #aabac0 17.2% 18%, #718890 18.2% 60%, #405864 60.4% 100%);
  filter: saturate(.62);
  will-change: opacity;
  isolation: isolate;
}

/* Keep a restrained 7% paper fibre layer over the modern corridor. */
.next-chapter-modern::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .07;
  background:
    repeating-linear-gradient(8deg, rgba(60, 71, 72, .72) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .8) 0 1px, transparent 1px 10px),
    radial-gradient(ellipse at 38% 44%, rgba(68, 77, 76, .36), transparent 54%);
  mix-blend-mode: multiply;
}

.hospital-ceiling {
  position: absolute;
  inset: 3vh 15vw auto;
  height: 14vh;
  background: repeating-linear-gradient(90deg, transparent 0 13%, rgba(248, 246, 238, .92) 13.5% 24%, transparent 24.5% 38%);
  box-shadow: 0 0 44px rgba(246, 243, 229, .3);
}

.hospital-wall {
  position: absolute;
  top: 17vh;
  bottom: 0;
  width: 50%;
  background: linear-gradient(180deg, rgba(193, 205, 208, .66), rgba(73, 96, 106, .62));
}

.hospital-wall-left {
  left: 0;
  clip-path: polygon(0 0, 100% 31%, 100% 69%, 0 100%);
  border-right: 1px solid rgba(232, 239, 239, .42);
}

.hospital-wall-right {
  right: 0;
  clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 69%);
  border-left: 1px solid rgba(232, 239, 239, .42);
}

.hospital-floor {
  position: absolute;
  inset: 60% 0 0;
  background:
    linear-gradient(115deg, transparent 0 49.6%, rgba(217, 226, 227, .36) 49.8% 50.2%, transparent 50.4%),
    linear-gradient(245deg, transparent 0 49.6%, rgba(217, 226, 227, .32) 49.8% 50.2%, transparent 50.4%),
    linear-gradient(180deg, rgba(83, 107, 116, .45), #263f4a);
}

.hospital-curtain {
  position: absolute;
  top: 16vh;
  right: 3vw;
  width: min(36vw, 510px);
  height: 72vh;
  opacity: .88;
  border-left: 2px solid rgba(232, 226, 215, .65);
  border-right: 2px solid rgba(89, 105, 112, .5);
  background: repeating-linear-gradient(90deg, #d3d8d5 0 10px, #aebbc0 11px 23px, #e1dfd8 24px 32px);
  box-shadow: -18px 16px 38px rgba(10, 29, 37, .3);
  clip-path: polygon(0 0, 100% 0, 98% 100%, 91% 98%, 84% 100%, 76% 98%, 69% 100%, 61% 98%, 53% 100%, 45% 98%, 37% 100%, 29% 98%, 21% 100%, 13% 98%, 5% 100%);
}

.corridor-line {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 43vh;
  opacity: .56;
  background: linear-gradient(180deg, rgba(233, 239, 241, .12), rgba(233, 239, 241, .72));
  box-shadow: 0 0 18px rgba(233, 239, 241, .3);
}

.chair-curtain-morph {
  position: absolute;
  left: var(--morph-left);
  top: var(--morph-top);
  z-index: 4;
  width: var(--morph-width);
  height: var(--morph-height);
  opacity: var(--morph-opacity);
  border-top: 7px solid rgba(178, 188, 188, .52);
  background: repeating-linear-gradient(90deg, rgba(68, 75, 72, .8) 0 7px, transparent 8px 21px);
  box-shadow: inset 0 0 18px rgba(225, 228, 222, .14);
  will-change: opacity, left, top, width, height;
}

.door-frame {
  z-index: 5;
  pointer-events: none;
  perspective: 1100px;
  transform: scale(var(--ancient-scale));
  transform-origin: 50% 52%;
  will-change: transform;
}

.door-frame::before {
  content: "";
  position: absolute;
  inset: 3.5vh 7vw;
  z-index: 4;
  border: clamp(10px, 1.8vw, 24px) solid rgba(38, 43, 39, .92);
  box-shadow: inset 0 0 0 2px rgba(220, 190, 130, .2), 0 0 58px rgba(6, 21, 27, .48);
}

.door-panel {
  position: absolute;
  top: 3.5vh;
  bottom: 3.5vh;
  z-index: 3;
  width: 43vw;
  border: 1px solid rgba(218, 190, 137, .3);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 8% 92%, rgba(5, 18, 23, .22)),
    repeating-linear-gradient(90deg, rgba(92, 72, 53, .2) 0 1px, transparent 1px 17px),
    linear-gradient(155deg, #3a514f, #24434a 52%, #1f3437);
  box-shadow: inset 0 0 0 9px rgba(25, 45, 46, .46), 0 10px 38px rgba(4, 17, 22, .42);
  will-change: transform;
}

.door-panel::before,
.door-panel::after {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border: 1px solid rgba(214, 182, 108, .22);
}

.door-panel::after { inset: 51% 10% 8%; }

.door-panel-left {
  right: 50%;
  transform: translateX(var(--door-left-shift));
}

.door-panel-right {
  left: 50%;
  transform: translateX(var(--door-right-shift));
}

.door-light {
  position: absolute;
  left: 50%;
  top: 3.5vh;
  bottom: 3.5vh;
  z-index: 2;
  width: var(--door-light-width);
  opacity: var(--door-light-opacity);
  background: linear-gradient(90deg, rgba(233, 239, 241, .08), rgba(233, 239, 241, .98), rgba(233, 239, 241, .08));
  box-shadow: 0 0 70px rgba(233, 239, 241, .7);
  transform: translateX(-50%);
}

.transition-paper-grain {
  position: absolute;
  inset: 0;
  z-index: 7;
  opacity: var(--paper-grain-opacity);
  pointer-events: none;
  background-image:
    repeating-linear-gradient(8deg, rgba(77, 66, 55, .05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
}

.transition-last-line,
.chapter-threshold {
  position: absolute;
  left: 50%;
  z-index: 10;
  width: min(100% - 40px, 820px);
  margin: 0;
  text-align: center;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
}

.transition-last-line {
  top: 50%;
  opacity: var(--last-line-opacity);
  color: var(--sp-paper);
  font-size: clamp(1.4rem, 3.3vw, 2.65rem);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: .12em;
  text-shadow: 0 6px 28px rgba(6, 19, 25, .82);
  transform: translate(-50%, calc(-50% + var(--last-line-shift)));
}

.transition-last-line span {
  display: block;
  color: var(--sp-tuihong);
}

.chapter-threshold {
  top: 50%;
  opacity: var(--chapter-opacity);
  transform: translate(-50%, calc(-50% + var(--chapter-shift)));
  text-shadow: 0 4px 28px rgba(16, 42, 50, .42);
}

.next-chapter-eyebrow {
  margin: 0 0 17px;
  color: #d6b66c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
}

.chapter-threshold h2 {
  margin: 0;
  color: #243e47;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(2.3rem, 5.2vw, 5rem);
  line-height: 1.18;
  letter-spacing: .08em;
}

.chapter-threshold h2 span {
  display: block;
  margin-bottom: 12px;
  color: #8a8984;
  font-size: .34em;
  letter-spacing: .28em;
}

.next-chapter-deck {
  margin: 20px auto 0;
  color: #455d65;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(.98rem, 1.8vw, 1.22rem);
  letter-spacing: .07em;
}

.next-chapter-cta {
  display: grid;
  gap: 5px;
  align-items: center;
  width: min(100%, 480px);
  min-height: 66px;
  margin: 34px auto 0;
  padding: 17px 22px;
  opacity: var(--cta-opacity);
  color: var(--sp-indigo-deep);
  background: linear-gradient(135deg, rgba(248, 244, 235, .96), rgba(222, 227, 226, .96));
  border: 1px solid rgba(185, 150, 95, .82);
  box-shadow: 7px 7px 0 rgba(185, 150, 95, .18), 0 18px 38px rgba(17, 48, 57, .24);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  text-align: center;
  transform: translateY(var(--cta-shift));
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.next-chapter-cta strong {
  font-size: clamp(1.02rem, 2vw, 1.24rem);
  letter-spacing: .06em;
}

.next-chapter-cta small {
  color: rgba(46, 70, 82, .66);
  font-size: .68rem;
  letter-spacing: .1em;
}

.next-chapter-cta:not(:disabled) { cursor: pointer; }

.next-chapter-cta:not(:disabled):hover,
.next-chapter-cta:not(:disabled):focus-visible {
  background: #fffaf0;
  border-color: var(--sp-gold);
  box-shadow: 7px 7px 0 rgba(185, 150, 95, .22), 0 22px 44px rgba(17, 48, 57, .3);
  outline: 3px solid rgba(36, 62, 71, .34);
  outline-offset: 4px;
}

.next-chapter-cta:disabled { pointer-events: none; }

.chapter-transition-skip {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 12;
  min-height: 44px;
  padding: 9px 14px;
  color: rgba(255, 250, 240, .88);
  background: rgba(19, 43, 52, .62);
  border: 1px solid rgba(240, 217, 154, .42);
  border-radius: 999px;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
}

.chapter-transition-skip:hover,
.chapter-transition-skip:focus-visible {
  color: #fffaf0;
  background: rgba(19, 43, 52, .9);
  outline: 2px solid var(--sp-gold-light);
  outline-offset: 3px;
}

.transition-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 10;
  display: grid;
  justify-items: center;
  gap: 7px;
  opacity: var(--cue-opacity);
  color: rgba(255, 250, 240, .7);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  transform: translateX(-50%);
}

.transition-scroll-cue i {
  display: block;
  width: 1px;
  height: 25px;
  background: linear-gradient(var(--sp-gold-light), transparent);
}

.chapter-one-content {
  position: relative;
  padding: clamp(72px, 10vw, 118px) 0;
  color: #31464d;
  background:
    linear-gradient(90deg, transparent, rgba(170, 186, 192, .16) 50%, transparent),
    #e9eff1;
  border-top: 1px solid rgba(36, 67, 74, .24);
}

.chapter-one-content[hidden] { display: none; }

.chapter-one-content.is-entering {
  animation: chapter-body-arrives .55s ease-out both;
}

@keyframes chapter-body-arrives {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.chapter-one-inner {
  width: min(100% - 36px, 800px);
  margin-inline: auto;
}

.chapter-one-header {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(36, 67, 74, .2);
}

.chapter-one-header h2 {
  margin: 0;
  color: #243e47;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(2.15rem, 4.6vw, 4rem);
  line-height: 1.25;
  letter-spacing: .07em;
}

.chapter-one-header h2:focus { outline: none; }

.chapter-one-header > p:last-child {
  margin: 14px 0 0;
  color: #61777e;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: 1.08rem;
  letter-spacing: .08em;
}

.chapter-one-copy {
  padding-top: 36px;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: clamp(1.04rem, 1.65vw, 1.17rem);
  line-height: 2;
}

.chapter-one-copy p { margin: 0 0 1.45em; }
.chapter-one-copy strong { color: #243e47; }

.chapter-one-copy blockquote {
  margin: 42px 0;
  padding: 28px 28px 28px 34px;
  color: #243e47;
  background: rgba(255, 255, 255, .36);
  border-left: 3px solid #b9965f;
  font-size: clamp(1.2rem, 2.25vw, 1.62rem);
  font-weight: 700;
  line-height: 1.75;
}

.chapter-coming-soon {
  margin-top: 38px;
  padding: 30px clamp(22px, 5vw, 38px);
  text-align: center;
  background: linear-gradient(135deg, rgba(222, 231, 226, .86), rgba(255, 251, 242, .84));
  border: 1px solid rgba(185, 150, 95, .5);
  box-shadow: 10px 10px 0 rgba(185, 150, 95, .12);
}

.chapter-coming-soon > span {
  color: #a37d3d;
  font-family: Arial, sans-serif;
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .2em;
}

.chapter-coming-soon h3 {
  margin: 12px 0 8px;
  color: #243e47;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: .07em;
}

.chapter-coming-soon p {
  margin: 0 0 18px;
  color: #52666d;
  font-size: .96rem;
}

.chapter-coming-soon a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #243e47;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.chapter-coming-soon a:hover,
.chapter-coming-soon a:focus-visible { color: #8c6530; }

.special-sources {
  padding: 70px 0;
  background: #e9e2d8;
  border-top: 1px solid rgba(46, 70, 82, .12);
}

.special-sources-inner {
  width: min(100% - 36px, 900px);
  margin-inline: auto;
}

.special-sources h2 {
  color: var(--sp-indigo-deep);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
}

.special-sources ol {
  display: grid;
  gap: 11px;
  padding-left: 1.4rem;
}

.special-sources li {
  line-height: 1.75;
}

.special-sources a {
  color: var(--sp-indigo);
  text-underline-offset: 3px;
}

.source-clarification {
  margin-top: 26px;
  padding: 18px 20px;
  background: rgba(255, 250, 240, .62);
  border-left: 4px solid var(--sp-sage);
  line-height: 1.75;
}

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 35;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  color: var(--sp-white);
  background: var(--sp-indigo);
  border: 1px solid var(--sp-gold);
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(32, 54, 64, .25);
  transition: opacity .25s ease, transform .25s ease;
  transform: translateY(10px);
  cursor: pointer;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 980px) {
  .special-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .85fr);
    gap: 32px;
  }

  .special-toc {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .intro-copy {
    width: min(100% - 30px, 620px);
  }

  .intro-copy h1 {
    font-size: clamp(2rem, 11vw, 3.6rem);
    letter-spacing: .045em;
  }

  .intro-copy h1 span {
    margin-top: 13px;
    font-size: .38em;
    line-height: 1.5;
    letter-spacing: .12em;
  }

  .intro-first-line {
    font-size: clamp(1.05rem, 5.2vw, 1.5rem);
    letter-spacing: .08em;
  }

  .intro-final-line {
    margin-top: 23px !important;
    font-size: .96rem;
    line-height: 1.75;
    letter-spacing: .07em;
  }

  .intro-chair {
    bottom: 18%;
  }

  .intro-shadow-child {
    bottom: 27%;
  }

  .intro-hospital-lines::after {
    left: 30%;
    right: 30%;
    width: auto;
  }

  .intro-hospital-door {
    left: -2%;
    width: 29vw;
  }

  .intro-hospital-bench {
    right: 5%;
    width: 37vw;
  }

  .intro-skip {
    right: max(12px, env(safe-area-inset-right));
    top: max(12px, env(safe-area-inset-top));
    padding: 9px 12px;
    font-size: .76rem;
  }

  .intro-replay {
    margin-top: 12px;
  }

  .special-breadcrumb {
    padding-top: 12px;
    font-size: .78rem;
  }

  .special-hero {
    padding-top: 24px;
  }

  .special-hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .special-hero-copy {
    order: 1;
  }

  .paper-art-frame {
    order: 2;
    width: min(92vw, 560px);
    margin-top: 14px;
  }

  .special-hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.7rem);
  }

  .special-hero h1 span {
    font-size: 1.08rem;
  }

  .special-deck {
    margin-top: 22px;
    font-size: 1.02rem;
  }

  .special-hero-quote {
    padding: 18px 18px 18px 22px;
  }

  .reading-note-card {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px;
  }

  .special-toc-section {
    padding-top: 28px;
    overflow: hidden;
  }

  .special-toc {
    display: flex;
    gap: 8px;
    margin-inline: 0;
    padding: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .special-toc a {
    flex: 0 0 min(76vw, 245px);
    min-height: 56px;
    scroll-snap-align: start;
  }

  .story-section {
    padding: 66px 0;
  }

  .story-section::before {
    top: 30px;
    font-size: 6rem;
  }

  .story-copy {
    font-size: 1.055rem;
    line-height: 1.95;
  }

  .comparison-grid,
  .responsibility-grid,
  .special-actions {
    grid-template-columns: 1fr;
  }

  .comparison-grid {
    width: min(100% - 28px, 720px);
  }

  .pull-quote {
    padding-left: 24px;
    font-size: 1.38rem;
  }

  .special-timeline {
    padding-left: 30px;
  }

  .timeline-item::before {
    left: -26px;
  }

  .paper-cut-layer.layer-one,
  .paper-cut-layer.layer-two {
    opacity: .36;
  }

  .final-chapter-number {
    top: 30px;
    right: 18px;
    font-size: 6.6rem;
  }

  .final-mantra {
    margin-top: 20px;
    padding: 12px 16px;
    letter-spacing: .15em;
  }

  .next-chapter-transition {
    min-height: 200vh;
    min-height: 200svh;
  }

  .transition-last-line,
  .chapter-threshold {
    width: min(100% - 30px, 620px);
  }

  .transition-last-line {
    font-size: clamp(1.24rem, 6vw, 2rem);
    letter-spacing: .08em;
  }

  .chapter-threshold {
    top: 51%;
  }

  .chapter-threshold h2 {
    font-size: clamp(2.4rem, 12vw, 3.9rem);
    letter-spacing: .045em;
  }

  .next-chapter-deck {
    max-width: 30rem;
    font-size: .96rem;
    line-height: 1.75;
  }

  .next-chapter-cta {
    width: min(100%, 430px);
    min-height: 62px;
    margin-top: 28px;
  }

  .ancient-window {
    left: 4vw;
    width: 44vw;
    opacity: .4;
  }

  .ancient-chair {
    right: 9vw;
    opacity: .42;
  }

  .hospital-curtain {
    right: -12vw;
    width: 64vw;
  }

  .door-frame::before {
    inset-inline: 3vw;
  }

  .door-panel {
    width: 47vw;
  }

  .chapter-one-inner {
    width: min(100% - 28px, 800px);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .intro-chair {
    bottom: 11%;
    width: clamp(74px, 9vw, 112px);
    height: clamp(116px, 33vh, 164px);
  }

  .intro-shadow-child {
    bottom: 28%;
    width: clamp(35px, 4.5vw, 56px);
    height: clamp(64px, 22vh, 104px);
  }

  .intro-copy h1 {
    margin-top: 12px;
    font-size: clamp(1.75rem, 9vh, 3.15rem);
  }

  .intro-copy h1 span {
    margin-top: 9px;
  }

  .intro-final-line {
    margin-top: 14px !important;
    font-size: .86rem;
  }
}

@media (max-width: 480px) {
  .special-hero h1 {
    letter-spacing: .015em;
  }

  .special-meta span {
    font-size: .72rem;
  }

  .paper-art-frame {
    padding: 10px;
  }

  .paper-art-frame::before {
    inset: -8px 8px 8px -8px;
  }

  .paper-art-frame::after {
    inset: 8px -8px -8px 8px;
  }

  .story-inner,
  .special-sources-inner {
    width: min(100% - 28px, 780px);
  }

  .paper-note,
  .legal-note {
    padding: 24px 19px;
  }

  .back-to-top {
    right: 12px;
    bottom: 12px;
  }

  .chapter-transition-prologue {
    padding: 82px 0 112px;
  }

  .chapter-transition-prologue-inner {
    width: min(100% - 32px, 760px);
  }

  .chapter-transition-prologue p {
    margin-bottom: 1.8em;
    font-size: 1.02rem;
    line-height: 1.9;
    letter-spacing: .055em;
  }

  .next-chapter-eyebrow {
    font-size: .67rem;
    letter-spacing: .13em;
  }

  .next-chapter-deck {
    margin-top: 15px;
  }

  .next-chapter-cta {
    padding: 15px 13px;
  }

  .chapter-transition-skip {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    padding: 8px 11px;
    font-size: .7rem;
  }

  .transition-scroll-cue {
    width: calc(100% - 30px);
    text-align: center;
  }

  .chapter-one-copy blockquote {
    padding: 24px 20px 24px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .special-toc a,
  .special-actions a,
  .back-to-top {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .special-intro.is-closing {
    animation: none;
  }

  .next-chapter-transition {
    min-height: 100vh;
    min-height: 100svh;
  }

  .next-chapter-stage {
    position: relative;
    height: 100vh;
    height: 100svh;
  }

  .next-chapter-ancient {
    opacity: .16;
    transform: none;
  }

  .next-chapter-modern {
    opacity: 1;
  }

  .door-panel-left {
    transform: translateX(-104%);
  }

  .door-panel-right {
    transform: translateX(104%);
  }

  .door-light {
    width: 82vw;
    opacity: .34;
  }

  .time-sunlight,
  .time-rain-shadow,
  .time-leaf-shadow,
  .time-wash,
  .ink-fade,
  .transition-last-line,
  .transition-scroll-cue,
  .chair-curtain-morph {
    display: none;
  }

  .chapter-threshold {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .next-chapter-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .chapter-one-content.is-entering {
    animation: none;
  }
}

@media print {
  .special-progress,
  .special-toc-section,
  .back-to-top,
  .special-intro,
  .intro-replay,
  .language-switcher {
    display: none !important;
  }

  body.chair-special-page {
    background: #fff;
  }

  .story-section,
  .final-section,
  .chapter-transition-prologue,
  .next-chapter-transition,
  .chapter-one-content,
  .special-sources {
    color: #111;
    background: #fff !important;
    break-inside: avoid;
  }

  .next-chapter-stage {
    display: none;
  }

  .chapter-one-content[hidden] {
    display: block !important;
  }

  .chapter-one-header h2,
  .chapter-one-header > p,
  .next-chapter-eyebrow,
  .chapter-transition-prologue p {
    color: #111;
    text-shadow: none;
  }

  .story-heading h2,
  .final-section .story-heading h2,
  .final-section .story-copy strong,
  .final-section .pull-quote {
    color: #111;
  }
}

/* Entry cards on the Social Cases and Kaikai overview pages. */
.social-case-linked-records .social-case-special-link {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  border-color: var(--sp-gold);
  background:
    radial-gradient(circle at 92% 18%, rgba(214, 182, 108, .2), transparent 34%),
    linear-gradient(135deg, #fff8e8, #eef1ed);
  box-shadow: 0 8px 20px rgba(46, 70, 82, .08);
}

.social-case-linked-records .social-case-special-link::after {
  content: "→";
  position: absolute;
  right: 18px;
  top: 50%;
  color: var(--sp-ochre);
  font-size: 20px;
  transform: translateY(-50%);
}

.social-case-linked-records .social-case-special-link strong {
  padding-right: 34px;
  color: var(--sp-indigo);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: 16px;
}

.case-connection-links:has(.case-connection-special) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.case-connection-links .case-connection-special {
  border-color: var(--sp-gold);
  background: linear-gradient(135deg, #fff8e8, #f0eee7);
}

.case-connection-links .case-connection-special small {
  color: var(--sp-ochre);
}

@media (max-width: 800px) {
  .case-connection-links:has(.case-connection-special) {
    grid-template-columns: 1fr;
  }
}

/* Highlighted special-feature button inside the homepage case dropdown. */
.social-case-nav-menu .social-case-menu-special {
  position: relative;
  margin: 7px 8px;
  padding: 13px 42px 13px 15px !important;
  overflow: hidden;
  border: 1px solid rgba(214, 182, 108, .72) !important;
  border-left: 4px solid var(--sp-ochre) !important;
  border-radius: 13px;
  background:
    radial-gradient(circle at 92% 20%, rgba(214, 182, 108, .26), transparent 34%),
    linear-gradient(135deg, #fff8e7, #eef1ed) !important;
  box-shadow: 0 8px 20px rgba(46, 70, 82, .12);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.social-case-nav-menu .social-case-menu-special::after {
  content: "→";
  position: absolute;
  right: 15px;
  top: 50%;
  color: var(--sp-ochre);
  font-size: 20px;
  font-weight: 900;
  transform: translateY(-50%);
}

.social-case-nav-menu .social-case-menu-special small {
  display: block;
  margin-bottom: 2px;
  color: var(--sp-ochre);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
}

.social-case-nav-menu .social-case-menu-special b {
  display: block;
  color: var(--sp-indigo-deep);
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
}

.social-case-nav-menu .social-case-menu-special span {
  color: #69777b;
}

.social-case-nav-menu .social-case-menu-special:hover,
.social-case-nav-menu .social-case-menu-special:focus-visible {
  border-color: var(--sp-gold) !important;
  box-shadow: 0 12px 25px rgba(46, 70, 82, .17), 0 0 0 2px rgba(214, 182, 108, .12);
  transform: translateY(-2px);
}

@media (max-width: 800px) {
  .social-case-nav-menu .social-case-menu-special {
    margin: 5px 3px;
    padding: 12px 40px 12px 13px !important;
  }
}

/* Direct homepage navigation entry: layered golden paper-cut button. */
html[lang] header .nav > nav > a.nav-special-feature {
  position: relative;
  isolation: isolate;
  min-height: 43px !important;
  padding: 7px 13px 7px 9px !important;
  color: #203640 !important;
  background:
    linear-gradient(145deg, rgba(255, 248, 218, .96), rgba(240, 211, 135, .98) 42%, rgba(214, 182, 108, .98) 72%, rgba(245, 224, 166, .98)) !important;
  border: 1px solid #b9842d !important;
  border-radius: 5px 13px 6px 12px !important;
  box-shadow:
    3px 3px 0 rgba(159, 95, 77, .42),
    6px 6px 0 rgba(46, 70, 82, .12),
    0 9px 20px rgba(73, 53, 24, .13) !important;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .06em;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html[lang] header .nav > nav > a.nav-special-feature::before {
  content: "✦" !important;
  display: grid !important;
  place-items: center;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  color: #6f4c17;
  background: linear-gradient(145deg, #fff2be, #c99437) !important;
  background-image: linear-gradient(145deg, #fff2be, #c99437) !important;
  border: 1px solid rgba(126, 82, 20, .38) !important;
  border-radius: 48% 52% 46% 54% / 53% 45% 55% 47% !important;
  box-shadow: 2px 2px 0 rgba(159, 95, 77, .26) !important;
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 1;
}

html[lang] header .nav > nav > a.nav-special-feature::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  background: linear-gradient(135deg, #fff8d8 0 49%, #a96f22 50% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .88;
  pointer-events: none;
}

html[lang] header .nav > nav > a.nav-special-feature:hover,
html[lang] header .nav > nav > a.nav-special-feature:focus-visible {
  color: #162f3d !important;
  background: linear-gradient(145deg, #fff7ce, #e9c66d 54%, #f5dfa0) !important;
  box-shadow:
    2px 2px 0 rgba(159, 95, 77, .46),
    5px 5px 0 rgba(46, 70, 82, .13),
    0 12px 24px rgba(73, 53, 24, .18) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 1100px) {
  html[lang] header .nav > nav > a.nav-special-feature {
    justify-content: flex-start !important;
    width: 100%;
    min-height: 48px !important;
    padding: 9px 14px 9px 11px !important;
    font-size: 15px !important;
    white-space: normal !important;
  }
}

/* Homepage special-feature dropdown: a distinct golden paper-cut crane. */
html[lang] header .nav .special-feature-nav .special-feature-nav-toggle {
  position: relative;
  isolation: isolate;
  gap: 7px !important;
  min-height: 45px !important;
  padding: 6px 12px 6px 8px !important;
  color: #203640 !important;
  border: 1px solid #b9842d !important;
  border-radius: 5px 14px 6px 12px !important;
  background:
    linear-gradient(145deg, rgba(255, 249, 222, .98), rgba(243, 218, 151, .98) 45%, rgba(211, 174, 91, .98) 74%, rgba(247, 228, 174, .98)) !important;
  box-shadow:
    3px 3px 0 rgba(159, 95, 77, .42),
    6px 6px 0 rgba(46, 70, 82, .12),
    0 10px 22px rgba(73, 53, 24, .15) !important;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif !important;
  font-weight: 900 !important;
  letter-spacing: .055em;
  white-space: nowrap !important;
}

html[lang] header .nav .special-feature-nav .special-feature-nav-toggle::before {
  content: "" !important;
  display: block !important;
  width: 37px !important;
  height: 29px !important;
  flex: 0 0 37px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("./art/golden-paper-crane.svg") center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(1px 2px 1px rgba(88, 54, 12, .25));
}

html[lang] header .nav .special-feature-nav .special-feature-nav-toggle::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #fff8d8 0 49%, #9f6820 50% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  opacity: .9;
  pointer-events: none;
}

html[lang] header .nav .special-feature-nav .special-feature-nav-toggle i {
  color: #775019;
  font-weight: 900;
}

html[lang] header .nav .special-feature-nav .special-feature-nav-toggle:hover,
html[lang] header .nav .special-feature-nav.is-open .special-feature-nav-toggle,
html[lang] header .nav .special-feature-nav .special-feature-nav-toggle:focus-visible {
  color: #162f3d !important;
  border-color: #a87022 !important;
  background: linear-gradient(145deg, #fff8d3, #eac76f 54%, #f6e2a7) !important;
  box-shadow:
    2px 2px 0 rgba(159, 95, 77, .46),
    5px 5px 0 rgba(46, 70, 82, .13),
    0 13px 26px rgba(73, 53, 24, .2) !important;
  transform: translateY(-2px) !important;
}

html[lang] header .nav .special-feature-nav-menu {
  left: auto;
  right: 0;
  width: min(570px, 88vw);
  padding: 10px;
  grid-template-columns: 1fr;
  border-color: rgba(185, 132, 45, .48);
  border-radius: 18px 6px 18px 18px;
  background:
    radial-gradient(circle at 93% 10%, rgba(214, 182, 108, .2), transparent 32%),
    rgba(255, 253, 247, .99);
  box-shadow:
    4px 4px 0 rgba(159, 95, 77, .2),
    0 25px 60px rgba(8, 35, 63, .22);
  transform: none;
}

.special-feature-menu-path {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 2px 4px 1px;
  color: #7d6c52;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.special-feature-menu-path i { color: #b9842d; font-style: normal; }
.special-feature-menu-path a {
  min-width: 0;
  padding: 0 !important;
  color: #173b4c !important;
  font-weight: 900;
  text-decoration: none;
}

.special-feature-case-group { position: relative; min-width: 0; }

.special-feature-case-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 68px;
  padding: 11px 15px;
  border: 1px solid rgba(185,132,45,.42);
  border-radius: 12px 4px 12px 12px;
  color: #173b4c;
  background: linear-gradient(135deg,#fff9e8,#f0eee5);
  box-shadow: 3px 3px 0 rgba(214,182,108,.24);
  cursor: pointer;
  text-align: left;
}
.special-feature-case-toggle span { display: grid; gap: 2px; min-width: 0; }
.special-feature-case-toggle small { color: #a06d20; font-size: 9px; font-weight: 950; letter-spacing: .16em; }
.special-feature-case-toggle strong { color: #173b4c; font-family: "Noto Serif TC","Noto Serif JP",Georgia,serif; font-size: 20px; line-height: 1.35; }
.special-feature-case-toggle i { color: #a87022; font-size: 24px; font-style: normal; transition: transform .2s ease; }
.special-feature-case-group.is-expanded .special-feature-case-toggle,
.special-feature-case-toggle:hover,
.special-feature-case-toggle:focus-visible { border-color: #b9842d; background: linear-gradient(135deg,#fff4cf,#eee9dc); }
.special-feature-case-group.is-expanded .special-feature-case-toggle i { transform: rotate(90deg); }

.special-feature-case-children {
  display: none;
  gap: 8px;
  margin-top: 8px;
  padding-left: 18px;
  border-left: 2px solid rgba(185,132,45,.46);
}
.special-feature-case-group.is-expanded .special-feature-case-children { display: grid; }

html[lang] header .nav .special-feature-nav-menu .special-feature-menu-prologue {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  min-width: 0;
  padding: 10px 13px !important;
  border: 1px solid rgba(185, 132, 45, .3);
  border-radius: 10px 3px 10px 10px;
  color: #203640 !important;
  background: rgba(255, 249, 229, .78) !important;
  text-decoration: none;
}

.special-feature-menu-prologue small { color: #a06d20; font-size: 9px; font-weight: 950; letter-spacing: .15em; }
.special-feature-menu-prologue strong { color: #173b4c; font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif; font-size: 16px; }
.special-feature-menu-prologue span { min-width: 0; color: #68767a; font-size: 11px; line-height: 1.55; }
.special-feature-menu-prologue b { grid-column: 3; grid-row: 1 / 3; color: #a87022; font-size: 18px; }
html[lang] header .nav .special-feature-nav-menu .special-feature-menu-prologue:hover,
html[lang] header .nav .special-feature-nav-menu .special-feature-menu-prologue:focus-visible { border-color: #b9842d; background: #fff8df !important; transform: translateY(-1px); }

.special-feature-prologue-group { min-width: 0; }
.special-feature-prologue-child {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transform: translateY(-5px);
  visibility: hidden;
  transition: grid-template-rows .28s ease, margin-top .28s ease, opacity .22s ease, transform .28s ease, visibility 0s linear .28s;
}
.special-feature-prologue-child > a { min-height: 0; overflow: hidden; }
.special-feature-prologue-group.is-expanded .special-feature-prologue-child {
  grid-template-rows: 1fr;
  margin-top: 9px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.special-feature-prologue-group.is-expanded .special-feature-menu-prologue b { transform: rotate(90deg); }
.special-feature-menu-prologue b { transition: transform .22s ease; }

@media (hover:hover) and (min-width:801px) {
  .special-feature-prologue-group:hover .special-feature-prologue-child,
  .special-feature-prologue-group:focus-within .special-feature-prologue-child {
    grid-template-rows: 1fr;
    margin-top: 9px;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }
  .special-feature-prologue-group:hover .special-feature-menu-prologue b,
  .special-feature-prologue-group:focus-within .special-feature-menu-prologue b { transform: rotate(90deg); }
}

html[lang="en"] .special-feature-menu-prologue strong,
html[lang="ja"] .special-feature-menu-prologue strong {
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html[lang] header .nav .special-feature-nav-menu::before {
  left: auto;
  right: 39px;
  border-color: rgba(185, 132, 45, .48) transparent transparent rgba(185, 132, 45, .48);
  background: #fffaf0;
  transform: rotate(45deg);
}

html[lang] header .nav .special-feature-nav-menu .special-feature-menu-card {
  display: grid !important;
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(185, 132, 45, .4);
  border-radius: 12px 3px 12px 12px;
  background:
    linear-gradient(135deg, rgba(255, 249, 229, .98), rgba(238, 239, 233, .96)) !important;
  box-shadow:
    3px 3px 0 rgba(214, 182, 108, .28),
    7px 7px 0 rgba(46, 70, 82, .08) !important;
  color: #203640 !important;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

html[lang] header .nav .special-feature-nav-menu .special-feature-menu-card:hover,
html[lang] header .nav .special-feature-nav-menu .special-feature-menu-card:focus-visible {
  border-color: #b9842d !important;
  background: linear-gradient(135deg, #fff8df, #f0eee5) !important;
  box-shadow:
    2px 2px 0 rgba(214, 182, 108, .35),
    6px 6px 0 rgba(46, 70, 82, .1),
    0 14px 28px rgba(46, 70, 82, .14) !important;
  transform: translateY(-2px) !important;
}

.special-feature-menu-art {
  display: block;
  min-height: 156px;
  overflow: hidden;
  background: #d9d7cc;
}

.special-feature-menu-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 156px;
  object-fit: cover;
  object-position: center 62%;
  filter: saturate(.82) contrast(1.02);
}

.special-feature-menu-copy {
  display: flex;
  min-width: 0;
  padding: 15px 17px 14px 0;
  flex-direction: column;
  justify-content: center;
}

.special-feature-menu-copy small {
  display: block;
  color: #a06d20;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .16em;
}

.special-feature-menu-copy strong {
  display: block;
  margin: 4px 0 5px;
  color: #173b4c;
  font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
  font-size: 20px;
  line-height: 1.35;
}

.special-feature-menu-copy > span {
  display: block;
  color: #68767a;
  font-size: 11px;
  line-height: 1.65;
}

.special-feature-menu-copy b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: #9f5f4d;
  font-size: 12px;
  font-weight: 900;
}

.special-feature-menu-copy em {
  color: #a87022;
  font-size: 17px;
  font-style: normal;
  line-height: 1;
}

/* The feature leads the homepage latest-news reel. */
.home-news-card.is-special-feature {
  position: relative;
  border-color: rgba(185, 132, 45, .55);
  border-radius: 5px 15px 7px 14px;
  background:
    radial-gradient(circle at 94% 8%, rgba(214, 182, 108, .24), transparent 31%),
    linear-gradient(145deg, rgba(255, 249, 230, .96), rgba(236, 239, 235, .96));
  box-shadow:
    3px 3px 0 rgba(214, 182, 108, .38),
    7px 7px 0 rgba(159, 95, 77, .17),
    0 16px 30px rgba(46, 70, 82, .12);
}

.home-news-card.is-special-feature:hover,
.home-news-card.is-special-feature:focus-visible {
  box-shadow:
    2px 2px 0 rgba(214, 182, 108, .42),
    6px 6px 0 rgba(159, 95, 77, .2),
    0 22px 38px rgba(46, 70, 82, .17);
}

.home-news-card.is-special-feature .home-news-card-media {
  background: #2e4652;
}

.home-news-card.is-special-feature .home-news-card-media img {
  object-position: center 62%;
  filter: saturate(.82) contrast(1.03);
}

.home-news-card.is-special-feature .home-news-card-media > span {
  color: #203640;
  border: 1px solid rgba(185, 132, 45, .62);
  border-radius: 3px 9px 4px 8px;
  background: linear-gradient(145deg, #fff4c3, #d6b66c 62%, #f3dc9d);
  box-shadow: 2px 2px 0 rgba(159, 95, 77, .35);
}

.home-news-card.is-special-feature .home-news-card-copy small {
  color: #9a6720;
}

.home-news-card.is-special-feature .home-news-card-copy strong {
  color: #1e4050;
}

@media (max-width: 1100px) {
  html[lang] header .nav .special-feature-nav .special-feature-nav-toggle {
    justify-content: flex-start !important;
    width: 100%;
    min-height: 49px !important;
    padding: 8px 13px 8px 10px !important;
    font-size: 15px !important;
    white-space: normal !important;
  }

  html[lang] header .nav .special-feature-nav .special-feature-nav-toggle i {
    margin-left: auto;
  }
}

@media (max-width: 800px) {
  html[lang] header .nav .special-feature-nav-menu {
    position: static;
    right: auto;
    width: 100% !important;
    margin: 5px 0 7px;
    padding: 7px;
    border-radius: 14px;
    box-shadow: 3px 3px 0 rgba(214, 182, 108, .2);
  }

  html[lang] header .nav .special-feature-nav-menu .special-feature-menu-card {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
  }

  .special-feature-case-toggle { min-height: 58px; padding: 9px 12px; }
  .special-feature-case-toggle strong { font-size: 18px; }
  .special-feature-case-children { padding-left: 11px; }

  .special-feature-menu-art,
  .special-feature-menu-art img {
    min-height: 142px;
  }

  .special-feature-menu-copy {
    padding: 12px 12px 12px 0;
  }

  .special-feature-menu-copy strong {
    font-size: 17px;
  }
}

@media (max-width: 420px) {
  html[lang] header .nav .special-feature-nav-menu .special-feature-menu-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }

  .special-feature-menu-copy > span {
    font-size: 10px;
  }
}

/* Final cascade overrides for the scroll-led Chapter 01 preview. */
.chapter-one-content{display:block!important;min-height:620vh;padding:0;overflow:clip;background:linear-gradient(180deg,#d8e0df,#eef0ea 22%,#d9d8cf 100%)}
.chapter-one-inner{position:relative;width:100%;max-width:none;min-height:620vh;margin:0;padding:0}
.chapter-one-header{padding:clamp(25px,4vw,48px);border:1px solid rgba(224,194,132,.5)}
.chapter-one-header h2{font-size:clamp(2.5rem,8vw,5.7rem)}
.chapter-coming-soon{display:block;min-height:62vh;margin:0 0 42vh;padding:clamp(34px,6vw,64px)}
@media(max-width:760px){.chapter-one-content,.chapter-one-inner{min-height:680vh}.chapter-coming-soon{margin-bottom:46vh}}
@media(prefers-reduced-motion:reduce){.chapter-one-content,.chapter-one-inner{min-height:auto}.chapter-coming-soon{min-height:0;margin-bottom:28px}}

/* =====================================================================
   2026-08-20 — Special Features: contained three-column navigator
   Kaikai Case, Social Observation and Prison Watch stay inside the
   Special Features dropdown. Mobile remains an accessible accordion.
   ===================================================================== */
html[lang] header .nav .special-feature-nav-menu{
  width:min(1080px,96vw);
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:12px;
  padding:13px;
}

/* Never expose the feature groups as top-level navigation. */
html[lang] header .nav .special-feature-nav:not(.is-open) > .special-feature-nav-menu{
  display:none!important;
}

html[lang] header .nav .special-feature-nav.is-open > .special-feature-nav-menu{
  display:grid;
}

.special-feature-menu-hint{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:4px 5px 8px;
  color:#6d746f;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.05em;
}
.special-feature-menu-hint span{
  color:#173b4c;
  font-family:"Noto Serif TC","Noto Serif JP",Georgia,serif;
  font-size:13px;
  font-weight:900;
}
.special-feature-menu-hint b{
  color:#906326;
  font-weight:800;
}

.special-feature-nav-menu .special-feature-case-group{
  display:grid;
  grid-template-rows:auto 1fr;
  height:100%;
  padding:7px;
  border:1px solid rgba(185,132,45,.24);
  border-radius:16px 5px 16px 16px;
  background:rgba(255,252,243,.66);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.special-feature-nav-menu .special-feature-case-children{
  display:none;
  align-content:start;
  gap:9px;
  margin-top:9px;
  padding:0;
  border-left:0;
}

.special-feature-nav-menu .special-feature-case-group.is-expanded .special-feature-case-children{
  display:grid;
}

.special-feature-nav-menu .special-feature-case-toggle{
  min-height:64px;
  cursor:pointer;
}
.special-feature-nav-menu .special-feature-case-toggle i{
  transform:none;
}
.special-feature-nav-menu .special-feature-case-group.is-expanded .special-feature-case-toggle i{
  transform:rotate(90deg);
}

.special-feature-nav-menu .special-feature-menu-card{
  grid-template-columns:116px minmax(0,1fr)!important;
  gap:13px!important;
}
.special-feature-nav-menu .special-feature-menu-art,
.special-feature-nav-menu .special-feature-menu-art img{
  min-height:146px;
}
.special-feature-nav-menu .special-feature-menu-copy{
  padding:13px 13px 13px 0;
}
.special-feature-nav-menu .special-feature-menu-copy strong{
  font-size:18px;
}

@media (hover:hover) and (min-width:1101px){
  .special-feature-nav-menu:has(.special-feature-case-group:hover) .special-feature-case-group:not(:hover){
    opacity:.68;
    transform:scale(.982);
  }
  .special-feature-nav-menu .special-feature-case-group:hover{
    z-index:2;
    border-color:rgba(185,132,45,.65);
    background:rgba(255,250,232,.98);
    box-shadow:0 17px 34px rgba(46,70,82,.14),3px 3px 0 rgba(214,182,108,.25);
    transform:translateY(-3px);
  }
  .special-feature-nav-menu .special-feature-case-group:hover .special-feature-case-toggle{
    border-color:#b9842d;
    background:linear-gradient(135deg,#fff4cf,#eee9dc);
  }
}

@media (min-width:801px) and (max-width:1100px){
  html[lang] header .nav .special-feature-nav-menu{
    position:static;
    right:auto;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%!important;
    margin:5px 0 7px;
    border-radius:14px;
    box-shadow:3px 3px 0 rgba(214,182,108,.2);
  }
  .special-feature-nav-menu .special-feature-case-children{
    display:none!important;
  }
  .special-feature-nav-menu .special-feature-case-group.is-expanded .special-feature-case-children{
    display:grid!important;
  }
}

@media (max-width:800px){
  html[lang] header .nav .special-feature-nav-menu{
    display:none;
    grid-template-columns:1fr;
    width:100%!important;
    gap:7px;
    padding:7px;
  }
  html[lang] header .nav .special-feature-nav.is-open .special-feature-nav-menu{
    display:grid;
  }
  .special-feature-menu-hint{
    display:block;
    padding:4px 6px 7px;
  }
  .special-feature-menu-hint span,
  .special-feature-menu-hint b{display:block}
  .special-feature-menu-hint b{margin-top:2px}
  .special-feature-nav-menu .special-feature-case-group{
    display:block;
    height:auto;
    padding:5px;
  }
  .special-feature-nav-menu .special-feature-case-toggle{
    min-height:58px;
    cursor:pointer;
  }
  .special-feature-nav-menu .special-feature-case-toggle i{
    transform:none;
  }
  .special-feature-nav-menu .special-feature-case-children{
    display:none;
    margin-top:7px;
    padding-left:10px;
    border-left:2px solid rgba(185,132,45,.46);
  }
  .special-feature-nav-menu .special-feature-case-group.is-expanded .special-feature-case-children{
    display:grid;
  }
  .special-feature-nav-menu .special-feature-case-group.is-expanded .special-feature-case-toggle i{
    transform:rotate(90deg);
  }
  .special-feature-nav-menu .special-feature-menu-card{
    grid-template-columns:108px minmax(0,1fr)!important;
  }
  .special-feature-prologue-child { padding-left: 9px; }
  html[lang="en"] .special-feature-menu-prologue,
  html[lang="ja"] .special-feature-menu-prologue { grid-template-columns: minmax(0,1fr) auto !important; }
  html[lang="en"] .special-feature-menu-prologue small,
  html[lang="ja"] .special-feature-menu-prologue small,
  html[lang="en"] .special-feature-menu-prologue span,
  html[lang="ja"] .special-feature-menu-prologue span { grid-column: 1; }
  html[lang="en"] .special-feature-menu-prologue strong,
  html[lang="ja"] .special-feature-menu-prologue strong { grid-column: 1; }
  html[lang="en"] .special-feature-menu-prologue b,
  html[lang="ja"] .special-feature-menu-prologue b { grid-column: 2; grid-row: 1 / 4; }
}

@media (max-width:420px){
  .special-feature-nav-menu .special-feature-menu-card{
    grid-template-columns:88px minmax(0,1fr)!important;
  }
}