:root{--bar:64px;--ctl:84px;--wine:#2b060e;--ink:#14030a;--maroon:#6b1226;--blush:#f4c2cc;--rose:#ff6b8b;--snow:#fff3f1}
*{box-sizing:border-box}
html,body{height:100%;height:100dvh;margin:0;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(110% 70% at 50% -10%,#6b1226 0%,#2b060e 48%,#14030a 100%) fixed;color:var(--snow);font-family:'DM Sans',system-ui,sans-serif}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.bar{position:fixed;top:0;left:0;right:0;height:calc(var(--bar) + env(safe-area-inset-top,0px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:env(safe-area-inset-top,0px) max(clamp(14px,3vw,36px),env(safe-area-inset-right,0px)) 0 max(clamp(14px,3vw,36px),env(safe-area-inset-left,0px));z-index:5}
.back-l{justify-self:start;font-size:13px;color:var(--blush);text-decoration:none;opacity:.8;transition:opacity .2s}
.back-l:hover{opacity:1}
.ttl{font:italic 500 24px 'Bodoni Moda',serif;letter-spacing:-.01em}
.dlb{justify-self:end;font:800 10px 'Unbounded',sans-serif;background:var(--blush);color:var(--wine);padding:11px 18px;border-radius:99px;text-decoration:none;transition:background .2s,transform .2s}
@media (hover:hover){.dlb:hover{background:var(--rose);transform:translateY(-1px)}}

.stage{position:fixed;top:calc(var(--bar) + env(safe-area-inset-top,0px));bottom:calc(var(--ctl) + env(safe-area-inset-bottom,0px));left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);padding:0 6px;display:flex;align-items:center;justify-content:center;transition:translate .9s cubic-bezier(.3,.7,.2,1)}
.book{position:relative;width:100%;max-width:1100px;height:100%}

.page{background:var(--ink);color:var(--snow);overflow:hidden;container-type:inline-size;font-family:'DM Sans',sans-serif}
.page>img{width:100%;height:100%;object-fit:cover;display:block}
.page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 6%)}
.page.l::after{background:linear-gradient(270deg,rgba(0,0,0,.4),transparent 6%)}
.cover::after,.back::after{display:none}
.bw>img{filter:grayscale(1) contrast(1.1)}
.fo{position:absolute;left:0;right:0;bottom:3cqw;z-index:2;text-align:center;font:500 max(2.3cqw,6.5px) 'DM Sans',sans-serif;font-style:normal;letter-spacing:.1em;color:rgba(255,243,241,.85);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.dl .fo{color:var(--maroon);text-shadow:none}

/* cover */
.cover::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(43,6,14,.5),transparent 25%,transparent 45%,rgba(43,6,14,.92))}
.cover>*:not(img){position:absolute;z-index:2}
.mast{top:6cqw;left:7cqw;font:800 3.4cqw 'Unbounded',sans-serif;color:var(--blush)}
.issue{top:5.6cqw;right:7cqw;font:italic 400 3.8cqw 'Bodoni Moda',serif}
.cover h1{left:5.5cqw;right:4cqw;bottom:20cqw;margin:0;font:italic 700 15.5cqw/.85 'Bodoni Moda',serif;letter-spacing:-.035em;color:#fff;text-shadow:0 4px 30px rgba(43,6,14,.6)}
.by{left:7cqw;bottom:7cqw;font:400 max(2.9cqw,7.5px)/1.5 'DM Sans',sans-serif;color:rgba(255,243,241,.9)}
.badge{right:7cqw;bottom:6cqw;width:17cqw;height:17cqw;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--rose);color:var(--wine);font:800 3cqw/1.15 'Unbounded',sans-serif;transform:rotate(-12deg)}

/* text pages */
.in{position:absolute;inset:0;z-index:1;padding:10cqw 9cqw 11cqw;display:flex;flex-direction:column;justify-content:flex-end}
.in .lg{width:22cqw;height:auto;margin:0 0 auto}
.in h2{margin:0 0 5cqw;font:italic 500 11cqw/.95 'Bodoni Moda',serif;letter-spacing:-.025em}
.in p{margin:0 0 3cqw;max-width:34ch;font-size:max(3.3cqw,8.5px);line-height:1.6;color:rgba(255,243,241,.82)}
.in .sm{font-size:max(2.7cqw,7.5px);color:var(--blush)}
.in a{text-decoration:underline;text-underline-offset:3px}

