/* The Kats Family: the book as the design system.
   leather = the black hardcover · paper = the aged pages · ink = print · red/green = the coat of arms
   blue = the family's ballpoint (reserved for things the family adds). */
:root {
  --leather: oklch(0.2 0.012 45);
  --leather-2: oklch(0.255 0.014 45);
  --leather-3: oklch(0.32 0.016 45);
  --gilt: oklch(0.84 0.075 84);
  --gilt-soft: oklch(0.72 0.05 80);
  --paper: oklch(0.968 0.016 86);
  --paper-2: oklch(0.935 0.022 84);
  --paper-3: oklch(0.89 0.028 82);
  --ink: oklch(0.25 0.012 50);
  --ink-soft: oklch(0.45 0.014 60);
  --rule: oklch(0.84 0.02 80);
  --red: oklch(0.5 0.165 26);
  --red-soft: oklch(0.93 0.035 30);
  --green: oklch(0.6 0.075 135);
  --blue: oklch(0.44 0.14 262);
  --mark: oklch(0.9 0.09 95);
  --display: 'Old Standard TT', 'Times New Roman', serif;
  --ui: 'PT Sans', system-ui, sans-serif;
  --hand: 'Caveat', cursive;
  --r: 10px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(0.225 0.012 50); --paper-2: oklch(0.265 0.014 50); --paper-3: oklch(0.32 0.016 50);
    --ink: oklch(0.92 0.02 84); --ink-soft: oklch(0.74 0.02 80); --rule: oklch(0.36 0.015 60);
    --red-soft: oklch(0.32 0.06 28); --mark: oklch(0.45 0.08 90); --blue: oklch(0.72 0.11 262);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 18px/1.55 var(--ui); color: var(--ink); background: var(--paper); min-height: 100dvh; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--paper); padding: 8px 12px; }
.muted { color: var(--ink-soft); }
.err { padding: var(--pad); }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 10px var(--pad); padding-top: max(10px, env(safe-area-inset-top));
  background: var(--leather); color: var(--gilt); }
.bar-home { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 20px; white-space: nowrap; }
.bar-home img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.bar-nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.bar-nav a { text-decoration: none; padding: 8px 12px; border-radius: 999px; color: var(--gilt-soft); white-space: nowrap; font-size: 16px; }
.bar-nav a:hover { color: var(--gilt); }
.bar-nav a[aria-current] { color: var(--leather); background: var(--gilt); }
.lang { display: inline-flex; border: 1px solid oklch(0.84 0.075 84 / 0.45); border-radius: 999px; padding: 3px; background: none; flex: none; }
.lang span { padding: 4px 9px; border-radius: 999px; font-size: 14px; letter-spacing: 0.04em; color: var(--gilt-soft); }
.lang span.on { background: var(--gilt); color: var(--leather); }
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; row-gap: 6px; }
  .bar-home span { display: none; }
  .bar-nav { order: 3; width: 100%; margin: 0; }
  .lang { margin-left: auto; }
}

/* ---------- cover (login + home hero): the black hardcover ---------- */
.cover { position: relative; min-height: 100dvh; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 20%, var(--leather-3), var(--leather) 60%),
    var(--leather);
  color: var(--gilt); padding: calc(var(--pad) * 1.5) var(--pad); overflow: hidden; }
.cover::before { /* the embossed frame of the binding */
  content: ''; position: absolute; inset: clamp(10px, 2.2vw, 24px); border: 1px solid oklch(0.84 0.075 84 / 0.28);
  border-radius: 4px; pointer-events: none; }
.cover::after { content: ''; position: absolute; inset: clamp(16px, 3.2vw, 34px); border: 1px solid oklch(0.84 0.075 84 / 0.14); border-radius: 2px; pointer-events: none; }
.cover-inner { position: relative; z-index: 1; max-width: 640px; text-align: center; display: grid; justify-items: center; gap: 18px; }
.cover-author { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(18px, 2.4vw, 22px); color: var(--gilt-soft); letter-spacing: 0.02em; }
.cover-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 6.4vw, 64px); line-height: 1.08; color: var(--gilt); text-wrap: balance; }
.cover-lead { margin: 0; max-width: 34ch; color: var(--gilt-soft); font-size: 19px; }
.cover-place { margin: 0; font-family: var(--display); font-style: italic; color: var(--gilt-soft); }
.arms { width: clamp(150px, 26vw, 250px); height: auto; border-radius: 6px; box-shadow: 0 1px 0 oklch(1 0 0 / 0.06), 0 18px 50px oklch(0 0 0 / 0.45); }
.cover.home .arms { margin: 10px 0 4px; }
.lang-float { position: absolute; top: max(28px, env(safe-area-inset-top)); right: max(28px, env(safe-area-inset-right)); z-index: 2; }
.cover.home { min-height: 88dvh; }

