:root{
  --carcosa:url("assets/img/carcosa-wide.webp");
  --nave:url("assets/img/nave-wide.webp");          /* desktop, 16:9 */
  --nave-tablet:url("assets/img/nave-tablet.webp"); /* 4:3 */
  --nave-portrait:url("assets/img/nave-portrait.webp");
  --carcosa-tablet:url("assets/img/carcosa-tablet.webp");
  --carcosa-portrait:url("assets/img/carcosa-portrait.webp");
  --void:#06070b; --abyss:#0a1020; --stone:#1b1f27; --fog:#8d95a3; --fog-dim:#5c6370;
  --gold:#b4913f; --gold-dim:#7a622c; --gold-hi:#d8b25a; --ink:#2b2117; --ink-soft:#4a3a29;
  --f-title:'Cinzel','Forum',Georgia,'Times New Roman',serif;
  --f-page:'IM Fell English','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-read:'Cormorant Garamond',Georgia,serif;
}
html[lang="ru"] .character .fld p{font-size:10.5px;line-height:1.38}
html[lang="ru"]{--f-title:'Forum','Cinzel',Georgia,serif;--f-page:'Cormorant Garamond',Georgia,serif}
html,body{height:100%}
body{margin:0;background:var(--void);color:var(--fog);font-family:var(--f-page);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus{outline:none}
*{box-sizing:border-box}

/* ---------- the threshold: nothing is shown until Carcosa is ready ---------- */
#preloader{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,#0a0c14,#04050a 70%);
  transition:opacity 1.4s ease,visibility 0s linear 1.4s}
#preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.pl-inner{width:min(78vw,420px);text-align:center}
.pl-title{margin:0 0 26px;font-family:var(--f-title);font-size:clamp(12px,1.7vw,17px);letter-spacing:.42em;text-indent:.42em;
  color:rgba(216,178,90,.78);text-shadow:0 0 30px rgba(180,145,63,.18);animation:plBreath 4.2s ease-in-out infinite}
@keyframes plBreath{0%,100%{opacity:.62}50%{opacity:1}}
.pl-rail{position:relative;height:1px;background:rgba(216,178,90,.16);overflow:hidden}
.pl-rail span{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,rgba(216,178,90,.25),rgba(216,178,90,.95));
  box-shadow:0 0 12px rgba(216,178,90,.5);transition:width .5s cubic-bezier(.2,.6,.3,1)}
.pl-pct{margin:16px 0 0;font-family:var(--f-title);font-size:9.5px;letter-spacing:.34em;text-indent:.34em;
  color:rgba(141,149,163,.5);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .pl-title{animation:none} }

/* ---------- stage & scenes ---------- */
#stage{position:fixed;inset:0;background:var(--void);overflow:hidden}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 2.2s ease-in-out,visibility 0s linear 2.2s}
.scene.is-on{opacity:1;visibility:visible;transition:opacity 2.6s ease-in-out,visibility 0s}
/* the fall — between the door and the book */
#fall{position:absolute;inset:0;z-index:49;pointer-events:none;opacity:0;transition:opacity .9s ease;background:radial-gradient(ellipse at 50% 40%,rgba(8,9,14,.6),#000 70%)}
#fall.is-on{opacity:1}
#fall .motes,#fall .drops{position:absolute;inset:-20% 0}
#fall i{position:absolute;display:block;width:2px;height:2px;border-radius:50%;background:rgba(216,178,90,.8);box-shadow:0 0 6px rgba(216,178,90,.5);opacity:0}
#fall i.scrap{width:9px;height:12px;border-radius:1px;background:linear-gradient(160deg,rgba(203,181,138,.5),rgba(120,100,60,.15));box-shadow:none;filter:blur(.3px)}
#fall.is-on i{animation:rise var(--d,2.4s) linear var(--t,0s) infinite}
@keyframes rise{0%{transform:translate3d(0,40vh,0) rotate(0deg);opacity:0}12%{opacity:.9}100%{transform:translate3d(var(--dx,0),-70vh,0) rotate(var(--r,180deg));opacity:0}}
#fall .drops{background:
  radial-gradient(circle at 22% 30%,rgba(140,160,190,.10) 0 3px,transparent 4px),
  radial-gradient(circle at 68% 55%,rgba(140,160,190,.09) 0 4px,transparent 5px),
  radial-gradient(circle at 41% 78%,rgba(140,160,190,.08) 0 3px,transparent 4px),
  radial-gradient(circle at 83% 22%,rgba(140,160,190,.07) 0 5px,transparent 6px);
  filter:blur(2px);opacity:.8}
