/* The field journal: the reading dialog is a cloth-bound notebook of laid paper.
   Shared by every page. Chapter styles live in styles-journal-shrine.css, -history.css, -films.css, -cards.css, -canopy.css and -map.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: #2d4f3c;
  --j-pencil: #6d655e;
  --j-rule: #6b4e3a55;
  --j-link-line: #7a8f5f99;
  --j-place-ink: #4f6f39;
  --j-cloth: #1f3a2c;
  /* 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: #4f6f39;
  --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%, #2f5440, var(--j-cloth) 60%, #142a1f);
  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: #06150ec2; 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-map[aria-current] { opacity: .6; box-shadow: none; }
#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; }
/* Safari does not restyle a child on a parent's class change when the rule also tests the child's text (:empty), so no rule here uses :empty. */

/* ---------- 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: #4f6f39; }
.j-page--history { --j-place-ink: #7a4a2a; }
.j-page--films { --j-place-ink: #3f4f8a; }
.j-page--cards { --j-place-ink: #9a3a25; }
.j-page--canopy { --j-place-ink: #a8405f; }
/* Pages that are not places (the map and the colophon) write in the green of the cover. */
.j-page--map, .j-page--credits { --j-place-ink: #2f5440; }
.j-ink-moss { color: #4f6f39; }
.j-ink-umber { color: #7a4a2a; }
.j-ink-indigo { color: #3f4f8a; }
.j-ink-vermilion { color: #b8452f; }
.j-ink-blossom { color: #b8446c; }

/* ---------- 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; text-wrap: balance; }
/* The date and the time of day each stay together, so a narrow column breaks after the comma, never before one
   lonely word. On phones the line is narrower than the date, so there the words wrap freely again. */
.j-dateline-day, .j-dateline-when { white-space: nowrap; }
/* A page titled other than its place (the shrine's Celebi) prints the place's name, as the map and the journey bar
   print it, in small capitals over its title. */
#archive-dialog .j-place-name { margin: 0 0 4px !important; font: 500 16px/1.3 var(--j-sc); letter-spacing: .14em; color: var(--j-ink-soft); }
.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; }
/* Each chapter's stylesheet lays its dabs behind its own title word (.j-head--<place> .j-wash--a / --b). */
#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 disc of paper that keeps the date readable and a fainter ring of
   paper under the lettering, so the place name and VISITED read over any painting. */
.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: 3%; border-radius: 50%; background: var(--j-paper) var(--j-paper-tile) 0 0 / 512px auto; opacity: .86; -webkit-mask: radial-gradient(closest-side, #000 46%, #0009 55%, #0009 88%, transparent); mask: radial-gradient(closest-side, #000 46%, #0009 55%, #0009 88%, 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; }
/* Its focus ring hugs the words, so it never runs through the caption line above. The tap padding goes while
   it has keyboard focus: vertical padding on an inline box never moves the line, so nothing shifts. */
#archive-dialog figcaption .source-link:focus-visible { padding-block: 0; margin-block: 0; outline-offset: 2px; border-radius: 2px; }

/* ---------- 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; }
/* Glassine, the way a card is kept: a faint haze with a breath of Celebi's leaf green that the art reads clearly
   through, a sheen, one crease, a hairline edge and a thumb notch at the mouth where the top of the card shows.
   It hugs the card like a real sleeve. Tape holds paper; a card only ever goes in a sleeve. */
.j-glassine {
  position: absolute; z-index: 2; left: -2px; right: -2px; top: 8%; bottom: -4px; pointer-events: none;
  background:
    linear-gradient(163deg, transparent 57.6%, #6b4e3a17 58%, #ffffff66 58.9%, transparent 59.8%),
    linear-gradient(103deg, #ffffff00 18%, #ffffff5c 33%, #ffffff00 48%),
    linear-gradient(180deg, #f7f9ec3b, #eef2de33 70%, #e5e9d342);
  box-shadow: inset 0 0 0 1px #ffffffb3, inset 0 -2px 0 #4f6f3914, 0 0 0 .6px #6b4e3a33, 0 3px 6px -3px #4a2f1a33;
  border-radius: 2px 2px 3px 3px;
  -webkit-mask: radial-gradient(circle 15px at 50% 0, #0000 95%, #000 100%);
  mask: radial-gradient(circle 15px at 50% 0, #0000 95%, #000 100%);
  transition: opacity .42s ease, translate .42s cubic-bezier(.2, .75, .25, 1);
}
/* A card pasted into a page's notes sits in its sleeve too, and slides a little way out under a pointer. */
.j-plate--sleeve .j-plate-mount { padding: 0; }
.j-sleeve { position: relative; display: block; }
.j-sleeve-card { position: relative; z-index: 1; display: block; transition: translate .42s cubic-bezier(.2, .75, .25, 1); }
.j-sleeve-card img { display: block; width: 100%; height: auto; border-radius: 4.5% / 3.2%; filter: drop-shadow(0 1px 1.5px #4a2f1a4d); }
@media (hover: hover) {
  .j-plate--sleeve:hover .j-sleeve-card { translate: 0 -10%; }
  .j-plate--sleeve:hover .j-glassine { opacity: .12; translate: 0 3%; }
}
/* Pencilled float lines on a card, under a cut-out figure 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 leaf study: each pressed leaf stirs when touched and settles back. */
.j-leaves { position: relative; width: 260px; height: 250px; flex: none; }
.j-leaf { position: absolute; display: block; min-width: 44px; min-height: 44px; padding: 0; border-radius: 30% 70% 30% 70%; }
/* The leaves lift once as the reader reaches them, then settle, so nothing keeps moving beside the text. */
.j-leaves.is-revealed .j-leaf { animation: j-drift 4.4s ease-in-out; }
.j-leaf img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 2px 2px #4a2f1a2e); transition: scale .2s ease; }
.j-leaf:hover img, .j-leaf:focus-visible img { scale: 1.05; }
.j-leaf--maple { width: 128px; left: 6px; top: 22px; rotate: -12deg; }
.j-leaf--fern { width: 96px; left: 150px; top: 0; rotate: 18deg; animation-delay: .25s; }
.j-leaf--blossom { width: 92px; left: 128px; top: 128px; rotate: -4deg; animation-delay: .5s; }
.j-leaf.is-stirred img { animation: j-stir 1.1s cubic-bezier(.3, .8, .4, 1) forwards; }
.j-leaf.is-settled img { animation: j-settle .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.j-note--leaves { left: 10px; top: 204px; font-size: 21px; --j-note-r: -3deg; }
@keyframes j-drift { 50% { translate: 0 -6px; } }
@keyframes j-stir { 30% { translate: 6px -26px; rotate: 14deg; } 100% { translate: -4px -10px; rotate: -8deg; opacity: .9; } }
@keyframes j-settle { from { translate: -4px -10px; rotate: -8deg; opacity: .9; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }

/* ---------- 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; }

/* ---------- 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; }

  .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; }

}
/* 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: min(12em, calc(100% - 112px)); margin-bottom: 6px !important; }
  .j-dateline-day, .j-dateline-when { white-space: normal; }
  #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-note { font-size: 20px; }
  .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-swatch { padding-inline: 2px; }
  .j-swatch-paint { width: 76px; height: 76px; }

  .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); }
  /* In the one-column layout the torn band is too shallow for a cover crop to hold the whole shrine (roof peak to
     base stones is 39% of the painting's height), so there the painting is drawn smaller: 2.06 band heights tall,
     the peak just under the top and the stones clear of the torn edge, the shrine a little right of centre. Its
     paper margin multiplies onto the page paper and fades out at the sides. */
  @container journal (max-width: 879px) {
    #archive-dialog .j-vignette--shrine img {
      position: absolute; top: calc(min(340px, 48dvh) * -.68); left: calc(58% - min(340px, 48dvh) * 1.88);
      width: auto; max-width: none; height: calc(min(340px, 48dvh) * 2.06); transform: none;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
    }
  }
  #archive-dialog .j-title.j-title--huge { font-size: min(136px, 28dvh); }
  #archive-dialog .j-head--plain { padding-top: 72px; }
  #archive-dialog .j-plate:not(.j-plate--fluid) { width: fit-content; max-width: 100%; }
  #archive-dialog .j-plate figcaption { contain: inline-size; }
  #archive-dialog .j-plate-mount > img { 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-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-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-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-leaf, .j-leaf img { animation: none !important; }
  .j-plate-mount, .j-turn-arrow, .j-ring, .j-ring path, .j-leaf 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; }
  /* Nothing slides out of a sleeve; the card simply shows through clear glassine. */
  .j-glassine, .j-sleeve-card { transition: none !important; }
  .j-plate--sleeve:hover .j-sleeve-card { translate: none !important; }
  .j-plate--sleeve:hover .j-glassine { opacity: 0 !important; translate: none !important; }
  .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; }
}