:root {
  --desk: #2a211c;
  --ink: #2c2622;
  --ink-soft: #5b5047;
  --cream: #f6efe2;
  --kraft: #c9a77c;
  --blush: #f3e2da;
  --cover: #e9a493;
  --accent: #a24f47;
  --hand: 'Dancing Script', cursive;
  --script: 'Great Vibes', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .15  0 0 0 0 .1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.35'/></svg>");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 220, 180, .10), transparent 65%),
    var(--grain),
    var(--desk);
  color: var(--ink);
  font-family: var(--hand);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }

.desk {
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

/* ── the book ── */
.book {
  position: relative;
  width: min(100%, 560px, calc((100svh - 96px) / 1.38));
  aspect-ratio: 1 / 1.38;
  perspective: 2400px;
  touch-action: pan-y;
}
/* a few page edges peeking out underneath */
.book::before, .book::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #e9e0cf;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
}
.book::before { transform: translate(7px, 6px); background: #d8cdb8; }
.book::after { transform: translate(3.5px, 3px); }

.page {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 2px 6px 6px 2px;
  container-type: size;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  visibility: hidden;
  pointer-events: none;
  transition: transform .85s cubic-bezier(.4, .1, .25, 1), opacity .75s ease-in, visibility 0s .85s;
  box-shadow: inset 14px 0 18px -14px rgba(0, 0, 0, .35);
}
.page.current, .page.next, .page.turned { will-change: transform, opacity; }
.page::after { /* grain on every sheet */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grain);
  mix-blend-mode: multiply;
  opacity: .55;
  pointer-events: none;
  z-index: 20;
}
.page.current { visibility: visible; pointer-events: auto; z-index: 3; transition-delay: 0s; }
.page.next { visibility: visible; z-index: 2; transition-delay: 0s; }
.page.turned {
  transform: rotateY(-105deg);
  opacity: 0;
  z-index: 4;
  box-shadow: inset -40px 0 50px -20px rgba(0, 0, 0, .4);
}

/* papers */
.paper-cream { background: var(--cream); }
.paper-blush { background: var(--blush); }
.paper-kraft { background: var(--kraft); }
.paper-grid {
  background:
    linear-gradient(rgba(90, 130, 160, .14) 1px, transparent 1px) 0 0 / 5cqw 5cqw,
    linear-gradient(90deg, rgba(90, 130, 160, .14) 1px, transparent 1px) 0 0 / 5cqw 5cqw,
    #f4f1ea;
}
.paper-lined {
  background:
    linear-gradient(90deg, transparent 11cqw, rgba(200, 80, 80, .35) 11cqw, rgba(200, 80, 80, .35) calc(11cqw + 1px), transparent 0),
    repeating-linear-gradient(transparent 0 5.6cqw, rgba(80, 120, 170, .22) 5.6cqw calc(5.6cqw + 1px)),
    #f7f4ec;
}

.folio {
  position: absolute;
  bottom: 2.4cqw;
  right: 4cqw;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4cqw;
  color: var(--ink-soft);
  opacity: .7;
  z-index: 15;
}
.paper-kraft .folio { color: #5a4126; }

/* ── placed things ── */
.item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--w) * 1cqw);
  transform: rotate(var(--t));
  margin: 0;
  z-index: 5;
}
.item.note { z-index: 8; }

