/* ==========================================================================
   FAITH · 3D BIBLE   (hidden chapter)
   Pure CSS 3D. Sizes derive from --u (set by JS) so the whole book scales as one.
   ========================================================================== */
:root{
 --serif:Georgia,"Songti SC","STSong","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC","SimSun","Yu Mincho",serif;
 --sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans","Microsoft YaHei",sans-serif;
 --ink:#3b2a1a;--gold:#e6c077;--gold-d:#a77a2c;--night:#07080d;
 --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='3'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .30  0 0 0 0 .14  0 0 0 .26 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
 --leather-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' result='n'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='1.5'><feDistantLight azimuth='225' elevation='60'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
 --paper-bg:var(--grain),radial-gradient(120% 100% at 50% 38%,#f4e9cf 0,#ecdfc0 62%,#dcc99b 100%);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0a1030;color:#eadfc8;overflow:hidden;font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.bible-page :focus-visible{outline:2px solid rgba(255,214,140,.9);outline-offset:3px}

/* ---------- stage, halo, dust ---------- */
.stage{
 position:fixed;inset:0;overflow:hidden;
 --u:12px;--W:calc(var(--u)*30);--H:calc(var(--u)*42);--D:calc(var(--u)*7);--t:calc(var(--u)*.38);--sq:calc(var(--u)*.34);
 --Db:calc(var(--D) - var(--t)*2);--Wb:calc(var(--W) - var(--sq));--Hb:calc(var(--H) - var(--sq)*2);--zf:calc(var(--D)/2 - var(--t));
 --zL:calc(var(--D)/-2 + var(--t) + 3px);
 --ry:0;--rx:-12;--flt:0px;--cover:0;--cdrop:0;--leaf:0;--ldrop:0;--leafsh:0;--tx:0px;--ty:0px;--sc:1;--glow:.55;--gl:0;
 background:linear-gradient(180deg,#2c6dd1 0%,#5a9fec 32%,#9fcdf6 62%,#d9eeff 88%,#fff4e2 100%);
}
.halo{position:absolute;inset:0;pointer-events:none;opacity:calc(.25 + var(--glow)*.75)}
.halo-glow{position:absolute;left:50%;top:46%;width:min(150vmin,1500px);height:min(150vmin,1500px);transform:translate(-50%,-50%);border-radius:50%;
 background:radial-gradient(circle,rgba(255,220,150,.62) 0,rgba(240,176,88,.34) 13%,rgba(214,140,70,.16) 27%,rgba(120,80,150,.08) 44%,transparent 62%);animation:breathe 7s ease-in-out infinite}
.halo-rays{position:absolute;left:50%;top:46%;width:min(190vmin,1900px);height:min(190vmin,1900px);transform:translate(-50%,-50%);border-radius:50%;opacity:.8;
 background:repeating-conic-gradient(from 0deg,rgba(255,226,170,0) 0 6deg,rgba(255,230,176,.2) 8.5deg,rgba(255,226,170,0) 11deg 20deg);
 -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);animation:spin 90s linear infinite}
.dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.07);opacity:.82}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- 3D rig ---------- */
.scene{position:absolute;inset:0;perspective:calc(var(--u)*(190 + 4200*var(--cdrop)));perspective-origin:50% 46%}   /* flattens as the book opens, so the two pages stay the same height */
.rig{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;
 transform:translate3d(var(--tx),var(--ty),0) scale(var(--sc))}
.bob{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
 transform:translateY(var(--flt)) rotateX(calc(var(--rx)*1deg)) rotateY(calc(var(--ry)*1deg))}
.book{position:absolute;left:calc(var(--W)/-2);top:calc(var(--H)/-2);width:var(--W);height:var(--H);transform-style:preserve-3d;cursor:pointer;outline:none}
body:not([data-state=idle]) .book{cursor:default}
.ground-shadow{position:absolute;left:calc(var(--W)*-.55 + var(--cover)*var(--W)*-.5);top:calc(var(--H)/2 + var(--u)*3.2);
 width:calc(var(--W)*(1.1 + var(--cover)*.95));height:calc(var(--u)*3.2);border-radius:50%;
 background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);filter:blur(calc(var(--u)*.5));opacity:calc(.75 - var(--flt-n,0)*0);transform:translateZ(0)}

/* ---------- generic faces ---------- */
.face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--sh,0);pointer-events:none;border-radius:inherit}

