/* danfallshaw.com
   White ground, black line. Colour belongs to what is alive: the characters, the pictures, the films,
   and whatever you point at, which lights up in the cyan of the old site.
   The page moves the way a film made of instant photographs moves: a pile of pictures where each new picture lands
   on the one before, a little crooked. A line of small instant pictures runs down the right edge: in each one,
   the character of the next part is a step further on its way there (flip.py makes the pictures, site.js plays them).
   The type is the one United Notions Film uses (TeX Gyre Heros, a Helvetica). */

@font-face { font-family: "Dan Text"; src: url("../fonts/unf-heros-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Dan Text"; src: url("../fonts/unf-heros-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --light: #5bfbfe;
  --gap: clamp(16px, 4vw, 64px);
  --line: 2px;                                /* the line around a picture, a button, a table row */
  --big: clamp(176px, 25vw, 372px);           /* the width of the large pile at the head of a part */
  --snap: clamp(36px, 4.3vw, 68px);           /* the width of one small picture of the trail */
  --text: "Dan Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --head: "Dan Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --head-track: -.045em;
  --head-lead: .88;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .16em; }
a:hover { background: var(--light); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--light); }
h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; }
b, strong { font-weight: 700; }

.skip { position: absolute; left: 12px; top: -80px; z-index: 20; background: var(--paper); border: var(--line) solid var(--ink); padding: .5em 1em; font-weight: 700; }
.skip:focus { top: 12px; }

/* --lane-card, --lane-pitch: the width of a card in the strip of the trail, and the step from one card to the next, as shares of the strip (from flip.py) */
.wrap { position: relative; max-width: 1680px; margin: 0 auto; overflow-x: clip;
  --lane-w: calc(var(--snap) / var(--lane-card)); --lane-x: calc(var(--gap) * .4); --room: calc(var(--lane-x) + var(--lane-w) + var(--gap) * .45); }

