/* Hallmark · genre: editorial · macrostructure: Long Document · theme: Almanac
 * The journal is one continuous document. Dates, places and coordinates live in
 * the margin as marginalia — never as section eyebrows. Photographs break the
 * measure to the right; nothing is full-bleed. See tokens.css for the palette.
 */

@import url("tokens.css");

/* ── base ─────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Every cursor is drawn: a pencil to write with, a manicule to point, a lens to look closer,
 * a hand to drag the map. Absolute paths, since a url() in a custom property resolves where it's used. */
:root {
  --cursor-pencil:  url("/doodle/pencil.svg") 3 23, auto;          /* hotspot on the pencil's tip */
  --cursor-press:   url("/doodle/pencil-down.svg") 3 23, auto;
  --cursor-mark:    url("/doodle/highlighter.svg") 3 23, auto;
  --cursor-wait:    url("/doodle/pencil-wait.svg") 3 23, progress;
  --cursor-point:   url("/doodle/hand-point.svg") 9 2, pointer;    /* on the fingertip */
  --cursor-grab:    url("/doodle/hand-open.svg") 13 14, grab;
  --cursor-drag:    url("/doodle/hand-grab.svg") 13 14, grabbing;
  --cursor-zoom:    url("/doodle/magnifier.svg") 11 11, zoom-in;   /* in the middle of the lens */
  --cursor-blocked: url("/doodle/pencil-broken.svg") 13 13, not-allowed;
}

html {
  background: var(--color-paper);
  cursor: var(--cursor-pencil);
}
/* cursor.js: the pencil presses into the paper while the button is down, and marks with a highlighter */
html.is-pressing { cursor: var(--cursor-press); }
html.is-marking  { cursor: var(--cursor-mark); }

/* What the browser and Leaflet would otherwise point at with their own cursors.
 * Doubled classes, so this wins whichever stylesheet loads last. */
a:any-link, summary, select, label:has(input[type="checkbox"], input[type="radio"]) { cursor: var(--cursor-point); }
.leaflet-container.leaflet-container .leaflet-interactive,
.leaflet-container.leaflet-container a { cursor: var(--cursor-point); }
.leaflet-container.leaflet-grab,
.leaflet-container .leaflet-grab.leaflet-grab { cursor: var(--cursor-grab); }
.leaflet-dragging.leaflet-dragging .leaflet-grab,
.leaflet-dragging.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging.leaflet-dragging .leaflet-marker-draggable { cursor: var(--cursor-drag); }
.leaflet-crosshair.leaflet-crosshair,
.leaflet-crosshair.leaflet-crosshair .leaflet-interactive { cursor: var(--cursor-zoom); }
.leaflet-control.leaflet-control,
.leaflet-popup-pane.leaflet-popup-pane,
.leaflet-bar.leaflet-bar a.leaflet-disabled { cursor: var(--cursor-pencil); }

/* Paper: the linen is html's. */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--line);
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  font-size-adjust: 0.536;   /* Fraunces is small on the body (x-height 0.47); drawn up to read like a book face */
  font-variation-settings: "SOFT" 50;   /* ink that has bled a little into the paper */
}
button, input, select, textarea { font-size-adjust: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size-adjust: 0.5;   /* size headings by x-height, so they read the same whatever the hand */
  font-variation-settings: "SOFT" 100, "WONK" 1;   /* the leaning, wonky letters: rounder and more hand-set */
  line-height: var(--line);   /* the big titles below take two */
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0;
}

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img, video { max-width: 100%; height: auto; display: block; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: var(--rule-heavy) dashed var(--color-focus);   /* pencilled round it */
  outline-offset: 3px;
}

::selection { background: var(--color-accent-wash); }

.datum-face {
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--space-md);
  top: var(--space-md);
  z-index: var(--z-toast);
  background: var(--color-paper);
  padding: var(--space-xs) var(--space-sm);
  border: 10px solid;
  border-image: url("../doodle/button.svg") 10 stretch;
  background-clip: padding-box;
}

/* ── N6 · newspaper masthead ──────────────────────────────────────────────── */

.mast__line {
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-xs);
}

