@font-face {
  font-family: Gaegu;
  src: url(../assets/gaegu-400.ttf);
  font-display: swap;
}
@font-face {
  font-family: Playpen;
  src: url(../assets/playpen-sans-400.ttf);
  font-display: swap;
}
* { box-sizing: border-box; }
:root {
  color: #573b2b;
  background: #f8e1ce;
  font: 14px/1.45 Playpen, system-ui, sans-serif;
  --hand: Gaegu, cursive;
}
body { margin: 0; }
[hidden] { display: none !important; }
a, button { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid #85502d; outline-offset: 4px; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1560px;
  padding: 0 4%;
  margin: auto;
}
.top a { display: inline-flex; align-items: center; min-height: 44px; }
.top h1 { margin: 0; font: 24px/1 var(--hand); }
main { max-width: 1560px; margin: auto; }
.book { position: relative; container-type: inline-size; touch-action: pan-y; }
.spread {
  position: relative;
  aspect-ratio: 3 / 2;
  background: url(art/book.webp) center / 100% 100%;
}
.tabs {
  position: absolute;
  z-index: 4;
  display: flex;
  top: 1.7%;
  left: 45.5%;
  width: 34%;
}
.tabs a { display: block; flex: 1; min-height: 44px; }
.tabs img { display: block; width: 100%; height: auto; transition: transform .2s; }
.tabs a[aria-current] img { transform: translateY(-4%); }
.note {
  position: absolute;
  left: 13%;
  top: 13%;
  width: 32%;
  text-align: center;
  font-family: var(--hand);
}
.note h2 { position: relative; margin: 0; font: normal 4.1cqw/.97 var(--hand); transform: rotate(-5deg); }
.note p { position: relative; font-size: 2cqw; margin: 1.6cqw 0 0; transform: rotate(-3deg); }
.coast .note {
  background: url(art/blue-wash.webp) no-repeat left 35% / 37% auto,
              url(art/peach-wash.webp) no-repeat right 47% / 25% auto;
}
.print {
  position: absolute;
  margin: 0;
  padding: .8cqw;
  background: #fffaf2;
  box-shadow: 0 .55cqw .8cqw #573b2b38;
  transform: rotate(var(--tilt));
}
.print a, .print img { display: block; width: 100%; height: 100%; }
.print a { cursor: zoom-in; }
.print img { object-fit: cover; object-position: var(--crop, center); }
.taped::before, .corners::before, .corners::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.taped::before {
  width: 27%;
  height: 18%;
  top: -7%;
  left: 34%;
  background: url(art/washi.webp) center top / contain no-repeat;
}
.corners::before, .corners::after {
  width: 12%;
  height: 16%;
  background: url(art/corner.webp) left top / contain no-repeat;
}
.corners::before { left: -.6%; top: -.5%; }
.corners::after { right: -.6%; bottom: -.5%; transform: rotate(180deg); }
.pier { left: 10%; top: 43%; width: 37%; height: 41%; --tilt: -3.5deg; }
.evening { left: 53.6%; top: 16%; width: 38%; height: 34%; --tilt: 1.4deg; }
.skate { left: 54%; top: 53%; width: 17%; height: 30%; --tilt: -5deg; --crop: 43% center; }
.harbor { left: 73%; top: 54%; width: 19%; height: 27%; --tilt: 7deg; --crop: center 58%; }
.hibiki { position: absolute; width: 17%; left: 9%; top: 79%; padding: 0; border: 0; background: transparent; }
.hibiki img { display: block; width: 100%; }
.sprig { position: absolute; pointer-events: none; width: 12.5%; right: 6%; top: 77%; }
.market .note {
  left: 56%;
  top: 17%;
  background: url(art/peach-wash.webp) no-repeat right bottom / 30% auto;
}
.skyline { left: 10%; top: 20%; width: 34%; height: 27%; --tilt: -6deg; }
.lights { left: 15%; top: 45%; width: 31%; height: 34%; --tilt: 5deg; }
.food { left: 56%; top: 47%; width: 34%; height: 33%; --tilt: -3deg; }
.market .sprig { right: 8%; top: 75%; }
.turns {
  position: absolute;
  inset: auto 0 8% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  width: fit-content;
  margin: auto;
}
.turns button { min-width: 44px; min-height: 44px; border: 0; background: none; font: 42px/.9 system-ui; }
.turns button[aria-disabled=true] { opacity: .42; cursor: default; }
.dots { display: flex; gap: 9px; }
.dots i { display: block; border-radius: 50%; width: 9px; height: 9px; background: #c9a285; }
.dots i.active { background: #92552d; }
dialog {
  color: inherit;
  border: 1px solid #d1a88a;
  border-radius: 8px;
  padding: 12px;
  background: #fff3e4;
  max-width: calc(100vw - 24px);
}
dialog::backdrop { background: #2e190dd8; }
dialog img { display: block; max-width: 100%; max-height: calc(100dvh - 96px); object-fit: contain; }
dialog form { display: flex; justify-content: flex-end; margin-bottom: 6px; }
dialog button { min-width: 44px; min-height: 44px; border: 0; background: transparent; font-size: 26px; }
dialog h2 { font-family: var(--hand); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }


.scrapbook-label {
  display: block;
  position: absolute;
  z-index: 3;
  width: 22%;
  left: 6%;
  top: 4%;
  transform: rotate(-3deg);
}
.note { top: 23%; }
.note h2 { font-size: 3.8cqw; line-height: .9; }
.note p { font-size: 2.1cqw; margin-top: 1cqw; }
.coast .note { left: 17%; width: 29%; }
.market .note { top: 17%; }
.palms, .paw, .heart-doodle { position: absolute; pointer-events: none; }
.palms { width: 8%; right: 7%; bottom: 9%; transform: rotate(5deg); }
.paw { width: 2.3%; left: 39%; bottom: 11%; transform: rotate(-14deg); opacity: .8; }
.heart-doodle { width: 2.6%; left: 43%; top: 35%; transform: rotate(-12deg); }
.ticket { position: absolute; padding: 0; border: 0; background: transparent; width: 7%; left: 49%; top: 29%; transform: rotate(-12deg); }
.ticket img { display: block; width: 100%; filter: drop-shadow(1px 3px 2px #593a2529); }
@media (min-width: 701px) {
  .coast .note { top: 21%; }
}


@media (min-width: 701px) {
  main { max-width: min(1560px, calc((100dvh - 82px) * 1.5)); }
  .single-page main {
    max-width: none;
    min-height: calc(100dvh - 44px);
    display: grid;
    align-content: center;
  }
  .single-page .book {
    width: min(calc(100vw - 52px), calc((100dvh - 108px) * .79));
    margin-inline: auto;
  }
}

.single-page .page-window {
  position: relative;
  margin: 5cqw 2cqw 0;
}
.single-page .page-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border: solid transparent;
  border-width: 6cqw 5cqw;
  border-image: url(art/single-page-frame.webp) 118 108 92 108 stretch;
  background: url(art/portrait-paper.webp) center / 100% 100% no-repeat padding-box;
  border-radius: 3cqw;
  box-shadow: 0 1cqw 2.8cqw #573b2b25;
}
.single-page .spread { aspect-ratio: 4 / 5; background: none; }
.single-page .other-side { visibility: hidden; }
.single-page .scrapbook-label { width: 30%; left: 8%; top: 3%; }
.single-page .tabs { left: auto; right: 6%; top: 0; width: 42%; }
.single-page .print { padding: 1.2cqw; }
.single-page .note h2 { font-size: 7.3cqw; }
.single-page .note p { font-size: 3.7cqw; margin-top: 1.5cqw; }
.single-page .coast .note { left: 19%; top: 20%; width: 63%; }
.single-page .pier { left: 12%; top: 42%; width: 75%; height: 39%; }
.single-page .hibiki { left: 10%; top: 75%; width: 26%; }
.single-page .paw { left: 78%; bottom: 13%; width: 4%; }
.single-page .evening { left: 11%; top: 14%; width: 78%; height: 34%; }
.single-page .skate { left: 12%; top: 53%; width: 35%; height: 29%; }
.single-page .harbor { left: 53%; top: 53%; width: 35%; height: 28%; }
.single-page .palms { right: 9%; bottom: 12%; width: 13%; }
.single-page .skyline { left: 13%; top: 21%; width: 67%; height: 29%; }
.single-page .lights { left: 23%; top: 47%; width: 64%; height: 34%; }
.single-page .heart-doodle { left: 82%; top: 40%; width: 5%; }
.single-page .market .note { left: 19%; top: 15%; width: 65%; }
.single-page .food { left: 12%; top: 46%; width: 76%; height: 33%; }
.single-page .ticket { left: 12%; top: 33%; width: 10%; }
.single-page .turns { bottom: 7%; gap: 14px; }
@media (max-width: 700px) {
  .top { padding-inline: 12px; }
  .top h1 { font-size: 20px; }
  .single-page .book { width: calc(100% - 4px); margin-inline: auto; }
  .single-page .page-window { margin-inline: 0; }
  .single-page .spread {
    aspect-ratio: 3 / 4;
    width: 100%;
    min-height: min(calc(100svh - 112px), 175cqw);
  }
  .single-page .note p { font-size: clamp(13px, 3.7cqw, 22px); }
  .single-page .turns { gap: 8px; }
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: ease-in-out;
}