.quiet-link{color:#456b66;text-decoration:underline;text-underline-offset:4px}
.book-cover,.book-spread{margin:clamp(12px,4vw,48px) auto;max-width:1090px}
.book-cover{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:18px;padding:clamp(24px,6vw,80px);border:1px solid #77836c;border-left:15px solid #74836b;border-radius:5px 16px 16px 5px;background:#d4ddc7 url("../../assets/cotton-paper.svg");box-shadow:5px 6px 0 #e7dac0,9px 10px 0 #bdb096,0 18px 35px #58402a24}
.book-cover[hidden],.book-spread[hidden],.book-page[hidden]{display:none}
.stamp{display:inline-block;color:#8f3e34;border:2px solid currentColor;border-radius:3px;padding:4px 11px;font:700 clamp(23px,4vw,40px)/1 var(--hand);transform:rotate(-7deg);margin:0 0 14px}
.book-cover h1{font:700 clamp(55px,9vw,115px)/.79 var(--hand);letter-spacing:-.05em;color:#3b503f;margin:8px 0 20px}
.book-cover figure{margin:0;text-align:center}
.book-cover figure img{display:block;width:100%;height:auto}
.book-cover figcaption,.bunny-aside{font:700 clamp(23px,4vw,38px)/1.05 var(--hand);color:#8f3e34}
.book-cover figcaption{transform:rotate(5deg)}
.book-action{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;background:#edd3a5;color:#503a26;border:1px solid #c29f66;border-radius:4px 10px 8px 6px;font-weight:600;margin:8px 10px 8px 0}
.book-spread{display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.5fr);background:#fff8e8 url("../../assets/cotton-paper.svg");border:1px solid #cfbd97;border-radius:10px;box-shadow:4px 5px 0 #dfd0ab,0 10px 28px #58402a17}
.thumb-index{padding:clamp(29px,3vw,36px);background:#f2e8d0;border-right:1px solid #d4c49f}
.thumb-index a{display:block;margin:6px 0;line-height:1.5;padding:5px 0}
.thumb-index h2{font:700 23px/1.1 var(--hand);margin:16px 0 3px}
.thumb-index ul{padding-left:14px;margin:0;color:#675844;font-size:13px}
.thumb-index .secret-tab{background:#efd4c7;padding:7px 9px;margin-top:14px}
.thumb-index [aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.open-pages{min-width:0;padding:clamp(29px,4vw,55px)}
.book-page h2{font:700 clamp(36px,6vw,70px)/.95 var(--hand);margin:5px 0 12px}
.book-page h3{font:700 31px/1.1 var(--hand);margin:12px 0}
.book-page p,.book-route{line-height:1.65}
.folio-note{color:#546e56;font:700 23px/1.15 var(--hand);margin:0}
.page-lead{font-size:clamp(16px,2vw,22px);font-weight:600}
.taped-photo{position:relative;background:#fffcf4;padding:7px;margin:18px 0;box-shadow:0 4px 14px #58402a23}
.taped-photo::before{content:"";position:absolute;top:-7px;left:36%;width:29%;height:16px;background:#dec28eb8;transform:rotate(-4deg)}
.taped-photo img{display:block;width:100%;height:auto;object-fit:cover}
.taped-photo figcaption{font:400 22px/1.1 var(--hand);text-align:center;padding:5px}
.invitation-photo{float:right;width:clamp(100px,36%,205px);margin:3px 0 10px 17px;transform:rotate(3deg)}
.route-photo img{height:clamp(150px,28vw,260px)}
.book-route{padding-left:22px}
.book-route li+li{margin-top:5px}
@media(max-width:660px){.book-cover,.book-spread{grid-template-columns:1fr}.book-cover figure{max-width:300px;margin:auto}.thumb-index{border-right:0;border-bottom:1px solid #d4c49f}.thumb-index ul{display:flex;flex-wrap:wrap;gap:5px 19px}.book-cover h1 br{display:none}}

.notebook-stage.page-width{position:relative;display:flow-root;width:calc(100% - 24px);max-width:1480px}
.illustrated-cover{position:relative;width:min(100%,clamp(720px,58vw,900px));margin:0 auto 12px;transform-origin:center 4%;box-shadow:0 9px 26px #58402a2a}
.illustrated-cover::after { content: ""; display: block; padding-bottom: 17.7734375%; }
.cover-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.cover-row img { display: block; width: 100%; height: auto; }
.cover-hero-row { grid-template-columns: minmax(0, 406fr) minmax(0, 618fr); }
.cover-intro-row { grid-template-columns: minmax(0, 580fr) minmax(0, 444fr); }
.cover-shortcuts-row { grid-template-columns: minmax(0, 354fr) minmax(0, 330fr) minmax(0, 340fr); }
.illustrated-cover[hidden]{display:none}
.illustrated-cover.cover-turning{position:absolute;z-index:2;top:0;left:50%;translate:-50% 0;pointer-events:none;backface-visibility:hidden}
.cover-link{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border-radius:8px}
.cover-link:hover{background:#fff5ca28}
.cover-link:focus-visible{outline:3px solid #355b55;outline-offset:2px}
.cover-brand{--x:7%;--y:40.06957%;--w:38%;--h:33.39130%}
.cover-notebook{--x:55%;--y:40.06957%;--w:13%;--h:33.39130%}
.cover-map{--x:69%;--y:40.06957%;--w:9%;--h:33.39130%}
.cover-about{--x:78%;--y:40.06957%;--w:9%;--h:33.39130%}
.cover-menu{--x:88%;--y:40.06957%;--w:7%;--h:33.39130%}
.cover-open{--x:11%;--y:48.50824%;--w:44%;--h:30.72000%}
.cover-explore{--x:10%;--y:17.81643%;--w:23%;--h:63.07246%}
.cover-together{--x:39%;--y:17.81643%;--w:24%;--h:63.07246%}
.cover-tips{--x:70%;--y:14.10628%;--w:22%;--h:66.78261%}
.cover-guides-tab{--x:6%;--y:87.3%;--w:22%;--h:7%}
.cover-adventures-tab{--x:28%;--y:87.3%;--w:22%;--h:7%}
.cover-notes-tab{--x:50%;--y:87.3%;--w:22%;--h:7%}
.cover-favorites-tab{--x:72%;--y:87.3%;--w:23%;--h:7%}

/* The binding is independent of the paper width. */
.book-spread {
  width: 100%;
  max-width: none;
  margin: 12px auto;
  box-sizing: border-box;
  grid-template-columns: minmax(155px, 1fr) minmax(0, 2.3fr);
  padding: 27px clamp(12px, 3vw, 25px) 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
}
.notebook-rings {
  position: absolute;
  inset: 8px clamp(23px, 5vw, 45px) auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}
.notebook-rings img { width: 27px; height: 43px; }
.open-pages, .thumb-index {
  background: radial-gradient(circle, #795c3826 0.65px, transparent 1px) 3px 5px / 17px 17px,
    #F6EFE5 url("../../assets/cotton-paper.svg");
  border: 1px solid #d4bb98;
}
.open-pages {
  border-radius: 0 14px 18px 0;
  box-shadow: 2px 3px 0 #e5d2b7, 4px 6px 0 #b78362;
}
.thumb-index { border-radius: 14px 0 0 18px; border-right: 1px dashed #d4bb98; }

@media (max-width: 660px) {
  .notebook-stage.page-width { width: 100%; max-width: none; }
  .illustrated-cover, .book-spread { margin-top: 0; }
  .book-spread { grid-template-columns: minmax(0, 1fr); }
  .open-pages { grid-row: 1; border-radius: 12px 12px 16px 16px; }
  .thumb-index { margin-top: 12px; border-radius: 12px; border-right: 1px solid #d4bb98; }
}

.notebook-body {
  min-height: 100svh;
  background: #F6EFE5;
}

.folio-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  border-top: 1px dashed #c8ae8b;
}
.folio-controls a, .folio-controls button {
  padding: 12px 0;
  color: #456b66;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.folio-controls button { display: none; background: none; border: 0; font: inherit; cursor: pointer; }
.folio-controls a:last-child { grid-column: 3; }
@media (max-width: 660px) {
  .illustrated-cover { margin-bottom: 0; box-shadow: none; }
  .folio-controls button { display: block; }
  .book-spread:not(.contents-open) .thumb-index { display: none; }
}

.open-pages, .thumb-index {
  position: relative;
  border-color: transparent;
  background-clip: border-box;
  background-color: #F6EFE5;
  box-shadow: none;
}
.thumb-index {
  border-right: 1px solid #d5ba98;
  box-shadow: inset -6px 0 12px -9px #795138;
}
.book-spread::after {
  content: "";
  position: absolute;
  inset: 20px clamp(3px, 1.6vw, 14px) 10px;
  border: 1px solid transparent;
  border-image: url("notebook-paper-perimeter-neutral.webp") 100 65 90 65 / 32px 23px 31px 23px stretch;
  pointer-events: none;
}
@media (max-width: 660px) {
  .book-spread::after {
    inset: 20px 3px 12px;
    border-image-width: 25px 16px 23px 16px;
  }
  .book-spread.contents-open .open-pages { border-radius: 12px 12px 0 0; }
  .book-spread.contents-open .thumb-index {
    margin-top: 0;
    border-radius: 0 0 14px 14px;
    border-top: 1px dashed #c8ae8b;
    border-right: 0;
    box-shadow: none;
  }
}

.paper-curl {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 76px;
  height: 70px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 27% 84%, 44% 59%, 60% 31%, 79% 12%);
  background: linear-gradient(138deg, #fff8e9 34%, #e9d6b5 51%, #bb8865 55%, #e3b08d 76%);
  cursor: pointer;
}
.paper-curl:hover, .paper-curl:focus-visible { filter: brightness(1.1); }
.open-pages:focus-within .paper-curl:focus-visible { outline: 3px solid #456b66; outline-offset: -4px; }
.book-page { transform-origin: top center; }

.turning-leaf {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  padding: inherit;
  background: inherit;
  border-radius: inherit;
  box-shadow: 0 9px 18px #62361f60;
  backface-visibility: hidden;
  pointer-events: none;
}

.illustrated-cover { box-shadow: none; }
.cover-paper-edge {
  position: absolute;
  inset: 2.6% 0 9.2%;
  background: url("notebook-paper-perimeter-neutral.webp") center / 100% 100% no-repeat;
  /* Trim the coral fringe so the paper sits directly over the tab artwork. */
  mask-image: linear-gradient(#000 98%, transparent 98.6%);
  pointer-events: none;
}


.cover-bottom-tabs {
  position: absolute;
  inset: 87.9% 0 auto;
  aspect-ratio: 1024 / 95;
  background: url("notebook-tab-art-tucked.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 3px #6d35284d);
  pointer-events: none;
}
.illustrated-cover { container-type: inline-size; }
.cover-notes-tab {
  display: grid;
  place-items: center;
  color: #241a14;
  font: 700 clamp(12px, 3.7cqw, 27px)/1 var(--hand);
  text-decoration: none;
  white-space: nowrap;
}

.cover-mobile-keepsake { display: none; }
@media (max-width: 660px) and (max-aspect-ratio: 3/5) {
  .illustrated-cover {
    /* Use the stable viewport height so Safari's toolbar cannot shift the tabs. */
    --cover-extra: clamp(0px, calc(100svh - 150vw - 12px), 108px);
  }
  .illustrated-cover::before {
    content: "";
    position: absolute;
    inset: 6cqw 3.6% 18cqw;
    border-radius: 4cqw;
    background: #fbf3e8 url("../../assets/cotton-paper.svg");
    pointer-events: none;
  }
  .cover-masthead-row { margin-bottom: calc(var(--cover-extra) * .16); }
  .cover-shortcuts-row img { mask-image: linear-gradient(#000 92%, transparent 99%); }
  .cover-mobile-keepsake {
    display: block;
    position: relative;
    height: calc(var(--cover-extra) * .84);
    background: url("cover-sleeping-hibiki.webp") center / auto 76% no-repeat;
  }
  .cover-paper-edge { inset-block: 3.9cqw 13.8cqw; }
  .cover-bottom-tabs { inset-block: auto 8.87cqw; }
  .illustrated-cover > .cover-link {
    top: auto;
    bottom: 8.55cqw;
    height: 10.5cqw;
  }
}