/* What the page is, set like the gate: a line of marginalia over a wonky title. */
.mast {
  max-width: var(--measure);
  margin: var(--space-lg) 0 var(--space-xl);
  margin-left: calc(var(--rail) + var(--space-xl));   /* apart: a narrow page's rail is a bare 0, which calc() won't add */
}
.mast h1 {
  font-size: var(--text-display-s);
  line-height: calc(2 * var(--line));
}

/* ── menu · bookmarks in the page's edge, or a dog ear in the corner ───────── */

.menu__ear {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-sticky);
  width: 3.75rem;
  height: 3.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: var(--cursor-point);
  transform-origin: 100% 0;
  transition: transform var(--dur-short) var(--ease-out);
}
.menu__ear:hover { transform: scale(1.1); }
.menu[data-open] .menu__ear { transform: scale(1.15); }
.menu__ear svg { display: block; width: 100%; height: 100%; overflow: visible; }
.menu__under { fill: var(--color-paper-3); }   /* the page beneath, where the corner is turned down */
.menu__flap,
.menu__lines,
.menu__cross {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu__flap { fill: var(--color-paper-2); transition: fill var(--dur-short) var(--ease-out); }
.menu__lines, .menu__cross { stroke-width: 2.2; }
.menu[data-open] .menu__flap { fill: var(--color-highlight); }
.menu__cross,
.menu[data-open] .menu__lines { display: none; }
.menu[data-open] .menu__cross { display: inline; }

/* Under the ear: a sheet that unfolds from the corner, the ways set below the ear so it never covers one.
 * Its top and right edges are the screen's, so only the other two are drawn. */
.menu__sheet { display: none; }
.menu[data-open] .menu__sheet {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-dropdown);
  padding: 4.25rem var(--space-lg) var(--space-sm) var(--space-xl);
  background: var(--color-paper-2);
  border: 0 solid;
  border-width: 0 0 10px 10px;
  border-image: url("../doodle/border.svg") 10 stretch;
  background-clip: padding-box;
  animation: unfold var(--dur-long) var(--ease-out);
}
@keyframes unfold {
  from { clip-path: inset(0 0 100% 100%); }
  to   { clip-path: inset(0); }
}

.menu__ways {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-datum);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
}
.menu__tab:last-child {
  margin-top: var(--space-xs);
  border-top: 6px solid;
  border-image: url("../doodle/rule.svg") 6 0 0 stretch;
}
.menu__ways a,
.menu__ways button {
  display: inline-block;
  padding-block: var(--space-sm);   /* a fingertip's worth */
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.3;
}
.menu__ways button {
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: var(--cursor-point);
}
.menu__ways a[aria-current="page"] {
  background: linear-gradient(var(--color-highlight), var(--color-highlight)) no-repeat 0 88% / 100% 0.5em;
  background-clip: content-box;
  background-origin: content-box;
}

/* Room right of the photographs: the ways stick out of the page's edge as bookmarks,
 * each tilted a little and pulled out a bit further under the hand. Only once the margin
 * is wide enough for them, or they would sit over the photographs. */
@media (min-width: 88rem) {
  .menu__ear { display: none; }
  .menu .menu__sheet,
  .menu[data-open] .menu__sheet {
    display: block;
    position: fixed;
    top: var(--space-2xl);
    right: 0;
    z-index: var(--z-sticky);
    padding: 0;
    background: none;
    border: 0;
    animation: none;
  }
  .menu__ways {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
    font-size: var(--text-xs);
    text-align: left;
  }
  .menu__tab {
    --tilt: -1.2deg;
    margin-right: -1rem;   /* the end you don't see runs on under the page */
    transform: rotate(var(--tilt));
    transform-origin: 100% 50%;
    transition: transform var(--dur-short) var(--ease-out);
  }
  .menu__tab:nth-child(3n + 2) { --tilt: 0.8deg; }
  .menu__tab:nth-child(3n)     { --tilt: -0.4deg; }
  .menu__tab:hover,
  .menu__tab:focus-within { transform: translateX(-0.4rem) rotate(var(--tilt)); }
  .menu__tab:has([aria-current="page"]) { transform: translateX(-0.55rem) rotate(var(--tilt)); }
  .menu__tab:last-child { margin-top: var(--space-md); border-top: 0; }

  /* bookmark.svg is the outline, notch and all, open at the right; the paper is a
   * layer underneath cut to the same notch, so the fill can turn to highlighter. */
  .menu__ways a,
  .menu__ways button {
    position: relative;
    isolation: isolate;
    display: block;
    max-width: 11rem;   /* 1rem of it is under the page */
    padding: var(--space-2xs) calc(var(--space-sm) + 1rem) var(--space-2xs) var(--space-xs);
    border: solid;
    border-width: 8px 0 8px 14px;
    border-image: url("../doodle/bookmark.svg") 10 0 10 18 stretch;
    text-align: left;
    text-wrap: balance;
  }
  .menu__ways a::before,
  .menu__ways button::before {
    content: "";
    position: absolute;
    inset: -8px 0 -8px -14px;
    z-index: -1;
    background: var(--color-paper-2);
    clip-path: polygon(2px 2px, 100% 2px, 100% calc(100% - 2px), 2px calc(100% - 2px), 12px 50%);
  }
  .menu__ways a[aria-current="page"] { background: none; }
  .menu__ways a[aria-current="page"]::before { background: var(--color-highlight); }
  .menu__ways :focus-visible { outline-offset: -4px; }
}

