:root{
  --bg:#0A0909; --cream:#E8DCC8; --ember:#F08A2C; --red:#B3121A;
  --muted:#8c8478; --line:rgba(232,220,200,.11);
  --bar:74px; --pad:2.2vw; --col:clamp(110px,12.7vw,330px); --gap:1.6vw;
  --ui:'Hind',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Cormorant Garamond','Cormorant',Georgia,'Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--cream);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);font-family:var(--ui);font-size:16px;line-height:1.5;overflow-x:hidden;transition:background-color .3s}
body.is-black{background:#000}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad);background:var(--bg);border-bottom:1px solid var(--line);transition:background-color .3s,border-color .3s}
body.is-black .bar{background:#000}
.bar>*{transition:opacity .35s}
.bar-logo{justify-self:start;display:block;width:clamp(118px,11.8vw,300px)}
.bar-logo img{width:100%;height:auto}
.bar-count{text-align:center;line-height:1.25}
.bar-count b{display:block;font-weight:500;font-size:15px;letter-spacing:.06em}
.bar-count span{display:block;font-size:12px;letter-spacing:.3em;color:var(--muted);margin-top:3px;white-space:nowrap}
.bar-count i{font-style:normal;display:inline-block;min-width:1.2em;text-align:center}
.btn-outline{justify-self:end;font-weight:500;font-size:14px;letter-spacing:.04em;text-decoration:none;color:var(--ember);border:1px solid var(--ember);padding:7px 20px 6px;border-radius:3px;transition:background-color .2s,color .2s}
.btn-outline:hover{background:var(--ember);color:#150c05}
/* during the black frame and after it, the bar steps out of the way */
body.is-black .bar,body.in-chapter .bar{border-color:transparent}
body.in-chapter .bar{background:transparent}
body.is-black .bar>*,body.in-chapter .bar>*{opacity:0;pointer-events:none}

/* ---------- the roll ---------- */
.roll{position:relative;height:calc(100svh + var(--roll-extra,4000px))}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:var(--col) minmax(0,1fr) var(--col);column-gap:var(--gap);padding:calc(var(--bar) + 2.4svh) var(--pad) 0;background:var(--bg);transition:background-color .3s}
body.is-black .stage{background:#000}
.lcol,.rcol{height:1px}
.main{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center}
.frame{position:relative;aspect-ratio:4/3;width:min(100%,calc((100svh - var(--bar) - 2.4svh - 104px) * 4 / 3),1720px);background:#050404;overflow:hidden;container-type:inline-size;touch-action:pan-y}
body.is-black .frame{background:#000}
.ph,.ph picture,.ph img{position:absolute;inset:0;width:100%;height:100%}
.ph img{object-fit:cover}
.dev{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 40%,#17110f 0,#0b0908 60%,#070606 100%)}
.dev span{font-size:clamp(11px,1.6cqw,16px);letter-spacing:.34em;text-transform:lowercase;color:rgba(232,220,200,.28)}
.frame.is-missing .dev{display:flex}
.frame.is-black .dev,.frame.is-black .grain{display:none}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -.1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:220px 220px}
.veil{position:absolute;inset:0;background:#000;opacity:1;pointer-events:none}
.ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ring path{fill:none;stroke:var(--red);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 1.5px rgba(0,0,0,.55))}
.stamp{position:absolute;left:3%;bottom:3.4%;white-space:pre;font-weight:400;font-size:clamp(11px,1.6cqw,22px);letter-spacing:.02em;color:#f1e8d6;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.5);pointer-events:none}
.frame.has-ring{cursor:crosshair}
.cap{width:min(100%,calc((100svh - var(--bar) - 2.4svh - 104px) * 4 / 3),1720px);min-height:30px;margin-top:11px;font-size:15px;line-height:1.4;color:var(--cream);display:flex;align-items:baseline;gap:.5em}
#cap-text{opacity:.82}
.cap:empty{display:none}
.mark{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--red);transform:translateY(-.08em) scale(0);opacity:0;transition:transform .25s .35s,opacity .25s .35s}
.cap.on .mark{transform:translateY(-.08em) scale(1);opacity:1}
body.is-black .cap{opacity:0}

/* thumbnails */
.thumbs{position:absolute;left:0;right:0;top:calc(var(--bar) + 2.4svh);bottom:0;overflow:hidden;pointer-events:none}
.th{position:absolute;left:0;top:0;border:0;padding:0;margin:0;background:#050404;cursor:pointer;overflow:hidden;opacity:0;will-change:transform,opacity;pointer-events:none;color:inherit}
.th.on{pointer-events:auto}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.62));pointer-events:none}
.th b,.th em{position:absolute;bottom:5%;font-style:normal;font-weight:400;font-size:clamp(9px,.9vw,13px);z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.th b{left:6%;color:#f1e8d6}
.th em{right:6%;color:rgba(241,232,214,.55)}
.th:focus-visible{outline-offset:-2px}
body.is-black .thumbs,body.is-black .foot{opacity:0;pointer-events:none}
.thumbs,.foot{transition:opacity .35s}

.foot{position:absolute;left:0;right:0;bottom:0;height:min(9svh,84px);display:flex;align-items:flex-start;justify-content:center;padding-top:2svh}
.foot p{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(11px,.95vw,15px);letter-spacing:.34em;text-transform:uppercase;color:rgba(232,220,200,.34)}
.snd{position:absolute;right:var(--pad);bottom:max(14px,2.4svh);width:34px;height:34px;display:grid;place-items:center;color:rgba(232,220,200,.42);background:none;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:color .2s,border-color .2s;pointer-events:auto}
.snd:hover{color:var(--cream);border-color:var(--line)}
.snd[aria-pressed="true"]{color:var(--ember)}
.snd[aria-pressed="true"] .snd-off{display:none}
.snd[aria-pressed="false"] .snd-on{display:none}

.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:50}

/* ---------- the last chapter ---------- */
.chapter{position:relative;z-index:2;background:var(--bg);display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(72px,14svh,160px) clamp(16px,5vw,80px) clamp(48px,9svh,100px);font-family:var(--serif)}
.posters{display:flex;justify-content:center;gap:clamp(12px,3.2vw,56px);width:min(1060px,100%)}
.posters picture{flex:1 1 0;min-width:0}
.posters img{width:100%;box-shadow:0 2px 0 rgba(255,255,255,.03),0 30px 70px rgba(0,0,0,.75)}
.title{width:min(640px,66vw);margin-top:clamp(56px,10svh,110px)}
.by{margin:clamp(22px,3.4svh,38px) 0 0;font-weight:500;font-size:clamp(13px,1.25vw,19px);letter-spacing:.46em;text-indent:.46em;color:var(--cream)}
.btn-ember{margin-top:clamp(30px,5svh,56px);font-family:var(--ui);font-weight:600;font-size:clamp(14px,1.1vw,17px);letter-spacing:.12em;text-indent:.12em;text-decoration:none;color:#170d05;background:var(--ember);padding:15px 46px 13px;border-radius:3px;transition:filter .2s,transform .2s}
.btn-ember:hover{filter:brightness(1.1)}
.btn-ember:active{transform:translateY(1px)}
.rating{margin-top:clamp(34px,5.4svh,58px);display:flex;align-items:center;gap:14px}
.r18{font-family:var(--ui);font-weight:600;font-size:15px;line-height:1;border:1.5px solid rgba(232,220,200,.75);border-radius:4px;padding:6px 9px 5px}
.rating p{margin:0;font-size:clamp(16px,1.2vw,19px);letter-spacing:.04em;color:rgba(232,220,200,.78)}
.fiction{margin:clamp(22px,3.4svh,34px) 0 0;font-style:italic;font-size:clamp(16px,1.2vw,19px);color:rgba(232,220,200,.55)}
.legal{margin-top:clamp(44px,8svh,90px);display:flex;flex-direction:column;align-items:center;gap:18px}
.legal img{width:clamp(150px,15vw,230px);opacity:.92}
.legal p{margin:0;font-family:var(--ui);font-size:13px;letter-spacing:.06em;color:rgba(232,220,200,.42)}

/* ---------- phone ---------- */
@media (max-width:820px){
  :root{--bar:88px;--pad:16px}
  .bar{grid-template-columns:1fr auto;grid-template-rows:auto auto;align-content:center;row-gap:3px;padding:0 16px}
  .bar-logo{width:118px;grid-column:1;grid-row:1}
  .btn-outline{grid-column:2;grid-row:1;font-size:13px;padding:6px 16px 5px}
  .bar-count{grid-column:1/-1;grid-row:2;text-align:left;display:flex;gap:12px;align-items:baseline}
  .bar-count b{font-size:12px;letter-spacing:.1em}
  .bar-count span{font-size:11px;letter-spacing:.24em;margin-top:0}
  .stage{display:flex;flex-direction:column;justify-content:center;padding:var(--bar) 16px 140px}
  .lcol,.rcol{display:none}
  .main{display:block;width:100%}
  .frame,.cap{width:100%}
  .cap{font-size:14px;margin-top:10px;min-height:42px}
  .thumbs{left:0;right:0;top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));height:60px}
  .th{outline:1px solid transparent;outline-offset:-1px}
  .th.cur{outline:1.5px solid var(--cream)}
  .th b{font-size:9px}.th em{display:none}
  .foot{height:0;padding:0}
  .foot p{display:none}
  .snd{right:12px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:30px;height:30px}
  .title{width:78vw}
  .by{font-size:12px;letter-spacing:.3em;text-indent:.3em}
  .rating{flex-direction:column;gap:10px}
}
@media (max-width:820px) and (max-height:700px){ .snd{display:none} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001s!important;animation-duration:.001s!important}
}