/* Muisto: the app's album materials on the web. Day is cream laid paper with dark ink; night is
   the black paper of an old photo album with chalk-white ink, oxblood ribbons and gilt. */

@font-face { font-family: "Figtree"; src: url("../assets/fonts/figtree-wght.woff2") format("woff2"); font-style: normal; font-weight: 300 900; font-display: swap; }

:root {
  --paper: #F3EBDD;
  --ink: #2A2420;
  --quiet: #6B5E54;
  --faint: rgba(107, 94, 84, 0.5);
  --rule: rgba(42, 36, 32, 0.16);
  --oxblood: #85302B;
  --card: #FCF9F4;
  --cloth: #3B6654;
  --gilt-light: #F7E099;
  --gilt-dark: #B38738;
  --gilt: linear-gradient(135deg, #F7E099, #B38738 38%, #F2D68C 64%, #A37A30);
  --night-paper: #22201E;
  --chalk: #EDE6D6;
  --night-quiet: #BDB09C;
  --night-oxblood: #DB7566;
  --shadow: rgba(64, 38, 20, 0.3);
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --caps: "Alegreya SC", "EB Garamond", Georgia, serif;
  --hand: "Kalam", "Bradley Hand", cursive;
  --numerals: "Cinzel", "EB Garamond", serif;
  --page-max: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--night-paper) url("img/paper-night.webp") repeat;
  background-size: 320px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(18px, 1.15vw + 10px, 21px);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 50;
  background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 8px;
}
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--gilt-dark); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------------ top bar */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px var(--gutter);
  color: var(--chalk);
  transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar.on-day {
  color: var(--ink);
  background: rgba(243, 235, 221, 0.86);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 1px 0 var(--rule);
}
.studio-link {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-family: var(--caps); font-size: 17px; letter-spacing: 0.06em;
}
.studio-link img { border-radius: 7px; }
.sound-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid currentColor; border-radius: 999px;
  padding: 6px 14px 6px 10px; cursor: pointer; font-style: italic; font-size: 16px; line-height: 1;
  opacity: 0.85;
}
.sound-toggle:hover { opacity: 1; }
.sound-toggle svg { width: 20px; height: 20px; }
.sound-toggle .waves { display: none; }
[data-sound][aria-pressed="true"] .waves { display: inline; }
[data-sound][aria-pressed="true"] .mute { display: none; }