/* ── leaf · shared by journal and shelf ───────────────────────────────────── */

.journal {
  padding: var(--space-xl) var(--page-gutter) var(--space-4xl);
  max-width: 78rem;
  margin-inline: auto;
}

/* Chronological divider — a rule the month sits astride. */
.season {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: end;
  margin: 0 0 var(--space-lg);
}
.season:not(:first-child) { margin-top: var(--space-3xl); }
.season__label {
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: right;
}
.season__rule {
  border: 0 solid;
  border-width: 0 3px 6px;
  border-image: url("../doodle/hr.svg") 0 3 6 stretch;
  margin: 0;
}

.leaf {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure));
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}
.journal > .leaf:last-child { margin-bottom: 0; }

/* Marginalia — body-level micro-labels, right-aligned into the text block. */
.datum {
  text-align: right;
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  line-height: var(--line);
  color: var(--color-muted);
  display: flex;
  flex-direction: column;
  padding-top: var(--space-xs);
}
.datum__day {
  color: var(--color-ink);
  letter-spacing: 0.04em;
}
.datum__place {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  letter-spacing: 0;
  color: var(--color-ink);
  line-height: var(--line);
}
.datum__geo { font-size: 0.6875rem; }
.datum__hand {
  color: var(--color-neutral);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.datum__pin {
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-heavy) solid var(--color-highlight);
  align-self: flex-end;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.datum__pin:hover { border-bottom-color: var(--color-accent); }

.leaf__title {
  font-size: var(--text-xl);
  margin: 0 0 var(--space-sm);
}
.leaf__title a {
  text-decoration: none;
  background-image: linear-gradient(var(--color-highlight), var(--color-highlight));
  background-size: 0% 0.3em;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-short) var(--ease-out);
}
.leaf__title a:hover { background-size: 100% 0.3em; }

/* flourish.js: something pencilled in under an entry's title, in a strip of paper kept free for it
   (the padding), so it has room on every screen and never touches the words. */