#fall.is-on .drops{animation:drop 2.6s linear infinite}
@keyframes drop{from{transform:translate3d(0,-14vh,0)}to{transform:translate3d(0,16vh,0)}}
#book.is-falling .bookstage{transform:translate(var(--pan,0px),var(--lift,0px)) scale(calc(var(--bs,1) * .82));filter:blur(6px)}
#book .bookstage{transition:transform 2.6s cubic-bezier(.22,.61,.36,1),filter 2.2s ease}
#veil{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity 1.8s ease-in-out;z-index:50}
#veil.is-on{opacity:1}
#grain{position:absolute;inset:0;pointer-events:none;z-index:40;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .6 0 0 0 0 .6 0 0 0 0 .7 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 1.4s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-6%,3%)}50%{transform:translate(4%,-5%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:39;background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(3,4,8,.55) 100%)}

/* ---------- chrome ---------- */
.chrome{position:absolute;z-index:45;font-family:var(--f-title);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(180,145,63,.55);transition:opacity 1.6s ease,color .8s ease;text-shadow:0 0 12px rgba(0,0,0,.9)}
.chrome.is-hidden{opacity:0;pointer-events:none}
#owner{top:22px;right:26px;text-decoration:none}
#owner.is-you{color:rgba(216,178,90,.9)}
#owner:hover,#owner:focus-visible{color:rgba(216,178,90,.95)}
#topleft{top:20px;left:24px;display:flex;align-items:center;gap:22px}
#sound{display:flex;align-items:center;gap:10px;padding:4px 0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
#sound .glyph{width:18px;height:10px;display:flex;align-items:flex-end;gap:2px}
#sound .glyph i{display:block;width:2px;height:3px;background:currentColor;transition:height .4s ease}
#sound.is-on .glyph i:nth-child(1){animation:bar 1.6s ease-in-out infinite}
#sound.is-on .glyph i:nth-child(2){animation:bar 2.1s ease-in-out infinite .3s}
#sound.is-on .glyph i:nth-child(3){animation:bar 1.3s ease-in-out infinite .6s}
#sound.is-on .glyph i:nth-child(4){animation:bar 1.9s ease-in-out infinite .1s}
@keyframes bar{0%,100%{height:3px}50%{height:10px}}
#lang{display:flex;gap:8px;align-items:center;color:rgba(141,149,163,.4)}
#lang button{font:inherit;letter-spacing:inherit;color:rgba(141,149,163,.42);padding:4px 0;transition:color .8s ease}
#lang button.is-current{color:rgba(216,178,90,.8)}
#lang button:hover,#lang button:focus-visible{color:rgba(216,178,90,.95)}
#sound:hover,#sound:focus-visible,#industry:hover,#industry:focus-visible{color:rgba(216,178,90,.9)}
#industry{bottom:20px;left:24px;font-size:9.5px;color:rgba(141,149,163,.32);letter-spacing:.3em}
/* restart — the one deliberately visible control on the page */
.restart{position:absolute;right:24px;bottom:20px;z-index:47;display:flex;align-items:center;gap:9px;
  font-family:var(--f-title);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(216,178,90,.85);padding:9px 16px;border:1px solid rgba(216,178,90,.42);border-radius:1px;
  background:linear-gradient(180deg,rgba(216,178,90,.09),rgba(216,178,90,.03));
  box-shadow:0 0 18px rgba(216,178,90,.10),inset 0 0 14px rgba(216,178,90,.06);
  text-shadow:0 0 12px #000;transition:color .6s ease,border-color .6s ease,box-shadow .6s ease,background .6s ease}
.restart .glyph{font-size:13px;line-height:1;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.restart:hover,.restart:focus-visible{color:rgba(232,200,120,1);border-color:rgba(216,178,90,.85);background:linear-gradient(180deg,rgba(216,178,90,.16),rgba(216,178,90,.06));box-shadow:0 0 30px rgba(216,178,90,.22),inset 0 0 18px rgba(216,178,90,.10)}
.restart:hover .glyph,.restart:focus-visible .glyph{transform:rotate(-180deg)}

/* the ten cases, offered again once the chain is complete */
.case-grid{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  width:min(92vw,430px);opacity:0;pointer-events:none;transition:opacity 1.8s ease 1.6s;z-index:8}
#carcosa.is-finale .case-grid{opacity:1;pointer-events:auto}
.case-grid button{aspect-ratio:1;width:100%;align-self:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid rgba(216,178,90,.28);background:linear-gradient(180deg,rgba(10,14,26,.72),rgba(6,7,11,.8));
  font-family:var(--f-title);color:rgba(216,178,90,.7);transition:color .6s ease,border-color .6s ease,box-shadow .6s ease,background .6s ease;
  box-shadow:inset 0 0 14px rgba(0,0,0,.6)}
.case-grid button .n{font-size:15px;letter-spacing:.08em}
.case-grid button .c{font-size:6.5px;letter-spacing:.24em;color:rgba(141,149,163,.6)}
.case-grid button:hover,.case-grid button:focus-visible{color:rgba(232,200,120,1);border-color:rgba(216,178,90,.75);background:linear-gradient(180deg,rgba(24,20,10,.8),rgba(10,9,7,.85));box-shadow:0 0 22px rgba(216,178,90,.18),inset 0 0 16px rgba(216,178,90,.08)}
.focus-ring:focus-visible{text-decoration:underline;text-underline-offset:6px;text-decoration-color:rgba(216,178,90,.6)}

/* ---------- scene: carcosa ---------- */
#carcosa .world{position:absolute;inset:0;transform-origin:50% 50%;transition:transform 3.4s cubic-bezier(.4,0,.2,1)}
#carcosa .plate{position:absolute;inset:0;background-image:var(--carcosa);background-size:cover;background-position:52% 50%;filter:brightness(.96) saturate(.92)}
#carcosa .light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(20,30,60,0) 40%,rgba(3,4,10,.45) 100%);transition:opacity 2.4s ease}
#carcosa .fog{position:absolute;inset:-10% -5%;pointer-events:none;opacity:.35;mix-blend-mode:screen;
  background:radial-gradient(60% 40% at 30% 60%,rgba(120,135,160,.10),transparent 70%),radial-gradient(50% 35% at 70% 55%,rgba(110,125,150,.08),transparent 70%);
  animation:fog 38s ease-in-out infinite alternate}
@keyframes fog{from{transform:translate3d(-2%,0,0)}to{transform:translate3d(2%,1%,0)}}
#carcosa .ripple{position:absolute;left:0;right:0;top:64%;bottom:0;pointer-events:none;opacity:0;transition:opacity 1.6s ease;background:linear-gradient(to bottom,rgba(180,145,63,0) 0%,rgba(180,145,63,.06) 40%,rgba(180,145,63,0) 100%);filter:url(#water)}
#carcosa.is-entering .ripple{opacity:1}
#carcosa .caption{position:absolute;inset:0;pointer-events:none;transition:opacity 1.6s ease}
#carcosa.is-entering .caption,#carcosa.is-entering .doors{opacity:0}
#carcosa.is-entering .doors{pointer-events:none}

/* doors: invisible zones placed on the plate's own coordinates */
.doors{position:absolute;inset:0;transition:opacity 1.2s ease}
.door{position:absolute;display:block;border-radius:2px;background:transparent;--glow:0}
.door::before{content:"";position:absolute;inset:-16px}
.door::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--glow);transition:opacity 1.8s ease;
  background:radial-gradient(ellipse at 50% 60%,rgba(216,178,90,.26) 0%,rgba(216,178,90,.09) 45%,rgba(216,178,90,0) 75%);
  box-shadow:0 0 28px 6px rgba(216,178,90,.10),inset 0 0 18px rgba(216,178,90,.10)}
