/* Dream Lookout (#canopy), the World map (#map) and the colophon (#credits). Owned by the canopy chapter.
   The shared journal pieces (head, plates, notes, swatch card, foot) are in styles-journal.css. */

/* ---------- Dream Lookout ---------- */
/* The finale opens on the journal's one full-bleed painting: the view you climbed for, across the whole
   sheet and torn along its foot, with the title on a deckled panel pinned over the tear and the stamp
   struck on the panel's corner. The crop keeps the sheet's pencil frame lines out of sight. */
.j-head--canopy { display: block; min-height: 0; margin: 0 calc(var(--j-pad) * -1); }
.j-head--canopy .j-vignette {
  height: 540px; margin: 0; overflow: clip;
  background: var(--j-paper) var(--j-paper-tile) 0 0 / 768px auto;
  clip-path: polygon(0 0, 100% 0, 100% 91%, 96% 93.5%, 91% 91.5%, 85% 94.5%, 79% 92%, 72% 95%, 66% 92.5%, 59% 96%, 52% 93%, 45% 95.5%, 38% 92.5%, 31% 95%, 24% 93%, 17% 96%, 10% 93%, 4% 95%, 0 92.5%);
}
.j-vignette--canopy img { -webkit-mask-image: none; mask-image: none; object-position: 50% 26%; transform: scale(1.74); transform-origin: 21% 22%; }
.j-head--canopy .j-head-text { position: relative; z-index: 2; width: min(540px, calc(100% - 2 * var(--j-pad))); margin: -168px 0 0 calc(var(--j-pad) + 8px); padding: 36px 44px 32px; }
.j-head--canopy .j-head-text > :not(.j-paper, .j-stamp) { position: relative; z-index: 1; }
.j-head--canopy .j-head-text > .j-paper { rotate: -.8deg; }
.j-head--canopy .j-head-text > .j-stamp { z-index: 3; left: auto; right: -86px; top: -74px; width: 156px; height: 156px; --j-stamp-r: 12deg; }
.j-head--canopy .j-dateline { margin-bottom: 10px !important; }

.canopy-study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 40px; align-items: start; margin-top: 18px; }
.canopy-text { grid-column: 1; grid-row: 1; padding-top: 34px; }
.canopy-text > p { max-width: 30em; }
.canopy-plate { grid-column: 2; grid-row: 1 / span 2; margin: 70px 31% 0 4%; }
.canopy-colour { position: relative; grid-column: 1; grid-row: 2; }
.canopy-plate .j-plate-mount { padding: 18px; }
.canopy-plate figcaption { margin-right: -40%; }
.canopy-note--asleep { left: calc(100% + 4px); top: 12%; font-size: 21px; --j-note-r: -4deg; }
.canopy-note--asleep .j-arrow { left: -40px; top: 46px; width: 64px; height: 42px; }
.canopy-note--hill { left: calc(100% + 8px); top: 53%; font-size: 21px; --j-note-r: 3deg; }
.canopy-note--hill .j-arrow { left: -52px; top: -30px; width: 62px; height: 36px; transform: scaleX(-1); }