.leaf__title, .sheet__title {
  position: relative;
  padding-bottom: var(--space-xl);
}
.flourish {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--color-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prose { max-width: var(--measure); }
.prose p { margin-bottom: var(--line); }
.prose p:last-child { margin-bottom: 0; }
.prose .lede::first-letter {
  font-family: var(--font-display);
  font-size: 3.1em;
  line-height: 0.82;
  font-weight: 500;
  float: left;
  padding: 0.06em var(--space-xs) 0 0;
  color: var(--color-ink-strong);
}

.leaf__more {
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  margin-top: var(--space-md);
}
.leaf__more a {
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-heavy) solid var(--color-highlight);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.leaf__more a:hover { border-bottom-color: var(--color-accent); }

/* ── the heart · one per name per entry ───────────────────────────────────── */

.like {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-md);
}
.like__btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2xs);
  padding: 0;
  border: 0;
  background: none;
  cursor: var(--cursor-point);
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-neutral);
  transition: color var(--dur-micro) var(--ease-out);
}
.like__btn:hover { color: var(--color-accent); }
/* Given is a resting state, not a pressed one — there is no way back out of it. */
.like__btn:disabled { color: var(--color-accent); cursor: var(--cursor-pencil); }
.like__heart {
  width: 2em;
  height: 2em;
  align-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.like__btn:disabled .like__heart { fill: var(--color-highlight); }
/* The names only ever render for us; for everyone else the count is the whole story. */
.like__who {
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  color: var(--color-neutral);
}
.like__who:not(:empty)::before { content: "— "; }

/* ── the shelf · one row per journey ──────────────────────────────────────── */

/* A shelf is for scanning: the rows sit close, and the titles carry no flourish to keep room for. */
.leaf.voyage { margin-bottom: var(--space-xl); }
.voyage .leaf__title { padding-bottom: 0; }

.voyage__ink {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
  margin-left: var(--space-xs);
  vertical-align: 0.15em;
}

/* The cover is a contact sheet, every photograph of the journey small and in order —
   the journey is the subject, not any one picture. */
.voyage__plate {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  width: fit-content;
  margin-top: var(--space-md);
  max-width: var(--measure);
  border: 10px solid;
  border-image: url("../doodle/border.svg") 10 stretch;
  background-clip: padding-box;
  overflow: hidden;
}
.voyage__plate img {
  width: 4.5rem;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.92);
  transition: filter var(--dur-short) var(--ease-out);
}
.voyage__plate:hover img { filter: none; }

.voyage__empty {
  color: var(--color-neutral);
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
}
.voyage__empty a { color: var(--color-accent); }

.leaf__more a + a { margin-left: var(--space-md); }
.shelf__add { margin-left: calc(var(--rail) + var(--space-xl)); }

/* ── plates · photographs break the measure to the right ──────────────────── */

.plate {
  margin: var(--space-lg) 0 0;
  display: grid;
  gap: var(--space-md);
  width: min(100%, calc(var(--measure) + 8vw));
}
.plate[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plate[data-n="3"] {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.plate[data-n="3"] > :first-child { grid-row: span 2; }
.plate[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plate[data-n="many"] { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }

/* figure → button → img all stretch, so a spanning plate fills its two rows. */
.plate figure,
.plate button.shot { margin: 0; position: relative; display: grid; min-height: 0; }

.plate img,
.plate video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  background: var(--color-paper-3);
  border-radius: var(--radius-xs);
}
/* A lone photograph keeps its own shape, but a tall one can’t run the page. */
.plate[data-n="1"] img,
.plate[data-n="1"] video {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 38rem;
}

/* The spanning plate fills the two stacked beside it rather than sitting short. */
.plate[data-n="3"] > :first-child img,
.plate[data-n="3"] > :first-child video { aspect-ratio: auto; }

.plate button.shot {
  padding: 0;
  border: 0;
  background: none;
  cursor: var(--cursor-zoom);
  width: 100%;
}
.plate button.shot img {
  transition: opacity var(--dur-short) var(--ease-out);
}
.plate button.shot:hover img { opacity: 0.9; }

.plate .film::after {
  content: "FILM";
  position: absolute;
  left: var(--space-xs);
  bottom: var(--space-xs);
  font-family: var(--font-datum);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--color-paper);
  background: var(--color-scrim);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-xs);
  pointer-events: none;
}

/* ── single entry ─────────────────────────────────────────────────────────── */

.sheet {
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  max-width: 78rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure));
  gap: var(--space-xl);
}

.sheet__title {
  font-size: var(--text-2xl);
  line-height: calc(2 * var(--line));
  margin: 0 0 var(--space-lg);
}

.sheet__map {
  margin-top: var(--space-xl);
  height: 15rem;
  border: 10px solid;
  border-image: url("../doodle/border.svg") 10 stretch;
  background-clip: padding-box;
}

