/* The field journal: the reading dialog is a cloth-bound notebook of laid paper.
   Shared by every page. Chapter styles live in styles-journal-films.css, -cards.css and -canopy.css.
   Three voices: printed type (IM Fell English for display at 24px and up, Alegreya for reading),
   small-caps labels (Alegreya SC) and handwriting (La Belle Aurore, short notes only).
   The fonts are registered by js/journal.js the first time the dialog opens. */

#archive-dialog {
  --j-paper: #eadcc1;
  --j-card: #f8f1e2;
  --j-ink: #33251c;
  --j-ink-soft: #54443a;
  --j-ink-faint: #665446;
  --j-hand: #2c3d66;
  --j-pencil: #6d655e;
  --j-rule: #6b4e3a55;
  --j-link-line: #a36a4d99;
  --j-place-ink: #983457;
  --j-cloth: #3b2531;
  /* The second and third names are the reader's own serif, resized to match (js/journal.js), so the lines
     break the same way before and after the journal fonts arrive. */
  /* Fell Digits sets only the figures, in Alegreya: IM Fell English has old-style figures alone, and its
     1 and 0 read as the letters I and O (js/journal.js registers it). */
  --j-display: 'Fell Digits', 'IM Fell English', 'Fell Iowan', 'Fell Georgia', 'Iowan Old Style', Georgia, serif;
  --j-text: Alegreya, 'Alegreya Iowan', 'Alegreya Georgia', 'Iowan Old Style', Georgia, serif;
  --j-sc: 'Alegreya SC', Alegreya, 'Alegreya Iowan', 'Alegreya Georgia', 'Iowan Old Style', Georgia, serif;
  --j-script: 'La Belle Aurore', 'Bradley Hand', 'Segoe Script', cursive;
  --j-body: 19.5px;
  --j-pad: 64px;
  --j-paper-tile: url(assets/journal/paper.webp);
  /* The legacy chapter styles read these; they are set for ink on paper until each chapter is rebuilt. */
  --journal-ink: #33251c;
  --journal-copy: #4a3b31;
  --journal-muted: #665446;
  --journal-leaf: #8a3456;
  --journal-line: #6b4e3a38;
  --journal-raised: #f8f1e2;
  color-scheme: light;
  position: fixed;
  /* Centred inside the safe area, so the book never sits under a notch or the home indicator. */
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  width: calc(100% - 64px);
  max-width: 1080px;
  height: min(880px, calc(100dvh - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  margin: auto;
  padding: 10px 17px 10px 10px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  color: var(--j-ink);
  background:
    repeating-linear-gradient(0deg, #ffffff07 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #00000014 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 30% 10%, #4a3040, var(--j-cloth) 60%, #2a1822);
  box-shadow: 0 40px 120px #000a, 0 2px 0 #ffffff14 inset, 0 0 0 1px #0008;
  backdrop-filter: none;
  scrollbar-color: auto;
}
#archive-dialog[open] { display: flex; flex-direction: column; }
#archive-dialog::backdrop { background: #14080ec2; backdrop-filter: blur(7px); }
/* The fore-edge: stacked pages at the right of the block. */
#archive-dialog::after {
  content: ''; position: absolute; z-index: 1; top: 12px; bottom: 12px; right: 10px; width: 7px; border-radius: 0 3px 3px 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, #efe3cb 0 1px, #cdbb9c 1px 2px); box-shadow: 1px 0 2px #0006;
}
/* The shade of the binding along the left edge of the paper. */
#archive-dialog::before {
  content: ''; position: absolute; z-index: 21; top: 10px; bottom: 10px; left: 10px; width: 26px; pointer-events: none;
  background: linear-gradient(90deg, #5a3a1f38, #5a3a1f00);
}
.j-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

#archive-dialog #archive-content {
  container: journal / inline-size;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 2px 3px 3px 2px;
  background: var(--j-paper) var(--j-paper-tile) 0 0 / 768px auto;
  scrollbar-width: thin;
  scrollbar-color: #a88f84 transparent;
  scroll-padding-top: 88px;
  -webkit-overflow-scrolling: touch;
  overflow-wrap: break-word;
}
#archive-dialog.j-fonts-pending #archive-content > * { opacity: 0; }

/* World map and Close stay in their corners: a paper tag and a paper button. Once the reader scrolls,
   a paper band fades in behind them so no heading ever slides under the controls. */
#archive-dialog .archive-toolbar {
  position: absolute; z-index: 20; top: 10px; left: 10px; right: calc(17px + var(--j-gutter, 0px));
  display: flex; align-items: flex-start; justify-content: space-between;
  min-height: 0; margin: 0; padding: 14px 16px 0; background: none; border: 0; pointer-events: none;
}
#archive-dialog .archive-toolbar::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 74px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: var(--j-paper) var(--j-paper-tile) 0 0 / 768px auto;
  box-shadow: 0 1px 0 #6b4e3a24, 0 10px 14px -10px #4a2f1a55;
}
#archive-dialog.is-scrolled .archive-toolbar::before { opacity: 1; }
#archive-dialog .archive-toolbar button { position: relative; inset: auto; pointer-events: auto; }
#archive-dialog .archive-toolbar .archive-map {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 16px 8px 13px;
  background: var(--j-card); border: 1px solid #9c826c66; border-radius: 3px; rotate: -1.2deg; backdrop-filter: none;
  box-shadow: 0 1px 0 #fff8 inset, 0 3px 10px #2b18103a; color: var(--j-ink); font: 500 16px/1 var(--j-sc); letter-spacing: .04em;
}
#archive-dialog .archive-map span { display: block; font: inherit; }
#archive-dialog .archive-map svg { width: 19px; height: 19px; stroke: var(--j-ink-soft); stroke-width: 1.4; }
#archive-dialog .archive-toolbar .archive-close {
  display: grid; place-items: center; width: 46px; height: 46px; margin: 0; border-radius: 50%; backdrop-filter: none;
  background: var(--j-card); border: 1px solid #9c826c66; box-shadow: 0 1px 0 #fff8 inset, 0 3px 10px #2b18103a; color: var(--j-ink);
}
#archive-dialog .archive-close svg { width: 20px; height: 20px; stroke-width: 1.7; }
#archive-dialog .archive-toolbar button:hover { background: #fffaf0; border-color: #9c826caa; }
#archive-dialog button:focus-visible, #archive-dialog a:focus-visible, #archive-dialog summary:focus-visible, #archive-dialog input:focus-visible, #archive-dialog select:focus-visible { outline: 2px solid var(--j-hand); outline-offset: 3px; }
#archive-dialog button, #archive-dialog a, #archive-dialog input, #archive-dialog select, #archive-dialog summary { scroll-margin-block: 90px 24px; }
#archive-dialog #archive-title:focus { outline: none; }

/* ---------- a page ---------- */
/* clip, not hidden: the page trims what bleeds off its edges without becoming a scroll box, so position:
   sticky (the Card Garden year marks, the colophon's printer's mark) follows the journal's own scroll. */