.door:hover,.door:focus-visible{--glow:.75}
.door.is-active{--glow:1}
.door.is-active::after{background:radial-gradient(ellipse at 50% 60%,rgba(216,178,90,.36) 0%,rgba(216,178,90,.12) 45%,rgba(216,178,90,0) 78%);box-shadow:0 0 60px 18px rgba(216,178,90,.16),inset 0 0 26px rgba(216,178,90,.14)}
.door.is-done{--glow:.22}
.door.is-done:hover,.door.is-done:focus-visible{--glow:.6}
.door .name{position:absolute;left:50%;top:100%;transform:translate(-50%,10px);white-space:nowrap;font-family:var(--f-title);font-size:9.5px;letter-spacing:.34em;color:rgba(216,178,90,0);transition:color 1.4s ease;text-shadow:0 0 10px #000}
.door:hover .name,.door:focus-visible .name{color:rgba(216,178,90,.6)}
.door.is-done .name{color:rgba(216,178,90,.2)}
#d1{left:23.6%;top:25.6%;width:11.8%;height:44.5%}
#d2{left:50.4%;top:34.4%;width:8.6%;height:31.6%}
#d3{left:66.8%;top:41.6%;width:6%;height:22.8%}
#d4{left:78%;top:47.5%;width:4.5%;height:15.2%}

.title-block{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,900px)}
.title-block h1{margin:0;font-family:var(--f-title);font-weight:500;font-size:clamp(22px,4.2vw,58px);letter-spacing:.34em;color:rgba(216,178,90,.86);text-shadow:0 0 30px rgba(0,0,0,.9),0 0 60px rgba(180,145,63,.15);text-wrap:balance;text-indent:.34em}
.title-block .tag{margin:16px 0 0;font-family:var(--f-title);font-size:clamp(9px,1.05vw,13px);letter-spacing:.42em;color:rgba(141,149,163,.7);text-shadow:0 0 16px #000;text-indent:.42em}
.title-block .welcome{margin:28px auto 0;max-width:min(88vw,560px);font-family:var(--f-read);font-size:clamp(14px,1.35vw,18px);line-height:1.85;color:rgba(203,181,138,.68);text-shadow:0 0 18px #000,0 0 40px #000}
.title-block .welcome span{display:block}
.title-block .welcome span:last-child{margin-top:6px;font-family:var(--f-title);font-size:clamp(9px,1vw,11.5px);letter-spacing:.34em;text-indent:.34em;color:rgba(216,178,90,.62)}
.enter{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);pointer-events:auto;transition:opacity 1.2s ease}

.cmd{display:inline-block;font-family:var(--f-title);font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:rgba(216,178,90,.62);padding:10px 4px;position:relative;text-shadow:0 0 14px #000;transition:color 1.2s ease,letter-spacing 1.2s ease;text-indent:.36em;white-space:nowrap}
.cmd::after{content:"";position:absolute;left:12%;right:12%;bottom:4px;height:1px;background:linear-gradient(90deg,transparent,rgba(216,178,90,.5),transparent);opacity:0;transform:scaleX(.4);transition:opacity 1.2s ease,transform 1.6s ease}
.cmd:hover,.cmd:focus-visible{color:rgba(216,178,90,.95);letter-spacing:.44em}
.cmd:hover::after,.cmd:focus-visible::after{opacity:1;transform:scaleX(1)}
.cmd.is-locked{color:rgba(141,149,163,.3);cursor:default}
.cmd.is-locked:hover{letter-spacing:.36em}
.cmd.is-locked::after{display:none}
.cmd.quiet{font-size:10.5px;color:rgba(180,145,63,.5)}

.finale-text{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);text-align:center;width:min(92vw,820px);opacity:0;transition:opacity 3s ease 1.2s;pointer-events:none}
#carcosa.is-finale .finale-text{opacity:1}
#carcosa.is-finale .enter{opacity:0;transition:opacity 1.2s ease;pointer-events:none}
#carcosa.is-finale .title-block{top:26%;transform:translate(-50%,-50%);transition:top 1.6s ease}
#carcosa.is-finale .title-block .tag,#carcosa.is-finale .title-block .welcome{opacity:0;transition:opacity 1.2s ease}
.finale-text p{margin:0 0 14px;font-family:var(--f-title);font-size:clamp(11px,1.4vw,17px);letter-spacing:.36em;color:rgba(216,178,90,.85);text-shadow:0 0 18px #000;text-indent:.36em}
.finale-text p+p{color:rgba(141,149,163,.7);font-size:clamp(10px,1.15vw,14px)}

/* ---------- scene: intro ---------- */
#intro{background:#050609}
.parch{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(70% 55% at 50% 48%,rgba(60,48,30,.30),transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .12 0'/></filter><rect width='400' height='400' filter='url(%23p)'/></svg>")}
.parch::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 30%,#050609 78%)}
.scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch}
.reading{position:relative;margin:0 auto;width:min(92vw,620px);padding:14vh 0 16vh;color:rgba(203,181,138,.86)}
.reading h2,.doss h2,.ab h2{font-family:var(--f-title);font-weight:500;font-size:clamp(18px,2.4vw,30px);letter-spacing:.32em;text-indent:.32em;color:rgba(226,206,158,.95);text-align:center;margin:0 0 10px;text-wrap:balance}
.reading .lbl{font-family:var(--f-title);font-size:10px;letter-spacing:.34em;color:rgba(180,145,63,.7);margin:0 0 10px}
.reading p{font-size:clamp(16px,1.35vw,19px);line-height:1.62;margin:0 0 5vh;max-width:60ch}
.cmd-row{text-align:center;margin-top:6vh}

/* ---------- scene: king ---------- */
#king{background:#030407}
#king .figure{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
#king video{height:100%;width:auto;max-width:100%;object-fit:cover;display:block;filter:brightness(.9) saturate(.9);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
#king .breath{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 30%,rgba(140,110,40,.08),transparent 60%);animation:breath 9s ease-in-out infinite;mix-blend-mode:screen}
@keyframes breath{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
#king .floor{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(3,4,7,.2) 0%,transparent 30%,transparent 55%,rgba(3,4,7,.92) 100%)}
#king .copy{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:min(92vw,560px);text-align:center;color:rgba(203,181,138,.82)}
#king .copy h2{font-family:var(--f-title);font-weight:500;font-size:clamp(14px,1.8vw,22px);letter-spacing:.34em;color:rgba(216,178,90,.85);margin:0 0 18px;text-indent:.34em}
#king .copy p{font-size:clamp(14px,1.2vw,17px);line-height:1.6;margin:0 0 22px;text-shadow:0 0 12px #000}
#king .copy .seen{font-family:var(--f-title);font-size:11px;letter-spacing:.4em;color:rgba(216,178,90,.5);margin:0 0 18px;text-indent:.4em}

/* ---------- scene: book ---------- */
#book{background:radial-gradient(ellipse at 50% 60%,#0b0d13 0%,#050609 70%)}
#book .table{position:absolute;inset:0;overflow:hidden}
.bookstage{position:absolute;left:50%;top:50%;margin:-312px 0 0 -472px;width:944px;height:624px;transform:translate(var(--pan,0px),var(--lift,0px)) scale(var(--bs,1));transform-origin:50% 50%;transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.bookstage #bookCanvas{position:absolute;inset:0;width:944px;height:624px;display:block;filter:drop-shadow(0 30px 40px rgba(0,0,0,.8)) brightness(.86) saturate(.92)}
.bookstage #burnCanvas{position:absolute;left:-90px;top:7px;width:1121px;height:638px;display:block;opacity:0;pointer-events:none;z-index:4;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.8)) brightness(.98) saturate(1.05);transition:opacity .5s ease}
#book.is-burning #burnCanvas{opacity:1}
#book.is-burning #bookCanvas,#book.is-burning .shade{opacity:0;transition:opacity .5s ease}
.bookstage .shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.28) 49.5%,rgba(0,0,0,.3) 50.5%,rgba(0,0,0,0) 60%),
  radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.35) 100%)}