.pass { width: min(100%, 360px); display: grid; gap: 10px; margin-top: 8px; text-align: left; }
.pass label { font-size: 15px; color: var(--gilt-soft); letter-spacing: 0.02em; }
.pass-row { display: flex; gap: 8px; }
.pass input { flex: 1; min-width: 0; padding: 14px 16px; border-radius: var(--r); border: 1px solid oklch(0.84 0.075 84 / 0.4);
  background: oklch(0.15 0.01 45); color: var(--gilt); font-size: 20px; }
.pass button { padding: 0 22px; border-radius: var(--r); border: 0; background: var(--gilt); color: var(--leather); font-weight: 700; font-size: 18px; }
.pass-err { margin: 0; color: oklch(0.8 0.1 30); }
.pass-help { margin: 4px 0 0; font-size: 14px; color: oklch(0.72 0.05 80 / 0.8); }

/* ---------- home doors: a contents list, not a card grid ---------- */
.doors { max-width: 1080px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) var(--pad) clamp(40px, 8vw, 96px); display: grid; gap: clamp(20px, 3vw, 28px); }
.door { display: grid; grid-template-columns: auto 1fr clamp(96px, 22vw, 240px); gap: clamp(14px, 3vw, 36px); align-items: center;
  text-decoration: none; padding: clamp(14px, 2.4vw, 22px) 0; border-bottom: 1px solid var(--rule); }
.door:first-child { border-top: 1px solid var(--rule); }
.door-num { font-family: var(--display); font-size: clamp(30px, 5vw, 54px); color: var(--red); width: 1.6em; text-align: center; }
.door-body { display: grid; gap: 6px; }
.door-title { font-family: var(--display); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; }
.door-sub { color: var(--ink-soft); max-width: 52ch; }
.door-cta { font-weight: 700; color: var(--red); margin-top: 4px; }
.door-cta.is-soon { font-weight: 400; font-family: var(--hand); font-size: 24px; color: var(--blue); }
.door-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; filter: sepia(0.15); transition: transform 0.5s var(--ease); }
.door:hover .door-img { transform: scale(1.03); }
.door:hover .door-title { color: var(--red); }
@media (max-width: 560px) { .door { grid-template-columns: auto 1fr; } .door-img { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }

/* ---------- soon ---------- */
.soon { max-width: 640px; margin: 0 auto; padding: clamp(40px, 10vw, 120px) var(--pad); }
.soon h1 { font-family: var(--display); font-weight: 400; font-size: clamp(34px, 5vw, 52px); margin: 0 0 6px; }
.soon-tag { font-family: var(--hand); font-size: 28px; color: var(--blue); margin: 0 0 12px; }

/* ---------- the reader ---------- */
.reader { --leaf-h: calc(100dvh - 190px); background: var(--paper-2); min-height: calc(100dvh - 56px); display: flex; flex-direction: column; }
.reader-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px var(--pad); background: var(--paper); border-bottom: 1px solid var(--rule); }
.reader-where { display: grid; min-width: 0; flex: 1 1 220px; }
.reader-section { font-family: var(--display); font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-page { font-size: 14px; color: var(--ink-soft); }
.seg { display: inline-flex; background: var(--paper-3); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-soft); }
.seg button[aria-checked='true'] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px oklch(0 0 0 / 0.12); font-weight: 700; }
.reader-tools { display: flex; gap: 6px; }
.tool { border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 7px 14px; font-size: 15px; }
.tool:hover { border-color: var(--ink-soft); }
.scan-toggle[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reader[data-mode='en'] .scan-toggle { display: none; }
@media (max-width: 899px) { .only-wide { display: none; } }

.spread { flex: 1; display: grid; grid-template-columns: 1fr; justify-items: center; align-items: start; gap: clamp(12px, 2vw, 28px); padding: clamp(12px, 2.5vw, 28px) var(--pad); touch-action: manipulation; }
.reader[data-mode='both'] .spread { grid-template-columns: 1fr 1fr; }
.reader[data-mode='ru'] .leaf-en, .reader[data-mode='en'] .leaf-ru { display: none; }
.leaf { margin: 0; display: grid; gap: 6px; justify-items: center; width: 100%; }
.leaf img { max-height: var(--leaf-h); width: auto; max-width: 100%; background: var(--paper);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.12), 0 10px 30px oklch(0.3 0.03 60 / 0.18); border-radius: 2px; }
.reader[data-mode='both'] .leaf-ru { justify-items: end; }
.reader[data-mode='both'] .leaf-en { justify-items: start; }
.leaf figcaption { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.06em; text-transform: uppercase; }
.reader:not([data-mode='both']) .leaf figcaption { display: none; }
@media (max-width: 899px) { .reader { --leaf-h: none; } .leaf img { width: 100%; max-width: 640px; } }