.photo { cursor: zoom-in; }
.img-wrap { position: relative; overflow: hidden; background: #ddd; }
.img-wrap img, .img-wrap video { display: block; width: 100%; height: 100%; object-fit: cover; }

.frame-polaroid {
  background: #fdfcf8;
  padding: 3.4cqw 3.4cqw 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 6px 14px rgba(0, 0, 0, .22);
}
.frame-polaroid .img-wrap { aspect-ratio: .9; }
.frame-polaroid .img-wrap::after { /* the faint gloss of the print */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .12), transparent 40%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.frame-polaroid figcaption {
  min-height: 12cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1cqw 2cqw;
  font-size: calc(var(--w) * .075cqw + 1.8cqw);
  line-height: 1.1;
  text-align: center;
  color: #3a3f6b; /* ballpoint blue */
}

.frame-print {
  background: #fff;
  padding: 1.4cqw;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 8px 18px rgba(0, 0, 0, .15);
}
.frame-print .img-wrap, .frame-taped .img-wrap { aspect-ratio: auto; }
.frame-print .img-wrap img, .frame-taped .img-wrap img { height: auto; }
.frame-taped { box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }

figcaption.under {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding-top: 1.6cqw;
  font-size: 5cqw;
  line-height: 1.1;
  text-align: center;
  color: var(--ink);
  transform: rotate(1deg);
}
.paper-kraft figcaption.under { color: #2f2316; }

/* video */
.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13cqw;
  height: 13cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  font-size: 5cqw;
  padding-left: .8cqw;
  color: var(--ink);
  transition: opacity .3s;
}
.playing .play { opacity: 0; }
.is-video { cursor: pointer; }

/* washi tape */
.tape {
  position: absolute;
  width: 26cqw;
  height: 6.5cqw;
  opacity: .82;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  /* torn ends */
  clip-path: polygon(2% 0, 98% 4%, 100% 22%, 97% 45%, 100% 70%, 98% 100%, 1% 96%, 3% 72%, 0 48%, 2% 25%);
  pointer-events: none;
}
.tape-top { top: -3cqw; left: 50%; transform: translateX(-50%) rotate(var(--tt)); }
.tape-corner { width: 16cqw; height: 5.5cqw; }
.tape-corner.tl { top: -1.5cqw; left: -5cqw; transform: rotate(calc(-40deg + var(--tt) * .3)); }
.tape-corner.br { bottom: -1.5cqw; right: -5cqw; transform: rotate(calc(-40deg + var(--tt) * .3)); }
.tape-rose { background: #e8b4b0; }
.tape-sage { background: #b5c4a1; }
.tape-butter { background: #f1dc93; }
.tape-stripe { background: repeating-linear-gradient(45deg, #f2ece0 0 1.2cqw, #c98f8a 1.2cqw 2.4cqw); }
.tape-dot { background: radial-gradient(circle, #fff 22%, transparent 24%) 0 0 / 2.2cqw 2.2cqw, #9fb6c8; }
.tape-grid {
  background:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px) 0 0 / 1.6cqw 1.6cqw,
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px) 0 0 / 1.6cqw 1.6cqw,
    #d9a87e;
}

/* ── notes ── */
.note p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.15;
}
.note-sticky, .note-pink {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 3.5cqw;
  text-align: center;
  font-size: 5.4cqw;
  background: linear-gradient(170deg, #fbec9b, #f6df78);
  box-shadow: 0 10px 12px -8px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .1);
  /* lifted corner */
  border-bottom-right-radius: 60% 6%;
}
.note-pink { background: linear-gradient(170deg, #f9c9cf, #f2b0b9); }

.note-scrap {
  padding: 4cqw 4cqw 5cqw 7cqw;
  font-size: 5cqw;
  line-height: 6cqw;
  background:
    linear-gradient(90deg, transparent 4.5cqw, rgba(200, 80, 80, .4) 4.5cqw, rgba(200, 80, 80, .4) calc(4.5cqw + 1px), transparent 0),
    repeating-linear-gradient(transparent 0 6cqw, rgba(80, 120, 170, .25) 6cqw calc(6cqw + 1px)),
    #fbf9f3;
  background-position: 0 1.2cqw;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .22));
  clip-path: polygon(0 0, 100% 0, 100% 92%, 94% 97%, 88% 93%, 80% 99%, 72% 94%, 63% 98%, 55% 93%, 46% 99%, 38% 94%, 29% 98%, 21% 93%, 12% 99%, 5% 94%, 0 98%);
}

.note-tag {
  padding: 5cqw 4cqw 5cqw 11cqw;
  font-size: 5.4cqw;
  color: #3b2a19;
  background: #d8b98c;
  clip-path: polygon(9cqw 0, 100% 0, 100% 100%, 9cqw 100%, 0 50%);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25));
  background-image: radial-gradient(circle at 6cqw 50%, rgba(0, 0, 0, .55) 0 1.3cqw, #f0e6d4 1.4cqw 2.4cqw, transparent 2.5cqw);
}
.paper-kraft .note-tag { background-color: #efe3cc; }

.note-label {
  padding: 2cqw 3.5cqw;
  font-family: var(--type);
  font-size: 4.2cqw;
  letter-spacing: .04em;
  background: #fbfaf6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

/* ── cover ── */
.cover {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(120, 50, 40, .05) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 40% 28%, #f3bcad, var(--cover) 60%, #d68b79);
  box-shadow: inset 6cqw 0 6cqw -5cqw rgba(110, 40, 30, .3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover .stitch {
  position: absolute;
  inset: 4.5cqw 4.5cqw 4.5cqw 8cqw;
  border: 2px dashed rgba(255, 246, 238, .6);
  border-radius: 3px;
}
.plate {
  position: relative;
  width: 64cqw;
  padding: 6cqw 5cqw 6.5cqw;
  background: var(--cream);
  text-align: center;
  box-shadow: inset 0 0 0 1.4cqw var(--cream), inset 0 0 0 calc(1.4cqw + 1px) rgba(162, 79, 71, .45), 0 3px 10px rgba(120, 50, 40, .3);
  transform: rotate(-1deg);
}
.plate-for {
  display: block;
  font-family: var(--serif);
  font-size: 3.6cqw;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.plate h1 {
  margin: 1cqw 0 2cqw;
  font-family: var(--script);
  font-weight: 400;
  font-size: 18cqw;
  line-height: 1.15;
  color: var(--accent);
}
.plate-sub { display: block; font-family: var(--serif); font-style: italic; font-size: 5.6cqw; color: var(--ink-soft); }
.cover-date {
  position: absolute;
  bottom: 14cqw;
  font-family: var(--serif);
  font-size: 3.6cqw;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #7d3a32;
}
.hint {
  position: absolute;
  bottom: 7.5cqw;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.4cqw;
  color: #7d3a32;
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .45; } }

/* ── letter / envelope ── */
.letter-page { display: grid; place-items: center; }
.envelope {
  position: relative;
  width: 78cqw;
  aspect-ratio: 1.45;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform: rotate(-2deg);
  transition: transform 1s cubic-bezier(.5, 0, .3, 1) .5s, opacity .6s .9s;
  filter: drop-shadow(0 10px 14px rgba(70, 40, 30, .25));
}
.envelope > span { position: absolute; inset: 0; }
.env-back { background: #e7d6bf; border-radius: 1cqw; }
.env-paper {
  inset: 6% 8% 8% !important;
  background: #fffdf8;
  transition: transform .8s ease .5s;
}
.env-front {
  background: #efe1cc;
  border-radius: 0 0 1cqw 1cqw;
  clip-path: polygon(0 18%, 50% 62%, 100% 18%, 100% 100%, 0 100%);
}
.env-flap {
  background: #e2cfb3;
  height: 64%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .7s ease;
  z-index: 3;
}
.env-to {
  inset: auto 0 10% 0 !important;
  font-family: var(--script);
  font-size: 8cqw;
  color: #6b3f33;
  text-align: center;
}
.seal {
  inset: 0 !important;
  margin: auto;
  top: 18% !important;
  width: 13cqw;
  height: 13cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c9676a, #8e3439 70%);
  color: rgba(255, 225, 220, .6);
  display: grid;
  place-items: center;
  font-size: 6cqw;
  z-index: 4;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3), inset 0 0 0 1.2cqw rgba(0, 0, 0, .12);
  transition: opacity .3s;
}
.opening .seal { opacity: 0; }
.opening .env-flap { transform: rotateX(180deg); z-index: 0; }
.opening .env-paper { transform: translateY(-30%); }
.opening .envelope { transform: rotate(0) translateY(70cqw); opacity: 0; pointer-events: none; }
.env-hint { bottom: 9cqw; color: var(--ink-soft); }
.opening .env-hint { opacity: 0; animation: none; }

.sheet {
  position: absolute;
  inset: 5cqw 5cqw 7cqw;
  padding: 8cqw 8cqw 10cqw;
  background:
    repeating-linear-gradient(transparent 0 7.4cqw, rgba(120, 140, 170, .16) 7.4cqw calc(7.4cqw + 1px)) 0 16.6cqw,
    #fffdf8;
  background-clip: padding-box;
  box-shadow: 0 8px 22px rgba(70, 40, 30, .22);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 5.6cqw;
  line-height: 7.4cqw;
  color: #2f2a3d;
  opacity: 0;
  transform: translateY(30cqw) scale(.75);
  transition: transform .9s cubic-bezier(.2, .8, .3, 1), opacity .5s;
  pointer-events: none;
  scrollbar-width: none;
}
.open .sheet { opacity: 1; transform: none; pointer-events: auto; }
.sheet h2 { margin: 0 0 1.4cqw; font-family: var(--script); font-weight: 400; font-size: 10cqw; line-height: 14.8cqw; color: var(--accent); }
.sheet .body { white-space: pre-wrap; }
.signoff { display: flex; flex-direction: column; align-items: flex-end; margin-top: 7.4cqw; }
.signoff .from { font-family: var(--script); font-style: normal; font-size: 11cqw; line-height: 12cqw; margin-top: 1cqw; color: var(--accent); }

/* ── ending ── */
.ending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10cqw;
}
.ending h2 {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: 18cqw;
  line-height: 1.2;
  color: var(--accent);
  transform: rotate(-3deg);
}
.ending-name { font-family: var(--serif); font-size: 5cqw; letter-spacing: .35em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2cqw; }
.ending-text { font-family: var(--serif); font-style: italic; font-size: 6.4cqw; line-height: 1.35; margin: 9cqw 0 4cqw; white-space: pre-line; max-width: 66cqw; }
.ending-from { font-family: var(--script); font-size: 12cqw; color: var(--accent); align-self: flex-end; margin-right: 8cqw; }
.doodle-heart {
  position: absolute;
  width: 16cqw;
  top: 14cqw;
  right: 12cqw;
  transform: rotate(12deg);
  fill: none;
  stroke: #c26a66;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}

/* ── nav ── */
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  color: rgba(240, 225, 200, .8);
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  min-height: 40px;
  transition: opacity .4s;
}
.on-cover .nav { opacity: 0; pointer-events: none; }
.nav-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(240, 225, 200, .3);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font-family: var(--serif);
  font-style: normal;
  font-size: 20px;
}
.nav-btn:disabled { opacity: .25; cursor: default; }
.nav-btn[hidden] { display: none; }
.music-btn { font-size: 17px; opacity: .45; }
.music-btn.on { opacity: 1; border-color: rgba(240, 180, 165, .7); color: #f3bcad; }
.counter { min-width: 56px; text-align: center; }

/* ── lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 15, 12, .9);
  opacity: 0;
  transition: opacity .25s;
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox.show { opacity: 1; }
.lightbox img { width: auto; height: auto; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); object-fit: contain; border: 8px solid #fdfcf8; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }

/* ── editor (?edit) ── */
.instant .page, .instant .sheet, .instant .envelope { transition: none !important; }
.editing .item { cursor: grab; touch-action: none; }
.editing .item.selected { outline: 2px dashed #e0533d; outline-offset: 4px; }
.editing [contenteditable] { cursor: text; outline: none; border-radius: 3px; transition: background .15s; }
.editing [contenteditable]:hover { background: rgba(224, 83, 61, .07); }
.editing [contenteditable]:focus { background: rgba(224, 83, 61, .1); }
.editing [contenteditable]:empty::before { content: attr(data-ph); opacity: .4; }
.editing .cover { cursor: default; }
.editing .cover .hint { display: none; }
.editing.dropping .page.current { outline: 3px dashed #e0533d; outline-offset: -10px; }
.empty-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  white-space: pre-line;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 6cqw;
  color: var(--ink-soft);
  opacity: .5;
  pointer-events: none;
}
.editor {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  width: 260px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 14px;
  background: #fffdf6;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: #2c2622;
}
.ed-head { display: flex; align-items: baseline; gap: 8px; }
.ed-status { color: #6a8a5a; font-size: 12px; flex: 1; }
.ed-preview { color: #a24f47; font-size: 12px; }
.ed-section { border-top: 1px solid #eee4d4; margin-top: 12px; padding-top: 10px; }
.ed-section h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a7c6c; }
.ed-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ed-row button {
  padding: 5px 10px;
  border: 1px solid #ddd2c0;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.ed-row button:hover { border-color: #a24f47; }
.ed-row button.primary { background: #a24f47; border-color: #a24f47; color: #fff; }
.ed-row button.danger { color: #b0362b; }
.ed-tip { margin: 4px 0 6px; color: #8a7c6c; font-size: 12px; line-height: 1.4; }
.ed-field { display: block; font-size: 12px; color: #8a7c6c; }
.ed-field input { display: block; width: 100%; margin-top: 4px; padding: 6px 8px; border: 1px solid #ddd2c0; border-radius: 6px; font: inherit; font-size: 13px; }
@media (min-width: 901px) {
  .editing .desk { padding-left: 290px; }
}
@media (max-width: 900px) {
  .editing .desk { justify-content: flex-start; }
  .editing .book { width: min(100%, calc((58svh - 70px) / 1.38)); }
  .editor { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 38svh; }
}

@media (prefers-reduced-motion: reduce) {
  .page, .sheet, .envelope { transition-duration: .01s !important; }
  .hint { animation: none; }
}