/* The Forest map (#map) and the colophon (#credits). Owned by js/journal-map.js.
   Shared journal rules live in styles-journal.css; the page is a `journal` container (breakpoints 879px, 599px). */

/* ---------- Forest map: a folded field map pasted into the journal ---------- */
#archive-dialog[data-chapter="map"] .j-head--plain { padding-bottom: 22px; }
/* The sheet is square because the forest was captured square; the painting sits in a soft round window on it. */
.atlas-sheet { position: relative; aspect-ratio: 1 / 1; margin: 8px -6px 0; overflow: hidden; }
.atlas-sheet > .j-paper::before { background: linear-gradient(#fbf6eab8, #fbf6eab8), var(--j-paper-tile) 0 0 / 512px auto, var(--j-card); }
/* The painting is larger than the sheet by its overhang (--o, negative, set by the page) so only the view shows. Where a
   sheet shows more than its painting (a view widened to fit its places), --o is positive and the painting sits inside
   the sheet, its square edge feathered out so only the watercolour shows. */
.atlas-art { position: absolute; left: var(--o, 0%); top: var(--o, 0%); width: calc(100% - 2 * var(--o, 0%)); height: calc(100% - 2 * var(--o, 0%)); pointer-events: none; mix-blend-mode: multiply; opacity: .94; -webkit-mask-image: radial-gradient(closest-side, #000 86%, #0000); mask-image: radial-gradient(closest-side, #000 86%, #0000); }
/* The round window the painting shows through: the sheet's own paper laid back over its edges. */
.atlas-sheet::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(#fbf6eab8, #fbf6eab8), var(--j-paper-tile) 0 0 / 512px auto, var(--j-card); -webkit-mask-image: radial-gradient(circle at 50% 50%, #0000 54%, #000 70%); mask-image: radial-gradient(circle at 50% 50%, #0000 54%, #000 70%); }
.atlas-creases {
  position: absolute; inset: 1px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(90deg, transparent calc(50% - 16px), #5a3a1f12 calc(50% - 1px), #ffffff73 50%, transparent calc(50% + 12px)),
    linear-gradient(180deg, transparent calc(50% - 16px), #5a3a1f10 calc(50% - 1px), #ffffff73 50%, transparent calc(50% + 12px));
}
.atlas-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.atlas-trail { stroke: #3d2f26; stroke-width: 2px; stroke-dasharray: .6 7; opacity: .78; }
.atlas-compass { position: absolute; right: 4%; top: 4%; z-index: 4; width: 62px; height: 62px; overflow: visible; fill: none; stroke: var(--j-ink-soft); stroke-width: 1.2; pointer-events: none; }
.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 ring (a numeral until visited, the date once it is) and its printed name, sitting on the
   place's real position. The whole mark is the button: its stamp, and its name printed beside it, so tapping either
   travels there. --x and --y come from the world's own coordinates. journal-map.js eases crowded stamps apart for each
   size of sheet (--w-*, --sm-*, --ls-*: the stamp's shift, and the leader back to the real spot) and then lays every
   name on the free side of its stamp (--nx, --ny from the stamp's corner, and its size and line break), measured in
   the reader's own font, so no name covers another, a stamp, the compass or Celebi's note, or runs off the sheet. */
.atlas-place {
  --stamp: 62px; --lift: calc(var(--stamp) / 2);
  --dx: var(--w-dx, 0px); --dy: var(--w-dy, 0px); --len: var(--w-len, 0px); --ang: var(--w-ang, 0deg);
  position: absolute; left: var(--x); top: var(--y); z-index: 5; display: grid; justify-items: center; gap: 0; width: max-content; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0;
  translate: calc(-50% + var(--dx)) calc(var(--dy) - var(--lift)); text-align: center; color: var(--j-ink); border-radius: 10px;
}
.atlas-mark { display: block; width: var(--stamp); height: var(--stamp); transition: scale .2s ease; filter: drop-shadow(0 0 3px #fbf6ea) drop-shadow(0 0 5px #fbf6eaa0); }
/* A moved stamp's leader: a pencil line from the stamp's ring to a dot on the place's real spot. */
.atlas-lead { position: absolute; z-index: -1; left: 50%; top: var(--lift); width: var(--len); height: 1.5px; margin-top: -.75px; transform-origin: 0 50%; rotate: var(--ang); pointer-events: none; background: linear-gradient(90deg, transparent calc(var(--stamp) * .46), #3d2f26a6 0); }
.atlas-lead::after { content: ''; position: absolute; left: 100%; top: 50%; width: min(7px, var(--len)); height: min(7px, var(--len)); translate: -50% -50%; border-radius: 50%; background: #3d2f26; box-shadow: 0 0 0 2px #fbf6ead0; }
.atlas-stamp { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; opacity: .62; rotate: -8deg; }
.atlas-stamp:not(.is-inked) { color: #5d4a3c; }
.atlas-stamp:not(.is-inked) circle:first-child { stroke-dasharray: 3 5; }
.atlas-stamp.is-inked { opacity: .9; }
.atlas-place--history .atlas-stamp, .atlas-place--films .atlas-stamp { rotate: 7deg; }
.atlas-stamp text { font-family: var(--j-sc); font-weight: 700; fill: currentColor; stroke: #fbf6ea; stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
.atlas-name { position: absolute; left: var(--nx, 50%); top: var(--ny, calc(100% + 2px)); translate: -50% 0; padding: 0 4px; font: 400 17px/1.15 var(--j-text); white-space: nowrap; text-shadow: 0 0 3px #fbf6ea, 0 0 6px #fbf6ea, 0 0 10px #fbf6ea, 0 0 14px #fbf6ea; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.atlas-sheet.is-named .atlas-name, .atlas-sheet.is-measuring .atlas-name { translate: none; }
.atlas-sheet.is-measuring .atlas-name { left: 0; top: 0; visibility: hidden; }
.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 { text-decoration-color: var(--j-link-line); }

/* Celebi's own position, a small green leaf with a pencilled note beside it. */
.atlas-here { position: absolute; left: var(--x); top: var(--y); z-index: 6; width: 0; height: 0; pointer-events: none; }
.atlas-celebi-mark { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; overflow: visible; fill: #7fbf6a; stroke: #2d4f3c; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 0 3px #fbf6ea); animation: atlas-bob 3.2s ease-in-out infinite; }
.atlas-celebi-mark path:last-child { fill: none; }
/* The note takes whichever corner of the leaf is clear of the places; journal-map.js picks one for each size of
   sheet (--left / --below here, --sm-* on phones, --ls-* on a phone held sideways). The corner is set as custom
   properties: which side the note sits on (--n-*), and how its arrow is mirrored to point back at the leaf. */
.atlas-here { --n-gap: 14px; --n-left: var(--n-gap); --n-right: auto; --n-top: auto; --n-bottom: 12px; --n-mx: -1; --n-my: 1; --a-left: -8px; --a-right: auto; --a-top: 100%; --a-bottom: auto; }
.atlas-here--left { --n-left: auto; --n-right: var(--n-gap); --n-mx: 1; --a-left: auto; --a-right: -8px; }
.atlas-here--below { --n-gap: 6px; --n-top: 14px; --n-bottom: auto; --n-my: -1; --a-top: auto; --a-bottom: 100%; }
.atlas-here-note { position: absolute; left: var(--n-left); right: var(--n-right); top: var(--n-top); bottom: var(--n-bottom); width: max-content; font-size: 20px; --j-note-r: calc(var(--n-mx) * var(--n-my) * 5.5deg); color: var(--j-hand); text-shadow: 0 0 3px #fbf6ea, 0 0 6px #fbf6ea, 0 0 10px #fbf6ea, 0 0 14px #fbf6ea; }
/* The note wears the names' cream halo. The journal's pencil reveal clips the note's text to its box, which would cut the
   halo off at the edges, so here the clip reaches past the box by the halo's width (and hides the whole note until then). */
.atlas-here-note .j-note-text { padding: 0 3px; }
.j-armed .atlas-here-note .j-note-text { clip-path: inset(-16px -16px -16px -16px); }
.j-armed .atlas-here-note:not(.is-revealed) .j-note-text { clip-path: inset(-16px calc(100% + 16px) -16px -16px); }
.atlas-here.is-quiet .atlas-here-note { display: none; }
.atlas-here-note .j-arrow { left: var(--a-left); right: var(--a-right); top: var(--a-top); bottom: var(--a-bottom); width: 34px; height: 26px; transform: scale(var(--n-mx), var(--n-my)) rotate(-30deg); }
@keyframes atlas-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* The key: numerals I to V in reading order, with the date each place was reached. */
.atlas-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 22px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: none; }
.atlas-key li { display: flex; align-items: baseline; gap: 10px; min-height: 30px; font: 400 17px/1.3 var(--j-text); color: var(--j-ink); }
.atlas-key-numeral { flex: none; width: 26px; font: 700 14px/1 var(--j-sc); letter-spacing: .04em; color: var(--j-place-ink); }
.atlas-key-name { display: flex; flex-direction: column; min-width: 0; }
.atlas-key-here { font: 500 13px/1.3 var(--j-sc); letter-spacing: .08em; color: var(--j-place-ink); }
.atlas-key-when { margin-left: auto; font: 400 13.5px/1.3 var(--j-sc); letter-spacing: .05em; color: var(--j-ink-soft); white-space: nowrap; }

.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: #4f6f3914; }
/* A cut-out of the forest's own painted map; its edges are feathered into the paper in the file itself. */
.atlas-world-map { position: relative; display: block; aspect-ratio: 4 / 3; }
.atlas-world-map img { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; transition: scale .25s ease; }
.atlas-world:hover .atlas-world-map img, .atlas-world:focus-visible .atlas-world-map img { scale: 1.03; }
.atlas-world[data-locked="true"] .atlas-world-map img { filter: saturate(.5); opacity: .72; }
/* The pencilled frame draws itself round the forest Celebi is in. Its stroke does not scale with the box, so the dash
   is a fixed length longer than any drawn frame (never pathLength, which Chrome measures on the unscaled path). */
.atlas-world-frame { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); overflow: visible; fill: none; stroke: var(--j-hand); stroke-width: 1.4px; stroke-linecap: round; }
.atlas-world-frame path { stroke-dasharray: 2400; stroke-dashoffset: 2400; transition: stroke-dashoffset .9s 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 .9s; }
.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 .atlas-note { margin-top: 22px; font: italic 400 15px/1.5 var(--j-text); color: var(--j-ink-soft); max-width: 60ch; }
#archive-dialog[data-chapter="map"] .j-folio { margin-top: 36px !important; }

/* ---------- the colophon ---------- */
.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 #4f6f3988; 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: #2f5440; opacity: .82; mix-blend-mode: multiply; rotate: -7deg; }
.colophon-mark text { font-family: var(--j-sc); font-weight: 700; fill: currentColor; stroke: none; }
.colophon-fern { position: relative; display: block; width: 110px; margin: 26px 0 0 64px; transform: rotate(14deg); }
#archive-dialog[data-chapter="credits"] .j-folio { margin-top: 56px !important; }

/* Four forests across only when every name fits whole on its line. */
@container journal (max-width: 999px) {
  .atlas-world-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- tablet portrait: one column ---------- */
@container journal (max-width: 879px) {
  /* Two columns in the key, so a name and its visit date always share one line. */
  .atlas-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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-fern { width: 90px; margin: 0; }
}

/* ---------- phones: smaller stamps and names, and the key below ---------- */
@container journal (max-width: 599px) {
  .atlas-sheet { margin: 4px -4px 0; }
  .atlas-compass { right: 4%; top: 3.5%; width: 44px; height: 44px; }
  .atlas-place[class] { --stamp: 52px; --lift: calc(var(--stamp) / 2); --dx: var(--sm-dx, 0px); --dy: var(--sm-dy, 0px); --len: var(--sm-len, 0px); --ang: var(--sm-ang, 0deg); }
  /* The numerals get a paper halo to read over the paint. */
  .atlas-stamp { opacity: .85; }
  .atlas-stamp text { stroke: #fbf6ea; stroke-width: 6px; stroke-linejoin: round; paint-order: stroke; }
  .atlas-name { font-size: 14px; padding: 0 3px; }
  .atlas-here-note { font-size: 18px; }
  .atlas-here[class] { --n-gap: 14px; --n-left: var(--n-gap); --n-right: auto; --n-top: auto; --n-bottom: 12px; --n-mx: -1; --n-my: 1; --a-left: -8px; --a-right: auto; --a-top: 100%; --a-bottom: auto; }
  .atlas-here.atlas-here--sm-left { --n-left: auto; --n-right: var(--n-gap); --n-mx: 1; --a-left: auto; --a-right: -8px; }
  .atlas-here.atlas-here--sm-below { --n-gap: 6px; --n-top: 14px; --n-bottom: auto; --n-my: -1; --a-top: auto; --a-bottom: 100%; }
  .atlas-key { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 14px; }
  .atlas-key li { font-size: 16.5px; }
  .atlas-worlds { margin-top: 26px; }
  .atlas-world-list { gap: 4px 10px; }
  .atlas-world { gap: 6px; padding: 8px 6px 6px; }
  .atlas-world-name { font-size: 17px; }
  .colophon-part + .colophon-part { margin-top: 38px; }
  .colophon-part p:not(.j-source-line) { font-size: 18px; }
  .colophon-mark { width: 132px; height: 132px; }
  .colophon-fern { width: 76px; }
}

/* A short phone (a 320 x 568 iPhone SE): the heading tightens so the whole sheet is in view when the map opens. */
@media (max-height: 700px) {
  @container journal (max-width: 599px) {
    #archive-dialog[data-chapter="map"] .j-head--plain { padding-bottom: 4px; }
    #archive-dialog[data-chapter="map"] .j-head--plain .j-inwhich { margin-top: 4px; }
    #archive-dialog[data-chapter="map"] .j-head--plain .j-deck { margin-top: 6px; font-size: 16px; line-height: 1.35; }
  }
}

/* ---------- the Forest map held sideways ---------- */
/* On a landscape screen the heading, key and forests sit in a left column and the square sheet is sized to the
   reading window, so every place and Celebi's own mark are in view when the page opens. */
@media (orientation: landscape) and (max-height: 900px) {
  .j-page--map { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.3fr); grid-template-rows: auto auto 1fr auto auto; column-gap: 36px; align-items: start; }
  .j-page--map > .j-head--plain { grid-column: 1; grid-row: 1; }
  .j-page--map > .atlas-key { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
  .j-page--map > .atlas-worlds { grid-column: 1; grid-row: 3; margin-top: 18px; }
  /* Compact rows here: a small cut-out beside each name, so all four forests share the first screen with the sheet. */
  .j-page--map .atlas-world-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .j-page--map .atlas-world { grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 6px; }
  .j-page--map .atlas-world-map { width: 88px; }
  .j-page--map > .atlas-sheet { grid-column: 2; grid-row: 1 / span 3; width: min(100%, calc(100dvh - 200px)); justify-self: end; margin: 96px 0 0; }
  .j-page--map > .atlas-note { grid-column: 1 / -1; grid-row: 4; }
  .j-page--map > .j-folio { grid-column: 1 / -1; grid-row: 5; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .j-page--map > .atlas-sheet { width: min(100%, calc(100dvh - 90px)); margin: 8px 52px 0 0; }
  .j-page--map .atlas-world { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 4px 4px; }
  .j-page--map .atlas-world-map { width: 64px; }
  .j-page--map .atlas-world-name { font-size: 16px; }
  .j-page--map .atlas-place[class] { --stamp: 44px; --lift: calc(var(--stamp) / 2); --dx: var(--ls-dx, 0px); --dy: var(--ls-dy, 0px); --len: var(--ls-len, 0px); --ang: var(--ls-ang, 0deg); }
  .j-page--map .atlas-place .atlas-name { font-size: 15px; }
  .j-page--map .atlas-here[class] { --n-gap: 14px; --n-left: var(--n-gap); --n-right: auto; --n-top: auto; --n-bottom: 12px; --n-mx: -1; --n-my: 1; --a-left: -8px; --a-right: auto; --a-top: 100%; --a-bottom: auto; }
  .j-page--map .atlas-here.atlas-here--ls-left { --n-left: auto; --n-right: var(--n-gap); --n-mx: 1; --a-left: auto; --a-right: -8px; }
  .j-page--map .atlas-here.atlas-here--ls-below { --n-gap: 6px; --n-top: 14px; --n-bottom: auto; --n-my: -1; --a-top: auto; --a-bottom: 100%; }
}

/* Reduced motion: nothing bobs, nothing scales. */
@media (prefers-reduced-motion: reduce) {
  .atlas-celebi-mark { animation: none !important; }
  .atlas-mark, .atlas-name, .atlas-world-frame, .atlas-world-frame path, .atlas-world-map img { transition: none !important; }
  .atlas-place:hover .atlas-mark, .atlas-place:focus-visible .atlas-mark, .atlas-world:hover .atlas-world-map img, .atlas-world:focus-visible .atlas-world-map img { scale: none; }
}