.turn { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 10px var(--pad); padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: oklch(from var(--paper) l c h / 0.94); border-top: 1px solid var(--rule); backdrop-filter: blur(8px); }
.turn button { width: 54px; height: 44px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper); font-size: 22px; }
.turn button:disabled { opacity: 0.35; cursor: default; }
.turn-jump { flex: 1; display: flex; }
.turn-jump input { width: 100%; accent-color: var(--red); }

.panel { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); border-left: 1px solid var(--rule);
  box-shadow: -20px 0 50px oklch(0 0 0 / 0.16); display: flex; flex-direction: column; animation: slide 0.35s var(--ease); }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top)); border-bottom: 1px solid var(--rule); }
.panel-head h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; }
.panel-x { border: 0; background: none; font-size: 32px; line-height: 1; width: 44px; height: 44px; }
.panel-body { overflow: auto; padding: 8px 18px 28px; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; text-decoration: none; border-bottom: 1px dotted var(--rule); }
.toc .lvl1 a { font-family: var(--display); font-size: 19px; }
.toc .lvl2 a { padding-left: 18px; font-size: 16px; color: var(--ink-soft); }
.toc .here a { color: var(--red); }
.toc-n { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.search input { width: 100%; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper-2); margin: 10px 0; }
.hits ol { list-style: none; padding: 0; margin: 0; }
.hits a { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.hit-where { font-weight: 700; font-size: 15px; }
.hit-lang { font-weight: 400; font-size: 12px; color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.hit-snip { font-size: 15px; color: var(--ink-soft); }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }
.dl { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.dl a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r); text-decoration: none; background: var(--paper-2); }
.dl a:hover { border-color: var(--red); }
.dl-size { font-size: 14px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- suggest form ---------- */
.tool-suggest { color: var(--blue); border-color: oklch(from var(--blue) l c h / 0.4); }
.suggest { display: grid; gap: 12px; padding: 6px 0 16px; }
.suggest-about { margin: 0; font-family: var(--display); font-size: 19px; }
.suggest label { display: grid; gap: 6px; font-size: 15px; font-weight: 700; }
.suggest textarea, .suggest input[name='name'] { font: inherit; font-weight: 400; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper-2); resize: vertical; }
.suggest-sides { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.suggest-sides legend { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.suggest-sides label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.suggest-note { margin: 0; font-size: 14px; color: var(--ink-soft); }
.suggest-err { margin: 0; color: var(--red); }
.suggest button[type='submit'] { justify-self: start; padding: 11px 20px; border-radius: var(--r); border: 0; background: var(--ink); color: var(--paper); font-weight: 700; }
.suggest-thanks { font-family: var(--hand); font-size: 26px; color: var(--blue); margin: 8px 0; }

/* ---------- admin ---------- */
.admin { max-width: 860px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--pad); }
.admin h1 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 5vw, 46px); margin: 0 0 6px; }
.admin h2 { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 30px 0 8px; border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.admin .pass input { background: var(--paper-2); color: var(--ink); border-color: var(--rule); }
.admin .pass button { background: var(--ink); color: var(--paper); }
.sg-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sg-item { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-2); }
.sg-item p { margin: 6px 0; }
.sg-meta { font-size: 15px; }
.sg-actions { display: flex; gap: 8px; margin-top: 8px; }
.sg-actions button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font-size: 15px; }
.sg-actions button.ghost { background: none; color: var(--ink); border-color: var(--rule); }

