:root{
  --black:#0b0b0c; --paper:#f6f3ec; --paper-2:#ece7dc; --ink:#0b0b0c; --ink-2:#17171a;
  --red:#d0202b; --red-d:#a9161f; --gold:#b8923a; --line:rgba(11,11,12,.16);
  --serif:"Playfair Display","Times New Roman",serif; --sans:"Onest",system-ui,sans-serif;
  --pad:clamp(1.1rem,4.4vw,3.5rem); --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);overflow-x:clip;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block} a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:800;letter-spacing:-.02em;line-height:1.04;margin:0;text-wrap:balance;hyphens:manual}
p{margin:0}
.visually{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--ink);color:#fff;padding:.8rem 1.2rem;min-height:44px;border-radius:999px;transition:top .2s}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}

/* ---- header ---- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:1rem;padding:.8rem var(--pad);
  background:linear-gradient(var(--paper) 60%,transparent);}
.bar-logo{font:800 1.05rem/1 var(--serif);text-decoration:none;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.25em;min-height:44px}
.bar-logo b{color:var(--red)}
.bar-nav{display:flex;gap:.2rem;margin-inline:auto}
.bar-nav a{padding:.55rem .9rem;text-decoration:none;font-weight:500;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.bar-nav a:hover{background:var(--paper-2)}
@media (max-width:760px){.bar-nav{display:none}.bar-buy{margin-left:auto}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.75rem 1.3rem;border-radius:999px;border:1.5px solid var(--ink);
  font:700 .95rem/1.1 var(--sans);text-decoration:none;cursor:pointer;background:transparent;color:var(--ink);
  transition:transform .25s var(--ease),background-color .25s,color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 .9rem 1.8rem -1rem rgba(208,32,43,.8)}
.btn-red:hover{background:var(--red-d);border-color:var(--red-d)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-lg{min-height:54px;padding:.95rem 1.7rem;font-size:1.02rem}

.kicker{font:700 .78rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;display:flex;gap:.8rem;align-items:center}
.kicker .num{color:var(--red);font-variant-numeric:tabular-nums}
.kicker.light{color:#fff}.kicker.light .num{color:#ff6b73}
.small{font-size:.875rem;opacity:.75}

/* ---- cover ---- */
.cover{min-height:100svh;padding:7rem var(--pad) 3rem;display:grid;align-items:center;position:relative;overflow:hidden}
.cover-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;max-width:84rem;margin-inline:auto;width:100%}
.cover h1{font-size:clamp(2.5rem,5.5vw,5.4rem);line-height:.96}
.cover h1 em{font-style:italic;font-weight:600;color:var(--red);display:block}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:34rem;margin-top:1.4rem;color:#2a2a2d}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.cover-art{position:relative;justify-self:center;width:min(100%,34rem,calc((100svh - 9.5rem)*.569));aspect-ratio:562/988}
.statue{position:absolute;left:29.4%;top:0;width:69.6%;height:auto;filter:contrast(1.05)}
.word{position:absolute;left:0;right:0;bottom:0;aspect-ratio:562/598;
  background-image:url(assets/paint-land.jpg),url(assets/paint-red.jpg);
  background-size:230% auto,auto;background-position:var(--bx,30%) var(--by,40%);background-repeat:no-repeat;
  -webkit-mask:url(assets/wordmark.svg) center/contain no-repeat;mask:url(assets/wordmark.svg) center/contain no-repeat;
  background-color:var(--ink)}
.cover-note{position:absolute;left:var(--pad);bottom:1.3rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.55}
.cover-note .num{color:var(--red)}
@media (max-width:900px){
  .cover{padding-top:6rem}
  .cover-grid{grid-template-columns:1fr}
  .cover-art{width:min(80%,24rem)}
  .cover-note{display:none}
}