.intro{background:radial-gradient(90% 60% at 85% 0%,#7a1730,transparent 70%),var(--ink)}
.ch::before{position:absolute;top:0;left:5cqw;font:italic 700 52cqw/1 'Bodoni Moda',serif;opacity:.16;pointer-events:none}
.c1{background:var(--maroon)}.c1::before{content:"I"}
.c2{background:var(--blush)}.c2::before{content:"II";color:var(--maroon);opacity:.2}
.c2 h2,.c2 p{color:var(--wine)}
.c3{background:radial-gradient(80% 50% at 20% 100%,rgba(255,107,139,.5),transparent 70%),#0f0206}.c3::before{content:"III"}

.cred{background:radial-gradient(70% 50% at 50% 100%,#6b1226,transparent 75%),var(--ink)}
.cred .in{justify-content:center;align-items:center;text-align:center}
.cred .lg{margin:0 0 9cqw}
.cred .q{font:italic 500 8.5cqw/1.05 'Bodoni Moda',serif;letter-spacing:-.02em;color:var(--snow);margin-bottom:8cqw}

.dl{background:var(--blush)}
.dl h2,.dl p{color:var(--wine)}
.dl .in .sm{color:var(--maroon)}
.btn{align-self:flex-start;margin:2cqw 0 7cqw;padding:3.6cqw 6.5cqw;border-radius:99px;background:var(--wine);color:var(--blush);text-decoration:none;font:800 3cqw 'Unbounded',sans-serif;transition:background .2s}
@media (hover:hover){.btn:hover{background:var(--rose);color:var(--wine)}}


/* controls */
.ctl{position:fixed;bottom:0;left:0;right:0;height:calc(var(--ctl) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);display:flex;align-items:center;justify-content:center;gap:18px;z-index:5}
.ctl button{width:48px;height:48px;touch-action:manipulation;border-radius:50%;border:1px solid rgba(244,194,204,.4);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);color:var(--blush);font-size:22px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
@media (hover:hover){.ctl button:hover{background:var(--blush);color:var(--wine)}}
.ctl button:active{background:var(--blush);color:var(--wine)}
#pg{min-width:150px;text-align:center;font:italic 400 17px 'Bodoni Moda',serif}
.hint{position:fixed;right:28px;bottom:30px;margin:0;z-index:5;font-size:12px;color:var(--blush);padding:8px 14px;border:1px solid rgba(244,194,204,.3);border-radius:99px;transition:opacity .5s}
.hint.off{opacity:0}

.load{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:var(--ink);transition:opacity .5s,visibility .5s}
.load.off{opacity:0;visibility:hidden}
.load span{font:italic 400 18px 'Bodoni Moda',serif;color:var(--blush);animation:pulse 1.2s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.35}to{opacity:1}}
.rot{display:none;position:fixed;left:50%;bottom:calc(var(--ctl) + env(safe-area-inset-bottom,0px) + 10px);translate:-50% 0;margin:0;z-index:5;width:max-content;max-width:calc(100% - 28px);text-align:center;font-size:12px;line-height:1.4;color:var(--blush);padding:8px 14px;border:1px solid rgba(244,194,204,.3);border-radius:99px;background:rgba(20,3,10,.55);backdrop-filter:blur(8px);transition:opacity .5s}
.rot.off{opacity:0;pointer-events:none}

/* phones + small tablets: same two-page spread as desktop, just scaled */
@media (max-width:760px){
  :root{--bar:56px;--ctl:76px}
  .ttl{font-size:20px}
  .hint{display:none}
  .dlb{font-size:9px;padding:10px 14px}
}
@media (max-width:620px){
  .ttl{display:none}
  .bar{grid-template-columns:1fr auto}
  .stage{padding:0 4px}
}
@media (max-width:760px) and (orientation:portrait){.rot{display:block}}
@media (max-width:360px){.back-l{font-size:12px}.dlb{padding:9px 11px}}

/* phone held sideways: use every pixel of height, arrows float at the sides */
@media (max-height:520px) and (orientation:landscape){
  :root{--bar:40px;--ctl:22px}
  .bar{grid-template-columns:1fr auto}
  .ttl{display:none}
  .back-l{font-size:12px}
  .dlb{font-size:8px;padding:8px 12px}
  .hint{display:none}
  .ctl{pointer-events:none;gap:0;justify-content:center;align-items:flex-end}
  .ctl button{pointer-events:auto;position:fixed;top:50%;translate:0 -50%;width:42px;height:42px;font-size:20px;background:rgba(20,3,10,.45)}
  #pv{left:max(8px,env(safe-area-inset-left,0px))}
  #nx{right:max(8px,env(safe-area-inset-right,0px))}
  #pg{min-width:0;font-size:12px;padding-bottom:3px}
}
@media (prefers-reduced-motion:reduce){.stage{transition:none}}

/* fallback when the flip library fails to load: simple vertical scroll */
.nolib body{overflow:auto}
.nolib html,.nolib{overflow:auto}
.nolib .stage{position:static;display:block;padding:76px 16px 24px}
.nolib .book{height:auto;max-width:480px;margin:0 auto;display:grid;gap:18px}
.nolib .page{position:relative;aspect-ratio:2/3;border-radius:6px}
.nolib .ctl,.nolib .hint{display:none}

/* editorial photo pages */
.cp{position:absolute;z-index:2;left:7cqw;right:7cqw;margin:0;display:flex;flex-direction:column;gap:1.2cqw}
.cp b{font:italic 500 8cqw/1 'Bodoni Moda',serif;letter-spacing:-.025em}
.cp i{font:400 max(2.7cqw,7.5px)/1.4 'DM Sans',sans-serif;font-style:normal;letter-spacing:.04em}
.fb::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 62%,rgba(20,3,10,.82))}
.fb .cp{bottom:10cqw;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.fr{background:#efe7e3}
.fr>img{position:absolute;top:7cqw;left:7cqw;width:86cqw;height:112cqw}
.fr .cp{bottom:10cqw;color:var(--wine)}
.fr .cp i{color:var(--maroon)}
.fr .fo{color:var(--maroon);text-shadow:none}
.fr::after{z-index:3}
.wide>img,.bw>img{object-position:center}

/* ---- flat magazine look: no page-stack edge, no frame ---- */
.stf__parent,.stf__block,.stf__item,.page{border:0!important;outline:0!important}
.stf__item{box-shadow:none!important}
.cover::before{background:linear-gradient(90deg,rgba(0,0,0,.35) 0,transparent 6%),linear-gradient(180deg,rgba(43,6,14,.5),transparent 25%,transparent 45%,rgba(43,6,14,.92))}
.mast{background:linear-gradient(100deg,#fff,#f4c2cc 40%,#fff 60%,#e8a5b3);-webkit-background-clip:text;background-clip:text;color:transparent}

/* extra chapters */
.c4{background:var(--maroon)}.c4::before{content:"IV"}
.c5{background:var(--blush)}.c5::before{content:"V";color:var(--maroon);opacity:.2}
.c5 h2,.c5 p{color:var(--wine)}
.full::before{display:none}
.full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* magazine back cover */
.back{background:#0b0306}
.back>img.bk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.8)}
.back::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,3,10,.65),transparent 28%,transparent 42%,rgba(20,3,10,.94))}
.back>*:not(.bk-img){position:absolute;z-index:2}
.back .lg{top:6.5cqw;left:7cqw;width:13cqw;height:auto;margin:0}
.bk-line{left:7cqw;right:7cqw;bottom:30cqw;display:flex;flex-direction:column;gap:3cqw}
.bk-line em{font:italic 700 13cqw/.88 'Bodoni Moda',serif;letter-spacing:-.035em;color:#fff;text-shadow:0 4px 30px rgba(20,3,10,.6)}
.bk-line span{font:800 2.3cqw 'Unbounded',sans-serif;color:var(--blush);letter-spacing:.02em}
.bk-foot{left:7cqw;right:7cqw;bottom:7cqw;display:flex;justify-content:space-between;align-items:flex-end;gap:4cqw}
.bk-id{display:flex;flex-direction:column;gap:.8cqw;font:400 max(2.6cqw,7px)/1.4 'DM Sans',sans-serif;color:rgba(255,243,241,.85)}
.bk-id b{font:800 3cqw 'Unbounded',sans-serif;color:#fff;margin-bottom:1cqw}
.bk-code{background:#fff;padding:2cqw 2.4cqw 1.4cqw;display:flex;flex-direction:column;align-items:center;gap:1cqw}
.bk-code i{display:block;width:22cqw;height:9cqw;background:repeating-linear-gradient(90deg,#000 0 .5cqw,#fff .5cqw 1cqw,#000 1cqw 1.3cqw,#fff 1.3cqw 2.2cqw,#000 2.2cqw 3.2cqw,#fff 3.2cqw 3.7cqw)}
.bk-code span{font:500 1.8cqw 'DM Sans',sans-serif;color:#000;letter-spacing:.12em}

/* pages added/adjusted by script */
.blank{background:radial-gradient(70% 45% at 50% 100%,#3a0a17,transparent 75%),var(--ink)}
.nopic{background:radial-gradient(90% 60% at 50% 0%,#7a1730,transparent 70%),var(--ink)}
.page>img{background:#1b060d}

.c2 .fo,.c5 .fo{color:var(--maroon);text-shadow:none}