/* Reflection Pool (#films). Owned by the films chapter.
   The shared journal pieces (head, plates, notes, foot) are in styles-journal.css. This file sets the
   opener (the title, then the pool laid across the page like water with the stamp pressed on it), the
   programme, the three central films (The First Movie as the hero, then Lucario and Evolution), the sheet
   where the three glimpses sit side by side, the film strip of specials and shorts, and the colophon.
   Every entry has its poster pinned with kraft corners and its ticket stub, plus at most one more mark:
   a rubber stamp or a handwritten note, never both. */

/* ---------- the opener: the title first, then a wide, low strip of the pool ---------- */
.j-head--films { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
.j-head--films .j-vignette { order: 2; }
.j-head--films .j-head-text { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: 52px; align-items: end; padding-top: 112px; }
.j-head--films .j-head-text > * { grid-column: 1; }
.j-head--films .j-head-text > .j-deck { grid-column: 2; grid-row: 2 / span 2; align-self: end; max-width: none; margin: 0 0 4px !important; }
.j-head--films .j-vignette { height: 300px; margin: 30px calc(var(--j-pad) * -1) 0; overflow: clip; }
/* The painting is cropped to its water and faded out above and below, so the paper shows round it like a
   pool seen from the bank. Its own watercolour edges finish it at either side. */
.j-vignette--films img {
  object-position: 50% 66%; transform: scale(1.36); transform-origin: 57% 64%;
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 34%, #000 70%, transparent 88%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 34%, #000 70%, transparent 88%);
}
.j-head--films .j-stamp { top: 50%; right: 15%; width: 164px; height: 164px; translate: 0 -50%; --j-stamp-r: 8deg; }

/* ---------- the programme: every film in release order, each a jump to its entry ---------- */
.j-programme { max-width: 560px; margin: 34px 0 0; }
.j-programme-title { font: 500 16px/1.3 var(--j-sc); letter-spacing: .12em; color: var(--j-ink); margin: 0 0 4px; }
.j-programme ol { list-style: none; margin: 0; padding: 0; }
.j-programme button { display: flex; align-items: flex-end; gap: 12px; width: 100%; min-height: 44px; padding: 8px 0; text-align: left; font: 400 18px/1.3 var(--j-text); color: var(--j-ink); }
.j-programme-year { flex: none; align-self: flex-start; width: 2.7em; padding-top: 1px; font: 500 16px/1.4 var(--j-sc); letter-spacing: .04em; font-variant-numeric: oldstyle-nums; color: var(--j-place-ink); }
.j-programme-name { flex: 0 1 auto; min-width: 0; text-wrap: pretty; }
.j-programme-leader { flex: 1 1 16px; min-width: 16px; margin-bottom: .38em; border-bottom: 1.5px dotted #6b4e3a88; }
.j-programme-time { flex: none; font: italic 400 17px/1.3 var(--j-text); color: var(--j-ink-soft); }
.j-programme button:hover .j-programme-name { text-decoration: underline; text-decoration-color: var(--j-link-line); text-underline-offset: 3px; }

/* ---------- the three parts ---------- */
.j-films-part { position: relative; margin-top: 118px; }
.j-films-part-head { position: relative; max-width: 620px; margin-bottom: 64px; }
.j-films-part-head h3 { font: 400 46px/1.04 var(--j-display); color: var(--j-ink); margin: 0 0 12px; text-wrap: balance; outline: none; }
.j-page .j-films-part-head > p:not(.j-note) { font: italic 400 20px/1.5 var(--j-text); color: var(--j-ink-soft); max-width: 29em; text-wrap: pretty; }
.j-films-list { display: grid; gap: 128px; }

/* ---------- one feature film ---------- */
#archive-dialog .film-memory { position: relative; display: grid; gap: 0 56px; align-items: start; min-width: 0; padding: 0; border: 0; scroll-margin-top: 96px; }
.film-memory > * { min-width: 0; }
/* styles.css still carries the pre-journal .film-item paragraph rule; the page's own reading type wins here. */
.film-memory p { margin: 0; font-size: var(--j-body); line-height: 1.64; color: var(--j-ink); }
.film-memory .j-note { font-size: 21px; line-height: 1.1; color: var(--j-hand); }
.j-film-head { grid-area: head; position: relative; }
.j-film-plate { grid-area: plate; }
.j-film-desc { grid-area: desc; }
.j-film-part { grid-area: part; }
.film-memory > .j-ticket-wrap { grid-area: ticket; }
.j-film-notes { grid-area: notes; }

.j-film-title { font: 400 40px/1.04 var(--j-display); color: var(--j-ink); margin: 0; text-wrap: balance; outline: none; }
.j-page .j-film-sub { font: italic 400 21px/1.35 var(--j-text); color: var(--j-ink-soft); margin-top: 8px; text-wrap: balance; }
/* A central film prints its role in small capitals; only the glimpses carry a stamp. */
.j-page .j-film-role { margin-top: 10px; font: 500 16px/1.3 var(--j-sc); letter-spacing: .08em; color: var(--j-place-ink); }
.j-page .j-film-desc { margin-top: 20px; max-width: 30em; text-wrap: pretty; }

/* The poster: pinned onto the page with four small kraft corners, turned a degree or two. */
.j-film-plate .j-plate-mount > img { filter: drop-shadow(0 2px 2px #4a2f1a33) drop-shadow(0 12px 16px #4a2f1a2e); }
.j-film-plate .j-corner { width: 20px; height: 20px; }
.j-film-plate .j-corner--tl { left: -5px; top: -5px; }
.j-film-plate .j-corner--tr { right: -5px; top: -5px; }
.j-film-plate .j-corner--br { right: -5px; bottom: -5px; }
.j-film-plate .j-corner--bl { left: -5px; bottom: -5px; }
.j-film-plate figcaption { margin-top: 16px; }

/* The glimpses' rubber stamp with the existing role label: an oval in sienna. The frame carries the ink
   breakup; the label stays crisp so it reads at AA. */
.j-page .j-role { position: relative; display: inline-grid; place-items: center; margin-top: 14px; padding: 9px 26px 10px; color: #8a4526; rotate: 2.5deg; mix-blend-mode: multiply; }
.j-role-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.6; opacity: .92; }
.j-role-frame ellipse { vector-effect: non-scaling-stroke; }
.j-role-frame .j-role-thin { stroke-width: 1.1; }
.j-role-text { position: relative; font: 500 16px/1.2 var(--j-sc); letter-spacing: .09em; white-space: nowrap; }
/* They press onto the page the first time they scroll into view (js/journal-films.js). */
.j-films-armed .j-role { transition: opacity .16s ease-out, scale .18s cubic-bezier(.3, 1.4, .5, 1); }
.j-films-armed .j-role:not(.is-inked) { opacity: 0; scale: 1.22; }

/* Mew's part: a printed gloss in the margin, bracketed in pencil. */
.j-page .j-film-part { position: relative; max-width: 24em; padding: 2px 0 2px 26px; font: italic 400 18px/1.55 var(--j-text); color: var(--j-ink-soft); text-wrap: pretty; }
.j-film-part::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 13px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 100' preserveAspectRatio='none'%3E%3Cpath d='M11 1C5 2 6 8 6 22s1 21-4 28c5 6 4 13 4 27s-1 20 5 22' fill='none' stroke='%236d655e' stroke-width='1.3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.j-film-part .j-leadin { font-style: normal; color: var(--j-place-ink); }

/* The cinema ticket stub: tinted card, a perforation with two punched notches, every value set in type.
   The fields run on dotted leaders and the number sits in the tear-off at the right. */
.j-ticket-wrap { position: relative; width: 100%; max-width: 520px; filter: drop-shadow(0 1px 1px #4a2f1a33) drop-shadow(0 8px 11px #4a2f1a21); }
.j-ticket {
  --stub: 102px; --notch: 9px; --j-ticket-bg: #ece3f1; --j-ticket-veil: #ece3f1dc; --j-ticket-line: #5f438850;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); border-radius: 4px;
  background: linear-gradient(var(--j-ticket-veil), var(--j-ticket-veil)), var(--j-paper-tile) 0 0 / 420px auto, var(--j-ticket-bg);
  -webkit-mask:
    radial-gradient(circle at calc(100% - var(--stub)) 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--stub)) 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle at calc(100% - var(--stub)) 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,
    radial-gradient(circle at calc(100% - var(--stub)) 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
}
.j-ticket::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--j-ticket-line); border-radius: 2px; pointer-events: none; }
.j-ticket--rose { --j-ticket-bg: #f3e2df; --j-ticket-veil: #f3e2dfdc; --j-ticket-line: #98345748; }
.j-ticket--sage { --j-ticket-bg: #e4e8d6; --j-ticket-veil: #e4e8d6dc; --j-ticket-line: #435d2f4d; }
.j-ticket-main { position: relative; padding: 18px 20px 14px 24px; }
/* A Japanese title breaks only at its own spaces (and after VS), never inside a word. */
.j-ticket .j-ticket-ja { font: 500 23px/1.35 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif; letter-spacing: .03em; color: var(--j-ink); padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--j-ticket-line); word-break: keep-all; overflow-wrap: normal; line-break: strict; }
.j-ticket-rows { margin: 0; }
.j-ticket-rows > div { display: grid; grid-template-columns: auto minmax(12px, 1fr) auto; align-items: baseline; column-gap: 8px; padding: 6px 0 1px; }
.j-ticket-rows > div::before { content: ''; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .4em; border-bottom: 1.5px dotted #6b4e3a80; }
.j-ticket-rows dt { grid-column: 1; grid-row: 1; font: 500 16px/1.3 var(--j-sc); letter-spacing: .05em; color: var(--j-ink-soft); }
.j-ticket-rows dd { grid-column: 3; grid-row: 1; margin: 0; font: 500 18px/1.3 var(--j-text); color: var(--j-ink); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums; }
.j-ticket .j-ticket-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 14px 8px; border-left: 2px dashed #6b4e3a70; text-align: center; }
.j-ticket-kind { font: 500 16px/1.15 var(--j-sc); letter-spacing: .06em; color: var(--j-ink-soft); max-width: 5.6em; }
.j-ticket-no { font: 400 46px/1 var(--j-display); color: var(--j-place-ink); font-variant-numeric: lining-nums; }

/* The tall stub: the tear runs across the foot, the fields stacked name over value. The glimpses use it in
   their narrow columns; phones use the same tear with the fields back on their leaders (below). */
[data-j-layout="also"] .j-ticket {
  --stub-h: 60px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--stub-h);
  -webkit-mask:
    radial-gradient(circle at 0 calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
}
[data-j-layout="also"] .j-ticket-main { padding: 18px 18px 12px; }
[data-j-layout="also"] .j-ticket .j-ticket-ja { font-size: 20px; }
[data-j-layout="also"] .j-ticket-rows > div { display: block; padding: 7px 0 1px; }
[data-j-layout="also"] .j-ticket-rows > div::before { display: none; }
[data-j-layout="also"] .j-ticket-rows dd { text-align: left; margin-top: 1px; }
[data-j-layout="also"] .j-ticket .j-ticket-stub { grid-auto-flow: column; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 18px; border-left: 0; border-top: 2px dashed #6b4e3a70; }
[data-j-layout="also"] .j-ticket-kind { max-width: none; }
[data-j-layout="also"] .j-ticket-no { font-size: 36px; }

/* Release notes and sources: a footnote that unfolds into a torn scrap. */
.j-film-notes { margin-top: 12px; }
.j-film-notes summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: italic 400 17.5px/1.3 var(--j-text); color: var(--j-ink); }
.j-film-notes summary::-webkit-details-marker { display: none; }
.j-film-notes summary::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border: solid var(--j-ink-soft); border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .2s ease; }
.j-film-notes[open] summary::after { rotate: 225deg; translate: 0 2px; }
.j-film-notes summary:hover { text-decoration: underline; text-decoration-color: var(--j-link-line); text-underline-offset: 3px; }
.j-film-notes-mark::before { content: '\2020'; font: 400 21px/1 var(--j-text); color: var(--j-place-ink); }
.j-film-scrap { position: relative; max-width: 30em; margin: 6px 0 0 14px; padding: 18px 24px 12px; }
.j-film-scrap > :not(.j-paper) { position: relative; z-index: 1; }
.j-page .j-film-scrap p { font: italic 400 17px/1.55 var(--j-text); color: var(--j-ink-soft); }
.j-page .j-film-scrap .j-film-scrap-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 4px; font-style: normal; }
.j-film-notes[open] .j-film-scrap { animation: films-unfold .28s ease-out both; }
@keyframes films-unfold { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* ---------- compositions on a wide page (iPad landscape and desktop) ---------- */
/* 1998, the hero: the title runs across the page, a large poster, the story and its stub beside it. */
.film-memory[data-j-layout="hero"] {
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "head head" "plate desc" "plate part" "plate ticket" "plate notes";
}
[data-j-layout="hero"] .j-film-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-bottom: 30px; }
[data-j-layout="hero"] .j-film-title { flex: 1 1 100%; font-size: 60px; line-height: 1; }
[data-j-layout="hero"] .j-film-sub, [data-j-layout="hero"] .j-film-role { margin: 0; }
[data-j-layout="hero"] .j-film-plate { margin: 4px 2% 0 0; }
.j-page [data-j-layout="hero"] .j-film-desc { margin-top: 2px; }
[data-j-layout="hero"] .j-film-part { margin-top: 26px; }
[data-j-layout="hero"] > .j-ticket-wrap { max-width: 540px; margin-top: 34px; }
[data-j-layout="hero"] .j-ticket { --stub: 112px; }
[data-j-layout="hero"] .j-ticket .j-ticket-ja { font-size: 25px; }
[data-j-layout="hero"] .j-ticket-no { font-size: 52px; }

/* 2005: the title runs across, the poster sits right, the stub waits under the story. */
.film-memory[data-j-layout="b"] {
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "head head" "desc plate" "part plate" "ticket plate" "notes plate";
}
[data-j-layout="b"] .j-film-head { margin-bottom: 4px; }
[data-j-layout="b"] .j-film-title { max-width: 16em; }
[data-j-layout="b"] .j-film-plate { margin: 26px 6% 0 8%; }
[data-j-layout="b"] .j-film-part { margin-top: 24px; }
[data-j-layout="b"] > .j-ticket-wrap { margin-top: 32px; }

/* 2019: a smaller poster with a note, the story and gloss beside it, the stub across the foot. */
.film-memory[data-j-layout="c"] {
  grid-template-columns: minmax(0, 31fr) minmax(0, 69fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "plate head" "plate desc" "plate part" "ticket notes";
}
[data-j-layout="c"] .j-film-plate { margin: 12px 0 0 4%; }
[data-j-layout="c"] .j-film-part { margin-top: 24px; }
[data-j-layout="c"] > .j-ticket-wrap { grid-column: 1 / -1; justify-self: center; margin: 44px 0 0 10%; }
[data-j-layout="c"] .j-film-notes { grid-column: 2; grid-row: 5; margin-left: 10%; }
.j-note--summers { left: 34%; top: -78px; --j-note-r: -3deg; }
.j-note--summers .j-arrow { left: -46px; top: 22px; width: 50px; height: 46px; transform: scaleX(-1) rotate(12deg); }

/* The glimpses share one sheet: three small posters side by side, each with its stamp, its story, Mew's
   part and a tall stub, set a little off line with each other as if pasted in by hand. */
.j-films-list--glimpses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 38px; align-items: start; }
.film-memory[data-j-layout="also"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plate" "head" "desc" "part" "ticket" "notes"; }
.film-memory[data-j-layout="also"]:nth-child(2) { margin-top: 46px; }
.film-memory[data-j-layout="also"]:nth-child(3) { margin-top: 14px; }
[data-j-layout="also"] .j-film-plate { width: 72%; margin: 0 0 24px 6%; }
.film-memory[data-j-layout="also"]:nth-child(2) .j-film-plate { margin-left: 18%; }
[data-j-layout="also"] .j-film-title { font-size: 28px; line-height: 1.08; }
.j-page [data-j-layout="also"] .j-film-desc { margin-top: 16px; font-size: 17.5px; line-height: 1.58; }
[data-j-layout="also"] .j-film-part { margin-top: 16px; font-size: 17px; padding-left: 22px; }
[data-j-layout="also"] > .j-ticket-wrap { margin-top: 24px; }

/* ---------- the film strip of specials and shorts ---------- */
.j-films-part--reel .j-films-part-head { margin-bottom: 30px; }
.j-note--reel { left: calc(100% + 24px); bottom: 22px; --j-note-r: -4deg; font-size: 21px; }
.j-note--reel .j-arrow { left: 22%; top: 110%; width: 60px; height: 40px; }
.j-reel { position: relative; }
/* The celluloid runs off the page, but the words of the next frame fade into the paper instead of being
   cut mid-word: the mask keeps the band (the top --band of the strip) whole and fades only the text
   below it at the fore-edge, and at the spine too once the reel has been wound on (js/journal-films.js). */
.j-reel-track {
  --band: 242px; --fade-in: 0px; --fade-out: 72px;
  position: relative; display: flex; list-style: none; margin: 0 calc(var(--j-pad) * -1); padding: 6px var(--j-pad) 10px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--j-pad);
  scrollbar-width: none; cursor: grab; outline: none;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% var(--band) no-repeat, linear-gradient(90deg, transparent, #000 var(--fade-in), #000 calc(100% - var(--fade-out)), transparent);
  mask: linear-gradient(#000 0 0) 0 0 / 100% var(--band) no-repeat, linear-gradient(90deg, transparent, #000 var(--fade-in), #000 calc(100% - var(--fade-out)), transparent);
}
.j-reel-track.is-wound { --fade-in: max(28px, var(--j-pad)); }
.j-reel-track.is-at-end { --fade-out: 0px; }
.j-reel-track::-webkit-scrollbar { display: none; }
/* The mask would fade a ring drawn on the strip itself, so the focus ring goes round the whole reel. */
.j-reel:has(.j-reel-track:focus-visible) { outline: 2px solid var(--j-hand); outline-offset: 6px; border-radius: 3px; }
.j-reel-track.is-scrubbing { scroll-snap-type: none; }
.j-reel-track.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.j-reel-item { flex: none; width: min(360px, 78cqi); scroll-snap-align: start; }
/* The last frame snaps to the end of the strip, so the reel can always be wound right to its tail. */
.j-reel-item:last-child { scroll-snap-align: end; }
.j-reel-entry { height: 100%; }
.j-reel-still { margin: 0; }
/* The celluloid: sprocket holes along both edges, one frame per entry, spliced end to end. */
.j-reel-band {
  --film: #2b221d;
  position: relative; height: 236px; padding: 32px 7px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, #eadcc1 9px 20px, transparent 20px 30px) 0 10px / 100% 13px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 9px, #eadcc1 9px 20px, transparent 20px 30px) 0 calc(100% - 10px) / 100% 13px no-repeat,
    linear-gradient(180deg, #ffffff0d, #ffffff00 30%, #0000 70%, #ffffff0a),
    var(--film);
}
.j-reel-item:first-child .j-reel-band { border-radius: 3px 0 0 3px; }
.j-reel-item:last-child .j-reel-band { border-radius: 0 3px 3px 0; }
.j-reel-cell { position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; border-radius: 3px; background: #1a1411; box-shadow: 0 0 0 1px #00000070 inset; }
.j-reel-cell img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.j-reel-still figcaption { padding: 12px 24px 0 4px; font: italic 400 16px/1.5 var(--j-text); color: var(--j-ink-soft); text-wrap: pretty; }
.j-reel-text { padding: 12px 24px 4px 4px; }
.j-reel-title { font: 400 27px/1.1 var(--j-display); color: var(--j-ink); margin: 6px 0 6px; text-wrap: balance; }
.j-page .j-reel-kind { font: 500 16px/1.35 var(--j-sc); letter-spacing: .03em; color: var(--j-place-ink); }
.j-page .j-reel-desc { font-size: 18px; line-height: 1.55; margin-top: 10px; }
.j-page .j-reel-release { font: italic 400 16.5px/1.45 var(--j-text); color: var(--j-ink-soft); margin-top: 10px; }
.j-page .j-reel-source { margin-top: 2px; }
.j-reel-item + .j-reel-item .j-reel-still figcaption, .j-reel-item + .j-reel-item .j-reel-text { border-left: 1px solid var(--j-rule); padding-left: 18px; }

.j-reel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 600px; margin-top: 22px; }
.j-reel-step { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--j-card); border: 1px solid #9c826c66; box-shadow: 0 1px 0 #fff8 inset, 0 3px 8px #2b18102e; color: var(--j-ink); }
.j-reel-step svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.j-reel-step:hover { background: #fffaf0; border-color: #9c826caa; }
.j-reel-step[aria-disabled="true"] { opacity: .42; cursor: default; box-shadow: none; }
.j-reel-scrub { position: relative; flex: 1 1 160px; min-width: 120px; height: 44px; cursor: pointer; touch-action: pan-y; }
.j-reel-rail {
  position: absolute; left: 0; right: 0; top: calc(50% - 7px); height: 14px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, #eadcc1 4px 8px, transparent 8px 12px) 0 3px / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 4px, #eadcc1 4px 8px, transparent 8px 12px) 0 calc(100% - 3px) / 100% 3px no-repeat, #2b221d;
  opacity: .85;
}
.j-reel-thumb { position: absolute; left: 0; top: calc(50% - 13px); width: 40px; height: 26px; border-radius: 3px; background: #f8f1e2e6; border: 1.5px solid var(--j-ink-soft); box-shadow: 0 2px 5px #2b18103d; }
.j-reel-scrub:hover .j-reel-thumb, .j-reel-scrub.is-held .j-reel-thumb { background: #fffaf0; border-color: var(--j-ink); }
.j-page .j-reel-count { flex: none; min-width: 9.5em; font: italic 400 16px/1.3 var(--j-text); color: var(--j-ink-soft); }

/* ---------- the colophon and the lily pad ---------- */
.j-films-colophon { position: relative; max-width: min(40em, calc(100% - 200px)); margin-top: 104px; padding-top: 22px; border-top: 1px solid var(--j-rule); }
#archive-dialog .j-films-colophon .archive-note { margin: 0 0 12px; font-size: 17px; }
.j-films-colophon .j-leadin { font-style: normal; }
.j-films-pond { position: relative; height: 0; }
.j-films-lily { right: 3%; top: -210px; width: 150px; transform: rotate(-10deg); }


/* ---------- tablet portrait: one column, each title level with the top of its poster ---------- */
@container journal (max-width: 879px) {
  .j-head--films .j-head-text { display: block; padding-top: 100px; margin-top: 0; }
  .j-head--films .j-head-text > .j-deck { margin: 16px 0 0 !important; max-width: 26em; }
  .j-head--films .j-vignette { height: 250px; margin: 26px calc(var(--j-pad) * -1) 0; clip-path: none; background: none; }
  .j-vignette--films img {
    object-position: 50% 66%; transform: scale(1.5); transform-origin: 57% 64%;
    -webkit-mask-image: linear-gradient(180deg, transparent 14%, #000 34%, #000 70%, transparent 88%);
    mask-image: linear-gradient(180deg, transparent 14%, #000 34%, #000 70%, transparent 88%);
  }
  .j-head--films .j-stamp { left: auto; right: 9%; top: 50%; width: 140px; height: 140px; }
  .j-programme { max-width: none; margin-top: 40px; }
  .j-films-part { margin-top: 96px; }
  .j-films-part-head { margin-bottom: 48px; }
  .j-films-part-head h3 { font-size: 40px; }
  .j-films-list { gap: 96px; }
  .j-film-title { font-size: 36px; }

  /* The poster beside the title and Mew's part, then the story, the stub and the sources across the page. */
  #archive-dialog .film-memory { column-gap: 30px; }
  /* The second row takes up any height the poster has to spare, so Mew's part sits right under the title. */
  .film-memory[data-j-layout="hero"], .film-memory[data-j-layout="c"] {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: auto 1fr;
    grid-template-areas: "plate head" "plate part" "desc desc" "ticket ticket" "notes notes";
  }
  .film-memory[data-j-layout="hero"] { grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); }
  .film-memory[data-j-layout="b"] {
    grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); grid-template-rows: auto 1fr;
    grid-template-areas: "head plate" "part plate" "desc desc" "ticket ticket" "notes notes";
  }
  [data-j-layout="hero"] .j-film-head { display: block; margin: 0; }
  [data-j-layout="hero"] .j-film-title { font-size: 46px; }
  [data-j-layout="hero"] .j-film-sub, [data-j-layout="hero"] .j-film-role { margin-top: 10px; }
  [data-j-layout="hero"] .j-film-sub { margin-top: 12px; }
  .film-memory .j-film-head { align-self: start; margin: 0; }
  [data-j-layout="hero"] .j-film-plate, [data-j-layout="b"] .j-film-plate, [data-j-layout="c"] .j-film-plate { margin: 4px 0 0; }
  .j-page .j-film-desc, .j-page [data-j-layout="hero"] .j-film-desc { margin-top: 30px; }
  [data-j-layout] .j-film-part, [data-j-layout="hero"] .j-film-part { align-self: start; margin: 22px 0 0; }
  [data-j-layout] > .j-ticket-wrap, [data-j-layout="c"] > .j-ticket-wrap, [data-j-layout="hero"] > .j-ticket-wrap { grid-area: ticket; justify-self: start; margin: 30px 0 0 4%; }
  [data-j-layout="c"] .j-film-notes { grid-area: notes; margin-left: 0; }
  .j-note--summers { left: 44%; top: -62px; }
  .j-note--summers .j-arrow { left: -30px; top: 30px; }

  /* The glimpses stack, each a smaller version of the same pairing. */
  .j-films-list--glimpses { grid-template-columns: minmax(0, 1fr); gap: 84px; }
  .film-memory[data-j-layout="also"], .film-memory[data-j-layout="also"]:nth-child(n) {
    grid-template-columns: minmax(0, 32fr) minmax(0, 68fr); grid-template-rows: auto 1fr; margin-top: 0;
    grid-template-areas: "plate head" "plate part" "desc desc" "ticket ticket" "notes notes";
  }
  [data-j-layout="also"] .j-film-plate, .film-memory[data-j-layout="also"]:nth-child(n) .j-film-plate { width: auto; margin: 4px 0 0; }
  [data-j-layout="also"] .j-film-title { font-size: 30px; }
  /* Wide enough again for the fields on their leaders and the number in the tear-off. */
  [data-j-layout="also"] .j-ticket {
    grid-template-columns: minmax(0, 1fr) var(--stub); grid-template-rows: none;
    -webkit-mask:
      radial-gradient(circle at calc(100% - var(--stub)) 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,
      radial-gradient(circle at calc(100% - var(--stub)) 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
    mask:
      radial-gradient(circle at calc(100% - var(--stub)) 0, #0000 var(--notch), #000 calc(var(--notch) + .5px)) top / 100% 51% no-repeat,
      radial-gradient(circle at calc(100% - var(--stub)) 100%, #0000 var(--notch), #000 calc(var(--notch) + .5px)) bottom / 100% 51% no-repeat;
  }
  [data-j-layout="also"] .j-ticket-main { padding: 18px 20px 14px 24px; }
  [data-j-layout="also"] .j-ticket-rows > div { display: grid; padding: 6px 0 1px; }
  [data-j-layout="also"] .j-ticket-rows > div::before { display: block; }
  [data-j-layout="also"] .j-ticket-rows dd { text-align: right; margin-top: 0; }
  [data-j-layout="also"] .j-ticket .j-ticket-stub { grid-auto-flow: row; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; border-top: 0; border-left: 2px dashed #6b4e3a70; }
  [data-j-layout="also"] .j-ticket-kind { max-width: 5.6em; }
  [data-j-layout="also"] .j-ticket-no { font-size: 40px; }

  .j-note--reel { display: none; }
  .j-films-colophon { max-width: 40em; }
  .j-films-lily { top: 18px; right: 6%; width: 120px; }
}

/* ---------- phones: the reading column ---------- */
@container journal (max-width: 599px) {
  .j-head--films .j-head-text { padding-top: 86px; }
  .j-head--films .j-vignette { height: 190px; margin-top: 18px; }
  .j-vignette--films img { transform: scale(1.8); transform-origin: 56% 64%; }
  .j-head--films .j-stamp { right: 5%; width: 108px; height: 108px; }
  .j-programme { margin-top: 34px; }
  .j-programme button { gap: 8px; font-size: 17.5px; }
  .j-programme-year { width: 2.5em; }
  .j-programme-time { font-size: 16px; }
  .j-programme-leader { min-width: 10px; flex-basis: 10px; }
  .j-films-part { margin-top: 80px; }
  .j-films-part-head { margin-bottom: 40px; }
  .j-films-part-head h3 { font-size: 36px; }
  .j-page .j-films-part-head > p:not(.j-note) { font-size: 18.5px; }
  .j-films-list, .j-films-list--glimpses { gap: 80px; }
  .j-film-title, [data-j-layout="hero"] .j-film-title { font-size: 34px; }
  [data-j-layout="hero"] .j-film-title { font-size: 38px; }
  .j-page .j-film-sub { font-size: 19px; }

  /* A central film: its title, then the poster with its caption beside it and the stub pasted over the
     poster's lower edge, so the two read as one object; the story and Mew's part follow. */
  .film-memory[data-j-layout="hero"], .film-memory[data-j-layout="b"], .film-memory[data-j-layout="c"] {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "head" "plate" "ticket" "desc" "part" "notes";
  }
  .film-memory .j-film-plate { display: flex; align-items: flex-start; gap: 14px; margin: 26px 0 0; }
  [data-j-layout="b"] .j-film-plate { flex-direction: row-reverse; }
  .film-memory .j-film-plate > .j-plate-mount { flex: none; width: 60%; }
  [data-j-layout="hero"] .j-film-plate > .j-plate-mount { width: 66%; }
  .film-memory .j-film-plate > figcaption { flex: 1 1 0; min-width: 0; margin: 2px 0 0; }
  [data-j-layout="c"] .j-film-plate { margin-top: 74px; }
  #archive-dialog .film-memory > .j-ticket-wrap { position: relative; z-index: 2; justify-self: stretch; width: auto; max-width: none; margin: -16px 0 0; rotate: -1.2deg; }
  #archive-dialog .film-memory[data-j-layout="b"] > .j-ticket-wrap { rotate: 1deg; }
  .j-page .j-film-desc, .j-page [data-j-layout="hero"] .j-film-desc { margin-top: 26px; }
  [data-j-layout] .j-film-part, [data-j-layout="hero"] .j-film-part { margin: 20px 0 0 2px; font-size: 17.5px; padding-left: 22px; }
  .j-note--summers { left: 34%; top: -68px; }
  .film-memory .j-note { font-size: 20px; }

  /* A glimpse: the small poster and its title side by side, Mew's part under the title, then the rest. */
  .film-memory[data-j-layout="also"], .film-memory[data-j-layout="also"]:nth-child(n) {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); grid-template-rows: auto 1fr; column-gap: 18px;
    grid-template-areas: "plate head" "plate part" "desc desc" "ticket ticket" "notes notes";
  }
  [data-j-layout="also"] .j-film-plate, .film-memory[data-j-layout="also"]:nth-child(n) .j-film-plate { display: block; margin: 4px 0 0; }
  [data-j-layout="also"] .j-film-plate > .j-plate-mount { width: auto; }
  [data-j-layout="also"] .j-film-plate > figcaption { margin: 14px 0 0; }
  [data-j-layout="also"] .j-film-title { font-size: 26px; }
  .j-page [data-j-layout="also"] .j-role { padding: 8px 16px 9px; }
  [data-j-layout="also"] .j-role-text { white-space: normal; text-align: center; }
  [data-j-layout="also"] .j-film-part { margin: 16px 0 0; font-size: 17px; padding-left: 18px; }
  #archive-dialog .film-memory[data-j-layout="also"] > .j-ticket-wrap { margin-top: 24px; rotate: .8deg; }

  /* Every stub on a phone spans the column: the fields on their leaders, the tear across the foot. */
  .j-ticket, [data-j-layout] .j-ticket, [data-j-layout="also"] .j-ticket {
    --stub-h: 56px;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--stub-h);
    -webkit-mask:
      radial-gradient(circle at 0 calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle at 0 calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% calc(100% - var(--stub-h)), #0000 var(--notch), #000 calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
  }
  .j-ticket-main, [data-j-layout="also"] .j-ticket-main { padding: 16px 16px 10px 18px; }
  .j-ticket .j-ticket-ja, [data-j-layout] .j-ticket .j-ticket-ja { font-size: 20px; }
  .j-ticket-rows > div, [data-j-layout="also"] .j-ticket-rows > div { display: grid; column-gap: 6px; padding: 6px 0 1px; }
  .j-ticket-rows > div::before, [data-j-layout="also"] .j-ticket-rows > div::before { display: block; }
  .j-ticket-rows dt { letter-spacing: .02em; }
  .j-ticket-rows dd, [data-j-layout="also"] .j-ticket-rows dd { text-align: right; margin-top: 0; font-size: 17px; }
  .j-ticket .j-ticket-stub, [data-j-layout] .j-ticket .j-ticket-stub { grid-auto-flow: column; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 18px; border-left: 0; border-top: 2px dashed #6b4e3a70; }
  .j-ticket-kind, [data-j-layout] .j-ticket-kind { max-width: none; }
  .j-ticket-no, [data-j-layout] .j-ticket-no { font-size: 34px; }
  .j-film-notes summary { font-size: 17.5px; }
  .j-film-scrap { margin-left: 4px; padding: 16px 18px 10px; }
  .j-page .j-film-scrap p { font-size: 17px; }

  .j-note--reel { display: none; }
  .j-reel-track { --band: 202px; }
  .j-reel-item { width: 80cqi; }
  .j-reel-band { height: 196px; padding: 28px 6px; }
  .j-reel-still figcaption { font-size: 16px; padding-right: 18px; }
  .j-reel-text { padding-right: 18px; }
  .j-reel-item + .j-reel-item .j-reel-still figcaption, .j-reel-item + .j-reel-item .j-reel-text { padding-left: 14px; }
  .j-reel-title { font-size: 26px; }
  .j-page .j-reel-desc { font-size: 17.5px; }
  .j-reel-controls { gap: 6px 10px; }
  .j-page .j-reel-count { flex-basis: 100%; min-width: 0; text-align: center; }
  #archive-dialog .j-films-colophon .archive-note { font-size: 16.5px; }
  .j-films-colophon { margin-top: 80px; }
  .j-films-lily { top: -2px; right: 0; width: 88px; }
}

/* Reduced motion: stamps are already inked, the footnote opens in place and the strip jumps. */
@media (prefers-reduced-motion: reduce) {
  .j-films-armed .j-role, .j-film-notes summary::after { transition: none !important; }
  .j-films-armed .j-role:not(.is-inked) { opacity: 1; scale: none; }
  .j-film-notes[open] .j-film-scrap { animation: none; }
  .j-reel-track { scroll-behavior: auto; }
}