/* ---------- family tree ---------- */
.tree { display: flex; flex-direction: column; min-height: calc(100dvh - 56px); }
.tree-bar { position: relative; display: grid; gap: 10px; padding: 12px var(--pad); background: var(--paper); border-bottom: 1px solid var(--rule); }
.tree-search input { width: min(100%, 520px); padding: 11px 14px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper-2); }
.tree-found { position: absolute; z-index: 10; top: 62px; left: var(--pad); width: min(calc(100% - 2 * var(--pad)), 520px); max-height: 50vh; overflow: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: 0 14px 40px oklch(0 0 0 / 0.16); }
.tree-found a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid var(--rule); }
.tree-found a:hover { background: var(--paper-2); }
.tree-found p { padding: 10px 14px; margin: 0; }
.branches { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.branches button { flex: none; border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: 15px; }
.branches button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tree-canvas { position: relative; overflow: auto; padding: 28px var(--pad) 36px; background:
  radial-gradient(circle at 1px 1px, oklch(from var(--ink) l c h / 0.08) 1px, transparent 0) 0 0 / 22px 22px, var(--paper-2);
  display: grid; justify-items: center; row-gap: 46px; cursor: grab; }
.tree-canvas .links { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.links .l { fill: none; stroke: oklch(from var(--ink) l c h / 0.45); stroke-width: 1.5; }
.links .l-couple { stroke: var(--red); stroke-width: 2; }
.gen { display: flex; gap: 22px; align-items: flex-start; justify-content: center; min-width: max-content; }
.gen:empty { display: none; }
.grp { display: flex; gap: 14px; align-items: flex-start; }
.grp:empty { display: none; }
.couple { gap: 26px; }
.pc { position: relative; z-index: 1; display: grid; gap: 2px; justify-items: center; text-align: center; width: 138px; padding: 10px 10px 9px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; text-decoration: none; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.pc:hover { transform: translateY(-2px); box-shadow: 0 8px 20px oklch(0 0 0 / 0.12); }
.pc-name { font-family: var(--display); font-size: 16px; line-height: 1.15; }
.pc-years { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pc.sm { width: 112px; padding: 7px 8px; }
.pc.sm .pc-name { font-size: 14px; }
.pc.sib { opacity: 0.85; }
.pc.focus { width: 180px; border: 2px solid var(--red); padding: 12px; }
.pc.focus img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; margin-bottom: 6px; filter: sepia(0.12); }
.pc.focus .pc-name { font-size: 19px; }
.gen-kids { gap: 34px; }
.kid { display: grid; justify-items: center; row-gap: 46px; }
.gkids { display: flex; gap: 10px; }
.gkids:empty { display: none; }

.person-slot { padding: 0 var(--pad) 48px; background: var(--paper); }
.person { max-width: 760px; margin: 0 auto; padding-top: 28px; }
.person-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.6vw, 44px); margin: 0; line-height: 1.1; }
.person-alt { margin: 4px 0 0; color: var(--ink-soft); font-family: var(--display); font-size: 19px; }
.person-life { margin: 10px 0 0; }
.person-photos { display: flex; gap: 10px; overflow-x: auto; margin: 18px 0; }
.person-photos img { height: 150px; width: auto; border-radius: 4px; filter: sepia(0.1); }
.person-bio { font-size: 19px; line-height: 1.6; max-width: 65ch; }
.person-rel { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 18px 0; }
.person-rel dt { color: var(--ink-soft); font-size: 15px; padding-top: 2px; }
.person-rel dd { margin: 0; }
.person-rel a, .person-pages a { color: var(--red); }
.person-pages { margin: 12px 0; line-height: 1.8; }
.person-pages span { color: var(--ink-soft); font-size: 15px; margin-right: 4px; }
.person-notes { font-size: 15px; color: var(--ink-soft); border: 1px dashed var(--rule); border-radius: var(--r); padding: 10px 12px; }
.person-more { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 22px; }
@media (max-width: 560px) { .person-rel { grid-template-columns: 1fr; } .pc { width: 118px; } .pc.focus { width: 150px; } }

/* ---------- the journey map ---------- */
.journey { display: grid; grid-template-columns: 1fr min(380px, 34vw); height: calc(100dvh - 56px); }
.journey-map { min-height: 60vh; background: var(--paper-2); }
.journey-side { overflow: auto; padding: 22px 22px 40px; background: var(--paper); border-left: 1px solid var(--rule); }
.journey-side h1 { font-family: var(--display); font-weight: 400; font-size: 32px; margin: 0 0 6px; line-height: 1.1; }
.journey-side h2 { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 0; }
.year-ctl { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; }
.year-ctl input { flex: 1; accent-color: var(--red); }
.year-ctl .play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--red); color: oklch(0.98 0.01 80); font-size: 16px; }
.year-out { font-family: var(--display); font-size: 28px; min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.place-info { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; }
.place-people { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.place-people a, .journey-side a { color: var(--red); }
.stops { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.stops li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.stop-n, .stop-pin span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: oklch(0.98 0.01 80); font-size: 13px; font-weight: 700; }
.stop-pin { background: none; border: 0; }
.stop-why { font-size: 15px; color: var(--ink-soft); }
.back { display: inline-block; margin-bottom: 12px; text-decoration: none; }
.leaflet-container { font: 14px var(--ui); }
@media (max-width: 760px) {
  .journey { grid-template-columns: 1fr; grid-template-rows: 58vh auto; height: auto; }
  .journey-side { border-left: 0; border-top: 1px solid var(--rule); }
}
.journey-map .leaflet-tile-pane { filter: sepia(0.35) saturate(0.75) brightness(1.02); }

/* ---------- phones ---------- */
html { touch-action: manipulation; }                     /* pinch-zoom yes, accidental double-tap zoom no */
.tree-canvas { overscroll-behavior: contain; }
@media (max-width: 640px) {
  .bar { position: static; }                            /* header scrolls away: more room to read */
  body { font-size: 17px; }
  .reader-bar { gap: 8px 10px; padding: 10px var(--pad); }
  .reader-tools { flex-wrap: wrap; }
  .tool { padding: 7px 12px; font-size: 14px; }
  .spread { padding: 10px 8px; }
  .leaf img { box-shadow: 0 1px 2px oklch(0 0 0 / 0.12); }
  .turn { padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); gap: 10px; }
  .turn button { width: 50px; height: 42px; }
}
@media (orientation: landscape) and (max-height: 520px) {  /* phone turned sideways: keep it usable */
  .bar { position: static; }
  .cover { min-height: auto; }
  .tree-canvas { row-gap: 34px; }
}
.book-says { color: var(--blue); font-family: var(--hand); font-size: 1.15em; }
.since-book { margin: 6px 0 0; color: var(--blue); font-family: var(--hand); font-size: 22px; }
.pc.family { border-color: oklch(from var(--blue) l c h / 0.55); }

/* ---------- since the book: check-in ---------- */
.checkin { background: var(--paper); min-height: calc(100dvh - 56px); }
.ck-inner { max-width: 620px; margin: 0 auto; padding: clamp(24px, 6vw, 56px) var(--pad) 60px; display: grid; gap: 14px; }
.checkin h1 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 5.4vw, 40px); line-height: 1.15; margin: 0; text-wrap: balance; }
.ck-kicker { margin: 0; font-family: var(--hand); font-size: 26px; color: var(--blue); }
.checkin label { display: grid; gap: 6px; font-size: 16px; font-weight: 700; }
.checkin input:not([type=radio]):not([type=checkbox]), .checkin textarea { font: inherit; font-weight: 400; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper-2); width: 100%; }
.ck-row { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 10px; }
@media (max-width: 560px) { .ck-row { grid-template-columns: 1fr 1fr; } .ck-row .ck-narrow { grid-column: span 2; } }
.ck-card { border: 1px solid var(--rule); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; background: var(--paper-2); }
.ck-card .muted { margin: 0; }
.ck-choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.ck-choice legend { font-weight: 700; margin-bottom: 6px; }
.ck-choice label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; }
.ck-hits { display: grid; gap: 6px; }
.ck-hits button { text-align: left; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--paper); font-size: 17px; }
.ck-hits button:hover { border-color: var(--red); }
.ck-picked { margin: 0; }
.ck-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; }
.ck-go { display: inline-block; padding: 13px 22px; border-radius: var(--r); border: 0; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 17px; text-decoration: none; margin-left: auto; }
.ck-link { border: 0; background: none; color: var(--blue); font-size: 17px; padding: 8px 0; text-decoration: underline; }
.ck-back { justify-self: start; border: 0; background: none; color: var(--ink-soft); padding: 0; font-size: 15px; }
.ck-review { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.ck-err { color: var(--red); margin: 0; }
.person-after { margin: 18px 0 0; }
.person-after .ck-go { margin-left: 0; background: var(--blue); }
.door-pen { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 2px dashed oklch(from var(--blue) l c h / 0.45); border-radius: 4px; font-family: var(--hand); font-size: clamp(26px, 4vw, 40px); color: var(--blue); }
/* admin checklist */
.ck-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.ck-line { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; }
.ck-line details { grid-column: 2; font-size: 14px; }
.ck-line .ed { padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); margin: 4px 4px 0 0; }
.ck-line .ed.narrow { width: 7em; }
.ck-line.is-note { color: var(--ink-soft); }
.note-dot { color: var(--blue); }
.sg-item .apply { margin-top: 8px; padding: 9px 16px; border-radius: 999px; border: 0; background: var(--blue); color: oklch(0.98 0.01 80); font-weight: 700; }
.apply-err { color: var(--red); }
.book-end { margin: 8px 0 0; font-size: 15px; color: var(--blue); }