:root{background:repeating-linear-gradient(90deg,#f5eee3 0 31px,#edd9da 31px 60px);color:#382b25;font-family:Georgia,serif}
*{box-sizing:border-box}
body{margin:0}
a,button{color:inherit}
button{cursor:pointer;font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #955469;outline-offset:3px}
.top{display:flex;justify-content:space-between;align-items:center;padding:.7rem clamp(1rem,4vw,4rem);background:#f8f0e9e8}
.top a{display:inline-flex;align-items:center;min-height:44px}
.top button{min-height:44px;min-width:44px;border:0;background:none}
.top [aria-pressed=true]{text-decoration:underline;text-underline-offset:.28em}
main{padding:clamp(2rem,8vh,6rem) clamp(1rem,6vw,5rem) 4rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.book{--margin:clamp(1.5rem,4vw,3rem);max-width:62rem;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:relative;isolation:isolate}
.paper{box-sizing:border-box;min-width:0;min-height:27rem;padding:var(--margin);background:#fffdfa;box-shadow:2px 6px 12px #64473138,4px 8px 0 #e9dfd2}
.left-page{background:linear-gradient(90deg,#fffdfa 94%,#e9dfd7)}
.right-page{background:linear-gradient(90deg,#eee5de,#fffdfa 7%)}
.chapter{font:400 clamp(1.35rem,3.1vw,2.25rem)/1.15 Didot,"Bodoni 72",Georgia,serif;margin:0 0 1rem}
.policy-rules{margin:0;padding-left:1.2em;font-size:clamp(.97rem,1.5vw,1.14rem);line-height:1.55}
.policy-rules li+li{margin-top:.68rem}
.notes{position:absolute;right:0;top:0;z-index:5;transform:translate(25%,-63%) rotate(12deg);font-size:clamp(2rem,5vw,4rem);color:#955469;pointer-events:none}
.rings{position:absolute;z-index:4;left:50%;top:18%;bottom:19%;display:flex;flex-direction:column;justify-content:space-between;transform:translateX(-50%);pointer-events:none}
.rings span{width:1.85rem;height:.55rem;border:2px solid #806646;border-radius:50%;background:#bfa07b;box-shadow:0 2px 3px #422d3e60}
.paging{display:flex;justify-content:space-between;align-items:center;gap:.4rem;max-width:62rem;margin:1.1rem auto 0;font-size:.88rem}
.paging button{border:0;background:none;padding:.35rem;min-height:44px}
.paging button:disabled{opacity:.35;cursor:default}
.paging button:not(:disabled):hover{text-decoration:underline}
.curl-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.curl-strip{position:absolute;top:0;overflow:hidden;transform-origin:0 0;background:#fffdfa}
.curl-strip .paper{position:absolute;top:0;margin:0;box-shadow:none}
.curl-strip i{position:absolute;inset:0;background:#72503c;pointer-events:none}
@media(max-width:660px){
  main{padding-top:2rem}
  .book{grid-template-columns:1fr}
  .paper{min-height:0}
  .cover{min-height:12rem}
  .decoration,.rings,.notes{display:none}
}


.closed-stage{display:grid;justify-items:center;perspective:1150px}
.closed-stage[hidden]{display:none}
.closed-cover{
  display:grid;align-content:center;justify-items:center;gap:1.6rem;
  width:min(73vw,20rem);aspect-ratio:3/4;padding:2rem 1.25rem;
  border:1px solid #a9787f;border-radius:3px 8px 8px 3px;
  background:linear-gradient(90deg,#af7e86 0%,#c69ca1 4%,#ebcbce 9%,#efd5d6 100%);
  box-shadow:4px 5px #fdf4e9,7px 8px #a97d79,11px 16px 24px #79534b48;
  transform-origin:left center;
  animation:book-arrive 420ms cubic-bezier(.17,.75,.3,1) 100ms both;
  backface-visibility:hidden;
}
.cover-brand,.cover-hint{font:400 .9rem/1.35 "Avenir Next Condensed","Arial Narrow",sans-serif;letter-spacing:.13em}
.cover-title{font:italic 400 clamp(2rem,5vw,3.5rem)/1.05 Didot,"Bodoni 72",Georgia,serif}
.cover-hint{border-top:1px solid #a9787f;padding:.8rem 1.3rem 0}
@keyframes book-arrive{from{opacity:0;translate:0 min(40vh,14rem)}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.closed-cover{animation:none}}
:root{view-transition-name:none}
@media(max-width:660px){.right-page[aria-hidden=true]{display:none}}

.closed-stage{position:relative;width:min(100%,48rem);margin:auto}
.closed-cover{width:min(64vw,17.5rem);position:relative;z-index:1}
.cover-brand{font:italic 400 clamp(1.35rem,3vw,2rem)/1.15 "Bodoni 72",Didot,Georgia,serif;letter-spacing:0}
.cover-piano{
  position:absolute;left:calc(50% + 7rem);bottom:-1rem;
  width:clamp(7rem,18vw,15rem);height:auto;pointer-events:none;
  filter:drop-shadow(0 .5rem .6rem #58342a33);
  animation:book-arrive 420ms ease-out 180ms both;
}
@media(max-width:800px){
  .cover-piano{position:relative;left:auto;bottom:auto;justify-self:end;margin:-2rem 0 0}
}
@media(prefers-reduced-motion:reduce){.cover-piano{animation:none}}