:root {
  --ink: #2f261f;
  --ink-2: #5c4c3d;
  --ink-3: #8a7763;
  --paper: #ece2c9;
  --paper-hi: #f4eddc;
  --land: #d9c79d;
  --sea: #e7dbbf;
  --margin: #cbbb96;
  --red: #a3352a;
  --teal: #3c6a64;
  --mustard: #c4952f;
  --desk: #1d1815;
  --cream-text: #d4c6ab;

  --serif: 'IM Fell English', Georgia, serif;
  --sc: 'IM Fell English SC', Georgia, serif;
  --type: 'Special Elite', 'Courier New', monospace;
  --hand: 'Nanum Pen Script', cursive;
  --marker: 'Reenie Beanie', cursive;

  /* fine paper grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .6 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* soft age stains and darker edges */
  --mottle:
    radial-gradient(ellipse 38% 28% at 18% 24%, #8a5a2a1a, #0000 70%),
    radial-gradient(ellipse 30% 42% at 84% 68%, #8a5a2a20, #0000 70%),
    radial-gradient(ellipse 22% 18% at 62% 14%, #8a5a2a14, #0000 70%),
    radial-gradient(ellipse 28% 22% at 32% 86%, #6b4a2016, #0000 70%),
    radial-gradient(ellipse 70% 70% at 50% 50%, #0000 55%, #6b4a2026 100%);
  /* rough rubber-stamp edges */
  --stampmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: #cbbb96; } /* the map's colour: what shows behind the phone's navigation bar */
body {
  height: 100dvh; overflow: hidden; background: var(--desk); color: var(--ink);
  font-family: var(--serif); -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.view { position: fixed; inset: 0; }
svg.i { width: 20px; height: 20px; flex: none; }

/* ---------- shared bits ---------- */
.tbtn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--type); font-size: 15px; color: var(--ink);
  background: var(--grain), var(--paper-hi); border: 1px solid #2f261f55; border-radius: 2px;
  padding: 8px 14px; white-space: nowrap; touch-action: manipulation;
  box-shadow: 0 1px 0 #0002, 0 8px 14px -10px #000a;
}
.tbtn:hover { background: var(--grain), #fbf5e6; }
.tbtn:active { transform: translateY(1px); }
.tbtn.on { background: var(--ink); color: var(--paper-hi); }

.people { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.who {
  font-family: var(--type); font-size: 13px; color: var(--ink); white-space: nowrap;
  background: var(--grain), var(--paper-hi); border: 0; padding: 5px 10px 4px 20px;
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
  border-bottom: 3px solid var(--c);
  -webkit-mask: radial-gradient(circle 2.5px at 10px 50%, #0000 98%, #000);
  mask: radial-gradient(circle 2.5px at 10px 50%, #0000 98%, #000);
}
.who i { color: var(--ink-3); font-style: normal; }
.who.out { background: var(--red); border-color: var(--red); color: var(--paper-hi); }

#toast {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 60;
  font-family: var(--type); font-size: 14px; color: var(--paper-hi); background: var(--ink);
  padding: 7px 14px; border-radius: 2px; opacity: 0; transition: opacity .2s; pointer-events: none;
  max-width: calc(100vw - 32px); text-align: center;
}
#toast.show { opacity: 1; }

/* ---------- dialogs ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: #140f0c99;
}
.card {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--grain), var(--paper-hi); padding: 26px 26px 22px; border-radius: 2px;
  box-shadow: 0 40px 60px -30px #000c, 0 0 0 1px #0002;
}
.card h2 {
  margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1.1;
  padding-bottom: 8px; border-bottom: 1px solid #a3352a66;
}
.card p.lede { margin: -6px 0 16px; color: var(--ink-2); font-size: 17px; }
.card label { display: block; margin: 0 0 14px; font-family: var(--type); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.card input {
  display: block; width: 100%; margin-top: 4px; font-family: var(--type); font-size: 17px; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--ink-3); border-radius: 0; padding: 6px 2px;
  outline: none;
}
.card input:focus { border-bottom-color: var(--red); }
.card .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.citypick .two { grid-template-columns: 2fr 3fr; }
.card .row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.btn-primary, .btn-ghost {
  font-family: var(--type); font-size: 15px; padding: 10px 18px; border-radius: 2px; border: 0;
}
.btn-primary { background: var(--ink); color: var(--paper-hi); }
.btn-ghost { background: none; color: var(--ink-2); }
.results { list-style: none; margin: -8px 0 12px; padding: 0; }
.results button, .results li.none {
  display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px dashed #2f261f33;
  padding: 8px 2px; font-family: var(--serif); font-size: 18px;
}
.results button:hover { background: #2f261f0d; }
.results span, .results li.none { font-family: var(--type); font-size: 13px; color: var(--ink-3); }
.results span i { font-style: normal; color: var(--red); }
.results li.searching {
  display: flex; align-items: center; gap: 10px; padding: 8px 2px;
  font-family: var(--type); font-size: 13px; color: var(--ink-3);
}
.results li.searching svg { width: 24px; height: 24px; flex: none; color: var(--ink-2); }
.results li.searching .needle { animation: needle-hunt 1.6s ease-in-out infinite; }
.results li.searching .dots::after { content: ''; animation: dots 1.2s steps(4) infinite; }
@keyframes needle-hunt {
  0% { transform: rotate(-50deg); } 25% { transform: rotate(35deg); } 45% { transform: rotate(-20deg); }
  65% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(-50deg); }
}
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) {
  .results li.searching .needle, .results li.searching .dots::after { animation: none; }
}
.chosen { display: block; margin: -8px 0 12px; font-family: var(--type); font-size: 13px; color: var(--teal); min-height: 1em; }
.kinds { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.kinds button {
  font-family: var(--type); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  background: none; border: 2px solid currentColor; color: var(--ink-3); padding: 5px 10px; border-radius: 2px; opacity: .6;
}
.kinds button.on { opacity: 1; color: var(--k); transform: rotate(-2deg); }
.where { font-family: var(--type); font-size: 13px; color: var(--ink-3); margin: 8px 0 0; min-height: 1em; }
.swatches { display: flex; gap: 10px; margin: 6px 0 4px; }
.swatches button { width: 28px; height: 28px; border: 0; border-radius: 1px; padding: 0; transform: rotate(-3deg); }
.swatches button:nth-child(even) { transform: rotate(4deg); }
.swatches button.on { outline: 2px solid var(--ink); outline-offset: 3px; }

.empty { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-2); }

/* ---------- MAP ---------- */
#mapView { background: var(--margin); }
#mapView::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--grain), var(--mottle);
  box-shadow: inset 0 0 140px #4a2f1666;
  will-change: transform; /* its own layer: the grain and vignette are painted once, not under every moving frame */
}
#mapView { overflow: hidden; }
#mapCanvas { position: absolute; will-change: transform; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; will-change: transform; }
/* blending with what's underneath costs a phone every frame while the map moves; the stamp is faded then anyway */
#mapView.moving .postmark { mix-blend-mode: normal; }
#map.adding { cursor: crosshair; }
.sea { fill: var(--sea); }
.grat { fill: none; stroke: var(--ink-3); stroke-width: .6; stroke-dasharray: 1 4; opacity: .5; vector-effect: non-scaling-stroke; }
.halo path { fill: none; stroke: #6d8a85; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.land { fill: var(--land); stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.borders { fill: none; stroke: var(--ink-2); stroke-width: .7; stroke-dasharray: 2 3; opacity: .55; vector-effect: non-scaling-stroke; }
.sphere-edge { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.route { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 8 7; stroke-linecap: round; }
.pin { cursor: pointer; }
.pin .head { stroke: #0006; stroke-width: 1; }
.pin.group .head { stroke: var(--paper-hi); stroke-width: 1.6; }
.pin.group .plabel { font-family: var(--sc); font-style: normal; font-size: 14px; letter-spacing: .04em; }
.pcount { font-family: var(--type); font-size: 11px; fill: var(--paper-hi); pointer-events: none; }
.plabel, .clabel, .cwho {
  paint-order: stroke; stroke: var(--sea); stroke-width: 4px; stroke-linejoin: round; fill: var(--ink); pointer-events: none;
}
.plabel { font-family: var(--serif); font-style: italic; font-size: 16px; }
.clabel { font-family: var(--sc); font-size: 14px; letter-spacing: .08em; }
.cinit { font-family: var(--serif); font-size: 16px; fill: var(--red); pointer-events: none; }
.cwho { font-family: var(--serif); font-style: italic; font-size: 15px; fill: var(--red); }
.mcursor text { font-family: var(--type); font-size: 12px; }

.map-ui { position: absolute; z-index: 2; }
#mapView.booting .map-ui { visibility: hidden; }
.cartouche {
  top: 16px; left: 16px; text-align: center; color: var(--ink);
  background: var(--grain), var(--paper-hi); border: 0; padding: 10px 22px 12px;
  outline: 1px solid var(--ink-2); outline-offset: -5px;
  box-shadow: inset 0 0 0 1px var(--ink-2), 0 10px 20px -12px #000b; transform: rotate(-1deg);
  max-width: calc(100vw - 32px);
}
.cartouche small { display: block; font-family: var(--sc); font-size: 13px; letter-spacing: .24em; color: var(--ink-2); }
.cartouche span { display: block; font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.15; }
.cartouche span.ph { color: var(--ink-3); font-size: 22px; }
#peopleMap { top: 16px; right: 16px; max-width: 46vw; }

.stats { left: 16px; bottom: 76px; display: flex; align-items: flex-end; gap: 10px; }
/* the corner pieces step back while you pan or zoom, so the map has the stage */
.stats, .compass { transition: opacity .3s ease .25s; }
#mapView.moving .stats { opacity: .28; transition-delay: 0s; transition-duration: .2s; }
#mapView.moving .compass { opacity: .2; transition-delay: 0s; transition-duration: .2s; }
@media (prefers-reduced-motion: reduce) { .stats, .compass { transition: none; } }
.postmark, .ticket { border: 0; background: none; padding: 0; }
.postmark { width: 88px; height: 88px; transform: rotate(-9deg); mix-blend-mode: multiply;
  -webkit-mask: var(--stampmask); mask: var(--stampmask); }
.postmark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ticket {
  width: 124px; padding: 7px 12px 6px; text-align: left; transform: rotate(3deg);
  background: var(--grain), #e8c674; color: var(--ink);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 6px 6px #0004);
}
.ticket small { display: block; font-family: var(--type); font-size: 9px; letter-spacing: .16em; color: var(--ink-2); border-bottom: 1px dashed #2f261f66; padding-bottom: 3px; }
.ticket b { display: block; font-family: var(--type); font-weight: 400; font-size: 20px; line-height: 1.1; margin-top: 3px; }
.ticket span { display: block; font-family: var(--type); font-size: 10px; color: var(--ink-2); }

.compass { right: 18px; bottom: 76px; width: 92px; height: 92px; pointer-events: none; opacity: .85; }
.compass svg { width: 100%; height: 100%; }
/* back to the whole picture: a small paper button by the compass */
.recentre { right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; color: var(--ink); border: 1px solid #2f261f40; background: var(--grain), var(--paper-hi);
  box-shadow: 0 6px 14px -6px #0007; transition: translate .2s ease, box-shadow .2s ease, scale .12s ease; }
.recentre svg { width: 22px; height: 22px; }
.recentre:hover { translate: 0 -2px; box-shadow: 0 10px 18px -8px #0008; }
.recentre:active { scale: .92; }
.compass { bottom: calc(130px + env(safe-area-inset-bottom)); } /* sits above the button */
@media (prefers-reduced-motion: reduce) { .recentre { transition: none; } }
.mapbar { left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; }
.banner {
  left: 50%; top: 16px; transform: translateX(-50%); z-index: 3;
  font-family: var(--type); font-size: 15px; background: var(--ink); color: var(--paper-hi);
  padding: 8px 8px 8px 16px; display: flex; align-items: center; gap: 10px; border-radius: 2px; white-space: nowrap;
}
.banner button { background: none; border: 1px solid #f4eddc55; color: var(--paper-hi); font-family: var(--type); font-size: 13px; padding: 4px 10px; border-radius: 2px; }
.start-card {
  left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1.5deg); width: min(340px, calc(100vw - 32px));
  background: var(--grain), var(--paper-hi); padding: 22px 24px; text-align: center;
  box-shadow: 0 30px 40px -24px #000c;
}
.start-card h3 { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; }
.start-card p { margin: 0 0 16px; color: var(--ink-2); font-size: 17px; }

/* ---------- BOOK ---------- */
#bookView {
  display: flex; flex-direction: column;
  background: var(--grain), radial-gradient(ellipse at 50% 35%, #3b2f27 0%, var(--desk) 75%);
}
.bookbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.bookbar .grow { flex: 1; }
.placenav { display: flex; align-items: center; gap: 4px; font-family: var(--type); color: var(--cream-text); font-size: 14px; }
.placenav button { background: none; border: 0; color: var(--cream-text); font-size: 24px; padding: 0 10px; line-height: 1; }
.placenav button:disabled { opacity: .25; }
.iconbtn { background: none; border: 0; color: var(--cream-text); padding: 6px; display: inline-flex; }
.iconbtn:hover { color: #fff; }
#peopleBook .who { font-size: 12px; }

#wrap { flex: 1; position: relative; min-height: 0; }
#book { position: absolute; left: 0; top: 0; width: 750px; height: 1024px; transform-origin: 0 0; perspective: 2600px; }
.spine {
  position: absolute; left: 0; top: 4px; width: 50px; height: 1016px; border-radius: 6px 0 0 6px;
  background: var(--grain), linear-gradient(90deg, #2b1812, #4a2a1d 40%, #3a2117);
  box-shadow: 0 16px 30px -10px #000c;
}
.spine::after { content: ''; position: absolute; left: 30px; top: 14px; bottom: 14px; border-left: 2px dashed #c9a87055; }
.sheet {
  position: absolute; left: 40px; top: 10px; width: 700px; height: 994px; overflow: hidden;
  border-radius: 0 3px 3px 0; transform-origin: left center; backface-visibility: hidden;
  color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none;
}
#stage {
  box-shadow: 1px 1px 0 #d6caac, 2px 2px 0 #c3b695, 3px 3px 0 #dbd0b4, 4px 4px 0 #bfb190, 5px 6px 0 #d3c7a8, 7px 8px 0 #3a2117, 10px 18px 30px #0009;
}
.leaf { z-index: 5; box-shadow: none !important; }
.sheet::before { /* gutter shadow by the spine */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 46px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, #0000002e, #0000);
}

/* paper types */
.bg-cream { background: var(--grain), var(--mottle), var(--paper); }
.bg-kraft { background: var(--grain), var(--grain), var(--mottle), #c7a676; }
.bg-black { background: var(--grain), #24211e; color: #ece4d3; }
.bg-lined {
  background: var(--grain), var(--mottle),
    linear-gradient(90deg, #0000 95px, #b4473a55 95px 97px, #0000 97px),
    repeating-linear-gradient(#0000 0 33px, #5b7fa144 33px 34px), var(--paper);
}
.bg-grid {
  background: var(--grain), var(--mottle),
    linear-gradient(#5b7fa133 1px, #0000 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, #5b7fa133 1px, #0000 1px) 0 0 / 28px 28px, var(--paper);
}
.bg-dots { background: var(--grain), var(--mottle), radial-gradient(circle, #5c4c3d55 1.3px, #0000 1.8px) 0 0 / 26px 26px, var(--paper); }
.bg-color { background-color: var(--bgc); background-image: var(--grain), var(--mottle); }
.bg-photo { background-image: linear-gradient(#ece2c966, #ece2c966), var(--bgimg); background-size: cover; background-position: center; }

.chrome { position: absolute; left: 64px; top: 36px; width: 500px; z-index: 0; }
.ptitle {
  font-family: var(--serif); font-style: italic; font-size: 52px; line-height: 1.05; outline: none; min-height: 1.05em;
  user-select: text; -webkit-user-select: text;
}
.ptitle:empty::before { content: 'Name this place'; opacity: .35; }
.pmeta { display: flex; gap: 10px; margin-top: 8px; font-family: var(--type); font-size: 16px; opacity: .72; }
#pageCoords { cursor: pointer; }
#pageCoords:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.pdate { outline: none; min-width: 60px; user-select: text; -webkit-user-select: text; }
.pdate:empty::before { content: 'when?'; opacity: .6; }
.kstamp {
  position: absolute; right: 64px; top: 50px; z-index: 0;
  font-family: var(--type); font-size: 21px; letter-spacing: .16em; color: var(--k);
  background: none; border: 4px double var(--k); padding: 6px 14px 4px; transform: rotate(-7deg);
  opacity: .85; -webkit-mask: var(--stampmask); mask: var(--stampmask);
}
.tool-pen .chrome, .tool-eraser .chrome, .tool-text .chrome, .tool-pen .kstamp, .tool-eraser .kstamp, .tool-text .kstamp { pointer-events: none; }

#items, #cursors { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#cursors { z-index: 3; }
.item { position: absolute; pointer-events: auto; transform-origin: center; }
.item.photo { filter: drop-shadow(0 1px 1px #0005) drop-shadow(0 8px 9px #0003); cursor: grab; }
.item.photo .pic { position: absolute; inset: 0; padding: 10px; background: #f8f3e7; }
.item.photo .pv { position: relative; width: 100%; height: 100%; overflow: hidden; }
.item.photo .pic img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.item.photo.cropped .pic img { position: absolute; max-width: none; object-fit: fill; } /* sized and placed from its crop */

/* the crop screen: the whole photo on the dark desk, everything outside the box dimmed */
.crop-modal { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #140f0ce6;
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); animation: crop-in .2s ease-out; }
.crop-modal.hidden { display: none; }
@keyframes crop-in { from { opacity: 0; } }
.crop-stage { flex: 1; min-height: 0; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.crop-frame { position: relative; line-height: 0; max-width: 100%; }
#cropImg { display: block; max-width: calc(100vw - 32px); max-height: calc(100dvh - 130px); box-shadow: 0 20px 40px -18px #000; pointer-events: none; }
.crop-box { position: absolute; outline: 2px solid #f4eddc; box-shadow: 0 0 0 100vmax #140f0c80; cursor: move; transition: outline-color .15s; }
.crop-box.active { outline-color: #fff; }
.crop-box .cg { position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: linear-gradient(90deg, #0000 33.2%, #f4eddc99 33.3% 33.5%, #0000 33.6% 66.4%, #f4eddc99 66.5% 66.7%, #0000 66.8%),
              linear-gradient(#0000 33.2%, #f4eddc99 33.3% 33.5%, #0000 33.6% 66.4%, #f4eddc99 66.5% 66.7%, #0000 66.8%); }
.crop-box .ch { position: absolute; width: 22px; height: 22px; border: 3px solid #f4eddc; }
.crop-box .ch::before { content: ''; position: absolute; inset: -14px; } /* a finger-sized grip */
.crop-box .ch[data-c="tl"] { left: -5px; top: -5px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.crop-box .ch[data-c="tr"] { right: -5px; top: -5px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.crop-box .ch[data-c="bl"] { left: -5px; bottom: -5px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.crop-box .ch[data-c="br"] { right: -5px; bottom: -5px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.crop-bar { display: flex; align-items: center; gap: 8px; width: min(520px, 100%); margin: 14px auto 0; }
.crop-bar .btn-ghost { color: #e8dcc4; }
.crop-bar .btn-primary { background: var(--grain), var(--paper-hi); color: var(--ink); }
.crop-bar .grow { flex: 1; }
@media (prefers-reduced-motion: reduce) { .crop-modal { animation: none; } }
.item.photo .tp, .item.photo .c { display: none; position: absolute; pointer-events: none; }
.item.photo.f-tape .tp {
  display: block; left: 50%; top: -15px; width: 120px; height: 32px; transform: translateX(-50%) rotate(-3deg);
  background: var(--grain), #dccb9cc4;
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%);
}
.item.photo.f-corners .pic { padding: 5px; }
.item.photo.f-corners .c { display: block; width: 34px; height: 34px; background: linear-gradient(135deg, #3a332d, #15120f); }
.c.tl { left: -7px; top: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.c.tr { right: -7px; top: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.c.bl { left: -7px; bottom: -7px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.c.br { right: -7px; bottom: -7px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.item.photo.f-stamp .pic {
  padding: 15px; background: #f8f3e7;
  -webkit-mask:
    radial-gradient(circle at 50% 0, #0000 5px, #000 5.5px) 0 0 / 14px 100% repeat-x,
    radial-gradient(circle at 50% 100%, #0000 5px, #000 5.5px) 0 0 / 14px 100% repeat-x,
    radial-gradient(circle at 0 50%, #0000 5px, #000 5.5px) 0 0 / 100% 14px repeat-y,
    radial-gradient(circle at 100% 50%, #0000 5px, #000 5.5px) 0 0 / 100% 14px repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 50% 0, #0000 5px, #000 5.5px) 0 0 / 14px 100% repeat-x,
    radial-gradient(circle at 50% 100%, #0000 5px, #000 5.5px) 0 0 / 14px 100% repeat-x,
    radial-gradient(circle at 0 50%, #0000 5px, #000 5.5px) 0 0 / 100% 14px repeat-y,
    radial-gradient(circle at 100% 50%, #0000 5px, #000 5.5px) 0 0 / 100% 14px repeat-y;
  mask-composite: intersect;
}
.item.photo.f-stamp .pic img { outline: 1px solid #0002; }

.item.sticker { cursor: grab; }
.item.sticker > svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.item.sticker.cut { filter: drop-shadow(3px 0 0 #fbf7ee) drop-shadow(-3px 0 0 #fbf7ee) drop-shadow(0 3px 0 #fbf7ee) drop-shadow(0 -3px 0 #fbf7ee) drop-shadow(0 4px 4px #0004); }
.item.sticker.plain { filter: drop-shadow(0 3px 3px #0005); }
.item.sticker.ink > svg { opacity: .85; -webkit-mask: var(--stampmask); mask: var(--stampmask); }

/* the pattern and torn ends live on an inner layer: a clip-path on the tape itself would also cut off its
   rotate and resize handles */
.tp-kraft { --tp: var(--grain), #c9a46c; }
.tp-mint { --tp: repeating-linear-gradient(-45deg, #a7cdbf 0 9px, #c6e1d5 9px 18px); }
.tp-rose { --tp: radial-gradient(circle, #d4848e 2.3px, #0000 2.9px) 0 0 / 14px 14px, #f1ccd0; }
.tp-grid { --tp: linear-gradient(#ffffff88 1px, #0000 1px) 0 0 / 10px 10px, linear-gradient(90deg, #ffffff88 1px, #0000 1px) 0 0 / 10px 10px, #93abc0; }
.tp-mustard { --tp: var(--grain), #dfb34c; }
.tp-ledger { --tp: repeating-linear-gradient(#0000 0 5px, #2f261f2a 5px 6px), #e6e0d1; }
[class*="tp-"]:not(.item.tape) { background: var(--tp); }
.item.tape { cursor: grab; }
.item.tape::before {
  content: ''; position: absolute; inset: 0; background: var(--tp); opacity: .86; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 98.5% 25%, 100% 50%, 98.5% 75%, 100% 100%, 0 100%, 1.5% 75%, 0 50%, 1.5% 25%);
}

.item.text { cursor: grab; }
.item.text .txt { white-space: pre-wrap; word-break: break-word; outline: none; min-height: 1em; line-height: 1.05; }
.item.text .txt[contenteditable="true"] { cursor: text; user-select: text; -webkit-user-select: text; background: #fff4; }
.item.text .txt:empty::before { content: 'write something…'; opacity: .4; }
.ff-pen { font-family: var(--hand); }
.ff-marker { font-family: var(--marker); line-height: 1 !important; }
.ff-type { font-family: var(--type); line-height: 1.35 !important; }
.ff-serif { font-family: var(--serif); font-style: italic; line-height: 1.15 !important; }

svg.item { overflow: visible; pointer-events: none; }
svg.item path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg.item .hit { stroke: transparent; pointer-events: stroke; cursor: grab; }
svg.item .ink { pointer-events: none; opacity: .94; }
svg.item.sel .ink { filter: drop-shadow(0 0 3px #c4952fee); }

.item.sel:not(svg) { outline: calc(1.5px * var(--inv, 1)) dashed #2f261fb0; outline-offset: calc(7px * var(--inv, 1)); }
.bg-black .item.sel:not(svg) { outline-color: #ece4d3b0; }
.h {
  display: none; position: absolute; width: calc(18px * var(--inv, 1)); height: calc(18px * var(--inv, 1));
  background: var(--paper-hi); border: calc(1.5px * var(--inv, 1)) solid var(--ink); z-index: 2;
}
.item.sel .h { display: block; }
/* on a touch screen the corner squares are hard to hit: an invisible, finger-sized area around each */
@media (pointer: coarse) { .h::before { content: ''; position: absolute; inset: calc(-14px * var(--inv, 1)); } }
.pen-panel .aa { line-height: 1; }
.h.res { right: calc(-17px * var(--inv, 1)); bottom: calc(-17px * var(--inv, 1)); cursor: nwse-resize; }
.h.rot { left: 50%; top: calc(-46px * var(--inv, 1)); transform: translateX(-50%); border-radius: 50%; cursor: grab; }
.item.tape .h.res { bottom: 50%; transform: translateY(50%); }

#eraserRing {
  position: absolute; z-index: 2; display: none; pointer-events: none; border-radius: 50%;
  border: calc(1.5px * var(--inv, 1)) solid #2f261f99; background: #fff3; transform: translate(-50%, -50%);
}
.tool-pen .sheet, .tool-pen .sheet * { cursor: crosshair !important; }
.tool-eraser .sheet, .tool-eraser .sheet * { cursor: none !important; }
.tool-text .sheet, .tool-text .sheet * { cursor: text !important; }

.cursor { position: absolute; transform-origin: 0 0; transform: scale(var(--inv, 1)); transition: left .08s linear, top .08s linear; }
.cursor span { position: absolute; left: 15px; top: 17px; padding: 1px 7px; color: #fff; font-family: var(--type); font-size: 13px; white-space: nowrap; border-radius: 1px; }

/* toolbar */
#toolbar {
  display: flex; align-items: center; gap: 2px; padding: 6px 14px calc(8px + env(safe-area-inset-bottom));
  overflow-x: auto; scrollbar-width: none; justify-content: safe center;
}
#toolbar::-webkit-scrollbar { display: none; }
.ibtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; padding: 7px 6px 5px; flex: none;
  background: none; border: 0; border-radius: 2px; color: var(--cream-text); font-family: var(--type); font-size: 11px; letter-spacing: .04em;
  touch-action: manipulation;
}
.ibtn svg { width: 22px; height: 22px; }
@media (max-width: 420px) { .ibtn { min-width: 50px; } #toolbar { padding-left: 8px; padding-right: 8px; } }
.ibtn:hover { color: #fff; }
.ibtn.on { background: var(--grain), var(--paper-hi); color: var(--ink); }
.ibtn:disabled { opacity: .3; }
.tsep { width: 1px; align-self: stretch; margin: 6px 8px; background: #ffffff1f; flex: none; }
/* the toolbar's Ink button: a blot of the current ink, sized like the current nib */
.inkdot { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--c, #2a241f);
  box-shadow: inset 0 0 0 1px #fff3; transition: background-color .2s ease; }
.inkdot i { display: block; border-radius: 50%; background: #f4eddc; opacity: .85; transition: width .2s ease, height .2s ease; }
.inkdot.erase { box-shadow: inset 0 0 0 1.5px var(--cream-text); }
.inkdot.erase i { background: var(--cream-text); }
.ibtn.on .inkdot.erase, .ibtn:hover .inkdot.erase { box-shadow: inset 0 0 0 1.5px currentColor; }

/* the Pen popup: big swatches and nibs, easy to hit with a pen or a finger */
.pen-panel { width: 292px; }
.pen-panel.erasing #inksHead, .pen-panel.erasing #inks { display: none; }
.pen-panel.erasing #sizesHead { margin-top: 0; }
.inks { display: grid; grid-template-columns: repeat(4, 52px); gap: 12px; justify-content: space-between; }
.inks button { width: 52px; height: 52px; padding: 0; border: 0; border-radius: 3px; transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px #0002, 0 3px 6px -3px #0006; transition: transform .18s ease, box-shadow .18s ease; }
.inks button:nth-child(even) { transform: rotate(4deg); }
.inks button:hover { transform: rotate(0) translateY(-2px); }
.inks button.on { transform: rotate(0) scale(1.06); box-shadow: inset 0 0 0 1px #0002, 0 0 0 3px var(--paper-hi), 0 0 0 5px var(--ink); }
.sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sizes button { height: 52px; display: grid; place-items: center; background: none; border: 1px solid #2f261f26; padding: 0 6px; border-radius: 3px; color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease; }
.sizes button svg { width: 100%; height: 28px; overflow: visible; }
.sizes button i.erase-size { display: block; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff8; }
.sizes button:hover { background: #2f261f0d; }
.sizes button.on { background: #2f261f14; border-color: var(--ink); }
.pen-panel:not(.hidden) { animation: penRise .2s ease-out; }
/* the Layer menu: four big rows, easy to tap again and again */
.layer-panel { width: 236px; padding: 8px; display: grid; gap: 2px; }
.layer-panel button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 3px;
  background: none; color: var(--ink); font-family: var(--type); font-size: 14px; text-align: left; transition: background-color .15s ease, scale .12s ease; }
.layer-panel button svg { width: 20px; height: 20px; flex: none; }
.layer-panel button:hover:not(:disabled) { background: #2f261f10; }
.layer-panel button:active:not(:disabled) { scale: .97; }
.layer-panel button:disabled { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .layer-panel button { transition: none; } }
@keyframes penRise { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) { .pen-panel:not(.hidden) { animation: none; } .inks button, .inkdot, .inkdot i { transition: none; } }

.panel {
  position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  background: var(--grain), var(--paper-hi); padding: 14px 16px; border-radius: 2px; box-shadow: 0 24px 40px -16px #000c;
  max-width: calc(100vw - 24px); max-height: 60dvh; overflow: auto;
}
.panel h4 { margin: 0 0 8px; font-family: var(--type); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.panel h4:not(:first-child) { margin-top: 14px; }
.sticker-grid { display: grid; grid-template-columns: repeat(6, 58px); gap: 6px; }
.sticker-grid button { width: 58px; height: 58px; padding: 6px; background: none; border: 0; border-radius: 2px; }
.sticker-grid button:hover { background: #2f261f12; }
.sticker-grid svg { width: 100%; height: 100%; overflow: visible; }
.tape-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tape-row button { width: 74px; height: 24px; border: 0; padding: 0; opacity: .9;
  clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 96% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 4% 25%); }
.paper-grid { display: grid; grid-template-columns: repeat(3, 86px); gap: 8px; }
.paper-grid button {
  height: 64px; border: 1px solid #2f261f33; border-radius: 1px; padding: 0 0 4px; display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--type); font-size: 11px;
}
.paper-grid button.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.paper-extra { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.paper-extra label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--type); font-size: 13px; }
.paper-extra input[type=color] { width: 34px; height: 28px; border: 1px solid #2f261f44; padding: 0; background: none; }

@media (max-width: 640px) {
  .cartouche { padding: 8px 14px 9px; }
  .cartouche span { font-size: 22px; }
  .cartouche small { font-size: 11px; }
  #peopleMap { top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); right: 12px; max-width: 60vw; }
  .stats { left: 10px; bottom: auto; top: 88px; transform: scale(.85); transform-origin: 0 0; }
  .compass { display: none; }
  .recentre { right: 12px; bottom: calc(112px + env(safe-area-inset-bottom)); } /* above the name tag */
  .mapbar { gap: 6px; width: calc(100vw - 20px); justify-content: center; }
  .mapbar .tbtn { padding: 8px 10px; font-size: 13px; }
  .mapbar .tbtn .lbl-long { display: none; }
  .bookbar { gap: 4px; padding: 8px 10px; }
  .bookbar .tbtn { padding: 6px 10px; }
  #peopleBook { display: none; }
  .sticker-grid { grid-template-columns: repeat(5, 54px); }
  .sticker-grid button { width: 54px; height: 54px; }
  .card .two { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- loose papers (editing a place) ---------- */
.mode-paper .spine { display: none; }
.mode-paper #stage { transform: rotate(-.4deg); border-radius: 2px; box-shadow: 0 1px 2px #0005, 0 22px 34px -10px #000b; }
.stack {
  position: absolute; left: 40px; top: 10px; width: 700px; height: 994px; border-radius: 2px;
  box-shadow: 0 1px 2px #0004, 0 14px 24px -10px #0009;
}
.stack1 { background: var(--grain), #e4d8bc; transform: rotate(1.4deg) translate(10px, 6px); }
.stack2 { background: var(--grain), #d8cbad; transform: rotate(-2deg) translate(-8px, 12px); }
.stack[hidden], .mode-book .stack { display: none; }
.mode-book #toolbar, .mode-book #addPaper, .mode-book #removePlace { display: none; }
.mode-book .kstamp { pointer-events: none; }
.placenav span { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- our book (reading) ---------- */
#pageNo {
  display: none; position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-style: italic; font-size: 22px; opacity: .6;
}
.mode-book #pageNo { display: block; }

/* leather cover */
.cover {
  display: flex; align-items: center; justify-content: center; text-align: center; cursor: pointer; color: #d9bf8a;
  border-radius: 3px 9px 9px 3px;
  background: var(--grain), var(--grain), radial-gradient(ellipse at 35% 25%, #713626 0%, #4a2116 55%, #2c140d 100%);
  box-shadow: inset 0 0 0 1px #0007, inset 0 0 70px #000a, 6px 10px 26px #000a;
}
.cover.hidden, .itin.hidden, .chapter.hidden, .endpage.hidden { display: none; }
.cover::after {
  content: ''; position: absolute; inset: 28px 150px 28px 28px; pointer-events: none;
  border: 2px solid #c9a86a55; outline: 1px solid #c9a86a33; outline-offset: -10px;
  box-shadow: inset 0 1px 0 #0006, 0 1px 0 #ffffff12;
}
.cover-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-right: 120px; }
.cover small { font-family: var(--sc); font-size: 20px; letter-spacing: .34em; text-shadow: 0 1px 0 #000a; }
.cover h1 {
  margin: 14px 30px 26px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 82px; line-height: 1.05;
  background: linear-gradient(180deg, #f6e3ad 0%, #d4a955 46%, #f1d68f 56%, #a97a32 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 #000b) drop-shadow(0 -1px 0 #ffffff14);
}
.cover .rose { width: 128px; height: 128px; opacity: .85; filter: drop-shadow(0 1px 0 #000a); }
.cover .rose svg { width: 100%; height: 100%; }
.cover p { margin: 24px 0 0; font-family: var(--type); font-size: 15px; letter-spacing: .16em; opacity: .8; }
.cover-hint { position: absolute; bottom: 50px; left: 0; right: 120px; font-family: var(--type); font-size: 12px; letter-spacing: .24em; opacity: .45; }
.corner { position: absolute; width: 74px; height: 74px; z-index: 3; background: linear-gradient(135deg, #f0d896, #9c7330 48%, #d9b86a 70%, #8a6428); }
.corner.tr { right: 0; top: 0; clip-path: polygon(30% 0, 100% 0, 100% 70%); border-top-right-radius: 9px; }
.corner.br { right: 0; bottom: 0; clip-path: polygon(100% 30%, 100% 100%, 30% 100%); border-bottom-right-radius: 9px; }
.strap {
  position: absolute; right: 96px; top: 0; bottom: 0; width: 24px; z-index: 2;
  background: linear-gradient(90deg, #0e0a08, #2c211b 30%, #1b1310 72%, #0b0807);
  box-shadow: -4px 0 7px #0007, 4px 0 7px #0007;
}
.ribbon {
  display: none; position: absolute; left: 580px; top: 934px; width: 24px; height: 128px;
  background: linear-gradient(90deg, #6e1d17, #9c2c22 45%, #7b221b);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); filter: drop-shadow(0 3px 3px #0006);
}
.mode-book .ribbon { display: block; }

/* inked maps inside the book */
.inkmap .sea { fill: #e7dbbf; }
.inkmap .land { fill: #d9c79d; stroke: #2f261f; stroke-width: .8; stroke-linejoin: round; }
.inkmap .borders { fill: none; stroke: #5c4c3d; stroke-width: .6; stroke-dasharray: 2 3; opacity: .55; }
.inkmap .grat { fill: none; stroke: #8a7763; stroke-width: .5; stroke-dasharray: 1 4; opacity: .5; }
.inkmap .route { stroke-width: 1.8; }
.inkmap .pnum { font-family: var(--type); font-size: 10px; fill: #fff; }

/* itinerary */
.itin { padding: 64px 70px; }
.itin h2 { margin: 0 0 14px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 46px; }
.itin .inkmap { display: block; width: 100%; height: 440px; outline: 1px solid #5c4c3d66; outline-offset: 5px; }
.itin ol { list-style: none; margin: 30px 0 0; padding: 0; max-height: 330px; overflow: hidden; columns: 1; }
.itin li { break-inside: avoid; }
.itin li button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 7px 0; background: none; border: 0; text-align: left; color: inherit;
  font-family: var(--serif); font-size: 23px;
}
.itin li button:hover .t { text-decoration: underline; text-decoration-thickness: 1px; }
.itin .num { font-family: var(--type); font-size: 13px; color: #fff; background: var(--k); border-radius: 50%; width: 22px; height: 22px; flex: none; display: grid; place-items: center; align-self: center; }
.itin .dots { flex: 1; border-bottom: 2px dotted #5c4c3d66; transform: translateY(-7px); }
.itin .n { font-family: var(--type); font-size: 17px; }
.itin .empty { font-family: var(--serif); font-style: italic; font-size: 22px; opacity: .7; }

/* chapter opener */
.chapter .ch-text { position: absolute; left: 80px; top: 90px; width: 540px; }
.chapter small { font-family: var(--sc); font-size: 21px; letter-spacing: .32em; color: var(--red); }
.chapter h2 { margin: 12px 0 22px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 68px; line-height: 1.02; }
.chapter .rule { position: relative; width: 250px; height: 1px; background: #5c4c3d88; }
.chapter .rule::after {
  content: ''; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; background: var(--paper);
  border: 1px solid #5c4c3d; transform: translate(-50%, -50%) rotate(45deg);
}
.ch-coords { margin: 22px 0 6px; font-family: var(--type); font-size: 17px; }
.ch-dates { margin: 0; font-family: var(--type); font-size: 15px; opacity: .7; }
.kstamp.static { position: relative; right: auto; top: auto; display: inline-block; margin-top: 30px; pointer-events: none; }
#chMap { position: absolute; left: 120px; top: 480px; width: 460px; height: 460px; filter: drop-shadow(0 2px 3px #0002); }

/* the last page */
.endpage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.endpage h2 { margin: 0 0 24px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 74px; }
.endpage svg { width: 520px; height: 100px; }
.endpage p { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-size: 30px; }
.endpage .end-sub { margin-top: 8px; font-family: var(--type); font-style: normal; font-size: 15px; letter-spacing: .1em; opacity: .65; }

/* page turn: the folded-over part of the page and the shadow it casts */
#turnFx { display: none; position: absolute; left: 40px; top: 10px; width: 700px; height: 994px; overflow: visible; pointer-events: none; z-index: 6; }
.leaf { will-change: clip-path; }

/* ============ mist that covers the map while it loads, then lifts ============ */
#clouds { position: fixed; inset: 0; z-index: 100; overflow: hidden; }
#clouds::before { content: ''; position: absolute; inset: 0; background: #e6dbc1 var(--grain); transition: opacity 1.4s .2s ease; }
#clouds .mist {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, #f8f3e7f2, #f6efdfb0 45%, #f4ecda00);
  animation: mist-drift var(--t) ease-in-out infinite alternate;
  transition: transform 2s cubic-bezier(.4, 0, .2, 1), opacity 1.6s ease .3s;
}
@keyframes mist-drift { from { translate: -2% 1%; } to { translate: 2% -1%; } }
.cloud-note {
  z-index: 1; position: absolute; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-3); letter-spacing: .02em; transition: opacity .4s;
}
.cloud-note .dots::after { content: ''; animation: dots 1.4s steps(4) infinite; }
#clouds.part { pointer-events: none; }
#clouds.part::before { opacity: 0; }
#clouds.part .mist { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; }
#clouds.part .cloud-note { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #clouds .mist, .cloud-note .dots::after { animation: none; }
  #clouds .mist { transition: opacity .4s; }
  #clouds::before { transition: opacity .4s; }
  #clouds.part .mist { transform: none; }
}
.tbtn:disabled { opacity: .4; pointer-events: none; }

/* our stash */
.item.cutout { cursor: grab; filter: drop-shadow(0 2px 2px #0004); }
.item.cutout img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.stash-grid button { position: relative; }
.stash-grid img { width: 100%; height: 100%; object-fit: contain; display: block; }
.stash-grid .stash-add { border: 1.5px dashed #2f261f55; font-family: var(--type); font-size: 11px; color: var(--ink-2); line-height: 1; }
.stash-grid .stash-add span { display: block; font-size: 22px; }
.stash-grid .x {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; display: none;
  background: var(--ink); color: var(--paper-hi); font-size: 13px; line-height: 18px; text-align: center;
}
.stash-grid button:hover .x, .stash-grid button:focus-visible .x { display: block; }
@media (hover: none) { .stash-grid .x { display: block; } }

/* the paper's grain and stains lie over everything on the page, so photos and writing look
   printed and stuck onto it rather than floating above it */
.tooth { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--grain), var(--mottle); mix-blend-mode: multiply; opacity: .55; }
.bg-black .tooth { opacity: .35; }
.item.photo .pic img { filter: sepia(.1) saturate(.92) contrast(.96); }
.item.text { text-shadow: 0 0 .5px currentColor; }

/* ---- small motions: things lift when picked up, settle when put down, drop in when added ---- */
.item:not(svg) { transition: scale .18s ease, filter .18s ease; }
.item.lifted:not(svg) { scale: 1.04; filter: drop-shadow(0 14px 14px #0003) drop-shadow(0 3px 3px #0002); z-index: 1; }
.item.settle:not(svg) { animation: settle .26s ease-out; }
@keyframes settle { 0% { scale: 1.04; } 60% { scale: .985; } 100% { scale: 1; } }
.item.fresh:not(svg) { animation: drop-in .34s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes drop-in { from { scale: 1.18; opacity: 0; } to { scale: 1; opacity: 1; } }
.ibtn, .tbtn, .sticker-grid button, .tape-row button { transition: background-color .15s, color .15s, scale .12s; }
.ibtn:active, .sticker-grid button:active, .tape-row button:active { scale: .92; }
.modal:not(.hidden) .card { animation: card-in .22s cubic-bezier(.2, .8, .3, 1); }
@keyframes card-in { from { opacity: 0; translate: 0 10px; scale: .98; } }
.panel:not(.hidden) { animation: panel-in .18s ease-out; }
@keyframes panel-in { from { opacity: 0; translate: 0 8px; } }
@media (prefers-reduced-motion: reduce) {
  .item.settle, .item.fresh, .modal:not(.hidden) .card, .panel:not(.hidden) { animation: none !important; }
  .item.lifted:not(svg) { scale: none; }
}
/* hovering an option lifts it a touch (mouse only, so tablets don't get stuck lifted after a tap) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tbtn, .ibtn, .sticker-grid button, .tape-row button, .results button, .kinds button, .who, .btn-primary, .btn-ghost {
    transition: translate .15s ease, box-shadow .15s ease, background-color .15s, color .15s, scale .12s;
  }
  .tbtn:hover, .btn-primary:hover, .btn-ghost:hover { translate: 0 -2px; box-shadow: 0 5px 10px #0000002e; }
  .ibtn:hover, .sticker-grid button:hover, .tape-row button:hover, .kinds button:hover, .who:hover { translate: 0 -2px; }
  .tbtn:disabled:hover, .ibtn:disabled:hover { translate: none; box-shadow: none; }
}

/* music toggle: a small round button, inked when playing */
.music-btn { padding-left: 10px; padding-right: 10px; }
.music-btn.on { background: var(--ink); color: var(--paper-hi); }
.music-btn.on svg { animation: note-bob 1.6s ease-in-out infinite alternate; }
@keyframes note-bob { from { translate: 0 1px; } to { translate: 0 -1px; } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cartouche, .postmark, .ticket { transition: translate .18s ease, filter .18s ease; }
  .cartouche:hover, .postmark:hover, .ticket:hover { translate: 0 -3px; filter: drop-shadow(0 6px 6px #0003); }
}

/* ============ the open book (two pages on wide screens) ============ */
#book.spread { width: 1480px; }
.boards, .edges { display: none; }
.spread .boards {
  display: block; position: absolute; left: 20px; top: 0; width: 1440px; height: 1024px; border-radius: 8px;
  background: var(--grain), var(--grain), radial-gradient(ellipse at 40% 30%, #6a3123 0%, #4a2116 55%, #2c140d 100%);
  box-shadow: inset 0 0 0 1px #0007, inset 0 0 40px #0009, 0 26px 44px -14px #000d; transition: opacity .6s;
}
.spread .boards::after { /* the spine's crease */
  content: ''; position: absolute; left: 698px; top: 0; bottom: 0; width: 44px;
  background: linear-gradient(90deg, #0000, #0007 45%, #0009 50%, #0007 55%, #0000);
}
.spread .edges {
  display: block; position: absolute; top: 13px; height: 988px; transition: opacity .6s, width .3s, left .3s;
  background: repeating-linear-gradient(90deg, #efe6d0 0 1px, #c9bb99 1px 2px, #e6dbc0 2px 3px);
  box-shadow: inset 0 0 4px #0005;
}
.edges-l { left: calc(40px - var(--el, 6px)); width: var(--el, 6px); border-radius: 3px 0 0 3px; }
.edges-r { left: 1440px; width: var(--er, 6px); border-radius: 0 3px 3px 0; }
.spread .spine, .spread .stack { display: none; }
.spread .sheet { left: 740px; }
.spread #stage { box-shadow: none; }
.spread.anchor-left .sheet { left: 40px; }
.spread #turnFx { left: 740px; }
.spread .ribbon { left: 1280px; }
#leftPage { position: absolute; left: 40px; top: 10px; width: 700px; height: 994px; }
#leftPage[hidden] { display: none; }
.spread.anchor-left #leftPage { left: 740px; }
#leftPage > .sheet { left: 0; top: 0; border-radius: 3px 0 0 3px; pointer-events: none; }
.spread.anchor-left #leftPage > .sheet { border-radius: 0 3px 3px 0; }
/* gutter shadows always fall toward the spine */
#leftPage > .sheet::before, .spread.anchor-left .sheet:not(#leftPage > .sheet)::before { left: auto; right: 0; background: linear-gradient(270deg, #00000033, #0000); }
.spread.anchor-left #leftPage > .sheet::before { left: 0; right: auto; background: linear-gradient(90deg, #00000033, #0000); }
.leaf.pinned { z-index: 5; }
/* closed: only the cover (or the back) shows, centred */
.spread.closed .boards, .spread.closed .edges { opacity: 0; }
.spread.closed:not(.swinging) #leftPage { display: none; }
.spread #backcover { left: 40px; }
.swinging #leftPage { visibility: hidden; }

/* a pen in the top corner of each paper in an open spread (sizes are in book units; the book is scaled to fit) */
.page-edit {
  position: absolute; top: 30px; z-index: 4; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 1px solid #2f261f40; color: var(--ink);
  background: var(--grain), var(--paper-hi); box-shadow: 0 6px 14px -6px #0007;
  opacity: .6; transition: opacity .2s ease, translate .2s ease, box-shadow .2s ease, scale .15s ease;
}
.page-edit svg { width: 26px; height: 26px; }
.page-edit.l { left: 654px; }
.page-edit.r { left: 1354px; }
.page-edit.hidden, #book:not(.spread) .page-edit, .spread.closed .page-edit { display: none; }
#book:has(.leaf) .page-edit, .swinging .page-edit { opacity: 0; pointer-events: none; }
.page-edit:hover, .page-edit:focus-visible { opacity: 1; translate: 0 -2px; box-shadow: 0 10px 18px -8px #0008; }
.page-edit:active { scale: .94; }
@media (hover: none) { .page-edit { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .page-edit { transition: none; } }

/* marbled endpapers inside the covers */
.endpaper {
  background: var(--grain), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='700'%3E%3Cfilter id='m' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='150' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cdefs%3E%3Cpattern id='p' width='34' height='700' patternUnits='userSpaceOnUse'%3E%3Crect width='34' height='700' fill='%235a2219'/%3E%3Crect width='11' height='700' fill='%237e3424'/%3E%3Crect x='13' width='3' height='700' fill='%23d2ac5c'/%3E%3Crect x='18' width='7' height='700' fill='%2333424f'/%3E%3Crect x='27' width='2' height='700' fill='%23efe2c2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='-80' y='-80' width='1160' height='860' fill='url(%23p)' filter='url(%23m)'/%3E%3C/svg%3E") center / cover, #5a2219;
  box-shadow: inset 0 0 60px #0008;
}
.endpaper::before { display: none; }
.exlibris {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 340px; padding: 26px 20px 30px; text-align: center;
  background: var(--grain), var(--paper-hi); color: var(--ink); border: 1px solid #2f261f66; outline: 1px solid #2f261f33; outline-offset: -8px;
  box-shadow: 0 6px 14px #0006;
}
.exlibris small { display: block; font-family: var(--sc); font-size: 16px; letter-spacing: .3em; color: var(--red); }
.exlibris b { display: block; margin-top: 10px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; }
.blankpage::before { display: none; }

/* a cover board swinging around the spine */
.board { position: absolute; top: 10px; width: 700px; height: 994px; transform-origin: left center; transform-style: preserve-3d; z-index: 8; pointer-events: none; }
.board .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px 9px 9px 3px; overflow: hidden; }
.board .face.back { transform: rotateY(180deg); border-radius: 9px 3px 3px 9px; }
.board .face > .sheet { left: 0 !important; top: 0 !important; width: 100%; height: 100%; }
.board .face.front { box-shadow: 0 0 0 1px #0006, 8px 10px 30px #0008; }

/* the back cover */
.cover.back::after { inset: 28px 28px 28px 150px; }
.corner.tl { left: 0; top: 0; clip-path: polygon(0 0, 70% 0, 0 70%); border-top-left-radius: 9px; }
.corner.bl { left: 0; bottom: 0; clip-path: polygon(0 30%, 0 100%, 70% 100%); border-bottom-left-radius: 9px; }
.cover.back { border-radius: 9px 3px 3px 9px; }
.back-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; margin-left: 120px; }
.back-seals { width: 300px; height: 164px; filter: drop-shadow(0 1px 0 #000b) drop-shadow(0 -1px 0 #ffffff14); }
.back-year { margin: 18px 0 0; font-family: var(--sc); font-size: 22px; letter-spacing: .3em; color: #d9bf8a; text-shadow: 0 1px 0 #000a; }
/* the front cover lifts a little at its edge when you hover it, inviting you to open it */
.cover:not(.back) { transition: transform .35s ease; }
@media (hover: hover) { .cover:not(.back):hover { transform: perspective(2600px) rotateY(-4deg); } }

.swinging.swing-front .boards { clip-path: inset(0 0 0 50%); }
.swinging.swing-back .boards { clip-path: inset(0 50% 0 0); }
.itin ol.many { columns: 2; column-gap: 36px; }

/* peek: a small card about a place, shown when you tap its pin */
.peek {
  right: 16px; top: 64px; width: 300px; display: flex; flex-direction: column; overflow: hidden;
  background: var(--grain), var(--paper-hi); border: 1px solid #2f261f55; border-radius: 2px;
  box-shadow: 0 2px 3px #0003, 0 18px 30px -10px #0008; rotate: -.6deg;
  animation: card-in .22s cubic-bezier(.2, .8, .3, 1);
}
.peek.hidden { display: none; }
.peek-thumb { height: 150px; display: grid; place-items: center; background: var(--grain), var(--mottle), var(--paper); border-bottom: 1px solid #2f261f22; }
.peek-thumb.photo { padding: 10px 10px 0; background: #f8f3e7; }
.peek-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.1) saturate(.92); }
.peek-body { padding: 12px 16px 16px; }
.peek small { font-family: var(--type); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.peek h3 { margin: 4px 0 2px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.1; }
.peek p { margin: 0 0 12px; font-family: var(--type); font-size: 12px; color: var(--ink-2); }
.peek-row { display: flex; gap: 8px; }
.peek-x { position: absolute; top: 6px; right: 6px; z-index: 1; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #2f261fcc; color: var(--paper-hi); font-size: 18px; line-height: 28px; padding: 0; }
@media (max-width: 640px) { .peek { left: 16px; right: 16px; top: auto; bottom: 86px; width: auto; } .peek-thumb { height: 110px; } }
.peek-thumb { overflow: hidden; flex: none; }
.peek-thumb.photo { display: block; }
.peek-thumb.photo img { height: 100%; }

/* the map is something you drag and tap, never select: no blue highlight on labels after a double-click */
#mapView, #mapView * { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#mapView input, #mapView textarea { -webkit-user-select: text; user-select: text; }


/* ============ covers, take two: a real hardcover ============ */
:root { --leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23fff' surfaceScale='2.2' diffuseConstant='1.1'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23l)'/%3E%3C/svg%3E"); }
.cover {
  color: #e2c88f;
  border-radius: 4px 10px 10px 4px;
  background:
    radial-gradient(ellipse 90% 70% at 38% 30%, #ffffff12, #0000 60%),
    radial-gradient(ellipse 120% 110% at 50% 50%, #0000 55%, #00000059 100%),
    linear-gradient(90deg, #00000040, #0000 10%),
    #5b2418;
  /* the board's edge, the page block peeking out, and the back board under it */
  box-shadow:
    inset 0 0 0 1px #00000080, inset 0 1px 0 #ffffff14,
    1px 1px 0 #3a150d, 2px 2px 0 #3a150d,
    3px 3px 0 #efe6cf, 4px 4px 0 #d6c9a8, 5px 5px 0 #ece2c8, 6px 6px 0 #cdbf9c,
    7px 7px 0 #3a150d, 8px 8px 0 #2b0f09,
    18px 26px 34px -6px #000c;
}
.cover > * { position: relative; }
.cover::before { /* leather grain, and the hinge groove beside the spine */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(90deg, #0000 30px, #00000066 33px, #ffffff1a 37px, #00000040 40px, #0000 44px),
    var(--leather);
  background-size: auto, 240px 240px;
  mix-blend-mode: multiply; opacity: .9; width: auto;
}
.cover::after { /* a debossed (blind-tooled) double frame */
  content: ''; position: absolute; inset: 44px 40px 44px 76px; pointer-events: none; z-index: 0;
  border: 0; outline: 0; border-radius: 2px;
  box-shadow:
    inset 1px 1px 0 #00000080, inset -1px -1px 0 #ffffff17, 1px 1px 0 #ffffff17, -1px -1px 0 #00000080,
    0 0 0 10px #0000, 0 0 0 11px #00000040;
}
.cover-inner { margin: 0 0 0 36px; z-index: 1; }
.cover small { font-family: var(--sc); font-size: 19px; letter-spacing: .38em; color: #d9bd83; text-shadow: 0 -1px 0 #0009, 0 1px 0 #ffffff12; }
.cover h1 { margin: 18px 40px 6px; font-size: 76px; line-height: 1.04; }
.fleuron { width: 220px; height: 24px; color: #c9a45e; margin: 4px 0 30px; filter: drop-shadow(0 -1px 0 #0009) drop-shadow(0 1px 0 #ffffff12); }
.cover .rose { width: 104px; height: 104px; opacity: .8; }
.cover p { margin: 34px 0 0; font-family: var(--sc); font-size: 17px; letter-spacing: .3em; color: #cfb27a; opacity: 1; text-shadow: 0 -1px 0 #0009; }
.cover:not(.back) .cover-inner { transform: translateY(-20px); }
/* back cover: quiet, like a real book; hinge on the other side */
.cover.back { border-radius: 10px 4px 4px 10px; }
.cover.back::before { background: linear-gradient(270deg, #0000 30px, #00000066 33px, #ffffff1a 37px, #00000040 40px, #0000 44px), var(--leather); background-size: auto, 240px 240px; }
.cover.back::after { inset: 44px 76px 44px 40px; box-shadow: inset 1px 1px 0 #00000059, inset -1px -1px 0 #ffffff10, 1px 1px 0 #ffffff10, -1px -1px 0 #00000059; }
.back-inner { margin: 0 36px 0 0; align-self: flex-end; margin-bottom: 120px; }
.back-seals { width: 120px; height: 66px; }
.back-year { margin-top: 6px; font-size: 13px; letter-spacing: .34em; color: #c9a45e; }


/* ============ the 3D page turn ============ */
.turning { position: absolute; top: 10px; width: 700px; height: 994px; transform-origin: left center; transform-style: preserve-3d; z-index: 7; pointer-events: none; }
.turning .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.turning .face.back { transform: rotateY(180deg); }
.turning .face > .sheet { left: 0 !important; top: 0 !important; }
.turning .face.front { box-shadow: -2px 0 6px #0003; }
/* shading across the page as it bends away from the light (darker toward the spine) */
.tshade { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #1a120c 0%, #1a120c99 18%, #0000 70%); }
.face.back .tshade { background: linear-gradient(270deg, #1a120c 0%, #1a120c99 18%, #0000 70%); }
/* the lifted page's shadow on the page underneath */
.tcast { position: absolute; top: 10px; width: 700px; height: 994px; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(90deg, #1a120c66, #1a120c22 35%, #0000 80%); }
/* book navigation buttons answer a press too */
.placenav button { transition: scale .12s, color .15s; }
.placenav button:active:not(:disabled) { scale: .88; }
@media (hover: hover) { .placenav button:hover:not(:disabled) { color: #fff; } }

/* seen from the back, the spine is on the right */
#book.at-back:not(.spread) .spine { left: 712px; border-radius: 0 6px 6px 0; }

/* covers, refined: a single pressed line, worn edges, no notebook-style spine strip */
#coverMeta { display: none; }
.cover::after { inset: 34px 30px 34px 60px; box-shadow: inset 1px 1px 0 #00000070, inset -1px -1px 0 #ffffff14, 1px 1px 0 #ffffff14, -1px -1px 0 #00000070; }
.cover.back::after { inset: 34px 60px 34px 30px; }
.cover {
  border-radius: 5px 12px 12px 5px;
  background:
    radial-gradient(ellipse 90% 70% at 38% 30%, #ffffff10, #0000 60%),
    radial-gradient(ellipse 125% 115% at 50% 50%, #0000 52%, #00000066 100%),
    radial-gradient(circle at 100% 0, #a0604a55, #0000 9%), radial-gradient(circle at 100% 100%, #a0604a55, #0000 9%),
    linear-gradient(90deg, #00000045, #0000 9%),
    #5b2418;
}
.cover.back { border-radius: 12px 5px 5px 12px; }
.cover:not(.back) .cover-inner { transform: none; }
.cover::before { opacity: .95; }
.spine { transition: opacity .45s ease .5s; }
.at-cover .spine { opacity: 0; transition: opacity .2s; } /* fades in once the cover is out of the way */
.fleuron { margin-bottom: 26px; }

/* ---- age: faded patches, rubbed edges and corners, fine scratches, worn gold ---- */
:root { --scratches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='994' fill='none' stroke='%23c99a7c' stroke-linecap='round'%3E%3Cpath d='M669 628Q678 628 680 630' stroke-width='0.7' opacity='0.18'/%3E%3Cpath d='M636 722Q636 716 642 714' stroke-width='0.5' opacity='0.14'/%3E%3Cpath d='M308 366Q313 375 324 378' stroke-width='0.9' opacity='0.20'/%3E%3Cpath d='M143 6Q146 17 150 24' stroke-width='0.7' opacity='0.22'/%3E%3Cpath d='M443 187Q453 180 459 171' stroke-width='0.8' opacity='0.12'/%3E%3Cpath d='M613 96Q616 99 616 102' stroke-width='0.8' opacity='0.11'/%3E%3Cpath d='M130 270Q148 275 162 277' stroke-width='0.9' opacity='0.14'/%3E%3Cpath d='M672 545Q679 535 682 529' stroke-width='0.6' opacity='0.20'/%3E%3Cpath d='M108 986Q114 983 118 983' stroke-width='0.8' opacity='0.12'/%3E%3Cpath d='M41 983Q47 991 54 1002' stroke-width='1.0' opacity='0.15'/%3E%3Cpath d='M433 668Q442 676 453 679' stroke-width='0.5' opacity='0.20'/%3E%3Cpath d='M97 690Q100 691 108 689' stroke-width='0.9' opacity='0.19'/%3E%3Cpath d='M628 465Q633 468 634 468' stroke-width='0.5' opacity='0.19'/%3E%3Cpath d='M656 38Q669 44 680 48' stroke-width='0.6' opacity='0.13'/%3E%3Cpath d='M65 98Q70 99 76 106' stroke-width='0.9' opacity='0.10'/%3E%3Cpath d='M678 858Q685 852 690 850' stroke-width='0.9' opacity='0.11'/%3E%3Cpath d='M196 657Q204 645 207 636' stroke-width='0.5' opacity='0.11'/%3E%3Cpath d='M675 951Q685 965 693 976' stroke-width='0.9' opacity='0.23'/%3E%3Cpath d='M80 312Q95 310 108 309' stroke-width='0.8' opacity='0.24'/%3E%3Cpath d='M642 270Q643 270 648 265' stroke-width='0.9' opacity='0.18'/%3E%3Cpath d='M657 973Q661 969 667 965' stroke-width='0.9' opacity='0.20'/%3E%3Cpath d='M606 284Q617 272 625 265' stroke-width='0.7' opacity='0.12'/%3E%3C/svg%3E"); --goldwear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='300' height='120' filter='url(%23w)'/%3E%3C/svg%3E"); }
.cover {
  background:
    var(--scratches) 0 0 / 100% 100%,
    radial-gradient(ellipse 40% 26% at 64% 22%, #b07a5a24, #0000 70%),
    radial-gradient(ellipse 34% 30% at 26% 74%, #b07a5a1c, #0000 70%),
    radial-gradient(ellipse 90% 70% at 38% 30%, #ffffff0e, #0000 60%),
    radial-gradient(ellipse 125% 115% at 50% 50%, #0000 52%, #00000066 100%),
    radial-gradient(circle at 100% 0, #b8775c66, #0000 8%), radial-gradient(circle at 100% 100%, #b8775c66, #0000 8%),
    radial-gradient(circle at 0 0, #b8775c40, #0000 6%), radial-gradient(circle at 0 100%, #b8775c40, #0000 6%),
    linear-gradient(90deg, #00000045, #0000 9%),
    #55241a;
  box-shadow:
    inset 0 0 0 1px #00000080, inset 0 0 0 3px #9a5a4433, inset 0 0 14px #a2604638, inset 0 1px 0 #ffffff14,
    1px 1px 0 #3a150d, 2px 2px 0 #3a150d,
    3px 3px 0 #e8dcc0, 4px 4px 0 #cbbb98, 5px 5px 0 #e3d6b8, 6px 6px 0 #c2b190,
    7px 7px 0 #3a150d, 8px 8px 0 #2b0f09,
    18px 26px 34px -6px #000c;
}
.cover.back { background-position: 100% 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
.cover h1, .cover small, .fleuron, .cover .rose, .back-seals, .back-year {
  -webkit-mask: var(--goldwear) 0 0 / 300px 120px; mask: var(--goldwear) 0 0 / 300px 120px;
}
.cover h1 { background: linear-gradient(180deg, #ecd59f 0%, #c99d4e 46%, #e3c583 56%, #9c7232 100%); -webkit-background-clip: text; background-clip: text; }

/* contents: a small table of contents dropping from the book's top bar */
.bookbar { position: relative; }
.contents {
  position: fixed; top: calc(62px + env(safe-area-inset-top)); left: 0; right: 0; margin: 0 auto; z-index: 40; /* centred without translate, which the opening animation uses */ width: min(380px, calc(100vw - 24px)); max-height: 70dvh; overflow: auto;
  background: var(--grain), var(--paper-hi); padding: 18px 20px 14px; border-radius: 2px; box-shadow: 0 2px 3px #0003, 0 24px 40px -14px #000c;
  animation: card-in .2s cubic-bezier(.2, .8, .3, 1); transform-origin: top center;
}
/* on the map it rises from the bottom bar instead */
.contents.on-map { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 120px); transform-origin: bottom center; }
.contents.hidden { display: none; }
.contents ol { list-style: none; margin: 0; padding: 0; }
.contents li { display: flex; align-items: center; gap: 2px; }
.contents li > .go { flex: 1; min-width: 0; }
.contents .ct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contents .ck { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k); margin-right: 8px; vertical-align: 2px; }
/* the other way to see a place: a small pin (in the book) or book (on the map) at the end of its row */
.contents .calt { flex: none; width: 36px !important; height: 36px; padding: 0 !important; display: grid !important; place-items: center; color: var(--ink-3);
  opacity: .55; transition: opacity .15s ease, color .15s ease, background-color .15s ease !important; }
.contents .calt svg { width: 18px; height: 18px; }
.contents .calt:hover, .contents .calt:focus-visible { opacity: 1; color: var(--ink); translate: none !important; }
@media (hover: none) { .contents .calt { opacity: .8; } }
.contents button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 7px 4px; border: 0; background: none; text-align: left; color: var(--ink);
  border-radius: 2px; transition: background-color .15s, translate .15s;
}
.contents .cn { width: 30px; flex: none; font-family: var(--sc); font-size: 14px; color: var(--red); }
.contents .ct { font-family: var(--serif); font-style: italic; font-size: 20px; }
.contents .cd { flex: 1; border-bottom: 2px dotted #5c4c3d55; translate: 0 -5px; }
.contents .cp { font-family: var(--type); font-size: 13px; color: var(--ink-2); }
.contents button.here { background: #2f261f12; }
.contents button.here .ct::after { content: ' ·  you are here'; font-family: var(--type); font-style: normal; font-size: 11px; color: var(--ink-3); }
@media (hover: hover) { .contents button:hover { background: #2f261f0d; translate: 3px 0; } }
.contents button:active { scale: .98; }

.peek .peek-addr { margin: 0 0 6px; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
.peek .peek-addr:empty { display: none; }
.chapter .ch-coords { line-height: 1.45; max-width: 520px; }
/* while a cover swings, the page edges on its side wait until it has landed */
.swinging.swing-front .edges-l, .swinging.swing-back .edges-r { opacity: 0; transition: none; }

/* ============ our own confirm, calendar and colour swatches ============ */
.confirm-modal { z-index: 70; animation: fade-in .16s ease-out; }
.confirm-modal.leaving { animation: fade-out .16s ease-in forwards; }
.confirm-modal.leaving .card { animation: card-out .16s ease-in forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes card-out { to { opacity: 0; translate: 0 8px; scale: .98; } }
.confirm-card { max-width: 380px; rotate: -.5deg; }
.confirm-card h2 { margin: 0 0 8px; font-size: 30px; }
.confirm-card p { margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.35; color: var(--ink-2); }
.btn-danger { font: inherit; font-family: var(--type); border: 0; border-radius: 2px; padding: 9px 16px; background: var(--red); color: var(--paper-hi); cursor: pointer; transition: translate .15s, box-shadow .15s, scale .12s; }
.btn-danger:active { scale: .96; }
@media (hover: hover) { .btn-danger:hover { translate: 0 -2px; box-shadow: 0 5px 10px #a3352a40; } }

label:has(> .datefield) { position: relative; }
.datefield {
  display: block; width: 100%; margin-top: 6px; padding: 8px 2px 7px; text-align: left; cursor: pointer;
  font-family: var(--type); font-size: 18px; color: var(--ink); background: none; border: 0; border-bottom: 1.5px solid #2f261f88;
  transition: border-color .15s;
}
.datefield.empty { color: var(--ink-3); }
.datefield:hover { border-bottom-color: var(--red); }
.calendar {
  position: fixed; z-index: 90; width: 270px; padding: 12px 12px 10px;
  background: var(--grain), var(--paper-hi); border: 1px solid #2f261f44; border-radius: 2px; box-shadow: 0 2px 3px #0003, 0 18px 30px -10px #0008;
  animation: card-in .18s cubic-bezier(.2, .8, .3, 1); text-transform: none; letter-spacing: normal;
}
.calendar.turn .cal-days { animation: fade-in .18s ease-out; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-head b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; }
.cal-head button { width: 30px; height: 30px; border: 0; background: none; font-size: 20px; color: var(--ink-2); border-radius: 50%; transition: background-color .15s, scale .12s; }
.cal-head button:hover { background: #2f261f12; }
.cal-head button:active { scale: .88; }
.cal-week, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-week span { font-family: var(--type); font-size: 10px; letter-spacing: .1em; color: var(--ink-3); padding: 4px 0; }
.cal-days button {
  height: 32px; border: 0; background: none; border-radius: 50%; font-family: var(--type); font-size: 13px; color: var(--ink);
  transition: background-color .12s, scale .12s, color .12s;
}
.cal-days button:hover { background: #2f261f14; }
.cal-days button:active { scale: .86; }
.cal-days button.today { box-shadow: inset 0 0 0 1px var(--red); }
.cal-days button.on { background: var(--red); color: var(--paper-hi); }
.cal-foot { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #2f261f33; }
.cal-foot button { border: 0; background: none; font-family: var(--type); font-size: 12px; color: var(--ink-2); padding: 4px 6px; border-radius: 2px; transition: background-color .15s; }
.cal-foot button:hover { background: #2f261f12; }

.swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.swatches button {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 2px; cursor: pointer; background: var(--grain), var(--sw);
  box-shadow: inset 0 0 0 1px #0002, 0 1px 2px #0003; transition: translate .15s, scale .12s, box-shadow .15s;
}
.swatches button:nth-child(odd) { rotate: -3deg; } .swatches button:nth-child(even) { rotate: 2deg; }
@media (hover: hover) { .swatches button:hover { translate: 0 -2px; box-shadow: inset 0 0 0 1px #0002, 0 4px 6px #0003; } }
.swatches button:active { scale: .9; }
.swatches button.on { outline: 2px solid var(--ink); outline-offset: 2px; }

.row .btn-ghost, .row .btn-primary, .row .btn-danger { white-space: nowrap; }

/* book sounds toggle */
.sfx-btn { padding-left: 10px; padding-right: 10px; }
.sfx-btn svg .wave { transition: opacity .2s; }
.sfx-btn.off svg .wave { opacity: 0; }
.sfx-btn.off { color: var(--ink-3); }

/* ============ batch: less repetition, fewer buttons, clearer text ============ */
/* in the book, a paper page doesn't repeat what its chapter page already says (name, place, stamp) */
.mode-book .ptitle, .mode-book .pmeta > span:not(.pdate), .mode-book #stage .kstamp, .mode-book #leftPage .kstamp:not(.static) { display: none; }
.mode-book .pmeta { margin-top: 0; font-size: 14px; letter-spacing: .08em; opacity: .7; }
/* long place names wrap before they reach the stamp */
.chrome { width: 410px; }

/* readable small text: a touch darker and bigger */
:root { --ink-3: #75624f; }
.peek small { font-size: 12px; }
.cal-week span { font-size: 11px; }
.pmeta { opacity: .82; }
.hint { margin: -6px 0 12px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-3); }

/* the More menu, opening upward from the map bar */
.more-wrap { position: relative; }
.moremenu {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 30; min-width: 230px; padding: 8px;
  background: var(--grain), var(--paper-hi); border: 1px solid #2f261f44; border-radius: 2px; box-shadow: 0 2px 3px #0003, 0 20px 34px -12px #000a;
  animation: card-in .18s cubic-bezier(.2, .8, .3, 1); transform-origin: bottom right;
}
.moremenu.hidden { display: none; }
.moremenu hr { border: 0; border-top: 1px dashed #2f261f33; margin: 6px 4px; }
.moremenu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 2px; text-align: left;
  font-family: var(--type); font-size: 14px; color: var(--ink); transition: background-color .15s, translate .15s;
}
.moremenu button svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
@media (hover: hover) { .moremenu button:hover { background: #2f261f10; translate: 2px 0; } }
.moremenu button:active { scale: .98; }
.moremenu .sw { margin-left: auto; width: 30px; height: 16px; border-radius: 9px; background: #2f261f33; position: relative; transition: background-color .2s; }
.moremenu .sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper-hi); box-shadow: 0 1px 2px #0004; transition: translate .2s cubic-bezier(.3, 1.4, .5, 1); }
.moremenu .toggle.on .sw { background: var(--red); }
.moremenu .toggle.on .sw::after { translate: 14px 0; }
.moremenu #musicBtn.on svg { animation: note-bob 1.6s ease-in-out infinite alternate; }

/* save status note */
.sync {
  position: fixed; right: 16px; top: 44px; z-index: 45; padding: 4px 10px 3px; border-radius: 2px; pointer-events: none;
  font-family: var(--type); font-size: 12px; color: var(--ink-2); background: var(--grain), var(--paper-hi); box-shadow: 0 1px 3px #0003;
  opacity: 0; translate: 0 -4px; transition: opacity .25s, translate .25s;
}
.sync.show { opacity: 1; translate: 0 0; }
.sync.saved::before { content: '✓ '; color: var(--teal); }
.sync.offline { color: var(--paper-hi); background: var(--red); }

/* chapter pages: a taped photo when the place has one, alternating layouts */
.ch-photo { display: none; position: absolute; left: 70px; top: 470px; width: 380px; height: 300px; margin: 0; padding: 12px 12px 40px; background: #f8f3e7; box-shadow: 0 1px 2px #0004, 0 10px 18px -6px #0006; }
.ch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.12) saturate(.9) contrast(.96); }
.ch-photo .tp { position: absolute; left: 50%; top: -12px; width: 110px; height: 26px; translate: -50% 0; rotate: -3deg; background: #e9dcb8cc; box-shadow: 0 1px 2px #0002; }
.chapter.has-photo .ch-photo { display: block; }
.chapter.has-photo #chMap { left: auto; right: 50px; top: 690px; width: 250px; height: 250px; }
.chapter.alt .ch-text { left: auto; right: 80px; text-align: right; }
.chapter.alt .rule { margin-left: auto; }
.chapter.alt.has-photo .ch-photo { left: auto; right: 70px; }
.chapter.alt.has-photo #chMap { right: auto; left: 50px; }
.chapter.alt .kstamp.static { transform-origin: right center; }
.mode-book #wrap { touch-action: pan-y; } /* sideways drags turn pages instead of scrolling */
.turning.dragging { transition: none; }

.peek-row button { display: inline-flex; align-items: center; gap: 7px; }
.peek-row button svg { width: 16px; height: 16px; }
.peek { width: 320px; }
.peek-row button { white-space: nowrap; }

/* ============ one clear type system ============
   IM Fell italic: names & titles · IM Fell small caps: labels & headings · typewriter: dates, numbers, buttons, stamps */
.card label, .panel h4, .peek small, .cal-week span, .contents .cn {
  font-family: var(--sc); text-transform: none; letter-spacing: .06em; font-weight: 400;
}
.card label { font-size: 16px; color: var(--ink-2); }
.panel h4 { font-size: 16px; }
.peek small { font-size: 15px; }
.cal-week span { font-size: 13px; }
.card label input, .card label .datefield { font-family: var(--type); letter-spacing: normal; text-transform: none; }
/* typewriter sizes settle on three steps instead of many */
.tbtn, .moremenu button, .btn-primary, .btn-ghost, .btn-danger, .peek-row button { font-size: 14px; letter-spacing: .02em; }
.peek p, .pmeta, .contents .cp, .sync { font-size: 13px; }

/* ============ empty states ============ */
.blank-hint { display: none; position: absolute; left: 0; right: 0; top: 40%; z-index: 0; margin: 0; text-align: center; pointer-events: none;
  font-family: var(--hand); font-size: 46px; line-height: 1.05; color: var(--ink); opacity: .22; rotate: -2deg; }
.blank-hint span { font-size: 30px; }
.mode-paper #stage.blank .blank-hint { display: block; animation: fade-in .6s ease-out; }
.bg-black .blank-hint { color: #ece4d3; }
.first-hint { left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); translate: -50% 0; margin: 0; padding: 6px 14px;
  font-family: var(--hand); font-size: 28px; color: var(--paper-hi); background: var(--red); border-radius: 2px; rotate: -1.5deg; box-shadow: 0 6px 14px #0004;
  animation: hint-bob 2.4s ease-in-out infinite alternate; }
.first-hint::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--red); translate: -50% 0; rotate: 45deg; }
.first-hint.hidden { display: none; }
@keyframes hint-bob { from { translate: -50% 0; } to { translate: -50% -4px; } }
.stash-empty { grid-column: span 5; align-self: center; margin: 0; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .first-hint { animation: none; } }

/* ============ the back cover, seen from behind ============
   spine & hinge on the right, so the board edge and the page block show on the LEFT; plain leather, no frame */
.cover.back {
  box-shadow:
    inset 0 0 0 1px #00000080, inset 0 0 0 3px #9a5a4433, inset 0 0 14px #a2604638, inset 0 1px 0 #ffffff14,
    -1px 1px 0 #3a150d, -2px 2px 0 #3a150d,
    -3px 3px 0 #e8dcc0, -4px 4px 0 #cbbb98, -5px 5px 0 #e3d6b8, -6px 6px 0 #c2b190,
    -7px 7px 0 #3a150d, -8px 8px 0 #2b0f09,
    -18px 26px 34px -6px #000c;
}
.cover.back::after { display: none; }

.cover.back {
  background:
    var(--scratches) 0 0 / 100% 100%,
    radial-gradient(ellipse 40% 26% at 64% 22%, #b07a5a24, #0000 70%),
    radial-gradient(ellipse 34% 30% at 26% 74%, #b07a5a1c, #0000 70%),
    radial-gradient(ellipse 90% 70% at 38% 30%, #ffffff0e, #0000 60%),
    radial-gradient(ellipse 125% 115% at 50% 50%, #0000 52%, #00000066 100%),
    radial-gradient(circle at 0 0, #b8775c66, #0000 8%), radial-gradient(circle at 0 100%, #b8775c66, #0000 8%),
    radial-gradient(circle at 100% 0, #b8775c40, #0000 6%), radial-gradient(circle at 100% 100%, #b8775c40, #0000 6%),
    linear-gradient(270deg, #00000045, #0000 9%),
    #55241a;
}
.cover.back { background-position: 0 0; }

/* one soft, consistent shadow for every page turn: the turning page darkens gently toward the spine,
   and casts a faint shade on the page it uncovers */
.tshade { background: linear-gradient(90deg, #1a120c4d 0%, #1a120c1f 22%, #0000 55%); }
.face.back .tshade { background: linear-gradient(270deg, #1a120c4d 0%, #1a120c1f 22%, #0000 55%); }
.tcast { background: linear-gradient(90deg, #1a120c33, #1a120c10 30%, #0000 60%); }
.turning .face.front { box-shadow: -1px 0 3px #0002; }

/* a page copy (during turns) keeps its spine shadow on the spine side, wherever it's drawn */
.sheet.on-left::before { left: auto !important; right: 0 !important; background: linear-gradient(270deg, #00000033, #0000) !important; }
.sheet.on-right::before { left: 0 !important; right: auto !important; background: linear-gradient(90deg, #00000033, #0000) !important; }
.endpaper.on-left::before, .endpaper.on-right::before, .cover.on-left::before, .cover.on-right::before { background: none !important; }

/* seen from arm's length: a turning page or cover never looms taller than the book */
#book { perspective: 7000px; perspective-origin: 50% 50%; } /* an upright page grows ~11%, not ~37% */

/* the turning page curves into the spine: dark close to it, fading out toward the page's outer edge */
.tshade { background: linear-gradient(90deg, #1a120c80 0%, #1a120c40 7%, #1a120c14 22%, #0000 42%); }
.face.back .tshade { background: linear-gradient(270deg, #1a120c80 0%, #1a120c40 7%, #1a120c14 22%, #0000 42%); }
/* and the outer edge catches a little light */
.turning .face.front::after, .turning .face.back::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18px; z-index: 9; pointer-events: none; background: linear-gradient(270deg, #fff2, #fff0); }
.turning .face.front::after { right: 0; }
.turning .face.back::after { left: 0; transform: scaleX(-1); }
/* no hover tilt on the cover: it made the cover jump when an animation ended under the mouse */
.cover:not(.back):hover { transform: none; }

/* leather grain without blending: identical lying still or swinging in 3D (browsers drop blend modes in 3D) */
:root { --leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23fff' surfaceScale='2.2' diffuseConstant='1.1' result='lit'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='lit' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -0.75 -0.75 -0.75 0 1.62'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23l)'/%3E%3C/svg%3E"); }
.cover::before { mix-blend-mode: normal; opacity: 1; }

/* a paper's date is a button-like tag: tap to pick from the calendar */
.pdate.pickable { cursor: pointer; border-bottom: 1px dashed #2f261f55; transition: border-color .15s, color .15s; }
.pdate.pickable:hover { border-bottom-color: var(--red); color: var(--red); }
.pdate.pickable:active { scale: .97; }

/* ============ Google-Maps-like pins & labels ============ */
.pin .head { transition: r .22s cubic-bezier(.3, 1.4, .5, 1), cy .22s ease, fill .2s; }
.pin line, .pin ellipse, .pin .shine { transition: opacity .2s; }
.pin.dot line, .pin.dot ellipse, .pin.dot .shine { opacity: 0; }
.pin.dot .head { stroke: #fbf6ea; stroke-width: 1.6; }
.pin.dot .plabel { font-size: 14px; }
.pin.selected .plabel { font-size: 18px; fill: #000; }
.pin.selected .head { stroke: #fbf6ea; stroke-width: 2; filter: drop-shadow(0 3px 3px #0005); }
.plabel, .clabels { transition: opacity .25s ease; }
.plabel.hid, .clabels.hid { opacity: 0; pointer-events: none; }