/* ============================================================
   Wanderbook — design tokens
   ============================================================ */

:root {
  /* Palette */
  --ink: #0b0908;
  --ink-2: #14100d;
  --ink-3: #201d1a;
  --vellum: #f4ede4;
  --vellum-2: #ebe2d4;
  --vellum-3: #dccfb9;
  --sepia: #8b6f47;
  --sepia-soft: #a98a64;
  --gold: #c9a961;
  --gold-soft: #d9bd80;
  --gold-bright: #e8cc8a;
  --crimson: #7d2e2e;
  --crimson-soft: #a04545;
  --moss: #4a5d3a;
  --moss-soft: #6c8255;
  --ground: #0b0908;
  --surface: #eae9e9;
  --divider: rgba(32, 31, 29, 0.16);

  /* Semantic — defaults to INK theme */
  --bg: var(--ink);
  --bg-elev: var(--ink-2);
  --bg-elev-2: var(--ink-3);
  --fg: #ece2cf;
  --fg-muted: #b9a98a;
  --fg-dim: #8f8168;
  --rule: rgba(201, 169, 97, 0.18);
  --rule-strong: rgba(201, 169, 97, 0.35);
  --accent: var(--gold);
  --accent-soft: var(--gold-soft);
  --color-surface: var(--surface);
  --color-divider: var(--divider);

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, serif;
  --font-body: "Lora", Georgia, serif;
  --font-hand: "Caveat", "Homemade Apple", cursive;
  --font-atlas: "IM Fell English", "Cormorant Garamond", Georgia, serif;

  /* Motion */
  --ease-page: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Radius / shadow */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-md: 4px;
  --radius-lg: 16px;
  --shadow-soft: 0 8px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-frame: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(201, 169, 97, 0.12);
}

/* Vellum (warm cream) theme */
[data-theme="vellum"] {
  --bg: var(--vellum);
  --bg-elev: var(--vellum-2);
  --bg-elev-2: var(--vellum-3);
  --fg: #2a2118;
  --fg-muted: #6b5a3e;
  --fg-dim: #9b8966;
  --rule: rgba(139, 111, 71, 0.28);
  --rule-strong: rgba(139, 111, 71, 0.5);
  --accent: #8b6f47;
  --accent-soft: var(--sepia-soft);
  --shadow-frame: 0 24px 60px -24px rgba(74, 56, 32, 0.35), 0 0 0 1px rgba(139, 111, 71, 0.18);
}

/* ============================================================
   Base
   ============================================================ */

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 600ms var(--ease-soft), color 600ms var(--ease-soft);
}

body {
  overflow-x: hidden;
}

/* Paper-grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
[data-theme="vellum"] body::before {
  opacity: 0.08;
  mix-blend-mode: multiply;
}

/* Selection */
::selection {
  background: rgba(201, 169, 97, 0.35);
  color: var(--fg);
}

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Scrollbar — slim, sepia */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }

/* Utilities */
.wb-italic { font-style: italic; }
.wb-hand { font-family: var(--font-hand); }
.wb-display { font-family: var(--font-display); }
.wb-cover-panel { min-width: 0; }
.wb-cover-panel svg { max-width: 100%; }
.wb-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Buttons */
.wb-btn {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 14px 26px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: all 220ms var(--ease-soft);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.wb-btn:hover {
  background: var(--accent);
  color: var(--ink);
}
[data-theme="vellum"] .wb-btn:hover { color: var(--vellum); }

.wb-btn--ghost {
  border-color: var(--rule-strong);
  color: var(--fg-muted);
}
.wb-btn--ghost:hover {
  color: var(--fg);
  border-color: var(--accent);
  background: transparent;
}

/* Card hover */
.wb-card {
  position: relative;
  transition: transform 480ms var(--ease-page);
}
.wb-card:hover { transform: translateY(-4px); }

/* Page turn transition root */
.wb-page {
  transform-origin: left center;
  perspective: 1600px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The search field and the editors set their own inline styles, and each of
   them used to turn the outline off there — which cannot be undone by a rule,
   however specific, so a keyboard reader had no way of telling where their
   typing was about to go. The suppression now lives here instead, where the
   :focus-visible case can be given something to show. */
.wb-search { border-radius: 1px; }
.wb-search:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.wb-search-field { outline: none; }
.wb-edit-field { outline: none; }
.wb-edit-field:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* A note, a caption or a journal entry is opened by clicking the words
   themselves. Those words are a real button now, so they must not pick up any
   of a button's own appearance — only its reachability. */
.wb-edit-open {
  -webkit-appearance: none;
  appearance: none;
  text-align: inherit;
}
.wb-edit-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ============================================================
   Photographic ground & matted plates
   ------------------------------------------------------------
   The redesign's own palette: darker and warmer than the --ink
   family above, and deliberately so. Gold only ever appears as a
   stroke here — there are no filled gold surfaces.
   ============================================================ */

:root {
  --wb-scrim: 11, 9, 8;            /* rgb triplet: header scrim + vignette */
  --wb-display: #f2e8d4;           /* every h1/h2/h3 */
  --wb-journal: #ddd0b6;           /* the album journal entry */
  --wb-hand: #b0a08a;              /* a written note that exists */
  --wb-hand-caption: #c4b59b;      /* the same, under a plate */
  --wb-hand-muted: #7d6e58;        /* timeline place lines */
  --wb-hand-subtitle: #9c8d74;     /* masthead subtitles */
  --wb-meta-bright: #a2937a;       /* timeline chapter lists */
  --wb-meta: #8f8168;              /* nav inactive, metadata, search */
  --wb-meta-dim: #7d6e58;          /* chapter numbers, dates, counts */
  --wb-empty: #6f6252;             /* "— add a line —" and its kin */
  --wb-accent: #c9a961;
  --wb-accent-hover: #e8cc8a;
  --wb-accent-deep: #8a6b2f;       /* map pins and routes, over pale tiles */
  --wb-swatch-off: #7a6845;        /* atlas index dot, chapter not current */
  --wb-rule-1: rgba(201, 169, 97, 0.28);
  --wb-rule-2: rgba(201, 169, 97, 0.24);
  --wb-rule-3: rgba(201, 169, 97, 0.18);
  --wb-rule-4: rgba(201, 169, 97, 0.08);
  --wb-rule-search: rgba(201, 169, 97, 0.3);
  --wb-wash: rgba(201, 169, 97, 0.06);   /* atlas index row hover */
  --wb-fill: rgba(201, 169, 97, 0.14);   /* accent button hover */
  --wb-paper-line: rgba(201, 169, 97, 0.10); /* the ruled line under a pen */
}

/* Vellum turns the dark pages to pale ones. The structure is identical;
   only the values flip, so every screen below reads in either theme. */
[data-theme="vellum"] {
  --wb-scrim: 244, 237, 228;
  --wb-display: #241c12;
  --wb-journal: #3a2f20;
  --wb-hand: #5d4c33;
  --wb-hand-caption: #4e4029;
  --wb-hand-muted: #8a7857;
  --wb-hand-subtitle: #7c6a4a;
  --wb-meta-bright: #6b5a3e;
  --wb-meta: #7c6a4a;
  --wb-meta-dim: #8a7857;
  --wb-empty: #a5947a;
  --wb-accent: #8b6f47;
  --wb-accent-hover: #5d4526;
  --wb-accent-deep: #6d5533;
  --wb-swatch-off: #b3a189;
  --wb-rule-1: rgba(139, 111, 71, 0.42);
  --wb-rule-2: rgba(139, 111, 71, 0.36);
  --wb-rule-3: rgba(139, 111, 71, 0.26);
  --wb-rule-4: rgba(139, 111, 71, 0.12);
  --wb-rule-search: rgba(139, 111, 71, 0.42);
  --wb-wash: rgba(139, 111, 71, 0.07);
  --wb-fill: rgba(139, 111, 71, 0.14);
  --wb-paper-line: rgba(139, 111, 71, 0.20);
}

/* ---- The matted print --------------------------------------
   Every photograph in the book is a print behind a thick mat: a
   near-white border, a hairline outline, a heavy cast shadow and
   a slight tilt that straightens under the cursor. No card, no
   panel and no border ever wraps one.

   The rotation travels as a custom property so that :hover can
   overrule it without !important — an inline transform could not
   be beaten otherwise.
   ------------------------------------------------------------ */
.wb-mat {
  border: var(--mat, 9px) solid var(--color-surface);
  outline: 1px solid var(--color-divider);
  box-shadow: var(--plate-shadow, 0 30px 62px -22px rgba(0, 0, 0, 0.9));
  transform: rotate(var(--rot, 0deg));
}

.wb-plate {
  border: var(--mat, 9px) solid var(--color-surface);
  outline: 1px solid var(--color-divider);
  box-shadow: var(--plate-shadow, 0 30px 62px -22px rgba(0, 0, 0, 0.9));
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--plate-ms, 560ms) var(--ease-page);
}
.wb-plate:hover,
button:focus-visible > .wb-plate,
a:focus-visible > .wb-plate {
  transform: rotate(0deg) translateY(var(--lift, -5px));
}

/* The frame reserves the photograph's shape before the native lazy image is
   decoded. The image can now use srcset, browser loading priority, and the
   decoded-image cache while keeping the print crop independent of its mat. */
.wb-print-frame {
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface) 82%, var(--bg));
}
.wb-print {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  filter: var(--grade, sepia(0.2) saturate(0.84) contrast(1.03));
}

/* Long chapters still expose their full semantic structure, but off-screen
   figures do not need layout and paint work until the reader approaches. */
.wb-plate-figure {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

/* Proportional flex widths give each row a shared image height, including
   the mat. The last row keeps a reading-size print rather than stretching a
   lone photograph across the page. Native image loading remains lazy. */
.wb-album-photos {
  --album-row-height: clamp(190px, 20vw, 240px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 38px 28px;
  margin-top: 56px;
}
.wb-album-photos::after { content: ""; flex: 10000 1 0; }
.wb-album-photos > .wb-plate-figure {
  flex: var(--photo-ratio) 1 calc(var(--photo-ratio) * var(--album-row-height) + 18px);
  min-width: min(160px, 100%);
  max-width: 100%;
  /* Row placement needs the real caption height, including off-screen rows. */
  content-visibility: visible;
}
.wb-album-photos.is-curating {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 52px 38px;
}
.wb-album-photos.is-curating::after { display: none; }

/* ---- The room ----------------------------------------------
   A photograph read full-screen: the rest of its album scattered
   dim on the wall behind it, the plate itself matted in the
   middle. The slideshow and the lightbox are the same room with
   different furniture, so the room is described once, here, and
   each of them only says how big its plate is.

   The scraps on the wall are prints too, cut to a thin mat and
   dimmed rather than made see-through — they are photographs,
   not a wash. Since they are also targets, they answer the
   pointer: full colour and a gold rule at the outer edge.
   ------------------------------------------------------------ */
.wb-room {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #080807;
}
.wb-room-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.76) 58%, rgba(0, 0, 0, 0.86) 100%);
}

.wb-slide-wall {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  border: 6px solid var(--color-surface);
  outline: 1px solid rgba(201, 169, 97, 0.14);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  filter: sepia(0.4) saturate(0.6) brightness(0.55) blur(1px);
  transition: filter 240ms ease, box-shadow 240ms ease, outline-color 240ms ease;
}

/* A scrap holds two faces while it changes: the plate leaving stays put
   underneath while the one arriving rises over it, so the wall dissolves
   rather than blinking. Fading the lower one out at the same time would
   be the obvious way to cross a fade, and is the wrong one — two
   half-lit faces let the black wall through between them, and the scrap
   dips before it settles.

   Note which way round the states are: a face RESTS visible and is
   nudged to transparent on arrival, rather than resting transparent and
   being animated into view. Written the other way round, the settled
   state would be something only the animation could reach, and anything
   that kept it from running would leave a wall of empty mats; written
   this way the resting value is the one declared here, and shedding one
   class is all that stands between a print and the wall.

   The grade and the gold rule sit on the mat around both, so the two
   faces are dimmed and lit together and the swap is all that moves. */
.wb-slide-wall > .wb-wall-face {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 1400ms var(--ease-page), transform 1400ms var(--ease-page);
}
.wb-slide-wall > .wb-wall-arriving {
  opacity: 0;
  transform: scale(1.012);
}

/* Asked for less movement, the print still changes — otherwise most of
   the album would never be seen — but it arrives without the settle. */
@media (prefers-reduced-motion: reduce) {
  .wb-slide-wall > .wb-wall-face { transition-duration: 900ms; }
  .wb-slide-wall > .wb-wall-arriving { transform: none; }
}
.wb-slide-wall:hover,
.wb-slide-wall:focus-visible {
  filter: sepia(0.1) saturate(0.95) brightness(0.98);
  outline-color: rgba(201, 169, 97, 0.85);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
}
.wb-slide-wall[aria-current="true"] {
  outline-color: rgba(201, 169, 97, 0.7);
}

/* The plate on the easel. Same mat as every print in the book,
   cut thicker because this is the one place a photograph is read
   at full size. It is bounded on both axes and keeps its own
   ratio, so the mat shrinks to the photograph rather than the
   photograph being cropped to the mat. */
.wb-slide-plate {
  position: relative;
  /* The centred column is click-through so the wall behind can be
     reached; the plate itself has to opt back in. */
  pointer-events: auto;
  background: var(--color-surface);
  padding: 14px;
  border: 1px solid var(--color-divider);
  box-shadow: 0 28px 70px -12px rgba(0, 0, 0, 0.72);
}
.wb-slide-plate:focus-visible {
  outline: 1px solid rgba(201, 169, 97, 0.85);
  outline-offset: 6px;
}
.wb-slide-plate > img,
.wb-slide-plate > video {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--plate-max-w, min(46vw, 560px));
  max-height: var(--plate-max-h, min(58vh, 520px));
  background: #d7d1c8;
  border: 1px solid rgba(17, 13, 10, 0.12);
}

/* A share of the height is only the plate's to take while there is a
   height to share. Under the 58vh it asks for sits the room's own
   furniture — the bar above, the plate number, the mat's own border,
   and at the foot a caption as tall as the words in it — so the plate
   is also held to what is actually left once all of that is standing.
   Without this a short window centres the plate straight through its
   own caption. --wb-room-foot is measured and written by the room that
   has furniture at its foot; a room that sets none is left as it was. */
.wb-room .wb-slide-plate > img,
.wb-room .wb-slide-plate > video {
  max-height: min(
    var(--plate-max-h, min(58vh, 520px)),
    calc(100vh - 52px - var(--wb-room-foot, 0px) - 88px));
}

/* On a phone the room has no width to spare for the wall, so the
   plate takes what is left over instead of holding to a share of
   a viewport it no longer has. */
@media (max-width: 820px) {
  .wb-slide-plate > img,
  .wb-slide-plate > video {
    max-width: calc(100vw - 72px);
  }
}

/* Clicked photographs fill the window; the slideshow keeps its smaller mat. */
.wb-photo-stage { position: absolute; inset: 0; }
.wb-photo-viewer .wb-slide-plate {
  width: 100%; height: 100%; padding: 0; border: 0;
  background: transparent; box-shadow: none;
}
.wb-room.wb-photo-viewer .wb-slide-plate > img,
.wb-room.wb-photo-viewer .wb-slide-plate > video {
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; border: 0; background: #080807;
}
.wb-photo-topbar {
  min-height: 62px; box-sizing: border-box; padding-bottom: 16px !important;
  background: linear-gradient(rgba(0,0,0,0.7), transparent);
}
/* Long chapter names wrap beside the controls, including in the slideshow. */
.wb-room-topbar { align-items: flex-start !important; gap: 16px; }
.wb-room-topbar > :first-child { flex: 1; flex-wrap: wrap; gap: 4px 10px !important; }
.wb-room-topbar > :last-child { flex-shrink: 0; }
.wb-room-topbar .wb-display { min-width: 0; max-width: 100%; line-height: 1.15; overflow-wrap: anywhere; }
.wb-room-topbar > :first-child > .wb-eyebrow { white-space: normal !important; }
.wb-photo-details-toggle {
  display: grid; place-items: center; flex-shrink: 0;
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(201,169,97,0.6); background: rgba(15,12,9,0.6);
  color: var(--gold-soft); font: italic 18px Georgia, serif; cursor: pointer;
}
.wb-photo-controls { padding: 8px 16px; border-radius: 32px; background: rgba(8,8,7,0.72); }
.wb-photo-details { box-sizing: border-box; border-radius: 8px; background: rgba(8,8,7,0.94); }
.wb-photo-fullscreen-status {
  position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%);
  z-index: 4; padding: 10px 16px; background: rgba(8,8,7,0.94); color: var(--gold-soft);
}
@media (max-width: 820px) {
  .wb-room-topbar { padding: 12px 16px 16px !important; gap: 12px; }
  .wb-room-topbar > :first-child > .wb-eyebrow { display: none; }
  .wb-photo-controls { gap: 10px !important; padding: 6px 12px; }
  .wb-photo-controls > .wb-eyebrow { margin-left: 0 !important; letter-spacing: 0.12em !important; }
}