.turn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 6px solid;
  border-image: url("../doodle/rule.svg") 6 0 0 stretch;   /* a pencil line, not a hairline */
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.turn a {
  color: var(--color-muted);
  text-decoration: none;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.turn a:hover { color: var(--color-accent); }

/* ── the map ──────────────────────────────────────────────────────────────── */

.atlas {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  min-height: 68vh;
  border-top: 6px solid;
  border-image: url("../doodle/rule.svg") 6 0 0 stretch;   /* a pencil line, not a hairline */
}

.atlas__index {
  border-right: 6px solid;
  border-image: url("../doodle/rule-v.svg") 0 6 0 0 stretch;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
  max-height: 78vh;
  overflow-y: auto;
}
.atlas__index h2 {
  font-size: var(--text-md);
  margin-bottom: var(--space-md);
}
.atlas__index ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stop {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  border-bottom: 4px solid; border-image: url("../doodle/rule.svg") 0 0 6 stretch;
  cursor: var(--cursor-point);
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.stop:hover, .stop.is-active { background: var(--color-paper-2); }
.stop:active { background: var(--color-paper-3); }
.stop:disabled { opacity: 0.55; cursor: var(--cursor-blocked); }
.stop.is-active .stop__n { background: var(--color-accent); color: var(--color-paper); }
.stop__n {
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  background: url("../doodle/ring.svg") center / 100% no-repeat;
  border-radius: 50%;
  transition: background-color var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out);
}
.stop__title { display: block; font-size: var(--text-sm); line-height: 1.35; }
.stop__meta {
  display: block;
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  color: var(--color-muted);
  margin-top: var(--space-3xs);
}

/* The world map's index: journeys rather than stops, each with its ink. */
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
}
.legend li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  border-bottom: 4px solid; border-image: url("../doodle/rule.svg") 0 0 6 stretch;
}
.legend .stop { border-bottom: 0; }
.legend__ink {
  width: 0.9rem;
  height: 0.9rem;
  justify-self: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 45%, transparent);
}
.legend .stop.is-active .legend__ink { background: var(--ink); }
.legend__go {
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-xs);
}
.legend__go:hover { color: var(--color-accent); }

.atlas__index .hint {
  font-size: var(--text-sm);
  color: var(--color-neutral);
  margin-top: var(--space-md);
}

#atlas-canvas { min-height: 68vh; }

/* Grey the tiles toward the paper so the map belongs to the page. */
.leaflet-tile-pane { filter: grayscale(0.85) contrast(0.96) brightness(1.02); }
.leaflet-container {
  /* Contain Leaflet's own z-indexes (controls sit at 1000) so overlays like the lightbox cover the map. */
  isolation: isolate;
  background: var(--color-paper-2);
  font-family: var(--font-body);
}
.leaflet-control-attribution {
  font-family: var(--font-datum);
  font-size: 0.625rem;
  background: var(--color-paper);
  color: var(--color-muted);
}
.leaflet-bar.leaflet-bar {
  border: 8px solid;
  border-image: url("../doodle/border.svg") 10 stretch;
  border-radius: 0;
  box-shadow: none;
  background: var(--color-paper);
  background-clip: padding-box;
}
.leaflet-bar a {
  font-family: var(--font-datum);
  color: var(--color-ink);
  background: var(--color-paper);
  border-bottom: 4px solid;
  border-image: url("../doodle/rule.svg") 0 0 6 stretch;
}
.leaflet-bar a:hover { background: var(--color-paper-2); }

.pin {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: url("../doodle/ring.svg") center / 100% no-repeat var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  transition: transform var(--dur-short) var(--ease-out),
              background-color var(--dur-micro) var(--ease-out);
}
/* Hover fills; only the selected stop also grows. One signal per state. */
.leaflet-marker-icon:hover .pin,
.pin.is-active {
  background: var(--color-accent);
  color: var(--color-paper);
}
.pin.is-active { transform: scale(1.18); }

.leaflet-popup-content-wrapper {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 10px solid;
  border-image: url("../doodle/border.svg") 10 stretch;
  background-clip: padding-box;
  border-radius: 0;
  box-shadow: none;
}
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-content { margin: var(--space-sm); font-size: var(--text-sm); }
.leaflet-popup-content strong { font-family: var(--font-display); font-weight: 600; }
.leaflet-popup-content .datum-face { color: var(--color-muted); display: block; }
.leaflet-popup-content a { color: var(--color-accent); }
.leaflet-control-attribution a { color: var(--color-ink); }

/* ── the gate ─────────────────────────────────────────────────────────────── */