/* ---------------------------------------------------------------- the top */
.top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: var(--gap); padding: clamp(16px, 2vw, 30px) var(--gap) clamp(10px, 1.2vw, 18px); }
h1 { font-family: var(--head); font-size: clamp(46px, 7vw, 112px); font-weight: 700; line-height: var(--head-lead); letter-spacing: var(--head-track); margin-left: -.04em; }
.about-him { max-width: 40em; padding-bottom: .2em; }
.what { font-size: clamp(16px, 1.4vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.now { margin-top: .3em; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.25; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- a pile of instant pictures
   The card is 88 wide and 107 high. The square picture sits 4.5 from its top and sides; the wide white edge is below.
   Two more cards lie under it. site.js lays each new picture on the pile: it changes the picture and moves the card a little. */
.pile { position: relative; display: block; aspect-ratio: 88 / 107; isolation: isolate; }
.pile::before, .pile::after, .card { position: absolute; inset: 0; background: var(--paper); border: var(--line) solid var(--ink); }
.pile::before { content: ""; z-index: -1; transform: rotate(calc(var(--lean) - 5deg)) translate(-3%, 2%); }
.pile::after { content: ""; z-index: -1; transform: rotate(calc(var(--lean) + 4deg)) translate(3%, -1%); }
.card { display: block; padding: 5.1% 5.1% 0; transform: translate(var(--jx, 0px), var(--jy, 0px)) rotate(calc(var(--lean) + var(--jr, 0deg))); }
.pic { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.reel { display: block; height: 100%; width: auto; max-width: none; }
.note { position: absolute; left: 6%; right: 6%; bottom: 0; height: 22%; display: flex; align-items: center; overflow: hidden;
  font-weight: 700; font-size: calc(var(--big) * .075); letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }

/* ---------------------------------------------------------------- the city */
.city { position: relative; }
.city picture, .town { display: block; width: 100%; height: auto; }
.glows { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
.glow { position: absolute; left: calc(var(--gx) * 1%); top: calc(var(--gy) * 1%); width: calc(var(--gw) * 1%); height: calc(var(--gh) * 1%);
  background: var(--light); opacity: 0; transition: opacity .12s; border-radius: 44% 56% 6% 5% / 26% 22% 3% 4%; }
.city:has(#go-films:is(:hover, :focus-visible)) .glow-films,
.city:has(#go-xr:is(:hover, :focus-visible)) .glow-xr,
.city:has(#go-camera:is(:hover, :focus-visible)) .glow-camera,
.city:has(#go-editing:is(:hover, :focus-visible)) .glow-editing,
.city:has(#go-sound:is(:hover, :focus-visible)) .glow-sound,
.city:has(#go-play:is(:hover, :focus-visible)) .glow-play,
.city:has(#go-bio:is(:hover, :focus-visible)) .glow-bio,
.city:has(#go-unf:is(:hover, :focus-visible)) .glow-unf { opacity: 1; }

/* the cable car that carries his other name */
.car { position: absolute; left: calc(var(--bx) * 1%); top: calc(var(--by) * 1%); width: calc(var(--bw) * 1%); pointer-events: none; }
.car img { display: block; width: 100%; height: auto; }
.car span { position: absolute; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: clamp(9px, 1.55vw, 27px); letter-spacing: -.03em;
  color: var(--light); -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .car { animation: sway 7s ease-in-out infinite; }
  @keyframes sway { 0%, 100% { rotate: -1.7deg; } 50% { rotate: 1.7deg; } }
}

.stops { list-style: none; }
.stop { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--box) * 1%); aspect-ratio: 1;
  transform: translate(calc(var(--cx) * -100%), calc(var(--feet) * -100%)); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.stop:hover { background: none; }
/* the characters arrive one after the other */
@media (prefers-reduced-motion: no-preference) {
  .stop > img { animation: arrive .46s cubic-bezier(.2, 1.5, .4, 1) both; animation-delay: calc(var(--i) * 80ms + 250ms); transform-origin: 50% 100%; }
  @keyframes arrive { from { opacity: 0; scale: .55; } }
}
.stop:focus-visible { outline-offset: -2px; }
.stop > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.stop .over { opacity: 0; }
.stop:hover .me, .stop:focus-visible .me { opacity: 0; }
.stop:hover .over, .stop:focus-visible .over { opacity: 1; }
/* under the feet: the name of the place, then its pile. --sx, --sy: the feet, as shares of the box. --u: one unit of the drawing */
.sign { position: absolute; left: calc(var(--sx) * 100%); top: calc((var(--sy) + 8 * var(--u)) * 100%); transform: translateX(-50%); padding: .02em .32em .08em;
  font-weight: 700; font-size: clamp(12px, 1.3vw, 21.8px); letter-spacing: -.02em; line-height: 1.12; white-space: nowrap; }
.stop:hover .sign, .stop:focus-visible .sign { background: var(--light); }
.stop .pile { position: absolute; left: calc(var(--sx) * 100%); top: calc((var(--sy) + 44 * var(--u)) * 100%); width: calc(132 * var(--u) * 100%); translate: -50% 0; }
.stop:hover .card, .stop:focus-visible .card { box-shadow: 0 0 0 5px var(--light); }
/* the picture in the frame on the post */
.stop-frame { left: calc(var(--fx) * 1%); top: calc(var(--fy) * 1%); width: calc(var(--fw) * 1%); transform: none; }
.stop-frame .me { object-fit: cover; opacity: 1 !important; }

/* ---------------------------------------------------------------- the trail of small pictures down the right edge
   Two pieces of it in each part: above the large pile it brings this part's character;
   under the pile it brings the character of the next part. Each piece repeats its strip as far as it runs.
   The pieces join where one part ends and the next begins; their other ends are hidden behind the large pile. */
main { position: relative; z-index: 0; }
.entry, .place, .headzone, .inside { position: relative; }
.entry::after, .headzone::after, .inside::after { content: ""; position: absolute; z-index: -1; right: var(--lane-x); width: var(--lane-w); top: 0; bottom: 0;
  background: none center top / 100% auto repeat-y; pointer-events: none; }
.entry::after { background-position: center bottom; -webkit-mask-image: linear-gradient(transparent, #000 calc(var(--snap) * 1.5)); mask-image: linear-gradient(transparent, #000 calc(var(--snap) * 1.5)); }
.headzone::after { bottom: calc(var(--big) * .5); }
.inside::after { background-position: center bottom; top: calc(var(--big) * -.55); right: calc(var(--lane-x) - var(--room)); }     /* the part itself keeps clear of the trail */
.entry::after, .place-films .headzone::after { background-image: url("../img/flip/trail-films.webp"); }
.place-films .inside::after, .place-xr .headzone::after { background-image: url("../img/flip/trail-xr.webp"); }
.place-xr .inside::after, .place-camera .headzone::after { background-image: url("../img/flip/trail-camera.webp"); }
.place-camera .inside::after, .place-editing .headzone::after { background-image: url("../img/flip/trail-editing.webp"); }
.place-editing .inside::after, .place-sound .headzone::after { background-image: url("../img/flip/trail-sound.webp"); }
.place-sound .inside::after, .place-play .headzone::after { background-image: url("../img/flip/trail-play.webp"); }
.place-play .inside::after, .place-bio .headzone::after { background-image: url("../img/flip/trail-bio.webp"); }
.place-bio .inside::after, .place-unf .headzone::after { background-image: url("../img/flip/trail-unf.webp"); }
.place-unf .inside::after { content: none; }                  /* the last part: the trail ends at its pile */

.entry { padding: clamp(14px, 1.6vw, 26px) var(--room) 0 var(--gap); }
.how { font-weight: 700; font-size: clamp(16px, 1.45vw, 21px); letter-spacing: -.01em; }
.freeze { margin-left: .5em; font: inherit; font-size: .78em; font-weight: 700; color: var(--ink); background: var(--paper); border: var(--line) solid var(--ink); border-radius: 99px; padding: .16em .9em .22em; cursor: pointer; vertical-align: .08em; }
.freeze:hover { background: var(--light); }

/* ---------------------------------------------------------------- a part of the page */
.headzone { padding-top: clamp(64px, 9vw, 150px); }
.place:first-of-type .headzone { padding-top: clamp(30px, 4.5vw, 76px); }
.scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--gap); margin: 0 var(--lane-x) 0 var(--gap); }
.inside { margin: 0 var(--room) 0 var(--gap); padding-top: clamp(28px, 4vw, 64px); }
.words { padding-bottom: clamp(4px, .8vw, 14px); min-width: 0; }
h2 { font-family: var(--head); font-size: clamp(60px, 11vw, 180px); font-weight: 700; line-height: var(--head-lead); letter-spacing: var(--head-track); margin-left: -.045em; text-wrap: balance; }
.place-unf h2 { font-size: clamp(44px, 7vw, 116px); }
.words h2 { padding-bottom: .12em; }                       /* room for the tails of g and y */
.lead { margin-top: .3em; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.01em; max-width: 30em; }
/* the character and its large pile. --right: where the drawing of the character ends, as a share of its picture */
.stand { display: flex; align-items: flex-end; }
.stand .host { filter: drop-shadow(1.2px 0 0 var(--ink)) drop-shadow(-1.2px 0 0 var(--ink)) drop-shadow(0 1.2px 0 var(--ink)) drop-shadow(0 -1.2px 0 var(--ink));     /* an edge around the cut-out, so a white coat shows on white */
  width: calc(var(--big) * .62); height: auto; margin-right: calc((var(--right) - 1) * var(--big) * .62 + var(--big) * .02); margin-bottom: calc((var(--feet) - 1) * var(--big) * .62); position: relative; z-index: 2; }
.stand .pile { width: var(--big); flex: none; }

h3 { font-family: var(--head); font-size: clamp(27px, 2.9vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.btn { display: inline-block; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--paper); padding: .46em 1.1em .5em; font-weight: 700; text-decoration: none; line-height: 1.2; letter-spacing: -.01em; }
.btn:hover { background: var(--light); }
.btn:active { transform: translate(1px, 2px); }
.go { display: flex; flex-wrap: wrap; gap: .6em; }

/* ---------------------------------------------------------------- films and XR */
.works { display: grid; row-gap: clamp(44px, 6.5vw, 100px); }
.work { display: grid; grid-template-columns: minmax(110px, 15%) minmax(0, 1fr) minmax(0, 42%); grid-template-areas: "poster head trailer" "poster about trailer"; grid-template-rows: auto 1fr;
  column-gap: clamp(16px, 3vw, 46px); align-items: start; scroll-margin-top: 24px; }
.work.no-trailer { grid-template-columns: minmax(110px, 15%) minmax(0, 1fr); grid-template-areas: "poster head" "poster about"; }
.work .poster { grid-area: poster; }
.work .head { grid-area: head; }
.work .about { grid-area: about; }
.work .trailer { grid-area: trailer; }
.poster img { display: block; width: 100%; height: auto; border: var(--line) solid var(--ink); }
.meta { font-weight: 700; margin-top: .5em; }
.line { font-size: 1.14em; line-height: 1.38; margin-top: .55em; max-width: 34em; }
.part { margin-top: .8em; font-weight: 700; }
.facts { list-style: none; margin-top: .8em; max-width: 36em; }
.facts li { position: relative; padding-left: 1.25em; margin-top: .22em; }
.facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7em; height: 2px; background: var(--ink); }
.work .go { margin-top: 1.1em; }
.screen { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: var(--line) solid var(--ink); background: var(--ink); }
.screen > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.screen .play { position: absolute; inset: 0; display: grid; place-items: center; }
.screen .play img { width: 21%; height: auto; background: var(--paper); border-radius: 50%; transition: transform .12s; }
.screen .play span { position: absolute; left: 10px; bottom: 10px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 99px; padding: .14em .9em .18em; font-weight: 700; letter-spacing: -.01em; }
a.screen:hover .play img { background: var(--light); transform: scale(1.07); }
a.screen:hover .play span { background: var(--light); }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.work .strip { grid-column: 1 / -1; margin-top: 28px; }

/* ---------------------------------------------------------------- instant pictures in a row: stills, Etchies, photographs */
.frames a, .grid a { display: block; background: var(--paper); border: var(--line) solid var(--ink); padding: 3.5% 3.5% 12%; text-decoration: none; }
.frames a:nth-child(3n+1), .grid a:nth-child(3n+1) { rotate: -1.3deg; }
.frames a:nth-child(3n+2), .grid a:nth-child(3n+2) { rotate: .9deg; }
.frames a:nth-child(3n), .grid a:nth-child(3n) { rotate: -.4deg; }
.frames a:hover, .grid a:hover { rotate: 0deg; background: var(--light); }
.frames img, .grid img { display: block; box-shadow: 0 0 0 1px var(--ink); }
.strip { margin-top: clamp(30px, 4vw, 60px); }
.strip figcaption { font-weight: 700; font-size: 1.1em; margin-bottom: .2em; letter-spacing: -.01em; }
.frames { display: flex; gap: clamp(12px, 1.4vw, 22px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 14px 6px 18px;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.frames a { --h: clamp(170px, 21vw, 300px); flex: none; height: var(--h); padding: calc(var(--h) * .05) calc(var(--h) * .05) calc(var(--h) * .17); scroll-snap-align: start; }
.frames img { height: 100%; width: auto; max-width: none; }

/* ---------------------------------------------------------------- camera, bio, UNF: text */
.cols { display: grid; grid-template-columns: minmax(0, 1fr); }
.cols.two { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: var(--gap); row-gap: 28px; align-items: start; }
.snaps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; gap: clamp(12px, 1.4vw, 22px); }
.snaps img { aspect-ratio: 5 / 4; }
.window { position: relative; display: block; border: var(--line) solid var(--ink); overflow: hidden; text-decoration: none; }
.window img { display: block; width: 100%; height: auto; }
.window span { position: absolute; left: 10px; bottom: 10px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 99px; padding: .14em .9em .18em; font-weight: 700; }
.window:hover span { background: var(--light); }
.col-text { max-width: 44em; }
.col-text p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.42; }
.col-text p + p { margin-top: .8em; }
.col-text.big p:first-child { font-size: clamp(23px, 2.5vw, 38px); font-weight: 700; line-height: 1.14; letter-spacing: -.03em; }
.credits { list-style: none; margin-top: 1.2em; display: flex; flex-wrap: wrap; gap: .5em .6em; }
.credits li { border: var(--line) solid var(--ink); border-radius: 99px; padding: .24em 1em .28em; font-weight: 700; }
.credits a { text-decoration: none; }
.credits span { font-weight: 400; }
.col-text .go { margin-top: clamp(22px, 3vw, 40px); font-size: 17px; }
.col-text .aside { margin-top: 1.4em; font-size: 14px; line-height: 1.4; }
.star { color: inherit; text-decoration: none; font-weight: 700; }
.col-text .press { font-size: 17px; margin-top: 1.4em; }

/* ---------------------------------------------------------------- editing */
.credits-table { border-collapse: collapse; width: min(100%, 46em); }
.credits-table caption { text-align: left; font-weight: 700; font-size: 1.1em; padding-bottom: .3em; }
.credits-table th, .credits-table td { text-align: left; padding: .5em 1.2em .55em 0; border-bottom: var(--line) solid var(--ink); vertical-align: baseline; }
.credits-table thead th { font-size: .86em; font-weight: 400; }
.credits-table tbody th { font-weight: 700; font-size: clamp(19px, 1.9vw, 27px); line-height: 1.1; letter-spacing: -.03em; }
.credits-table tbody th a { text-decoration: none; }
.credits-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
#showreels { margin-top: clamp(40px, 6vw, 84px); }
.his { margin-top: .5em; max-width: 44em; }
.reels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 40px); margin-top: 1.4em; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); border: var(--line) solid var(--ink); object-fit: cover; }
.reel figcaption { display: flex; justify-content: space-between; gap: 1em; margin-top: .4em; font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }
.time { font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- sound */
.tracks { list-style: none; max-width: 60em; border-top: var(--line) solid var(--ink); }
.track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1em; row-gap: .2em; align-items: center; padding: .75em 0 .7em; border-bottom: var(--line) solid var(--ink); }
.js .track { border-bottom: 0; padding-bottom: 0; }
.track .name b { display: block; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; letter-spacing: -.03em; }
.track .name span { display: block; margin-top: .2em; font-size: .94em; }
.track audio { grid-column: 1 / -1; width: 100%; height: 40px; margin-top: .3em; }
.js .track audio { display: none; }
.tap { width: 56px; height: 56px; border: var(--line) solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; display: grid; place-items: center; padding: 0; }
.tap:hover { background: var(--light); }
.tap span { display: block; width: 20px; height: 22px; margin-left: 4px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.track.on .tap { background: var(--light); }
.track.on .tap span { margin-left: 0; clip-path: polygon(0 0, 36% 0, 36% 100%, 0 100%, 0 0, 64% 0, 100% 0, 100% 100%, 64% 100%, 64% 0); }
/* the line under a track is also the line that fills as it plays */
.bar { grid-column: 1 / -1; position: relative; height: 20px; cursor: pointer; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--line); background: var(--ink); }
.bar span { position: absolute; left: 0; bottom: 0; height: 9px; width: 0; background: var(--ink); }
.track.on .bar span { box-shadow: 0 -3px 0 var(--light); }
.bar[hidden] { display: none; }
.statement { margin-top: clamp(40px, 6vw, 84px); max-width: 44em; }
.statement .his { margin-top: .8em; }
.statement .his p + p { margin-top: .8em; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pair img { display: block; width: 100%; height: auto; border: var(--line) solid var(--ink); }
.pair.wide { grid-template-columns: 1.5fr 1fr; max-width: 50em; margin-top: 1em; align-items: start; }

/* ---------------------------------------------------------------- play */
.toy { margin-top: clamp(40px, 6vw, 88px); }
.toy:first-child { margin-top: 0; }
.toy > p { margin-top: .5em; max-width: 40em; }
.grid { display: grid; gap: clamp(10px, 1.2vw, 18px); margin-top: 1em; }
.grid.squares { grid-template-columns: repeat(auto-fill, minmax(clamp(80px, 9.4vw, 140px), 1fr)); }
.grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.halves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(36px, 5vw, 60px); margin-top: clamp(40px, 6vw, 88px); max-width: 76em; }
.halves .toy { margin-top: 0; }
.pages { columns: 7 120px; column-gap: 10px; margin-top: 1em; }
.pages a { display: block; break-inside: avoid; margin-bottom: 10px; border: var(--line) solid var(--ink); overflow: hidden; background: var(--paper); }
.pages img { display: block; width: 100%; height: auto; }
.pages a:hover img { outline: 5px solid var(--light); outline-offset: -5px; }
.list { list-style: none; margin-top: .8em; }
.list li { padding: .4em 0 .44em; border-bottom: var(--line) solid var(--ink); }
.list li:first-child { border-top: var(--line) solid var(--ink); }
.list a { font-weight: 700; text-decoration: none; font-size: 1.1em; letter-spacing: -.01em; }
.list span { display: block; font-size: .9em; }
.toy .go { margin-top: 1em; }

/* ---------------------------------------------------------------- the end */
.foot { padding: clamp(56px, 8vw, 120px) var(--gap) clamp(28px, 4vw, 56px); }
.foot .links { display: flex; flex-wrap: wrap; gap: .4em 1.4em; font-weight: 700; font-size: 1.1em; }
.foot .small { margin-top: .8em; }
.foot .small a { margin-left: 1em; font-weight: 700; }

/* the way back to the city: a ring on the line of pictures */
.up { position: sticky; bottom: 14px; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -46px;
  margin-left: min(calc(100% - var(--lane-x) - var(--lane-w) / 2 - 23px), calc(100% - 50px)); border: var(--line) solid var(--ink); border-radius: 50%; background: var(--paper); }
.up svg { display: block; fill: none; stroke: var(--ink); stroke-width: 2.4; }
.up span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.up:hover { background: var(--light); }
.up[hidden] { display: none; }

/* ---------------------------------------------------------------- a picture, large */
.look { border: var(--line) solid var(--ink); padding: 12px; background: var(--paper); color: var(--ink); max-width: min(96vw, 1500px); max-height: 96vh; }
.look::backdrop { background: rgba(255, 255, 255, .93); }
.look img { display: block; max-width: 100%; max-height: calc(96vh - 120px); width: auto; height: auto; margin: 0 auto; }
.look .caption { margin-top: .5em; font-size: .94em; max-width: 60em; }
.look .keys { display: flex; gap: .5em; margin-top: .6em; }
.look button { font: inherit; font-weight: 700; border: var(--line) solid var(--ink); border-radius: 99px; background: var(--paper); padding: .34em 1.1em .38em; cursor: pointer; color: var(--ink); }
.look button:hover { background: var(--light); }
.look .shut { margin-left: auto; }

.lost { padding-bottom: 60px; }
.lost .top { display: block; }
.lost .what, .lost .go { margin-top: 1em; }
.lost img { margin-left: var(--gap); }

/* ---------------------------------------------------------------- narrow screens: the city in two rows */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .top { grid-template-columns: minmax(0, 1fr); row-gap: .6em; }
  .stop { left: calc(var(--xt) * 1%); top: calc(var(--yt) * 1%); width: calc(var(--boxt) * 1%); }
  .stop-frame { left: calc(var(--fxt) * 1%); top: calc(var(--fyt) * 1%); width: calc(var(--fwt) * 1%); }
  .sign { left: calc(var(--sxt) * 100%); top: calc((var(--syt) + 8 * var(--ut)) * 100%); font-size: clamp(12px, 3.2vw, 21px); }
  .stop .pile { left: calc(var(--sxt) * 100%); top: calc((var(--syt) + 48 * var(--ut)) * 100%); width: calc(150 * var(--ut) * 100%); }
  .glow { left: calc(var(--gxt) * 1%); top: calc(var(--gyt) * 1%); width: calc(var(--gwt) * 1%); height: calc(var(--ght) * 1%); }
  .car { left: calc(var(--bxt) * 1%); top: calc(var(--byt) * 1%); width: calc(var(--bwt) * 1%); }
  .car span { font-size: 3.3vw; }
  .scene { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .words { margin-right: calc(var(--room) - var(--lane-x)); }          /* the title and its sentence keep clear of the trail */
  .stand { justify-self: end; }
  .work { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "poster head" "about about" "trailer trailer"; grid-template-rows: auto; row-gap: 14px; }
  .work.no-trailer { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "poster head" "about about"; }
  .work .head { align-self: center; }
  .work .trailer { margin-top: 6px; }
  .cols.two { grid-template-columns: minmax(0, 1fr); }
  .pages { columns: 3 90px; }
  .reels { grid-template-columns: minmax(0, 1fr); }
  .halves { grid-template-columns: minmax(0, 1fr); }
  .tap { width: 48px; height: 48px; }
  .up { width: 42px; height: 42px; margin-top: -42px; margin-left: min(calc(100% - var(--lane-x) - var(--lane-w) / 2 - 21px), calc(100% - 45px)); }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .work { grid-template-columns: minmax(110px, 20%) minmax(0, 1fr); grid-template-areas: "poster head" "poster about" "trailer trailer"; row-gap: 18px; }
  .work .trailer { max-width: 640px; }
  .cols.two { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .glows, .car, .how, .screen .play, .tap, .bar, .up, .entry::after, .headzone::after, .inside::after { display: none; }
  .place { break-inside: avoid-page; }
}