.canopy-inspect { margin-top: 6px !important; }
.canopy-inspect button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; color: var(--j-ink); font: italic 400 18px/1.3 var(--j-text); }
.canopy-inspect button span { text-decoration: underline; text-decoration-color: var(--j-link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.canopy-inspect button:hover span { text-decoration-color: currentColor; }
.canopy-lens { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--j-hand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .25s ease; }
.canopy-inspect button:hover .canopy-lens, .canopy-inspect button:focus-visible .canopy-lens { rotate: -12deg; }

/* The small colour card: the same two paints as the Bubble Cradle, still the real buttons. */
.canopy-swatch { z-index: 1; max-width: 340px; margin: 44px 0 0 6%; padding: 24px 24px 18px; rotate: 1.3deg; }
.canopy-swatch > * { rotate: -1.3deg; }
.canopy-swatch > .j-paper, .canopy-swatch > .j-tape { rotate: none; }
.canopy-swatch .j-card-title { font-size: 28px; }
.canopy-swatch p { font-size: 18px; }
.canopy-swatch .j-swatch-paint { width: 68px; height: 68px; }
.canopy-swatch .j-swatch-name { font-size: 22px; }
.canopy-xref { display: inline-block; padding: 11px 0; margin: -11px 0; font: inherit; line-height: inherit; color: var(--j-ink); text-decoration: underline; text-decoration-color: var(--j-link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.canopy-xref:hover { text-decoration-color: currentColor; }
.canopy-leaf { z-index: 0; left: calc(6% + 290px); top: auto; bottom: 120px; width: 96px; transform: rotate(38deg); }

/* The photo tip, framed by a pencil viewfinder. The clouds can be nudged to compose the shot. */
.canopy-view { position: relative; width: min(100%, 780px); margin: 104px auto 0 0; padding: 152px 60px 54px; }
.canopy-finder { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.canopy-finder::before {
  content: ''; position: absolute; inset: 0; opacity: .75; transition: opacity .6s ease .5s;
  background:
    linear-gradient(var(--j-pencil), var(--j-pencil)) 33.3% 0 / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 66.6% 0 / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 33.3% 100% / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 66.6% 100% / 1.3px 13px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 0 33.3% / 13px 1.3px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 0 66.6% / 13px 1.3px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 100% 33.3% / 13px 1.3px no-repeat,
    linear-gradient(var(--j-pencil), var(--j-pencil)) 100% 66.6% / 13px 1.3px no-repeat;
}
.canopy-corner { position: absolute; width: 58px; height: 58px; overflow: visible; fill: none; stroke: var(--j-pencil); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.canopy-corner path + path { stroke-width: 1; opacity: .7; }
.canopy-corner--tl { left: 0; top: 0; }
.canopy-corner--tr { right: 0; top: 0; transform: scaleX(-1); }
.canopy-corner--br { right: 0; bottom: 0; transform: scale(-1, -1); }
.canopy-corner--bl { left: 0; bottom: 0; transform: scaleY(-1); }
.canopy-corner path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.canopy-focus { position: absolute; left: 65.5%; top: 78px; width: 36px; height: 28px; translate: -50% -50%; overflow: visible; fill: none; stroke: var(--j-hand); stroke-width: 1.4; stroke-linecap: round; opacity: .8; transition: opacity .4s ease .9s; }
.canopy-view.is-armed:not(.is-framed) .canopy-corner path { stroke-dashoffset: 1; }
.canopy-view.is-armed:not(.is-framed) .canopy-finder::before, .canopy-view.is-armed:not(.is-framed) .canopy-focus, .canopy-view.is-armed:not(.is-framed) .canopy-corner { opacity: 0; }
.canopy-view.is-armed .canopy-corner path { transition: stroke-dashoffset .55s ease-out; }
.canopy-view.is-armed .canopy-corner--tr path { transition-delay: .12s; }
.canopy-view.is-armed .canopy-corner--br path { transition-delay: .24s; }
.canopy-view.is-armed .canopy-corner--bl path { transition-delay: .36s; }
.canopy-sky { position: absolute; left: 28px; right: 28px; top: 22px; height: 118px; }
/* The clouds drift once, as the frame draws itself, then settle, so nothing keeps moving beside the text. */
.canopy-cloud { position: absolute; display: block; }
.canopy-view.is-framed .canopy-cloud { animation: canopy-drift 4.6s ease-in-out .3s; }
.canopy-cloud > .j-specimen { position: absolute; left: 0; top: 0; width: 100%; height: auto; filter: none; }
.canopy-cloud--a { left: 2%; top: 14px; width: 40%; aspect-ratio: 480 / 182; }
.canopy-cloud--b { left: 50%; top: 0; width: 31%; aspect-ratio: 480 / 227; }
.canopy-view.is-framed .canopy-cloud--b { animation-duration: 4.2s; animation-delay: .5s; animation-direction: reverse; }
@keyframes canopy-drift { 50% { transform: translateX(12px); } }
.canopy-view-copy { position: relative; z-index: 2; max-width: 30em; }
.canopy-view-copy .j-find-title { margin-bottom: 12px; }
/* The feather lies outside the frame, below the viewfinder's lines, so all four corners stay drawn. */
.canopy-feather { z-index: 0; right: -150px; bottom: -34px; width: 150px; transform: rotate(-24deg); }

/* ---------- World map: each world's own painted map, pasted into the journal ---------- */
/* The painting is multiplied onto the sheet, so its white paper becomes the journal's, and a soft deckled mask
   fades its edges inside the sheet's own torn edge. The painting fills the sheet exactly, so each place's --x
   and --y (journal-canopy.js, in percent of the painting) land on its feature at every size. */
#archive-dialog[data-chapter="map"] .j-head--plain { padding-bottom: 26px; }
.j-page--map { --atlas-deckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 107' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-.1' y='-.1' width='1.2' height='1.2'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cpath d='M4.7 6.0 11.1 4.6 15.2 5.6 22.7 5.2 27.4 4.4 33.3 5.1 39.7 5.5 45.2 4.4 50.0 3.6 55.9 6.1 61.7 4.0 68.0 4.0 73.7 5.7 79.2 4.8 87.0 4.7 91.0 3.8 98.2 4.2 103.4 3.9 109.6 5.8 115.0 3.3 121.4 5.6 127.8 4.2 131.5 5.6 139.1 4.6 144.3 4.4 150.3 4.1 156.4 3.5 156.7 9.7 156.6 14.0 156.6 21.1 154.5 26.0 156.0 31.1 154.6 37.2 156.1 42.8 156.2 47.1 157.2 53.5 156.3 58.6 155.6 63.4 155.2 70.4 156.0 74.4 156.5 81.0 156.3 86.3 154.4 92.8 157.2 98.3 156.4 102.4 149.3 103.1 144.1 102.0 138.7 103.5 131.8 101.5 127.8 103.6 119.8 101.3 114.8 103.9 109.7 101.9 103.0 102.0 97.5 103.3 90.6 103.2 86.6 102.9 80.3 102.0 73.8 103.4 69.4 102.4 61.8 101.7 57.9 102.0 51.5 104.1 45.8 104.0 39.0 102.1 34.1 104.2 27.4 104.0 20.6 104.0 14.8 102.0 9.8 102.3 5.3 102.6 5.1 97.2 4.0 91.5 3.7 86.1 4.0 80.1 3.1 76.5 3.5 71.0 3.1 64.0 3.3 59.3 4.7 53.0 5.6 48.3 4.7 41.8 3.4 37.3 5.4 31.2 3.5 27.0 5.3 21.4 5.1 14.5 4.5 9.8Z' fill='white' filter='url(%23f)'/%3E%3C/svg%3E"); }
.atlas-chart { container: atlas / inline-size; --atlas-stamp: clamp(44px, 6.4cqw, 70px); }
.atlas-sheet { position: relative; aspect-ratio: 1600 / 1073; margin: 8px -6px 0; }
.atlas-sheet > .j-paper::before { background: linear-gradient(#fbf6eacc, #fbf6eacc), var(--j-paper-tile) 0 0 / 512px auto, var(--j-card); }
.atlas-art {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: var(--atlas-deckle) 0 0 / 100% 100% no-repeat; mask: var(--atlas-deckle) 0 0 / 100% 100% no-repeat;
}
.atlas-creases {
  position: absolute; inset: 1px; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.3% - 18px), #5a3a1f12 calc(33.3% - 1px), #ffffff66 33.3%, transparent calc(33.3% + 14px)),
    linear-gradient(90deg, transparent calc(66.6% - 18px), #5a3a1f12 calc(66.6% - 1px), #ffffff66 66.6%, transparent calc(66.6% + 14px)),
    linear-gradient(180deg, transparent calc(50% - 16px), #5a3a1f10 calc(50% - 1px), #ffffff5c 50%, transparent calc(50% + 12px));
}
.atlas-compass { position: absolute; right: 3.2%; top: 5%; width: clamp(40px, 5.6cqw, 60px); height: auto; aspect-ratio: 1; overflow: visible; fill: none; stroke: var(--j-ink-soft); stroke-width: 1.2; pointer-events: none; filter: drop-shadow(0 0 1.5px #fbf6ea); }
.atlas-compass .atlas-compass-fill { fill: var(--j-ink-soft); stroke: none; }
.atlas-compass text { font: 500 11px var(--j-sc); fill: var(--j-ink-soft); stroke: none; }

/* Each place: its stamp struck on the feature, inked once visited, and its name on a slip of paper pasted to
   one side (the side and the slip's slight turn are in journal-canopy.js). The stamp and the slip together are
   the button. */
.atlas-place { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 3px; width: max-content; padding: 0; color: var(--j-ink); border-radius: 12px; }
.atlas-place--below { flex-direction: column; translate: -50% calc(var(--atlas-stamp) / -2); }
.atlas-place--above { flex-direction: column-reverse; translate: -50% calc(var(--atlas-stamp) / 2 - 100%); }
.atlas-place--right { translate: calc(var(--atlas-stamp) / -2) -50%; }
.atlas-place--left { flex-direction: row-reverse; translate: calc(var(--atlas-stamp) / 2 - 100%) -50%; }
.atlas-place--below-end { flex-direction: column; align-items: flex-end; translate: calc(var(--atlas-stamp) / 2 - 100%) calc(var(--atlas-stamp) / -2); }
.atlas-mark { position: relative; flex: none; display: block; width: var(--atlas-stamp); height: var(--atlas-stamp); transition: scale .2s ease; }
/* A stamp is its two rings on a band of paper colour, so it reads on busy paint and its feature shows through.
   Visited, the rings are struck in the place's ink, grainy (the #j-ink filter) over a half-strength print and
   multiplied onto the paper, as on the contents page; before that they are a faint pencilled ring. */
.atlas-stamp { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; rotate: -8deg; }
.atlas-place--history .atlas-stamp, .atlas-place--films .atlas-stamp { rotate: 7deg; }
.atlas-stamp-ground { stroke: #fbf6ea; stroke-width: 13; opacity: .85; }
.atlas-stamp-ink { mix-blend-mode: multiply; }
.atlas-stamp-ring { stroke-width: 5; }
.atlas-stamp-inner { stroke-width: 1.2; }
.atlas-stamp.is-inked .atlas-stamp-ink { opacity: .9; }
.atlas-stamp-base { opacity: .5; }
.atlas-stamp:not(.is-inked) { color: #5c4a3d; }
.atlas-stamp:not(.is-inked) .atlas-stamp-ink { opacity: .72; }
.atlas-stamp:not(.is-inked) .atlas-stamp-ring { stroke-width: 3.5; stroke-dasharray: 3 5; }
.atlas-stamp:not(.is-inked) .atlas-stamp-inner { stroke-dasharray: 3 5; }
/* The name slip: a scrap of the journal's paper with torn edges, turned a degree or so, pasted over the pencil. */
.atlas-label {
  position: relative; z-index: 1; display: grid; justify-items: center; padding: 2px 9px 3px; text-align: center; white-space: nowrap; rotate: var(--tilt, 0deg);
  background: linear-gradient(#fbf6eaeb, #fbf6eaeb), var(--j-paper-tile) 0 0 / 512px auto, var(--j-card);
  clip-path: polygon(0 1px, 9% 0, 22% 1.5px, 36% .3px, 51% 1.3px, 65% 0, 80% 1.2px, 92% .2px, 100% 1px, calc(100% - 1.2px) 34%, 100% 66%, calc(100% - .6px) 100%, 86% calc(100% - 1.2px), 71% 100%, 56% calc(100% - 1.5px), 41% calc(100% - .3px), 27% calc(100% - 1.3px), 13% 100%, 0 calc(100% - 1px), 1.2px 64%, 0 32%);
}
:is(.atlas-place--left, .atlas-place--below-end) .atlas-label { justify-items: end; text-align: right; }
.atlas-place--right .atlas-label { justify-items: start; text-align: left; margin-left: var(--gap, 0px); }
.atlas-place--left .atlas-label { margin-right: var(--gap, 0px); }
.atlas-name { font: 400 18px/1.3 var(--j-text); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.atlas-place:hover .atlas-mark, .atlas-place:focus-visible .atlas-mark { scale: 1.07; }
.atlas-place:hover .atlas-name, .atlas-place:focus-visible .atlas-name, .atlas-key:hover .atlas-name, .atlas-key:focus-visible .atlas-name { text-decoration-color: var(--j-link-line); }
/* Where Mew is now: the name a little heavier, a small-caps line beneath it and a quick pencil loop round the
   place, wider than tall and off its centre, so on a round feature it never reads as one more ring of it. */
:is(.atlas-place, .atlas-key).is-here .atlas-name { font-weight: 500; }
.atlas-now { font: 500 16px/1.2 var(--j-sc); letter-spacing: .06em; color: var(--j-place-ink); }
.atlas-ring { position: absolute; left: -16px; top: -9px; width: calc(100% + 34px); height: calc(100% + 16px); rotate: -12deg; overflow: visible; fill: none; stroke: var(--j-hand); stroke-width: 3.4; stroke-linecap: round; pointer-events: none; }
.atlas-ring path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: atlas-ring .7s ease-out .3s backwards; }
@keyframes atlas-ring { from { stroke-dashoffset: 1; } }

/* Sheets too narrow for printed names (under 580px, where two names could meet): the same stamp on each feature,
   numbered, and the places as numbered buttons beneath the map. The stamp is open, so the small features (a shell,
   a book, a stone ring) still show inside it; its number sits on a paper tab at its shoulder, or at another corner
   where a neighbour is close (journal-canopy.js). */
.atlas-pins, .atlas-legend { display: none; }
@container atlas (max-width: 579px) {
  .atlas-place { display: none; }
  .atlas-pins { display: block; }
  .atlas-legend { display: grid; }
}
/* The pins share one layer, so every ring and tab sits above every tap halo: a tap inside a ring always travels to
   its own place, and Mew's pencil loop runs over the rings but under the number tabs. */
.atlas-pins { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.atlas-pin { position: absolute; left: var(--x); top: var(--y); width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.atlas-pin:not(.is-inked) { color: #5c4a3d; }
/* A 48px target round each ring, so a tap on the map travels as the stamps do on wider sheets. */
.atlas-pin::before { content: ''; position: absolute; z-index: 0; inset: -7px; border-radius: 50%; }
.atlas-pin-ring { position: relative; z-index: 1; transition: scale .2s ease; }
.atlas-pin .atlas-ring { z-index: 2; }
/* The small stamps (the numbered rings and the legend's) draw their lines a little heavier, to read at 30 to 34px. */
:is(.atlas-pin, .atlas-dot) .atlas-stamp-ring { stroke-width: 6.5; }
:is(.atlas-pin, .atlas-dot) .atlas-stamp-inner { stroke-width: 2; }
:is(.atlas-pin, .atlas-dot) .atlas-stamp:not(.is-inked) .atlas-stamp-ring { stroke-width: 5; stroke-dasharray: 5 6; }
.atlas-pin-num { position: absolute; z-index: 3; top: -11px; right: -12px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: #fbf6ea; box-shadow: 0 0 0 1.5px currentColor; font: 700 16px/1 var(--j-sc); }
.atlas-pin--tab-bl .atlas-pin-num { top: auto; right: auto; bottom: -11px; left: -12px; }
@media (hover: hover) { .atlas-pin:hover .atlas-pin-ring { scale: 1.08; } }
.atlas-dot { position: relative; display: grid; place-items: center; width: 30px; height: 30px; font: 700 16px/1 var(--j-sc); }
.atlas-dot:not(.is-inked) { color: #5c4a3d; }
.atlas-dot > .atlas-stamp { position: absolute; inset: 0; }
.atlas-dot-num { position: relative; }
.atlas-legend { list-style: none; margin: 14px 0 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 2px 12px; }
.atlas-key { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 5px 6px; border-radius: 8px; text-align: left; color: var(--j-ink); }
.atlas-key:hover { background: #6b4e3a12; }
.atlas-key .atlas-dot { flex: none; }
.atlas-key-text { display: grid; min-width: 0; }

/* Choose a world: each world as its own small map. */
.atlas-worlds { margin-top: 34px; }
.atlas-worlds-title { font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); margin: 0 0 8px; }
.atlas-world-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 18px; }
.atlas-world { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px 10px 8px; border-radius: 8px; text-align: left; color: var(--j-ink); }
.atlas-world:hover { background: #6b4e3a12; }
.atlas-world-map { position: relative; display: block; aspect-ratio: 360 / 242; }
.atlas-world-map img { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; -webkit-mask: var(--atlas-deckle) 0 0 / 100% 100% no-repeat; mask: var(--atlas-deckle) 0 0 / 100% 100% no-repeat; transition: scale .25s ease; }
.atlas-world:hover .atlas-world-map img { scale: 1.03; }
.atlas-world[data-locked="true"] .atlas-world-map img { filter: saturate(.5); opacity: .72; }
.atlas-world-frame { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); overflow: visible; fill: none; stroke: var(--j-hand); stroke-width: 1.1; stroke-linecap: round; }
.atlas-world-frame path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
.atlas-world[aria-pressed="true"] .atlas-world-frame path { stroke-dashoffset: 0; }
.atlas-world:not([aria-pressed="true"]) .atlas-world-frame { opacity: 0; transition: opacity 0s .5s; }
.atlas-world-name { min-width: 0; font: 400 18px/1.25 var(--j-text); overflow-wrap: normal; hyphens: manual; }
.atlas-world[aria-pressed="true"] .atlas-world-name { font-weight: 500; }
#archive-dialog .atlas-world .member-lock { justify-content: flex-start; margin-top: 2px; }
#archive-dialog[data-chapter="map"] .j-folio { margin-top: 40px !important; }

/* ---------- the colophon ---------- */
/* Every page clips instead of scrolling (styles-journal.css), so the printer's mark can stay beside the text. */
.colophon { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 56px; align-items: start; }
.colophon-text { max-width: 36em; }
.colophon-part + .colophon-part { margin-top: 46px; }
.colophon-head { font: 500 17px/1.3 var(--j-sc); letter-spacing: .1em; color: var(--j-ink); margin: 0 0 10px; }
.colophon-part p:not(.j-source-line) { font-size: 18.5px; line-height: 1.62; }
.colophon-part p + p:not(.j-source-line) { margin-top: .75em; }
.colophon-part .j-source-line { margin-top: 2px !important; }
.colophon-index { list-style: none; margin: 16px 0 0; padding: 0; max-width: 460px; }
.colophon-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); }
.colophon-index-leader { flex: 1 1 auto; min-width: 16px; border-bottom: 1.5px dotted #6b4e3a88; translate: 0 -.3em; }
.colophon-index-place { flex: none; font-style: italic; color: var(--j-ink-soft); }
.colophon-index button:hover .colophon-index-name { text-decoration: underline; text-decoration-color: var(--j-link-line); text-underline-offset: 3px; }
.colophon-margin { position: sticky; top: 96px; padding-top: 8px; }
.colophon-mark { display: block; width: 190px; height: 190px; margin: 0 auto; overflow: visible; fill: none; stroke: currentColor; color: #6d3a57; opacity: .82; mix-blend-mode: multiply; rotate: -7deg; }
.colophon-mark text { font-family: var(--j-sc); font-weight: 700; fill: currentColor; stroke: none; }
.colophon-feather { position: relative; display: block; width: 150px; margin: 26px 0 0 44px; transform: rotate(-18deg); }
#archive-dialog[data-chapter="credits"] .j-folio { margin-top: 56px !important; }

/* ---------- tablet portrait: one column ---------- */
@container journal (max-width: 879px) {
  .j-head--canopy .j-vignette { height: 420px; margin: 0; }
  .j-vignette--canopy img { object-position: 50% 26%; transform: scale(1.74); transform-origin: 21% 22%; }
  .j-head--canopy .j-head-text { width: auto; margin: -120px var(--j-pad) 0; padding: 30px 34px 28px; }
  .j-head--canopy .j-head-text > .j-stamp { left: auto; right: -10px; top: -84px; width: 136px; height: 136px; }

  .canopy-study { display: block; margin-top: 8px; }
  .canopy-plate { width: 54%; max-width: 360px; margin: 64px 0 0 4%; }
  .canopy-plate figcaption { margin-right: -40%; }
  .canopy-note--asleep { left: 100%; top: 12%; }
  .canopy-note--asleep .j-arrow { left: -54px; top: 40px; }
  .canopy-note--hill { left: 104%; top: 49%; }
  .canopy-text { padding-top: 26px; }
  .canopy-colour { margin-top: 12px; }
  .canopy-swatch { margin: 44px 0 0 auto; }
  .canopy-leaf { left: auto; right: calc(340px - 30px); bottom: 150px; transform: rotate(-32deg); }
  .canopy-view { width: 100%; margin-top: 88px; padding: 150px 48px 50px; }
  .canopy-feather { right: 64px; bottom: -84px; width: 128px; }

  .colophon { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .colophon-margin { position: relative; top: auto; display: flex; align-items: center; justify-content: center; gap: 24px; padding-top: 30px; }
  .colophon-mark { width: 160px; height: 160px; margin: 0; }
  .colophon-feather { width: 120px; margin: 0; }
}

/* ---------- phones ---------- */
@container journal (max-width: 599px) {
  .j-head--canopy .j-vignette { height: 330px; }
  .j-vignette--canopy img { object-position: 50% 30%; transform: scale(1.9); transform-origin: 18% 26%; }
  .j-head--canopy .j-head-text { margin: -78px 6px 0; padding: 24px 22px 22px; }
  .j-head--canopy .j-head-text > .j-stamp { right: -8px; top: -70px; width: 104px; height: 104px; }

  .canopy-plate { width: 78%; max-width: 300px; margin: 96px auto 0 4%; }
  .canopy-plate .j-plate-mount { padding: 13px; }
  .canopy-plate figcaption { margin-right: -24%; }
  .canopy-note--asleep { left: 40%; top: -84px; --j-note-r: -3deg; }
  .canopy-note--asleep .j-arrow { left: -24px; top: 30px; width: 52px; height: 96px; transform: scaleX(-1); }
  .canopy-note--hill { display: none; }
  .canopy-text { padding-top: 20px; }
  .canopy-inspect button { font-size: 18px; }
  .canopy-swatch { max-width: none; margin: 40px 2px 0; }
  .canopy-leaf { right: 10px; left: auto; bottom: auto; top: 6px; width: 70px; transform: rotate(24deg); }
  .canopy-view { margin-top: 72px; padding: 124px 24px 36px; }
  .canopy-sky { left: 14px; right: 14px; top: 16px; height: 96px; }
  .canopy-cloud--a { width: 56%; }
  .canopy-cloud--b { width: 42%; top: 30px; }
  .canopy-corner { width: 40px; height: 40px; }
  .canopy-focus { display: none; }
  .canopy-feather { right: 48px; bottom: -70px; width: 100px; }

  .atlas-sheet { margin: 4px -4px 0; }
  .atlas-creases {
    background:
      linear-gradient(90deg, transparent calc(50% - 16px), #5a3a1f12 calc(50% - 1px), #ffffff66 50%, transparent calc(50% + 12px)),
      linear-gradient(180deg, transparent calc(50% - 14px), #5a3a1f10 calc(50% - 1px), #ffffff5c 50%, transparent calc(50% + 10px));
  }
  .atlas-worlds { margin-top: 26px; }
  .atlas-world-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .atlas-world { padding: 8px 6px 6px; }

  .colophon-part + .colophon-part { margin-top: 38px; }
  .colophon-part p:not(.j-source-line) { font-size: 18px; }
  .colophon-mark { width: 132px; height: 132px; }
  .colophon-feather { width: 96px; }
}

/* ---------- the World map held sideways ---------- */
/* On a landscape screen the heading and the worlds sit in a narrow left column and the map takes the rest of
   the width, centred against that column, so the whole painting and Mew's own mark are in view when the page
   opens. */
@media (orientation: landscape) and (max-height: 900px) {
  .j-page--map { --atlas-width: min(100%, calc((100dvh - 190px) * 1600 / 1073)); display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 30px; align-items: start; }
  .j-page--map > .j-head--plain { grid-column: 1; grid-row: 1; }
  .j-page--map > .atlas-worlds { grid-column: 1; grid-row: 2; margin-top: 8px; }
  .j-page--map .atlas-world-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .j-page--map .atlas-world { padding: 8px 5px 6px; }
  .j-page--map > .atlas-chart { grid-column: 2; grid-row: 1 / span 2; width: var(--atlas-width); justify-self: end; align-self: center; margin: 64px 0 0; }
  .j-page--map .atlas-sheet { margin: 0; }
  .j-page--map > .j-folio { grid-column: 1 / -1; }
}
/* Phones held sideways: the map fills the height of the window on the right and stays there while the left
   column scrolls past it: the heading, the numbered places, then the worlds. */
@media (orientation: landscape) and (max-height: 500px) {
  /* The painting still opens the finale on a phone held sideways, with the panel over its foot. */
  #archive-dialog .j-head--canopy .j-vignette { height: min(420px, 70dvh); }
  #archive-dialog .j-head--canopy .j-head-text { width: min(520px, calc(100% - 2 * var(--j-pad))); margin: -96px 0 0 var(--j-pad); }
  .j-page--map { grid-template-columns: minmax(0, 1fr) min(60%, calc((100dvh - 110px) * 1600 / 1073)); grid-template-rows: auto auto auto auto; }
  #archive-dialog .j-page--map .j-title { font-size: 44px; }
  #archive-dialog[data-chapter="map"] .j-head--plain { padding-bottom: 12px; }
  /* A subgrid cannot be a size container, so here the numbered layout is set directly, not by @container. */
  .j-page--map > .atlas-chart { container-type: normal; grid-column: 1 / -1; grid-row: 1 / span 3; width: auto; justify-self: stretch; margin: 0; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-self: stretch; pointer-events: none; }
  .j-page--map > .atlas-chart > * { pointer-events: auto; }
  .j-page--map .atlas-sheet { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 64px; margin-top: 64px; }
  .j-page--map .atlas-place { display: none; }
  .j-page--map .atlas-pins { display: block; }
  .j-page--map .atlas-legend { display: grid; grid-column: 1; grid-row: 2; align-self: start; grid-template-columns: minmax(0, 1fr); margin: 0; }
  .j-page--map > .atlas-worlds { grid-column: 1; grid-row: 3; margin-top: 26px; }
  .j-page--map > .j-folio { grid-row: 4; }
}

/* Reduced motion: the frame is drawn, the clouds stay still, nothing lifts. */
@media (prefers-reduced-motion: reduce) {
  .canopy-cloud, .canopy-view.is-framed .canopy-cloud { animation: none !important; }
  .canopy-corner path, .canopy-finder::before, .canopy-focus, .canopy-lens, .atlas-mark, .atlas-pin-ring, .atlas-name, .atlas-world-frame, .atlas-world-frame path, .atlas-world-map img { transition: none !important; }
  .atlas-ring path { animation: none !important; }
  .canopy-view .canopy-corner path { stroke-dashoffset: 0 !important; }
  .canopy-view .canopy-finder::before, .canopy-view .canopy-focus { opacity: .75 !important; }
  .canopy-inspect button:hover .canopy-lens, .canopy-inspect button:focus-visible .canopy-lens { rotate: none; }
  .atlas-place:hover .atlas-mark, .atlas-place:focus-visible .atlas-mark, .atlas-pin:hover .atlas-pin-ring, .atlas-world:hover .atlas-world-map img { scale: none; }
}