.gate {
  min-height: 82vh;
  display: grid;
  align-content: center;
  padding: var(--space-2xl) var(--page-gutter);
  max-width: 46rem;
  margin-inline: 0;
  margin-left: min(12vw, 9rem);
  position: relative;
  z-index: 0;   /* the scribbles go under the words, not under the paper */
}
/* scribbles.js: doodles pencilled in round the edges while you think of the word. Faint, and never over the words. */
.gate .scribbles {
  position: absolute;   /* scribbles.js stretches it over the whole page */
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  color: color-mix(in oklab, var(--color-ink) 55%, transparent);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scribbles .mark, .flourish .mark { stroke: color-mix(in oklab, var(--color-highlight) 80%, transparent); }
.gate .eyes {
  width: 8rem;
  height: auto;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}
.gate h1 {
  font-size: var(--text-display-s);
  line-height: calc(2 * var(--line));
  margin-bottom: var(--space-md);
}
.gate p { max-width: 46ch; color: var(--color-muted); }
.gate form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.gate input { min-width: min(18rem, 100%); }
/* Reserved even when empty, so an error never shoves the form upward. */
.gate__error {
  color: var(--color-error);
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  margin-top: var(--space-sm);
  min-height: 1lh;
}

/* ── forms ────────────────────────────────────────────────────────────────── */

.compose {
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  max-width: 62rem;
  margin-inline: auto;
}
.compose h1 {
  font-size: var(--text-display-s);
  line-height: calc(2 * var(--line));
  margin-bottom: var(--space-xl);
}

.field { margin-bottom: var(--space-lg); }
.field > label,
.field__legend {
  display: block;
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-2xs);
}
.field .hint,
.compose > .hint {
  font-size: var(--text-sm);
  color: var(--color-neutral);
  margin: var(--space-2xs) 0 0;
}
/* A standfirst for a form that needs one sentence of orientation. */
.compose > .hint--lede {
  max-width: var(--measure);
  color: var(--color-muted);
  margin: calc(-1 * var(--space-md)) 0 var(--space-xl);
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="file"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line);
  color: var(--color-ink);
  background: transparent;
  /* DoodleCSS (MIT, static/doodle/LICENSE): a hand-drawn frame stretched round the field */
  border: 10px solid;
  border-image: url("../doodle/button.svg") 10 stretch;
  background-clip: padding-box;
  padding: var(--space-2xs) var(--space-xs);
  transition: background-color var(--dur-micro) var(--ease-out);
}
input:focus, select:focus, textarea:focus { background-color: oklch(100% 0 0 / 0.6); }
/* Focus is pencilled inside the drawn frame rather than boxed round it. */
:where(input, select, textarea, .btn):focus-visible {
  outline: var(--rule-heavy) dashed var(--color-accent);
  outline-offset: -8px;
}
input::placeholder, textarea::placeholder { color: var(--color-neutral); }
input:disabled, textarea:disabled, select:disabled {
  opacity: 0.55;
  cursor: var(--cursor-blocked);
}
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  outline: var(--rule-heavy) dashed var(--color-error);
  outline-offset: -6px;
}
textarea {
  min-height: 16rem;
  border-image-source: url("../doodle/border.svg");
  background-color: var(--color-paper);
  padding: var(--space-xs) var(--space-sm);
  line-height: var(--line);
  resize: vertical;
}
select {
  appearance: none;
  padding-right: 2rem;
  background-image: url("../doodle/caret.svg");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

input[type="file"] { padding: var(--space-xs); cursor: var(--cursor-point); }
input[type="file"]::file-selector-button {
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: none;
  border: 8px solid;
  border-image: url("../doodle/button.svg") 10 stretch;
  padding: var(--space-3xs) var(--space-sm);
  margin-right: var(--space-md);
  cursor: var(--cursor-point);
  transition: color var(--dur-micro) var(--ease-out);
}
input[type="file"]::file-selector-button:hover { color: var(--color-accent); }
input[type="date"] { font-family: var(--font-datum); font-variant-numeric: tabular-nums; }

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-md);
}