.page{position:absolute;color:var(--ink);font-family:var(--f-page);opacity:1;transition:opacity .9s ease;mix-blend-mode:multiply}
.page.is-off{opacity:0;transition:opacity .5s ease}
#pgL{left:150px;top:96px;width:280px;height:452px}
#pgR{left:506px;top:96px;width:284px;height:452px}
.page .cap{font-family:var(--f-title);font-size:9.5px;letter-spacing:.3em;color:var(--ink-soft);margin:0 0 6px}
/* click the pages themselves to turn */
.turnzone{position:absolute;top:0;height:100%;width:50%;background:none;z-index:3;cursor:pointer}
#zPrev{left:0}
#zNext{right:0}
.turnzone::after{content:"";position:absolute;bottom:0;width:120px;height:120px;opacity:0;transition:opacity 1.2s ease}
#zPrev::after{left:0;background:radial-gradient(circle at 0% 100%,rgba(216,178,90,.14),transparent 62%)}
#zNext::after{right:0;background:radial-gradient(circle at 100% 100%,rgba(216,178,90,.14),transparent 62%)}
.turnzone:hover::after{opacity:1}
.turnzone.is-off{pointer-events:none;cursor:default}
.turnzone.is-off::after{display:none}
/* right page: the character */
.character{height:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.character .portrait{width:162px;height:198px;flex:none;margin:0 0 12px;border:1px solid rgba(74,58,41,.35);display:flex;align-items:flex-end;justify-content:center;padding:8px;font-family:var(--f-title);font-size:8px;letter-spacing:.24em;color:rgba(74,58,41,.5);background:linear-gradient(150deg,rgba(74,58,41,.05),rgba(74,58,41,.14));box-shadow:inset 0 0 0 4px rgba(203,181,138,.32);overflow:hidden}
.character .portrait img,.character .portrait video{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.34) contrast(1.06) brightness(.9) saturate(.85)}
.character .portrait{position:relative}
.character .portrait::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(43,33,23,.5) 100%),linear-gradient(180deg,rgba(203,181,138,.12),transparent 40%)}
.character .who{margin:0 0 3px;font-family:var(--f-title);font-size:15px;letter-spacing:.16em;color:#3a2c1c}
.character .who span{display:block;font-size:9px;letter-spacing:.26em;color:rgba(74,58,41,.7);margin-top:5px}
.character .rule{width:46px;height:1px;background:rgba(74,58,41,.3);margin:10px 0}
.character .fld{margin:0 0 8px;width:100%;text-align:left}
.character .fld b{display:block;font-family:var(--f-title);font-weight:400;font-size:7.5px;letter-spacing:.28em;color:var(--ink-soft);margin-bottom:2px;text-align:left}
.character .fld p{margin:0;font-size:10.5px;line-height:1.4;color:var(--ink)}
/* front matter — the play's own title spread */
.front{height:100%;display:flex;flex-direction:column;justify-content:center;text-align:center;color:var(--ink)}
.front h2{margin:0 0 14px;font-family:var(--f-title);font-weight:500;font-size:clamp(15px,1.5vw,20px);letter-spacing:.26em;text-indent:.26em;color:#3a2c1c;line-height:1.5}
.front .fmt{margin:0 0 22px;font-family:var(--f-title);font-size:9.5px;letter-spacing:.3em;text-indent:.3em;color:rgba(74,58,41,.8)}
.front .rule{width:54px;height:1px;background:rgba(74,58,41,.32);margin:0 auto 22px}
.front .line{margin:0;font-size:13px;line-height:1.55;font-style:italic;color:rgba(43,33,23,.9);max-width:26ch;margin-inline:auto}
.front .lbl{margin:0 0 12px;font-family:var(--f-title);font-size:8.5px;letter-spacing:.3em;color:var(--ink-soft)}
.front .body{margin:0;font-size:12.5px;line-height:1.5;text-align:left}
.leaf{height:100%;display:flex;flex-direction:column}

.leaf h3{font-family:var(--f-title);font-weight:500;font-size:15px;letter-spacing:.26em;margin:0 0 3px;color:#3a2c1c}
.leaf .ep{font-family:var(--f-title);font-size:11px;letter-spacing:.2em;color:#5b4527;margin:0;line-height:1.35}
.leaf .src{margin:5px 0 16px;font-size:11px;font-style:italic;color:rgba(74,58,41,.7);padding-bottom:10px;border-bottom:1px solid rgba(74,58,41,.22)}
/* reserved place for the character's photograph — swapped for the real print when it arrives */
.leaf .fld{margin:0 0 12px}
.leaf .fld b{display:block;font-family:var(--f-title);font-weight:400;font-size:8.5px;letter-spacing:.3em;color:var(--ink-soft);margin-bottom:2px}
.leaf .fld p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink)}
.leaf .fld p em{color:#5a4326}
.leaf .ev{font-family:var(--f-title);font-size:9px;letter-spacing:.26em;color:rgba(74,58,41,.75);margin-top:auto;padding-top:8px;border-top:1px solid rgba(74,58,41,.25)}
.leaf.sealed{align-items:center;justify-content:center;text-align:center}
.leaf.sealed p{font-style:italic;color:rgba(74,58,41,.7);font-size:13px;line-height:1.6;margin:0}
/* commands live under the book, not on the page */
#bookbar{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);display:flex;gap:56px;align-items:center;z-index:8;transition:opacity 1s ease}
#bookbar.is-off{opacity:0;pointer-events:none}
#book .ember{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2.4s ease;mix-blend-mode:screen;
  background:radial-gradient(ellipse at 50% 62%,rgba(255,140,40,.30),rgba(180,50,10,.14) 38%,transparent 68%)}
#book.is-burning .ember{opacity:1;animation:flicker .18s steps(2) infinite}
@keyframes flicker{50%{opacity:.86}}

#book .char{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2.6s ease;background:radial-gradient(ellipse at 50% 60%,#000 20%,transparent 70%)}
#book.is-ashes .char{opacity:1}
#pageSwitch{position:absolute;left:50%;top:14px;transform:translateX(-50%);display:none;gap:22px;z-index:46}
#pageSwitch button{font-family:var(--f-title);font-size:10px;letter-spacing:.3em;color:rgba(180,145,63,.45);padding:6px 2px}
#pageSwitch button.is-current{color:rgba(216,178,90,.9)}
#pageSwitch button:focus-visible{text-decoration:underline;text-underline-offset:5px}

/* ---------- reading scenes: dossier / audience / vedma ---------- */
#dossier,#audience,#about{background:#07080d}
#dossier::before,#audience::before,#about::before{content:"";position:absolute;inset:0;background-image:var(--nave);background-size:cover;background-position:50% 38%;opacity:.85;filter:brightness(.9) saturate(.9)}
#dossier::after,#audience::after,#about::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,8,13,.35),rgba(7,8,13,.72) 40%,rgba(7,8,13,.93) 78%,rgba(7,8,13,.97)),radial-gradient(ellipse at 50% 30%,rgba(20,28,48,.2),transparent 70%)}
#dossier .scroll,#audience .scroll,#about .scroll{z-index:1}
.doss{width:min(92vw,760px);}
.ab{width:min(94vw,1140px);}
.doss,.ab{margin:0 auto;padding:11vh 0 14vh;font-family:var(--f-read);font-size:18px;line-height:1.55;color:rgba(160,166,178,.88)}
.ab .who{text-align:center}
.sub{max-width:none!important;text-align:center;font-family:var(--f-title);font-size:10px;letter-spacing:.34em;color:rgba(141,149,163,.5);text-align:center;margin:-5vh 0 7vh;text-indent:.34em}
/* the dossier reads as one centred column: every block shares the same measure and edge */
.doss{color:rgba(226,222,214,.9)}
.doss section,.ab section{margin:0 0 40px;padding-top:26px;border-top:1px solid rgba(180,145,63,.16)}
.doss h3,.ab h3{margin:0 0 14px;font-family:var(--f-title);font-weight:400;font-size:10.5px;letter-spacing:.34em;text-indent:.34em;color:rgba(216,178,90,.9);text-align:center}
.doss p,.ab p{margin:0 auto 12px;max-width:58ch}
.doss ul{margin:0 auto;padding:0;max-width:58ch;list-style:none}
.doss li{margin:0 0 14px;padding-left:22px;position:relative}
.doss li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;background:rgba(216,178,90,.7)}
.tl{display:grid;grid-template-columns:1fr auto;gap:8px 24px;max-width:58ch;margin:0 auto;font-variant-numeric:tabular-nums}
.tl span:nth-child(even){color:rgba(216,178,90,.8);text-align:right;white-space:nowrap}
.tl .tot,.tl .tot+span{border-top:1px solid rgba(180,145,63,.2);padding-top:8px;margin-top:4px}
.tl .tot{font-weight:500}
.foot{display:flex;justify-content:center;gap:44px;margin-top:9vh;flex-wrap:wrap;align-items:center}
.reset{font-family:var(--f-title);font-size:9px;letter-spacing:.3em;color:rgba(141,149,163,.3)}
.reset:hover,.reset:focus-visible{color:rgba(216,178,90,.7)}

/* THE AUDIENCE — a playbill: two great ages, then the argument */

/* VEDMA FILMS — five posters on a dark shelf */
.ab .who p{font-size:19px;max-width:58ch;margin-left:auto;margin-right:auto}
.ab .who p.quote{max-width:none;font-family:var(--f-title);font-size:13px;letter-spacing:.3em;color:rgba(216,178,90,.8);margin:18px 0 0;text-indent:.3em}
.shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:8px}
.work{display:flex;flex-direction:column;gap:10px}
.poster{aspect-ratio:2/3;border:1px solid rgba(180,145,63,.16);display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:var(--f-title);font-size:8.5px;letter-spacing:.26em;color:rgba(180,145,63,.32);
  background:linear-gradient(160deg,rgba(27,31,39,.5),rgba(10,16,32,.6));position:relative;overflow:hidden}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work .wt{font-family:var(--f-title);font-size:10px;letter-spacing:.22em;color:rgba(203,181,138,.75);text-align:center;min-height:2.6em;line-height:1.3}
