/* ===== CINEMATIC PHASE ONE — scoped to body.cine ===== */
body.cine{background:#030305}
body.cine .bg,body.cine .flares{display:none}
body.cine::after{display:none}
.cine-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#030305}
.cine-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 45%;opacity:.95}
.cine-stars{position:absolute;inset:0;width:100%;height:100%}
.cine-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,3,5,.82) 0%,rgba(3,3,5,.55) 38%,rgba(3,3,5,0) 62%),linear-gradient(0deg,rgba(3,3,5,.7),transparent 35%)}
.cine-flare{position:absolute;inset:0;pointer-events:none}
.cine-flare i{position:absolute;border-radius:50%;will-change:transform,opacity;mix-blend-mode:screen}
.cine-flare i:nth-child(1){left:62%;top:30%;width:34vmax;height:34vmax;margin:-17vmax 0 0 -17vmax;background:radial-gradient(circle,rgba(255,255,255,.16),rgba(210,215,255,.05) 25%,transparent 60%);animation:cflare 24s ease-in-out infinite alternate}
.cine-flare i:nth-child(2){left:74%;top:66%;width:7vmax;height:7vmax;background:radial-gradient(circle,transparent 56%,rgba(160,220,255,.12) 63%,rgba(255,190,240,.10) 70%,transparent 76%);animation:cflare 24s ease-in-out infinite alternate-reverse}
.cine-flare i:nth-child(3){left:84%;top:80%;width:3vmax;height:3vmax;background:radial-gradient(circle,rgba(200,200,255,.16),transparent 70%);animation:cflare 18s ease-in-out infinite alternate}
@keyframes cflare{from{transform:translate3d(0,0,0);opacity:.7}to{transform:translate3d(-2vmax,1.5vmax,0);opacity:1}}
body.cine-paused .cine-flare i,body.cine-paused .cine-369 .node{animation-play-state:paused}
/* 3-6-9 */
.cine-369{color:#eef0f6;filter:drop-shadow(0 0 6px rgba(236,238,255,.35));overflow:visible}
.cine-369 .nums text{font-family:var(--serif);font-size:24px;text-anchor:middle}
.cine-369 .node{fill:rgba(190,180,240,.22);stroke:rgba(255,255,255,.85);stroke-width:.8;filter:drop-shadow(0 0 10px rgba(205,195,255,.9));animation:cnode 5s ease-in-out infinite}
@keyframes cnode{50%{fill:rgba(205,195,255,.42)}}
.cine-369 .pulse{opacity:0;transform-origin:100px 200px;stroke-width:1.2}
/* entrance layout */
.cine-entry .cine-main{max-width:none;padding:0}
.cine-stage{min-height:100svh;display:grid;align-items:center;position:relative;padding:max(24px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}
.cine-entry .cine-369{position:absolute;left:50%;top:6svh;height:52svh;width:auto;transform:translateX(-50%)}
.cine-text{position:relative;align-self:end;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:2svh}
.cine-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,11vw,5.6rem);line-height:1.02;margin:0;color:#f4f2ec;letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.8),0 0 40px rgba(236,238,255,.18)}
.cine-rule{width:48px;border:0;border-top:1px solid rgba(236,238,244,.6);margin:8px 0}
.cine-lead{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,4.6vw,1.6rem);color:#e6e5ee;margin:0 0 14px;text-shadow:0 1px 16px rgba(0,0,0,.9)}
.cine-caps{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:#c9cbd6;margin:12px 0 0;text-shadow:0 1px 10px #000}
.cine-enter{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.8em;width:min(100%,300px);min-height:56px;border-radius:999px;font-family:var(--serif);font-size:1.3rem;letter-spacing:.12em;color:#f7f6f2;
 background:rgba(8,8,12,.45);border:1px solid rgba(255,255,255,.65);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 26px rgba(236,238,255,.28),inset 0 0 18px rgba(236,238,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:box-shadow .3s,background .3s}
.cine-enter:hover,.cine-enter:focus-visible{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 44px rgba(236,238,255,.5)}
.cine-enter:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (min-width:820px){
 .cine-scrim{background:linear-gradient(90deg,rgba(3,3,5,.86) 0%,rgba(3,3,5,.6) 36%,rgba(3,3,5,0) 58%)}
 .cine-art{object-position:center}
 .cine-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0 6vw}
 .cine-text{grid-column:1;grid-row:1;align-self:center;text-align:left;align-items:flex-start;padding:0}
 .cine-entry .cine-369{left:65%;top:50%;height:min(78vh,820px);transform:translate(-50%,-50%)}
 .cine-rule{margin:14px 0}
}
@media (min-width:820px) and (max-width:1100px){.cine-stage{grid-template-columns:1fr}.cine-text{align-self:end;text-align:center;align-items:center;padding-bottom:8vh}.cine-entry .cine-369{left:50%;top:36%;height:52vh}.cine-scrim{background:linear-gradient(0deg,rgba(3,3,5,.85),rgba(3,3,5,.2) 55%,transparent)}}
/* threshold bloom */
.cine-bloom{position:fixed;left:var(--bx,50%);top:var(--by,50%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;z-index:50;opacity:0;
 background:radial-gradient(circle,rgba(236,234,248,.85) 0,rgba(196,186,236,.55) 26%,rgba(140,126,205,.32) 50%,rgba(70,60,120,.12) 66%,rgba(20,18,36,0) 74%);filter:blur(1px)}
body.entering .cine-369 .node{animation:none;fill:rgba(255,255,255,.9);transition:fill .25s ease;filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 40px rgba(205,195,255,.9))}
body.entering .cine-369 .pulse{animation:cpulse .55s .15s ease-out forwards}
@keyframes cpulse{0%{opacity:.95;transform:scale(1);stroke:#fff}100%{opacity:0;transform:scale(5);stroke:rgba(205,195,255,.6)}}
body.entering .cine-369 .geo{animation:cgeo .5s .2s ease-out forwards}
@keyframes cgeo{50%{color:#fff;opacity:1;filter:drop-shadow(0 0 6px rgba(205,195,255,1))}100%{opacity:.9}}
body.entering .cine-art{animation:cart .6s .3s ease-out forwards}
@keyframes cart{to{opacity:1;transform:scale(1.025)}}
body.entering .cine-flare i:nth-child(1){animation:cflareup .6s .3s ease-out forwards}
@keyframes cflareup{to{opacity:1;transform:scale(1.5)}}
body.entering .cine-bloom{animation:cbloom .65s .5s cubic-bezier(.5,0,.75,0) forwards}
@keyframes cbloom{0%{opacity:0;transform:scale(1)}25%{opacity:.75}100%{opacity:.82;transform:scale(420)}}
body.entering .cine-text{transition:opacity .5s .3s;opacity:.0}
/* home emerges */
.cine-emerge{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 40%,rgba(86,78,130,.6),rgba(40,36,66,.62) 40%,rgba(10,10,18,.8) 80%)}
html.bloom-in .cine-emerge{animation:cemerge 1.1s ease-out forwards}
@keyframes cemerge{0%{opacity:1}100%{opacity:0}}
.cine-entry .cine-bloom::after{content:none}
@media (max-width:819px) and (max-height:700px){.cine-title{font-size:2.3rem}.cine-text{gap:6px;padding-bottom:1svh}.cine-lead{font-size:.95rem;margin:0}.cine-rule{margin:4px auto}.cine-enter{min-height:48px}}
/* HOME */
.cine-home .top{background:rgba(3,3,5,.5)}
.cine-hero{position:relative;padding-top:64px!important;min-height:min(78svh,720px)}
.cine-hero .cine-369.small{position:absolute;right:-10px;top:10px;height:min(64svh,520px);opacity:.75;pointer-events:none}
.cine-hero .title,.cine-hero .prose{position:relative;text-shadow:0 1px 18px rgba(0,0,0,.9)}
.cine-hero .title{font-size:clamp(2.3rem,10vw,4.6rem)}
.cine-home .cine-art{object-position:72% 30%}
.cine-home .cine-scrim{background:linear-gradient(90deg,rgba(3,3,5,.85),rgba(3,3,5,.45) 55%,rgba(3,3,5,.2)),linear-gradient(0deg,rgba(3,3,5,.92) 0%,rgba(3,3,5,.55) 45%,transparent 75%)}
.cine-home .card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border-color:rgba(236,238,244,.16);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);min-height:120px}
.cine-books{grid-template-columns:1fr}
.fbook{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:14px;border:1px solid rgba(236,238,244,.14);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.012));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fbook .cover{width:96px!important;border-radius:4px}
.fb-body h3{font-size:1.3rem;margin:2px 0 0}.fb-body h3 a:hover{color:#fff}
.fb-status{margin:.6em 0;font-family:var(--serif);font-size:1.05rem;color:#e7e6e0}.fb-status .caps{margin-right:.6em;font-size:.55rem}
.fb-actions{display:flex;flex-wrap:wrap;gap:8px}
.cine-pill{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:44px;padding:0 18px;border-radius:999px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cine-pill.ghost{border:1px solid rgba(240,242,248,.5);color:#f2f1ec;box-shadow:0 0 16px rgba(236,238,244,.12)}
.cine-pill.solid{background:linear-gradient(180deg,#f6f5f1,#d6d8df);color:#0a0a0c;box-shadow:0 0 22px rgba(236,238,244,.3)}
.cine-pill:focus-visible{outline:2px solid #fff;outline-offset:3px}
.cine-quote{margin:90px auto 50px;max-width:680px;text-align:center}.cine-quote .rd-mark{margin-bottom:20px;color:var(--mute)}.cine-quote .q{padding-top:22px;border-top:1px solid var(--hair)}
@media (min-width:820px){.cine-hero .cine-369.small{right:8%;height:min(70vh,620px)}.cine-books{grid-template-columns:repeat(3,1fr)}.fbook{grid-template-columns:1fr}.fbook .cover{width:100%!important;max-height:340px;object-fit:contain;background:#050506}}
@media (min-width:820px) and (max-width:1100px){.cine-books{grid-template-columns:1fr}.fbook{grid-template-columns:140px 1fr}.fbook .cover{width:140px!important}}
@media (prefers-reduced-motion:reduce){.cine-flare i,.cine-369 .node{animation:none!important}html.bloom-in .cine-emerge{animation:none}body.entering *{animation:none!important}}
@media (max-width:819px){.cine-hero .cine-369.small{opacity:.32;right:-40px;top:20px;height:340px}.cine-hero{min-height:0}}
/* v12: art-aligned geometry (JS positions; CSS is fallback) */
.cine-art{object-position:50% 30%}
.cine-home .cine-art{object-position:50% 30%}
@media (min-width:820px){.cine-art,.cine-home .cine-art{object-position:center}}
.cine-entry .cine-369{z-index:0}
.cine-hero .cine-369.small{opacity:.9}
@media (max-width:819px){.cine-hero .cine-369.small{opacity:.55}
 .cine-scrim{background:linear-gradient(0deg,rgba(3,3,5,.92) 0%,rgba(3,3,5,.6) 40%,rgba(3,3,5,0) 62%)}}
@media (min-width:820px) and (max-width:1100px){.cine-art{object-position:66% 50%}}
@media (max-width:819px){.cine-hero .cine-369.small{opacity:.3}}
/* ---- v20 large-screen scale (TV / 4K). Background art + stars stay unscaled; content scales. ---- */
:root{--z:1}
@media (min-width:2200px){:root{--z:1.18}}
@media (min-width:2500px){:root{--z:1.25}}
@media (min-width:3000px){:root{--z:1.38}}
@media (min-width:3600px){:root{--z:1.5}}
@media (min-width:2200px){.top,main,.foot{zoom:var(--z)}.cine-entry .cine-main{zoom:1}.cine-entry .cine-text{zoom:var(--z)}}
@media (min-width:2200px){.cine-hero{min-height:calc(73svh / var(--z))}}
@media (min-width:2200px){main:not(.cine-main){max-width:1180px}}
@media (min-width:2500px){main:not(.cine-main){max-width:1240px}}
@media (min-width:3600px){main:not(.cine-main){max-width:1320px}}

/* ---- v21 sound toggle (crystal/silver) ---- */
.snd{position:relative;flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:18px;padding:0;border-radius:50%;cursor:pointer;color:#cfcbe6;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 55%),rgba(8,8,14,.55);border:1px solid rgba(220,214,250,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:color .3s,border-color .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.snd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.snd .spk{fill:rgba(207,203,230,.12)}.snd .w1,.snd .w2{opacity:0;transition:opacity .3s}.snd .x{opacity:.75}
.snd.is-on{color:#f1eefc;border-color:rgba(220,210,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 18px -6px rgba(170,150,240,.45)}
.snd.is-on .w1,.snd.is-on .w2{opacity:1}.snd.is-on .x{opacity:0}
@media (hover:hover){.snd:hover{color:#fff;border-color:rgba(230,224,255,.45)}}
.snd:focus-visible{outline:2px solid #c9c0ff;outline-offset:3px}
.top .menu{margin-left:auto}
@media (min-width:820px){.top .snd{order:5}}
@media (max-width:819px){.top .snd{margin-left:auto;margin-right:6px}.top .menu{margin-left:0}}
.snd-fixed{position:fixed;top:max(14px,env(safe-area-inset-top));right:14px;z-index:30;margin:0;zoom:var(--z,1)}
.snd-lab{position:fixed;left:12px;bottom:calc(var(--tab,64px) + 14px + env(safe-area-inset-bottom));z-index:40;display:flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(8,8,14,.9);border:1px dashed rgba(220,214,250,.35);font:11px/1 Inter,system-ui,sans-serif;color:#bdb8d8;letter-spacing:.1em;text-transform:uppercase}
.snd-lab button,.snd-lab a{min-width:30px;height:30px;border-radius:50%;border:1px solid rgba(220,214,250,.25);background:none;color:#ddd;font:inherit;cursor:pointer;display:inline-grid;place-items:center}
.snd-lab button[aria-pressed=true]{background:#e9e5ff;color:#111}
@media (min-width:820px){.snd-lab{bottom:14px}}

/* v26 refinements: crisper touch on phones/tablets, visible keyboard focus on glass, balanced headings at every width */
a,button,.card,.fbook,.snd{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.crystal:focus-visible,.card:focus-visible,.fbook a:focus-visible,.fb-cover:focus-visible{outline:2px solid rgba(226,220,255,.75);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
.prose p,.desc,.fb-body p{text-wrap:pretty}
html{scroll-padding-top:84px}
/* v28 fluidity: the 3-6-9 node breath runs on the compositor (opacity of an underlay) instead of repainting the filtered svg */
.cine-369 .node{animation:none}
.cine-369o{pointer-events:none;overflow:visible;opacity:0;animation:cnodeo 5s ease-in-out infinite;will-change:opacity}
@keyframes cnodeo{0%,100%{opacity:0}50%{opacity:var(--op,1)}}
body.cine-paused .cine-369o{animation-play-state:paused}
body.entering .cine-369o{animation:none;opacity:0;transition:opacity .25s ease}
@media (prefers-reduced-motion:reduce){.cine-369o{display:none}}
/* v28: entrance flash of the 3-6-9 runs on compositor layers (opacity/transform), the filtered base svg is no longer repainted every frame */
.cine-369x{pointer-events:none;overflow:visible;opacity:0;color:#fff;will-change:opacity}
.cine-369x.x-pulse{will-change:opacity,transform;transform-origin:50% 47.619%}
body.entering .cine-369:not(.small) .node{animation:none;fill:rgba(190,180,240,.22);transition:none;filter:drop-shadow(0 0 10px rgba(205,195,255,.9))}
body.entering .cine-369:not(.small) .pulse{animation:none}
body.entering .cine-369:not(.small) .geo{animation:none;opacity:.9;transition:opacity 0s .45s}
body.entering .x-node{opacity:1;transition:opacity .25s ease}
body.entering .x-geo{animation:cgeox .5s .2s ease-out both}
@keyframes cgeox{0%{opacity:0}50%{opacity:var(--gx,.5)}100%{opacity:0}}
body.entering .x-pulse{animation:cpulsex .55s .15s ease-out forwards}
@keyframes cpulsex{0%{opacity:.95;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.cine-369x{display:none}}
/* v28: pre-promote the entrance layers so the click doesn't trigger a full-document repaint (3.9s raster at 4K in software) */
.cine-entry .cine-bloom{will-change:transform,opacity}.cine-entry .cine-text{will-change:opacity}.cine-entry .cine-art{will-change:transform,opacity}
/* v30: static grain + softer flare (entrance) */
html::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:url(/assets/grain.png) repeat;background-size:96px 96px;opacity:.24}
.cine-flare{opacity:.85}
/* v30 home hero: larger title, more air, quieter motif (loaded after cine-pages.css) */
html body .cine-hero .title{font-size:clamp(2.75rem,11vw,5.4rem);line-height:1.04;max-width:15ch}
html body main .cine-hero{padding-top:clamp(72px,11vh,140px)!important;padding-bottom:clamp(24px,5vh,64px)!important}
html body .cine-hero .cine-369.small{opacity:.42}
@media (max-width:819px){html body .cine-hero .cine-369.small{opacity:.22}html body main .cine-hero{padding-top:clamp(56px,8vh,88px)!important}}