/* ---- The photographic ground -------------------------------
   Six delayed blurred prints ringing the viewport, a vignette drawn
   over them. Fixed, so content scrolls across it and changing
   screen drifts the ground rather than cutting it.
   ------------------------------------------------------------ */
.wb-ground {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.wb-ground-slot {
  position: absolute;
  transition: opacity 900ms ease,
              left 1100ms var(--ease-page),
              top 1100ms var(--ease-page);
}
.wb-ground-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 68% 64% at 50% 42%,
    rgba(var(--wb-scrim), 0.40) 0%,
    rgba(var(--wb-scrim), 0.76) 46%,
    rgba(var(--wb-scrim), 0.92) 100%);
}

/* ---- Hairlines ---------------------------------------------- */
.wb-rule-full { height: 1px; background: var(--wb-rule-3); }
.wb-rule-fade {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wb-rule-search), transparent);
}

/* ---- Outlined buttons (gold as stroke, never as fill) -------- */
.wb-stroke {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  background: none;
  color: var(--wb-display);
  border: 1px solid var(--wb-rule-1);
  cursor: pointer;
  white-space: nowrap;
  transition: color 220ms var(--ease-soft),
              border-color 220ms var(--ease-soft),
              background 220ms var(--ease-soft);
}
.wb-stroke--accent { color: var(--wb-accent); border: 1px solid var(--wb-accent); }
.wb-stroke--accent:hover { background: var(--wb-fill); }
.wb-stroke--muted { color: var(--wb-meta); border: 1px solid var(--wb-rule-1); }
.wb-stroke--muted:hover { color: var(--fg); border-color: var(--wb-accent); }

/* ---- Small interactive text --------------------------------- */
.wb-link { transition: color 200ms var(--ease-soft); }
.wb-link:hover { color: var(--wb-accent-hover); }

.wb-more-chip {
  border: 1px dashed var(--wb-rule-search);
  color: var(--wb-meta);
  transition: color 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
}
.wb-more-chip:hover { border-color: var(--wb-accent); color: var(--fg); }

/* ---- The atlas ----------------------------------------------
   The map is a printed plate, in a mat, like every other photograph
   in this book. Two inks on that paper: sepia draws the land, crimson
   draws the book. Nothing on the plate uses both, so the base map and
   the journeys can never be mistaken for one another.

   The whole plate lives in one transformed plane. Marks inside it are
   counter-scaled by the same zoom, so a pin is 18px at every register;
   strokes carry non-scaling-stroke (which cancels the viewBox) and are
   divided by the zoom (which cancels the transform), so a hairline is
   a hairline at k 1 and at k 13 alike.
   ------------------------------------------------------------ */
