/* ===== Chapter viewer: fixed full-screen, never scrolls ===== */
html,body.chapter{height:100%;overflow:hidden;overscroll-behavior:none}
.ch{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--nav-h) auto minmax(0,1fr) auto;background:var(--ink)}
.ch__ambient{position:absolute;inset:-80px;z-index:0;background-size:cover;background-position:center;filter:blur(60px) saturate(1.3) brightness(.38);opacity:.9;transition:background-image .8s}
.ch__ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 0%,rgba(8,7,11,.75) 70%)}
.ch>*:not(.ch__ambient){position:relative;z-index:2}

/* bar */
.ch__bar{grid-row:2;min-width:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;padding:10px var(--gut) 14px}
.ch__title .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.ch__title h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.4vw,64px);line-height:.92;text-transform:uppercase;white-space:nowrap}
.ch__tabs{display:flex;gap:2px;list-style:none;padding-bottom:4px}
.ch__tabs a{display:block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--mute);padding:9px 12px;border:1px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.ch__tabs a:hover{color:var(--bone)}
.ch__tabs a.here{color:var(--bone);border-color:var(--line);background:rgba(241,236,228,.05)}
.ch__tabs a.here::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pink);margin-right:8px;vertical-align:1px;box-shadow:0 0 10px var(--pink)}
.ch__meta{display:flex;justify-content:flex-end;align-items:center;gap:14px;padding-bottom:4px}
.ch__count{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--mute)}
.ch__count b{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:0;color:var(--bone);vertical-align:-6px;margin-right:4px}
.ch__play{height:36px;padding:0 12px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ch__play:hover{border-color:var(--bone)}

/* stage */
.ch__stage{grid-row:3;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 var(--gut)}
.box{position:relative;width:60vw;height:60vh;transition:width .55s cubic-bezier(.65,0,.25,1),height .55s cubic-bezier(.65,0,.25,1);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.box__imgs{position:absolute;inset:0;overflow:hidden;background:#000}
.box__imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.box__imgs img.enter{animation:revealR .75s cubic-bezier(.7,0,.2,1) both}
.box__imgs img.enter.back{animation-name:revealL}
@keyframes revealR{from{clip-path:inset(0 0 0 100%);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
@keyframes revealL{from{clip-path:inset(0 100% 0 0);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:scale(1)}}
.vf{position:absolute;inset:-12px;pointer-events:none;z-index:3}
.vf i{position:absolute;width:20px;height:20px;border-color:rgba(241,236,228,.7);border-style:solid;border-width:0}
.vf i:nth-child(1){left:0;top:0;border-left-width:1.5px;border-top-width:1.5px}
.vf i:nth-child(2){right:0;top:0;border-right-width:1.5px;border-top-width:1.5px}
.vf i:nth-child(3){left:0;bottom:0;border-left-width:1.5px;border-bottom-width:1.5px}
.vf i:nth-child(4){right:0;bottom:0;border-right-width:1.5px;border-bottom-width:1.5px}
.box__cap{position:absolute;left:0;right:0;bottom:-30px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);z-index:3}
.zone{position:absolute;top:0;bottom:0;width:50%;z-index:2;cursor:pointer}
.zone--l{left:0;cursor:w-resize}.zone--r{right:0;cursor:e-resize}
.arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(8,7,11,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.arrow:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.arrow--l{left:var(--gut)}.arrow--r{right:var(--gut)}
.expand{position:absolute;right:10px;top:10px;z-index:4;height:30px;padding:0 10px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(8,7,11,.5);border:1px solid var(--line);opacity:0;transition:opacity .2s}
.box:hover .expand{opacity:1}
@media(max-width:760px){.arrow{display:none}.expand{opacity:1}}

/* progress */
.prog{position:absolute;left:0;right:0;top:-12px;height:2px;background:rgba(241,236,228,.14);z-index:3;overflow:hidden}
.prog i{position:absolute;inset:0;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.prog i.run{animation:fillbar linear forwards}
@keyframes fillbar{to{transform:scaleX(1)}}

/* end card */
.endcard{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;background:rgba(8,7,11,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;padding:20px}
.endcard.on{opacity:1;visibility:visible}
.endcard .mono{color:var(--pink)}
.endcard h2{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,90px);line-height:.9;text-transform:uppercase}
.endcard .row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}

/* filmstrip */
.strip{grid-row:4;position:relative;min-width:0;padding:34px 0 16px}
.strip__track{display:flex;gap:4px;overflow-x:auto;scroll-behavior:smooth;padding:12px var(--gut);scrollbar-width:none;
  background:#050407;
  background-image:radial-gradient(circle,rgba(241,236,228,.18) 2px,transparent 2.5px),radial-gradient(circle,rgba(241,236,228,.18) 2px,transparent 2.5px);
  background-size:16px 12px,16px 12px;background-position:0 0,0 100%;background-repeat:repeat-x}
.strip__track::-webkit-scrollbar{display:none}
.strip__track button{position:relative;flex:0 0 auto;height:62px;aspect-ratio:3/2;overflow:hidden;opacity:.5;transition:opacity .2s}
.strip__track button img{width:100%;height:100%;object-fit:cover;filter:grayscale(.4)}
.strip__track button span{position:absolute;left:4px;bottom:2px;font-family:var(--mono);font-size:9px;color:var(--bone);text-shadow:0 1px 3px #000}
.strip__track button:hover{opacity:.9}
.strip__track button.cur{opacity:1}
.strip__track button.cur img{filter:none}
.strip__track button.cur::after{content:"";position:absolute;inset:0;border:2px solid var(--pink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}

/* intro */
.intro{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 20px) var(--gut) clamp(40px,8vh,90px);background:#000;cursor:pointer;transition:opacity .7s ease,visibility .7s}
.intro.gone{opacity:0;visibility:hidden}
.intro__img{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.12);animation:introzoom 4.5s cubic-bezier(.2,.7,.2,1) forwards;opacity:.75}
@keyframes introzoom{to{transform:scale(1)}}
.intro::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,7,11,.2),rgba(8,7,11,.35) 40%,rgba(8,7,11,.92))}
.intro__in{position:relative;z-index:2;max-width:1100px}
.intro__in .mono{color:var(--bone);margin-bottom:18px;display:flex;gap:14px;align-items:center}
.intro__in .mono::before{content:"";width:40px;height:1px;background:var(--grad)}
.intro__pov{font-family:var(--serif);font-style:italic;font-size:clamp(30px,5.2vw,78px);line-height:1.05;letter-spacing:-.01em;max-width:16ch}
.intro__pov,.intro__in .mono,.intro__go{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.intro__in .mono{animation-delay:.15s}
.intro__pov{animation-delay:.3s}
.intro__go{animation-delay:.9s;margin-top:28px}
@keyframes rise{to{opacity:1;transform:none}}

/* mobile */
@media(max-width:760px){
  .ch__bar{grid-template-columns:1fr auto;grid-template-areas:"t m" "tabs tabs";gap:10px 12px;padding:6px var(--gut) 8px}
  .ch__title{grid-area:t}.ch__meta{grid-area:m}
  .ch__tabs{grid-area:tabs;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .ch__tabs::-webkit-scrollbar{display:none}
  .ch__title h1{font-size:36px}
  .ch__count b{font-size:26px}
  .ch__play{height:32px;padding:0 10px}
  .strip{padding:30px 0 10px}
  .strip__track button{height:48px}
  .box__cap{bottom:-24px}
}
@media(max-width:760px){.expand{top:6px;right:6px;height:26px;padding:0 8px;font-size:9px;opacity:.85}}