.btn {
  font-family: var(--font-datum);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-ink);
  background: color-mix(in oklab, var(--color-highlight) 70%, transparent);   /* highlighter */
  background-clip: padding-box;
  border: 10px solid;
  border-image: url("../doodle/button.svg") 10 stretch;
  padding: var(--space-2xs) var(--space-md);
  line-height: 1.5;
  cursor: var(--cursor-point);
  text-decoration: none;
  display: inline-block;
  transition: background-color var(--dur-micro) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
}
.btn:hover { color: var(--color-accent); background-color: var(--color-highlight); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: var(--cursor-blocked);
  transform: none;
  color: var(--color-neutral);
  background-color: transparent;
}
.btn[data-state="loading"] { opacity: 0.75; cursor: var(--cursor-wait); }
.btn[data-state="loading"]::after {
  content: " ·";
  animation: ellipsis 1.1s steps(4, end) infinite;
}
@keyframes ellipsis {
  0%   { content: " ·"; }
  33%  { content: " ··"; }
  66%  { content: " ···"; }
  100% { content: " ·"; }
}

.btn--quiet { background: none; color: var(--color-muted); }
.btn--quiet:hover { background: none; color: var(--color-accent); }
.btn--danger { background: none; color: var(--color-error); }
.btn--danger:hover { background: var(--color-accent-wash); background-clip: padding-box; color: var(--color-error); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 6px solid;
  border-image: url("../doodle/rule.svg") 6 0 0 stretch;   /* a pencil line, not a hairline */
}
.actions .spacer { flex: 1 1 auto; }

/* location picker */
#picker {
  height: 20rem;
  border: 10px solid;
  border-image: url("../doodle/border.svg") 10 stretch;
  background-clip: padding-box;
  margin-top: var(--space-xs);
}
.search {
  display: flex;
  gap: var(--space-xs);
  align-items: stretch;
}
.search input { flex: 1 1 auto; }
.results {
  list-style: none;
  margin: var(--space-xs) 0 0;
  padding: 0;
  background: var(--color-paper-2);
  border: 10px solid;
  border-image: url("../doodle/border.svg") 10 stretch;
  background-clip: padding-box;
}
.results:empty { display: none; }
.results li + li { border-top: 4px solid; border-image: url("../doodle/rule.svg") 6 0 0 stretch; }
.results button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-sm);
  cursor: var(--cursor-point);
}
.results button:hover { background: var(--color-paper-3); }
.results button:active { color: var(--color-accent); }
.results button:disabled { opacity: 0.55; cursor: var(--cursor-blocked); }

.attached {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.attached figure { margin: 0; position: relative; }
.attached img, .attached video {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--color-paper-3);
  border-radius: var(--radius-xs);
}
.attached .drop {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  font-family: var(--font-datum);
  font-size: 0.625rem;
  line-height: 1;
  padding: var(--space-3xs) var(--space-2xs);
  color: var(--color-ink);
  background: var(--color-paper);
  background-clip: padding-box;
  border: 6px solid;
  border-image: url("../doodle/button.svg") 10 stretch;
  cursor: var(--cursor-point);
}
.attached .drop:hover { color: var(--color-error); }
.attached .rank {
  position: absolute;
  left: var(--space-2xs);
  bottom: var(--space-2xs);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-datum);
  font-size: 0.625rem;
  line-height: 1;
  padding: var(--space-2xs);
  color: var(--color-paper);
  background: var(--color-scrim);
  border-radius: var(--radius-xs);
}
.attached[data-many="no"] .rank { display: none; }
.attached .nudge {
  font: inherit;
  line-height: 1;
  padding: 0 var(--space-2xs);
  color: inherit;
  background: none;
  border: 0;
  cursor: var(--cursor-point);
}
.attached .nudge:disabled { opacity: 0.35; cursor: var(--cursor-pencil); }
.attached .ord { font-variant-numeric: tabular-nums; }

/* ── empty state — typographic, never fake photographs ────────────────────── */

.nothing {
  grid-column: 1 / -1;
  max-width: 48ch;
  padding: var(--space-2xl) 0;
}
.nothing h2 { font-size: var(--text-lg); margin-bottom: var(--space-sm); }
.nothing p { color: var(--color-muted); }

/* ── Ft4 · dense colophon ─────────────────────────────────────────────────── */

