:root {
  color-scheme: light dark;
  --fg: #2b2419; --muted: #7a6f5c; --accent: #a1442e; --border: #d9cbab;
  --paper: #f4ecd8; --paper-card: #fbf6e9;
  --tape: rgba(232, 214, 160, 0.75); --tape-edge: rgba(160, 130, 70, 0.35);
  --shadow: rgba(60, 45, 20, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: #ecdfc2; --muted: #a99f88; --accent: #e2926e; --border: #4a4331;
    --paper: #23200f; --paper-card: #2c281a;
    --tape: rgba(120, 100, 60, 0.55); --tape-edge: rgba(20, 15, 5, 0.4);
    --shadow: rgba(0, 0, 0, 0.55);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 2rem 1rem 5rem; min-height: 100vh; color: var(--fg); line-height: 1.6;
  font-family: 'Patrick Hand', 'Comic Sans MS', sans-serif; font-size: 1.15rem;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 1px, transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 2px);
}
main, header.site-header { max-width: 42rem; margin: 0 auto; }
a { color: var(--accent); }
h1, h2, .entry-date { font-family: 'Patrick Hand SC', 'Patrick Hand', sans-serif; }
h1 { font-size: 2.2rem; margin: 0.2rem 0; letter-spacing: 0.02em; }
.site-header { margin-bottom: 1rem; }
.breadcrumb a { text-decoration: none; }
.trip-dates, .trip-count { color: var(--muted); font-size: 0.95rem; }

/* Trip page header: demoted to one small inline line — the entry's own date is
   the protagonist on this page, not the trip title (see .book-topdate below). */
.site-header.slim { margin-bottom: 0.6rem; }
.site-header.slim .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; margin: 0; font-size: 1.05rem;
}
.trip-meta { color: var(--muted); font-size: 0.95rem; }
.photobook-link {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.2rem; height: 2.2rem; border-radius: 50%; margin-left: auto;
  background: var(--paper-card); color: var(--accent); box-shadow: 0 2px 5px var(--shadow);
  transition: transform 0.15s ease;
}
.photobook-link:hover { transform: scale(1.1); }

/* ---------- trip index ---------- */
.trip-list { list-style: none; padding: 0; margin: 2rem 0; }
.trip-row { margin: 0 0 2rem; }
.trip-row a {
  position: relative; display: block; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  background: var(--paper-card); border-radius: 3px; box-shadow: 0 3px 8px var(--shadow);
  transform: rotate(var(--tilt)); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.trip-row a:hover { transform: rotate(0deg); box-shadow: 0 5px 14px var(--shadow); }
.trip-row .tape-top {
  position: absolute; top: -0.7rem; left: 50%; width: 4.5rem; height: 1.4rem;
  transform: translateX(-50%) rotate(-3deg);
}
.trip-row .trip-name { display: block; font-size: 1.4rem; }
.trip-row .trip-dates, .trip-row .trip-count { display: inline-block; margin-right: 0.8rem; }

/* ---------- washi tape ---------- */
.tape {
  position: absolute; width: 2.6rem; height: 1.3rem;
  background-color: var(--tape);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 2px, transparent 2px, transparent 6px);
  box-shadow: 0 1px 2px var(--tape-edge);
  opacity: 0.9;
}
.tape-tl { top: -0.6rem; left: -0.5rem; transform: rotate(-40deg); }
.tape-tr { top: -0.6rem; right: -0.5rem; transform: rotate(40deg); }
.tape-bl { bottom: -0.6rem; left: -0.5rem; transform: rotate(40deg); }
.tape-br { bottom: -0.6rem; right: -0.5rem; transform: rotate(-40deg); }

/* ---------- logbook entries ---------- */
.logbook { margin-top: 1.5rem; }
.entry {
  padding: 1.6rem 0; border-bottom: 2px dashed var(--border);
}
.entry:last-child { border-bottom: none; }
.entry-date { font-size: 1.3rem; margin: 0; }
.entry-oneliner { color: var(--muted); font-style: italic; margin: 0.2rem 0 0.6rem; font-size: 1.05rem; }
.entry-text p { margin: 0.5rem 0; }
.empty { color: var(--muted); }

/* Icon-only location link — no label, just a pin (see mapsPinHtml()). Placement
   varies by what the entry actually has: stamped onto the photo (.photo-frame
   .maps-pin below) when there is one, otherwise inline near the text
   (.entry-pin-inline). */
.maps-pin {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--paper-card); color: var(--accent); box-shadow: 0 2px 5px var(--shadow);
  transition: transform 0.15s ease;
}
.maps-pin:hover { transform: scale(1.1); }
.photo-frame .maps-pin { position: absolute; bottom: 0.6rem; right: 0.6rem; }
.entry-pin-inline { margin-top: 0.6rem; }

/* Compact "voice memo" card (voiceNoteHtml()) — never a bare full-width player. */
.voice-note {
  display: inline-flex; align-items: center; gap: 0.5rem; background: var(--paper-card);
  border: 1px dashed var(--border); border-radius: 8px; padding: 0.5rem 0.7rem;
  box-shadow: 0 2px 6px var(--shadow); transform: rotate(var(--tilt));
}
.voice-note-icon { color: var(--accent); flex-shrink: 0; display: flex; }
.voice-note audio { width: 13rem; max-width: 100%; height: 2.2rem; display: block; }
.entry-caption .voice-note { margin: 0.6rem auto 0; }
.entry-photo-side .voice-note, .entry-text-only .voice-note { margin-top: 0.6rem; }

