: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%; }
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; }

#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); }
.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; }

.index-list { list-style: none; padding: 0; margin: 0; }
.index-list button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px dotted #2f261f55; padding: 10px 2px;
}
.index-list .t { font-family: var(--serif); font-size: 21px; font-style: italic; }
.index-list .d { margin-left: auto; font-family: var(--type); font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.index-list .k { width: 10px; height: 10px; border-radius: 50%; background: var(--k); flex: none; align-self: center; }
.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;
}
#mapView { overflow: hidden; }
#mapCanvas { position: absolute; will-change: transform; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#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; }
.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: 15px; letter-spacing: .14em; }
.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: 80px; display: flex; align-items: flex-end; gap: 14px; }
.postmark, .ticket { border: 0; background: none; padding: 0; }
.postmark { width: 128px; height: 128px; 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: 172px; padding: 10px 16px 9px; text-align: left; transform: rotate(3deg);
  background: var(--grain), #e8c674; color: var(--ink);
  -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px 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: 11px; letter-spacing: .18em; color: var(--ink-2); border-bottom: 1px dashed #2f261f66; padding-bottom: 4px; }
.ticket b { display: block; font-family: var(--type); font-weight: 400; font-size: 28px; line-height: 1.1; margin-top: 4px; }
.ticket span { display: block; font-family: var(--type); font-size: 12px; color: var(--ink-2); }

.compass { right: 18px; bottom: 76px; width: 130px; height: 130px; pointer-events: none; opacity: .85; }
.compass svg { width: 100%; height: 100%; }
.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: 1050px; height: 730px; transform-origin: 0 0; perspective: 2600px; }
.spine {
  position: absolute; left: 0; top: 4px; width: 50px; height: 722px; 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: 1000px; height: 700px; 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: 70px; top: 36px; width: 640px; 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; }
.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 .pic img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: 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); }

.item.tape {
  opacity: .86; cursor: grab;
  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%);
}
.tp-kraft { background: var(--grain), #c9a46c; }
.tp-mint { background: repeating-linear-gradient(-45deg, #a7cdbf 0 9px, #c6e1d5 9px 18px); }
.tp-rose { background: radial-gradient(circle, #d4848e 2.3px, #0000 2.9px) 0 0 / 14px 14px, #f1ccd0; }
.tp-grid { background: linear-gradient(#ffffff88 1px, #0000 1px) 0 0 / 10px 10px, linear-gradient(90deg, #ffffff88 1px, #0000 1px) 0 0 / 10px 10px, #93abc0; }
.tp-mustard { background: var(--grain), #dfb34c; }
.tp-ledger { background: repeating-linear-gradient(#0000 0 5px, #2f261f2a 5px 6px), #e6e0d1; }

.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; }
.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; }
.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; }
.inks { display: flex; gap: 7px; padding: 0 4px; flex: none; }
.inks button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 1px; transform: rotate(-4deg); box-shadow: inset 0 0 0 1px #fff2; }
.inks button:nth-child(even) { transform: rotate(5deg); }
.inks button.on { outline: 2px solid var(--paper-hi); outline-offset: 3px; }
.sizes { display: flex; gap: 0; flex: none; }
.sizes button { width: 34px; height: 40px; display: grid; place-items: center; background: none; border: 0; padding: 0; border-radius: 2px; }
.sizes button i { display: block; border-radius: 50%; background: var(--cream-text); }
.sizes button.on { background: #ffffff1a; }

.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(.72); transform-origin: 0 0; }
  .compass { display: none; }
  .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: 1000px; height: 700px; 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: 860px; top: 640px; 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: 54px 90px; }
.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: 250px; outline: 1px solid #5c4c3d66; outline-offset: 5px; }
.itin ol { list-style: none; margin: 26px 0 0; padding: 0; columns: 2; column-gap: 70px; }
.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: 100px; top: 150px; width: 460px; }
.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; right: 70px; top: 160px; width: 380px; height: 380px; 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: 1000px; height: 700px; overflow: visible; pointer-events: none; z-index: 6; }
.leaf { will-change: clip-path; }