.colophon {
  border-top: 6px solid;
  border-image: url("../doodle/rule.svg") 6 0 0 stretch;   /* a pencil line, not a hairline */
  padding: var(--space-lg) var(--page-gutter) var(--space-2xl);
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  line-height: var(--line);
  color: var(--color-muted);
  max-width: 78rem;
  margin-inline: auto;
}
.colophon p { max-width: 72ch; margin: 0; }
.colophon a { color: var(--color-muted); text-decoration-color: var(--color-rule); }
.colophon a:hover { color: var(--color-accent); }

/* ── lightbox ─────────────────────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-scrim);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  padding: var(--space-lg);
  border: 0;
  opacity: 0;
  animation: lift var(--dur-long) var(--ease-out) forwards;
}
.lightbox[hidden] { display: none; }
.lightbox img, .lightbox video {
  max-height: 82vh;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--radius-xs);
}

/* The pictures sit side by side on one track; only a window of it shows. */
.lightbox__stage {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.lightbox__track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.lightbox__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Flex, not grid: a stretched flex item has a definite height, so the picture
   has something to measure its percentages against. In a grid the auto track
   took its size from the picture, and the cap never bit. */
.lightbox__slide img,
.lightbox__slide video { max-width: 100%; max-height: 100%; }
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-md);
  font-family: var(--font-datum);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--color-paper);
}
.lightbox__bar button {
  font: inherit;
  background: var(--color-paper);
  border: 8px solid;
  border-image: url("../doodle/button.svg") 10 stretch;
  background-clip: padding-box;
  color: var(--color-ink);
  padding: var(--space-3xs) var(--space-sm);
  cursor: var(--cursor-point);
  white-space: nowrap;
}
.lightbox__bar button:hover { background-color: var(--color-highlight); }
.lightbox__bar button:disabled { opacity: 0.4; cursor: var(--cursor-blocked); }

@keyframes lift {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: none; }
}

/* ── one orchestrated entrance · each leaf written in, left to right ─────── */

.reveal {
  animation: write var(--dur-long) var(--ease-in-out) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes write {
  from { clip-path: inset(-1rem 100% -1rem -1rem); }
  to   { clip-path: inset(-1rem -1rem -1rem -1rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: none; }   /* already written */
  .lightbox { animation: fade 150ms linear forwards; }
  @keyframes fade { to { opacity: 1; transform: none; } }
}


/* ── narrower than the rail ───────────────────────────────────────────────── */

@media (max-width: 60rem) {
  .atlas { grid-template-columns: minmax(0, 1fr); }
  .atlas__index {
    border-right: 0;
    border-top: 6px solid;
    border-image: url("../doodle/rule.svg") 6 0 0 stretch;
    max-height: none;
    order: 2;
  }
  #atlas-canvas { min-height: 56vh; order: 1; }
}

@media (max-width: 48rem) {
  :root { --rail: 0; }

  .leaf, .sheet, .season {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .leaf { margin-bottom: var(--space-2xl); }
  .shelf__add, .mast { margin-left: 0; }
  .season:not(:first-child) { margin-top: var(--space-2xl); }
  .season__label { text-align: left; }
  .season__rule { display: none; }

  /* Marginalia folds into a single line above the entry. */
  .datum {
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-sm);
    padding-top: 0;
    padding-bottom: var(--space-2xs);
    border-bottom: 4px solid; border-image: url("../doodle/rule.svg") 0 0 6 stretch;
  }
  .datum__pin { align-self: baseline; margin-left: auto; }

  .plate { width: 100%; }
  .plate[data-n="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .plate[data-n="3"] > :first-child { grid-row: auto; grid-column: span 2; }
  .plate[data-n="3"] > :first-child img,
  .plate[data-n="3"] > :first-child video { aspect-ratio: 4 / 3; }

  .gate { margin-left: 0; min-height: 70vh; }
  /* No margins on a phone, so the doodles get paper between the title, the words and the form. */
  .gate h1 { margin-bottom: var(--space-2xl); }
  .gate form { margin-top: var(--space-2xl); }
  .sheet__title { font-size: var(--text-xl); }
}

@media (max-width: 26rem) {
  .plate[data-n="4"], .plate[data-n="many"] { grid-template-columns: minmax(0, 1fr); }
  .lightbox__bar { gap: var(--space-sm); }
}

@media print {
  .lightbox, .turn, .like, .menu { display: none; }
  html { background: none; }
}