@property --k  { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --tx { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --ty { syntax: "<percentage>"; inherits: true; initial-value: 0%; }

:root {
  --pl-paper: #e9e0cf;
  --pl-sea: #bfc6b6;
  --pl-ink: #786347;               /* the hand that draws the land */
  --pl-red: #7d2e2e;               /* the hand that draws the book */
  --pl-red-hi: #a04545;
  --pl-city: #3f352b;
  --pl-river: #788b88;
  --pl-card: #f7edda;
}
/* On cream pages the plate needs a touch more sea to read as an object. */
[data-theme="vellum"] { --pl-sea: #bcc2ae; }

.wb-chart {
  position: relative;
  width: 100%;
  aspect-ratio: 118 / 70.12;       /* the projection's own ratio: never stretched */
  overflow: hidden;
  background: var(--pl-sea);
}
/* The same paper and fine ink as the book's prints. Both overlays stay at
   viewport size: the grain never enlarges as the reader zooms the geography. */
.wb-chart::before {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.67' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%238b734e' filter='url(%23paper)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.wb-chart::after {
  content:""; position:absolute; inset:6px; z-index:35; pointer-events:none;
  border:1px solid #80654055;
  box-shadow:inset 0 0 28px #6f4b230e;
}
.wb-plane {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  /* No will-change here, and no containment. The plane is inset on the chart
     and then scaled by --k, so promoting it asks the compositor to rasterise
     a texture of 934 x 624 x k — a hundred and thirty thousand pixels across
     at a chapter's zoom, eleven billion in all. It cannot, so it rasterises
     coarse and stretches, which turns the whole sheet to porridge. The
     browser's own tiled painting handles this correctly; leave it alone. */
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .wb-plane { transition-duration: 1ms; }
}
.wb-basemap, .wb-thema, .wb-photo-dots, .wb-detail, .wb-relief-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.wb-relief-sheet { pointer-events:none; }
.wb-regional { --k:1; pointer-events:none; }
.wb-map-engine { position:absolute;inset:0;pointer-events:none; }
.wb-map-engine .maplibregl-canvas { position:absolute;left:0;top:0; }
.wb-map-engine .maplibregl-canvas-container { position:absolute;inset:0; }
.wb-map-unavailable { position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:40;background:var(--pl-card);color:var(--pl-ink);padding:8px 12px;font:12px/1.4 var(--font-atlas);border:1px solid #b7a282; }
.wb-map-unavailable button { color:inherit; }
.wb-cap-m a { color:inherit;text-decoration:none; }
.wb-cap-m a:hover { text-decoration:underline; }
.wb-map-credit { position:absolute;bottom:2px;right:5px;z-index:36;max-width:75%;padding:1px 3px;background:#e9e0cfe6;color:#786347;font:8px/1.3 Georgia,serif; }
.wb-map-credit a { color:inherit;text-decoration:none; }
.bm-regional-sea { fill:var(--pl-sea); }
.wb-regional-wash { opacity:.95; }
.wb-regional-contours path { fill:none; stroke:#796d50; stroke-width:.55px; stroke-opacity:.16; stroke-linejoin:round; stroke-linecap:round; }
.wb-regional-contours path.is-major { stroke-width:.75px; stroke-opacity:.23; }
.wb-regional-road path { fill:none; stroke:var(--pl-ink); stroke-width:.65px; stroke-opacity:.25; stroke-linejoin:round; stroke-linecap:round; }
.wb-regional-road.road-0 path { stroke-width:.95px; stroke-opacity:.34; }
.wb-relief-overview { opacity:.22; }
.wb-contour-minor,.wb-contour-major { fill:none;stroke:var(--pl-ink);stroke-linejoin:round;stroke-linecap:round; }
.wb-contour-minor { stroke-width:.55px;stroke-opacity:.21; }
.wb-contour-major { stroke-width:.8px;stroke-opacity:.30; }
/* vector-effect cancels the SVG viewBox scale, but the HTML .wb-plane is
   transformed outside that SVG viewport. Compensate for its zoom below too:
   a static 1px stroke otherwise becomes an 88px stripe at a chapter's zoom.
   Keep this in sync with the CSS camera animation, including its duration. */
.wb-chart path, .wb-chart ellipse, .wb-chart line { vector-effect: non-scaling-stroke; }

/* the land */
.bm-sea { fill: var(--pl-sea); }
.bm-land path { fill: var(--pl-paper); }
.bm-coast path {
  fill: none;
  stroke: var(--pl-ink);
  stroke-opacity: 0.72;
  stroke-width: calc(0.9px / var(--k));
  stroke-linejoin: round;
}
/* Three soft strokes beneath the fill; only their seaward half survives,
   which is what gives the water its old-chart edge. */
.bm-echo path { fill: none; stroke: var(--pl-ink); stroke-linejoin: round; }
.bm-echo.e1 path { stroke-opacity: 0.10; stroke-width: calc(3px / var(--k)); }
.bm-echo.e2 path { stroke-opacity: 0.06; stroke-width: calc(7px / var(--k)); }
.bm-echo.e3 path { stroke-opacity: 0.04; stroke-width: calc(13px / var(--k)); }
.bm-grat path {
  fill: none;
  stroke: var(--pl-ink);
  stroke-opacity: 0.16;
  stroke-width: calc(0.6px / var(--k));
  stroke-dasharray: calc(3px / var(--k)) calc(5px / var(--k));
}
.bm-relief path {
  fill: none;
  stroke: var(--pl-ink);
  stroke-opacity: 0.3;
  stroke-width: calc(0.85px / var(--k));
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Every degree, for the registers where five is one lonely line across an
   otherwise empty sheet. */
.bm-grat1 path {
  fill: none;
  stroke: var(--pl-ink);
  stroke-opacity: 0;
  stroke-width: calc(0.5px / var(--k));
  stroke-dasharray: calc(2px / var(--k)) calc(6px / var(--k));
}
.bm-lake path {
  fill: var(--pl-sea);
  stroke: var(--pl-river);
  stroke-opacity: 0.45;
  stroke-width: calc(0.6px / var(--k));
  stroke-linejoin: round;
}
/* Dash-dot, as a border has been drawn since the plates were copper. */
.bm-border path {
  fill: none;
  stroke: var(--pl-ink);
  stroke-opacity: 0.4;
  stroke-width: calc(0.9px / var(--k));
  stroke-dasharray: calc(5px / var(--k)) calc(2.5px / var(--k)) calc(1px / var(--k)) calc(2.5px / var(--k));
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bm-river path {
  fill: none;
  stroke: var(--pl-river);
  stroke-opacity: 0.55;
  stroke-width: calc(0.9px / var(--k));
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wb-chart[data-detail="near"] .bm-relief,
.wb-chart[data-detail="near"] .bm-grat { display: none; }
.wb-chart[data-detail="near"] .bm-grat1 path { stroke-opacity: 0.14; }
.wb-chart[data-detail="near"] .bm-coast path { stroke-opacity: 0.42; }
.wb-chart[data-detail="near"] .bm-echo.e1 path { stroke-opacity: 0.06; }
.wb-chart[data-detail="near"] .bm-echo.e2 path { stroke-opacity: 0.04; }
.wb-chart[data-detail="near"] .bm-echo.e3 path { stroke-opacity: 0.02; }

/* the book's own marks */
.wb-chart .ld {
  stroke: var(--pl-red);
  stroke-width: calc(1px / var(--k));
  stroke-dasharray: calc(2px / var(--k)) calc(4px / var(--k));
  stroke-opacity: 0.3;
  transition: stroke-opacity 300ms var(--ease-page);
}
.wb-chart .ld.is-hot { stroke-opacity: 0.65; }
.wb-chart .rg {
  fill: none;
  stroke: var(--pl-red);
  stroke-opacity: 0.32;
  stroke-width: calc(1px / var(--k));
  stroke-dasharray: calc(2px / var(--k)) calc(5px / var(--k));
  transition: stroke-opacity 300ms var(--ease-page);
}
.wb-chart .rg.is-sel { stroke-opacity: 0.62; stroke-width: calc(1.4px / var(--k)); }
.wb-chart .rg.is-hot { stroke-opacity: 0.6; }
.wb-chart[data-reg="region"] .rg, .wb-chart[data-reg="chapter"] .rg,
.wb-chart[data-reg="region"] .ld, .wb-chart[data-reg="chapter"] .ld { stroke-opacity: 0; }
.wb-chart .th {
  fill: none;
  stroke: var(--pl-red);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: calc(1px / var(--k));
  stroke-dasharray: calc(3px / var(--k)) calc(4px / var(--k));
  stroke-opacity: 0.14;
  transition: stroke-opacity 300ms var(--ease-page);
}
.wb-chart .th.is-on { stroke-opacity: 0.74; stroke-width: calc(1.5px / var(--k)); }
.wb-chart .th.is-hot { stroke-opacity: 0.54; }
.wb-chart .dt {
  fill: var(--pl-red);
  fill-opacity: 0.34;
  stroke: none;
  transition: fill-opacity 300ms var(--ease-page);
}
.wb-chart .dt.is-on { fill-opacity: 0.84; }
.wb-chart .dt.is-hot { fill-opacity: 0.74; }

/* ---- the relief --------------------------------------------
   Hillshade computed from open elevation data and laid under the
   drawn ground. It multiplies rather than covers, so the paper
   still shows through and the shading reads as tone on the sheet
   rather than a photograph pasted onto it. */
.wb-relief {
  position: absolute;
  display: block;
  mix-blend-mode: multiply;
  opacity: 0.42;
  /* the shade is grey; the plate is warm paper, and it should agree */
  filter: sepia(0.45) saturate(0.7) brightness(1.06) contrast(0.92);
  pointer-events: none;
  /* The shade covers a box, and a box has corners. Feathering all four edges
     lets it end the way a wash ends rather than the way a photograph does. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ---- the chapter-detail layer ------------------------------
   Real coastline, water, rivers and the roads a journey was
   made on, for the ground the book actually stands in. Drawn in
   the plate's own two inks so it reads as more of the same
   engraving rather than a map pasted underneath. */
/* The plane is scaled by --k, so every width here is divided by it: a
   stroke that ignores that lands 32 pixels wide at a chapter's zoom. */
.wb-detail path { vector-effect: non-scaling-stroke; }
.wb-detail .dt-lake path {
  fill: var(--pl-sea);
  fill-opacity: 0.9;
  stroke: var(--pl-river);
  stroke-width: calc(0.9px / var(--k));
  stroke-opacity: 0.55;
}
.wb-detail .dt-water path {
  fill: var(--pl-sea);
  fill-opacity: 0.85;
  stroke: var(--pl-river);
  stroke-width: calc(0.7px / var(--k));
  stroke-opacity: 0.55;
}
.wb-detail .dt-river path {
  fill: none;
  stroke: var(--pl-river);
  stroke-width: calc(0.9px / var(--k));
  stroke-opacity: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Five weights. A pass road and the lane behind a hotel are both highway=*,
   and drawing them alike is exactly what turns a chart into a street map. */
.wb-detail .dt-road path {
  fill: none;
  stroke: var(--pl-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wb-detail .dt-road-0 path { stroke-width: calc(2.2px / var(--k)); stroke-opacity: 0.72; }
.wb-detail .dt-road-1 path { stroke-width: calc(1.6px / var(--k)); stroke-opacity: 0.62; }
.wb-detail .dt-road-2 path { stroke-width: calc(1.1px / var(--k)); stroke-opacity: 0.52; }
.wb-detail .dt-road-3 path { stroke-width: calc(0.85px / var(--k)); stroke-opacity: 0.42; }
.wb-detail .dt-road-4 path { stroke-width: calc(0.7px / var(--k)); stroke-opacity: 0.32; }

/* Three washes, not forty: what grows, what is built on, what is bare. Laid
   under everything else and kept faint, because they are the ground the
   photographs sit on rather than a thing to be read in their own right. */
.wb-detail .dt-green path {
  fill: #a9af94;
  fill-opacity: 0.38;
  stroke: none;
}
.wb-detail .dt-built path {
  fill: #c2a98d;
  fill-opacity: 0.3;
  stroke: none;
}
.wb-detail .dt-bare path {
  fill: #ddcda3;
  fill-opacity: 0.4;
  stroke: none;
}
.wb-detail .dt-coast path {
  fill: none;
  stroke: var(--pl-ink);
  stroke-width: calc(1.15px / var(--k));
  stroke-opacity: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The plate's own coastline is 62 km between points, so where the real
   shore is drawn the coarse one has to stand down — two shorelines a
   county apart is worse than either alone. The land wash goes with it:
   its edge *is* the coarse coastline. */
.wb-chart:is([data-ground="real"], [data-ground="overview"]) { background: var(--pl-paper); }
.wb-chart:is([data-ground="real"], [data-ground="overview"]) .bm-sea { fill: var(--pl-paper); }
.wb-chart[data-ground="real"] .bm-land path { fill: var(--pl-paper); }
.wb-chart[data-ground="real"] .bm-coast path { stroke-opacity: 0.06; }
/* Where only the lakes are drawn they are the whole point, so they keep
   their own water rather than being washed to paper with the rest. */
.wb-basemap-lakes .bm-lake path { fill: var(--pl-sea); fill-opacity: 0.85;
  stroke: var(--pl-river); stroke-width: calc(1px / var(--k)); stroke-opacity: 0.5; }
.wb-chart[data-ground="real"] .bm-echo { display: none; }
/* Villages, which only exist at this register. */
.wb-chart[data-ground="real"] .lbl.l-town:not(.l-near) { display: none; }
.wb-chart .l-near span { opacity: 0.72; }

/* ---- marks on the plate ---- */
/* A size container, so a mark can say where it stands in the plane's own
   units (cqw, cqh) — see .wb-marks > * below. */
.wb-marks { position: absolute; inset: 0; container-type: size; }
.wb-marks button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
/* Where a mark stands is carried in `translate`, not in left/top. A scaled
   element is painted at its layout offset snapped to a whole plane pixel,
   while getBoundingClientRect keeps the fraction — and at a chapter's zoom
   one plane pixel is over three hundred screen pixels. So every pin, print
   and name was drawn up to 160px from the place it marks, off the thread it
   belongs to, and on top of names the thinning had measured as well clear
   of it. A transform keeps the fraction. */
.wb-marks > * {
  position: absolute;
  left: 0;
  top: 0;
  translate: calc(var(--at-x) * 1cqw) calc(var(--at-y) * 1cqh);
  transform-origin: 50% 50%;
}
.wb-chart .lbl, .wb-chart .cart, .wb-chart .cl {
  transform: translate(-50%, -50%) scale(calc(1 / var(--k)));
}
.wb-chart .pin, .wb-chart .pl {
  transform: translate(-50%, -100%) scale(calc(1 / var(--k)));
  transform-origin: 50% 100%;
}

/* Place names, in three tiers — a name appears at the scale where it is
   worth reading, and not before. Which tier is on screen is decided in
   the view; this only says how each one is set. */
.wb-chart .lbl {
  pointer-events: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wb-chart .l-sea span {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs, 13px);
  letter-spacing: 0.22em;
  color: var(--pl-ink);
  opacity: var(--op, 0.3);
}
.wb-chart .l-land span {
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pl-ink);
  opacity: 0.55;
}
.wb-chart .l-range span {
  font-size: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-style: italic;
  color: var(--pl-ink);
  opacity: 0.5;
}
.wb-chart .l-city span, .wb-chart .l-town span {
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pl-city);
  opacity: 0.8;
}
.wb-chart .l-town span { font-size: 8px; letter-spacing: 0.14em; opacity: 0.6; }
.wb-chart .pip {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--pl-city);
  opacity: 0.7;
  flex: none;
}
.wb-chart .l-town .pip { width: 2.5px; height: 2.5px; opacity: 0.5; }
.wb-chart[data-reg="region"] .l-land span,
.wb-chart[data-reg="chapter"] .l-land span { opacity: 0.32; }
.wb-chart[data-reg="chapter"] .l-sea span { opacity: 0.16; }

/* the region cartouche — the whole-book view names places, not chapters */
.wb-chart .cart {
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-sizing: border-box;
  width: var(--cart-w, 164px);
  height: var(--cart-h, 68px);
  min-width: 0;
  justify-content: center;
  padding: 5px 10px;
  background: var(--pl-card);
  outline: 1px solid rgba(139, 111, 71, 0.5);
  outline-offset: 2px;
  box-shadow: 0 4px 16px -5px rgba(60, 40, 20, 0.45);
  cursor: pointer;
  transition: transform 300ms var(--ease-page);
}
.wb-chart .cart.is-hot { transform: translate(-50%, -50%) scale(calc(1 / var(--k))) translateY(-2px); }
.wb-chart .cart-rule { display: block; width: 34px; height: 1px; background: rgba(139, 111, 71, 0.45); }
.wb-chart .cart-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.05;
  color: #3b2f22;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wb-chart .cart-meta {
  font-size: 7px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b6f47;
  font-variant-numeric: tabular-nums;
  margin-bottom: 3px;
  white-space: nowrap;
}
.wb-chart .cart.is-compact { padding: 4px; gap: 0; }
.wb-chart .cart.is-compact .cart-name { font-size: 16px; margin-top: 0; }
.wb-chart .cart.is-tiny .cart-name { font-size: 14px; }
.wb-chart .cart.is-compact .cart-rule,
.wb-chart .cart.is-compact .cart-meta { display: none; }
.wb-chart .cart.is-compact .cart-meta { margin-bottom: 0; }

/* the chapter pin, and the places inside a chapter */
.wb-chart .pin { z-index: 5; cursor: pointer; }
.wb-chart .pl { z-index: 7; cursor: pointer; }
.wb-chart .pin:hover, .wb-chart .pl:hover, .wb-chart .pl.is-near { z-index: 32; }
.wb-chart .pin-g, .wb-chart .pl-g {
  display: block;
  transform-origin: 50% 100%;
  transform: scale(calc(var(--pw, 1) * var(--ph, 1)));
  transition: transform 260ms var(--ease-page);
}
.wb-chart .pin-g { width: 18px; height: 25px; }
.wb-chart .pl-g { width: 13px; height: 18px; }
.wb-chart .pin-g svg, .wb-chart .pl-g svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(80, 40, 30, 0.35));
}
.wb-chart .pin-b { fill: var(--pl-red); stroke: var(--pl-card); stroke-width: 1.3; }
.wb-chart .pin-e { fill: var(--pl-card); }
.wb-chart .pl-b { fill: var(--pl-red); fill-opacity: 0.82; stroke: var(--pl-card); stroke-width: 1.5; }
.wb-chart .pin.is-sel .pin-b, .wb-chart .pin.is-hot .pin-b { fill: var(--pl-red-hi); }
.wb-chart .pin.is-sel .pin-g { --ph: 1.24; }
.wb-chart .pin.is-hot .pin-g { --ph: 1.16; }
.wb-chart .pl:hover .pl-g, .wb-chart .pl.is-near .pl-g { --ph: 1.2; }
.wb-chart .pl:hover .pl-b, .wb-chart .pl.is-near .pl-b { fill: var(--pl-red-hi); fill-opacity: 1; }

.wb-chart .pin-l, .wb-chart .cl-l, .wb-chart .pl-c {
  position: absolute;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 260ms var(--ease-page);
}
.wb-chart .pin-l b, .wb-chart .cl-l b, .wb-chart .pl-c b {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.15;
  color: #3b2f22;
}
.wb-chart .pin-l i, .wb-chart .cl-l i, .wb-chart .pl-c i {
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b6f47;
  font-variant-numeric: tabular-nums;
}
/* A name hangs on whichever side of its mark has the most room; the view
   works out which that is, because on a plate this crowded four chapters
   within 50px cannot all put their name above them. */
.wb-chart [data-lp="up"] > .pin-l, .wb-chart [data-lp="up"] > .cl-l {
  left: 50%; bottom: 100%; transform: translate(-50%, -5px); align-items: center;
}
.wb-chart [data-lp="down"] > .pin-l, .wb-chart [data-lp="down"] > .cl-l {
  left: 50%; top: 100%; transform: translate(-50%, 5px); align-items: center;
}
.wb-chart [data-lp="left"] > .pin-l, .wb-chart [data-lp="left"] > .cl-l {
  right: 100%; top: 40%; transform: translate(-8px, -50%); align-items: flex-end;
}
.wb-chart [data-lp="right"] > .pin-l, .wb-chart [data-lp="right"] > .cl-l {
  left: 100%; top: 40%; transform: translate(8px, -50%); align-items: flex-start;
}
.wb-chart .pl-c {
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -6px);
  align-items: center;
  gap: 1px;
  padding: 5px 11px;
  opacity: 0;
  background: var(--pl-card);
  outline: 1px solid rgba(139, 111, 71, 0.55);
  outline-offset: 2px;
  box-shadow: 0 4px 12px -4px rgba(80, 40, 30, 0.4);
}
.wb-chart .pl-c b { font-size: 15px; }
.wb-chart .pl:hover .pl-c, .wb-chart .pl.is-near .pl-c { opacity: 1; }

/* A plate read on the map: the same matted print as everywhere else in the
   book, small enough to sit on the plate without covering it, with the way
   through to the full-size photograph under it. It normally hangs above or
   below its pin; on a short map it moves beside it so the entire card remains
   visible. Each transform anchors the card to the pin while counter-scaling it
   to a constant reading size. */
.wb-spot {
  z-index: 60;
  width: 196px;
  padding: 9px;
  background: var(--pl-card);
  outline: 1px solid rgba(139, 111, 71, 0.55);
  outline-offset: 2px;
  box-shadow: 0 12px 34px -8px rgba(60, 34, 20, 0.55);
  cursor: default;
  transform-origin: 50% 100%;
  /* The parent plane magnifies translations as well as the map. Divide the
     screen-space clearance by that zoom so the card stays beside its pin
     instead of being flung out of the clipped plate at close registers. */
  transform: translate(-50%, calc(-100% - (30px / var(--k)))) scale(calc(1 / var(--k)));
}
.wb-spot[data-pos="down"] {
  transform-origin: 50% 0;
  transform: translate(-50%, calc(8px / var(--k))) scale(calc(1 / var(--k)));
}
.wb-spot[data-pos="left"] {
  transform-origin: 100% 50%;
  transform: translate(calc(-100% - (18px / var(--k))), -50%) scale(calc(1 / var(--k)));
}
.wb-spot[data-pos="right"] {
  transform-origin: 0 50%;
  transform: translate(calc(18px / var(--k)), -50%) scale(calc(1 / var(--k)));
}

.wb-chart .wb-spot-x {
  position: absolute;
  top: -2px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: #a4917a;
  transition: color 180ms var(--ease-soft);
}
.wb-chart .wb-spot-x:hover { color: var(--pl-red); }
.wb-spot-plate {
  display: block;
  position: relative;
  /* Bounded on both axes and keeping its own ratio, so the mat shrinks to the
     photograph rather than the photograph being cropped to the mat — the same
     rule the plate on the easel follows. */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 6px solid #fff;
  outline: 1px solid rgba(32, 31, 29, 0.16);
  background: none;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(60, 34, 20, 0.5);
}
.wb-spot-print {
  display: block;
  height: 150px;
  width: auto;
  max-width: 178px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #d7d1c8;
  filter: sepia(0.2) saturate(0.84) contrast(1.03);
}
.wb-spot-film {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 5px;
  background: rgba(11, 9, 8, 0.72);
  color: #f2e8d4;
  font-family: var(--font-body);
  font-size: 7.5px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}
.wb-spot-body { padding: 8px 2px 0; }
.wb-spot-t {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.1;
  color: #3b2f22;
}
.wb-spot-t.is-coords { font-size: 15px; color: #7c6749; font-variant-numeric: tabular-nums; }
.wb-spot-m, .wb-spot-c {
  font-family: var(--font-body);
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b6f47;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.wb-spot-c { color: #a4917a; letter-spacing: 0.14em; }
.wb-spot-strip { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.wb-spot-th {
  width: 26px;
  height: 20px;
  flex: none;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-color: #d7d1c8;
  outline: 1px solid rgba(32, 31, 29, 0.18);
  filter: sepia(0.2) saturate(0.8);
  opacity: 0.62;
  transition: opacity 180ms var(--ease-soft);
}
.wb-spot-th:hover { opacity: 0.9; }
.wb-spot-th.is-sel { opacity: 1; outline: 1px solid var(--pl-red); outline-offset: 1px; }
.wb-spot-more {
  font-family: var(--font-body);
  font-size: 7.5px;
  letter-spacing: 0.14em;
  color: #a4917a;
  font-variant-numeric: tabular-nums;
}
.wb-chart .wb-spot-go {
  display: flex;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 9px;
  padding: 7px 0 1px;
  border: 0;
  border-top: 1px solid rgba(139, 111, 71, 0.3);
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pl-red);
  transition: color 180ms var(--ease-soft);
}
.wb-chart .wb-spot-go span { transition: transform 220ms var(--ease-page); }
.wb-chart .wb-spot-go:hover { color: var(--pl-red-hi); }
.wb-chart .wb-spot-go:hover span { transform: translateX(3px); }
/* The little hover name would only sit on top of the frame it opened. */
.wb-chart .pl.is-open .pl-c { opacity: 0; }
.wb-chart .pl.is-open .pl-b { fill: var(--pl-red-hi); fill-opacity: 1; }
.wb-chart .pl.is-open .pl-g { --ph: 1.2; }

/* the medallion — the answer to three chapters on one pixel */
.wb-chart .cl { z-index: 6; }
.wb-chart .cl.is-open { z-index: 40; }
.wb-chart .cl-d {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pl-card);
  outline: 1px solid var(--pl-red);
  outline-offset: -1px;
  box-shadow: 0 3px 10px -3px rgba(80, 40, 30, 0.45);
  cursor: pointer;
  transition: transform 260ms var(--ease-page);
}
.wb-chart .cl.is-hot .cl-d { transform: scale(1.08); }
.wb-chart .cl-n {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  color: var(--pl-red);
  font-variant-numeric: tabular-nums;
}
.wb-chart .cl-r {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px dashed rgba(125, 46, 46, 0.45);
  opacity: 0.5;
  transition: opacity 300ms var(--ease-page);
}
.wb-chart .cl.is-hot .cl-r { opacity: 1; }
.wb-chart .cl.is-open .cl-l { opacity: 0; }
.wb-chart[data-reg="chapter"] .pin-l, .wb-chart[data-reg="chapter"] .cl-l { opacity: 0; }
.wb-chart[data-reg="chapter"] .pin:hover .pin-l,
.wb-chart[data-reg="chapter"] .cl:hover .cl-l { opacity: 1; }

/* the medallion opened out */
.wb-chart .fan {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease-page);
}
.wb-chart .cl.is-open .fan { opacity: 1; pointer-events: auto; }
.wb-chart .fan-item { position: absolute; left: 0; top: 0; }
.wb-chart .fan-lead {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--len);
  height: 1px;
  background: rgba(125, 46, 46, 0.55);
  transform-origin: 0 50%;
  rotate: var(--ang);
  transform: scaleX(0);
  transition: transform 340ms var(--ease-page);
}
.wb-chart .cl.is-open .fan-lead { transform: scaleX(1); }
.wb-chart .fan-card {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  transform: translate(-50%, -50%) scale(0.86);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 13px;
  white-space: nowrap;
  cursor: pointer;
  background: var(--pl-card);
  outline: 1px solid rgba(139, 111, 71, 0.55);
  outline-offset: 2px;
  box-shadow: 0 4px 12px -4px rgba(80, 40, 30, 0.4);
  transition: transform 340ms var(--ease-page), background 200ms var(--ease-soft);
}
.wb-chart .cl.is-open .fan-card { transform: translate(-50%, -50%) scale(1); }
.wb-chart .fan-card:hover { background: #fff; }
.wb-chart .fan-t { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 1.15; color: #3b2f22; }
.wb-chart .fan-m {
  font-size: 7.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b6f47;
  font-variant-numeric: tabular-nums;
}

/* ---- 6a · plates tipped onto the sheet ---------------------
   A print in its mat, laid on the chart and joined to the
   coordinate it was made at by a hairline leader. The anchor is
   a zero-size point on the plane, counter-scaled like every
   other mark — so the offsets the view reckons in screen pixels
   are still screen pixels at every zoom, and the whole layer
   slides and settles with the sheet rather than beside it. */
.wb-chart .sh {
  width: 0;
  height: 0;
  z-index: 20;
  transform: scale(calc(1 / var(--k)));
}
.wb-chart .sh.is-near { z-index: 46; }
.wb-chart .sh-lead {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--len);
  height: 1px;
  background: rgba(125, 46, 46, 0.45);
  transform-origin: 0 50%;
  rotate: var(--ang);
  pointer-events: none;
  transition: background 200ms var(--ease-soft);
}
.wb-chart .sh.is-near .sh-lead { background: var(--pl-red); }
.wb-chart .sh-plate {
  position: absolute;
  left: var(--dx);
  top: var(--dy);
  transform: translate(-50%, -50%);
  padding: 0;
  border: 4px solid var(--pl-card);
  background: var(--pl-card);
  outline: 1px solid rgba(139, 111, 71, 0.5);
  box-shadow: 0 10px 24px -8px rgba(60, 34, 20, 0.55);
  cursor: pointer;
  text-align: left;
  transition: outline-color 200ms var(--ease-soft), box-shadow 220ms var(--ease-soft);
}
.wb-chart .sh-plate:hover, .wb-chart .sh.is-near .sh-plate {
  outline-color: var(--pl-red);
  box-shadow: 0 16px 32px -8px rgba(60, 34, 20, 0.72);
}
.wb-chart .sh-print {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: #d7d1c8;
  filter: sepia(0.2) saturate(0.84) contrast(1.03);
}
/* Fixed, because the view has to know the whole box to keep two
   prints off one another before either is drawn. */
.wb-chart .sh-cap {
  display: block;
  height: 27px;
  padding: 4px 1px 0;
  overflow: hidden;
}
.wb-chart .sh-cap-h { display: flex; align-items: baseline; gap: 6px; }
.wb-chart .sh-cap b {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.05;
  color: #3b2f22;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-chart .sh-cap em {
  flex: none;
  font-style: normal;
  font-size: 7px;
  letter-spacing: 0.14em;
  color: #8b6f47;
  font-variant-numeric: tabular-nums;
}
.wb-chart .sh-cap i {
  display: block;
  font-style: normal;
  font-size: 7px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b6f47;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* With photographs on the chart the pins are no longer the loudest
   thing on it, and they should not try to be. */
.wb-chart[data-sheet="1"] .pl-b { fill-opacity: 0.62; }

/* ---- the plate's furniture ---- */
.wb-chrome { position: absolute; inset: 0; pointer-events: none; }
.wb-chrome .zoom { pointer-events: auto; }
.wb-chart .key {
  position: absolute;
  left: 20px;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 13px;
  background: color-mix(in srgb, var(--pl-paper) 91%, transparent);
  outline: 1px solid rgba(139, 111, 71, 0.35);
}
.wb-chart .key-r {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a6244;
  white-space: nowrap;
}
.wb-chart .key-book { box-sizing: border-box; width: 190px; height: 36px; justify-content: center; }
.wb-chart[data-reg="book"][data-compact="1"] .rose,
.wb-chart[data-reg="book"][data-compact="1"] .key-book { display: none; }
.wb-chart .key-s { width: 16px; flex: none; display: grid; place-items: center; }
.wb-chart .k-pin { width: 9px; height: 12px; }
.wb-chart .k-pl { width: 7px; height: 10px; }
.wb-chart .k-med { width: 12px; height: 12px; }
.wb-chart .k-dot { width: 7px; height: 7px; }
.wb-chart .k-line { width: 16px; height: 4px; }
.wb-chart .k-fill { fill: var(--pl-red); stroke: none; }
.wb-chart .k-soft { fill: var(--pl-red); fill-opacity: 0.7; stroke: none; }
.wb-chart .k-ring { fill: none; stroke: var(--pl-red); stroke-width: 1; }
.wb-chart .k-dash { fill: none; stroke: var(--pl-red); stroke-width: 1.2; stroke-dasharray: 3 4; stroke-opacity: 0.75; }

.wb-chart .rose { position: absolute; right: 20px; top: 18px; width: 62px; height: 62px; opacity: 0.6; }
.wb-chart .rose svg { display: block; width: 62px; height: 62px; }
.wb-chart .ro-o { fill: none; stroke: var(--pl-ink); stroke-width: 0.8; stroke-opacity: 0.55; }
.wb-chart .ro-d { fill: none; stroke: var(--pl-ink); stroke-width: 0.5; stroke-opacity: 0.35; stroke-dasharray: 2 3; }
.wb-chart .ro-x { fill: none; stroke: var(--pl-ink); stroke-width: 0.5; stroke-opacity: 0.45; }
.wb-chart .ro-s { fill: var(--pl-ink); fill-opacity: 0.1; stroke: var(--pl-ink); stroke-width: 0.8; stroke-opacity: 0.75; }
.wb-chart .ro-n { fill: var(--pl-red); fill-opacity: 0.85; stroke: none; }
.wb-chart .ro-t {
  fill: var(--pl-ink);
  fill-opacity: 0.9;
  text-anchor: middle;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 9px;
}

.wb-chart .scale { position: absolute; left: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 5px; }
.wb-chart .scale-b {
  height: 7px;
  border: 1px solid rgba(139, 111, 71, 0.75);
  border-top: 0;
  transition: width 320ms var(--ease-page);
  background: repeating-linear-gradient(90deg, rgba(139, 111, 71, 0.7) 0 25%, transparent 25% 50%);
}
.wb-chart .scale-t, .wb-chart .inset-l {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a6244;
  font-variant-numeric: tabular-nums;
}
.wb-chart .zoom {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  outline: 1px solid rgba(139, 111, 71, 0.5);
  background: var(--pl-card);
}
.wb-chart .zoom button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: #7a6244;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  transition: background 180ms var(--ease-soft);
}
.wb-chart .zoom button:hover { background: rgba(139, 111, 71, 0.14); }
.wb-chart .zoom button + button { border-top: 1px solid rgba(139, 111, 71, 0.3); }

/* 6a's own switch: photographs on the chart, or only pins. It sits
   with the scale bar, since it is a statement about how the sheet is
   drawn rather than about where it is. */
.wb-chart .sheet-sw { position: absolute; left: 20px; bottom: 52px; pointer-events: auto; }
.wb-chart .sheet-sw button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 5px;
  border: 0;
  outline: 1px solid rgba(139, 111, 71, 0.35);
  background: color-mix(in srgb, var(--pl-paper) 91%, transparent);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7a6244;
  transition: color 200ms var(--ease-soft), outline-color 200ms var(--ease-soft);
}
.wb-chart .sheet-sw button:hover { color: var(--pl-red); outline-color: rgba(125, 46, 46, 0.5); }
.wb-chart .sheet-sw .sw-b {
  width: 9px;
  height: 9px;
  flex: none;
  outline: 1px solid rgba(139, 111, 71, 0.75);
  transition: background 200ms var(--ease-soft);
}
.wb-chart .sheet-sw [aria-pressed="true"] .sw-b { background: var(--pl-red); }

/* The detail inset: a chapter shot from one balcony has no extent the plate
   can ever resolve, so it gets a plan of its own, at its own scale. */
.wb-chart .inset {
  position: absolute;
  right: 20px;
  top: 94px;
  width: 186px;
  padding: 10px;
  background: var(--pl-card);
  outline: 1px solid rgba(139, 111, 71, 0.55);
  outline-offset: 2px;
  box-shadow: 0 6px 20px -6px rgba(80, 40, 30, 0.4);
}
.wb-chart .inset-h {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 7.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b6f47;
  font-variant-numeric: tabular-nums;
}
.wb-chart .inset-h b { font-weight: 400; color: var(--pl-red); overflow: hidden; text-overflow: ellipsis; }
.wb-chart .inset-f {
  position: relative;
  aspect-ratio: 1;
  outline: 1px solid rgba(139, 111, 71, 0.28);
  background: color-mix(in srgb, var(--pl-sea) 50%, #fff);
}
.wb-chart .inset-f svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wb-chart .inset-th {
  fill: none;
  stroke: var(--pl-red);
  stroke-opacity: 0.55;
  stroke-width: 1.1;
  stroke-dasharray: 2.5 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wb-chart .inset-dt { fill: none; stroke: var(--pl-red); stroke-opacity: 0.85; stroke-width: 3.6; stroke-linecap: round; }
.wb-chart .inset-s { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.wb-chart .inset-bar { height: 5px; border: 1px solid rgba(139, 111, 71, 0.7); border-top: 0; }

/* ---- 6b · the gazetteer beside the plate -------------------
   The chapter's own places, in the order they were walked, set
   as an index rather than as a legend: a number, a name, when,
   and how many plates came from it. Hovering lights the mark on
   the sheet; the line itself takes the sheet there. */
.wb-gz { margin-bottom: 26px; }
.wb-gzr {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 0 10px;
  align-items: baseline;
  width: 100%;
  padding: 7px 2px;
  border: 0;
  border-bottom: 1px solid var(--wb-rule-4);
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 200ms var(--ease-soft);
}
.wb-gzr:hover, .wb-gzr.is-hot, .wb-gzr.is-sel { background: var(--wb-wash); }
.wb-gz-n {
  font-family: var(--font-body);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--wb-meta-dim);
  font-variant-numeric: tabular-nums;
}
.wb-gz-b { min-width: 0; }
.wb-gz-t {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.1;
  color: var(--wb-meta-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms var(--ease-soft);
}
.wb-gzr:hover .wb-gz-t, .wb-gzr.is-hot .wb-gz-t, .wb-gzr.is-sel .wb-gz-t { color: var(--wb-display); }
.wb-gz-d {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 7.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  font-variant-numeric: tabular-nums;
}
.wb-gz-c {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--wb-meta);
  font-variant-numeric: tabular-nums;
}
.wb-gz-note {
  margin: 13px 0 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.72;
  color: var(--wb-meta-dim);
  text-align: justify;
  text-wrap: pretty;
}

/* The caption under the mat, set the way a plate in a book is
   captioned beneath it — what is being shown on the left, and on
   the right the standing note about where the sheet came from. */
.wb-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
}
.wb-cap-t {
  min-width: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--wb-hand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-cap-m {
  flex: none;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
}

/* ---- the index beside the plate ---- */
.wb-crumb { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; min-height: 32px; }
.wb-crumb button, .wb-crumb b {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 400;
}
.wb-crumb button { border: 0; background: none; padding: 0; cursor: pointer; color: var(--wb-meta); transition: color 200ms var(--ease-soft); }
.wb-crumb button:hover { color: var(--wb-accent-hover); }
.wb-crumb b { color: var(--wb-accent); }
.wb-crumb .sep { color: var(--wb-meta-dim); font-size: 9px; }
.wb-crumb .cap {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--wb-hand);
}
.wb-crumb .cap i {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  margin-left: 14px;
  font-variant-numeric: tabular-nums;
}

.wb-at-all {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid var(--wb-rule-4);
  background: none;
  cursor: pointer;
  text-align: left;
  color: var(--wb-meta-bright);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.25;
  transition: color 200ms var(--ease-soft);
}
.wb-at-all:hover, .wb-at-all.is-sel { color: var(--wb-display); }
.wb-at-gl { width: 13px; height: 13px; flex: none; opacity: 0.8; }
.wb-at-gl circle, .wb-at-gl path { fill: none; stroke: currentColor; stroke-width: 0.9; }

.wb-ig { margin-top: 16px; }
.wb-igh {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 2px 7px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
div.wb-igh { cursor: default; }
.wb-igh-n {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wb-meta);
  white-space: nowrap;
  transition: color 200ms var(--ease-soft);
}
.wb-ig.is-sel .wb-igh-n { color: var(--wb-accent); }
.wb-igh:hover .wb-igh-n { color: var(--wb-accent-hover); }
.wb-igh-r { flex: 1; height: 1px; background: var(--wb-rule-3); }
.wb-igh-m {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.wb-ir {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid var(--wb-rule-4);
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 200ms var(--ease-soft);
}
.wb-ir:hover { background: var(--wb-wash); }
.wb-ir-d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--wb-swatch-off);
  transition: background 220ms var(--ease-soft), box-shadow 220ms var(--ease-soft);
}
.wb-ir.is-sel .wb-ir-d, .wb-ir.is-hot .wb-ir-d { background: var(--pl-red-hi); }
.wb-ir.is-sel .wb-ir-d { box-shadow: 0 0 0 3px rgba(160, 69, 69, 0.2); }
.wb-ir-t {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wb-meta-bright);
  transition: color 200ms var(--ease-soft);
}
.wb-ir.is-sel .wb-ir-t, .wb-ir.is-hot .wb-ir-t { color: var(--wb-display); }
.wb-ir-n {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Empty states are designed, not blank. */
.wb-ir.is-off { cursor: default; }
.wb-ir.is-off .wb-ir-d { background: none; box-shadow: inset 0 0 0 1px var(--wb-empty); }
.wb-ir.is-off .wb-ir-t { color: var(--wb-empty); }
.wb-ir.is-off .wb-ir-n {
  color: var(--wb-empty);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Narrow viewports --------------------------------------
   The two fixed-column layouts are the only things in the book
   that cannot simply reflow: the atlas index beside its map, and
   the timeline's date column beside its thread. Below 860px the
   index goes above the map, and the rail's gutter narrows rather
   than squeezing the plates.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .wb-atlas { grid-template-columns: 1fr !important; }
  .wb-atlas aside { order: -1; }
}

.wb-timeline { --rail: 96px; --rail-gap: 34px; }
@media (max-width: 620px) {
  .wb-timeline { --rail: 58px; --rail-gap: 22px; }
}

/* ---- The shelf and the ribbon -------------------------------
   Both are dragged sideways, and neither wants a scrollbar under
   it: the shelf has its rule, and the ribbon has the year-scroller
   below it, which says where you are far better than a bar does. */
.wb-shelf::-webkit-scrollbar,
.wb-ribbon-track::-webkit-scrollbar { width: 0; height: 0; }
.wb-shelf:active { cursor: grabbing; }

/* Two shallow chapter bands keep each full caption with its own print.
   Only the prints move to avoid collisions; the calendar dots stay fixed. */
.wb-ribbon { position: relative; padding-bottom: 12px; }
.wb-ribbon-track { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-top: 1px solid var(--wb-rule-3); }
.wb-ribbon-canvas, .wb-ribbon-band { position: relative; }
.wb-ribbon-axis { position: relative; height: 1px; background: var(--wb-rule-1); }
.wb-ribbon-tick { position: absolute; top: -2px; height: 5px; width: 1px; background: var(--wb-rule-3); }
.wb-ribbon-chapter { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wb-ribbon-photo { flex: none; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.wb-ribbon-photo > .wb-plate { width: 100%; box-sizing: border-box; }
.wb-ribbon-caption { width: 100%; text-align: center; }
.wb-ribbon-title { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--wb-journal); font: italic 400 22px/1.05 var(--font-display); overflow-wrap: anywhere; cursor: pointer; }
.wb-ribbon-title:hover, .wb-ribbon-chapter.is-current .wb-ribbon-title { color: var(--wb-accent-hover); }
.wb-ribbon-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 1px 8px; margin-top: 5px; color: var(--wb-meta); font: 11px/1.45 var(--font-body); font-variant-numeric: tabular-nums; }
.wb-ribbon-meta time { overflow-wrap: anywhere; }
.wb-ribbon-leader { position: absolute; overflow: visible; pointer-events: none; }
.wb-ribbon-leader line { stroke: var(--wb-rule-1); stroke-width: 1; }
.wb-ribbon-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--wb-swatch-off); pointer-events: none; }
.wb-ribbon-chapter.is-current .wb-ribbon-dot { background: var(--wb-accent); }
.wb-ribbon-chapter:focus-within .wb-ribbon-dot, .wb-ribbon-chapter:hover .wb-ribbon-dot { background: var(--wb-accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--wb-rule-1); }
.wb-ribbon-months { display: flex; padding-bottom: 16px; }
.wb-ribbon-month { flex: none; min-height: 38px; border: 0; padding: 0; background: none; text-align: left; cursor: pointer; }
.wb-ribbon-month:hover { background: var(--wb-fill); }

/* Compact phone chrome. All desktop geometry stays in its existing styles. */
.wb-phone-action, .wb-phone-more { display: none; }
@media (max-width: 767.98px) {
  header.wb-app-header { background: var(--bg) !important; backdrop-filter: none !important; }
  header.wb-app-header > .wb-chrome-row,
  body:has(.wb-atlas-screen) header.wb-app-header > .wb-chrome-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    column-gap: 4px !important; row-gap: 4px !important;
    padding: 6px 12px 0 !important;
    align-items: center;
  }
  .wb-chrome-brand { grid-column: 1; grid-row: 1; min-width: 0; min-height: 44px; }
  .wb-chrome-mark { flex-shrink: 0; }
  .wb-chrome-mark svg { width: 24px !important; height: 24px !important; }
  .wb-chrome-name { font-size: 24px !important; white-space: nowrap; }
  .wb-chrome-spacer, .wb-desktop-theme { display: none !important; }
  .wb-phone-action {
    display: grid; place-items: center; position: relative;
    width: 44px; height: 44px; flex-shrink: 0; padding: 0;
    border: 0; border-radius: 4px; background: none; color: var(--wb-accent);
    cursor: pointer;
  }
  .wb-phone-action:hover { background: var(--wb-fill); }
  .wb-phone-search-toggle { grid-column: 2; grid-row: 1; }
  .wb-phone-more-toggle { grid-column: 3; grid-row: 1; }
  .wb-phone-search-toggle[data-filtered="true"]::after {
    content: ""; position: absolute; top: 8px; right: 8px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--wb-accent);
  }
  .wb-chrome-nav {
    grid-column: 1 / -1; grid-row: 2; display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%; min-width: 0; gap: 0 !important; margin-left: 0 !important;
  }
  .wb-chrome-nav > button {
    min-width: 0; min-height: 44px; padding: 0 !important;
    font-size: 12px !important; font-weight: 400 !important;
    letter-spacing: 0 !important; text-transform: none;
    white-space: nowrap; border-bottom: 2px solid transparent !important;
    color: var(--fg-muted) !important;
  }
  .wb-chrome-nav > button[aria-current="page"] {
    color: var(--wb-accent) !important; border-bottom-color: var(--wb-accent) !important;
  }
  .wb-app-header .wb-search { display: none !important; }
  .wb-app-header.wb-phone-search-open .wb-search {
    grid-column: 1 / -1; grid-row: 3; display: flex !important;
    min-width: 0 !important; padding: 0 !important; margin-bottom: 8px;
  }
  .wb-app-header .wb-search-field { font-size: 16px !important; padding: 8px 2px; }
  .wb-phone-more {
    display: block; position: absolute; right: 12px; top: 56px;
    z-index: 50; width: min(268px, calc(100% - 24px));
    max-height: calc(100dvh - 72px); overflow-y: auto;
    padding: 14px; border: 1px solid var(--rule-strong); border-radius: 6px;
    background: var(--bg-elev); box-shadow: var(--shadow-soft);
  }
  .wb-phone-appearance-label { margin-bottom: 10px; color: var(--fg-muted); font-size: 12px; }
  .wb-phone-theme-choices { display: flex; gap: 8px; }
  .wb-phone-theme-choices > button {
    flex: 1; min-height: 44px; padding: 8px; border: 1px solid var(--rule);
    border-radius: 4px; background: none; color: var(--fg-muted);
    font: 13px var(--font-body); cursor: pointer;
  }
  .wb-phone-theme-choices > button[aria-pressed="true"] { border-color: var(--wb-accent); color: var(--wb-accent); }
  .wb-phone-account { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--rule); }
}

/* The Atlas keeps chapters alongside a full-height, locally drawn map. */
body:has(.wb-atlas-screen) { overflow: hidden; }
body:has(.wb-atlas-screen) #root > footer { display: none; }
body:has(.wb-atlas-screen) header > div:nth-of-type(1) { padding-top: 8px !important; padding-bottom: 10px !important; }
body:has(.wb-atlas-screen) header > div:nth-of-type(2) { display: none !important; }
.wb-atlas-screen { box-sizing:border-box; overflow:hidden; padding:0; background:var(--bg); }
.wb-atlas-screen:fullscreen { width:100vw; height:100dvh !important; }
.wb-atlas-content { height:100%; width:100%; display:flex; flex-direction:column; min-height:0; }
.wb-atlas-screen .wb-atlas { position:relative; display:grid; grid-template-columns:minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr); flex:1; min-height:0; gap:0; }
.wb-atlas-screen .wb-atlas-stage { position:relative; display:flex; flex-direction:column; height:100%; min-width:0; min-height:0; }
.wb-atlas-stage > .wb-mat { --mat:0px; flex:1; min-height:0; width:100%; padding:0; margin:0; box-shadow:none; outline:none; }
.wb-atlas-stage .wb-chart { width:100%; height:100%; aspect-ratio:auto; touch-action:none; cursor:grab; }
.wb-chart[data-dragging="1"] { cursor:grabbing !important; }
.wb-chart[data-dragging="1"] .wb-plane { transition:none; }
.wb-atlas-stage .wb-crumb { flex:none; box-sizing:border-box; display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:48px; padding:6px 10px; border-bottom:1px solid var(--wb-rule-2); }
.wb-atlas-stage .wb-crumb > b { min-width:0; max-width:28vw; overflow-wrap:anywhere; }
.wb-map-tool-actions { display:flex; gap:6px; margin-left:auto; }
.wb-map-full-icon { display:none; }
.wb-map-mobile-label, .wb-map-crumb-break { display:none; }
.wb-atlas-stage .wb-crumb .wb-map-tool { min-height:36px; padding:6px 10px; border:1px solid var(--wb-rule-2); border-radius:3px; font-size:11px; letter-spacing:.04em; text-transform:none; }
.wb-map-tool:disabled { opacity:.35; cursor:default; }
.wb-map-tool[aria-expanded="true"] { border-color:var(--wb-accent); color:var(--wb-accent); }
.wb-atlas-screen .wb-atlas-index { position:absolute; z-index:75; left:10px; top:58px; bottom:34px; box-sizing:border-box; width:310px; max-width:calc(100% - 20px); height:auto; padding:14px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--wb-rule-2); background:var(--bg-elev); box-shadow:0 12px 36px #0005; }
.wb-atlas-index[hidden] { display:none; }
.wb-map-search { display:block; box-sizing:border-box; width:100%; min-height:44px; padding:10px 12px; margin:0 0 14px; border:1px solid var(--wb-rule-2); border-radius:3px; background:var(--bg); color:var(--wb-display); font:14px var(--font-body); }
.wb-map-search-count { margin:-4px 0 14px; font:12px/1.5 var(--font-body); color:var(--wb-meta); }
.wb-map-index-close { display:block; margin:0 0 12px auto; min-height:36px; border:0; background:none; color:var(--wb-meta); font:12px var(--font-body); cursor:pointer; }
.wb-atlas-stage .wb-cap { position:absolute; z-index:35; bottom:4px; left:210px; right:78px; gap:12px; margin:0; padding:3px 7px; background:color-mix(in srgb,var(--pl-paper) 88%,transparent); pointer-events:none; }
.wb-atlas-stage .wb-cap-t { color:#6f5a40; font-size:12px; }
.wb-atlas-stage .wb-cap-m { color:#7a6244; font-size:7px; letter-spacing:.08em; }
.wb-atlas-stage .wb-chart .key { pointer-events:auto; box-sizing:border-box; }
.wb-chart details.key { width:216px; }
.wb-chart details.key > summary, .wb-chart details.inset > summary { cursor:pointer; min-height:24px; color:#6f5a40; font:11px var(--font-body); }
.wb-chart details.key > .key-r { margin-top:6px; }
.wb-chart details.inset:not([open]) { width:150px; height:auto; padding:8px 10px; }
.wb-chart details.inset { pointer-events:auto; }
.wb-chart .zoom button { width:44px; height:44px; font-size:24px; }
.wb-chart .pin::before, .wb-chart .pl::before { content:""; position:absolute; width:44px; height:44px; left:50%; top:50%; transform:translate(-50%,-50%); }
.wb-chart .cl-d { min-width:44px; min-height:44px; }
.wb-spot-floating { position:absolute; transform:none; box-sizing:border-box; overflow:auto; overscroll-behavior:contain; z-index:65; }
.wb-chart .wb-spot-floating .wb-spot-x { width:36px; height:36px; z-index:2; background:var(--pl-card); }
.wb-spot-floating .wb-spot-strip { overflow-x:auto; padding:3px 0; }
.wb-spot-floating .wb-spot-th { width:44px; height:36px; }
.wb-spot-floating .wb-spot-m, .wb-spot-floating .wb-spot-c { font-size:10px; letter-spacing:.04em; }
.wb-spot-paging { display:flex; align-items:center; justify-content:space-between; font:11px var(--font-body); color:#7a6244; }
.wb-spot-paging button { min-width:44px; min-height:36px; border:0; background:none; color:#7d2e2e; cursor:pointer; }
.wb-spot-paging button:disabled { opacity:.3; cursor:default; }
.wb-chart .wb-spot-go { min-height:36px; font-size:10px; letter-spacing:.08em; }
.wb-cluster-panel { position:absolute; z-index:65; top:14px; right:14px; width:290px; max-width:calc(100% - 28px); max-height:calc(100% - 120px); display:flex; flex-direction:column; box-sizing:border-box; padding:14px; border:1px solid #b6a17d; background:var(--pl-card); color:#3b2f22; box-shadow:0 10px 36px #3c281444; }
.wb-cluster-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.wb-cluster-head h2 { margin:0; font:italic 24px var(--font-display); }
.wb-cluster-head button { width:36px; height:36px; border:0; background:none; font-size:24px; color:#7d2e2e; cursor:pointer; }
.wb-cluster-panel p { margin:4px 0 10px; font:11px/1.5 var(--font-body); color:#7a6244; }
.wb-cluster-list { overflow-y:auto; overscroll-behavior:contain; }
.wb-cluster-list button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:8px 2px; border:0; border-bottom:1px solid #8b6f4733; background:none; text-align:left; color:#3b2f22; font:italic 18px var(--font-display); cursor:pointer; }
.wb-cluster-list small { flex:none; font:10px var(--font-body); color:#7a6244; }
.wb-cluster-list button:hover, .wb-cluster-list button:focus-visible { background:#8b6f4714; }
/* Chapters remain in view while the map takes every remaining pixel. */
.wb-atlas-screen[data-index="open"] .wb-atlas { grid-template-columns:310px minmax(0,1fr) !important; }
.wb-atlas-screen .wb-atlas-index { position:relative; left:auto; top:auto; bottom:auto; width:auto; max-width:none; height:100%; border:0; border-right:1px solid var(--wb-rule-2); box-shadow:none; padding:16px; }
.wb-atlas-index-title h1 { font-size:28px !important; }
.wb-atlas-index-title .wb-hand { font:11px/1.5 var(--font-body) !important; }
.wb-map-index-close { float:right; margin:-7px -6px 0 5px; font-size:10px; }
.wb-atlas-index .wb-ir { display:flex; align-items:center; gap:10px; min-height:62px; width:100%; padding:7px 4px; box-sizing:border-box; border-radius:4px; }
.wb-atlas-index .wb-ir.is-sel { background:color-mix(in srgb,var(--wb-accent) 10%,transparent); box-shadow:inset 2px 0 var(--wb-accent); }
.wb-atlas-chapter-thumb { flex:none; width:46px; height:46px; object-fit:cover; border-radius:3px; }
.wb-ir-copy { display:flex; flex-direction:column; min-width:0; gap:5px; flex:1; }
.wb-ir-copy .wb-ir-t { white-space:normal; line-height:1.15; }
.wb-ir-copy small { color:var(--wb-meta-dim); font:8px var(--font-body); letter-spacing:.02em; }
.wb-atlas-index .wb-ir-n { margin-left:auto; flex:none; font-size:10px; }
.wb-atlas-current { margin:0 0 14px; padding:10px; border:1px solid var(--wb-rule-2); border-radius:3px; }
.wb-atlas-current > summary { cursor:pointer; font:11px/1.5 var(--font-body); color:var(--wb-accent); }
.wb-atlas-current .wb-gz { margin-top:15px; }
.wb-atlas-current .wb-follow-start { margin-top:12px; }
.wb-chart .wb-plane { z-index:2; }
.wb-chart .pin-l, .wb-chart .pl-c, .wb-chart .cl-l { pointer-events:auto; cursor:pointer; }
.wb-chart .wb-chrome { z-index:30; }
.wb-month-masthead h1 { margin:7px 0 18px; color:var(--wb-display); font:italic 28px/1.1 var(--font-display); }
.wb-atlas-modes { display:flex; gap:10px; margin:0 0 14px; border-bottom:1px solid var(--wb-rule-2); }
.wb-atlas-modes button { flex:1; min-height:38px; border:0; border-bottom:2px solid transparent; background:none; color:var(--wb-meta); font:13px var(--font-body); cursor:pointer; }
.wb-atlas-modes button[aria-pressed="true"] { color:var(--wb-accent); border-bottom-color:var(--wb-accent); }
.wb-period-select-row { display:grid; grid-template-columns:36px minmax(0,1fr) 36px; gap:5px; }
.wb-period-select-row button,.wb-period-select-row select { min-width:0; min-height:42px; border:1px solid var(--wb-rule-2); border-radius:3px; background:var(--bg); color:var(--wb-display); }
.wb-period-select-row select { padding:5px 7px; font:18px var(--font-display); cursor:pointer; }
.wb-period-select-row button { font:18px var(--font-body); cursor:pointer; }
.wb-period-select-row button:disabled { opacity:.25; cursor:default; }
.wb-period-summary { margin:10px 0 15px; color:var(--wb-meta); font:11px/1.5 var(--font-body); }
.wb-period-place { display:flex; flex-direction:column; gap:7px; width:100%; min-height:76px; padding:13px 5px; border:0; border-bottom:1px solid var(--wb-rule-3); border-radius:3px; background:none; color:var(--wb-meta); text-align:left; font:10px/1.3 var(--font-body); cursor:pointer; }
.wb-period-place-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.wb-period-place-heading b { color:var(--wb-display); font:italic 22px/1.15 var(--font-display); }
.wb-period-place-heading small { font:8px var(--font-body); letter-spacing:.06em; }
.wb-period-place:hover,.wb-period-place.is-sel { background:var(--wb-wash); }
.wb-period-empty { color:var(--wb-meta-dim); font:12px/1.5 var(--font-body); }
.wb-period-chapters { margin-top:18px; padding-top:14px; border-top:1px solid var(--wb-rule-2); }
.wb-period-chapters summary { color:var(--wb-accent); font:11px var(--font-body); cursor:pointer; }
.wb-period-chapters button { display:flex; justify-content:space-between; gap:10px; width:100%; min-height:42px; padding:9px 2px; border:0; border-bottom:1px solid var(--wb-rule-3); background:none; color:var(--wb-display); text-align:left; font:italic 17px var(--font-display); cursor:pointer; }
.wb-period-chapters small { flex:none; color:var(--wb-meta); font:10px var(--font-body); }
.wb-period-zoom { align-self:flex-start; min-height:36px; margin:0 0 8px; border:1px solid #b6a17d; background:none; padding:6px 10px; color:#6f5a40; font:12px var(--font-body); cursor:pointer; }
.wb-period-panel .wb-cluster-list button { align-items:baseline; }
.wb-period-marker .cl-d .cl-n { font-size:18px; }
.wb-chart[data-context="period"] .key-book { max-width:230px; font-size:9px; }
.wb-map-areas { --area-gap:18px; --area-more-width:116px; position:relative; flex:none; display:flex; align-items:center; flex-wrap:nowrap; gap:7px; min-width:0; padding:7px 10px; border-bottom:1px solid var(--wb-rule-2); }
.wb-map-area-shortcuts { display:flex; flex:1; min-width:0; gap:var(--area-gap); }
.wb-map-area-shortcuts button,.wb-map-area-measure span,.wb-map-more-areas { flex:none; min-height:40px; padding:5px 2px; border:0; border-bottom:1px solid transparent; border-radius:0; color:var(--wb-meta); background:transparent; font:italic 22px var(--font-display); white-space:nowrap; cursor:pointer; }
.wb-map-area-measure { position:absolute; left:0; top:0; display:flex; gap:var(--area-gap); width:max-content; height:0; overflow:hidden; visibility:hidden; pointer-events:none; }
.wb-map-area-shortcuts button[aria-pressed="true"] { border-bottom-color:var(--wb-accent); color:var(--wb-accent); }
.wb-map-area-shortcuts button:hover { color:var(--wb-display); }
.wb-map-more-areas { flex:0 0 var(--area-more-width); width:var(--area-more-width); min-width:0; margin:0; padding:7px 3px; font:11px var(--font-body); }
.wb-map-areas .wb-period-select-row { flex:0 0 250px; margin-left:auto; width:250px; }
.wb-map-areas .wb-period-select-row select { padding:5px 4px; border:0; border-bottom:1px solid var(--wb-rule-2); border-radius:0; background:transparent; font:italic 19px var(--font-display); }
.wb-map-areas .wb-period-select-row button { border:0; background:none; }
.wb-atlas-stage .wb-crumb .wb-map-tool { border:0; border-radius:0; font:italic 15px var(--font-display); letter-spacing:0; }
.wb-atlas-stage .wb-crumb .wb-map-index-toggle { border:1px solid var(--wb-rule-2); font:600 12px var(--font-display); letter-spacing:.09em; text-transform:uppercase; }
.wb-chart .key-book { width:auto; max-width:230px; height:auto; min-height:36px; padding:3px 0; background:none; outline:0; }
.wb-chart .key-book .key-r { font-size:8px; color:#73583c; text-shadow:0 0 4px var(--pl-paper),0 0 4px var(--pl-paper); }
.wb-chart .rose { opacity:.85; }
.wb-chart .bm-border path { stroke-opacity:.55; }
.wb-chart .bm-river path { stroke-opacity:.75; }
.wb-atlas-chapter-thumb { border:3px solid var(--pl-card); border-radius:0; }
.wb-period-index-scope { margin:10px 0 4px; color:var(--wb-meta); font:italic 18px var(--font-display); }
.wb-visit-labels,.wb-visit-leaders { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.wb-visit-leaders line { stroke:#8c6748; stroke-width:.6; opacity:.58; }
.wb-visit-sign .vs-rays { fill:none; stroke:#873f36; stroke-width:.8; opacity:.8; }
.wb-visit-sign .vs-diamond { fill:var(--pl-paper); stroke:#7d2e2e; stroke-width:1.3; }
.wb-visit-sign .vs-ink { fill:#7d2e2e; stroke:none; }
.wb-visit-sign.is-memory .vs-diamond { fill:#7d2e2e; stroke:var(--pl-paper); stroke-width:1.5; }
.wb-visit-sign.is-memory .vs-ink { fill:var(--pl-paper); }
.wb-marks .wb-visit-label { position:absolute; z-index:12; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:3px 5px; border:0; border-radius:0; color:#493725; background:transparent; box-shadow:none; cursor:pointer; pointer-events:auto; text-align:center; text-shadow:1px 0 1px var(--pl-paper),-1px 0 1px var(--pl-paper),0 1px 1px var(--pl-paper),0 -1px 1px var(--pl-paper),0 0 5px var(--pl-paper),0 0 5px var(--pl-paper); }
.wb-visit-label b { font:400 16px/1.15 var(--font-atlas); white-space:nowrap; }
.wb-visit-label small { color:#745a3b; font:8px/1.2 var(--font-body); letter-spacing:.04em; white-space:nowrap; }
.wb-visit-labels.is-compact .wb-visit-label b { font:400 16px/1.15 var(--font-atlas); }
.wb-visit-labels.is-compact .wb-visit-label:not(.is-memory) small { display:none; }
.wb-marks .wb-visit-label.is-memory { gap:2px; padding:6px; justify-content:flex-start; }
.wb-visit-label.is-memory .wb-plate { width:100%; flex:none; margin-bottom:3px; }
.wb-marks .wb-visit-label.is-memory b { flex:none; color:#713d32; font:italic 400 19px/1.1 var(--font-atlas); }
.wb-memory-title { flex:none; max-width:100%; overflow-wrap:anywhere; color:#4c3d2d; font:italic 12px/1.3 var(--font-atlas); }
.wb-visit-label.is-memory small { flex:none; color:#7a5b3e; font:7px/1.4 var(--font-body); letter-spacing:.12em; text-transform:uppercase; }
.wb-atlas-letterhead { position:absolute; left:24px; top:21px; width:250px; color:#3e3429; text-shadow:0 0 8px var(--pl-paper),0 0 8px var(--pl-paper); }
.wb-atlas-letterhead > span { font:8px var(--font-body); letter-spacing:.24em; text-transform:uppercase; }
.wb-atlas-letterhead h2 { margin:8px 0 5px; font:italic 400 39px/1 var(--font-atlas); letter-spacing:-.025em; }
.wb-atlas-ornament { display:block; width:164px; height:12px; overflow:visible; }
.wb-atlas-ornament path { fill:none; stroke:#8a6243; stroke-width:.65; }
.wb-atlas-ornament .ao-jewel { fill:#823f34; stroke:none; }
.wb-atlas-letterhead p { margin:9px 0 0; color:#786044; font:8px var(--font-body); letter-spacing:.16em; text-transform:uppercase; }
.wb-atlas-letterhead > i { display:block; margin-top:7px; color:#803f35; font:17px/1 var(--font-hand); }
.wb-chart .key-book.has-letterhead { left:auto; right:80px; top:auto; bottom:22px; max-width:none; min-height:0; flex-direction:row; gap:12px; }
.wb-chart .key-book.has-letterhead > .key-r:first-child { display:flex; align-items:center; gap:7px; }
.key-book.has-letterhead > .key-r:first-child:before { content:""; width:6px; height:6px; flex:none; background:#7d2e2e; border:1px solid var(--pl-paper); outline:1px solid #7d2e2e; transform:rotate(45deg); }
.wb-chart .key-book.has-letterhead .key-r { font-size:7px; letter-spacing:.1em; }
.wb-chart[data-context="period"] .key-book .key-r { white-space:normal; line-height:1.5; }
.wb-marks .wb-visit-label:hover,.wb-marks .wb-visit-label:focus-visible { z-index:15; color:#7d2e2e; }
.wb-visit-label:hover b,.wb-visit-label:focus-visible b { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.wb-chart .th.wb-visit-route { opacity:.6; stroke-width:1.2; }
.wb-chart .l-city span,.wb-chart .l-town span { font-family:var(--font-atlas); letter-spacing:.12em; }
.wb-chart .l-sea span { font-family:var(--font-atlas); }
.wb-chart .sh-cap-h b,.wb-chart .pl-c b { font:italic 400 13px/1.15 var(--font-atlas); }
.wb-chart .rose .ro-o { stroke-opacity:.75; stroke-width:.8; }
.wb-chart .rose .ro-s { stroke-opacity:.8; stroke-width:.8; fill-opacity:.12; }
.wb-chart .rose .ro-n { fill:#7d2e2e; fill-opacity:.85; }
.wb-chart .rose .ro-t { font-family:var(--font-atlas); fill:#7d2e2e; }
.wb-visit-route-key:before { content:""; display:inline-block; width:18px; margin-right:6px; border-top:1px dashed #873e35; vertical-align:middle; }
@media(max-width:760px) {
  .wb-map-areas { --area-gap:14px; flex-wrap:wrap; gap:5px; padding:5px 8px; }
  .wb-map-area-shortcuts { flex:0 0 100%; width:100%; }
  .wb-map-area-shortcuts button,.wb-map-area-measure span { flex:none; min-height:40px; padding:5px 2px; font-size:19px; }
  .wb-map-more-areas { min-height:36px; font-size:11px; }
  .wb-map-areas .wb-period-select-row { flex:1; width:auto; max-width:240px; grid-template-columns:30px minmax(0,1fr) 30px; }
  .wb-map-areas .wb-period-select-row select { font-size:16px; }
  .wb-visit-label b { font-size:15px; }
  .wb-visit-labels.is-compact .wb-visit-label b { font-size:15px; }
  .wb-marks .wb-visit-label.is-memory b { font-size:18px; }
  .wb-memory-title { font-size:12px; }
  .wb-atlas-letterhead { left:16px; top:18px; width:150px; }
  .wb-atlas-letterhead h2 { font-size:30px; }
  .wb-atlas-ornament { width:120px; height:10px; }
  .wb-atlas-letterhead > span { font-size:7px; letter-spacing:.18em; }
  .wb-atlas-letterhead p { font-size:7px; letter-spacing:.06em; }
  .wb-atlas-letterhead > i { font-size:15px; }
  .wb-chart .key-book.has-letterhead { left:12px; right:auto; bottom:57px; max-width:190px; }
  .wb-chart .key-book.has-letterhead > .key-r:first-child { display:none; }
  .wb-atlas-month-index .wb-atlas-modes { margin-bottom:7px; }
  .wb-atlas-month-index .wb-atlas-modes button { min-height:30px; font-size:12px; }
  .wb-period-select-row { grid-template-columns:36px minmax(0,1fr) 36px; }
  .wb-period-select-row button,.wb-period-select-row select { min-height:36px; }
  .wb-period-summary { margin:5px 0 7px; font-size:10px; }
  .wb-atlas-month-index > .wb-map-search,.wb-atlas-month-index > .wb-period-chapters { display:none; }
  .wb-period-places { display:flex; gap:8px; overflow-x:auto; overscroll-behavior:contain; scroll-snap-type:x proximity; padding-bottom:4px; }
  .wb-period-place { flex:none; width:156px; min-height:74px; padding:9px; border:1px solid var(--wb-rule-2); scroll-snap-align:start; }
  .wb-period-place-heading { display:block; }
  .wb-period-place-heading b { display:block; margin-bottom:3px; font-size:19px; }
  .wb-period-place-heading small { font-size:8px; }
  .wb-chart[data-context="period"] .key-book { max-width:180px; }
}
@media (max-width:860px) {
  .wb-atlas-screen .wb-atlas { grid-template-rows:minmax(0,1fr); }
  .wb-atlas-screen .wb-atlas-index { top:auto; bottom:auto; }
  .wb-atlas-stage .wb-crumb > b { max-width:45vw; }
}
@media (max-width:760px) {
  .wb-atlas-screen[data-index="open"] .wb-atlas { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:minmax(0,1fr) 220px; }
  .wb-atlas-screen .wb-atlas-stage { grid-row:1; }
  .wb-atlas-screen .wb-atlas-index { grid-row:2; border-right:0; border-top:1px solid var(--wb-rule-2); padding:10px 12px; }
  .wb-atlas-index-title { display:none; }
  .wb-map-index-close { display:none; }
  .wb-map-search { min-height:36px; margin:0 0 8px; }
  .wb-atlas-index .wb-ir { min-height:54px; }
  .wb-atlas-chapter-thumb { width:38px; height:38px; }
  .wb-atlas-current { margin-bottom:8px; padding:6px 10px; }
  .wb-atlas-index > .wb-map-index-heading, .wb-atlas-index > .wb-at-all { display:none; }
  .wb-atlas-chapter-groups { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; overscroll-behavior:contain; scroll-snap-type:x proximity; }
  .wb-atlas-chapter-groups .wb-ig { display:contents; }
  .wb-atlas-chapter-groups .wb-igh { display:none; }
  .wb-atlas-index .wb-ir { flex:none; flex-direction:column; align-items:stretch; width:142px; height:126px; gap:5px; padding:4px; scroll-snap-align:start; border:1px solid var(--wb-rule-2); }
  .wb-atlas-index .wb-ir .wb-atlas-chapter-thumb { width:132px; height:68px; }
  .wb-atlas-index .wb-ir-copy { gap:3px; }
  .wb-atlas-index .wb-ir-t { font-size:13px; }
  .wb-atlas-index .wb-ir-n { display:none; }
  .wb-atlas-stage .wb-crumb { gap:5px; padding:5px; }
  .wb-atlas-stage .wb-crumb > button:not(.wb-map-tool), .wb-atlas-stage .wb-crumb > .sep, .wb-atlas-stage .wb-crumb > b { order:3; }
  .wb-atlas-stage .wb-crumb > b { max-width:140px; }
  .wb-map-crumb-break { display:block; order:2; flex-basis:100%; height:0; }
  .wb-atlas-stage .wb-crumb .wb-map-tool { min-height:40px; padding:5px 8px; }
  .wb-map-tool-actions { margin-left:auto; gap:5px; order:1; }
  .wb-map-full-label { display:none; }
  .wb-map-mobile-label { display:inline; }
  .wb-map-full-icon { display:inline; font-size:20px; line-height:1; }
  .wb-atlas-stage .wb-crumb .wb-map-full { min-width:40px; }
  .wb-atlas-stage .wb-cap { left:12px; right:76px; bottom:2px; }
  .wb-atlas-stage .wb-cap-t { display:none; }
  .wb-chart .rose { display:none; }
  .wb-chart .key { left:12px; top:12px; }
  .wb-chart details.key:not([open]) { width:auto; padding:8px 10px; }
  .wb-chart .inset { right:12px; top:56px; }
  .wb-chart .scale { left:12px; bottom:22px; }
  .wb-chart .sheet-sw { left:12px; bottom:58px; }
}
@media (max-width:380px) {
  .wb-atlas-stage .wb-crumb .wb-map-tool { padding:5px; }
  .wb-map-tool-actions { gap:4px; }
  .wb-atlas-stage .wb-crumb > b { max-width:80px; }
}

/* ============================================================
   The reader's own hand
   ------------------------------------------------------------
   Four things a reader does to a finished book — curate a
   chapter, write in it, follow its route, print a keepsake of
   it — and all four are held to the rules the rest of the book
   keeps: gold only ever as a stroke, metadata set small and
   letterspaced, the display italic for anything titular, and no
   card, panel or button ever laid over a photograph.
   ============================================================ */

/* ---- Buttons in a row ---------------------------------------
   A plain .wb-stroke is a neutral member of the same family as
   --accent and --muted, so a row that mixes all three reads as
   one set of buttons rather than as three. */
.wb-stroke { min-height: 40px; }
.wb-stroke:not(.wb-stroke--accent):not(.wb-stroke--muted):hover:not(:disabled) {
  color: var(--wb-display);
  border-color: var(--wb-accent);
  background: var(--wb-fill);
}
.wb-stroke[aria-pressed="true"] {
  color: var(--wb-accent);
  border-color: var(--wb-accent);
  background: var(--wb-fill);
}
button:disabled { opacity: 0.38; cursor: default; }

.wb-tool-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

/* A tertiary action: the words alone, on the metadata rule. */
.wb-quiet {
  border: 0;
  background: none;
  padding: 6px 2px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wb-meta);
  transition: color 200ms var(--ease-soft);
}
.wb-quiet:hover:not(:disabled) { color: var(--wb-accent-hover); }

/* ---- Curating a chapter -------------------------------------
   The curator's instructions stand in the title block's own
   idiom — a line of display italic over a hairline — and the
   controls under each plate are set at the weight of the
   caption line they join, not at the weight of a button. */
.wb-curation-intro {
  max-width: 560px;
  margin: 30px auto 4px;
  text-align: center;
}
.wb-curation-intro > p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: var(--wb-meta-bright);
  margin: 10px 0 6px;
}
.wb-curation-rule {
  height: 1px;
  margin: 16px auto 0;
  background: linear-gradient(90deg, transparent, var(--wb-rule-2), transparent);
}

.wb-curation-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--wb-rule-3);
}
.wb-curation-controls > span { display: inline-flex; gap: 14px; }
.wb-mark {
  border: 0;
  background: none;
  padding: 8px 0;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  transition: color 200ms var(--ease-soft);
}
.wb-mark:hover:not(:disabled) { color: var(--wb-accent-hover); }
.wb-mark[aria-pressed="true"] { color: var(--wb-accent); }
.wb-mark:disabled { color: var(--wb-rule-1); opacity: 1; }

/* A chosen plate says so where the heart says it — in the caption
   line, in gold. Nothing is drawn around the print itself: no card,
   no panel and no border ever wraps a photograph in this book, and
   a curator's mark is not the exception to that. */
.wb-plate-tag {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wb-accent);
  white-space: nowrap;
}

/* ---- The table ----------------------------------------------
   A chapter opens on a handful of its own prints laid on a table,
   the cover uppermost and a scrap of the map among them, with the
   words in the one clear corner. The prints lie on a plane that
   keeps its proportions as the window narrows. The words share
   its grid cell rather than floating over it, starting a fixed
   share of the width down, so an entry that runs long lengthens
   the table instead of running under a print. */
.wb-table {
  display: grid;
  max-width: 1240px;
  margin: 16px auto 0;
}
.wb-table > * { grid-area: 1 / 1; min-width: 0; }
.wb-table-pile {
  position: relative;
  aspect-ratio: 1240 / 650;
}
.wb-table-print {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate(-50%, -50%);
  cursor: zoom-in;
  outline: none;
}
/* Picked up, a print comes to the top of the pile. */
.wb-table-print:hover,
.wb-table-print:focus-visible,
.wb-table-scrap:hover,
.wb-table-scrap:focus-visible { z-index: 12 !important; }
.wb-table-print:focus-visible > .wb-plate {
  transform: rotate(0deg) translateY(var(--lift, -5px));
  outline-color: var(--wb-accent);
}

/* The scrap of map: the Atlas's paper and its two inks, cut to sit
   among the prints. It is a drawing rather than a photograph, so
   its caption is written on it. */
.wb-table-scrap {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  padding: 10px 10px 8px;
  background: var(--pl-paper);
  border: 0;
  outline: 1px solid var(--color-divider);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.85);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform var(--plate-ms, 560ms) var(--ease-page);
}
.wb-table-scrap:hover,
.wb-table-scrap:focus-visible { transform: translate(-50%, calc(-50% - 5px)) rotate(0deg); }
.wb-table-scrap:focus-visible { outline: 1px solid var(--wb-accent); outline-offset: 4px; }
.wb-table-scrap svg { display: block; width: 100%; height: auto; background: var(--pl-paper); }
.wb-table-scrap .sc-green { fill: #a8b08c; fill-opacity: 0.55; }
.wb-table-scrap .sc-bare { fill: #ddcda3; fill-opacity: 0.62; }
.wb-table-scrap .sc-built { fill: #c2a98d; fill-opacity: 0.52; }
.wb-table-scrap .sc-water { fill: var(--pl-sea); fill-opacity: 0.9; stroke: var(--pl-river); stroke-width: 0.7; stroke-opacity: 0.55; }
.wb-table-scrap .sc-river { fill: none; stroke: var(--pl-river); stroke-width: 1; stroke-opacity: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.wb-table-scrap .sc-road { fill: none; stroke: var(--pl-ink); stroke-width: 0.8; stroke-opacity: 0.45; stroke-linecap: round; stroke-linejoin: round; }
.wb-table-scrap .sc-coast { fill: none; stroke: var(--pl-ink); stroke-width: 1.5; stroke-opacity: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.wb-table-scrap .sc-dot { fill: var(--pl-red); stroke: var(--pl-card); stroke-width: 1.2; }
.wb-table-scrap .sc-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  fill: var(--pl-city);
  paint-order: stroke;
  stroke: var(--pl-paper);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.wb-table-scrap-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(139, 111, 71, 0.26);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pl-ink);
}

/* Keep the words inside the clear corner, before the cover print begins. */
.wb-table-words {
  align-self: start;
  position: relative;
  z-index: 8;
  width: min(360px, 29%);
  margin: 21.1% 0 0 4.8%;
}
.wb-table-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 80px);
  line-height: 0.98;
  overflow-wrap: anywhere;
  margin: 12px 0 0;
  color: var(--wb-display);
}
.wb-table-meta {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wb-meta);
  font-variant-numeric: tabular-nums;
}
.wb-table-meta .is-empty { color: var(--wb-empty); font-style: italic; }
.wb-table-journal { margin-top: 18px; }
.wb-table-journal .wb-writing { text-align: left; }
.wb-table-journal .wb-writing .wb-tool-row,
.wb-table-journal .wb-writing-prompts,
.wb-table-journal .wb-writing-foot { justify-content: flex-start; }
.wb-table-journal .wb-writing-foot { margin-top: 4px; }
.wb-table-journal > p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.6;
  color: var(--wb-journal);
  white-space: pre-wrap;
  margin: 0;
}
.wb-table-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.wb-table-tools { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 10px; }
.wb-quiet[aria-pressed="true"] { color: var(--wb-accent); }
/* The scrap's way in, for a table too narrow to hold the scrap. */
.wb-table-atlas { display: none; }

/* Too narrow for a corner: three prints on a smaller table, the
   words underneath it in the ordinary flow of the page. */
@media (max-width: 900px) {
  .wb-table { max-width: 560px; }
  .wb-table-pile { aspect-ratio: 390 / 330; }
  .wb-table-print { left: var(--nx); top: var(--ny); width: var(--nw); }
  .wb-table-print.is-wide-only,
  .wb-table-scrap { display: none; }
  .wb-table-words { grid-area: 2 / 1; width: auto; margin: 28px 0 0; }
  .wb-table-atlas { display: inline-flex; align-items: center; }
}

/* ---- Writing ------------------------------------------------
   An entry is written on the page it will be read on: the same
   measure, the same italic, and — while the pen is out — faint
   rules under the writing line. */
.wb-journal-entry { max-width: 660px; margin: 56px auto 64px; text-align: center; }
.wb-journal-entry > .wb-eyebrow { margin: 22px 0 16px; }
.wb-journal-entry > :last-child { margin-top: 26px; }
.wb-journal-entry > p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 1.6;
  color: var(--wb-journal);
  white-space: pre-wrap;
  margin: 0;
}
.wb-writing { width: 100%; color: var(--wb-journal); }
.wb-writing > .wb-edit-open,
.wb-writing textarea {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 23px;
  line-height: 36px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: inherit;
  text-align: inherit;
}
.wb-writing > .wb-edit-open { transition: color 220ms var(--ease-soft); }
.wb-writing > .wb-edit-open:hover { color: var(--wb-accent-hover); }
.wb-writing textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 10px 16px 14px;
  border: 0;
  border-top: 1px solid var(--wb-rule-2);
  border-bottom: 1px solid var(--wb-rule-2);
  background-color: transparent;
  background-image: repeating-linear-gradient(
    var(--wb-paper-line) 0 1px, transparent 1px 36px);
  background-position: 0 46px;
  background-size: 100% 36px;
  resize: vertical;
  overflow: hidden;
}
.wb-writing textarea::placeholder { color: var(--wb-empty); font-style: italic; opacity: 1; }
.wb-writing .wb-tool-row { justify-content: center; align-items: center; gap: 14px; }
.wb-writing-keys {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .wb-writing-keys { display: none; } }

/* A note under a plate is a smaller hand on a shorter rule. */
.wb-writing.is-compact { color: var(--wb-hand-caption); text-align: left; }
.wb-writing.is-compact > .wb-edit-open,
.wb-writing.is-compact textarea {
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 26px;
}
.wb-writing.is-compact textarea {
  padding: 6px 10px 10px;
  background-image: repeating-linear-gradient(
    var(--wb-paper-line) 0 1px, transparent 1px 26px);
  background-position: 0 31px;
  background-size: 100% 26px;
}
.wb-writing.is-compact .wb-tool-row { justify-content: flex-start; margin: 8px 0 0; }

.wb-viewer-writing { width: min(620px, 78vw); text-align: center; }
.wb-viewer-writing .wb-writing { text-align: center; color: var(--gold-soft); }
.wb-viewer-writing .wb-writing.is-compact .wb-tool-row,
.wb-viewer-writing .wb-writing.is-compact .wb-writing-foot { justify-content: center; }

/* The three ways in, for an entry that has not been begun. */
.wb-writing-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.wb-writing-prompts > span {
  flex-basis: 100%;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
}
.wb-writing-prompts > button {
  border: 1px solid var(--wb-rule-3);
  border-radius: var(--radius-md);
  background: none;
  padding: 7px 13px;
  cursor: pointer;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.2;
  color: var(--wb-meta-bright);
  transition: color 200ms var(--ease-soft), border-color 200ms var(--ease-soft), background 200ms var(--ease-soft);
}
.wb-writing-prompts > button:hover,
.wb-writing-prompts > button[aria-pressed="true"] {
  color: var(--wb-display);
  border-color: var(--wb-accent);
  background: var(--wb-fill);
}

/* One quiet line of truth about what the browser did with it. */
.wb-writing-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
  justify-content: center;
  min-height: 16px;
  margin-top: 12px;
}
.wb-writing.is-compact .wb-writing-foot { justify-content: flex-start; }
.wb-writing-status {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
}
.wb-writing-status:empty { display: none; }
.wb-writing-status.is-warning { color: var(--crimson-soft); letter-spacing: 0.14em; }

/* ---- Following a trip ---------------------------------------
   The atlas margin already knows how to show a photograph: a
   white mat, the note in the hand below it, the place and the
   date set small underneath. The player borrows that card and
   adds only the means of moving along the route. */
.wb-follow-start { width: 100%; margin: 0 0 22px; }
.wb-trip-player {
  margin: 0 0 26px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--wb-rule-2);
  color: var(--wb-journal);
}
.wb-trip-player > h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 13px;
  color: var(--wb-display);
}
.wb-trip-photo {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  border: 6px solid var(--color-surface);
  outline: 1px solid var(--color-divider);
  background: none;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.75);
  cursor: zoom-in;
  transition: outline-color 220ms var(--ease-soft);
}
.wb-trip-photo:hover { outline-color: var(--wb-accent); }
.wb-trip-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 170px;
  filter: sepia(0.2) saturate(0.84) contrast(1.03);
}
.wb-trip-said { margin-top: 13px; }
.wb-trip-said > p:first-child {
  font-family: var(--font-hand);
  font-size: 17px;
  line-height: 1.35;
  color: var(--wb-hand-caption);
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.wb-trip-said > p:first-child:empty { display: none; }
.wb-trip-said > p + p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.25;
  color: var(--wb-display);
  margin: 4px 0 0;
}
.wb-trip-said > small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  font-variant-numeric: tabular-nums;
}
.wb-trip-player .wb-tool-row { justify-content: center; gap: 8px; margin: 15px 0 4px; }
.wb-trip-player .wb-tool-row .wb-stroke { padding: 9px 14px; min-width: 46px; }

/* The scrubber is the route: a dashed rule with a bead on it,
   drawn the way the atlas draws a journey. */
.wb-trip-scrub { display: block; margin-top: 12px; }
.wb-trip-scrub > span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wb-meta-dim);
  font-variant-numeric: tabular-nums;
}
.wb-trip-scrub input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  background: none;
  cursor: pointer;
}
.wb-trip-scrub input::-webkit-slider-runnable-track {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--wb-accent-deep) 0 5px, transparent 5px 9px);
}
.wb-trip-scrub input::-moz-range-track {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--wb-accent-deep) 0 5px, transparent 5px 9px);
}
.wb-trip-scrub input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--crimson-soft);
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--crimson);
}
.wb-trip-scrub input::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--crimson-soft);
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--crimson);
}
.wb-trip-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin-top: 12px;
}
.wb-trip-foot > small {
  flex: 1 1 130px;
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--wb-meta-dim);
}
.wb-trip-player > p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--wb-empty);
  margin: 0 0 22px;
}
.wb-marks > .wb-trip-marker {
  width: 22px; height: 22px; box-sizing: border-box; border-radius: 50%;
  background: #893f32; border: 4px solid #fff5da; box-shadow: 0 0 0 2px #893f32;
  transform: translate(-50%, -50%) scale(calc(1 / var(--k))); pointer-events: none; z-index: 100;
}

/* ============================================================
   The keepsake — a proof pulled from the press
   ------------------------------------------------------------
   Not a print dialog with photographs in it: leaves of paper
   laid on a dark bench, each one already the page it will be.
   The bar above them belongs to the book, in the book's dark
   and the book's gold.
   ============================================================ */
.wb-keepsake {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #241d16 0%, #14100d 62%, #0b0908 100%);
  color: #30281c;
  font-family: var(--font-body);
  --leaf: #fff;
  --leaf-ink: #1f2424;
  --leaf-meta: #626969;
  --leaf-rule: rgba(31, 36, 36, 0.2);
  /* The press room is the same room in either theme — a cream leaf has to
     read as paper, and it can only do that against one fixed dark bench —
     so its bar names its own colours instead of borrowing the page's. */
  --bench-fg: #f2e8d4;
  --bench-meta: #8f8168;
  --bench-accent: #c9a961;
  --bench-rule: rgba(201, 169, 97, 0.28);
  --bench-fill: rgba(201, 169, 97, 0.14);
}
.wb-keepsake-tools {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 13px 26px;
  background: rgba(11, 9, 8, 0.94);
  border-bottom: 1px solid var(--bench-rule);
  color: var(--bench-fg);
}
.wb-keepsake-tools button {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  min-height: 40px;
  background: none;
  color: var(--bench-fg);
  border: 1px solid var(--bench-rule);
  cursor: pointer;
  white-space: nowrap;
  transition: color 220ms var(--ease-soft), border-color 220ms var(--ease-soft), background 220ms var(--ease-soft);
}
.wb-keepsake-tools button:hover:not(:disabled) { border-color: var(--bench-accent); background: var(--bench-fill); }
.wb-keepsake-tools button.is-press { color: var(--bench-accent); border-color: var(--bench-accent); }
.wb-keepsake-tools label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bench-meta);
}
.wb-keepsake-tools select {
  -webkit-appearance: none;
  appearance: none;
  padding: 9px 34px 9px 13px;
  min-height: 40px;
  border: 1px solid var(--bench-rule);
  border-radius: var(--radius-md);
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--bench-accent) 50%),
                    linear-gradient(135deg, var(--bench-accent) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 16px center, right 12px center;
  background-repeat: no-repeat;
  color: var(--bench-fg);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.wb-keepsake-tools select:hover { border-color: var(--bench-accent); }
.wb-keepsake-tools select option { background: #14100d; color: var(--bench-fg); }
.wb-keepsake-tools > span {
  flex: 1 1 200px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--bench-meta);
}
.wb-keepsake-tools > span.is-warning { color: #c07070; }
/* The bar keeps its own dark, so the focus ring has to as well. */
.wb-keepsake-tools :focus-visible { outline: 2px solid var(--bench-accent); }

/* A writing desk beside the proof. Only the paper is sent to the printer. */
.wb-keepsake-workspace { max-width: 1260px; margin: 0 auto; }
.wb-keepsake.is-editing .wb-keepsake-tools { position: relative; }
.wb-keepsake.is-editing .wb-keepsake-workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: start; padding: 0 16px; }
.wb-keepsake.is-editing article { min-width: 0; width: 100%; }
.wb-keepsake-editor { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; margin: 24px 0; padding: 24px; color: var(--bench-fg); background: #1b1712; border: 1px solid var(--bench-rule); border-radius: 4px; scrollbar-width: thin; scrollbar-color: #65553a #1b1712; }
.wb-keepsake-editor-heading > span { font: 9px/1.5 var(--font-body); letter-spacing: .2em; color: var(--bench-accent); }
.wb-keepsake-editor h2 { margin: 8px 0; font: italic 30px/1.1 var(--font-display); color: var(--bench-fg); }
.wb-keepsake-editor-heading p, .wb-keepsake-editor-hint, .wb-keepsake-editor-end p { font: 12px/1.6 var(--font-body); color: #b9ac94; }
.wb-keepsake-editor-heading p { margin: 0 0 22px; }
.wb-keepsake-field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.wb-keepsake-field > span, .wb-keepsake-photo-editor legend { font: 10px/1.4 var(--font-body); letter-spacing: .08em; color: #d6c7ad; }
.wb-keepsake-field input, .wb-keepsake-field textarea, .wb-keepsake-field select { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #66563c; border-radius: 3px; background: #110f0c; color: #f5eddc; font: 14px/1.5 var(--font-body); }
.wb-keepsake-field textarea { resize: vertical; min-height: 80px; }
.wb-keepsake-field select { text-overflow: ellipsis; }
.wb-keepsake-field :focus-visible, .wb-keepsake-editor button:focus-visible, .wb-keepsake-details summary:focus-visible { outline: 2px solid var(--bench-accent); outline-offset: 3px; }
.wb-keepsake-editor-hint { margin: -5px 0 22px; }
.wb-keepsake-photo-editor { min-width: 0; padding: 18px 0 0; margin: 0; border: 0; border-top: 1px solid var(--bench-rule); }
.wb-keepsake-photo-editor legend { padding: 0 10px 0 0; color: var(--bench-accent); }
.wb-keepsake-photo-reference { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: italic 17px/1.2 var(--font-display); color: #b9ac94; }
.wb-keepsake-photo-reference img { width: 70px; height: 58px; object-fit: cover; border: 4px solid white; transform: rotate(-3deg); }
.wb-keepsake-details { padding: 16px 0 0; border-top: 1px solid var(--bench-rule); }
.wb-keepsake-details summary { cursor: pointer; margin-bottom: 18px; font: 12px/1.5 var(--font-body); color: var(--bench-accent); }
.wb-keepsake-editor-end { margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--bench-rule); }
.wb-keepsake-editor-end button { width: 100%; padding: 12px; font: 14px/1.4 var(--font-display); background: #c9a961; color: #17120c; border: 0; border-radius: 3px; cursor: pointer; }
.wb-keepsake-editor-end p { margin: 10px 0 0; }
@media screen and (max-width: 900px) {
  .wb-keepsake.is-editing .wb-keepsake-workspace { display: block; padding: 0; }
  .wb-keepsake-editor { position: static; max-height: none; margin: 16px; }
  .wb-keepsake-field input, .wb-keepsake-field textarea, .wb-keepsake-field select { font-size: 16px; }
}
@media print {
  .wb-keepsake-editor { display: none !important; }
  .wb-keepsake-workspace, .wb-keepsake.is-editing .wb-keepsake-workspace { display: block; max-width: none; padding: 0; }
}

/* Photo compositions: most of each sheet belongs to the photographs. */
.wb-keepsake article { max-width: 820px; margin: 0 auto; padding: 24px 24px 64px; }
.wb-collage-page {
  height: 1080px;
  padding: 16px;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--leaf);
  box-shadow: 0 20px 55px -20px #0009;
}
.wb-print-masthead, .wb-print-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  color: #626969; font: 9px/1.4 var(--font-body); letter-spacing: .15em; text-transform: uppercase;
}
.wb-print-masthead > :first-child { max-width: 65%; overflow-wrap: anywhere; }
.wb-print-masthead > :last-child { text-align: right; }
.wb-print-foot { font-size: 8px; }
.wb-print-foot > :last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.wb-collage-heading { position: absolute; left: 24px; right: 20px; bottom: 24px; z-index: 1; color: white; text-shadow: 0 2px 12px #0008, 0 1px 3px #0008; }
.wb-keepsake h1 { margin: 0; font: italic 58px/1.04 var(--font-display); color: var(--leaf-ink); overflow-wrap: anywhere; }
.wb-collage-heading h1 { color: inherit; font-size: clamp(30px, 10cqw, 76px); line-height: .96; letter-spacing: -.035em; }
.wb-collage-heading > p { margin: 12px 0 0; font: 11px/1.5 var(--font-body); color: inherit; letter-spacing: .04em; }
.wb-collage-grid { display: grid; flex: 1; min-height: 0; gap: 7px; }
.wb-collage-photo { position: relative; overflow: hidden; min-width: 0; min-height: 0; margin: 0; background: white; container-type: inline-size; }
.wb-collage-photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-keepsake[data-framing="full"] .wb-collage-photo > img { object-fit: contain; }
.wb-collage-photo figcaption {
  position: absolute; inset: auto 0 0; padding: 12px;
  display: flex; align-items: flex-end; gap: 10px;
  background: none; color: #fff;
  text-shadow: 0 1px 5px #000, 0 1px 2px #000;
}
.wb-collage-page.is-opening .is-lead > figcaption { inset: 12px 12px auto auto; max-width: 65%; padding: 0; text-align: right; align-items: flex-start; }
.wb-collage-page.is-opening .is-lead > figcaption > .wb-collage-number { display: none; }
.wb-collage-page.is-opening .is-lead > figcaption p { font-size: 13px; }
.wb-collage-number { flex-shrink: 0; font: italic 20px/1 var(--font-display); opacity: .9; }
.wb-collage-photo figcaption > div { min-width: 0; }
.wb-collage-photo figcaption p { margin: 0 0 3px; font: italic 16px/1.25 var(--font-display); overflow-wrap: anywhere; }
.wb-collage-photo figcaption small { display: block; font: 9px/1.4 var(--font-body); letter-spacing: .03em; overflow-wrap: anywhere; }
.wb-collage-intro { margin: 0; color: #4b5353; font: italic 16px/1.45 var(--font-display); white-space: pre-wrap; overflow-wrap: anywhere; background: none; }
.wb-collage-notes { padding: 26px; margin-bottom: 24px; background: var(--leaf); color: var(--leaf-ink); }
.wb-collage-notes h2 { margin: 22px 0; font: italic 38px/1.1 var(--font-display); }
.wb-collage-notes h3 { margin: 24px 0 8px; color: #626969; font: 10px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.wb-collage-notes p { font: 16px/1.65 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-collage-notes small { color: #626969; font: 10px/1.5 var(--font-body); }
.wb-keepsake[data-framing="full"] .wb-collage-heading { color: #172121; text-shadow: 0 1px 9px white, 0 1px 3px white; }
.wb-keepsake[data-framing="full"] .wb-collage-photo figcaption { color: #172121; text-shadow: 0 1px 6px white, 0 1px 2px white; }

/* A second composition turns the supporting images into loose paper prints. */
.wb-keepsake[data-composition="postcards"] .wb-collage-grid { gap: 12px; padding: 4px 8px 10px; }
.wb-keepsake[data-composition="postcards"] .wb-collage-photo:not(.is-lead) {
  border: 7px solid white; transform: rotate(var(--card-tilt)) translateY(-8px);
  box-shadow: 0 4px 14px #0003; z-index: 1;
}
.wb-keepsake[data-composition="postcards"] .wb-collage-photo:nth-child(2) { z-index: 2; }
.wb-keepsake[data-composition="postcards"] .wb-collage-heading h1 { font-size: clamp(30px, 9cqw, 70px); }

@media screen and (max-width: 700px) {
  .wb-keepsake-tools { padding: 10px 12px; gap: 8px 12px; }
  .wb-keepsake-tools button { padding-inline: 12px; font-size: 11px; }
  .wb-keepsake-tools > span { flex-basis: 100%; }
  .wb-keepsake article { padding: 12px 12px 32px; }
  .wb-collage-page { height: calc((100vw - 24px) * 1.42); min-height: 440px; padding: 10px; margin-bottom: 16px; gap: 7px; }
  .wb-collage-grid { gap: 4px; }
  .wb-print-masthead, .wb-print-foot { font-size: 6px; letter-spacing: .08em; gap: 8px; }
  .wb-keepsake h1 { font-size: 30px; }
  .wb-collage-heading { left: 13px; right: 12px; bottom: 16px; }
  .wb-collage-heading h1 { font-size: clamp(25px, 10cqw, 42px); }
  .wb-collage-heading > p { font-size: 8px; margin-top: 7px; }
  .wb-collage-intro { font-size: 11px; line-height: 1.35; }
  .wb-collage-photo figcaption { padding: 6px; gap: 5px; }
  .wb-collage-page.is-opening .is-lead > figcaption { inset: 7px 7px auto auto; }
  .wb-collage-page.is-opening .is-lead > figcaption p { font-size: 10px; }
  .wb-collage-photo figcaption p { font-size: 11px; }
  .wb-collage-photo figcaption small { font-size: 6px; }
  .wb-collage-number { font-size: 13px; }
  .wb-collage-notes { padding: 18px; }
  .wb-keepsake[data-composition="postcards"] .wb-collage-grid { gap: 5px; padding: 2px 3px 5px; }
  .wb-keepsake[data-composition="postcards"] .wb-collage-photo:not(.is-lead) { border-width: 4px; transform: rotate(var(--card-tilt)) translateY(-4px); }
  .wb-keepsake[data-composition="postcards"] .wb-collage-heading h1 { font-size: clamp(25px, 9cqw, 42px); }
}

@media print {
  @page { size: A4; margin: 8mm; }
  html:has(body.wb-printing-keepsake), body.wb-printing-keepsake { background: white !important; }
  body.wb-printing-keepsake { overflow: visible !important; }
  body.wb-printing-keepsake > :not(.wb-keepsake), body.wb-printing-keepsake::before { display: none !important; }
  .wb-keepsake { position: static; overflow: visible; background: white; outline: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .wb-keepsake-tools { display: none; }
  .wb-keepsake article { max-width: none; margin: 0; padding: 0; }
  .wb-collage-page { width: 100%; height: 280mm; padding: 0; margin: 0; gap: 3mm; background: white; box-shadow: none; break-inside: avoid; break-after: page; }
  .wb-collage-page:last-child { break-after: auto; }
  .wb-collage-grid { gap: 2mm; }
  .wb-keepsake h1 { font-size: 34pt; }
  .wb-collage-heading { left: 6mm; right: 5mm; bottom: 7mm; }
  .wb-collage-heading h1 { font-size: clamp(26pt, 10cqw, 54pt); }
  .wb-collage-heading > p { font-size: 8pt; margin-top: 2mm; }
  .wb-print-masthead, .wb-print-foot { font-size: 6pt; }
  .wb-collage-photo figcaption { padding: 3mm; gap: 2mm; }
  .wb-collage-page.is-opening .is-lead > figcaption { inset: 3mm 3mm auto auto; }
  .wb-collage-page.is-opening .is-lead > figcaption p { font-size: 9pt; }
  .wb-collage-photo figcaption p { font-size: 10pt; }
  .wb-collage-photo figcaption small { font-size: 6.5pt; }
  .wb-collage-number { font-size: 13pt; }
  .wb-collage-intro { font-size: 10pt; line-height: 1.4; }
  .wb-collage-notes { margin: 0; padding: 0; background: white; }
  .wb-collage-notes p { font-size: 11pt; orphans: 3; widows: 3; }
  .wb-collage-notes h2, .wb-collage-notes h3 { break-after: avoid; }
  .wb-keepsake[data-composition="postcards"] .wb-collage-grid { padding: 1mm 2mm 3mm; gap: 3mm; }
  .wb-keepsake[data-composition="postcards"] .wb-collage-photo:not(.is-lead) { border-width: 1.5mm; transform: rotate(var(--card-tilt)) translateY(-2mm); box-shadow: 0 1mm 3mm #0003; }
}

/* Travel desk: loose prints, handwritten margins, and little pieces of tape.
   The bounding boxes are intentional overlaps, rather than a disguised grid. */
.wb-desk-heading { position: relative; display: flex; align-items: center; gap: 24px; min-height: 98px; padding: 0 8px 6px; }
.wb-desk-heading > div:first-child { flex: 1; min-width: 0; }
.wb-desk-heading h1 { font: 70px/.92 var(--font-hand); letter-spacing: -.035em; color: #263c38; }
.wb-desk-heading h1.is-long-title { font-size: 48px; }
.wb-desk-heading p { margin: 8px 0 0; font: 19px/1.1 var(--font-hand); color: #63716a; }
.wb-desk-heading p { white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-desk-postmark { flex: 0 0 88px; width: 88px; height: 88px; border: 3px double #697c73; border-radius: 50%; padding: 10px 5px; display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: center; transform: rotate(11deg); color: #54685f; }
.wb-desk-postmark span { font: 7px/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .05em; }
.wb-desk-postmark strong { font: italic 13px/1.05 var(--font-display); overflow-wrap: anywhere; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-grid { display: block; position: relative; margin: 6px 10px 22px; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo {
  --desk-mat: 8px; --desk-caption-size: var(--desk-caption);
  position: absolute; left: var(--desk-x); top: var(--desk-y); width: var(--desk-w); height: var(--desk-h);
  transform: rotate(var(--desk-tilt)); overflow: visible; border: none; background: white;
  box-shadow: 0 3px 5px #26312b26, 0 12px 28px #26312b30; z-index: 1;
}
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo.is-lead { z-index: 0; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo:nth-child(2) { z-index: 4; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo:nth-child(3) { z-index: 3; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo:nth-child(4) { z-index: 2; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo:nth-child(5) { z-index: 5; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo::before {
  content: ""; position: absolute; left: 40%; top: -7px; width: 72px; height: 19px;
  background: #dce3d3ad; border-inline: 1px dashed #b9c7b955; transform: rotate(4deg); z-index: 1;
}
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo:nth-child(3n)::before { left: 12%; transform: rotate(-9deg); }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo > img {
  inset: var(--desk-mat) var(--desk-mat) auto; width: calc(100% - var(--desk-mat) - var(--desk-mat));
  height: calc(100% - var(--desk-mat) - var(--desk-mat) - var(--desk-caption-size));
}
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo.is-lead > img { top: calc(var(--desk-mat) + var(--desk-caption-size)); }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-page .wb-collage-photo > figcaption {
  inset: auto 10px 5px; padding: 0; max-width: none; gap: 8px; text-align: left; align-items: baseline;
  color: #3b514b; background: none; text-shadow: none;
}
.wb-keepsake[data-composition="traveldesk"] .wb-collage-page .wb-collage-photo.is-lead > figcaption { inset: var(--desk-mat) 10px auto; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-page .wb-collage-photo:nth-child(3) > figcaption { justify-content: flex-end; text-align: right; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo figcaption p { font: 18px/.95 var(--font-hand); margin: 0 0 2px; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-photo figcaption small { font: 9px/1.1 var(--font-body); color: #6b766e; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-number { font: 19px/1 var(--font-hand); color: #8c9b90; }
.wb-keepsake[data-composition="traveldesk"] .wb-collage-intro { margin: 0 14px; font: 23px/1.06 var(--font-hand); color: #52665d; transform: rotate(-.8deg); }

@media screen and (max-width: 700px) {
  .wb-desk-heading { min-height: 62px; gap: 10px; padding: 0 3px 3px; }
  .wb-desk-heading h1 { font: 37px/.92 var(--font-hand); }
  .wb-desk-heading h1.is-long-title { font-size: 28px; }
  .wb-desk-heading p { font-size: 12px; margin-top: 4px; }
  .wb-desk-postmark { flex-basis: 58px; width: 58px; height: 58px; padding: 5px 3px; gap: 2px; border-width: 2px; }
  .wb-desk-postmark span { font-size: 4.5px; }
  .wb-desk-postmark strong { font-size: 9px; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-grid { margin: 2px 4px 12px; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo { --desk-mat: 4px; --desk-caption-size: min(var(--desk-caption), 30px); box-shadow: 0 2px 4px #26312b30, 0 5px 10px #26312b22; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo::before { width: 38px; height: 11px; top: -4px; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-page .wb-collage-photo > figcaption { inset: auto 5px 3px; gap: 4px; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo figcaption p { font-size: 11px; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo figcaption small { font-size: 5.5px; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-number { font-size: 12px; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-intro { margin-inline: 5px; font-size: 14px; line-height: 1.02; }
}

@media print {
  .wb-desk-heading { min-height: 24mm; padding: 0 2mm 1mm; gap: 6mm; }
  .wb-desk-heading h1 { font: 48pt/.92 var(--font-hand); }
  .wb-desk-heading h1.is-long-title { font-size: 32pt; }
  .wb-desk-heading p { font-size: 13pt; margin-top: 2mm; }
  .wb-desk-postmark { flex-basis: 22mm; width: 22mm; height: 22mm; padding: 2mm 1mm; gap: 1mm; }
  .wb-desk-postmark span { font-size: 5pt; }
  .wb-desk-postmark strong { font-size: 9pt; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-grid { margin: 1mm 2mm 6mm; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo { --desk-mat: 1.5mm; --desk-caption-size: min(var(--desk-caption), 36px); box-shadow: 0 1mm 3mm #26312b30; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo::before { width: 19mm; height: 5mm; top: -2mm; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-page .wb-collage-photo > figcaption { inset: auto 2mm 1mm; gap: 2mm; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo figcaption p { font: 12pt/.95 var(--font-hand); }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-photo figcaption small { font-size: 6pt; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-number { font-size: 13pt; }
  .wb-keepsake[data-composition="traveldesk"] .wb-collage-intro { margin-inline: 3mm; font: 15pt/1.06 var(--font-hand); }
}