.work .wb{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.work .wb a{font-family:var(--f-title);font-size:9px;letter-spacing:.24em;color:rgba(180,145,63,.55);padding:4px 0;border-bottom:1px solid transparent;transition:color .8s,border-color .8s;text-decoration:none}
.work .wb a:hover,.work .wb a:focus-visible{color:rgba(216,178,90,.95);border-color:rgba(216,178,90,.5)}
.work .poster{transition:box-shadow 1.2s ease,transform 1.2s ease}
.work:hover .poster{box-shadow:0 0 34px rgba(216,178,90,.14);transform:translateY(-3px)}
.work .poster img{transition:filter 1.2s ease;filter:brightness(.82) saturate(.9)}
.work:hover .poster img{filter:brightness(1) saturate(1)}


/* ---------- the audience: three full scenes, not a column of text ---------- */
#audience .scroll{scroll-behavior:smooth}
#audience .act{position:relative;min-height:100vh;width:min(92vw,1000px);margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:12vh 0;color:rgba(226,222,214,.94)}
#audience [data-rv]{opacity:0;transform:translateY(22px);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.6,.3,1)}
#audience [data-rv].is-in{opacity:1;transform:none}
.huge{font-family:var(--f-title);font-weight:500;font-size:clamp(26px,5.4vw,68px);letter-spacing:.16em;text-indent:.16em;line-height:1.18;
  color:rgba(226,206,158,.96);margin:0 0 8vh;text-align:center;text-wrap:balance;text-shadow:0 0 40px rgba(0,0,0,.9)}
.huge.sm{font-size:clamp(22px,3.6vw,44px);margin-bottom:9vh}
.act-prologue{text-align:center}
.act-prologue .count{margin:0 0 22px;font-family:var(--f-title);font-size:clamp(13px,1.9vw,24px);letter-spacing:.3em;text-indent:.3em;color:rgba(226,222,214,.8);text-shadow:0 0 24px #000}
.act-prologue .count.witness{color:rgba(226,206,158,.98);font-size:clamp(14px,2.2vw,28px)}
.act-prologue .count.witness span{display:inline-block;transition:opacity 1.1s ease}
.act-prologue .count.witness.turning span{opacity:0}
.act-prologue [data-rv]:nth-of-type(2){transition-delay:.35s}
.act-prologue [data-rv]:nth-of-type(3){transition-delay:.7s}
.act-prologue [data-rv]:nth-of-type(4){transition-delay:1.05s}

.act-ages{gap:11vh}
.age .num{margin:0;font-family:var(--f-title);font-weight:500;font-size:clamp(64px,15vw,190px);line-height:.92;letter-spacing:.02em;
  color:rgba(226,206,158,.95);text-shadow:0 0 60px rgba(0,0,0,.85),0 0 120px rgba(180,145,63,.14)}
.age .k{margin:18px 0 14px;font-family:var(--f-title);font-size:clamp(9px,1.05vw,12px);letter-spacing:.36em;text-indent:.36em;color:rgba(216,178,90,.9)}
.age .k::before{content:"";display:block;width:120px;height:1px;margin-bottom:16px;background:linear-gradient(90deg,rgba(216,178,90,.75),rgba(216,178,90,0))}
.age .say{margin:0;max-width:44ch;font-family:var(--f-read);font-size:clamp(17px,1.5vw,21px);line-height:1.62;color:rgba(226,222,214,.9)}
.act-ages .age:nth-of-type(2){align-self:flex-end;text-align:right}
.act-ages .age:nth-of-type(2) .k::before{margin-left:auto;background:linear-gradient(270deg,rgba(216,178,90,.75),rgba(216,178,90,0))}
.act-ages .age:nth-of-type(2) .say{margin-left:auto}
.creed{margin:0;text-align:center;font-family:var(--f-title);font-size:clamp(11px,1.5vw,18px);letter-spacing:.28em;text-indent:.28em;color:rgba(226,206,158,.92);text-shadow:0 0 28px #000}

.theses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7vh}
.theses li{display:grid;grid-template-columns:auto 1fr;gap:0 34px;align-items:start}
.theses .no{font-family:var(--f-title);font-size:clamp(24px,3.4vw,44px);line-height:1;color:rgba(216,178,90,.55);font-variant-numeric:tabular-nums;padding-top:4px}
.theses h3{margin:0 0 10px;font-family:var(--f-title);font-weight:500;font-size:clamp(14px,1.7vw,21px);letter-spacing:.16em;line-height:1.35;color:rgba(226,206,158,.96);text-wrap:balance}
.theses p{margin:0;max-width:58ch;font-family:var(--f-read);font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:rgba(226,222,214,.88)}
.arrived{margin:14vh 0 0;text-align:center;font-family:var(--f-title);font-size:clamp(15px,2.6vw,34px);letter-spacing:.24em;text-indent:.24em;line-height:1.4;
  color:rgba(226,206,158,.98);text-shadow:0 0 46px rgba(0,0,0,.9),0 0 90px rgba(180,145,63,.16);text-wrap:balance}
.act-foot{margin-top:7vh;display:flex;justify-content:center;gap:44px;flex-wrap:wrap}

/* the nave stays atmosphere: a deep blue-black wash carries the type */
#audience::after{background:linear-gradient(to bottom,rgba(5,7,14,.62),rgba(5,8,18,.82) 30%,rgba(4,6,12,.9) 70%,rgba(4,6,12,.94)),radial-gradient(ellipse at 50% 20%,rgba(24,34,60,.3),transparent 65%)}

@media (max-width:820px), (orientation:portrait){
  #audience .act{min-height:auto;padding:16vh 0 10vh}
  .act-ages{gap:14vh}
  .act-ages .age:nth-of-type(2){align-self:stretch;text-align:left}
  .act-ages .age:nth-of-type(2) .k::before{margin-left:0;background:linear-gradient(90deg,rgba(216,178,90,.75),rgba(216,178,90,0))}
  .age .say{font-size:17px;line-height:1.75;max-width:none}
  .theses li{grid-template-columns:1fr;gap:10px}
  .theses .no{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  #audience [data-rv]{opacity:1;transform:none;transition:none}
}

/* ---------- responsive ---------- */
/* Carcosa and the nave each have a plate per screen shape; the doors are re-mapped with them */
@media (max-aspect-ratio:15/10) and (min-aspect-ratio:8/10){
  #carcosa .plate{background-image:var(--carcosa-tablet);background-position:50% 50%}
  #d1{left:18%;top:11%;width:24%;height:56%}
  #d2{left:46.5%;top:41%;width:9.5%;height:23%}
  #d3{left:64.5%;top:44%;width:8%;height:20%}
  #d4{left:78%;top:47%;width:6.5%;height:17%}
}
@media (max-aspect-ratio:8/10){
  #carcosa .plate{background-image:var(--carcosa-portrait);background-position:50% 50%}
  #d1{left:6%;top:43%;width:38%;height:35%}
  #d2{left:45%;top:61%;width:11%;height:14%}
  #d3{left:63%;top:62%;width:10%;height:13%}
  #d4{left:77%;top:63%;width:9%;height:11.5%}
}
/* the nave has its own plate for each shape of screen */
@media (max-aspect-ratio:15/10) and (min-aspect-ratio:8/10){
  #dossier::before,#audience::before,#about::before{background-image:var(--nave-tablet)}
}
@media (max-aspect-ratio:8/10){
  #dossier::before,#audience::before,#about::before{background-image:var(--nave-portrait);background-position:50% 30%}
}
@media (max-width:820px), (orientation:portrait){
  .enter{bottom:9%}
  .chrome{font-size:9.5px;letter-spacing:.26em}
  #owner{top:16px;right:16px}#topleft{top:14px;left:16px;gap:14px}#industry{bottom:14px;left:16px}
  .restart{right:14px;bottom:12px;padding:8px 12px;font-size:9px;letter-spacing:.22em}
  .case-grid{width:min(94vw,340px);gap:8px;bottom:19%}
  .case-grid button .n{font-size:13px}
  .door::before{inset:-22px}
  #pageSwitch{display:none}
  .character .portrait{width:150px;height:186px}
  #bookbar{bottom:64px;gap:18px;width:100%;justify-content:center;flex-wrap:wrap}
  #bookbar .cmd{font-size:10px;padding:8px 2px}
  .reading{padding:12vh 0 14vh}
  #king .copy{bottom:5%}
  #king video{-webkit-mask-image:none;mask-image:none;width:100%;height:100%}
    .shelf{grid-template-columns:repeat(2,1fr)}
  .doss,.ab{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  #grain,#carcosa .fog,#king .breath{animation:none}
  .scene,.scene.is-on{transition-duration:.6s}
  #carcosa .world{transition:none}
  .bookstage{transition:none}
}