:root{
  --ink:#25302c;--ink-soft:#4b5853;--paper:#f5f0e6;--paper-deep:#e8dfcf;
  --wash:#d8e0d7;--wash-blue:#d9e1e1;--red:#8b3d37;--red-soft:#c99b90;
  --gold:#a48756;--line:#b9b5ab;--card:#fffdf8;--progress:0%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Serif TC","Noto Serif SC","Noto Serif JP",Georgia,serif;line-height:1.8;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.22;background-image:radial-gradient(circle at 20% 18%,rgba(255,255,255,.72) 0 1px,transparent 1.5px),radial-gradient(circle at 76% 63%,rgba(37,48,44,.13) 0 .7px,transparent 1.2px);background-size:19px 23px,29px 31px;mix-blend-mode:multiply}
body::after{content:"";position:fixed;left:0;top:0;z-index:100;width:var(--progress);height:3px;background:linear-gradient(90deg,var(--red),var(--gold));pointer-events:none}
a{transition:color .25s ease,border-color .25s ease,background-color .25s ease,transform .25s ease}
.wrap{width:min(980px,calc(100% - 40px));margin:auto;position:relative;z-index:2}
.top{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(185,181,171,.75);background:rgba(251,248,241,.9);backdrop-filter:blur(14px)}
.top .wrap{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:14px 0}
.brand{font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:.04em}
.brand::before{content:"◉";display:inline-block;color:var(--red);margin-right:.5rem;transition:transform .35s ease}
.brand:hover::before{transform:rotate(90deg)}
.langs{display:flex;gap:.4rem;flex-wrap:wrap}.langs a{border:1px solid var(--line);border-radius:999px;color:var(--ink);padding:2px 11px;text-decoration:none;font:600 .82rem/1.8 system-ui,sans-serif;background:rgba(255,253,248,.7)}
.langs a:hover,.langs a:focus-visible{border-color:var(--red);color:var(--red);transform:translateY(-1px)}.langs a[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero{position:relative;min-height:88svh;padding:clamp(76px,12vh,130px) 0 78px;display:grid;align-items:center;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#dfe7dc 0%,#f5f0e6 58%,#eee1d5 100%)}
.hero::before{content:"";position:absolute;inset:-12%;z-index:-3;background:radial-gradient(circle at 70% 28%,rgba(255,253,248,.95),transparent 26%),radial-gradient(circle at 18% 72%,rgba(139,61,55,.12),transparent 27%),linear-gradient(125deg,transparent 0 46%,rgba(255,255,255,.35) 47% 49%,transparent 50%);animation:paper-breathe 9s ease-in-out infinite alternate}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.52fr);align-items:center;gap:clamp(28px,5vw,72px)}.hero .wrap>*{grid-column:1}
.eyebrow{font:800 .76rem/1.4 system-ui,sans-serif;letter-spacing:.17em;color:var(--red);text-transform:uppercase}
h1{font-size:clamp(2.55rem,7vw,5.35rem);line-height:1.08;letter-spacing:.025em;margin:.42rem 0 1.3rem;text-wrap:balance}h2{font-size:clamp(1.55rem,4vw,2.65rem);line-height:1.3;margin:0 0 1rem;text-wrap:balance}
.lead{font-size:clamp(1.02rem,2.2vw,1.25rem);max-width:44rem;color:var(--ink-soft)}.notice{border:0;border-left:4px solid var(--red);padding:1rem 1.25rem;background:rgba(255,250,240,.82);margin-top:2rem;max-width:43rem}
.case-opening-stage{position:absolute;z-index:0;right:max(3vw,24px);top:50%;width:min(39vw,470px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;opacity:.96}
.motion-halo{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(255,253,248,.94) 0 17%,rgba(216,224,215,.76) 18% 39%,transparent 40%),conic-gradient(from 20deg,rgba(139,61,55,.14),transparent 23%,rgba(164,135,86,.2) 44%,transparent 66%,rgba(49,90,99,.12));border:1px solid rgba(139,61,55,.28)}
.motion-ring{position:absolute;border:1px solid rgba(37,48,44,.24);border-radius:50%}.motion-ring.r1{inset:2%}.motion-ring.r2{inset:17%;border-style:dashed}.motion-ring.r3{inset:31%;border-color:rgba(139,61,55,.48)}
.motion-seal{position:absolute;left:50%;top:50%;width:88px;aspect-ratio:1;display:grid;place-items:center;transform:translate(-50%,-50%) rotate(-5deg);border:2px solid var(--red);color:var(--red);background:rgba(245,240,230,.88);font:800 .76rem/1.35 system-ui,sans-serif;letter-spacing:.14em;text-align:center}
.motion-token{position:absolute;width:36px;aspect-ratio:1;border:1px solid rgba(37,48,44,.38);background:rgba(255,253,248,.9);transform:rotate(45deg)}.motion-token::after{content:"";position:absolute;inset:8px;border:1px solid rgba(139,61,55,.42);border-radius:50%}
.motion-token.t1{left:8%;top:21%}.motion-token.t2{right:5%;top:31%}.motion-token.t3{left:18%;bottom:8%}.motion-token.t4{right:21%;bottom:4%}.motion-token.t5{left:43%;top:3%;width:28px}
.memory-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.memory-thread path{fill:none;stroke:var(--red);stroke-width:1.3;stroke-linecap:round;opacity:.55}
body:not(.gsap-ready) .motion-ring.r1{animation:motion-spin 34s linear infinite}body:not(.gsap-ready) .motion-ring.r2{animation:motion-spin-reverse 24s linear infinite}body:not(.gsap-ready) .motion-ring.r3{animation:motion-spin 18s linear infinite}
body:not(.gsap-ready) .motion-token{animation:motion-float 3.4s ease-in-out infinite alternate}body:not(.gsap-ready) .motion-token.t2,body:not(.gsap-ready) .motion-token.t4{animation-direction:alternate-reverse;animation-duration:4.1s}
.case-scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;color:var(--ink-soft);font:700 .69rem/1 system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase}.case-scroll-cue::before{content:"";display:block;width:1px;height:34px;background:linear-gradient(var(--red),transparent);animation:scroll-line 1.8s ease-in-out infinite}
.case-motion-rail{position:fixed;right:18px;top:50%;z-index:45;display:flex;flex-direction:column;gap:10px;transform:translateY(-50%)}.case-motion-rail a{position:relative;width:10px;height:10px;border:1px solid rgba(37,48,44,.5);border-radius:50%;background:rgba(245,240,230,.9);text-decoration:none}.case-motion-rail a::before{content:attr(aria-label);position:absolute;right:18px;top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;color:var(--ink);background:rgba(255,253,248,.94);border:1px solid var(--line);padding:2px 8px;font:700 .69rem/1.6 system-ui,sans-serif;opacity:0;pointer-events:none;transition:.25s ease}.case-motion-rail a:hover::before,.case-motion-rail a:focus-visible::before{opacity:1;transform:translateY(-50%) translateX(0)}.case-motion-rail a.is-active{background:var(--red);border-color:var(--red);transform:scale(1.24)}
.section{position:relative;padding:clamp(58px,9vw,104px) 0;border-top:1px solid var(--line);overflow:hidden}.section:nth-of-type(2){background:linear-gradient(180deg,rgba(255,253,248,.8),rgba(232,223,207,.4))}.section:nth-of-type(3){background:linear-gradient(135deg,rgba(216,224,215,.55),rgba(245,240,230,.82))}.section:nth-of-type(3)::before{content:"“";position:absolute;left:max(4vw,20px);top:6px;font-size:clamp(8rem,22vw,18rem);line-height:1;color:rgba(139,61,55,.08);font-family:Georgia,serif}.section:nth-of-type(4){background:rgba(255,253,248,.75)}.section .wrap>p:not(.eyebrow){max-width:49rem;font-size:1.04rem;color:var(--ink-soft)}
.grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:22px}.case-timeline-line{position:absolute;left:9%;right:9%;top:0;height:44px;pointer-events:none}.case-timeline-line path{fill:none;stroke:var(--red);stroke-width:1.4;stroke-linecap:round}
.card{position:relative;background:rgba(255,253,248,.9);border:1px solid #d6cebe;padding:24px 22px;min-height:190px;transition:transform .35s ease,border-color .35s ease,background-color .35s ease}.card::before{content:attr(data-step);position:absolute;right:15px;top:12px;color:rgba(139,61,55,.18);font:800 2.5rem/1 system-ui,sans-serif}.card::after{content:"";position:absolute;left:22px;right:22px;bottom:18px;height:1px;background:linear-gradient(90deg,var(--red),transparent);transform:scaleX(.2);transform-origin:left;opacity:.45;transition:transform .45s ease}.card:hover{transform:translateY(-5px);border-color:var(--red);background:#fffdf8}.card:hover::after{transform:scaleX(1)}.card time{display:block;color:var(--red);font-weight:800;font-family:system-ui,sans-serif;font-size:.86rem;letter-spacing:.04em}
.sources{display:grid;gap:12px;padding:0;list-style:none;max-width:52rem}.sources li{position:relative;border-bottom:1px solid #d6cebe;padding:.85rem .2rem .85rem 2.2rem}.sources li::before{content:"↗";position:absolute;left:.2rem;top:.82rem;color:var(--red);font-family:system-ui,sans-serif}.sources a{color:#315a63;text-underline-offset:4px;text-decoration-thickness:1px}.sources a:hover{color:var(--red)}
.foot{padding:38px 0 52px;color:#57615d;font-size:.9rem;border-top:1px solid var(--line);background:var(--paper-deep)}.home{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;color:var(--ink);font-weight:800;text-decoration:none;border-bottom:1px solid var(--ink)}.home:hover{color:var(--red);border-color:var(--red);transform:translateX(-3px)}.js-motion-reveal{will-change:transform,opacity}
@keyframes paper-breathe{to{transform:scale(1.035) translate3d(1.2%,-.8%,0)}}@keyframes scroll-line{0%,100%{transform:scaleY(.2);transform-origin:top;opacity:.35}50%{transform:scaleY(1);opacity:1}}@keyframes motion-spin{to{transform:rotate(360deg)}}@keyframes motion-spin-reverse{to{transform:rotate(-360deg)}}@keyframes motion-float{to{translate:0 -9px;rotate:4deg}}
@media(max-width:860px){.hero{min-height:auto}.hero .wrap{grid-template-columns:1fr;padding-right:min(28vw,150px)}.case-opening-stage{right:-12%;width:min(54vw,360px);opacity:.62}.grid{grid-template-columns:1fr}.case-timeline-line{left:8px;right:auto;top:22px;bottom:22px;width:36px;height:auto}.card{margin-left:26px;min-height:0}.case-motion-rail{display:none}}
@media(max-width:640px){.wrap{width:min(100% - 30px,980px)}.top .wrap{align-items:flex-start;flex-direction:column}.top{position:relative}.hero{padding:58px 0 72px}.hero .wrap{padding-right:0}.hero h1{max-width:88%}.lead{max-width:92%}.case-opening-stage{right:-28%;top:37%;width:76vw;opacity:.32}.motion-seal{width:68px}.motion-token{width:27px}.section{padding:52px 0}.card{padding:21px 19px}.notice{background:rgba(255,250,240,.9)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.case-opening-stage{transform:translateY(-50%)!important}.js-motion-reveal{opacity:1!important;transform:none!important}}


/* Restored theatre prologue: preserves the case content and existing GSAP timeline. */
.case-prologue{position:fixed;inset:0;z-index:500;display:grid;place-items:stretch;overflow:hidden;background:#081c20;color:#f3d887;isolation:isolate}.case-prologue-stage{position:relative;min-height:100svh;background:radial-gradient(ellipse at 50% 110%,rgba(51,107,103,.32),transparent 44%),linear-gradient(180deg,#0a2428 0%,#06171c 100%);box-shadow:inset 0 0 0 12px #6a1e2a}.prologue-valance,.prologue-side,.prologue-curtain-panel{position:absolute;display:block}.prologue-valance{z-index:3;left:0;right:0;top:0;height:clamp(72px,15vh,142px);border-bottom:8px solid #b99031;background:repeating-linear-gradient(90deg,#d5b34d 0 10px,#7e5b17 10px 17px,#f1d978 17px 22px,#9e741e 22px 30px);box-shadow:0 5px 0 #6f1b27,0 13px 24px rgba(0,0,0,.44)}.prologue-side{z-index:4;top:0;bottom:0;width:clamp(24px,6.4vw,78px);border-color:#f0d574;border-style:solid;background:repeating-linear-gradient(90deg,#d7b54e 0 8px,#765316 8px 13px,#f4dd81 13px 17px,#92691c 17px 24px);box-shadow:inset 0 0 0 4px #6e1b28,0 0 24px rgba(0,0,0,.45)}.prologue-side.left{left:0;border-width:0 7px 0 0}.prologue-side.right{right:0;border-width:0 0 0 7px}.prologue-curtain-panel{z-index:2;top:clamp(66px,13vh,132px);bottom:0;width:50.3%;background:repeating-linear-gradient(90deg,#601d2a 0 11px,#8d3340 11px 21px,#531924 21px 29px,#9d3a45 29px 36px);box-shadow:inset -15px 0 22px rgba(32,0,5,.45),inset 0 0 0 2px rgba(41,5,10,.52);transition:transform 920ms cubic-bezier(.68,0,.18,1)}.prologue-curtain-panel.left{left:0;transform-origin:left center}.prologue-curtain-panel.right{right:0;transform-origin:right center;box-shadow:inset 15px 0 22px rgba(32,0,5,.45),inset 0 0 0 2px rgba(41,5,10,.52)}.case-prologue.is-opening .prologue-curtain-panel.left{transform:translateX(-103%) skewY(-1.4deg)}.case-prologue.is-opening .prologue-curtain-panel.right{transform:translateX(103%) skewY(1.4deg)}.case-prologue-skip{position:absolute;z-index:6;right:clamp(20px,5vw,68px);bottom:clamp(24px,6vh,56px);padding:.72rem 1rem;border:1px solid rgba(243,216,135,.72);border-radius:999px;background:rgba(8,28,32,.6);color:#f4db82;font:700 .83rem/1 system-ui,sans-serif;letter-spacing:.08em;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.32)}.case-prologue-skip:hover,.case-prologue-skip:focus-visible{background:#f4db82;color:#531924;outline:2px solid #fff7c9;outline-offset:3px}body.case-prologue-active{overflow:hidden}@media(max-width:640px){.prologue-valance{height:98px;border-bottom-width:6px}.prologue-curtain-panel{top:90px}.prologue-side{width:31px}.case-prologue-skip{right:22px;bottom:31px}}@media(prefers-reduced-motion:reduce){.case-prologue{display:none}}