.photo-frame {
  position: relative; display: inline-block; background: var(--paper-card); padding: 0.6rem 0.6rem 0.8rem;
  box-shadow: 0 4px 10px var(--shadow); transform: rotate(var(--tilt)); flex-shrink: 0;
}
.entry-photo { display: block; width: 100%; height: auto; border-radius: 1px; }

/* Photo down one side, text alongside — which side alternates per entry
   (see pickLayout() in publishLogbook.js) so the page isn't a rigid grid. */
.entry-photo-side { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: flex-start; }
.entry-photo-side .photo-frame { width: 100%; max-width: 15rem; margin: 0 auto; }
.entry-photo-side .entry-body { flex: 1 1 16rem; min-width: 0; }
.entry-photo-right { flex-direction: row-reverse; }

/* Short entry as a polaroid with its text as a caption underneath. */
.entry-caption { text-align: center; }
.entry-caption .photo-frame-wide { max-width: 20rem; margin: 0 auto; }
.entry-caption-body { max-width: 26rem; margin: 0.8rem auto 0; }
.entry-caption .entry-text { font-style: italic; }

/* Audio-only entry: the voice-note card down one side, text alongside — same
   alternating-side idea as entry-photo-side, just with a small card instead of
   a photo. */
.entry-audio-side { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.entry-audio-side .voice-note { flex-shrink: 0; }
.entry-audio-side .entry-body { flex: 1 1 16rem; min-width: 0; }
.entry-audio-right { flex-direction: row-reverse; }

@media (max-width: 30rem) {
  .entry-photo-side, .entry-photo-right, .entry-audio-side, .entry-audio-right { flex-direction: column; }
  .entry-photo-side .photo-frame { max-width: 18rem; }
  .entry-audio-side .voice-note { margin: 0 auto; }
}

/* ---------- photo book (photos.html) ---------- */
.photobook-grid {
  max-width: 52rem; margin: 1.5rem auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.2rem;
}
.photobook-grid .photo-frame { width: 100%; margin: 0; }
/* Forces every photo to the same square box regardless of its own portrait/
   landscape aspect ratio — without this, mixing orientations would give every
   row a different height and the "3 neatly aligned per line" would fall apart
   (object-fit: cover crops to fill the square rather than distorting/letterboxing). */
.photo-frame-grid .entry-photo { aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 40rem) {
  .photobook-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 24rem) {
  .photobook-grid { grid-template-columns: 1fr; }
}

/* ---------- book pagination (book.js) ---------- */
/* Default (no JS, or JS hasn't run yet): every page shows at once, the topbar
   (nav + the JS-relocated date) hidden — full content stays reachable, each entry
   keeps its own inline date, rather than looking broken or losing the date entirely. */
.book-topbar { display: none; }
.book .entry { border-bottom: none; padding-bottom: 0; }
body.js-paged .book-page { display: none; }
body.js-paged .book-page.current { display: block; }
/* Nav and date are stacked on their own full-width rows rather than shared as two
   flex/grid items on one row — .book-nav-pages alone can be several hundred px
   wide (see its fixed width below), so any "nav left, date right" scheme sharing
   a row ends up with the date crowded off-center by however wide nav happens to
   render, not genuinely centered on the page. Each on its own row, with its own
   independent text-align/justify-content, always centers truly regardless of the
   other row's width. */
body.js-paged .book-topbar {
  display: flex; flex-direction: column; gap: 0.8rem;
  margin: 0 0 1.8rem; padding-bottom: 1rem; border-bottom: 2px dashed var(--border);
}
.book-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.book-nav-btn, .book-nav-page {
  font-family: inherit; font-size: 1.05rem; min-width: 2.3rem; height: 2.3rem; padding: 0 0.5rem;
  border-radius: 6px; border: 1px solid var(--border); background: var(--paper-card); color: var(--fg);
  cursor: pointer;
}
.book-nav-btn:disabled { opacity: 0.35; cursor: default; }
/* Fixed width (clamped to the viewport, so it's still constant for a given screen
   size, just smaller) rather than shrink-to-fit: the number of buttons/ellipses
   actually rendered varies by current page (see renderNav() in book.js — "1 … 7"
   near an edge vs "1 2 3 4 5 6 7" in the middle), and a shrink-to-fit width would
   make that resize the whole strip, shoving prev/next sideways on every click —
   exactly what made "click next repeatedly" annoying before this. Sized for the
   widest case book.js can produce (first + ellipsis + 5-wide window + ellipsis +
   last = 9 slots). */
.book-nav-pages { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; width: 23rem; max-width: 90vw; }
.book-nav-page.current { background: var(--accent); color: var(--paper-card); border-color: var(--accent); font-weight: bold; }
.book-nav-ellipsis { padding: 0 0.2rem; color: var(--muted); }

/* The diary's real protagonist: book.js moves the current page's .entry-head
   (just the date now — see mapsPinHtml() call sites for where the pin went
   instead) up here, centered and blown up in size, rather than leaving it small
   and buried at the top of the entry body. */
.book-topdate { text-align: center; }
.book-topdate .entry-date { font-size: 2rem; }