@font-face{font-family:"Fraktur";src:url(/fonts/unifrakturmaguntia-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"News";src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"News";src:url(/fonts/newsreader-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"News";src:url(/fonts/newsreader-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"News";src:url(/fonts/newsreader-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"News";src:url(/fonts/newsreader-latin-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(/fonts/ibm-plex-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --soot:#0E0D0C;--ink:#16130F;--bone:#EFE6D2;--paper:#F4EDDD;--red:#B3201F;--gold:#D99A1E;--faded:#8A8172;
  --g:clamp(18px,5vw,48px);--open:0;--ink-p:0;--tilt:0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font:400 18px/1.55 "News",Georgia,serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
img{display:block;max-width:100%}
.mono{font-family:"Plex",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.red{color:var(--red)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px var(--g);color:var(--bone);mix-blend-mode:normal;transition:background .3s,color .3s}
.bar.on-paper{background:rgba(244,237,221,.92);color:var(--ink);backdrop-filter:blur(6px);box-shadow:0 1px 0 rgba(22,19,15,.12)}
.logo{font-family:"Fraktur";font-size:26px;text-decoration:none;line-height:1}
.bar-r{display:flex;gap:8px;align-items:center}
.pick{display:inline-flex;gap:6px;align-items:center;padding:7px 12px;border:1px solid currentColor;font-size:15px;font-weight:500}
.lang{padding:8px 10px;border:1px solid currentColor}

/* act 1: book */
.act-book{position:relative;height:290vh;background:radial-gradient(120% 80% at 50% 40%,#211c16 0%,var(--soot) 70%)}
.stage{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-items:center;perspective:1700px;overflow:hidden;color:var(--bone)}
.edition{align-self:end;padding-bottom:18px;color:var(--faded)}
.book{--w:min(74vw,54svh,430px);width:var(--w);aspect-ratio:3/4;position:relative;transform-style:preserve-3d;
  transform:translateX(calc(var(--open)*var(--shift,0%))) rotateX(calc((1 - var(--open))*10deg)) rotateY(calc(var(--tilt)*6deg));will-change:transform}
@media (min-width:860px){.book{--shift:50%}}
.page{position:absolute;inset:0;background:var(--bone);padding:6% 8% 10%;display:flex;flex-direction:column;align-items:center;border-radius:2px 6px 6px 2px}
.page{box-shadow:5px 1px 0 -1px #d8ccb2,9px 2px 0 -2px #c6b998,0 30px 60px rgba(0,0,0,.55)}
.page::before{content:"";position:absolute;inset:3.2%;border:1.5px solid var(--ink);box-shadow:inset 0 0 0 3px var(--bone),inset 0 0 0 4px var(--ink);pointer-events:none}
.page-num{position:relative;z-index:1;font-size:11px;color:var(--ink);margin-bottom:2%}
.plate{position:relative;flex:1;min-height:0;width:100%;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:contain;clip-path:inset(0 0 calc((1 - var(--ink-p))*100%) 0)}
.roller{position:absolute;left:-2%;right:-2%;height:3px;background:var(--ink);top:calc(var(--ink-p)*100%);opacity:calc((1 - var(--ink-p))*4);box-shadow:0 -6px 12px rgba(22,19,15,.25)}
.page-name{font:700 clamp(22px,3.6svh,34px)/1 "News";letter-spacing:-.01em;margin-top:1%;color:var(--ink)}
.page-range{font-size:10px;color:var(--faded);margin-top:4px}
.seal{position:absolute;right:6%;top:9%;z-index:2;color:var(--red);border:2px solid var(--red);padding:6px 9px;font-weight:700;font-size:11px;transform:rotate(-12deg) scale(2.2);opacity:0;pointer-events:none;background:rgba(239,230,210,.6)}
.seal.on{animation:thud .45s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes thud{to{transform:rotate(-12deg) scale(1);opacity:.92}}

.cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(calc(var(--open)*-178deg));will-change:transform}
.cover-front,.cover-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px 6px 6px 2px}
.cover-front{background:#111 url(/art/cover.webp) center/cover;box-shadow:inset 6px 0 10px rgba(0,0,0,.6),0 30px 60px rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10%}
.cover-front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 10%,transparent 90%,rgba(255,255,255,.05));border-radius:inherit}
.label{position:relative;z-index:1;background:var(--bone);color:var(--ink);padding:10px 18px 9px;text-align:center;border:1px solid var(--ink);box-shadow:0 0 0 3px var(--bone),0 0 0 4px var(--gold),0 8px 18px rgba(0,0,0,.6);min-width:66%}
.label-title{display:block;font:400 clamp(30px,5.2svh,46px)/1 "Fraktur"}
.label-sub{display:block;margin-top:6px;font-size:10px}
.cover-back{transform:rotateY(180deg);background:var(--bone);color:var(--ink);padding:12% 11%;display:flex;flex-direction:column;justify-content:center;box-shadow:inset -8px 0 14px rgba(0,0,0,.18)}
.cover-line{font:700 clamp(26px,4.2svh,44px)/1.02 "News";letter-spacing:-.025em;text-wrap:balance}
.cover-mark{position:absolute;bottom:7%;left:11%;font-size:10px;color:var(--faded)}
.tease{align-self:start;padding:22px var(--g) 0;max-width:30ch;text-align:center;font:italic 400 19px/1.35 "News";color:#cfc4ad;opacity:calc(1 - var(--open)*3)}

/* act 2: reading */
.reading{position:relative;padding:clamp(56px,10vw,120px) var(--g) 40px;max-width:820px;margin:0 auto}
.kicker{color:var(--red);margin-bottom:18px}
.line{font:700 clamp(44px,11vw,104px)/.94 "News";letter-spacing:-.035em;text-wrap:balance}
.line .ghost{color:var(--faded)}
.text{margin-top:22px;font-size:clamp(19px,2.4vw,23px);line-height:1.5;max-width:40ch;text-wrap:pretty}
.stale{margin-top:14px;color:var(--faded)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.btn{padding:15px 22px;font:700 13px/1 "Plex";letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink)}
.btn-red{background:var(--red);border-color:var(--red);color:var(--bone);box-shadow:4px 4px 0 var(--ink)}
.btn-red:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-line{background:transparent}
.fine{margin-top:14px;color:var(--faded);text-transform:none;letter-spacing:.02em;font-size:13px}

.oracle{margin-top:44px;display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:26px;align-items:start;border-top:1.5px solid var(--ink);padding-top:26px}
@media (max-width:640px){.oracle{grid-template-columns:1fr}.bowl{max-width:280px}}
.bowl{position:relative;aspect-ratio:3/4;background:var(--bone) url(/art/oracle.webp) center/cover;border:1.5px solid var(--ink);overflow:hidden}
.bowl video{width:100%;height:100%;object-fit:cover;display:block}
.bubbles i{position:absolute;bottom:42%;left:50%;width:7px;height:7px;border:1.5px solid var(--ink);border-radius:50%;opacity:0;animation:bub 2.4s infinite}
.bubbles i:nth-child(2){left:46%;animation-delay:.8s}.bubbles i:nth-child(3){left:53%;animation-delay:1.6s}
.oracle.done .bubbles{display:none}
@keyframes bub{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(-60px);opacity:0}}
.oracle-wait{color:var(--red);min-height:1.4em}
.oracle-text{margin-top:10px;font-size:20px;line-height:1.5;max-width:46ch}
.oracle-text span{opacity:0;animation:word .35s forwards}
@keyframes word{to{opacity:1}}
.oracle-side{margin-top:16px;font:italic 500 19px/1.4 "News";opacity:0;transition:opacity .5s}
.oracle-side.on{opacity:1}
.oracle-side b{font:700 12px "Plex";letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-style:normal;display:block;margin-bottom:4px}

/* act 3: shop */
.shop{background:var(--ink);color:var(--bone);padding:clamp(64px,10vw,120px) var(--g);display:grid;justify-items:center;text-align:center}
.shop-h{font:700 clamp(32px,6vw,60px)/1 "News";letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.mock{margin:42px 0 30px;width:min(86vw,440px);aspect-ratio:4/3;display:grid;place-items:center}
.mug{position:relative;width:78%;aspect-ratio:1.25;display:flex;align-items:center}
.mug-face{position:relative;z-index:1;width:100%;height:100%;background:#fbf8f1;border-radius:4px 4px 16% 16%/4px 4px 9% 9%;display:grid;grid-template-columns:44% 1fr;align-items:center;gap:6%;padding:7% 7% 7% 5%;box-shadow:inset -18px 0 26px rgba(0,0,0,.14),inset 14px 0 18px rgba(255,255,255,.7),0 24px 40px rgba(0,0,0,.45);transition:background .3s}
.mug-face img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;mix-blend-mode:multiply}
.mug-face span{font:700 clamp(15px,3.8vw,21px)/1.04 "News";letter-spacing:-.02em;color:var(--ink);text-align:left;text-wrap:balance}
.mug-handle{position:absolute;right:-17%;top:20%;width:24%;height:52%;border:clamp(10px,3vw,16px) solid #ebe6da;border-left:0;border-radius:0 50% 50% 0;transition:border-color .3s}
.mock[data-v=black] .mug-face{background:#171513}
.mock[data-v=black] .mug-face img{mix-blend-mode:normal;border:3px solid var(--bone)}
.mock[data-v=black] .mug-face span{color:var(--bone)}
.mock[data-v=black] .mug-handle{border-color:#222}
.mock[data-v=tee] .mug{width:74%;aspect-ratio:200/230}
.mock[data-v=tee] .mug-face{border-radius:0;background:#2a2622;grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;align-content:center;padding:24% 28% 8%;gap:4%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230'%3E%3Cpath d='M62 6 Q100 30 138 6 L192 30 L178 82 L152 72 L152 226 L48 226 L48 72 L22 82 L8 30 Z'/%3E%3C/svg%3E") center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 230'%3E%3Cpath d='M62 6 Q100 30 138 6 L192 30 L178 82 L152 72 L152 226 L48 226 L48 72 L22 82 L8 30 Z'/%3E%3C/svg%3E") center/100% 100%}
.mock[data-v=tee] .mug-face img{width:72%;mix-blend-mode:normal;border:2px solid var(--bone)}
.mock[data-v=tee] .mug-face span{color:var(--bone);text-align:center;font-size:clamp(11px,2.6vw,15px)}
.mock[data-v=tee] .mug-handle{display:none}
.mock[data-v=sticker] .mug{width:52%;aspect-ratio:3/4.3;transform:rotate(-6deg)}
.mock[data-v=sticker] .mug-face{grid-template-columns:1fr;grid-template-rows:1fr auto;border-radius:18px;padding:8%;gap:4%;background:var(--bone);box-shadow:0 0 0 7px #fff,0 18px 30px rgba(0,0,0,.5)}
.mock[data-v=sticker] .mug-face span{text-align:center;font-size:clamp(12px,3vw,16px)}
.mock[data-v=sticker] .mug-handle{display:none}
.variant{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:22px}
.variant button{padding:9px 13px;border:1px solid #5d554b;font:400 12px "Plex";letter-spacing:.06em;text-transform:uppercase;color:#cfc4ad}
.variant button.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-buy{display:inline-flex;gap:14px;box-shadow:4px 4px 0 #000}
.shop .fine{color:#a39886}

/* act 4: the others */
.others{padding:clamp(64px,9vw,110px) 0 40px}
.others-h{font:700 clamp(28px,5vw,48px)/1.02 "News";letter-spacing:-.03em;padding:0 var(--g);max-width:18ch}
.strip{list-style:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px var(--g) 18px;scrollbar-width:thin}
.strip li{flex:0 0 min(62vw,240px);min-width:0;scroll-snap-align:start}
.strip button{display:block;text-align:left;width:100%}
.strip img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--bone);border:1.5px solid var(--ink);transition:transform .25s}
.strip button:hover img{transform:translateY(-4px) rotate(-1deg)}
.strip .nm{display:block;margin-top:10px;color:var(--red)}
.strip .ln{display:block;margin-top:4px;font:700 19px/1.15 "News";letter-spacing:-.01em}
.yday{display:inline-block;margin:8px var(--g) 0;color:var(--faded)}

.quote{padding:60px var(--g) 70px;text-align:center;border-top:1.5px solid var(--ink);margin:0 var(--g)}
.quote blockquote{font:italic 500 clamp(24px,4vw,38px)/1.2 "News";max-width:24ch;margin:0 auto;text-wrap:balance}
.quote p{margin-top:12px;color:var(--faded)}
.foot{background:var(--soot);color:#8f8676;padding:28px var(--g) 40px;text-align:center;line-height:2;text-transform:none;letter-spacing:.02em}

/* dialogs */
.sheet{margin:auto auto 0;width:100%;max-width:560px;border:0;background:var(--paper);color:var(--ink);padding:0;border-top:3px solid var(--red)}
@media (min-width:640px){.sheet{margin:auto}}
.sheet::backdrop{background:rgba(14,13,12,.7)}
.sheet-in{padding:26px var(--g) 22px;display:grid;gap:14px}
.sheet h3{font:700 28px/1.05 "News";letter-spacing:-.02em}
.signs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.signs button{padding:12px 4px;border:1px solid rgba(22,19,15,.25);text-align:center;font-size:15px;line-height:1.2}
.signs button.on{background:var(--ink);color:var(--bone)}
.signs .gl{display:block;font-size:22px}
.signs .rg{display:block;font:400 9px "Plex";letter-spacing:.04em;color:var(--faded);margin-top:3px}
.bday{display:flex;justify-content:space-between;align-items:center;gap:10px;font-style:italic}
.bday input,.row input{font:inherit;padding:10px;border:1.5px solid var(--ink);background:#fff;min-width:0}
.row{display:flex;gap:8px}.row input{flex:1}
.msg{min-height:1.2em;color:var(--red);text-transform:none}
.x{justify-self:center;color:var(--faded);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .act-book{height:auto}.stage{position:relative;height:auto;padding:90px 0 40px;gap:18px}
  .book,.cover{transition:none}.seal{opacity:.92;transform:rotate(-12deg)}
}