/* Story Vault demo. #stage is a container; .sv sets 1em = 1/30 of the stage width (16px at 480px),
   so the whole demo is laid out in em and scales cleanly down to 360px. */
#stage{container-type:inline-size;--walnut:#5A3A27;--walnut-2:#3E271A;--gold:#C9A25B;--paper:#FCF6EA;--paper-2:#F3E8D5;--ink-soft:rgba(58,43,31,.62)}
#stage *{box-sizing:border-box}
.sv{position:absolute;inset:0;font-size:3.3333cqw;color:var(--ink);font-family:Inter,system-ui,sans-serif;
  background:
    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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .22  0 0 0 0 .12  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(120% 80% at 50% 0%,#FFF9EE 0%,var(--bg) 60%,#EFE3CF 100%)}
.sv [hidden]{display:none!important}
.sv button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sv button:focus-visible,.sv textarea:focus-visible{outline:.16em solid var(--accent);outline-offset:.14em}
.sv svg{display:block}

/* Scenes */
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.scene.on{opacity:1;visibility:visible;transition:opacity .55s ease}
.eyebrow{margin:0;font:600 .7em/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.eyebrow b{color:var(--accent);font-weight:700}
.title{margin:.32em 0 0;font:600 1.6em/1.08 var(--display);letter-spacing:-.01em}
.sv-head{position:absolute;left:1.5em;right:1.5em;top:1.35em}

/* Buttons */
.sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:2.9em;padding:.7em 1.25em;border-radius:.8em;border:.125em solid var(--accent);background:var(--accent);color:#fff!important;font:600 1.02em/1.1 var(--display)!important;box-shadow:0 .35em .9em -.4em rgba(90,58,39,.55);transition:transform .15s,background .2s}
.sv-btn:active{transform:scale(.97)}
.sv-btn svg{width:1.15em;height:1.15em}
.sv-btn.ghost{background:transparent;color:var(--accent)!important;box-shadow:none}
.sv-btn.soft{background:var(--panel);border-color:rgba(140,90,60,.35);color:var(--ink)!important;box-shadow:none;font:600 .86em/1.15 Inter,system-ui,sans-serif!important}
.sv-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.sv-btn.nudge{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{box-shadow:0 0 0 .45em rgba(140,90,60,.16),0 .35em .9em -.4em rgba(90,58,39,.55)}}

/* ——— Step 1: the question arrives by text ——— */
.phone{position:absolute;left:50%;top:5.1em;width:15.6em;height:27em;margin-left:-7.8em;border-radius:2.3em;padding:.5em;
  background:linear-gradient(145deg,#4A3324,#2A1C13 60%,#3B2819);box-shadow:0 1.6em 2.6em -1.2em rgba(58,36,20,.55),inset 0 0 0 .08em rgba(255,255,255,.12)}
.phone-screen{position:relative;height:100%;border-radius:1.85em;overflow:hidden;background:linear-gradient(#FFFDF9,#FBF6EE)}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:.7em 1.2em .2em;font:600 .62em/1 Inter,system-ui,sans-serif;color:#2B2018}
.island{width:5.6em;height:1.6em;border-radius:1em;background:#20160F;margin:-.25em 0 0}
.sig{display:flex;gap:.18em;align-items:flex-end}.sig i{display:block;width:.28em;background:#2B2018;border-radius:.1em}
.phone-contact{display:flex;flex-direction:column;align-items:center;gap:.22em;padding:.45em 0 .6em;border-bottom:1px solid rgba(58,43,31,.08)}
.sv-av{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#A3704F,var(--accent) 70%);color:#FFF4E2}
.sv-av svg{width:1.2em;height:1.2em}
.phone-contact b{font:600 .7em/1 Inter,system-ui,sans-serif}
.phone-contact small{font-size:.54em;color:var(--mid)}
.thread{display:flex;flex-direction:column;gap:.45em;padding:.75em .75em 0}
.stamp{align-self:center;font:500 .52em/1 Inter,system-ui,sans-serif;color:var(--mid);letter-spacing:.02em}
.msg{max-width:88%;padding:.62em .8em;border-radius:1.05em 1.05em 1.05em .3em;background:#EFE5D6;font:400 .78em/1.36 Inter,system-ui,sans-serif;color:#2E2219;transform-origin:0 100%}
.msg b{font-weight:600}
.msg.pop{animation:pop .42s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(.6em)}}
.msg.hint-msg{font-size:.7em;background:#F4ECDF;color:#5D4B3C}
.typing{display:flex;gap:.28em;padding:.75em .85em;border-radius:1.05em 1.05em 1.05em .3em;background:#EFE5D6;align-self:flex-start}
.typing i{width:.42em;height:.42em;border-radius:50%;background:#A08B76;animation:dot 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{transform:translateY(-.25em);opacity:.5}}
.reply{align-self:flex-end;display:flex;align-items:center;gap:.4em;padding:.5em .8em;border-radius:1.05em 1.05em .3em 1.05em;background:var(--accent);color:#fff;font:600 .7em/1 Inter,system-ui,sans-serif}
.reply svg{width:1.2em;height:1.2em}

.ask-panel{position:absolute;left:0;right:0;bottom:0;padding:2.2em 1.4em 1.25em;display:flex;flex-direction:column;align-items:stretch;gap:.65em;
  background:linear-gradient(to bottom,rgba(242,232,215,0),rgba(242,232,215,.97) 1.9em,#EFE3CF)}
.ask-panel .lbl{margin:0;font:600 .74em/1.2 Inter,system-ui,sans-serif;color:var(--mid);text-align:center}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:.45em}
.chip{display:flex;align-items:center;gap:.45em;min-height:2.55em;padding:.45em .7em;border-radius:.75em;border:.1em solid rgba(140,90,60,.25);background:var(--panel);font:600 .84em/1.1 Inter,system-ui,sans-serif!important;text-align:left;transition:background .2s,border-color .2s,transform .15s}
.chip span{font-size:1.15em;line-height:1}
.chip[aria-pressed=true]{border-color:var(--accent);background:#F3E3D2;box-shadow:inset 0 0 0 .06em var(--accent)}
.chip:active{transform:scale(.97)}

/* ——— Step 2: answering by voice ——— */
.a-q{margin:.4em 0 0;font:italic 500 1.28em/1.25 var(--display);color:var(--ink)}
.rec{position:absolute;left:0;right:0;top:8.4em;display:flex;flex-direction:column;align-items:center;gap:.65em}
.sv .mic{position:relative;width:6.2em;height:6.2em;border-radius:50%;border:0;padding:0;display:grid;place-items:center;color:#FFF7EA;
  background:radial-gradient(circle at 35% 30%,#A9764F,var(--accent) 55%,#6B4129);box-shadow:0 .8em 1.6em -.6em rgba(90,58,39,.7),inset 0 -.25em .5em rgba(0,0,0,.18)}
.mic svg{width:2.6em;height:2.6em;position:relative;z-index:1}
.mic::before,.mic::after{content:"";position:absolute;inset:0;border-radius:50%;border:.14em solid var(--accent);opacity:0}
.mic.live::before{animation:ring 1.8s ease-out infinite}.mic.live::after{animation:ring 1.8s ease-out .9s infinite}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.65);opacity:0}}
.mic.idle-pulse{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.045)}}
.mic .ic-stop{display:none}.mic.recording .ic-mic{display:none}.mic.recording .ic-stop{display:block;width:1.9em;height:1.9em}
.rec-status{min-height:1.3em;font:600 .78em/1.3 Inter,system-ui,sans-serif;color:var(--mid);text-align:center;padding:0 1.5em}
.rec-status .dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#B4472F;margin-right:.4em;vertical-align:.02em;animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.rec-status.warn{color:#8A4A2E}
.wave{position:absolute;left:1.5em;top:17.3em;width:27em;height:3.6em}
.transcript{position:absolute;left:1.5em;right:1.5em;top:21.6em;height:8.6em;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 1.6em);mask-image:linear-gradient(to bottom,transparent 0,#000 1.6em);display:flex;flex-direction:column;justify-content:flex-end}
.transcript p{margin:0;font:400 1.04em/1.5 var(--display);color:var(--ink)}
.transcript p:empty::before{content:attr(data-empty);color:var(--mid);font-style:italic;font-size:.92em}
.transcript .w{animation:wordin .35s ease-out both}
.transcript .interim{color:var(--mid)}
@keyframes wordin{from{opacity:0;filter:blur(2px)}}
.type-box{position:absolute;left:1.5em;right:1.5em;top:8.2em;bottom:5.4em;display:flex;flex-direction:column;gap:.5em}
.type-box[hidden]{display:none}
.type-note{margin:0;font:500 .78em/1.35 Inter,system-ui,sans-serif;color:var(--mid)}
.type-box textarea{flex:1;width:100%;resize:none;border-radius:.8em;border:.1em solid rgba(140,90,60,.3);background:var(--paper);padding:.8em .9em;font:400 1.04em/1.5 var(--display);color:var(--ink);box-shadow:inset 0 .15em .4em rgba(90,58,39,.06);user-select:text;-webkit-user-select:text}
.type-box textarea::placeholder{color:#A8957F;font-style:italic}
.type-count{margin:0;font:500 .7em/1 Inter,system-ui,sans-serif;color:var(--mid);text-align:right}
.a-actions{position:absolute;left:1.4em;right:1.4em;bottom:1.3em;display:flex;gap:.6em;justify-content:center}
.a-actions>*{flex:1 1 0;min-width:0}
.a-actions [hidden]{display:none}
.s-answer.typing-mode .rec,.s-answer.typing-mode .wave,.s-answer.typing-mode .transcript{display:none}

/* ——— Step 3: the book page ——— */
.s-page{background:
  radial-gradient(90% 70% at 50% 45%,rgba(255,220,170,.16),transparent 70%),
  repeating-linear-gradient(94deg,rgba(0,0,0,.05) 0 .12em,transparent .12em .9em,rgba(255,255,255,.035) .9em 1.05em,transparent 1.05em 2.3em),
  linear-gradient(170deg,#6A452E,var(--walnut) 45%,var(--walnut-2))}
.book{position:absolute;left:2.6em;top:1.5em;width:26.4em;height:32.4em;perspective:1900px}
.book::before{content:"";position:absolute;left:-2.1em;top:.35em;bottom:-.25em;width:2.6em;border-radius:.35em 0 0 .35em;
  background:linear-gradient(90deg,#E9DCC5,#F6EEDF 40%,#E2D3B9 80%,#C9B596);box-shadow:-.5em .8em 1.4em -.4em rgba(0,0,0,.45)}
.leaf{position:absolute;inset:0;border-radius:0 .45em .45em 0}
.leaf.under{background:linear-gradient(90deg,#E6D8BF,var(--paper) 7%,var(--paper));box-shadow:0 1.1em 2em -.8em rgba(0,0,0,.55),.25em .25em 0 #E4D6BD,.5em .5em 0 #D6C5A6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;color:var(--mid);text-align:center;padding:2em}
.leaf.under p{margin:0;font:italic 400 .95em/1.4 var(--display)}
.leaf.under .eyebrow{color:#B09A80}
.page{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.5,.05,.3,1)}
.page.turn{transform:rotateY(-176deg)}
.pg-front,.pg-back{position:absolute;inset:0;border-radius:0 .45em .45em 0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pg-back{transform:rotateY(180deg);background:linear-gradient(270deg,#E6D8BF,#F7EFE1 8%,#F2E7D4)}
.pg-front{display:flex;flex-direction:column;padding:1.55em 2.05em 1.15em 2.35em;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .18  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    linear-gradient(90deg,rgba(120,85,50,.16),transparent 1.4em),
    radial-gradient(120% 90% at 60% 40%,#FFFBF2,var(--paper) 55%,var(--paper-2));
  box-shadow:inset -.1em 0 0 rgba(0,0,0,.04)}
.page .shade{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 60%);opacity:0;transition:opacity 1.15s}
.page.turn .shade{opacity:1}
.run-head{display:flex;justify-content:space-between;font:600 .52em/1 Inter,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#A38C72;padding-bottom:.9em;border-bottom:1px solid rgba(120,85,50,.16)}
.ch-num{margin:1.5em 0 0;font:600 .66em/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.ch-title{margin:.32em 0 0;font:600 1.62em/1.12 var(--display);letter-spacing:-.012em;color:var(--ink)}
.ch-meta{margin:.45em 0 0;font:italic 400 .76em/1.3 var(--display);color:var(--mid)}
.orn{width:6.5em;height:.65em;margin:.85em 0 .95em;color:var(--gold)}
.pg-body{flex:1;min-height:0;overflow:hidden;font:400 .93em/1.58 var(--display);color:#3A2B1F;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pg-body p{margin:0}
.dropcap{float:left;font:600 3.55em/.8 var(--display);margin:.07em .1em 0 -.04em;padding-top:.04em;color:var(--accent)}
.pg-body .w{transition:color .25s,background-color .25s;border-radius:.15em}
.page.set .w{animation:ink .55s ease-out both;animation-delay:calc(var(--i) * 13ms + .25s)}
.page.set .dropcap{animation:cap .9s cubic-bezier(.2,1,.3,1) both}
.page.set .ch-num,.page.set .ch-title,.page.set .ch-meta,.page.set .orn{animation:ink .6s ease-out both}
.page.set .ch-title{animation-delay:.08s}.page.set .ch-meta{animation-delay:.16s}.page.set .orn{animation-delay:.2s}
@keyframes ink{from{opacity:0;filter:blur(3px);transform:translateY(.25em)}}
@keyframes cap{from{opacity:0;transform:scale(1.6);color:var(--gold);filter:blur(4px)}}
.pg-body.listening .w{color:rgba(58,43,31,.42)}
.pg-body.listening .w.said{color:#3A2B1F}
.pg-body.listening .w.now{background:rgba(201,162,91,.28)}
.pg-foot{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:.8em}
.folio{font:italic 400 .72em/1 var(--display);color:#A38C72}
.listen{display:inline-flex;align-items:center;gap:.5em;padding:.42em .85em .42em .5em;border-radius:99em;border:.08em solid rgba(140,90,60,.45);background:rgba(255,250,240,.75);font:600 .72em/1 Inter,system-ui,sans-serif!important;color:var(--accent)!important}
.listen .pl{width:1.65em;height:1.65em;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.listen .pl svg{width:.75em;height:.75em}
.listen .bars{display:flex;align-items:center;gap:.13em;height:1em}
.listen .bars i{display:block;width:.16em;height:30%;border-radius:.1em;background:currentColor;opacity:.75}
.listen.playing .bars i{animation:eq .9s ease-in-out infinite}
.listen.playing .bars i:nth-child(2){animation-delay:-.2s}.listen.playing .bars i:nth-child(3){animation-delay:-.45s}.listen.playing .bars i:nth-child(4){animation-delay:-.65s}.listen.playing .bars i:nth-child(5){animation-delay:-.3s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.listen .t{font-variant-numeric:tabular-nums;color:var(--mid);font-weight:500}
.listen.pop{animation:pillin .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pillin{from{opacity:0;transform:translateY(.4em) scale(.9)}}
.p-actions{position:absolute;left:1.4em;right:1.4em;bottom:1.05em;display:flex;justify-content:center;opacity:0;transition:opacity .4s}
.p-actions.on{opacity:1}
.p-actions .sv-btn{background:#F6EBD9;border-color:#F6EBD9;color:var(--walnut-2)!important;box-shadow:0 .5em 1.2em -.4em rgba(0,0,0,.6)}

/* ——— Step 4: the book grows ——— */
.s-shelf .sv-head{text-align:center}
.vol{margin:.35em 0 0;font:600 2.05em/1.05 var(--display);letter-spacing:-.015em}
.vol-sub{margin:.45em 0 0;font:500 .86em/1.2 Inter,system-ui,sans-serif;color:var(--mid)}
.vol-sub b{color:var(--ink);font-variant-numeric:tabular-nums}
.prog{width:13em;height:.36em;margin:.6em auto 0;border-radius:1em;background:rgba(140,90,60,.15);overflow:hidden}
.prog i{display:block;height:100%;width:21.15%;border-radius:inherit;background:linear-gradient(90deg,#B48A5E,var(--accent));transition:width .8s cubic-bezier(.3,1.2,.5,1)}
.shelf{position:absolute;left:1.2em;right:1.2em;top:9.3em;height:12.8em;display:flex;align-items:flex-end;justify-content:center;gap:.12em;padding:0 .4em}
.shelf::after{content:"";position:absolute;left:-.4em;right:-.4em;bottom:-1.05em;height:1.05em;border-radius:.2em;
  background:linear-gradient(#8A5E40,#6B4530 45%,#4E3121);box-shadow:0 1em 1.4em -.6em rgba(58,36,20,.55)}
.spine{position:relative;flex:none;width:1.62em;border-radius:.16em .16em .06em .06em;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.14) 22%,rgba(255,255,255,0) 45%,rgba(0,0,0,.2)),var(--c);
  box-shadow:inset 0 0 0 .05em rgba(0,0,0,.2);transform-origin:50% 100%}
.spine::before,.spine::after{content:"";position:absolute;left:.18em;right:.18em;height:.1em;background:linear-gradient(90deg,#9C7A3C,#E9D08C,#B48A45);opacity:.85}
.spine::before{top:.55em;box-shadow:0 .22em 0 rgba(201,162,91,.6)}.spine::after{bottom:1.6em}
.spine span{writing-mode:vertical-rl;font:600 .56em/1 var(--display);letter-spacing:.04em;color:#F4E4C2;white-space:nowrap;max-height:calc(100% - 4.4em);overflow:hidden;text-overflow:clip}
.spine em{position:absolute;bottom:.45em;left:0;right:0;text-align:center;font:600 .5em/1 Inter,system-ui,sans-serif;font-style:normal;color:rgba(244,228,194,.85)}
.shelf.grow .spine:not(.new){animation:rise .55s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes rise{from{opacity:0;transform:translateY(1.2em) scaleY(.7)}}
.spine.new{--c:var(--accent);box-shadow:inset 0 0 0 .05em rgba(0,0,0,.2),0 0 0 .14em rgba(201,162,91,.0)}
.shelf .spine.new{opacity:0;transform:translateY(-12em) rotate(-8deg)}
.shelf .spine.new.in{opacity:1;transform:none;transition:transform .85s cubic-bezier(.3,1.25,.5,1),opacity .3s;animation:glow 2.4s ease-in-out .8s 2}
@keyframes glow{50%{box-shadow:inset 0 0 0 .05em rgba(0,0,0,.2),0 0 1.1em .25em rgba(222,180,100,.75)}}
.spine.ghost{background:transparent;border:.09em dashed rgba(140,90,60,.35);box-shadow:none}
.spine.ghost::before,.spine.ghost::after{display:none}
.spine.ghost em{color:rgba(140,90,60,.55)}
.feed{position:absolute;left:1.6em;right:1.6em;top:24.2em;display:flex;flex-direction:column;gap:.55em}
.feed-row{display:flex;align-items:center;gap:.7em;padding:.6em .75em;border-radius:.8em;background:var(--panel);border:.06em solid rgba(140,90,60,.16);box-shadow:0 .4em 1em -.7em rgba(90,58,39,.4);opacity:0;transform:translateY(.8em);transition:opacity .45s,transform .5s cubic-bezier(.2,1.3,.4,1)}
.feed-row.in{opacity:1;transform:none}
.f-av{flex:none;width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;background:var(--t);color:#fff;font:600 .9em/1 var(--display)}
.f-txt{display:flex;flex-direction:column;gap:.2em;min-width:0;font:500 .82em/1.25 Inter,system-ui,sans-serif}
.f-txt small{color:var(--mid);font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-txt .heart{color:#B4472F}
.s-actions{position:absolute;left:1.4em;right:1.4em;bottom:1.25em;display:flex;justify-content:center;opacity:0;transition:opacity .4s}
.s-actions.on{opacity:1}

/* ——— The printed hardcover ——— */
.s-cover{background:radial-gradient(80% 55% at 50% 30%,#FFF8EA,var(--bg) 65%,#EADCC4)}
.stand{position:absolute;left:50%;top:1.5em;width:14em;height:18.9em;margin-left:-7em;perspective:1500px}
.hard{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-48deg) rotateX(9deg) translateY(1.2em);transition:transform 1.5s cubic-bezier(.25,1,.35,1)}
.s-cover.on .hard{transform:rotateY(-20deg) rotateX(4deg)}
.cover{position:absolute;inset:0;border-radius:.2em .5em .5em .2em;transform:translateZ(1.1em);display:flex;flex-direction:column;align-items:center;padding:2.4em 1.2em 1.6em 1.8em;text-align:center;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 .08em,transparent .08em .2em),
    repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 .08em,transparent .08em .21em),
    linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.06) 1.1em,rgba(0,0,0,0) 1.6em),
    radial-gradient(120% 90% at 30% 20%,#7A4E34,#5A3826 60%,#43291B);
  box-shadow:inset 0 0 0 .06em rgba(0,0,0,.4),0 1.2em 1.6em -.9em rgba(40,24,14,.55)}
.cover::before{content:"";position:absolute;inset:.85em .8em .85em 1.4em;border:.06em solid rgba(214,180,110,.65);border-radius:.15em;box-shadow:inset 0 0 0 .22em rgba(0,0,0,0),inset 0 0 0 .28em rgba(214,180,110,.35)}
.edge{position:absolute;top:.35em;bottom:.35em;right:-.1em;width:2.2em;transform:rotateY(90deg) translateZ(.05em);transform-origin:100% 50%;
  background:repeating-linear-gradient(90deg,#F4EBDA 0 .09em,#E2D4BB .09em .14em);border-radius:.1em}
.hc-back{position:absolute;inset:0;border-radius:.2em .5em .5em .2em;transform:translateZ(-1.1em);background:#3E271A}
.foil{background:linear-gradient(100deg,#9A773A 0%,#E7CE8A 18%,#B08743 34%,#FBEBB5 48%,#A97F3F 62%,#E0BE74 80%,#9A773A 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 .06em 0 rgba(0,0,0,.45))}
.s-cover.on .foil{animation:foil 2.6s ease-in-out .5s both}
@keyframes foil{from{background-position:100% 0}to{background-position:0 0}}
.c-top{margin:0;font:600 .5em/1 Inter,system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase}
.c-orn{width:3.9em;height:3.9em;margin:1.3em 0 .7em;color:#D6B46E;filter:drop-shadow(0 .06em 0 rgba(0,0,0,.45))}
.c-title{margin:0;font:600 2.15em/1.02 var(--display);letter-spacing:-.01em}
.c-sub{margin:.65em 0 0;font:italic 400 .82em/1.3 var(--display)}
.c-year{margin-top:auto;font:600 .9em/1 var(--display);letter-spacing:.3em}
.c-note{position:absolute;left:1.5em;right:1.5em;top:22.6em;transition:opacity .5s;margin:0;text-align:center;font:italic 400 .9em/1.35 var(--display);color:var(--mid)}

/* Autoplay finger */
.touch{position:absolute;left:0;top:0;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(90,58,39,.28);border:.14em solid rgba(255,255,255,.85);box-shadow:0 .3em .8em rgba(58,36,20,.35);opacity:0;pointer-events:none;z-index:20;transition:left .7s cubic-bezier(.4,0,.2,1),top .7s cubic-bezier(.4,0,.2,1),opacity .3s,transform .15s}
.touch.on{opacity:1}.touch.tap{transform:scale(.72)}

/* The shell's CTA, re-dressed so the hardcover stays visible above it */
#stage #cta{justify-content:center;flex-flow:row wrap;align-content:flex-end;gap:10px 12px;padding:24px 20px 26px;
  background:linear-gradient(to bottom,rgba(246,239,228,0) 0,rgba(246,239,228,0) 50%,rgba(246,239,228,.94) 66%,var(--bg))}
#stage #cta h2,#stage #cta p{flex-basis:100%}
#stage #cta h2{font-size:clamp(26px,7.4cqw,34px)}
#stage #cta p{font-size:clamp(14px,3.4cqw,16px);margin-bottom:6px;text-wrap:balance}
#stage #cta .btn{font-size:clamp(15px,3.7cqw,18px);padding:12px 18px}

@media (prefers-reduced-motion:reduce){
  .shelf .spine.new{transform:none}
}

.sv.end .c-note{opacity:0}