/* ---- tape ---- */
.tape{background:var(--red);color:#fff;overflow:hidden;border-block:1px solid var(--red-d);padding:.8rem 0}
.tape-track{display:flex;gap:1.4rem;white-space:nowrap;width:max-content;font:700 1rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;animation:tape 46s linear infinite}
.tape i{font-style:normal;opacity:.7;font-size:.6rem;align-self:center}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---- manifesto ---- */
.manifesto{background:var(--black);color:#fff;padding:clamp(4rem,10vw,9rem) var(--pad)}
.manifesto h2{font-size:clamp(1.9rem,5.2vw,4.6rem);max-width:22ch;font-weight:700}
.mf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(1.2rem,4vw,3rem);margin-top:clamp(2rem,5vw,4rem);max-width:60rem;color:#d8d5cc;font-size:1.1rem}
.manifesto{padding-inline:max(var(--pad),calc((100vw - 84rem)/2))}
.reveal-words .w{display:inline-block;opacity:.18;transition:opacity .6s var(--ease);transition-delay:calc(var(--i)*40ms)}
.reveal-words.in .w{opacity:1}
html:not(.js) .reveal-words .w{opacity:1}

/* ---- issue ---- */
.issue{padding:clamp(4rem,9vw,8rem) var(--pad);background:var(--paper-2)}
.issue-head{max-width:84rem;margin:0 auto 2.5rem}
.issue-head h2{font-size:clamp(2rem,5vw,4rem)}
.muted{color:#55524b;margin-top:.8rem;max-width:40rem}
.book-wrap{display:none;max-width:84rem;margin-inline:auto}
.book{--w:min(30vw,26rem);--h:calc(var(--w)*1.36);position:relative;width:calc(var(--w)*2);height:var(--h);margin:2rem auto 0;perspective:2600px;
  transform:translateX(calc(var(--w)*-.5));transition:transform .8s var(--ease);outline-offset:12px}
.book.open{transform:translateX(0)}
.book.end{transform:translateX(calc(var(--w)*.5))}
.leaf{position:absolute;top:0;left:50%;width:var(--w);height:var(--h);transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1s var(--ease)}
.leaf.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fffdf8;
  box-shadow:0 1.6rem 3rem -1.4rem rgba(0,0,0,.55);padding:calc(var(--w)*.09)}
.face.back{transform:rotateY(180deg)}
.face.front::after,.face.back::after{content:"";position:absolute;inset:0;pointer-events:none}
.face.front::after{background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 9%)}
.face.back::after{background:linear-gradient(270deg,rgba(0,0,0,.18),transparent 9%)}
.pg-no{position:absolute;bottom:.8rem;font:700 12px/1 var(--sans);letter-spacing:.14em;color:#7b776d}
.face.front .pg-no{right:1rem}.face.back .pg-no{left:1rem}
.pg h3{font-size:calc(var(--w)*.075);margin-bottom:.8rem}
.pg p{font-size:calc(var(--w)*.045);line-height:1.55;color:#2b2a27}
.pg blockquote{margin:0;font:600 calc(var(--w)*.075)/1.22 var(--serif)}
.pg cite{display:block;margin-top:1rem;font:700 calc(var(--w)*.038)/1.3 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.pg .drop::first-letter{font:800 calc(var(--w)*.2)/.8 var(--serif);float:left;padding:.05em .08em 0 0;color:var(--red)}
.pg.cover-pg{padding:0;background:var(--paper);display:grid;place-items:center}
.pg.cover-pg .statue{position:static;width:46%;margin:6% auto 0}
.pg.cover-pg .word{position:static;width:78%;margin:-4% auto 6%}
.pg.dark{background:var(--black);color:#fff}
.pg.dark p{color:#d8d5cc}
.book-ctl{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:2.2rem}
.count{min-width:9rem;text-align:center;font:700 .85rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
@media (min-width:900px){ .has-book .book-wrap{display:block} .has-book .rail{display:none} }
.rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 0 1.2rem;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);max-width:none}
.rail .face{position:relative;flex:0 0 min(78vw,22rem);height:calc(min(78vw,22rem)*1.36);scroll-snap-align:center;backface-visibility:visible;transform:none;--w:min(78vw,22rem);border-radius:2px}
.rail .face::after{display:none}

/* ---- voices ---- */
.voices{background:var(--black);color:#fff;padding:clamp(4rem,9vw,8rem) var(--pad)}
.voices>*{max-width:84rem;margin-inline:auto}
.big-quote{margin:0 auto clamp(2.5rem,6vw,5rem)}
.big-quote blockquote{font:700 clamp(1.7rem,4.3vw,3.7rem)/1.12 var(--serif);letter-spacing:-.02em;text-wrap:balance;position:relative;padding-top:1.1em}
.big-quote blockquote::before{content:"“";position:absolute;left:-.06em;top:-.12em;font-size:3.4em;color:var(--red);line-height:1}
figcaption{margin-top:1.2rem;color:#c9c5ba;font-size:.98rem}
figcaption a{color:#fff;text-underline-offset:.2em}
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:clamp(1.2rem,3vw,2.5rem)}
.quote-grid figure{margin:0;border-top:2px solid var(--red);padding-top:1.2rem}
.quote-grid blockquote{margin:0;font:600 1.3rem/1.35 var(--serif)}

/* ---- authors ---- */
.authors{padding:clamp(4rem,9vw,8rem) var(--pad)}
.authors>*{max-width:84rem;margin-inline:auto}
.authors h2{font-size:clamp(2rem,5vw,4rem);max-width:16ch}
.authors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(1rem,3vw,2.5rem);margin-top:2.5rem;border-top:2px solid var(--ink)}
.authors-grid article{padding-top:1.2rem}
.authors-grid h3{font:700 .8rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:1rem}
.authors-grid ul{list-style:none;margin:0;padding:0}
.authors-grid li{font:700 clamp(1.4rem,2.4vw,2.1rem)/1.15 var(--serif);padding:.45rem 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease),color .3s}
.authors-grid li:hover{padding-left:.7rem;color:var(--red)}

/* ---- buy ---- */
.buy{padding:clamp(3rem,7vw,6rem) var(--pad);background:var(--paper-2)}
.buy>*{max-width:84rem;margin-inline:auto}
.buy-card{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center;background:var(--black);color:#fff;border-radius:clamp(1.2rem,2.4vw,2rem);padding:clamp(1.5rem,5vw,4rem)}
.buy-cover{position:relative;background:var(--paper);border-radius:6px;padding:8% 6% 6%;box-shadow:0 2rem 4rem -1.4rem rgba(0,0,0,.7);transform:rotate(-2.5deg);max-width:22rem;justify-self:center;width:100%}
.buy-cover .statue{position:static;width:50%;margin:0 auto}
.buy-cover .word.mini{position:static;width:84%;margin:-5% auto 0;background-size:260% auto,auto}
.buy-info h2{font-size:clamp(1.6rem,3.4vw,3rem)}
.price{display:flex;gap:1rem;align-items:baseline;margin:1.3rem 0}
.price b{font:800 clamp(2.4rem,5vw,4rem)/1 var(--serif);color:#fff}
.price span{color:#c9c5ba;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.muted-l{color:#c9c5ba;margin-bottom:1.5rem;max-width:34rem}
@media (max-width:760px){.buy-card{grid-template-columns:1fr}}
.ebook{margin-top:clamp(1.2rem,3vw,2rem);padding:clamp(1.3rem,3vw,2.2rem);border:1.5px solid var(--ink);border-radius:1.4rem;display:grid;gap:.6rem}
.ebook h3{font-size:1.6rem}
.ebook-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
.ebook input{flex:1 1 16rem;min-height:48px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;padding:.6rem 1.2rem;font:500 1rem var(--sans)}
.ebook input.err{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,32,43,.2)}
.ebook-msg{font-weight:700;color:var(--red-d)}

/* ---- faq ---- */
.faq{padding:clamp(4rem,9vw,8rem) var(--pad)}
.faq>*{max-width:60rem;margin-inline:auto}
.faq h2{font-size:clamp(2rem,5vw,4rem);margin-bottom:2rem}
.faq details{border-top:1.5px solid var(--ink)}
.faq details:last-child{border-bottom:1.5px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.2rem 0;min-height:44px;font:700 clamp(1.15rem,2vw,1.5rem)/1.25 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 2rem/1 var(--sans);color:var(--red);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.4rem;max-width:44rem;color:#3a3833}

/* ---- colophon ---- */
.colophon{background:var(--black);color:#fff;padding:clamp(3rem,7vw,6rem) var(--pad)}
.colophon-inner{max-width:84rem;margin-inline:auto;display:grid;grid-template-columns:minmax(0,18rem) 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:end}
.colophon-logo{filter:invert(1);width:100%;height:auto}
.colophon a{text-underline-offset:.22em;display:inline-block;padding:.35rem 0;min-height:44px}
.colophon p+p{margin-top:.2rem}
@media (max-width:640px){.colophon-inner{grid-template-columns:1fr}.colophon-logo{max-width:14rem}}

#ink{position:fixed;inset:0;pointer-events:none;z-index:70;width:100vw;height:100vh}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .tape-track{transform:none}
  #ink{display:none}
}
@media (hover:none){#ink{display:none}}

figcaption a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.15rem}
.pg cite{font-size:max(12px,calc(var(--w)*.038))}
.reveal-words .w{opacity:.62}
.btn[disabled]{cursor:default;transform:none}
@media (max-width:480px){.kicker{font-size:.75rem}}

.pg.dark cite{color:#ff7a82}
.pg-no{color:#625e55}
.cover-note{opacity:.75}
figcaption a{min-inline-size:44px;justify-content:center}
.btn[disabled]{opacity:.6}

/* ===== smoothness and details (v2) ===== */
:root{interpolate-size:allow-keywords}
html.js .rv{opacity:0;translate:0 28px;transition:opacity .9s var(--ease),translate .9s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
html.js .rv.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;translate:none}}

/* intro: paper curtain lifts once */
.curtain{position:fixed;inset:0;z-index:90;background:var(--ink);display:grid;place-items:center;pointer-events:none;
  clip-path:inset(0 0 0 0);animation:curtain 1.1s var(--ease) .15s forwards}
.curtain i{display:block;width:min(46vw,240px);height:2px;background:var(--red);transform-origin:left;animation:curtain-line .7s var(--ease) both}
@keyframes curtain{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
@keyframes curtain-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.curtain{display:none}}

/* header hides going down, returns going up */
.bar{transition:translate .5s var(--ease),background .3s}
.bar.hide{translate:0 -110%}
.bar.solid{background:rgba(246,243,236,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}

/* hero entrance */
.cover .kicker,.cover h1 span,.cover h1 em,.cover .lede,.cover .cta-row{opacity:0;translate:0 26px;animation:up .9s var(--ease) forwards}
.cover .kicker{animation-delay:.9s}.cover h1 span{animation-delay:1s;display:inline-block}.cover h1 em{animation-delay:1.12s}
.cover .lede{animation-delay:1.25s}.cover .cta-row{animation-delay:1.4s}
@keyframes up{to{opacity:1;translate:0 0}}
.cover-art .word{clip-path:inset(100% 0 0 0);animation:word-in 1.5s var(--ease) 1s forwards}
.cover-art .statue{opacity:0;animation:fade 1.2s var(--ease) 1.6s forwards}
@keyframes word-in{to{clip-path:inset(0 0 0 0)}}
@keyframes fade{to{opacity:1}}
html:not(.js) .cover .kicker,html:not(.js) .cover h1 span,html:not(.js) .cover h1 em,html:not(.js) .cover .lede,html:not(.js) .cover .cta-row,html:not(.js) .cover-art .statue{opacity:1;translate:none;animation:none}
html:not(.js) .cover-art .word{clip-path:none;animation:none}
@media (prefers-reduced-motion:reduce){
  .cover .kicker,.cover h1 span,.cover h1 em,.cover .lede,.cover .cta-row,.cover-art .statue{opacity:1;translate:none}
  .cover-art .word{clip-path:none}
}

/* links and buttons: underline sweeps, arrow nudge */
.bar-nav a{position:relative}
.bar-nav a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.45rem;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.bar-nav a:hover::after,.bar-nav a:focus-visible::after{transform:scaleX(1)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);translate:-120% 0;transition:translate .7s var(--ease)}
.btn:hover::before{translate:120% 0}
.btn-red:active,.btn-ghost:active{transform:translateY(0) scale(.98)}

/* section marks and headings */
.kicker .num{display:inline-block;transition:transform .5s var(--ease)}
.rv.in .kicker .num,.kicker.rv.in .num{transform:none}
.issue-head h2,.authors h2,.faq h2{position:relative}
.issue-head h2::after,.authors h2::after,.faq h2::after{content:"";position:absolute;left:0;bottom:-.35em;height:3px;width:3.6rem;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease) .3s}
.issue-head.in h2::after,.authors-head.in h2::after,.faq.in h2::after{transform:scaleX(1)}

/* book: breathing hover, soft shadow under the object */
.book{transition:transform .8s var(--ease)}
.book::after{content:"";position:absolute;left:8%;right:8%;bottom:-1.6rem;height:1.4rem;background:radial-gradient(ellipse at center,rgba(0,0,0,.28),transparent 70%);filter:blur(6px);z-index:-1}
.leaf{will-change:transform}
.face{transition:box-shadow .6s var(--ease)}
.book:hover .leaf:not(.flipped) .face.front{box-shadow:0 2.2rem 3.4rem -1.4rem rgba(0,0,0,.6)}
.book-ctl .btn{min-width:7.5rem}

/* quotes and authors */
.big-quote blockquote::before{transition:transform 1s var(--ease);transform-origin:left bottom}
.big-quote:not(.in) blockquote::before{transform:scale(.4) rotate(-12deg);opacity:0}
.big-quote blockquote::before{opacity:1}
.quote-grid figure{transition:transform .5s var(--ease),border-color .3s}
.quote-grid figure:hover{transform:translateY(-6px);border-color:#fff}
.authors-grid article{transition:transform .5s var(--ease)}
.authors-grid li{position:relative}
.authors-grid li::after{content:"→";position:absolute;right:0;top:50%;translate:-10px -50%;opacity:0;color:var(--red);transition:translate .35s var(--ease),opacity .3s;font:400 1.2rem var(--sans)}
.authors-grid li:hover::after{translate:0 -50%;opacity:1}

/* buy card: tilt object */
.buy-cover{transition:transform .6s var(--ease)}
.buy-card:hover .buy-cover{transform:rotate(-1deg) translateY(-6px)}

/* FAQ: smooth open */
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* tape slows on hover */
.tape:hover .tape-track{animation-play-state:paused}

/* cursor follower (fine pointers) */
.dot{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px solid var(--red);border-radius:50%;z-index:80;pointer-events:none;
  transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,opacity .3s;opacity:0;mix-blend-mode:multiply}
.dot.on{opacity:1}
.dot.big{width:46px;height:46px;margin:-23px 0 0 -23px;background:rgba(208,32,43,.12)}
@media (hover:none),(prefers-reduced-motion:reduce){.dot{display:none}}

.tape-track{will-change:transform;animation:none}
.cover-art .word{will-change:clip-path}

/* ===== v3: paper, print marks, marker, rubricator, theme, sticky buy, blot, engraving ===== */
html[data-theme=dark]{--paper:#0d0d0f;--paper-2:#151518;--ink:#f1ede3;--line:rgba(241,237,227,.18);color-scheme:dark}
html[data-theme=dark] body{color:var(--ink)}
html[data-theme=dark] .lede,html[data-theme=dark] .muted,html[data-theme=dark] .faq details p,html[data-theme=dark] .cover-note{color:#cfcabd}
html[data-theme=dark] .cover-art .statue{filter:invert(1)}
html[data-theme=dark] .btn-ghost{color:var(--ink);border-color:var(--ink)}
html[data-theme=dark] .btn-ghost:hover{background:var(--ink);color:var(--black)}
html[data-theme=dark] .ebook{border-color:var(--ink)}
html[data-theme=dark] .ebook input{background:#1b1b1f;color:var(--ink);border-color:var(--ink)}
html[data-theme=dark] .authors-grid{border-top-color:var(--ink)}
html[data-theme=dark] .faq details,html[data-theme=dark] .faq details:last-child{border-color:var(--ink)}
html[data-theme=dark] .book-wrap .btn-ghost{color:var(--ink)}
html[data-theme=dark] .bar{background:linear-gradient(var(--paper) 60%,transparent)}
html[data-theme=dark] .bar.solid{background:rgba(13,13,15,.9)}
html[data-theme=dark] .issue{background:var(--paper-2)}
html[data-theme=dark] .buy{background:var(--paper-2)}
html[data-theme=dark] .bar-nav a:hover{background:#1f1f23}
html[data-theme=dark] .big-quote blockquote::before{color:var(--red)}
.theme{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font-size:1.15rem;display:grid;place-items:center;transition:transform .4s var(--ease),background .2s}
.theme:hover{transform:rotate(180deg)}
html,body{transition:background-color .5s var(--ease),color .5s var(--ease)}

/* paper grain + press marks */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:55;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html[data-theme=dark] body::after{mix-blend-mode:screen;opacity:.05}
.cover::before,.cover::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none;opacity:.55;
  background:linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat}
.cover::before{right:var(--pad);top:5.5rem}
.cover::after{left:calc(50% - 13px);bottom:1.1rem}
.cover-note::after{content:"";display:inline-block;width:46px;height:8px;margin-left:.8rem;vertical-align:middle;
  background:linear-gradient(90deg,#0ff 0 25%,#f0f 25% 50%,#ff0 50% 75%,#000 75%);opacity:.7}
.book::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:30px;margin-left:-15px;z-index:20;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.16) 50%,transparent)}

/* red marker */
mark{background:none;color:inherit;position:relative;white-space:nowrap}
mark::before,.mk::before{content:"";position:absolute;inset:55% -.12em .02em -.12em;z-index:-1;background:rgba(208,32,43,.62);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .5s;border-radius:2px;rotate:-.6deg}
.big-quote.in mark::before,.reveal-words.in .mk::before{transform:scaleX(1)}
.reveal-words .w.mk{position:relative}
.big-quote mark{isolation:isolate}
.reveal-words .mk{isolation:isolate}

/* rubricator */
.rubric{position:fixed;right:max(.9rem,1.4vw);top:50%;translate:0 -50%;z-index:45;display:none;flex-direction:column;gap:.2rem}
@media (min-width:1180px){.rubric{display:flex}}
.rubric a{position:relative;display:grid;place-items:center;width:44px;height:30px;text-decoration:none;color:var(--ink)}
.rubric i{font:700 .72rem/1 var(--sans);font-style:normal;letter-spacing:.06em;opacity:.45;transition:opacity .3s,color .3s,transform .3s var(--ease)}
.rubric a.on i{opacity:1;color:var(--red);transform:scale(1.25)}
.rubric a::before{content:"";position:absolute;right:0;top:50%;width:0;height:2px;background:var(--red);transition:width .35s var(--ease)}
.rubric a.on::before{width:10px}
.rubric a::after{content:attr(data-t);position:absolute;right:calc(100% + .3rem);top:50%;translate:8px -50%;opacity:0;background:var(--ink);color:var(--paper);
  font:600 .75rem/1 var(--sans);padding:.45rem .6rem;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .25s,translate .25s var(--ease)}
.rubric a:hover::after,.rubric a:focus-visible::after{opacity:1;translate:0 -50%}
.rubric.light a{color:#fff}.rubric.light a::after{background:#fff;color:#000}

/* sticky buy (phones) */
.sticky-buy{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(.8rem + env(safe-area-inset-bottom));z-index:48;display:none;align-items:center;justify-content:center;
  min-height:54px;border-radius:999px;background:var(--red);color:#fff;font:700 1rem/1 var(--sans);text-decoration:none;box-shadow:0 1rem 2rem -.8rem rgba(0,0,0,.6);
  translate:0 140%;transition:translate .5s var(--ease)}
@media (max-width:760px){.sticky-buy{display:flex}}
.sticky-buy.show{translate:0 0}

/* ink blot on click */
.blot{position:fixed;z-index:75;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:46% 54% 51% 49%/52% 47% 53% 48%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,rgba(208,32,43,.9),rgba(208,32,43,.55) 60%,rgba(208,32,43,0) 72%);
  box-shadow:34px -22px 0 -18px rgba(208,32,43,.55),-30px 26px 0 -22px rgba(208,32,43,.5),12px 40px 0 -26px rgba(208,32,43,.5);
  animation:blot .9s var(--ease) forwards}
@keyframes blot{0%{transform:scale(.1) rotate(var(--r,0deg));opacity:.95}55%{opacity:.8}100%{transform:scale(1.35) rotate(var(--r,0deg));opacity:0}}

/* statue is etched in from the top (needs @property; falls back to the plain fade) */
@property --p{syntax:"<percentage>";inherits:false;initial-value:120%}
.cover-art .statue{--p:-20%;opacity:1;animation:etch 2.6s var(--ease) 1.5s forwards;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--p),transparent calc(var(--p) + 18%));mask-image:linear-gradient(180deg,#000 var(--p),transparent calc(var(--p) + 18%))}
@keyframes etch{to{--p:120%}}
html:not(.js) .cover-art .statue{--p:120%;animation:none}
@media (prefers-reduced-motion:reduce){.cover-art .statue{--p:120%;animation:none}.blot{display:none}}

/* ghost cover that flies from the hero into the book */
.ghost{position:fixed;left:0;top:0;z-index:30;pointer-events:none;transform-origin:0 0;display:none;
  background:#fffdf8;box-shadow:0 1.6rem 3rem -1.4rem rgba(0,0,0,.55);overflow:hidden}
.ghost .pg.cover-pg{width:100%;height:100%}
.snd{min-width:9.5rem}
.buy-cover,.pg.cover-pg{background:#f6f3ec}
html[data-theme=dark] .buy-cover .statue,html[data-theme=dark] .pg.cover-pg .statue{filter:none}
html[data-theme=dark] .rail .face,html[data-theme=dark] .face{background:#fffdf8}
.rubric a{height:44px}
.rubric i{font-size:12px;opacity:.72}
.rubric{gap:0}
html[data-theme=dark] .rubric a{color:var(--ink)}
.theme{flex:none;min-width:44px}.bar-buy{flex:none}

@media (min-width:1100px){
  .manifesto{padding-right:calc(max(var(--pad),(100vw - 84rem)/2) + min(34vw,30rem))}
  .manifesto .mf-cols{grid-template-columns:1fr}
}

/* the closed magazine sits in the right column, under the cover's flight path */
@media (min-width:900px){
  .book{margin:2rem 0 0 auto;transform:none}
  .book.open,.book.end{transform:none}
  .book-ctl{justify-content:flex-end}
}
@media (min-width:1100px) and (max-width:1300px){.manifesto{padding-right:calc(var(--pad) + 42vw)}}

.kicker .num{white-space:nowrap}
@media (max-width:900px){
  .cover::before,.cover::after,.cover-note::after{display:none}
}
@media (max-width:560px){
  .bar-buy{display:none}
  .theme{margin-left:auto}
  .bar-logo{font-size:1rem}
  .faq summary{font-size:1.1rem}
  .cover h1{font-size:clamp(2.4rem,12vw,3.4rem)}
}
.faq h2{margin-inline:0}

.pk-studio-credit{margin-top:1.2rem;font-size:.95rem}
.pk-studio-credit a{color:#fff;text-underline-offset:.22em;display:inline-flex;align-items:center;min-height:44px}
[hidden]{display:none!important}

/* ===== v4: metallic logo, square magazine, real cover, photo quotes, authors, theme hint ===== */
[hidden]{display:none!important}
@property --lift{syntax:"<number>";inherits:true;initial-value:0}
:root{--logo-a:#0b0b0c;--logo-b:#2a2a30;--sheen-edge:rgba(214,168,72,.0);--sheen-mid:rgba(222,176,78,.72);--sheen-core:rgba(255,240,196,.98);--edge:#8e9199}
html[data-theme=dark]{--logo-a:#f6f4ee;--logo-b:#b4b8c1;--sheen-edge:rgba(150,170,205,0);--sheen-mid:rgba(170,190,225,.7);--sheen-core:rgba(255,255,255,1);--edge:#4c4f57}

/* the wordmark: no painted fill any more, the letters are plain black (light) or white (dark) and a metallic glint runs across them */
.word{background:none;-webkit-mask:none;mask:none;--lift:0;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(calc(var(--lift)*-8px)) scale(calc(1 + var(--lift)*.03));
  transition:--lift .55s var(--ease),transform .4s var(--ease);
  filter:drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge)) drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge)) drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge))
    drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge)) drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge))
    drop-shadow(0 calc(var(--lift)*26px) calc(var(--lift)*22px) rgba(0,0,0,calc(var(--lift)*.34)))}
.word::before,.word::after{content:"";position:absolute;inset:0;-webkit-mask:url(assets/wordmark.svg) center/contain no-repeat;mask:url(assets/wordmark.svg) center/contain no-repeat}
.word::before{background:linear-gradient(180deg,var(--logo-a),var(--logo-b))}
.word::after{background:linear-gradient(105deg,transparent 0 41%,var(--sheen-edge) 43%,var(--sheen-mid) 47.5%,var(--sheen-core) 50%,var(--sheen-mid) 52.5%,var(--sheen-edge) 57%,transparent 59% 100%);
  background-size:300% 100%;background-position:100% 0}
.cover-art:hover .word,.buy-cover:hover .word,.pg.cover-pg:hover .word{--lift:1}
.word.hover::after{animation:none;background-position:calc((.75 - .5*var(--px,.5))*100%) 0}
.cover-art .word.hover::after{animation:word-in 1.5s var(--ease) 1s forwards}
.pg.cover-pg .word,.buy-cover .word.mini{position:relative}
.cover-art .word{clip-path:none;animation:none}
.cover-art .word::before,.cover-art .word::after{clip-path:inset(100% 0 0 0);animation:word-in 1.5s var(--ease) 1s forwards}
.cover-art .word::after{animation:word-in 1.5s var(--ease) 1s forwards,sheen 7s ease-in-out 3.2s infinite}
.pg.cover-pg .word::after,.buy-cover .word.mini::after{animation:sheen 7s ease-in-out 1.5s infinite}
@keyframes sheen{0%,52%{background-position:100% 0}86%,100%{background-position:0% 0}}
html:not(.js) .cover-art .word::before,html:not(.js) .cover-art .word::after{clip-path:none;animation:none}
@media (prefers-reduced-motion:reduce){
  .cover-art .word::before,.cover-art .word::after{clip-path:none;animation:none}
  .pg.cover-pg .word::after,.buy-cover .word.mini::after{animation:none}
  .word{transition:none}
}

/* the real magazine is square */
.issue{--ratio:1}
.book{--h:calc(var(--w)*var(--ratio,1))}
.rail .face{height:calc(min(78vw,22rem)*var(--ratio,1))}
.face:has(> .pg.img),.face:has(> .pg.blank),.face:has(> .pg.cover-pg){padding:0}
.pg.img{padding:0;background:#fffdf8;width:100%;height:100%}
.pg.img img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.pg.blank{display:grid;place-items:center;background:var(--paper)}
.pg.blank span{font:600 italic calc(var(--w)*.06)/1 var(--serif);color:#8a857a}
.pg{padding:calc(var(--w)*.09)}
.pg h3{font-size:calc(var(--w)*.065)}.pg p{font-size:calc(var(--w)*.04)}.pg blockquote{font-size:calc(var(--w)*.062)}
.pg.cover-pg{padding:0}
.pdf-pick{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:center;margin-top:1.4rem;font-size:.9rem}
.pdf-pick label{cursor:pointer}.pdf-pick input:focus-visible + span{outline:2px solid var(--ink)}

/* the real cover everywhere the old statue + wordmark were shown */
.real-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px;box-shadow:0 2.4rem 4rem -1.4rem rgba(0,0,0,.6)}
.cover-art.is-real{aspect-ratio:1/var(--cover-ratio,1);width:min(100%,34rem,calc(100svh - 11rem))}
.cover-art.is-real .statue,.cover-art.is-real .word,.buy-cover.is-real .statue,.buy-cover.is-real .word,.buy-cover.is-real > img:not(.real-cover){display:none}
.buy-cover.is-real{padding:0;background:none;box-shadow:none;aspect-ratio:1/var(--cover-ratio,1);align-self:center;height:auto}

/* theme: playful hint on hover / focus */
.theme{position:relative}
.theme:hover{transform:none}
.theme span{display:block;transition:transform .5s var(--ease)}
.theme:hover span,.theme:focus-visible span{transform:rotate(180deg)}
.theme::after{content:attr(data-tip);position:absolute;top:calc(100% + .65rem);right:0;white-space:nowrap;padding:.5rem .9rem;border-radius:999px;background:var(--ink);color:var(--paper);font:700 .78rem/1 var(--sans);letter-spacing:.04em;opacity:0;translate:0 -4px;pointer-events:none;transition:opacity .25s,translate .25s var(--ease)}
.theme:hover::after,.theme:focus-visible::after{opacity:1;translate:0 0}

/* cursor: the ink line stays, the ring loses its red fill */
.dot.big{background:transparent}

/* quotes written over photographs, a mosaic of different sizes */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(13rem,20vw,17rem);gap:clamp(.7rem,1.4vw,1.2rem);max-width:84rem;margin-inline:auto}
.q{position:relative;margin:0;border-radius:1.2rem;overflow:hidden;padding:clamp(1.1rem,2.2vw,2rem);display:flex;flex-direction:column;justify-content:flex-end;gap:.9rem;color:#fff;isolation:isolate;background:#151518;border:0}
.q::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--photo,var(--fallback)) var(--pos,50% 50%)/cover no-repeat;transition:transform 1.4s var(--ease)}
.q::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,12,.12),rgba(11,11,12,.55) 45%,rgba(11,11,12,.9))}
.q:hover::before{transform:scale(1.07)}
.q blockquote{margin:0;font:700 clamp(1.1rem,1.55vw,1.4rem)/1.28 var(--serif);text-wrap:balance}
.q figcaption{font:500 .82rem/1.4 var(--sans);color:#d9d5ca}.q figcaption b{color:#fff}.q a{color:#fff;text-underline-offset:3px}
.q mark{background:none;color:#ff7a82}
.q-c blockquote,.q-d blockquote{font-size:clamp(1rem,1.25vw,1.2rem)}
.q-a{grid-column:1/3;grid-row:1/3;--fallback:url(assets/paint-red.webp)}
.q-a blockquote{font-size:clamp(1.5rem,3vw,2.7rem);line-height:1.14}
.q-b{grid-column:3/5;--fallback:url(assets/paint-land.webp)}
.q-c{--fallback:url(assets/paint-land.webp);--pos:20% 70%}
.q-d{--fallback:url(assets/paint-red.webp);--pos:80% 30%}
@media (max-width:900px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(13rem,auto)}.q-a{grid-column:1/-1;grid-row:auto;min-height:20rem}.q-b{grid-column:1/-1}}
@media (max-width:560px){.mosaic{grid-template-columns:1fr}.q-c,.q-d{grid-column:1/-1}.q-a blockquote{font-size:1.45rem}}
html.js .q.rv:hover{translate:0 0}

/* authors of an issue */
.issue-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin:2.2rem 0 1rem}
.issue-tab{min-height:44px;padding:.5rem 1.2rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:700 .92rem var(--sans);cursor:pointer;transition:background .25s,color .25s}
.issue-tab[aria-selected=true]{background:var(--ink);color:var(--paper)}
.issue-tab:disabled{opacity:.5;border-style:dashed;cursor:default}
#issue-lead{max-width:40rem;margin-top:.4rem}
.authors-grid li.person{display:flex;align-items:center;gap:1rem;font-size:clamp(1.2rem,2vw,1.7rem)}
.avatar{flex:none;width:3.6rem;height:3.6rem;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--ink);color:var(--paper);font:700 1.05rem/1 var(--sans);letter-spacing:.04em;box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover}
.authors-grid li.person::after{display:none}
.authors-grid li.person:hover{padding-left:.4rem}

/* ===== v4.1: the real issue is centred and larger; the heading rule no longer strikes through the caption ===== */
.issue-head .muted{margin-top:1.7rem}
.authors-head h2+.issue-tabs{margin-top:2.4rem}
@media (min-width:900px){
  .issue.is-real .book{--w:min(33vw,30rem);margin:2.4rem auto 0;transform:translateX(calc(var(--w)*-.5))}
  .issue.is-real .book.open{transform:none}
  .issue.is-real .book.end{transform:translateX(calc(var(--w)*.5))}
  .issue.is-real .book-ctl{justify-content:center}
}

/* ===== v4.2: first-screen choreography: statue first, then the lettering rises under it, then the glint ===== */
.cover-art .statue{animation:etch 1.9s var(--ease) .95s forwards}   /* the statue is etched in from the top first */
.cover-art .word::before{animation:word-in 1.3s var(--ease) 1.45s forwards}
.cover-art .word::after{animation:word-in 1.3s var(--ease) 1.45s forwards,sheen 7s ease-in-out 3.6s infinite}
.cover-art .word.hover::after{animation:word-in 1.3s var(--ease) 1.45s forwards}

/* ===== v4.3: every resolution ===== */
@media (max-width:820px){.bar-nav{display:none}.bar-buy{margin-left:auto}}                      /* the header no longer overflows on tablets */
@media (min-width:1900px){html{font-size:112.5%}}                    /* big monitors: the whole layout scales up */
@media (min-width:2400px){html{font-size:137.5%}}
.faq details p a{padding-block:.6rem;margin-block:-.6rem;display:inline-block}   /* inline links get a finger-sized hit area */

/* ===== v5: issues menu, mobile flipbook, picture under the logo ===== */
.issues-menu{position:relative;margin-left:.2rem}
.issues-btn{min-height:44px;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 .92rem var(--sans);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}
.issues-btn:hover,.issues-btn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.issues-btn-short{display:none}
.issues-list{position:absolute;top:calc(100% + .5rem);right:0;min-width:16rem;max-width:calc(100vw - 2*var(--pad));margin:0;padding:.4rem;list-style:none;background:var(--paper);border:1.5px solid var(--ink);border-radius:1rem;box-shadow:0 1.4rem 3rem -1rem rgba(0,0,0,.45);z-index:70}
.issues-list[hidden]{display:none}
.issues-list a{display:flex;align-items:center;min-height:44px;padding:.5rem .9rem;border-radius:.7rem;text-decoration:none;font-weight:500}
.issues-list a:hover{background:var(--paper-2)}
.issues-list a[aria-current=page]{background:var(--ink);color:var(--paper)}
@media (max-width:760px){
  .issues-btn-full{display:none}.issues-btn-short{display:inline}
  .issues-menu{margin-left:auto}.issues-menu + .bar-buy{margin-left:0}
  .bar{gap:.6rem}
}
.issue-tab{display:inline-flex;align-items:center;text-decoration:none}
.issue-tab[aria-current=page]{background:var(--ink);color:var(--paper)}
.issue-tabs[hidden]{display:none}

/* the book is always visible; below 900px it shows one page at a time */
.has-book .book-wrap{display:block}
.has-book .rail{display:none}
.pg.wait,.pg.bad{background:linear-gradient(110deg,#f1ede3 30%,#fbf8f1 50%,#f1ede3 70%);background-size:200% 100%;animation:pgwait 1.4s linear infinite}
.pg.wait img:not([src]),.pg.bad img{visibility:hidden}
.pg.bad{animation:none}
@keyframes pgwait{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.pg.wait{animation:none}}
.book.single{--w:min(86vw,30rem);width:var(--w);height:calc(var(--w)*var(--ratio,1));margin:1.6rem auto 0;transform:none;perspective:none;touch-action:pan-y}
.book.single.open,.book.single.end{transform:none}
.book.single::before,.book.single::after{display:none}
.book.single .sheet{position:absolute;inset:0;background:#fffdf8;box-shadow:0 1.6rem 3rem -1.4rem rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateX(3%);transition:opacity .28s,transform .28s,visibility 0s .28s;overflow:hidden;padding:0}
.book.single .sheet.on{opacity:1;visibility:visible;transform:none;transition:opacity .28s,transform .28s}
.book.single .sheet:has(> .pg:not(.img)){padding:calc(var(--w)*.09)}
@media (prefers-reduced-motion:reduce){.book.single .sheet,.book.single .sheet.on{transition:none}}
@media (max-width:899px){
  .book-ctl{gap:.6rem;margin-top:1.6rem;flex-wrap:wrap}
  .book-ctl .snd{order:4;flex:0 0 100%;max-width:11rem}
  .book-ctl .btn{padding-inline:1rem}
  .book-ctl .btn{min-width:6.5rem}
  .count{min-width:0;font-size:.74rem;letter-spacing:.1em}
  .issue.is-real .book.single{--w:min(86vw,30rem);margin:1.6rem auto 0}
}

/* picture under the logo: it shows through when the logo is hovered (desktop) or tapped (touch).
   Everything (picture, glow, ink colour) is driven by ONE animated number, --reveal, so the frames stay in step and every
   filter keeps the same list of functions (a filter list that changes length cannot interpolate and would snap). */
@property --reveal{syntax:"<number>";inherits:true;initial-value:0}
.cover-art{--glow:255,253,248;--rv-a:#0b0b0d;--rv-b:#1d1d22;transition:--reveal .9s cubic-bezier(.45,0,.2,1)}
html[data-theme=dark] .cover-art{--glow:11,11,12;--rv-a:var(--logo-a);--rv-b:var(--logo-b)}
.cover-art.has-reveal:hover,.cover-art.reveal-on{--reveal:1}
.cover-art .word-reveal{position:absolute;left:-5%;bottom:-3%;width:110%;max-width:none;height:auto;aspect-ratio:562/598;object-fit:cover;object-position:2% 50%;border-radius:1.4rem;pointer-events:none;z-index:0;
  opacity:var(--reveal);transform:scale(calc(.94 + .06*var(--reveal)));box-shadow:0 2rem 4.5rem -2rem rgba(0,0,0,.55);filter:saturate(.92) brightness(1.06);will-change:opacity,transform}
.cover-art .word-reveal[hidden]{display:none}
.cover-art .statue,.cover-art .word{position:relative;z-index:1}
.cover-art.has-reveal .word::before{background:linear-gradient(180deg,color-mix(in srgb,var(--logo-a),var(--rv-a) calc(var(--reveal)*100%)),color-mix(in srgb,var(--logo-b),var(--rv-b) calc(var(--reveal)*100%)))}
.cover-art.has-reveal .statue{filter:contrast(1.05) drop-shadow(0 0 .4rem rgba(var(--glow),calc(var(--reveal)*.95)))}
html[data-theme=dark] .cover-art.has-reveal .statue{filter:invert(1) drop-shadow(0 0 .4rem rgba(var(--glow),calc(var(--reveal)*.95)))}
.cover-art.has-reveal .word{filter:drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge)) drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge)) drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge))
    drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge)) drop-shadow(calc(var(--lift)*.5px) calc(var(--lift)*1px) 0 var(--edge))
    drop-shadow(0 calc(var(--lift)*26px) calc(var(--lift)*22px) rgba(0,0,0,calc(var(--lift)*.34)))
    drop-shadow(0 0 .3rem rgba(var(--glow),calc(var(--reveal)*.9))) drop-shadow(0 0 .9rem rgba(var(--glow),calc(var(--reveal)*.55)))}
@media (hover:none){.cover-art.has-reveal{cursor:pointer}}
@media (prefers-reduced-motion:reduce){.cover-art{transition:none}}
/* the sheen follows the pointer: glide to its place instead of snapping when the idle shimmer hands over */
.cover-art .word::after,.buy-cover .word::after{transition:background-position .6s var(--ease)}
.cover-art .word.hover::after,.buy-cover .word.hover::after{background-position:var(--sx,calc((.75 - .5*var(--px,.5))*100%)) 0}
/* mid widths (landscape phones, small tablets): the section links give way to the issues menu */
.issues-btn{white-space:nowrap}
@media (max-width:1080px){.bar-nav{display:none}.issues-menu{margin-left:auto}.issues-menu + .theme{margin-left:0}}