/* leather */
.leather,.back-out,.cover-out,.sp-seg,.edge-strip{
 background-color:#4a2a17;
 background-image:var(--leather-grain),radial-gradient(120% 90% at 28% 18%,rgba(255,196,130,.22),transparent 58%),linear-gradient(135deg,#6a3a1f,#472612 55%,#2e180c);
 background-blend-mode:soft-light,normal,normal}
.back-out{left:0;top:0;width:var(--W);height:var(--H);transform:translateZ(calc(var(--D)/-2)) rotateY(180deg);--sh:var(--sh-back);border-radius:calc(var(--u)*.35)}
.back-in{position:absolute;backface-visibility:hidden;left:0;top:0;width:var(--W);height:var(--H);transform:translateZ(calc(var(--D)/-2 + var(--t)));background:#c9b78d;border-radius:calc(var(--u)*.3)}
.edge-strip{position:absolute;backface-visibility:hidden;--sh:var(--sh-back)}
.es-b-right{left:calc(var(--W) - var(--t)/2);top:0;width:var(--t);height:var(--H);transform:translateZ(calc(var(--D)/-2 + var(--t)/2)) rotateY(90deg)}
.es-b-top{left:0;top:calc(var(--t)/-2);width:var(--W);height:var(--t);transform:translateZ(calc(var(--D)/-2 + var(--t)/2)) rotateX(90deg)}
.es-b-bottom{left:0;top:calc(var(--H) - var(--t)/2);width:var(--W);height:var(--t);transform:translateZ(calc(var(--D)/-2 + var(--t)/2)) rotateX(-90deg)}
.es-c-right{left:calc(var(--W) - var(--t)/2);top:0;width:var(--t);height:var(--H);transform:translateZ(calc(var(--t)/-2)) rotateY(90deg)}
.es-c-top{left:0;top:calc(var(--t)/-2);width:var(--W);height:var(--t);transform:translateZ(calc(var(--t)/-2)) rotateX(90deg)}
.es-c-bottom{left:0;top:calc(var(--H) - var(--t)/2);width:var(--W);height:var(--t);transform:translateZ(calc(var(--t)/-2)) rotateX(-90deg)}

/* spine */
.spine{position:absolute;left:0;top:0;width:0;height:var(--H);transform-style:preserve-3d}
.sp-seg{position:absolute;top:0;height:var(--H);backface-visibility:hidden}
.sp-seg::before{content:'';position:absolute;inset:0;
 background:
  linear-gradient(#0000 0 5.2%,#e2bd6e 5.2% 5.7%,#0000 5.7% 6.6%,#e2bd6e 6.6% 6.9%,#0000 6.9% 100%),
  linear-gradient(#0000 0 93.1%,#e2bd6e 93.1% 93.4%,#0000 93.4% 94.3%,#e2bd6e 94.3% 94.8%,#0000 94.8% 100%),
  linear-gradient(#0000 0 24.5%,#d8b266 24.5% 25.3%,#0000 25.3% 74.7%,#d8b266 74.7% 75.5%,#0000 75.5% 100%);opacity:.9}
.sp-seg::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--shs,0)}
.spine-title{position:absolute;left:calc(var(--u)*-1.5);top:0;width:calc(var(--u)*3);height:var(--H);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2.4);
 transform:translateX(calc(var(--u)*-.6)) rotateY(-90deg);backface-visibility:hidden;writing-mode:vertical-rl;
 font:600 calc(var(--u)*1.25)/1 var(--serif);letter-spacing:.42em;color:#ecc979;text-shadow:0 0 calc(var(--u)*.5) rgba(255,205,120,.55);pointer-events:none}
.spine-title i{font-style:normal;font-size:.8em;letter-spacing:.3em}

/* gold-edged pages */
.gold{--gd:90deg;--dir:90deg;
 background:
  linear-gradient(105deg,transparent 38%,rgba(255,255,255,.62) 50%,transparent 62%) calc(var(--gl)*1%) 0/320% 100%,
  repeating-linear-gradient(var(--dir),rgba(104,66,14,.42) 0 .6px,transparent .6px calc(var(--u)*.17)),
  linear-gradient(var(--gd),#8a6626 0%,#e8c775 16%,#fff0b6 32%,#c8963a 50%,#f1d283 68%,#b58630 84%,#7c5a1c 100%)}
.fore{left:calc(var(--W) - var(--sq) - var(--Db)/2);top:var(--sq);width:var(--Db);height:var(--Hb);transform:rotateY(90deg);--sh:var(--sh-fore)}
.topedge{left:0;top:calc(var(--sq) - var(--Db)/2);width:var(--Wb);height:var(--Db);transform:rotateX(90deg);--dir:0deg;--gd:0deg;--sh:var(--sh-top)}
.botedge{left:0;top:calc(var(--H) - var(--sq) - var(--Db)/2);width:var(--Wb);height:var(--Db);transform:rotateX(-90deg);--dir:0deg;--gd:0deg;--sh:var(--sh-bot)}

/* ---------- paper pages ---------- */
.page{background:var(--paper-bg);color:var(--ink);font-size:var(--u);--sh:var(--sh-page)}
.page::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit}
.pg-right::before{background:linear-gradient(90deg,rgba(74,42,12,.42),rgba(74,42,12,.13) 6%,transparent 17%),linear-gradient(270deg,rgba(74,42,12,.16),transparent 4%)}
.pg-left::before{background:linear-gradient(270deg,rgba(74,42,12,.42),rgba(74,42,12,.13) 6%,transparent 17%),linear-gradient(90deg,rgba(74,42,12,.16),transparent 4%)}
.pg-inner{position:absolute;inset:0;padding:calc(var(--u)*2.6) calc(var(--u)*2.4);z-index:1}
.under{left:0;top:var(--sq);width:var(--Wb);height:var(--Hb);transform:translateZ(var(--zf));container-type:size}
.swapped #under-content{visibility:hidden}
.leaf{position:absolute;left:0;top:var(--sq);width:var(--Wb);height:var(--Hb);transform-style:preserve-3d;transform-origin:0 50%;
 transform:translateZ(calc(var(--zf) + 2px + (var(--zL) - var(--zf))*var(--ldrop))) rotateY(calc(var(--leaf)*-180deg))}
.leaf-front,.leaf-back{left:0;top:0;width:100%;height:100%;--sh:calc(var(--sh-page) + var(--leafsh))}
.leaf-front{transform:translateZ(.6px)}
.leaf-back{transform:rotateY(180deg) translateZ(.6px)}

/* hinge + front cover */
.hinge{position:absolute;left:0;top:0;width:var(--W);height:var(--H);transform-style:preserve-3d;transform-origin:0 50%;
 transform:translateZ(calc(var(--D)/2 - var(--cdrop)*var(--D))) rotateY(calc(var(--cover)*-180deg))}
.cover{position:absolute;inset:0;transform-style:preserve-3d}
.cover-out{left:0;top:0;width:var(--W);height:var(--H);overflow:hidden;border-radius:calc(var(--u)*.35);--sh:var(--sh-front);
 box-shadow:inset 0 0 calc(var(--u)*2) rgba(0,0,0,.45),inset calc(var(--u)*.55) 0 calc(var(--u)*.4) rgba(0,0,0,.35)}
.cover-in{left:0;top:0;width:var(--W);height:var(--H);transform:translateZ(calc(var(--t)*-1)) rotateY(180deg);border-radius:calc(var(--u)*.3);
 background:radial-gradient(circle at 50% 50%,rgba(167,122,44,.10) 0 .7px,transparent 1.1px) 0 0/calc(var(--u)*1.1) calc(var(--u)*1.1),var(--paper-bg);background-color:#e3d2a6}
.cover-frame{position:absolute;inset:calc(var(--u)*1.7);border:1px solid rgba(238,201,125,.9);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.28);pointer-events:none}
.cover-frame.f2{inset:calc(var(--u)*2.15);border-width:.5px;opacity:.65}
.corner{position:absolute;width:calc(var(--u)*3.4);height:calc(var(--u)*3.4);color:#e6c077;opacity:.9;filter:drop-shadow(0 1px 0 rgba(0,0,0,.5))}
.c-tl{left:calc(var(--u)*1.2);top:calc(var(--u)*1.2)}.c-tr{right:calc(var(--u)*1.2);top:calc(var(--u)*1.2);transform:scaleX(-1)}
.c-bl{left:calc(var(--u)*1.2);bottom:calc(var(--u)*1.2);transform:scaleY(-1)}.c-br{right:calc(var(--u)*1.2);bottom:calc(var(--u)*1.2);transform:scale(-1)}
.cover-top,.cover-bot{position:absolute;left:0;right:0;text-align:center;font:600 calc(var(--u)*1.3)/1 var(--serif);letter-spacing:.7em;padding-left:.7em;
 background:linear-gradient(180deg,#fff2c4,#d9ac52 55%,#a87a2a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 rgba(0,0,0,.65))}
.cover-top{top:calc(var(--u)*5.6)}.cover-bot{bottom:calc(var(--u)*5.4);letter-spacing:.9em;padding-left:.9em;font-size:calc(var(--u)*1.55)}
.cross-bloom{position:absolute;left:50%;top:50%;width:calc(var(--u)*24);height:calc(var(--u)*24);transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(circle,rgba(255,224,160,.55),rgba(255,180,80,.16) 38%,transparent 66%);animation:crossPulse 4.4s ease-in-out infinite}
.cross{position:absolute;left:50%;top:50%;width:calc(var(--u)*6.4);height:calc(var(--u)*9.6);transform:translate(-50%,-50%);overflow:visible;
 filter:drop-shadow(0 0 calc(var(--u)*.35) rgba(255,228,160,.95)) drop-shadow(0 0 calc(var(--u)*1.5) rgba(255,186,84,.8));animation:crossPulse 4.4s ease-in-out infinite}
@keyframes crossPulse{0%,100%{opacity:.82}50%{opacity:1}}

/* endpaper (inside cover = left page on first open) */
.endpaper{display:grid;place-content:center;justify-items:center;text-align:center;gap:calc(var(--u)*1.5)}
.endpaper .corner{color:#a77a2c;opacity:.55;filter:none}
.ep-kicker{margin:0;font:600 .62em/1 var(--sans);letter-spacing:.55em;padding-left:.55em;color:#7b5a22}
.ep-verse{margin:0;font:500 1.2em/2.15 var(--serif);letter-spacing:.12em;color:#4a3320;white-space:nowrap}
.ep-ref{margin:0;font:italic .85em var(--serif);letter-spacing:.2em;color:#8a6420}
.orn-div{width:calc(var(--u)*10);height:auto;color:#a77a2c;display:block}

/* contents page */
.toc{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:calc(var(--u)*3.2)}
.toc-kicker{margin:0;font:600 .6em/1 var(--sans);letter-spacing:.6em;padding-left:.6em;color:#7b5a22;opacity:.8}
.toc-title{margin:.55em 0 .45em;font:600 2.1em/1.2 var(--serif);letter-spacing:.55em;padding-left:.55em}
.toc-list{list-style:none;margin:1.5em 0 0;padding:0;width:100%;display:grid;gap:.15em}
.toc-item{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:baseline;gap:1em;width:100%;padding:.95em .6em;cursor:pointer;text-align:left;border-bottom:1px solid rgba(90,60,25,.16);border-radius:.3em;transition:background .5s}
.toc-item::before{content:'';position:absolute;inset:-.2em -.4em;border-radius:.6em;z-index:-1;background:radial-gradient(ellipse at 20% 50%,rgba(255,214,120,.45),transparent 72%);opacity:0;transition:opacity .45s}
.toc-item::after{content:'';position:absolute;left:3.7em;right:.6em;bottom:-1px;height:1.5px;background:linear-gradient(90deg,#d49a2c,#fff0b8 50%,#d49a2c);box-shadow:0 0 .7em rgba(240,170,50,.95);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.toc-item:hover::before,.toc-item:focus-visible::before{opacity:1}
.toc-item:hover::after,.toc-item:focus-visible::after{transform:scaleX(1)}
.toc-item .num{flex:none;width:2.5em;text-align:right;font:italic 600 1.3em/1 var(--serif);color:#a77a2c;transition:text-shadow .4s,color .4s}
.toc-item b{display:block;font:600 1.2em/1.35 var(--serif);letter-spacing:.09em;transition:color .4s,text-shadow .4s}
.toc-item em{display:block;margin-top:.3em;font:italic .82em/1.4 var(--serif);letter-spacing:.14em;opacity:.66}
.toc-item:hover b,.toc-item:focus-visible b{color:#7a4a08;text-shadow:0 0 .9em rgba(244,184,64,.85)}
.toc-item:hover .num,.toc-item:focus-visible .num{color:#c27a10;text-shadow:0 0 .8em rgba(244,184,64,.95)}
.toc-foot{margin:auto 0 0;font:italic .85em var(--serif);letter-spacing:.25em;color:#7b5a22;opacity:.75}

/* chapter title page (inside the book, inside the sheet, inside the detail hero) */
.tp{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:2.4cqmin;padding:0 6cqmin;color:inherit}
.tp-kicker{margin:0;font:600 1.5cqmin/1 var(--sans);letter-spacing:.5em;padding-left:.5em;opacity:.62}
.tp-title{margin:0;font:600 7.4cqmin/1.25 var(--serif);letter-spacing:.14em;padding-left:.14em}
.tp .orn-div{width:34cqmin;color:currentColor;opacity:.62}
.tp-sub{margin:0;font:400 2.5cqmin/1.6 var(--serif);letter-spacing:.22em;padding-left:.22em;opacity:.78}
/* left page of a chapter spread */
.lb{height:100%;display:grid;place-content:center;justify-items:center;text-align:center;gap:calc(var(--u)*1.6)}
.lb-num{font:italic 300 9.5em/.9 var(--serif);color:rgba(167,122,44,.5)}
.lb-verse{margin:0;font:500 1.12em/2.15 var(--serif);letter-spacing:.1em;color:#4a3320;white-space:nowrap}
.lb-ref{margin:0;font:italic .85em var(--serif);letter-spacing:.2em;color:#8a6420}

/* ---------- chrome ---------- */
.hint{position:absolute;left:0;right:0;bottom:8vh;margin:0;text-align:center;font:400 13px/1 var(--sans);letter-spacing:.55em;padding-left:.55em;color:rgba(240,222,176,.8);pointer-events:none;animation:hint 3.8s ease-in-out infinite;transition:opacity .7s}
@keyframes hint{50%{opacity:.35}}
body:not([data-state=idle]) .hint{opacity:0;animation:none}
.exit-link{position:absolute;left:max(16px,2.2vw);top:max(14px,2.2vh);font:400 12px/1 var(--sans);letter-spacing:.25em;color:rgba(240,222,176,.42);text-decoration:none;padding:10px 4px;transition:color .3s,opacity .5s;z-index:5}
.exit-link:hover{color:rgba(255,232,180,.95)}
body[data-state=zooming] .exit-link,body[data-state=detail] .exit-link,body[data-state=returning] .exit-link{opacity:0;pointer-events:none}
.close-book{position:absolute;left:50%;bottom:max(18px,3.6vh);transform:translateX(-50%);padding:.8em 1.7em;border:1px solid rgba(230,192,119,.35);border-radius:999px;background:rgba(20,14,8,.45);backdrop-filter:blur(8px);cursor:pointer;
 font:400 13px/1 var(--sans);letter-spacing:.4em;padding-left:2.1em;color:rgba(240,222,176,.85);opacity:0;pointer-events:none;transition:opacity .6s,box-shadow .3s,border-color .3s;z-index:5}
body[data-state=opened] .close-book{opacity:1;pointer-events:auto}
.close-book:hover{border-color:rgba(255,222,150,.8);box-shadow:0 0 24px rgba(255,200,110,.35)}

/* ---------- transitional sheet ---------- */
.sheet{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:40;pointer-events:none;opacity:0;overflow:hidden;container-type:size;background-color:#22498a;color:var(--ink);transition:opacity .12s linear;box-shadow:0 0 calc(var(--u,12px)*3) rgba(0,0,0,.35)}
.sheet.on{opacity:1}
.sheet.out{opacity:0;transition:opacity .55s ease}
.sheet-paper{position:absolute;inset:0;background:var(--paper-bg);background-size:240px 240px,auto;pointer-events:none}
.sheet::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(74,42,12,.42),rgba(74,42,12,.13) 6%,transparent 17%);opacity:var(--gut,1)}
.sheet .tp{z-index:3}

/* ---------- detail ---------- */
.detail{position:fixed;inset:0;z-index:30;container-type:size;opacity:0;transition:opacity .45s ease;background:var(--bg);color:var(--fg);--line:color-mix(in srgb,var(--fg) 24%,transparent);--card:color-mix(in srgb,var(--fg) 6%,transparent);--muted:color-mix(in srgb,var(--fg) 68%,transparent);--accent:var(--gold-d)}
.detail.on{opacity:1}
.detail[data-theme=dark]{--bg:#16305c;--fg:#f3ecd9;--accent:#f0cd86;background:radial-gradient(70% 38% at 18% 14%,rgba(255,255,255,.2),transparent 70%),radial-gradient(60% 30% at 82% 30%,rgba(255,255,255,.14),transparent 70%),linear-gradient(180deg,#2a5aa3 0%,#1f4580 46%,#16305c 100%)}
.detail[data-theme=paper]{--bg:#ecdfc0;--fg:#3b2a1a;--accent:#a77a2c;background:var(--paper-bg);background-size:240px 240px,auto}
.detail-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.hero{position:relative;height:100vh;height:100svh;min-height:420px}
.scroll-cue{position:absolute;left:0;right:0;bottom:5vh;text-align:center;font:400 12px/1 var(--sans);letter-spacing:.5em;padding-left:.5em;color:var(--muted);opacity:0;transition:opacity 1.2s .5s;animation:hint 3.4s ease-in-out infinite}
.detail.on .scroll-cue{opacity:1}
.back-btn{position:fixed;left:max(14px,2.4vw);top:max(14px,2.4vh);z-index:35;padding:.8em 1.3em;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg);cursor:pointer;font:500 14px/1 var(--sans);letter-spacing:.14em;transition:box-shadow .3s,border-color .3s,transform .3s}
.back-btn span{display:inline-block;margin-right:.5em;transition:transform .3s}
.back-btn:hover{border-color:var(--accent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 38%,transparent)}
.back-btn:hover span{transform:translateX(-4px)}
.detail-body{max-width:min(940px,92vw);margin:0 auto;padding:4vh 0 20vh}
.lead{max-width:36em;margin:0 auto clamp(40px,7vw,80px);text-align:center;font:400 clamp(16px,1.7vw,19px)/2.1 var(--serif);letter-spacing:.06em;color:var(--muted)}
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.sec-h{display:flex;align-items:center;gap:1.2em;margin:clamp(40px,7vw,84px) 0 clamp(18px,3vw,30px);font:600 clamp(20px,2.4vw,28px)/1.2 var(--serif);letter-spacing:.2em}
.sec-h::before,.sec-h::after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line))}
.sec-h::after{transform:scaleX(-1)}
.pill{display:inline-block;padding:.35em 1em;border:1px solid var(--line);border-radius:999px;font:500 11px/1.4 var(--sans);letter-spacing:.3em;padding-left:1.3em;color:var(--accent)}
.ph{font-style:italic;color:var(--muted)}

/* chapter I : stage cards */
.s-card{position:relative;overflow:hidden;margin:0 0 clamp(26px,4.5vw,52px);padding:clamp(26px,4.4vw,52px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(155deg,color-mix(in srgb,var(--fg) 9%,transparent),color-mix(in srgb,var(--fg) 2%,transparent));box-shadow:0 40px 90px -50px #000;transition:border-color .5s,box-shadow .5s,transform .5s}
.s-card:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 40px 90px -50px #000,0 0 60px -20px color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-3px)}
.s-num{position:absolute;right:.12em;top:-.16em;font:italic 300 clamp(110px,18vw,230px)/1 var(--serif);color:color-mix(in srgb,var(--accent) 16%,transparent);pointer-events:none;user-select:none}
.s-card h3{position:relative;margin:.9em 0 .25em;font:600 clamp(24px,3.2vw,36px)/1.3 var(--serif);letter-spacing:.1em}
.s-card .s-sub{position:relative;margin:0 0 1.4em;font:italic 400 clamp(14px,1.5vw,17px)/1.6 var(--serif);letter-spacing:.16em;color:var(--muted)}
.s-card p.body{position:relative;margin:0 0 1em;max-width:34em;font:400 clamp(15px,1.45vw,17px)/2.1 var(--serif);letter-spacing:.04em}
.verse{position:relative;margin:1.8em 0 0;padding:1.1em 1.4em;border-left:2px solid var(--accent);border-radius:0 14px 14px 0;background:color-mix(in srgb,var(--accent) 10%,transparent);max-width:34em}
.verse q{display:block;quotes:none;font:500 clamp(15px,1.5vw,18px)/1.95 var(--serif);letter-spacing:.06em}
.verse cite{display:block;margin-top:.5em;font:italic 13px/1.4 var(--serif);letter-spacing:.2em;color:var(--accent)}
.closing{margin:clamp(50px,8vw,110px) 0 0;text-align:center;font:italic 400 clamp(16px,1.8vw,21px)/2 var(--serif);letter-spacing:.2em;color:var(--muted)}
.closing .orn-div{margin:0 auto 1.2em;width:160px;color:var(--accent);opacity:.7}

/* chapter II : player + videos */
.player{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);align-items:center;padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(155deg,color-mix(in srgb,#fff 38%,transparent),color-mix(in srgb,#fff 12%,transparent));box-shadow:0 30px 70px -40px rgba(60,35,10,.55)}
.p-art{width:clamp(86px,13vw,132px);aspect-ratio:1;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 30% 20%,#7a4a28,#2f1a0e);box-shadow:inset 0 0 0 1px rgba(255,220,150,.3),0 14px 30px -14px rgba(0,0,0,.6)}
.p-art svg{width:34%;height:auto;filter:drop-shadow(0 0 8px rgba(255,210,120,.8))}
.p-info{min-width:0}
.p-title{margin:0;font:600 clamp(17px,2vw,22px)/1.4 var(--serif);letter-spacing:.08em}
.p-meta{margin:.25em 0 0;font:400 13px/1.6 var(--sans);letter-spacing:.12em;color:var(--muted)}
.wave{display:flex;align-items:center;gap:3px;height:46px;margin:1em 0 .6em;cursor:pointer}
.wave i{flex:1;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--fg) 24%,transparent);transition:background .2s,transform .2s}
.wave i.on{background:var(--accent)}
.wave:hover i{transform:scaleY(1.08)}
.p-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.p-time{margin-left:auto;font:500 13px/1 var(--sans);letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--muted)}
.ib{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center;font:600 12px/1 var(--sans);transition:background .25s,border-color .25s,box-shadow .25s}
.ib:hover{border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.ib.main{width:54px;height:54px;background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 10px 24px -10px var(--accent)}
.ib svg{width:18px;height:18px;fill:currentColor}
.p-note{margin:1em 0 0;font:italic 13px/1.7 var(--serif);color:var(--muted);letter-spacing:.06em}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:clamp(16px,2.4vw,26px)}
.vcard{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:color-mix(in srgb,#fff 26%,transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.vcard:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 26px 50px -26px rgba(60,35,10,.65)}
.v-thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,var(--h1),var(--h2));overflow:hidden}
.v-thumb::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,230,170,.35),transparent 55%)}
.v-play{position:relative;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(4px);display:grid;place-items:center;transition:transform .4s,background .4s}
.vcard:hover .v-play{transform:scale(1.12);background:rgba(255,255,255,.34)}
.v-play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.v-dur{position:absolute;right:10px;bottom:10px;padding:.25em .6em;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font:500 11px/1.3 var(--sans);letter-spacing:.06em}
.v-tag{position:absolute;left:10px;top:10px;padding:.25em .7em;border-radius:999px;background:rgba(0,0,0,.4);color:#fff;font:500 10px/1.4 var(--sans);letter-spacing:.2em}
.v-info{padding:14px 16px 18px}
.v-info b{display:block;font:600 15px/1.55 var(--serif);letter-spacing:.05em}
.v-info span{display:block;margin-top:.3em;font:400 12px/1.5 var(--sans);letter-spacing:.1em;color:var(--muted)}

/* chapter III : form + faq */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:start}
.col-h{margin:0 0 .5em;font:600 clamp(19px,2vw,24px)/1.3 var(--serif);letter-spacing:.14em}
.col-p{margin:0 0 1.6em;font:400 14px/1.9 var(--serif);letter-spacing:.05em;color:var(--muted)}
.form{display:grid;gap:18px;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(155deg,color-mix(in srgb,#fff 38%,transparent),color-mix(in srgb,#fff 12%,transparent));box-shadow:0 30px 70px -44px rgba(60,35,10,.6)}
.field{display:grid;gap:8px}
.field>span{font:600 12px/1 var(--sans);letter-spacing:.24em;color:var(--accent)}
.field input,.field textarea{width:100%;padding:.9em 1em;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,#fff 52%,transparent);color:var(--fg);font:400 15px/1.8 var(--serif);letter-spacing:.04em;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.count{justify-self:end;font:400 11px/1 var(--sans);color:var(--muted);letter-spacing:.1em}
.radios{display:flex;gap:10px;flex-wrap:wrap}
.radios label{position:relative;cursor:pointer}
.radios input{position:absolute;opacity:0}
.radios span{display:block;padding:.65em 1.1em;border:1px solid var(--line);border-radius:999px;font:400 13px/1.2 var(--sans);letter-spacing:.1em;transition:all .25s}
.radios input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.radios input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.submit{justify-self:start;padding:1em 2em;padding-left:2.3em;border:0;border-radius:999px;background:linear-gradient(135deg,#c79a43,#a77a2c);color:#fff;cursor:pointer;font:600 14px/1 var(--sans);letter-spacing:.3em;box-shadow:0 14px 30px -14px rgba(120,80,20,.9);transition:transform .3s,box-shadow .3s}
.submit:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px rgba(120,80,20,.95)}
.status{margin:0;min-height:1.6em;font:400 13px/1.7 var(--sans);letter-spacing:.06em;color:var(--muted)}
.status.warn{color:#9a5a12}.status.ok{color:#3d7a42}
.faq{display:grid;gap:12px}
.qa{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,#fff 28%,transparent);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.qa:hover,.qa.open{border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.qa.open{box-shadow:0 14px 36px -24px rgba(120,80,20,.7)}
.qa-q{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:1em;width:100%;padding:1.1em 1.3em;cursor:pointer;font:600 15px/1.6 var(--serif);letter-spacing:.06em}
.qa-q:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.qa-q i{flex:none;width:22px;height:22px;position:relative}
.qa-q i::before,.qa-q i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--accent);transform:translate(-50%,-50%);transition:transform .35s}
.qa-q i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa.open .qa-q i::after{transform:translate(-50%,-50%) rotate(0)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.qa.open .qa-a{grid-template-rows:1fr}
.qa-a>div{overflow:hidden}
.qa-a p{margin:0;padding:0 1.3em 1.3em;font:400 14px/2 var(--serif);letter-spacing:.04em;color:var(--muted)}
.linklike{all:unset;cursor:pointer;color:var(--accent);border-bottom:1px solid currentColor}
.linklike:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- TICF modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .4s}
.modal.on{opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,4,8,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.modal-card{position:relative;width:min(380px,100%);transform:translateY(18px) scale(.94);transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.modal.on .modal-card{transform:none}
.ticf-card{position:relative;display:grid;justify-items:center;gap:10px;padding:44px 30px 34px;border-radius:30px;text-align:center;text-decoration:none;color:#f6ecd8;overflow:hidden;
 background:radial-gradient(130% 90% at 50% 0,rgba(214,41,118,.28),transparent 60%),radial-gradient(110% 80% at 0 100%,rgba(254,218,117,.2),transparent 55%),radial-gradient(110% 80% at 100% 100%,rgba(79,91,213,.28),transparent 55%),#15101a;
 border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 90px -30px #000,0 0 80px -20px rgba(214,41,118,.5);transition:transform .4s,box-shadow .4s}
.ticf-card:hover{transform:translateY(-4px);box-shadow:0 46px 100px -30px #000,0 0 110px -14px rgba(214,41,118,.7)}
.ticf-ring{width:92px;height:92px;display:grid;place-items:center;border-radius:28px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 40px -6px rgba(214,41,118,.55)}
.ticf-ring svg{width:62px;height:62px}
.ticf-kicker{margin-top:8px;font:400 13px/1.6 var(--sans);letter-spacing:.34em;padding-left:.34em;color:rgba(246,236,216,.8)}
.ticf-name{font:600 28px/1.3 var(--serif);letter-spacing:.14em;background:linear-gradient(90deg,#feda75,#fa7e1e 30%,#d62976 62%,#962fbf);-webkit-background-clip:text;background-clip:text;color:transparent}
.ticf-handle{font:400 12px/1 var(--sans);letter-spacing:.2em;color:rgba(246,236,216,.6)}
.ticf-go{margin-top:12px;padding:.85em 1.6em;border-radius:999px;font:600 13px/1 var(--sans);letter-spacing:.2em;background:linear-gradient(135deg,#f58529,#dd2a7b 55%,#8134af);color:#fff;box-shadow:0 14px 30px -12px rgba(221,42,123,.8)}
.ticf-go i{font-style:normal;margin-left:.3em}
.modal-x{position:absolute;right:-6px;top:-14px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(20,14,26,.85);color:#fff;font:300 22px/1 var(--sans);cursor:pointer;transition:transform .3s}
.modal-x:hover{transform:rotate(90deg)}

/* ---------- small screens ---------- */
@media (max-width:760px){
 .two{grid-template-columns:1fr}
 .player{grid-template-columns:1fr;justify-items:start}
 .hint{font-size:12px;letter-spacing:.4em}
 .exit-link{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
 .halo-glow,.halo-rays,.cross,.cross-bloom,.hint,.scroll-cue{animation:none!important}
 .rv{opacity:1;transform:none;transition:none}
}

/* ===================== v21 additions ===================== */
/* I : timeline */
.tl{list-style:none;margin:0;padding:0 0 0 clamp(22px,4.4vw,56px);position:relative}
.tl::before{content:'';position:absolute;left:clamp(5px,1.2vw,14px);top:18px;bottom:34px;width:1px;background:linear-gradient(180deg,transparent,var(--accent) 8%,var(--accent) 92%,transparent);opacity:.5}
.tl-item{position:relative}
.tl-item::before{content:'';position:absolute;left:calc(-1 * clamp(22px,4.4vw,56px) + clamp(5px,1.2vw,14px) - 5px);top:34px;width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent),0 0 22px var(--accent)}
.s-card .pill{max-width:100%;white-space:normal}
.s-card p.body{max-width:none;font-size:clamp(15px,1.5vw,17.5px);line-height:2.15;text-align:justify;text-justify:inter-ideograph}
.s-card p.conf{padding:1em 1.3em;border-radius:14px;background:color-mix(in srgb,var(--accent) 11%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);font-weight:600;letter-spacing:.07em}
.inq{position:relative;margin:.4em 0 1.4em;padding:.3em 0 .3em 1.4em;border-left:2px solid var(--accent);font:italic 400 clamp(15px,1.5vw,17.5px)/2.1 var(--serif);letter-spacing:.05em;color:color-mix(in srgb,var(--fg) 88%,transparent)}
.verse.big{max-width:none;margin:clamp(30px,5vw,60px) 0;padding:clamp(28px,4.4vw,52px) clamp(22px,4vw,56px);text-align:center;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-left-width:1px;border-radius:26px;background:radial-gradient(90% 120% at 50% 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),color-mix(in srgb,var(--accent) 6%,transparent);box-shadow:0 0 90px -34px var(--accent)}
.verse.big::before{content:'“';position:absolute;left:50%;top:-.32em;transform:translateX(-50%);font:400 clamp(70px,10vw,120px)/1 var(--serif);color:var(--accent);opacity:.55}
.verse.big q{font:600 clamp(19px,2.5vw,29px)/1.95 var(--serif);letter-spacing:.1em;text-shadow:0 0 28px color-mix(in srgb,var(--accent) 45%,transparent)}
.verse.big cite{margin-top:1em;font-size:clamp(13px,1.4vw,16px)}
.diary{margin:clamp(40px,6vw,80px) auto 0;max-width:640px;padding:clamp(24px,4vw,40px);border-radius:6px 20px 20px 6px;color:#3b2a1a;background:#efe4c6;box-shadow:0 40px 80px -30px #000,inset 6px 0 0 #c9a96b,inset 7px 0 12px -6px rgba(0,0,0,.35);transform:rotate(-.6deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.diary.in:hover{transform:rotate(0) translateY(-4px)}
.diary header{text-align:center}
.d-k{font:600 11px/1 var(--sans);letter-spacing:.4em;padding-left:.4em;color:#a77a2c}
.diary h3{margin:.6em 0 .3em;font:600 clamp(21px,2.6vw,28px)/1.4 var(--serif);letter-spacing:.14em}
.diary header p{margin:0;font:italic 400 14px/1.9 var(--serif);letter-spacing:.08em;color:#6b5a40}
.d-paper{position:relative;margin-top:1.6em;height:clamp(190px,32vw,260px);border-radius:8px;background:repeating-linear-gradient(180deg,transparent 0 35px,rgba(120,90,50,.28) 35px 36px),rgba(255,251,238,.55);box-shadow:inset 0 0 0 1px rgba(120,90,50,.18)}
.d-date{position:absolute;right:16px;top:8px;font:400 13px/1.8 var(--serif);letter-spacing:.14em;color:#8a7650}
.d-cross{position:absolute;right:18px;bottom:14px;width:26px;fill:#c9a96b;opacity:.55}

/* II : player */
.p-kick{margin:0 0 .5em;font:600 10px/1 var(--sans);letter-spacing:.32em;color:var(--accent)}
.p-art{position:relative}
.p-art .ring{position:absolute;inset:-6px;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);opacity:0}
.p-art.on .ring{animation:ringPulse 3.2s ease-out infinite}.p-art.on .r2{animation-delay:1.6s}
.p-art.on svg{animation:crossBreath 4s ease-in-out infinite}
@keyframes ringPulse{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.28)}}
@keyframes crossBreath{50%{filter:drop-shadow(0 0 16px rgba(255,220,140,1))}}
.p-art.on~.p-info .wave i.on{animation:wv 1.6s ease-in-out infinite}
.wave i:nth-child(3n).on{animation-delay:.2s!important}.wave i:nth-child(3n+1).on{animation-delay:.5s!important}
@keyframes wv{50%{transform:scaleY(.72)}}
.ib.vol.off{opacity:.45;text-decoration:line-through}
.tracks{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:6px}
.tracks button{width:100%;display:grid;grid-template-columns:2em 1fr auto;gap:12px;align-items:center;padding:.7em .9em;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.tracks button:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.tracks button.cur{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tracks .tn{font:italic 400 14px/1 var(--serif);color:var(--accent)}
.tracks b{display:block;font:600 14.5px/1.5 var(--serif);letter-spacing:.05em}.tracks em{display:block;font:400 12px/1.5 var(--sans);letter-spacing:.1em;color:var(--muted);font-style:normal}
.te{display:flex;gap:2px;align-items:flex-end;height:14px;opacity:0}
.te i{width:3px;height:30%;background:var(--accent);border-radius:1px}
.tracks.playing .cur .te{opacity:1}.tracks.playing .cur .te i{animation:eq .9s ease-in-out infinite}.te i:nth-child(2){animation-delay:.2s!important}.te i:nth-child(3){animation-delay:.4s!important}
@keyframes eq{50%{height:100%}}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(16px,2.4vw,26px)}
.yt-card{grid-column:1/-1;display:flex;align-items:center;gap:clamp(16px,2.6vw,28px);padding:clamp(20px,3vw,32px);border-radius:22px;text-decoration:none;color:inherit;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,#fff 70%,transparent),color-mix(in srgb,#fff 28%,transparent));box-shadow:0 24px 60px -38px rgba(60,35,10,.7);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.yt-card:hover{transform:translateY(-5px);border-color:#ff0000;box-shadow:0 30px 70px -34px rgba(255,0,0,.55)}
.yt-ic{flex:none;width:clamp(64px,9vw,92px);filter:drop-shadow(0 8px 14px rgba(200,0,0,.35))}.yt-ic svg{display:block;width:100%}
.yt-tx{display:grid;gap:.35em;min-width:0}
.yt-k{font:600 12px/1.4 var(--sans);letter-spacing:.2em;color:#d40000}
.yt-tx b{font:600 clamp(18px,2.3vw,26px)/1.5 var(--serif);letter-spacing:.06em}
.yt-tx em{font:italic 400 13px/1.5 var(--sans);letter-spacing:.14em;color:var(--muted)}
.yt-ghost{display:grid;place-content:center;gap:.3em;text-align:center;min-height:120px;border:1px dashed var(--line);border-radius:22px;color:var(--muted)}
.yt-ghost span{font:600 14px/1 var(--serif);letter-spacing:.3em}.yt-ghost em{font:italic 12px/1 var(--serif);letter-spacing:.2em}
@media(max-width:700px){.yt-card{grid-column:auto}.yt-ghost{display:none}}

/* III */
.quote-lead{position:relative;margin:0 0 1.6em;padding:.2em 0 .2em 1.1em;border-left:2px solid var(--accent);font:italic 400 clamp(15px,1.6vw,18px)/2 var(--serif);letter-spacing:.08em;color:var(--muted)}

/* IV : TICF reading page */
.ticf-stage{display:grid;place-items:center;min-height:62vh}
.ticf-stage .ticf-card{width:min(440px,100%);cursor:pointer}
.ticf-sub{max-width:20em;font:400 15px/1.95 var(--serif);letter-spacing:.08em;color:rgba(246,236,216,.88)}

/* ---- soft paper strips ---- */
.bend{visibility:hidden;pointer-events:none}
.bs{position:absolute;top:0;height:100%;width:var(--sw);transform-style:preserve-3d;transform-origin:0 50%}
.bs .bs{transform:rotateY(calc(var(--bd,0)*var(--k,1)*1deg))}
.book.bend-leaf .leaf:not(.bend){visibility:hidden}
.book.bend-leaf .leaf.bend{visibility:visible}
.book.bend-cover .hinge:not(.bend){visibility:hidden}
.book.bend-cover .hinge.bend{visibility:visible}
.bs>*{will-change:auto}

/* prayer wall */
.wall-lead{margin:-.4em 0 1.6em;text-align:center;font:italic 400 15px/1.9 var(--serif);letter-spacing:.1em;color:var(--muted)}
.wall{columns:2 300px;column-gap:clamp(14px,2vw,24px)}
.w-card{break-inside:avoid;margin:0 0 clamp(14px,2vw,24px);padding:18px 20px 20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,color-mix(in srgb,#fff 40%,transparent),color-mix(in srgb,#fff 14%,transparent));box-shadow:0 24px 50px -36px rgba(60,35,10,.6)}
.w-card.fresh{animation:wIn .9s cubic-bezier(.2,.8,.2,1)}
@keyframes wIn{from{opacity:0;transform:translateY(-14px) scale(.97)}}
.w-card header{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:.5em}
.w-card b{font:600 15px/1.5 var(--serif);letter-spacing:.08em}
.w-card time{font:400 11px/1 var(--sans);letter-spacing:.14em;color:var(--muted)}
.w-card p{margin:0;white-space:pre-wrap;word-break:break-word;font:400 15px/2 var(--serif);letter-spacing:.04em}
.wall-note{column-span:all;text-align:center;color:var(--muted);font:italic 14px/2 var(--serif);letter-spacing:.1em}

/* v25 · flip performance: strips are pure geometry while they move */
.bend,.bend *{animation:none!important}
.bend .cross,.bend .cross-bloom{filter:none!important;mix-blend-mode:normal!important}
.bs{will-change:transform;backface-visibility:visible}
.bs>.win{contain:paint}

/* v25 · language switch */
.lang-sw{position:fixed;top:max(12px,2vh);right:max(14px,2vw);z-index:90;display:flex;gap:2px;padding:3px;border:1px solid rgba(240,222,176,.22);border-radius:999px;background:rgba(14,10,6,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lang-sw button{appearance:none;border:0;background:transparent;color:rgba(240,222,176,.62);font:500 12px/1 var(--sans,system-ui);letter-spacing:.08em;padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.lang-sw button:hover{color:#fff1c8}
.lang-sw button[aria-pressed=true]{background:rgba(240,222,176,.16);color:#fff1c8}
.lang-sw button:focus-visible{outline:1px solid #e7cfa7;outline-offset:2px}
@media(max-width:700px){.lang-sw button{padding:7px 9px;font-size:11px}}
body[data-state=zooming] .lang-sw{opacity:.0;pointer-events:none}
.lang-sw{transition:opacity .3s}

/* v26 · ja / en: longer lines must stay inside the page (the zh verses relied on short fixed line breaks) */
html:not(:lang(zh)) .ep-verse,html:not(:lang(zh)) .lb-verse{white-space:normal;max-width:100%;text-wrap:balance;overflow-wrap:anywhere;letter-spacing:.03em;line-height:1.75}
html:not(:lang(zh)) .ep-verse{font-size:1em}
html:not(:lang(zh)) .lb-verse{font-size:.98em}
html:lang(en) .ep-verse,html:lang(en) .lb-verse{font-size:.92em;letter-spacing:.01em}
html:not(:lang(zh)) .ep-verse br,html:not(:lang(zh)) .lb-verse br{display:none}
html:not(:lang(zh)) .ep-verse,html:not(:lang(zh)) .lb-verse{padding-inline:.4em}
html:not(:lang(zh)) .lb-ref,html:not(:lang(zh)) .ep-ref{letter-spacing:.08em;max-width:100%;text-align:center}
html:not(:lang(zh)) .toc-item b{letter-spacing:.03em}
html:not(:lang(zh)) .toc-item em{letter-spacing:.05em}
html:not(:lang(zh)) .toc-title{letter-spacing:.2em;padding-left:.2em}
html:not(:lang(zh)) .toc-foot{letter-spacing:.06em;text-align:center}
html:not(:lang(zh)) .tp-title{letter-spacing:.04em;padding-left:.04em;font-size:6.2cqmin;overflow-wrap:anywhere;text-wrap:balance}
html:not(:lang(zh)) .tp-sub{letter-spacing:.08em;padding-left:.08em;overflow-wrap:anywhere}
html:not(:lang(zh)) .tp-kicker{letter-spacing:.3em}
html:not(:lang(zh)) .hint,html:not(:lang(zh)) .scroll-cue{letter-spacing:.2em}
html:not(:lang(zh)) .lb,html:not(:lang(zh)) .endpaper,html:not(:lang(zh)) .toc{min-width:0;overflow:hidden}
html:not(:lang(zh)) .lb>*,html:not(:lang(zh)) .endpaper>*{max-width:100%}


/* v27 · the sky ------------------------------------------------------------ */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky>i,.sky-layers{position:absolute;inset:0;display:block}
.sky-night{background:radial-gradient(120% 90% at 50% 80%,#27407a 0,#101a44 56%,#070a24 100%);opacity:0}
.sky-night:before{content:'';position:absolute;inset:0;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 31% 8%,#fff,transparent),radial-gradient(1.4px 1.4px at 58% 22%,#fff,transparent),radial-gradient(1px 1px at 77% 12%,#fff,transparent),radial-gradient(1.2px 1.2px at 90% 30%,#fff,transparent),radial-gradient(1px 1px at 44% 38%,#fff,transparent),radial-gradient(1.2px 1.2px at 21% 46%,#fff,transparent),radial-gradient(1px 1px at 68% 52%,#fff,transparent)}
.sky-sun{background:radial-gradient(34vmax 34vmax at 82% 4%,rgba(255,250,228,.95) 0,rgba(255,240,196,.42) 22%,rgba(255,236,180,.1) 48%,transparent 70%);mix-blend-mode:screen}
.sky-layers{transform-origin:50% 100%}
.cloud{position:absolute;left:0;display:block;width:max(3200px,200vw);height:auto;will-change:transform;animation:cdrift 200s linear infinite}
.c-high{top:3%;opacity:.8;animation-duration:330s}
.c-far{bottom:17%;animation-duration:240s}
.c-mid{bottom:2%;animation-duration:150s;animation-direction:reverse}
.c-near{bottom:-14%;animation-duration:100s}
@keyframes cdrift{to{transform:translate3d(-50%,0,0)}}
.sky-streaks{opacity:0;background:repeating-linear-gradient(90deg,transparent 0 37px,rgba(255,255,255,.55) 37px 38px,transparent 38px 91px,rgba(255,255,255,.35) 91px 92px,transparent 92px 143px);background-size:143px 100%;-webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.sky-fog{opacity:0;background:radial-gradient(120% 90% at 50% 55%,#fff 0,rgba(255,255,255,.92) 40%,rgba(235,246,255,.8) 100%)}

/* ascent: night sky, speed, the white of passing through cloud, then open daylight */
body.sky-rising .sky-night{animation:skyNight 3.4s cubic-bezier(.4,0,.5,1) both}
body.sky-rising .sky-layers{animation:skyRise 4.2s cubic-bezier(.17,.66,.2,1) both}
body.sky-rising .sky-streaks{animation:skyStreaks 3s ease-in-out both,skyFall .55s linear infinite}
body.sky-rising .sky-fog{animation:skyFog 3.4s ease-in-out both}
body.sky-rising .scene{animation:bookRise 2.8s 1.1s cubic-bezier(.2,.8,.2,1) both}
body.sky-rising .hint,body.sky-rising .exit-link,body.sky-rising .lang-sw{animation:uiIn 1.4s 2.6s ease both}
@keyframes skyNight{0%{opacity:1}55%{opacity:.85}100%{opacity:0}}
@keyframes skyRise{0%{transform:translateY(-95vh) scale(1.7)}100%{transform:none}}
@keyframes skyStreaks{0%{opacity:0}18%{opacity:.85}62%{opacity:.55}100%{opacity:0}}
@keyframes skyFall{to{background-position:0 130px}}
@keyframes skyFog{0%{opacity:0}34%{opacity:.15}52%{opacity:.96}100%{opacity:0}}
@keyframes bookRise{0%{translate:0 16vh;opacity:0}60%{opacity:1}100%{translate:0 0;opacity:1}}
@keyframes uiIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.cloud{animation:none}}

/* light-sky legibility for the controls that used to sit on a dark backdrop */
.halo-glow{background:radial-gradient(circle,rgba(255,244,214,.7) 0,rgba(255,226,166,.34) 14%,rgba(255,236,200,.14) 30%,transparent 58%)}
.halo-rays{opacity:.5;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0 6deg,rgba(255,255,255,.34) 8.5deg,rgba(255,255,255,0) 11deg 20deg)}
.ground-shadow{opacity:.35}
.dust{opacity:.7}
.hint{color:#fff;text-shadow:0 1px 14px rgba(20,60,120,.55)}
.exit-link{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(20,60,120,.5)}
.exit-link:hover{color:#fff}
.close-book{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.22);color:#fff;text-shadow:0 1px 8px rgba(20,60,120,.45)}
.close-book:hover{border-color:#fff;background:rgba(255,255,255,.36);box-shadow:0 0 28px rgba(255,255,255,.6)}
.lang-sw{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.2)}
.lang-sw button{color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(20,60,120,.4)}
.lang-sw button:hover{color:#fff}
.lang-sw button[aria-pressed=true]{background:rgba(255,255,255,.38);color:#fff}
.close-book{background:rgba(24,62,118,.5);border-color:rgba(255,255,255,.75)}
.sky-streaks{filter:blur(.6px)}
body.sky-rising .sky-streaks{animation:skyStreaks 3s ease-in-out both,skyFall .55s linear infinite;opacity:0}
@keyframes skyStreaks{0%{opacity:0}18%{opacity:.5}62%{opacity:.32}100%{opacity:0}}

html:lang(ja){--serif:Georgia,"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP",serif}

/* v29 · ascent without speed lines: stars sink away, cloud banks fall past, a veil of mist, then daylight */
.sky-streaks{display:none!important}
body.sky-rising .sky-night{animation:skyNight 4.2s cubic-bezier(.4,0,.5,1) both}
body.sky-rising .sky-night:before{animation:starsSink 4.2s cubic-bezier(.3,.1,.4,1) both}
body.sky-rising .sky-layers{animation:skyRise 5s cubic-bezier(.2,.62,.2,1) both}
body.sky-rising .sky-fog{animation:skyFog 4.2s ease-in-out both}
body.sky-rising .scene{animation:bookRise 3.2s 1.5s cubic-bezier(.2,.8,.2,1) both}
body.sky-rising .hint,body.sky-rising .exit-link,body.sky-rising .lang-sw{animation:uiIn 1.4s 3.4s ease both}
@keyframes starsSink{0%{transform:translateY(-6vh)}100%{transform:translateY(46vh)}}
@keyframes skyFog{0%{opacity:0}40%{opacity:.1}58%{opacity:.9}100%{opacity:0}}