/* ------------------------------------------------------------------ hero: the book on a night desk */
.hero { position: relative; height: 920vh; color: var(--chalk); }
.hero-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, 0.36fr) 1fr; grid-template-rows: minmax(0, 1fr); align-items: center;
  padding: 72px var(--gutter) 40px;
}
/* a short window: the words close up so the book keeps its room */
@media (min-width: 861px) and (max-height: 820px) {
  .app-icon { width: 64px; height: 64px; border-radius: 15px; margin-bottom: 14px; }
  .hero h1 { font-size: min(8.4vw, 13vh); }
  .tagline { margin-top: 10px; font-size: clamp(21px, 2vw, 26px); }
  .lede { font-size: 17px; }
  .status { margin-top: 14px; }
  .captions { margin-top: 24px; min-height: 8.6em; }
  .folio { margin-top: 6px; }
}
@media (min-width: 861px) and (max-height: 740px) {
  .hero-copy > .app-icon { display: none; }
  .captions { min-height: 8em; }
}
.lamp {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 64% 52%, rgba(255, 214, 160, 0.16), rgba(255, 214, 160, 0) 70%),
    radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 60%);
}
.motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.hero-copy { position: relative; z-index: 3; max-width: 30rem; }
.app-icon { width: 84px; height: 84px; border-radius: 19px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); margin-bottom: 22px; }
.hero h1 {
  margin: 0; font-weight: 500; letter-spacing: -0.015em; line-height: 0.92;
  font-size: clamp(64px, 8.4vw, 136px);
}
.tagline { margin-top: 18px; font-style: italic; font-size: clamp(23px, 2.2vw, 32px); line-height: 1.25; color: var(--chalk); }
.lede { margin-top: 14px; color: var(--night-quiet); max-width: 26rem; }
.status {
  display: inline-block; margin-top: 22px; padding: 6px 18px 8px; border-radius: 999px;
  font-weight: 500; font-size: 18px; letter-spacing: 0.01em; color: #241D12;
  background: var(--gilt); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.captions { position: relative; margin-top: 40px; min-height: 9.5em; }
.caption {
  position: absolute; inset: 0 0 auto 0;
  padding-left: 20px; border-left: 2px solid var(--night-oxblood);
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
/* the old caption leaves upward before the new one rises into its place */
.caption.was-on { transform: translateY(-12px); }
.caption.is-on { opacity: 1; transform: none; transition: opacity 0.5s ease-out 0.18s, transform 0.5s cubic-bezier(.2, .8, .2, 1) 0.18s; }
.caption-title { font-family: var(--caps); font-size: 25px; letter-spacing: 0.02em; color: var(--chalk); line-height: 1.2; }
.caption .blurb { font-style: italic; color: var(--gilt-light); margin-top: 2px; }
.caption p:last-child { margin-top: 6px; color: var(--night-quiet); }
.folio { margin-top: 18px; font-style: italic; font-size: 16px; color: var(--night-quiet); }

.book-wrap { position: relative; height: 100%; min-height: 0; z-index: 1; }

/* the page opens: the lamp comes up, the book is set down on the desk, the words follow */
.hero .lamp { animation: lamp-on 2.2s ease-out both; }
.hero .book-wrap { animation: set-down 1.6s cubic-bezier(.16, .84, .24, 1) 0.15s both; }
.hero-copy > * { animation: rise 1s cubic-bezier(.2, .8, .2, 1) both; }
.hero-copy > .app-icon { animation-delay: 0.35s; }
.hero-copy > h1 { animation-delay: 0.45s; }
.hero-copy > .tagline { animation-delay: 0.6s; }
.hero-copy > .lede { animation-delay: 0.7s; }
.hero-copy > .status { animation-delay: 0.8s; }
.hero-copy > .captions { animation-delay: 1s; }
.hero-copy > .folio { animation-delay: 1.1s; }
.hero .ribbon-track { animation: ribbon-in 1.2s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
.hero .scroll-hint { animation: fade-in 1s ease-out 1.8s backwards; }
@keyframes lamp-on { 0% { opacity: 0; } 35% { opacity: 0.55; } 45% { opacity: 0.4; } 100% { opacity: 1; } }
@keyframes set-down { from { opacity: 0; transform: translateY(-38px) scale(1.035); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ribbon-in { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.book-canvas { width: 100%; height: 100%; touch-action: pan-y; }
.book-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; }
.book-fallback canvas { width: auto; height: 78%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); }

.ribbon-track { position: absolute; top: 0; right: clamp(14px, 2.4vw, 34px); width: 16px; height: 62vh; z-index: 3; }
.ribbon-fill {
  width: 100%; height: 100%; transform-origin: top; transform: scaleY(0.06);
  background: linear-gradient(90deg, rgba(219, 117, 102, 0.9), #DB7566 50%, rgba(219, 117, 102, 0.75));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 10px; font-style: italic; font-size: 16px; color: var(--night-quiet);
  transition: opacity 0.6s;
}
.scroll-hint .corner {
  width: 16px; height: 16px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); animation: nudge 2.2s ease-in-out infinite;
}
.scroll-hint.gone { opacity: 0; }
@keyframes nudge { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(3px, 3px); } }

/* ------------------------------------------------------------------ day sections on laid paper */
.day {
  position: relative; color: var(--ink);
  background: var(--paper) url("img/paper-day.webp") repeat; background-size: 320px;
  padding: clamp(72px, 9vw, 130px) var(--gutter);
}
.deckle { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 22px; transform: translateY(-100%); }
.deckle path { fill: var(--paper); }
.section-head { max-width: 44rem; margin: 0 auto; text-align: left; }
.section-head.narrow { max-width: 38rem; }
.section-head h2 {
  display: flex; align-items: baseline; gap: 12px; margin: 0; text-wrap: balance;
  font-family: var(--caps); font-weight: 500; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; letter-spacing: 0.01em;
}
.section-head .glyph { font-family: "EB Garamond", serif; font-weight: 500; font-size: 0.86em; line-height: 1; color: var(--oxblood); transform: translateY(0.02em); }
.double-rule { margin: 12px 0 22px; height: 6px; border-top: 1.5px solid rgba(42, 36, 32, 0.85); border-bottom: 0.6px solid rgba(42, 36, 32, 0.55); width: 100%; }
.section-head p { max-width: 38rem; }
.note { font-style: italic; color: var(--quiet); font-size: 17px; margin-top: 12px; }
.hint { text-align: center; font-style: italic; color: var(--quiet); font-size: 16px; margin-top: 14px; }

/* ------------------------------------------------------------------ turn by hand */
.desk {
  position: relative; margin: clamp(30px, 4vw, 54px) auto 0; max-width: 1180px;
  height: clamp(300px, 46vw, 680px);
}
.desk::before {
  content: ""; position: absolute; inset: 6% 2% 2%; border-radius: 40%;
  background: radial-gradient(closest-side, rgba(120, 80, 40, 0.10), rgba(120, 80, 40, 0));
  pointer-events: none;
}
.desk-folio { position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; font-style: italic; color: var(--quiet); font-size: 17px; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 66px; }
.btn {
  appearance: none; cursor: pointer; border-radius: 999px; padding: 9px 18px 10px;
  border: 1px solid rgba(59, 102, 84, 0.45); background: rgba(252, 249, 244, 0.65); color: var(--cloth);
  font-style: italic; font-size: 17px; line-height: 1.1; transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.btn:hover { background: var(--cloth); color: #F5F0E4; }
.btn:active { transform: translateY(1px); }
.btn[aria-pressed="true"] { background: var(--cloth); color: #F5F0E4; }
.btn[disabled] { opacity: 0.4; cursor: default; }

/* ------------------------------------------------------------------ the shelf of styles */
.shelf-wrap { position: relative; max-width: 1080px; margin: clamp(40px, 5vw, 70px) auto 0; padding: 0 8px; }
.shelf-row { position: relative; }
.shelf {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px; min-height: 230px; padding: 0 10px;
  overflow-x: auto; overflow-y: visible; scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
.spine {
  --h: 200px; --w: 52px;
  position: relative; flex: 0 0 auto; width: var(--w); height: var(--h);
  border: 0; padding: 0; cursor: pointer; border-radius: 3px 3px 1px 1px;
  background: var(--cloth-colour);
  box-shadow: inset 3px 0 6px rgba(255, 255, 255, 0.10), inset -5px 0 8px rgba(0, 0, 0, 0.30), 1px 0 2px rgba(0, 0, 0, 0.35);
  transform-origin: bottom center; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1.2), box-shadow 0.35s;
  color: var(--foil);
}
.spine::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0.45; mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 3px);
}
.spine::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 10px; bottom: 10px;
  border-top: 1px solid var(--foil); border-bottom: 1px solid var(--foil); opacity: 0.55; pointer-events: none;
}
.spine .spine-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg);
  white-space: nowrap; font-size: 17px; line-height: 1; pointer-events: none;
}
.spine .spine-no { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--numerals); font-weight: 700; font-size: 11px; pointer-events: none; }
.spine:hover, .spine:focus-visible { transform: translateY(-10px) rotate(-1.5deg); }
.spine[aria-selected="true"] { --rest: translateY(-26px); transform: var(--rest); box-shadow: 0 16px 20px rgba(0, 0, 0, 0.25), inset -5px 0 8px rgba(0, 0, 0, 0.30); }
/* the books are put on the shelf one after another, as it comes into view */
.shelf-wrap.ready .spine { opacity: 0; }
.shelf-wrap.shelved .spine { opacity: 1; animation: spine-in 0.75s cubic-bezier(.2, .9, .25, 1.15) backwards; animation-delay: calc(var(--i) * 0.06s); }
@keyframes spine-in {
  from { opacity: 0; transform: translateY(-70px) rotate(var(--lean, -6deg)); }
  55% { opacity: 1; }
  to { opacity: 1; transform: var(--rest, none); }
}
.plank {
  position: relative; height: 18px; margin: 0 -8px; border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0 0.6px, transparent 0.6px 2.2px),
    linear-gradient(#8C5C33, #6B4221 55%, #4D2E17);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.plank.small { height: 14px; margin: 0; }
.brass {
  position: absolute; right: 14px; top: 12px; padding: 1px 8px; border-radius: 2px;
  font-family: var(--caps); font-size: 12px; letter-spacing: 0.06em; color: #40290F;
  background: linear-gradient(var(--gilt-light), var(--gilt-dark)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.chosen {
  display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 28rem); justify-content: center; align-items: center;
  gap: clamp(28px, 5vw, 70px); margin: clamp(46px, 6vw, 80px) auto 0; max-width: 1000px;
}
.cover-stage { perspective: 1400px; }
.cover-3d {
  position: relative; aspect-ratio: 475.5 / 669; width: 100%;
  border-radius: 4px 8px 8px 4px; overflow: hidden;
  box-shadow: 0 30px 40px -10px rgba(40, 24, 10, 0.45), 0 4px 10px rgba(40, 24, 10, 0.25);
  transform-origin: left center;
}
.cover-3d.pull { animation: pull 0.9s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes pull {
  0% { transform: translateY(-60px) rotateY(-38deg) rotateZ(-3deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.cover-3d canvas { width: 100%; height: 100%; }
.chosen-name { font-family: var(--caps); font-size: clamp(30px, 3vw, 40px); line-height: 1.1; }
.chosen-blurb { font-style: italic; font-size: clamp(22px, 2vw, 27px); color: var(--oxblood); margin-top: 4px; }
.chosen-note { margin-top: 14px; color: var(--quiet); }

/* ------------------------------------------------------------------ the books it finds */
.found-grid {
  display: grid; grid-template-columns: 1.3fr 0.9fr; grid-template-areas: "trips otd" "trips years"; align-items: start;
  gap: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 72px); max-width: var(--page-max); margin: clamp(40px, 5vw, 70px) auto 0;
}
.trips { grid-area: trips; } .onthisday { grid-area: otd; } .years { grid-area: years; }
.chapter { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-family: var(--caps); font-weight: 500; font-size: 24px; letter-spacing: 0.01em; }
.chapter svg { width: 20px; height: 20px; }
.postcards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; padding: 10px 2px 6px; }
.postcard {
  background: var(--card); padding: 8px 8px 12px; border-radius: 3px;
  box-shadow: 0 6px 12px var(--shadow); transform: rotate(var(--tilt));
}
.postcard .ph { position: relative; display: block; aspect-ratio: 1 / 0.64; overflow: hidden; }
.postcard .ph canvas { width: 100%; height: 100%; }
.postcard .stamp {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 48px; padding: 3px; background: #fff;
  -webkit-mask: radial-gradient(circle 1.6px at 2.3px 2.3px, #0000 98%, #000) -2.3px -2.3px / 4.6px 4.6px;
  mask: radial-gradient(circle 1.6px at 2.3px 2.3px, #0000 98%, #000) -2.3px -2.3px / 4.6px 4.6px;
  filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, 0.35));
}
.postcard .stamp canvas { width: 100%; height: 100%; filter: saturate(0.6); outline: 2px solid #fff; outline-offset: -2px; }
.postcard .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 7px 3px 0; }
.postcard .town { font-weight: 600; font-size: 23px; line-height: 1.1; color: var(--ink); }
.postcard .line { font-style: italic; font-size: 15px; color: var(--quiet); line-height: 1.3; margin-top: 2px; }
.postmark {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; transform: rotate(-12deg);
  border: 1.4px solid rgba(41, 51, 107, 0.62); box-shadow: inset 0 0 0 3.2px var(--card), inset 0 0 0 3.9px rgba(41, 51, 107, 0.45);
  display: grid; place-content: center; text-align: center; font-family: var(--caps); font-size: 10px; line-height: 0.95; color: rgba(41, 51, 107, 0.7);
}
.postcards.ready .postcard { opacity: 0; }
.postcards.dealt .postcard { animation: deal 0.75s cubic-bezier(.2, .8, .25, 1) both; animation-delay: calc(var(--i) * 0.13s); }
@keyframes deal {
  0% { opacity: 0; transform: translate(-140px, -60px) rotate(calc(var(--tilt) - 18deg)) scale(1.06); }
  70% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--tilt)); }
}

.calendar-wrap { position: relative; width: min(360px, 100%); aspect-ratio: 1 / 1.08; margin: 6px 0 0; cursor: pointer; }
.calendar-wrap::before {
  /* the two rings that hold the leaves */
  content: ""; position: absolute; left: 30%; right: 30%; top: 5.5%; height: 18px; z-index: 2; pointer-events: none;
  background:
    radial-gradient(closest-side, #ddd, #8c8c8c 70%, transparent 72%) left / 8px 18px no-repeat,
    radial-gradient(closest-side, #ddd, #8c8c8c 70%, transparent 72%) right / 8px 18px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.calendar-canvas { width: 100%; height: 100%; }

.year-shelf { display: flex; align-items: flex-end; gap: 2.5px; height: 168px; padding: 0 8px; overflow: hidden; }
.year {
  --w: 38px; --h: 140px;
  position: relative; width: var(--w); height: var(--h); flex: 0 0 auto; border-radius: 3px;
  background: var(--leather);
  box-shadow: inset 2px 0 4px rgba(255, 255, 255, 0.12), inset -4px 0 6px rgba(0, 0, 0, 0.35), 1px 0 2px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; align-items: center; padding: 8px 0;
}
.year .band { width: 100%; height: 4px; margin: 10px 0; background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.35)); }
.year .label {
  writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 2px; border-radius: 2px;
  background: var(--label); font-family: var(--numerals); font-weight: 700; font-size: 11px; letter-spacing: 0.08em;
  color: transparent; background-clip: padding-box;
}
.year .label span { background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.year.pamphlet { --w: 18px; background: color-mix(in srgb, var(--leather) 65%, #EDE0C7); }
.year.pamphlet .label { background: none; }
.year.pamphlet .label span { background: none; color: #FCF4E0; }
.years.ready .year { opacity: 0; transform: translateX(60px); }
.years.shelved .year { animation: shelve 0.7s cubic-bezier(.25, .9, .3, 1.1) both; animation-delay: calc(var(--i) * 0.07s); }
@keyframes shelve { from { opacity: 0; transform: translateX(80px) rotate(4deg); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ day and night papers */
.papers { transition: background-color 0.9s, color 0.9s; }
.papers[data-paper="night"] {
  --paper: #22201E; --ink: #EDE6D6; --quiet: #BDB09C; --oxblood: #DB7566; --card: #E6DECF; --rule: rgba(237, 230, 214, 0.2);
  --shadow: rgba(0, 0, 0, 0.6);
  background-image: url("img/paper-night.webp");
}
.papers[data-paper="night"] .double-rule { border-color: rgba(237, 230, 214, 0.6); border-bottom-color: rgba(237, 230, 214, 0.4); }
.paper-switch {
  display: inline-flex; margin: 28px auto 0; padding: 4px; border-radius: 999px;
  border: 1px solid var(--rule); background: rgba(252, 249, 244, 0.25); position: relative; left: 50%; transform: translateX(-50%);
}
.paper-switch button {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 7px 22px; border-radius: 999px;
  font-style: italic; font-size: 18px; color: var(--quiet); transition: background-color 0.4s, color 0.4s;
}
.paper-switch button[aria-checked="true"] { background: var(--cloth); color: #F5F0E4; }
.papers[data-paper="night"] .paper-switch button[aria-checked="true"] { background: #9ECCAD; color: #1E2420; }
.album-page {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(30px, 5vw, 70px);
  max-width: 1080px; margin: clamp(36px, 5vw, 60px) auto 0;
}
.now-reading {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px;
  height: 236px; padding: 0 24px; border-radius: 20px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(51, 31, 15, 0.32);
}
.nr-endpaper {
  position: absolute; inset: 0; z-index: -1; background-color: #173B77;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(245, 242, 234, 0.24) 0 2.4px, transparent 2.6px),
    radial-gradient(circle at 50% 50%, rgba(245, 242, 234, 0.24) 0 2.4px, transparent 2.6px),
    radial-gradient(closest-side, transparent 60%, rgba(0, 0, 0, 0.35));
  background-size: 22px 22px, 22px 22px, 100% 100%;
  background-position: 0 0, 11px 11px, center;
  border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 20px;
}
.nr-book { position: relative; transform: rotate(-5deg); filter: drop-shadow(4px 8px 9px rgba(0, 0, 0, 0.5)); }
.nr-cover {
  position: relative; width: 120px; height: 172px; border-radius: 3px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14px;
  background: #173B77;
}
.nr-cover::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent); }
.nr-window { position: absolute; left: 14px; right: 14px; top: 16px; height: 92px; outline: 0.8px solid rgba(245, 242, 234, 0.7); outline-offset: 3px; overflow: hidden; }
.nr-window canvas { width: 100%; height: 100%; }
.nr-title { position: relative; font-family: var(--caps); font-size: 17px; letter-spacing: 0.05em; color: #F5F2EA; }
.nr-ribbon {
  position: absolute; left: 62%; bottom: -36px; width: 12px; height: 46px; z-index: -1;
  background: linear-gradient(90deg, rgba(133, 48, 43, 0.9), #85302B, rgba(133, 48, 43, 0.75));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
}
.papers[data-paper="night"] .nr-ribbon { background: linear-gradient(90deg, rgba(219, 117, 102, 0.9), #DB7566, rgba(219, 117, 102, 0.75)); }
.nr-plate {
  position: relative; text-align: center; padding: 20px 14px; border-radius: 8px; transform: rotate(1.2deg);
  background: var(--paper) url("img/paper-day.webp"); background-size: 320px; color: var(--ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 6px var(--paper), inset 0 0 0 7.2px rgba(42, 36, 32, 0.7), inset 0 0 0 9px var(--paper), inset 0 0 0 9.6px rgba(42, 36, 32, 0.4);
  transition: background-color 0.9s, color 0.9s;
}
.papers[data-paper="night"] .nr-plate {
  background-image: url("img/paper-night.webp");
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6), inset 0 0 0 6px var(--paper), inset 0 0 0 7.2px rgba(237, 230, 214, 0.7), inset 0 0 0 9px var(--paper), inset 0 0 0 9.6px rgba(237, 230, 214, 0.4);
}
.nr-kicker { font-family: var(--caps); font-size: 13px; letter-spacing: 0.2em; color: var(--quiet); }
.nr-book-title { font-weight: 600; font-size: 29px; line-height: 1.2; margin: 4px 0 6px; }
.nr-page { font-style: italic; color: var(--quiet); font-size: 16px; }
.ornament { height: 7px; width: 110px; margin: 0 auto 8px; position: relative; }
.ornament::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: linear-gradient(90deg, var(--gilt-light), var(--gilt-dark) 45%, transparent 45% 55%, var(--gilt-dark) 55%, var(--gilt-light));
}
.ornament::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; transform: translateX(-50%) rotate(45deg);
  background: var(--gilt);
}
.prints { position: relative; height: 270px; }
.print {
  position: absolute; margin: 0; width: 46%; padding: 6px 6px 2px; background: var(--card);
  box-shadow: 0 5px 10px var(--shadow); transition: background-color 0.9s, box-shadow 0.9s;
}
.print .ph { position: relative; display: block; aspect-ratio: 118 / 92; overflow: hidden; }
.print .ph canvas { width: 100%; height: 100%; }
.print .ph::before, .print .ph::after {
  /* paper corners: black by day, gilt by night */
  content: ""; position: absolute; z-index: 1; width: 16px; height: 16px; pointer-events: none;
  background: linear-gradient(135deg, #3d3d3d, #141414); transition: background 0.9s;
}
.print .ph::before { left: 0; top: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.print .ph::after { right: 0; bottom: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.papers[data-paper="night"] .print .ph::before, .papers[data-paper="night"] .print .ph::after { background: linear-gradient(135deg, var(--gilt-light), var(--gilt-dark)); }
.print figcaption { font-family: var(--hand); font-size: 16px; text-align: center; color: rgba(42, 36, 32, 0.8); }
.print.p1 { left: 2%; top: 20px; transform: rotate(-9deg); }
.print.p2 { right: 2%; top: 30px; transform: rotate(8deg); }
.print.p3 { left: 26%; top: 70px; transform: rotate(-1deg); z-index: 1; }

/* ------------------------------------------------------------------ privacy and closing */
.private { padding-top: clamp(40px, 6vw, 80px); }
.closing {
  position: relative; color: var(--chalk); text-align: center; padding: clamp(80px, 11vw, 150px) var(--gutter);
  background:
    radial-gradient(50% 60% at 50% 40%, rgba(255, 214, 160, 0.12), rgba(255, 214, 160, 0) 70%),
    var(--night-paper) url("img/paper-night.webp"); background-size: auto, 320px;
}
.closing-inner { max-width: 36rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.app-icon.big { width: 150px; height: 150px; border-radius: 34px; margin-bottom: 30px; }
.closing h2 { margin: 0; font-weight: 500; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08; }
.closing p { margin-top: 14px; font-style: italic; color: var(--night-quiet); }
.closing .ornament { margin-top: 30px; width: 170px; }

.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px;
  padding: 30px var(--gutter) 34px; background: #1F4A3A; color: #E9E5DE; font-family: "Figtree", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  font-variant-numeric: normal;
}
.footer img { height: 52px; width: auto; }
.footer-text { text-align: right; }
.footer-text p { color: rgba(233, 229, 222, 0.7); }
.footer a { text-decoration: none; }
.footer-text a { font-weight: 500; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* night paper spreads from the switch, like ink (where the browser can show it) */
.papers { view-transition-name: papers; }
.topbar { view-transition-name: topbar; }
::view-transition-old(papers), ::view-transition-new(papers) { animation: none; mix-blend-mode: normal; height: 100%; }
::view-transition-group(papers) { animation-duration: 0s; }
.papers.wiping, .papers.wiping * { transition: none !important; }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 860px) {
  .hero { height: 860vh; }
  /* on a phone the words stack round the book: name above, the page's caption below */
  .hero-stage {
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: center; column-gap: 14px; padding: 66px var(--gutter) 44px;
  }
  .hero-copy { display: contents; }
  .hero-copy > .app-icon { grid-row: 1; grid-column: 1; width: 54px; height: 54px; border-radius: 12px; margin: 0; }
  .hero h1 { grid-row: 1; grid-column: 2; font-size: 54px; line-height: 1; }
  .tagline { grid-row: 2; grid-column: 1 / -1; font-size: 21px; margin-top: 10px; }
  .lede, .status, .folio { display: none; }
  .book-wrap { grid-row: 3; grid-column: 1 / -1; height: 100%; margin: 4px -8px 0; }
  .captions { grid-row: 4; grid-column: 1 / -1; position: relative; z-index: 3; margin: 8px 0 0; min-height: 0; height: 7.6em; }
  .caption-title { font-size: 21px; }
  .caption .blurb { font-size: 17px; }
  .caption p:last-child { font-size: 16px; line-height: 1.45; margin-top: 4px; }
  .ribbon-track { display: none; }
  .scroll-hint { bottom: 12px; font-size: 15px; }
  .section-head h2 { font-size: 26px; gap: 10px; }
  .desk { height: min(128vw, 600px); }
  .shelf { min-height: 0; padding: 0; gap: 2px; }
  .shelf-row + .shelf-row { margin-top: 30px; }
  .spine .spine-title { font-size: 14px; }
  .spine .spine-no { bottom: 12px; font-size: 10px; }
  .found-grid { grid-template-columns: 1fr; grid-template-areas: "trips" "otd" "years"; }
  .postcards { gap: 16px 12px; }
  .postcard .town { font-size: 19px; }
  .postcard .line { font-size: 13px; }
  .postcard .stamp { width: 30px; height: 36px; }
  .postmark { width: 36px; height: 36px; font-size: 9px; }
  .footer-text { text-align: left; }
  .chosen { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cover-stage { width: min(260px, 70vw); }
  .album-page { grid-template-columns: 1fr; }
  .now-reading { height: auto; padding: 22px 18px; grid-template-columns: 1fr; justify-items: center; }
  .prints { height: 250px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  .scroll-hint .corner { animation: none; }
  .motes { display: none; }
}