.j-page {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  overflow: clip;
  padding: 0 var(--j-pad) 44px;
  background: var(--j-paper) var(--j-paper-tile) 0 0 / 768px auto;
  font: 400 var(--j-body)/1.64 var(--j-text);
  color: var(--j-ink);
  font-kerning: normal;
  isolation: isolate;
}
.j-page p { margin: 0; }
.j-page--shrine { --j-place-ink: #983457; }
.j-page--history { --j-place-ink: #435d2f; }
.j-page--films { --j-place-ink: #5f4388; }
.j-page--cards { --j-place-ink: #9a3a25; }
.j-page--canopy { --j-place-ink: #2f4d9a; }
/* Pages that are not places (the map and the colophon) write in the plum of the cover. */
.j-page--map, .j-page--credits { --j-place-ink: #6d3a57; }
.j-ink-rose { color: #b03d68; }
.j-ink-moss { color: #4f6f39; }
.j-ink-violet { color: #6a4c93; }
.j-ink-vermilion { color: #b8452f; }
.j-ink-ultramarine { color: #2f4d9a; }

/* ---------- the opener ---------- */
.j-head { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; min-height: 480px; }
.j-head-text { grid-column: 1; grid-row: 1; position: relative; padding-top: 118px; }
.j-vignette { grid-column: 2; grid-row: 1; position: relative; height: 480px; margin: 0 calc(var(--j-pad) * -1) 0 -3%; }
.j-vignette img {
  display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply;
  /* The ellipse's horizontal radius is the distance to the inner (left) edge, so the paint has faded to
     nothing before the edge of the picture whatever the crop; the top and the fore-edge still bleed off. */
  -webkit-mask-image: radial-gradient(ellipse 58% 72% at 58% 46%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 72% at 58% 46%, #000 50%, transparent 100%);
}
.j-vignette--shrine img { object-position: 62% 40%; transform: scale(1.16); transform-origin: 75% 22%; }
.j-vignette--history img { object-position: 30% 50%; transform: scale(1.16); transform-origin: 22% 26%; }
.j-head--mirror { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.j-head--mirror .j-vignette { grid-column: 1; margin: 0 -24px 0 calc(var(--j-pad) * -1); }
.j-head--mirror .j-vignette img { -webkit-mask-image: radial-gradient(ellipse 58% 72% at 42% 44%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 58% 72% at 42% 44%, #000 50%, transparent 100%); }
.j-head--mirror .j-head-text { grid-column: 2; padding-left: 24px; }
.j-head--plain { display: block; min-height: 0; padding: 104px 0 30px; }
.j-head--plain .j-head-text { padding: 0; }

.j-dateline { font: 23px/1.3 var(--j-script); color: var(--j-hand); rotate: -2deg; transform-origin: left; margin: 0 0 12px !important; }
.j-title-block { position: relative; width: fit-content; max-width: 100%; }
/* Display words never break mid-word; the size eases down on the narrowest two-column pages instead. */
#archive-dialog .j-title { position: relative; font: 400 min(74px, 7.8cqi)/.98 var(--j-display); letter-spacing: -.01em; color: var(--j-ink); margin: 0; max-width: 9.5em; text-wrap: balance; overflow-wrap: normal; }
/* The wash: one or two loaded brush dabs of the place's paint behind one word, square and unstretched.
   Sizes are in em, so they follow the title on every screen. Each place lays them down its own way. */
.j-wash-word { position: relative; white-space: nowrap; }
.j-wash { position: absolute; z-index: -1; left: var(--x, -.2em); top: var(--y, 0); width: var(--s, 1.3em); height: var(--s, 1.3em); max-width: none; object-fit: contain; rotate: var(--r, 0deg); mix-blend-mode: multiply; opacity: var(--o, .62); pointer-events: none; }
.j-wash--b { display: none; }
/* Bubble Cradle: a big dab under the M, a smaller one trailing under the ew. */
.j-head--shrine .j-wash--a { --x: -.2em; --y: .02em; --s: 1.02em; --r: -14deg; --o: .7; }
.j-head--shrine .j-wash--b { display: block; --x: .86em; --y: .36em; --s: .56em; --r: 32deg; --o: .55; }
/* Origin Roots: one round dab that circles the O. */
.j-head--history .j-wash--a { --x: -.42em; --y: -.12em; --s: 1.4em; --r: 118deg; --o: .52; }
/* Reflection Pool: two dabs run together under Pool, like a puddle. */
.j-head--films .j-wash--a { --x: -.24em; --y: -.04em; --s: 1.24em; --r: -6deg; --o: .6; }
.j-head--films .j-wash--b { display: block; --x: .88em; --y: .12em; --s: 1.08em; --r: 150deg; --o: .5; }
/* Card Garden: a single dab laid under the G. */
.j-head--cards .j-wash--a { --x: -.4em; --y: -.16em; --s: 1.38em; --r: -32deg; --o: .5; }
/* Dream Lookout: the brush lands at the end of Lookout and flicks up. */
.j-head--canopy .j-wash--a { left: auto; right: -.34em; --y: -.1em; --s: 1.26em; --r: 24deg; --o: .6; }
.j-head--canopy .j-wash--b { display: block; left: auto; right: -.62em; --y: -.22em; --s: .5em; --r: -40deg; --o: .5; }
#archive-dialog .j-title.j-title--huge { font-size: min(172px, 16cqi); line-height: .86; letter-spacing: -.02em; white-space: nowrap; }
.j-inwhich { font: italic 400 27px/1.2 var(--j-display); color: var(--j-place-ink); margin: 14px 0 0 !important; text-wrap: balance; }
.j-deck { font: 400 21px/1.5 var(--j-text); color: var(--j-ink-soft); margin: 16px 0 0 !important; max-width: 24em; text-wrap: pretty; }

/* The visit stamp. It lands once, the first time the player reaches the place. .j-stamp only places it;
   the ink multiplies onto the painting, over a small disc of paper that keeps the date readable. */
.j-stamp { position: absolute; width: 176px; height: 176px; right: 30%; top: 334px; pointer-events: none; }
.j-head--mirror .j-stamp { right: auto; left: 30%; top: 340px; --j-stamp-r: 8deg; }
.j-stamp-ground { position: absolute; z-index: 2; inset: 24%; border-radius: 50%; background: var(--j-paper) var(--j-paper-tile) 0 0 / 512px auto; opacity: .86; -webkit-mask: radial-gradient(closest-side, #000 84%, transparent); mask: radial-gradient(closest-side, #000 84%, transparent); }
.j-stamp-ink { position: absolute; z-index: 3; inset: 0; rotate: var(--j-stamp-r, -11deg); mix-blend-mode: multiply; opacity: .9; }
.j-stamp svg, .j-mini-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; }
.j-stamp text, .j-mini-stamp text, .j-postmark text { font-family: var(--j-sc); font-weight: 700; fill: currentColor; stroke: none; }
.j-stamp .j-stamp-fill { fill: currentColor; stroke: none; }
/* Not visited yet: a faint pencilled ring with the place name, waiting for the stamp. */
.j-stamp--blank { color: #7a6a5c; }
.j-stamp--blank .j-stamp-ink { opacity: .5; }
.j-stamp--blank circle { stroke-dasharray: 3 6; }
.j-stamp--blank text { font-weight: 500; }
.j-stamp.is-waiting > * { opacity: 0; }
.j-stamp.is-landing .j-stamp-ink { animation: j-stamp-land .2s ease-out both; }
.j-stamp.is-landing .j-stamp-ground { animation: j-stamp-ground .2s ease-out both; }
@keyframes j-stamp-land {
  from { opacity: 0; scale: 1.14; rotate: calc(var(--j-stamp-r, -11deg) + 3deg); }
  to { opacity: .9; scale: 1; rotate: var(--j-stamp-r, -11deg); }
}
@keyframes j-stamp-ground { from { opacity: 0; } to { opacity: .86; } }

/* ---------- reading text ---------- */
.j-prose p, .j-find-copy p, .j-postcard-back p { max-width: 30em; }
.j-prose p + p, .j-prose .j-label + p { margin-top: 1em; }
.j-dropcap::first-letter { font-family: var(--j-display); float: left; font-size: 5.1em; line-height: .8; padding: .06em .04em 0 0; margin: 0 .06em 0 -.03em; color: var(--j-place-ink); }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .j-dropcap::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; margin: 0 .1em 0 0; -webkit-initial-letter: 3; initial-letter: 3; }
}
.j-leadin { font-family: var(--j-sc); font-weight: 400; letter-spacing: .03em; font-size: 1.04em; color: var(--j-ink); }
.j-sc { font: 500 16px/1.2 var(--j-sc); letter-spacing: .12em; color: var(--j-ink-faint); }
.j-find-title { font: 400 42px/1.04 var(--j-display); letter-spacing: -.005em; color: var(--j-ink); margin: 0 0 14px; text-wrap: balance; outline: none; }
.j-source-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-top: 10px !important; font-size: 17px; }
.j-source-line::before { content: ''; width: 26px; height: 1px; background: var(--j-rule); }
#archive-dialog .source-link {
  display: inline-flex; align-items: center; gap: 0; min-height: 44px; margin: 0; padding: 0;
  font: inherit; font-size: 16px; font-style: normal; line-height: 1.4; color: var(--j-ink);
  text-decoration: underline; text-decoration-color: var(--j-link-line); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
#archive-dialog .source-link:hover { color: var(--j-ink); text-decoration-color: currentColor; }
.j-source-line .source-link { font-size: inherit; }
/* In a caption the credit runs on with the words and keeps the caption's own leading. The padding gives it a
   tall tap area without making its line taller, and it wraps like the words (its arrow never goes alone). */
#archive-dialog figcaption .source-link { display: inline; min-height: 0; padding: 12px 0; margin: -12px 0; font-size: inherit; line-height: inherit; }

/* ---------- paper devices ---------- */
/* Deckled paper: the shadow sits on the wrapper so it follows the torn edge. */
.j-paper { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: drop-shadow(0 1px 1px #4a2f1a38) drop-shadow(0 9px 14px #4a2f1a26); }
.j-paper::before {
  content: ''; position: absolute; inset: 0; clip-path: var(--j-deckle);
  background: linear-gradient(#f9f3e6d9, #f9f3e6d9), var(--j-paper-tile) 0 0 / 512px auto, var(--j-card);
}
.j-deckle-a { --j-deckle: polygon(0% 0.26%, 5.11% 0.41%, 10.25% 0.69%, 13.96% 0.01%, 20.81% 0.29%, 24.36% 1.1%, 29.93% 0.92%, 34.94% 0.7%, 39.16% 0.7%, 45.88% 0.58%, 50.58% 0.74%, 53.95% 0.83%, 60.22% 0.33%, 63.87% 0.95%, 69.93% 0.79%, 75.91% 0.79%, 81.01% 0.43%, 85.72% 0.49%, 91.05% 0.97%, 94.03% 0.15%, 100% 0.24%, 99.65% 6.12%, 99.76% 10.3%, 99.69% 15.02%, 99.53% 19.64%, 99.28% 25.2%, 99.26% 30.44%, 99.21% 35.86%, 99.87% 40.41%, 99.23% 45.87%, 99.54% 50.97%, 99.83% 55.51%, 99.54% 60.8%, 99.95% 64.48%, 99.21% 70.85%, 99.36% 74.01%, 99.88% 79.79%, 99.38% 84.51%, 99.96% 90.89%, 99.96% 95.27%, 100% 99.21%, 94.59% 99.03%, 91.15% 99.44%, 86.2% 99.66%, 78.98% 99.34%, 73.88% 99.78%, 69.78% 99.33%, 64.17% 99.95%, 60.88% 99.65%, 56.1% 99.01%, 49.71% 99.49%, 45.05% 99.29%, 40.23% 99.38%, 35.29% 98.97%, 30.02% 99.53%, 25.53% 99.74%, 19.52% 98.92%, 15.05% 99.4%, 8.83% 99.54%, 5.19% 99.98%, 0% 99.32%, 0.05% 95.32%, 0.37% 90.31%, 0.28% 85.43%, 0.59% 80.5%, 0.05% 73.85%, 0.77% 70.42%, 0.37% 64.4%, 0.26% 60.22%, 0.25% 54.67%, 0.48% 49.69%, 0.3% 44.52%, 0.02% 40.65%, 0.59% 35.17%, 0.18% 29.54%, 0.19% 25.73%, 0.35% 19.25%, 0.08% 15.48%, 0.27% 9.57%, 0.35% 5.8%); }
.j-deckle-b { --j-deckle: polygon(0% 0.5%, 5.14% 1.02%, 9.92% 0.56%, 15.21% 0.2%, 20.03% 0.69%, 25.7% 0.1%, 29.53% 0.1%, 35.74% 0.76%, 38.9% 1.08%, 46.12% 0.72%, 50.28% 0.17%, 53.84% 0.58%, 58.94% 0.21%, 64.38% 0.03%, 69.91% 0.48%, 75.82% 0.57%, 80.34% 0.55%, 85.39% 0.5%, 89.47% 1.1%, 96.19% 0.92%, 100% 0.78%, 99.82% 4.56%, 99.94% 9.49%, 99.68% 15.64%, 99.69% 20.83%, 99.32% 26.1%, 99.83% 28.8%, 99.62% 35.98%, 99.68% 41.15%, 99.5% 43.98%, 99.78% 50.67%, 99.73% 54.01%, 99.39% 61.11%, 99.8% 64.08%, 99.95% 69.04%, 99.86% 75.71%, 99.64% 80.14%, 99.41% 84.26%, 99.49% 89.11%, 99.66% 94.08%, 100% 99.77%, 94.45% 98.93%, 90.73% 99.67%, 85.92% 99.77%, 79.75% 99.06%, 75.34% 99.89%, 71.17% 99.77%, 64.42% 99.15%, 59.59% 99.67%, 53.98% 99.9%, 50.2% 99.73%, 45.24% 99.59%, 39.89% 98.94%, 34.96% 99.37%, 30.88% 99.8%, 24.17% 99%, 20.76% 99.73%, 14.26% 99.19%, 11.06% 99.78%, 6.08% 99.03%, 0% 99.34%, 0.08% 94.81%, 0.77% 88.89%, 0.56% 84.37%, 0.66% 79.42%, 0.23% 75.23%, 0.58% 69.22%, 0.18% 63.97%, 0.68% 60.14%, 0.22% 55.27%, 0.16% 51%, 0.22% 43.84%, 0.05% 39.87%, 0.3% 34.22%, 0.11% 30.17%, 0.71% 24.67%, 0.53% 21.15%, 0.47% 15.46%, 0.03% 9.14%, 0.73% 3.84%); }
.j-deckle-c { --j-deckle: polygon(0% 1.02%, 6.08% 0.98%, 9% 0.65%, 14.82% 0.58%, 19.11% 0.21%, 24.87% 0.24%, 29.89% 0.03%, 34.01% 0.78%, 39.81% 0.56%, 45.56% 0.39%, 48.94% 0.86%, 55.21% 0.72%, 60.29% 1.07%, 64.67% 0.84%, 69.68% 0.63%, 75.39% 0.35%, 79.01% 0.52%, 85.52% 0.65%, 89.87% 0.71%, 94.24% 0.2%, 100% 0.36%, 99.84% 5.76%, 99.92% 9.07%, 99.78% 13.89%, 99.34% 20.17%, 99.7% 24.59%, 99.76% 29.49%, 99.56% 35.67%, 99.91% 39.42%, 99.43% 45.68%, 99.81% 50.79%, 99.27% 55.11%, 99.24% 60.22%, 99.22% 64.2%, 99.67% 68.93%, 99.35% 73.86%, 99.22% 80.45%, 99.24% 85.73%, 99.21% 90.09%, 99.72% 95.6%, 100% 98.93%, 94.7% 99.79%, 88.98% 99.49%, 84.27% 98.97%, 81.08% 99.76%, 74.05% 99.42%, 69.21% 99.4%, 65.75% 99.72%, 59.81% 99.01%, 54.87% 99.62%, 50.94% 99.1%, 45.95% 99.24%, 39.79% 99.24%, 35.79% 99.3%, 29.37% 99.68%, 24.78% 99.15%, 20.14% 99.4%, 15.78% 99.88%, 10.31% 99.63%, 5.14% 99.08%, 0% 99.73%, 0.06% 96.08%, 0.43% 90.15%, 0.45% 84.36%, 0.36% 79.93%, 0% 75.52%, 0.63% 69.71%, 0.69% 64.14%, 0.54% 59.29%, 0.36% 54.22%, 0.07% 49.81%, 0.38% 45.48%, 0.43% 40.45%, 0.42% 35.13%, 0.72% 29.51%, 0.7% 24.01%, 0.4% 20.87%, 0.54% 15.66%, 0.23% 10.25%, 0.28% 4.57%); }
.j-deckle-d { --j-deckle: polygon(0% 0.42%, 4.35% 0.18%, 10.99% 0.64%, 15.46% 0.61%, 19.72% 0.8%, 25.18% 0.86%, 30.39% 0.92%, 34.85% 0.17%, 39.16% 0.8%, 44.2% 0.72%, 50.29% 0.07%, 55.68% 0.04%, 60.88% 0.93%, 64.32% 0.8%, 70.56% 0.14%, 75.41% 0.14%, 80.99% 0.76%, 86.15% 0.06%, 89.56% 0.68%, 95.26% 0.2%, 100% 0.98%, 99.76% 5.83%, 99.47% 9.15%, 99.47% 14.78%, 99.68% 19.98%, 99.89% 23.85%, 99.42% 29.9%, 99.4% 34.82%, 99.3% 40.1%, 99.74% 45.37%, 99.95% 49.13%, 99.31% 53.9%, 99.4% 60.9%, 99.47% 64.06%, 99.29% 69.11%, 99.4% 75.37%, 99.67% 80.26%, 99.23% 85.84%, 99.65% 89.38%, 99.46% 95.56%, 100% 99.55%, 94.88% 98.94%, 89.46% 99.77%, 85.45% 99.7%, 80.95% 99.64%, 76.02% 99.58%, 70.92% 99.17%, 65.56% 99.76%, 59.19% 99.97%, 54.23% 99.27%, 48.95% 99.74%, 45.16% 99.83%, 39.59% 99.75%, 35.42% 99.87%, 31.19% 99.34%, 25.51% 99.39%, 19.99% 98.93%, 15.94% 99.1%, 8.87% 99.35%, 6.06% 99.3%, 0% 99.44%, 0.14% 95.36%, 0.63% 90.55%, 0.41% 83.97%, 0.28% 80.23%, 0.74% 75.44%, 0.25% 70.97%, 0.68% 64.16%, 0.66% 60.27%, 0.22% 55.89%, 0.24% 50.21%, 0.55% 45.71%, 0.4% 39.37%, 0.19% 35.23%, 0.38% 29.24%, 0.4% 23.97%, 0.66% 21.06%, 0.66% 13.93%, 0.57% 10.52%, 0.61% 3.86%); }

.j-tape {
  position: absolute; z-index: 4; left: var(--j-tape-x, 50%); top: var(--j-tape-y, -12px); width: 108px; height: 28px; pointer-events: none;
  translate: -50% 0; rotate: var(--j-tape-r, -3deg); mix-blend-mode: multiply;
  background: linear-gradient(180deg, #ffffff38, #ffffff00 45%, #00000008), #e6d9b7d0;
  clip-path: polygon(0 6%, 3% 22%, 0 38%, 2.5% 55%, 0 72%, 3% 88%, 1% 100%, 99% 100%, 97% 84%, 100% 66%, 97.5% 50%, 100% 34%, 97% 18%, 99% 0, 1% 0);
}
.j-tape--rose { background: radial-gradient(circle, #ffffff66 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #ffffff30, #ffffff00 50%), #e7a6c0c7; }

/* Photo corners: small, in kraft. */
.j-corner { position: absolute; z-index: 2; width: 22px; height: 22px; pointer-events: none; background: linear-gradient(135deg, #b99570 0 48%, #8d6c4b 48% 52%, transparent 52%); filter: drop-shadow(0 1px 1px #3a24144d); }
.j-corner--tl { left: 9px; top: 9px; }
.j-corner--tr { right: 9px; top: 9px; rotate: 90deg; }
.j-corner--br { right: 9px; bottom: 9px; rotate: 180deg; }
.j-corner--bl { left: 9px; bottom: 9px; rotate: 270deg; }

/* A plate: the image turns, the caption stays upright. */
.j-plate { position: relative; margin: 0; min-width: 0; }
.j-plate-mount { position: relative; padding: 18px; rotate: var(--j-tilt, 0deg); transition: translate .25s ease; }
.j-plate-mount > img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.j-plate:hover .j-plate-mount, .j-plate:focus-within .j-plate-mount { translate: 0 -3px; }
.j-plate figcaption { font: italic 400 16px/1.5 var(--j-text); color: var(--j-ink-soft); margin: 14px 4px 0; max-width: 34em; text-wrap: pretty; }
.j-fig { font: 500 16px/1 var(--j-sc); font-style: normal; letter-spacing: .06em; color: var(--j-ink); }
.j-plate--print .j-plate-mount { padding: 14px; }
.j-plate--print .j-plate-mount > img { filter: sepia(.12) contrast(.96); }
.j-plate--cutout .j-plate-mount { padding: 0; }
.j-plate--cutout .j-plate-mount > img { filter: drop-shadow(0 10px 12px #4a2f1a33); }
.j-plate--taped .j-plate-mount { padding: 22px 22px 34px; }
.j-plate--postcard .j-plate-mount { padding: 12px; }
.j-plate--postcard .j-paper::before { background: #fbf8f1; }
/* Pencilled on the card in the strip under Mew's feet and behind the artwork, so no line crosses it. */
.j-float-lines { position: absolute; z-index: 0; left: 26%; bottom: 2px; width: 52%; height: auto; aspect-ratio: 200 / 26; fill: none; stroke: var(--j-hand); stroke-width: 1.3; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .75; }

/* The printed field label: a specimen slip set straight onto the page, between two rules, every value in
   type on a dotted leader, and the one handwritten aside below the bottom rule. */
.j-label { position: relative; margin: 40px 0; max-width: 470px; padding: 12px 0 0; border-top: 1.5px solid #6b4e3a99; }
.j-label-title { font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); margin: 0 0 2px; }
.j-label dl { padding-bottom: 10px; border-bottom: 1px solid #6b4e3a73; }
.j-label dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; margin: 0; }
.j-label dl > div { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 9px 0 3px; }
.j-label dl > .j-half { grid-column: auto; }
.j-label dl > div::before { content: ''; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .42em; border-bottom: 1.5px dotted #6b4e3a99; }
.j-label dt { grid-column: 1; grid-row: 1; font: 400 16px/1.3 var(--j-sc); letter-spacing: .06em; color: var(--j-ink-soft); }
.j-label dd { grid-column: 3; grid-row: 1; margin: 0; font: 500 18px/1.3 var(--j-text); color: var(--j-ink); text-align: right; }
.j-label-aside .j-note-text { display: block; }
.j-label-aside { font: 22px/1.2 var(--j-script); color: var(--j-hand); margin: 14px 0 0 4px !important; rotate: -2deg; transform-origin: left; }

/* Handwritten notes and drawn arrows. */
.j-note { position: absolute; z-index: 5; margin: 0; font: 22px/1.1 var(--j-script); color: var(--j-hand); white-space: nowrap; pointer-events: none; rotate: var(--j-note-r, -4deg); }
.j-note-text { display: block; }
.j-arrow { position: absolute; width: 96px; height: 58px; overflow: visible; fill: none; stroke: var(--j-hand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.j-arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.j-armed .j-note .j-note-text, .j-armed .j-label-aside .j-note-text { clip-path: inset(0 0 0 0); transition: clip-path .45s ease-out; }
.j-armed .j-note .j-arrow path { transition: stroke-dashoffset .5s ease-out .2s; }
.j-armed .j-note .j-arrow path + path { transition-duration: .2s; transition-delay: .7s; }
.j-armed .j-note:not(.is-revealed) .j-note-text, .j-armed .j-label-aside:not(.is-revealed) .j-note-text { clip-path: inset(0 100% 0 0); }
.j-armed .j-note:not(.is-revealed) .j-arrow path { stroke-dashoffset: 1; }
.j-armed .j-note:not(.is-revealed) .j-arrow, .j-armed .j-turn:not(.is-revealed) .j-turn-arrow { opacity: 0; }

/* Pressed specimens: decoration the reader can nudge. */
.j-specimen { position: absolute; z-index: 1; height: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; filter: drop-shadow(0 2px 2px #4a2f1a2e); transition: filter .2s; }
.j-specimen.is-held { cursor: grabbing; filter: drop-shadow(0 10px 12px #4a2f1a45); }

/* Cards (swatch card, scrap): deckled paper with the text kept upright. */
.j-card { position: relative; padding: 26px 28px 22px; }
.j-card > :where(:not(.j-paper, .j-tape, .j-specimen)) { position: relative; z-index: 1; }
.j-card-title { font: 400 30px/1.1 var(--j-display); color: var(--j-ink); margin: 0 0 8px; text-wrap: balance; }

.j-swatch-card { max-width: 400px; }
.j-swatch-card p { font-size: 18px; line-height: 1.5; color: var(--j-ink-soft); max-width: 22em; }
.j-swatches { display: flex; gap: 12px; margin-top: 16px; }
.j-swatch { display: grid; justify-items: center; align-content: start; gap: 2px; flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 4px 6px; border-radius: 10px; text-align: center; color: var(--j-hand); }
.j-swatch:hover { background: #6b4e3a0f; }
.j-swatch-paint { position: relative; display: block; width: 84px; height: 84px; }
.j-swatch-paint img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.j-ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); overflow: visible; fill: none; stroke: var(--j-hand); stroke-width: 2.2; stroke-linecap: round; }
.j-ring path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
.j-swatch[aria-pressed="true"] .j-ring path { stroke-dashoffset: 0; }
/* An undrawn round-capped stroke still leaves a dot where it starts, so the ring hides once it has unwound. */
.j-swatch:not([aria-pressed="true"]) .j-ring { opacity: 0; transition: opacity 0s .5s; }
.j-swatch-name { font: 24px/1.15 var(--j-script); color: var(--j-hand); margin-top: 6px; }
#archive-dialog .member-lock { display: flex; align-items: flex-start; justify-content: center; gap: 5px; margin-top: 4px; font: italic 400 16px/1.3 var(--j-text); color: var(--j-ink-soft); text-wrap: balance; }
#archive-dialog .member-lock svg { width: 13px; height: 13px; flex: none; margin-top: .22em; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* The bubble study: each bubble pops and drifts back. */
.j-bubbles { position: relative; width: 260px; height: 250px; flex: none; }
.j-bubble { position: absolute; display: block; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
/* The bubbles drift once as the reader reaches them, then settle, so nothing keeps moving beside the text. */
.j-bubbles.is-revealed .j-bubble { animation: j-drift 4.4s ease-in-out; }
.j-bubble img { display: block; width: 100%; height: auto; pointer-events: none; transition: scale .2s ease; }
.j-bubble:hover img, .j-bubble:focus-visible img { scale: 1.05; }
.j-bubble--big { width: 150px; left: 6px; top: 34px; }
.j-bubble--mid { width: 88px; left: 158px; top: 0; animation-delay: .25s; }
.j-bubble--small { width: 50px; left: 168px; top: 118px; animation-delay: .5s; }
.j-bubble.is-popped img { animation: j-pop .22s ease-out forwards; }
.j-bubble.is-back img { animation: j-return .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.j-bubble.is-popped::after { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: 2px dotted #7f8fb8; animation: j-burst .35s ease-out forwards; pointer-events: none; }
.j-note--bubbles { left: 18px; top: 204px; font-size: 21px; --j-note-r: -3deg; }
@keyframes j-drift { 50% { translate: 0 -6px; } }
@keyframes j-pop { to { scale: 1.3; opacity: 0; } }
@keyframes j-return { from { scale: 0; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes j-burst { from { scale: .9; opacity: .9; } to { scale: 1.45; opacity: 0; } }

/* ---------- the foot: turn the page, contents, folio ---------- */
.j-foot { position: relative; z-index: 2; display: grid; gap: 40px; margin-top: 72px; }
.j-turn { justify-self: start; display: inline-grid; grid-template-columns: auto auto; align-items: end; column-gap: 14px; min-height: 44px; padding: 6px 0; text-align: left; color: var(--j-ink); }
.j-turn-hand { grid-column: 1 / -1; font: 23px/1.3 var(--j-script); color: var(--j-hand); rotate: -3deg; transform-origin: left; }
.j-turn-label { font: 400 32px/1.1 var(--j-display); border-bottom: 1px solid #6b4e3a66; padding-bottom: 3px; }
.j-turn:hover .j-turn-label { border-bottom-color: var(--j-ink); }
.j-turn-arrow { width: 110px; height: 32px; margin-bottom: 4px; fill: none; stroke: var(--j-hand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .25s ease; }
.j-turn-arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.j-turn:hover .j-turn-arrow, .j-turn:focus-visible .j-turn-arrow { translate: 6px 0; }
.j-armed .j-turn .j-turn-hand { clip-path: inset(0 0 0 0); transition: clip-path .45s ease-out; }
.j-armed .j-turn .j-turn-arrow path { transition: stroke-dashoffset .5s ease-out .3s; }
.j-armed .j-turn:not(.is-revealed) .j-turn-hand { clip-path: inset(0 100% 0 0); }
.j-armed .j-turn:not(.is-revealed) .j-turn-arrow path { stroke-dashoffset: 1; }

.j-contents { padding-top: 18px; border-top: 1px solid var(--j-rule); }
.j-contents-title { font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); margin: 0 0 12px; }
.j-contents ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.j-contents li { min-width: 0; }
.j-contents-entry { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; width: 100%; min-height: 44px; padding: 10px 6px 8px; border-radius: 8px; text-align: center; color: var(--j-ink); }
button.j-contents-entry:hover { background: #6b4e3a12; }
.j-mini-stamp { display: block; width: 58px; height: 58px; margin-bottom: 2px; opacity: .45; }
.j-mini-stamp:not(.is-inked) { color: #7a6a5c; }
.j-mini-stamp:not(.is-inked) circle { stroke-dasharray: 3 5; }
.j-mini-stamp.is-inked { opacity: .9; mix-blend-mode: multiply; rotate: -8deg; }
.j-contents li:nth-child(even) .j-mini-stamp.is-inked { rotate: 7deg; }
.j-contents-name { font: 400 18px/1.2 var(--j-text); }
.j-contents-when { font: italic 400 16px/1.25 var(--j-text); color: var(--j-ink-soft); }
.j-pencil-ring { position: absolute; inset: -6px -4px; width: calc(100% + 8px); height: calc(100% + 12px); overflow: visible; fill: none; stroke: var(--j-pencil); stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
.j-folio { text-align: center; font: italic 400 16px/1 var(--j-text); color: var(--j-ink-soft); margin-top: -8px !important; }

/* ---------- Bubble Cradle ---------- */
/* Two columns that stack independently: the plate and the swatch card on the left, the reading and the
   bubble study on the right, so neither column leaves a hole under the other. */
.j-cradle-study { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 52fr); gap: 56px; align-items: start; margin-top: 28px; }
.j-cradle-col { min-width: 0; }
.j-cradle-plate { margin: 70px 4% 0 22%; }
.j-cradle-plate .j-plate-mount { padding: 22px; }
.j-plate-mount > .j-cradle-bubble { position: absolute; z-index: 0; left: 50%; top: 47%; width: 92%; height: auto; translate: -50% -50%; opacity: .95; }
.j-cradle-plate .j-plate-mount > img:not(.j-cradle-bubble) { z-index: 1; }
.j-note--size { left: -30%; top: -64px; }
.j-note--size .j-arrow { left: 62%; top: 80%; width: 104px; height: 62px; }
.j-note--paint { right: calc(100% + 4px); bottom: 16%; --j-note-r: -5deg; }
/* The arrow leaves from the end of the note, clear of the words, and points into the painted bubble. */
.j-note--paint .j-arrow { left: calc(100% + 2px); top: -4%; width: 70px; height: 42px; }
.j-cradle-text { padding-top: 4px; }
.j-cradle-swatch { margin: 64px 0 0 12%; rotate: -1.2deg; }
.j-cradle-swatch > * { rotate: 1.2deg; }
.j-cradle-swatch > .j-paper, .j-cradle-swatch > .j-tape { rotate: none; }
.j-cradle-pond { position: relative; display: flex; justify-content: flex-end; margin-top: 44px; padding-right: 40px; }

/* ---------- Origin Roots ---------- */
.j-index { margin: 12px 0 76px 50%; max-width: 440px; padding-left: 24px; }
.j-index-title { font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); margin: 0 0 6px; }
.j-index ol { list-style: none; margin: 0; padding: 0; }
.j-index button { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; text-align: left; font: 400 18px/1.3 var(--j-text); color: var(--j-ink); }
.j-index-leader { flex: 1 1 auto; min-width: 16px; border-bottom: 1.5px dotted #6b4e3a88; translate: 0 -.3em; }
.j-index .j-fig { flex: none; }
.j-index button:hover .j-index-name { text-decoration: underline; text-decoration-color: var(--j-link-line); text-underline-offset: 3px; }

/* Four finds, four shapes: a print beside its story, a cut-out set into its own text, a card taped
   across the page with the story beneath, and a postcard over its written back. */
.j-finds { list-style: none; margin: 0; padding: 0; display: grid; gap: 72px; }
.j-find { position: relative; min-width: 0; scroll-margin-top: 96px; }
.j-find-copy { min-width: 0; }
.j-find--print { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.j-find--print .j-find-copy { padding-top: 36px; }
/* The Pokédex cut-out floats in its own paragraph, which wraps the silhouette; the pencilled ghost of
   where Mew was a moment ago sits out in the margin. */
/* A narrow block, so the short entry wraps the whole figure and the ghost has the margin to itself. */
.j-find--cutout { max-width: min(700px, calc(100% - 128px)); margin-left: 5%; }
.j-find--cutout .j-find-copy { display: flow-root; }
/* The wrap follows Mew's outline (traced from the artwork's alpha, in % of the picture) so the tail loop
   and the feet take their own room; the margin below leaves space for the caption. */
.j-find--cutout .j-plate {
  float: right; width: 44%; margin: -64px 0 104px;
  shape-outside: polygon(100% 5%, 38% 7%, 30% 12%, 22% 20%, 15% 27%, 10% 35%, 8% 42%, 9% 48%, 12% 51%, 37% 52%, 45% 55%, 44% 70%, 46% 78%, 50% 85%, 70% 87%, 73% 93%, 100% 95%) border-box;
  shape-margin: 16px;
}
.j-find--cutout .j-plate figcaption { position: absolute; left: 0; right: -12px; top: 100%; margin-top: 18px; }
.j-find--cutout .j-find-copy p { max-width: none; }
.j-ghost {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  translate: 40% 4%; rotate: 8deg; scale: .86;
  background: repeating-linear-gradient(-38deg, #6d625a 0 1px, transparent 1px 5px);
  -webkit-mask: url(assets/history/mew-profile.webp) center / contain no-repeat;
  mask: url(assets/history/mew-profile.webp) center / contain no-repeat;
}
/* The note sits under the ghost and its arrow reaches up into the hatching. */
.j-note--ghost { left: 84%; top: 91%; --j-note-r: -3deg; }
.j-note--ghost .j-arrow { left: -2px; top: -44px; width: 60px; height: 44px; transform: scale(-1, -1); }
/* The UNITE card is taped across the middle of the page with its story set beneath it. */
.j-find--taped { display: grid; justify-items: center; }
.j-find--taped .j-plate { width: 46%; }
.j-find--taped .j-find-copy { width: min(100%, 30em); margin-top: 26px; }
.j-find--postcard { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); align-items: start; }
.j-find--postcard .j-plate { position: relative; z-index: 2; margin: 96px 0 0 -26px; }
.j-postcard-back { position: relative; padding: 30px 34px 26px; background: linear-gradient(#fbf8f1e0, #fbf8f1e0), var(--j-paper-tile) 0 0 / 512px auto, #fbf8f1; box-shadow: 0 2px 2px #4a2f1a2a, 0 16px 26px -8px #4a2f1a38; border-radius: 2px; }
.j-postcard-head { font: 500 16px/1.2 var(--j-sc); letter-spacing: .08em; color: var(--j-ink-soft); margin: 0 0 24px !important; padding-bottom: 12px; border-bottom: 1px solid #6b4e3a55; margin-right: 100px !important; }
.j-postcard-back .j-find-title { margin-right: 76px; }
.j-postage {
  position: absolute; right: 26px; top: 20px; width: 74px; height: 88px; display: grid; place-items: center; background: #f3d9e4;
  --perf: radial-gradient(circle 3px, #0000 96%, #000) -4.5px -4.5px / 9px 9px, linear-gradient(#000 0 0) center / calc(100% - 9px) calc(100% - 9px) no-repeat;
  -webkit-mask: var(--perf); mask: var(--perf);
  box-shadow: 0 0 0 9px #f3d9e4 inset, 0 0 0 10px #b8456f66 inset;
}
.j-postage img { width: 40px; height: 40px; filter: brightness(.55) saturate(2.4) hue-rotate(-14deg); }
.j-postmark { position: absolute; z-index: 3; right: -10px; top: 32px; width: 178px; height: 89px; color: #3c4f86; mix-blend-mode: multiply; opacity: .78; rotate: -9deg; pointer-events: none; fill: none; stroke: currentColor; }
.j-scrap { isolation: isolate; }
.j-roots-fern { z-index: -1; right: -58px; top: -86px; width: 104px; transform: rotate(24deg); }
.j-scrap { max-width: 580px; margin: 104px auto 0; padding: 30px 36px 26px; }
.j-scrap .j-card-title { font-size: 28px; }
#archive-dialog .j-scrap .archive-note { font: italic 400 18px/1.6 var(--j-text); color: var(--j-ink-soft); margin: 0; max-width: none; }

/* ---------- legacy content on paper, until each chapter is rebuilt ---------- */
#archive-dialog .archive-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
#archive-dialog .archive-tabs button, #archive-dialog .archive-action {
  min-height: 44px; padding: 10px 16px; background: var(--j-card); border: 1px solid #9c826c66; border-radius: 3px;
  color: var(--j-ink); font: 500 16px/1.3 var(--j-sc); letter-spacing: .04em; box-shadow: 0 2px 6px #2b18102a;
}
#archive-dialog .archive-tabs button:hover { background: #fffaf0; border-color: #9c826caa; }
#archive-dialog .archive-note { font: italic 400 16px/1.6 var(--j-text); color: var(--j-ink-soft); max-width: 42em; margin: 28px 0 0; }

/* ---------- wide pages (iPad landscape and desktop) are the defaults above ---------- */
/* Tablet portrait: one column with the painting across the top. */
@container journal (max-width: 879px) {
  .j-page { --j-pad: 44px; --j-body: 19px; }
  .j-head, .j-head--mirror { display: block; min-height: 0; }
  .j-vignette, .j-head--mirror .j-vignette { height: 340px; margin: 0 calc(var(--j-pad) * -1); }
  .j-vignette img, .j-head--mirror .j-vignette img { -webkit-mask-image: none; mask-image: none; }
  /* The torn clip makes the painting its own layer, so it carries the page paper to multiply onto. It starts
     at the page's top-left corner, so the tile lines up with the paper around it. */
  .j-vignette {
    background: var(--j-paper) var(--j-paper-tile) 0 0 / 768px auto;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 96% 92.5%, 91% 90.5%, 85% 93.5%, 79% 91%, 72% 94%, 66% 91.5%, 59% 95%, 52% 92%, 45% 94.5%, 38% 91.5%, 31% 94%, 24% 92%, 17% 95%, 10% 92%, 4% 94%, 0 91.5%);
  }
  .j-vignette--shrine img { object-position: 50% 42%; transform: scale(1.26); transform-origin: 50% 40%; }
  .j-vignette--history img { object-position: 40% 50%; transform: scale(1.3); transform-origin: 38% 44%; }
  .j-head-text, .j-head--mirror .j-head-text { padding: 0; margin-top: -6px; }
  .j-stamp, .j-head--mirror .j-stamp { left: auto; right: -6px; top: 262px; width: 150px; height: 150px; }
  #archive-dialog .j-title.j-title--huge { font-size: 136px; }
  #archive-dialog .j-title { font-size: 62px; }
  .j-head--plain { padding-top: 96px; }

  /* One column: the plate, the reading, the swatch card, then the bubbles. */
  .j-cradle-study { display: flex; flex-direction: column; align-items: stretch; margin-top: 12px; }
  .j-cradle-col { display: contents; }
  .j-cradle-plate { order: 1; width: 100%; max-width: 400px; margin: 96px auto 0; }
  .j-cradle-text { order: 2; margin-top: 48px; padding: 0; }
  .j-cradle-swatch { order: 3; margin: 56px 0 0; }
  .j-cradle-pond { order: 4; margin-top: 12px; padding-right: 20px; }
  .j-note--size { right: auto; left: -26%; top: -84px; }
  .j-note--size .j-arrow { left: 62%; top: 88%; }
  .j-note--paint { display: none; }
  .j-contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
  .j-contents-entry { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 14px; row-gap: 0; padding: 6px 8px; text-align: left; }
  .j-mini-stamp { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
  .j-contents-name { align-self: end; }
  .j-contents-when { align-self: start; }

  .j-index { margin: 34px 0 64px; padding-left: 0; }
  .j-finds { gap: 72px; }
  .j-find--print, .j-find--postcard { display: block; }
  .j-find--print .j-plate { width: 86%; }
  .j-find--print .j-find-copy { padding: 30px 0 0 12%; }
  .j-find--cutout { max-width: calc(100% - 96px); margin-left: 0; }
  .j-find--cutout .j-plate { width: 48%; margin: -20px 0 110px 18px; }
  .j-note--ghost { left: 62%; }
  .j-find--taped .j-plate { width: 60%; }
  .j-find--postcard .j-plate { width: 78%; margin: -26px 0 0 auto; }
}
/* Phones: the reading column, 18px text, one note beside the plate. */
@container journal (max-width: 599px) {
  .j-page { --j-pad: 22px; --j-body: 18px; padding-bottom: 36px; }
  .j-vignette, .j-head--mirror .j-vignette { height: 250px; }
  /* The stamp straddles the torn edge, so the date lands on the paper. */
  .j-stamp, .j-head--mirror .j-stamp { top: 190px; right: -6px; width: 108px; height: 108px; }
  .j-dateline { font-size: 20px; max-width: 12em; margin-bottom: 6px !important; }
  #archive-dialog .j-title.j-title--huge { font-size: min(112px, 30cqi); }
  #archive-dialog .j-title { font-size: 48px; line-height: 1; }
  .j-inwhich { font-size: 24px; margin-top: 10px !important; }
  .j-deck { font-size: 19px; }
  .j-head--plain { padding-top: 84px; }

  .j-cradle-plate { max-width: 330px; margin: 92px 8px 0 auto; }
  .j-cradle-plate .j-plate-mount { padding: 14px; }
  .j-note { font-size: 20px; }
  .j-note--size { left: 2%; top: -80px; }
  .j-note--size .j-arrow { left: 56%; top: 84%; width: 84px; height: 50px; }
  .j-label { margin: 34px 0; }
  .j-label dl { grid-template-columns: minmax(0, 1fr); }
  .j-label dl > .j-half { grid-column: 1 / -1; }
  .j-label dd { font-size: 17.5px; }
  .j-cradle-swatch { max-width: none; margin: 44px 2px 0; }
  .j-swatch { padding-inline: 2px; }
  .j-swatch-paint { width: 76px; height: 76px; }
  .j-cradle-pond { margin-top: 30px; padding-right: 0; }

  .j-find-title { font-size: 34px; }
  .j-source-line { font-size: 16.5px; }
  .j-index { margin: 28px 0 56px; }
  .j-finds { gap: 72px; }
  .j-find--print .j-plate { width: 100%; }
  .j-find--print .j-find-copy { padding: 26px 0 0; }
  /* On a phone the cut-out follows its story, and the ghost moves to the free side, on the left. */
  .j-find--cutout { max-width: none; }
  .j-find--cutout .j-find-copy { display: flex; flex-direction: column; }
  .j-find--cutout .j-plate { order: 1; float: none; width: 74%; margin: 26px 2% 0 auto; shape-outside: none; }
  .j-find--cutout .j-plate figcaption { position: static; margin-top: 18px; }
  .j-ghost { translate: -38% 4%; rotate: -8deg; }
  .j-note--ghost { left: -22%; top: -8%; --j-note-r: -4deg; }
  .j-note--ghost .j-arrow { left: 58%; top: 70%; width: 76px; height: 46px; transform: none; }
  .j-find--taped .j-plate { width: 86%; }
  .j-find--taped .j-find-copy { width: 100%; }
  .j-find--postcard .j-plate { width: 92%; margin-top: -18px; }
  .j-postcard-back { padding: 24px 20px 22px; }
  .j-postcard-head { margin-right: 84px !important; }
  .j-postcard-back .j-find-title { margin-right: 54px; }
  .j-postage { right: 16px; top: 16px; width: 60px; height: 72px; }
  .j-postage img { width: 32px; height: 32px; }
  .j-postmark { right: -14px; top: 28px; width: 138px; height: 69px; }
  .j-roots-fern { right: -14px; top: -70px; width: 78px; }
  .j-scrap { margin-top: 80px; padding: 26px 22px 22px; }

  .j-foot { margin-top: 56px; gap: 32px; }
  .j-turn-label { font-size: 27px; }
  .j-turn-arrow { width: 72px; }
  .j-contents ol { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .j-contents-entry { grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; column-gap: 14px; row-gap: 0; padding: 6px 8px; text-align: left; }
  .j-mini-stamp { grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
  .j-contents-name { align-self: end; }
  .j-contents-when { align-self: start; }
}

/* ---------- the dialog on small screens ---------- */
@media (max-width: 649px) {
  #archive-dialog {
    width: calc(100% - 20px);
    max-width: calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 6px 11px 6px 6px;
    border-radius: 7px;
  }
  #archive-dialog::after { right: 5px; width: 6px; top: 8px; bottom: 8px; }
  #archive-dialog::before { top: 6px; bottom: 6px; left: 6px; width: 16px; }
  #archive-dialog .archive-toolbar { top: 6px; left: 6px; right: calc(11px + var(--j-gutter, 0px)); padding: 10px 10px 0; }
  #archive-dialog .archive-toolbar::before { height: 66px; }
  #archive-dialog .archive-toolbar .archive-map { padding: 8px 13px 8px 11px; }
}
/* Tablets held upright: the book takes the full height instead of a letterbox. */
@media (orientation: portrait) and (min-width: 650px) {
  #archive-dialog { height: calc(100dvh - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
}
/* Phones held sideways: a thinner band behind the controls, and every plate sized to the height of the
   reading window, so a picture and its caption fit on one screen. */
@media (max-height: 500px) and (orientation: landscape) {
  #archive-dialog {
    width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  #archive-dialog .archive-toolbar { padding: 6px 10px 0; }
  #archive-dialog .archive-toolbar::before { height: 56px; }
  #archive-dialog #archive-content { scroll-padding-top: 64px; }
  #archive-dialog .j-vignette { height: min(340px, 48dvh); }
  #archive-dialog .j-head > .j-stamp { top: calc(min(340px, 48dvh) - 78px); }
  #archive-dialog .j-title.j-title--huge { font-size: min(136px, 28dvh); }
  #archive-dialog .j-head--plain { padding-top: 72px; }
  #archive-dialog .j-plate { width: fit-content; max-width: 100%; }
  #archive-dialog .j-plate figcaption { contain: inline-size; }
  #archive-dialog .j-plate-mount > img:not(.j-cradle-bubble) { width: auto; max-width: 100%; max-height: calc(100dvh - 190px); margin-inline: auto; }
  /* Where a plate has open paper beside it, the caption moves up alongside the picture. */
  #archive-dialog :is(.j-cradle-plate, .j-find--print .j-plate, .j-find--taped .j-plate, .j-find--postcard .j-plate) { display: flex; align-items: flex-end; gap: 22px; width: auto; max-width: 100%; }
  #archive-dialog :is(.j-cradle-plate, .j-find--print .j-plate, .j-find--taped .j-plate, .j-find--postcard .j-plate) > .j-plate-mount { flex: none; max-width: 64%; }
  #archive-dialog :is(.j-cradle-plate, .j-find--print .j-plate, .j-find--taped .j-plate, .j-find--postcard .j-plate) > figcaption { contain: none; flex: 1 1 12em; min-width: 9em; max-width: 17em; margin: 0 0 12px; }
  /* Where notes or a ticket already sit beside it, the caption keeps the width of its column, so it stays
     short, and the picture is a little smaller so the two fit on one screen. */
  #archive-dialog .j-film-plate { width: auto; }
  #archive-dialog .canopy-plate { width: 54%; }
  #archive-dialog :is(.j-film-plate, .canopy-plate) > .j-plate-mount { width: fit-content; max-width: 100%; }
  #archive-dialog :is(.j-film-plate, .canopy-plate) > figcaption { contain: none; }
  #archive-dialog .j-film-plate .j-plate-mount > img { max-height: calc(100dvh - 230px); }
  #archive-dialog .canopy-plate .j-plate-mount > img { max-height: calc(100dvh - 240px); }
}

/* Reduced motion: every piece shows its final state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .j-stamp.is-landing .j-stamp-ink, .j-stamp.is-landing .j-stamp-ground, .j-bubble, .j-bubble img, .j-bubble.is-popped::after { animation: none !important; }
  .j-bubble.is-popped img { opacity: 0; }
  .j-plate-mount, .j-turn-arrow, .j-ring, .j-ring path, .j-bubble img, .j-specimen, #archive-dialog .archive-toolbar::before { transition: none !important; }
  .j-plate:hover .j-plate-mount, .j-plate:focus-within .j-plate-mount, .j-turn:hover .j-turn-arrow, .j-turn:focus-visible .j-turn-arrow { translate: none; }
  .j-armed .j-note .j-note-text, .j-armed .j-label-aside .j-note-text, .j-armed .j-note .j-arrow path, .j-armed .j-turn .j-turn-hand, .j-armed .j-turn .j-turn-arrow path { transition: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; }
}