/* The About page (PUB-09): five stops at one arcade machine, each a photograph across the
   whole window with its text in the dark half. On a phone the photograph sits above the text.
   --u is one unit of the design, 14.4 px in a 1440 x 810 window: type and spacing shrink with
   a smaller window like the photographs do. In a larger window only the photographs grow:
   the type stops at the size of the design (15 px a unit), or it gets far too big on a
   large screen (user). */
/* The page's three typefaces, served from here (fonts/) and not from Google: nothing on this
   page asks another company's server (user, 2026-10-09). Latin only; the licences lie beside
   the files. */
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/big-shoulders-display-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/ibm-plex-sans-condensed-300.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-condensed-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #f4efe6; --dim: #d9d0c2; --mute: #a89d8c; --amber: #f2a92c; --red: #ff5a4d; --night: #070504;
  --u: min(1vw, 1.7778vh, 15px);
  --edge: 7.2vw;
}
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
img { display: block; }
p, h1, h2, dl, dd, ul { margin: 0; padding: 0; }
.narrow { display: none; }

/* ---- a stop ---- */
.scene { position: relative; height: 100vh; height: 100svh; min-height: 540px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; container-type: size; }
.scene.flip { align-items: flex-end; }
.shot { position: absolute; inset: 0; }
.shade { position: absolute; inset: 0; }

/* Each photograph lies in a box of its own shape (--ar) that covers the stop, so everything
   laid over it - smoke, lamps, the engraving - sits in per cent of the picture and
   stays on its spot. --px / --py: which part of the picture stays in view when the window
   has another shape (0 = left or top edge, 1 = right or bottom edge). */
.fit { --ar: 1.792; --px: .5; --py: .5; --w: max(100cqw, calc(100cqh * var(--ar)));
  position: absolute; width: var(--w); aspect-ratio: var(--ar);
  left: calc((100cqw - var(--w)) * var(--px)); top: calc((100cqh - var(--w) / var(--ar)) * var(--py)); }
.fit img, .fit .smoke { position: absolute; inset: 0; width: 100%; height: 100%; }
.hall .fit { --ar: 1.791; --px: .78; }
.screen .fit { --px: .82; }
.panel .fit { --px: .12; }
.door .fit { --px: .86; }
.plate .fit { --px: 0; }

/* the dark half the text stands in, and a soft seam to the next stop */
.hall .shade { background: linear-gradient(90deg, rgba(7,5,4,.72) 0%, rgba(7,5,4,.35) 38%, rgba(7,5,4,0) 56%), linear-gradient(180deg, rgba(7,5,4,0) 88%, var(--night) 100%); }
.screen .shade { background: linear-gradient(90deg, rgba(7,5,4,.78) 0%, rgba(7,5,4,.5) 34%, rgba(7,5,4,0) 52%), linear-gradient(180deg, var(--night) 0%, rgba(7,5,4,0) 12%, rgba(7,5,4,0) 88%, var(--night) 100%); }
.panel .shade { background: linear-gradient(270deg, rgba(7,5,4,.86) 0%, rgba(7,5,4,.7) 34%, rgba(7,5,4,0) 54%), linear-gradient(180deg, var(--night) 0%, rgba(7,5,4,0) 12%, rgba(7,5,4,0) 88%, var(--night) 100%); }
.door .shade { background: linear-gradient(90deg, rgba(7,5,4,.8) 0%, rgba(7,5,4,.55) 36%, rgba(7,5,4,0) 54%), linear-gradient(180deg, var(--night) 0%, rgba(7,5,4,0) 12%, rgba(7,5,4,0) 88%, var(--night) 100%); }
.plate .shade { background: linear-gradient(270deg, rgba(7,5,4,.8) 0%, rgba(7,5,4,.5) 36%, rgba(7,5,4,0) 52%), linear-gradient(180deg, var(--night) 0%, rgba(7,5,4,0) 12%, rgba(7,5,4,0) 88%, var(--night) 100%); }

/* What moves, one small thing a stop. Each lies over its photograph as a plain transparent
   layer - no blend modes: Safari does not blend a WebGL canvas with the picture under it. */
.smoke, .lamp { pointer-events: none; }
.lamp { position: absolute; transform: translate(-50%, -50%); }
/* the two coin lights glow and never quite hold still */
.lamp.coin { width: 4.4%; height: 12%; background: radial-gradient(ellipse, rgba(255,92,58,.9) 0%, rgba(255,60,36,.5) 30%, rgba(255,40,24,.16) 52%, rgba(255,40,24,0) 72%); animation: glim 2.3s steps(1) infinite; }
.lamp.coin.one { left: 63.65%; top: 24.4%; }
.lamp.coin.two { left: 67.88%; top: 23.3%; animation-duration: 3.1s; animation-delay: -1.2s; }
@keyframes glim { 0% { opacity: .78; } 13% { opacity: .92; } 21% { opacity: .7; } 34% { opacity: .88; } 47% { opacity: .96; } 58% { opacity: .74; } 66% { opacity: .9; } 81% { opacity: .82; } 92% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lamp { animation: none; opacity: .8; } }

.engrave { position: absolute; left: 21.7%; top: 38.3%; width: 20%; height: 23.6%; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; color: #2b2622; text-align: center; white-space: nowrap; }
.engrave b { font-size: 6.6cqw; line-height: 1; font-weight: 500; letter-spacing: .2em; }
.engrave i { width: 70%; height: 1.5px; margin: 3.4cqw 0; background: #2b2622; opacity: .6; }
.engrave span { font-size: 4.5cqw; line-height: 1; letter-spacing: .22em; }
.engrave span + span { margin-top: 3.4cqw; }

/* ---- the text ---- */
.col { position: relative; width: calc(34.5 * var(--u)); margin-left: var(--edge); display: flex; flex-direction: column; align-items: flex-start; }
.flip .col { width: calc(32 * var(--u)); margin-left: 0; margin-right: calc(var(--edge) - .5vw); }
.door .col, .plate .col { align-items: stretch; }
.door .col { width: calc(41 * var(--u)); } /* room for THE SLOTS ARE in one line */
.door .text, .door form { max-width: calc(34.5 * var(--u)); }
h1, h2 { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; line-height: .9; letter-spacing: .005em; text-transform: uppercase; color: var(--ink); }
h1 { font-size: calc(8.89 * var(--u)); }
h2 { font-size: calc(6.39 * var(--u)); margin-top: calc(1.25 * var(--u)); }
.kick { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: max(11px, calc(.97 * var(--u))); line-height: 1; letter-spacing: .34em; text-transform: uppercase; color: var(--amber); }
.text { margin-top: calc(1.9 * var(--u)); max-width: 32em; font-size: max(16px, calc(1.53 * var(--u))); line-height: 1.4; letter-spacing: .01em; color: var(--dim); }
.hall .text { max-width: calc(32 * var(--u)); }
.says { margin-top: calc(1.25 * var(--u)); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: max(11px, calc(.97 * var(--u))); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.more { margin-top: calc(1.25 * var(--u)); font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: max(11px, calc(.97 * var(--u))); line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.more a { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.more a:hover, .more a:focus-visible { color: var(--amber); }
.more span { white-space: nowrap; } /* if it has to break, then after the colon */
.play { display: inline-block; padding: .47em 1.3em .41em; background: var(--amber); color: #14102a; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: max(24px, calc(2.36 * var(--u))); line-height: 1; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.play:hover, .play:focus-visible { background: var(--ink); }
.hall .play { margin-top: calc(2.8 * var(--u)); }
/* The room's headline types itself, then the rest of the column comes on, one part after the
   other (about.js, typing(); PUB-13, the user's pick). The finished headline keeps its place
   unseen (.size) and the typed line lies over it, so nothing below moves. The caret stands
   while letters come, blinks with a hard step while the line rests, then fades and is gone. */
.hall h1.typed { position: relative; }
.hall h1 .size { visibility: hidden; }
.hall h1 .line { position: absolute; left: 0; top: 0; white-space: pre; }
.hall h1 .caret { animation: caret 1s step-end infinite; }
.hall h1.busy .caret { animation: none; }
.hall h1.gone .caret { animation: caret-out .6s linear forwards; } /* an animation: no transition starts on what the blink has just let go of */
@keyframes caret { 50% { opacity: 0; } }
@keyframes caret-out { to { opacity: 0; } }
.hall .col.wait > :not(h1) { opacity: 0; pointer-events: none; }
.hall .col.wait.show > :not(h1) { opacity: 1; pointer-events: auto; transition: opacity .4s linear; }
.hall .col.wait.show > .play { transition-delay: .25s; }
.hall .col.wait.show > .says { transition-delay: .5s; }
/* Before about.js has run (the class comes from the line in the page's head): nothing of the
   column shows. Should the script never arrive, the column is there after 4 s by itself. */
@media (prefers-reduced-motion: no-preference) { .typing .hall .col > * { animation: unseen 4s step-end; } }
@keyframes unseen { from { opacity: 0; } }
.corner { position: absolute; left: var(--edge); bottom: calc(3 * var(--u)); font-family: 'IBM Plex Mono', monospace; font-size: max(10px, calc(.83 * var(--u))); line-height: 1; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }

.keys { margin-top: calc(2.1 * var(--u)); display: grid; grid-template-columns: auto auto; gap: calc(.83 * var(--u)) calc(1.25 * var(--u)); align-items: center; justify-content: start; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; font-size: max(11px, calc(.97 * var(--u))); line-height: 1.15; }
.keys dt { min-width: 2.6em; padding: .36em .7em; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 500; text-align: center; }
.keys dd { letter-spacing: .16em; color: var(--dim); }
.keys dd.both { grid-row: span 2; } /* one action, two keys: the word stands between them */

form { margin-top: calc(1.9 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.25 * var(--u)) calc(1.4 * var(--u)); }
label { display: flex; flex-direction: column; gap: .7em; font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: max(10px, calc(.83 * var(--u))); line-height: 1; letter-spacing: .22em; color: var(--mute); }
label.all { grid-column: 1 / -1; }
input, textarea { width: 100%; background: rgba(7,5,4,.6); border: 1.5px solid rgba(244,239,230,.5); border-radius: 0; color: var(--ink); font: 300 max(16px, calc(1.18 * var(--u)))/1.4 'IBM Plex Sans Condensed', sans-serif; letter-spacing: .01em; padding: .55em .7em; outline: none; resize: none; -webkit-appearance: none; appearance: none; }
input:focus, textarea:focus { border-color: var(--amber); }
button { justify-self: start; padding: .5em 1.4em .46em; background: transparent; border: 1.5px solid var(--ink); border-radius: 0; color: var(--ink); font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: max(20px, calc(1.67 * var(--u))); line-height: 1; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
button:hover, button:focus-visible { background: var(--ink); color: var(--night); }
button:disabled { opacity: .45; cursor: default; background: transparent; color: var(--ink); }
.note { align-self: center; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: max(11px, calc(.9 * var(--u))); line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }

.log { list-style: none; margin-top: calc(1.8 * var(--u)); border-bottom: 1px solid rgba(244,239,230,.2); }
.log li { display: grid; grid-template-columns: calc(4.4 * var(--u)) minmax(0, 1fr); gap: calc(1 * var(--u)); padding: calc(.83 * var(--u)) 0; border-top: 1px solid rgba(244,239,230,.2); }
.log b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: max(18px, calc(1.53 * var(--u))); line-height: 1; letter-spacing: .04em; color: var(--amber); }
.log p { font-weight: 500; font-size: max(13px, calc(1.04 * var(--u))); line-height: 1.25; letter-spacing: .08em; color: var(--ink); }
.log span { display: block; margin-top: .25em; font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: max(10px, calc(.83 * var(--u))); line-height: 1.3; letter-spacing: .04em; color: var(--mute); }

/* ---- the legal notice (legal/): one plain column, no photograph ---- */
.sheet { min-height: 100vh; min-height: 100svh; padding: calc(7 * var(--u)) var(--edge) calc(6 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
.sheet h2 { margin-top: 0; }
.sheet .kick { margin-top: calc(3.4 * var(--u)); }
.sheet .text { margin-top: calc(1.1 * var(--u)); max-width: 34em; }
.sheet .text a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.sheet .text a:hover, .sheet .text a:focus-visible { color: var(--amber); }
.back { display: inline-block; margin-top: calc(4 * var(--u)); padding: .5em 1.4em .46em; border: 1.5px solid var(--ink); color: var(--ink); font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: max(20px, calc(1.67 * var(--u))); line-height: 1; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.back:hover, .back:focus-visible { background: var(--ink); color: var(--night); }

/* ---- the post-mortem (post-mortem/): a long read under the type plate ---- */
.plate h2.title { font-size: calc(4.9 * var(--u)); }
.essay { min-height: 0; padding-top: calc(1 * var(--u)); padding-bottom: calc(2 * var(--u)); }
.essay h2 { margin-top: calc(7 * var(--u)); }
.essay h3 { margin: calc(3.4 * var(--u)) 0 0; padding: 0; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: max(22px, calc(2.36 * var(--u))); line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.essay .text { max-width: 36em; text-wrap: pretty; } /* no single word left alone on a last line */
.essay .log { align-self: stretch; max-width: calc(42 * var(--u)); margin-top: calc(1.4 * var(--u)); }
.essay .figures li { grid-template-columns: calc(8.4 * var(--u)) minmax(0, 1fr); align-items: baseline; }
.essay .figures b { white-space: nowrap; }
.essay .log span { text-wrap: pretty; }
.essay .points, .essay .lessons { list-style: none; margin-left: 0; padding: 0; }
.essay .points li, .essay .lessons li { position: relative; padding-left: 2.2em; }
.essay .points li + li, .essay .lessons li + li { margin-top: .7em; }
.essay .points li::before { content: ''; position: absolute; left: .2em; top: .55em; width: .5em; height: .5em; background: var(--amber); }
.essay .lessons { counter-reset: n; margin-top: calc(2 * var(--u)); }
.essay .lessons li { counter-increment: n; }
.essay .lessons li::before { content: counter(n); position: absolute; left: 0; top: .08em; width: 1.5em; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; line-height: 1.3; color: var(--amber); }
.essay .says { margin-top: calc(4 * var(--u)); }
/* The running text lights up word by word as it is scrolled past (about.js cuts it into .word,
   PUB-13). Until then a word stands at 35 % of the text colour (--dim): enough to read ahead
   (the user's pick). */
.essay .word { color: rgb(217 208 194 / .35); transition: color 120ms linear; }
.essay .word.lit { color: inherit; }
@media print { .essay .word { color: inherit; } }

footer { padding: calc(4.4 * var(--u)) var(--edge) calc(5 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.credit { display: flex; align-items: center; gap: calc(3 * var(--u)); }
.maker { font-family: 'IBM Plex Mono', monospace; font-size: max(10px, calc(.83 * var(--u))); line-height: 1; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); text-decoration: none; white-space: nowrap; }
.maker:hover, .maker:focus-visible { color: var(--ink); }

/* ---- a phone, or any window too narrow for text beside the picture: picture above, text below ---- */
@media (max-width: 820px) {
  :root { --edge: 6.15vw; --pv: min(1vw, 6.2px); }
  .wide { display: none !important; }
  .narrow { display: inline; }

  .scene, .scene.flip { height: auto; min-height: 0; display: block; overflow: visible; container-type: normal; }
  .shot { position: relative; inset: auto; aspect-ratio: 13 / 10; overflow: hidden; container-type: size; }
  .screen .fit { --px: .76; --py: .3; }
  .panel .fit { --px: .26; }
  .door .fit { --px: .84; --py: .4; }
  .shade, .screen .shade, .panel .shade, .door .shade, .plate .shade { background: linear-gradient(180deg, var(--night) 0%, rgba(7,5,4,0) 16%, rgba(7,5,4,0) 62%, var(--night) 100%); }
  .plate .fit { left: -27.95cqw; top: -40cqh; width: 246.15cqw; }
  .engrave b { font-size: 6.8cqw; letter-spacing: .18em; }
  .engrave span { font-size: 5.2cqw; letter-spacing: .2em; }

  .door .text, .door form { max-width: none; }
  .col, .flip .col, .door .col { width: auto; margin: 0; padding: 4px var(--edge) calc(14 * var(--pv)); align-items: stretch; }
  h2 { font-size: calc(14.87 * var(--pv)); margin-top: 14px; }
  .kick { font-size: 12px; }
  .text, .hall .text { margin-top: 18px; max-width: none; font-size: clamp(16px, calc(4.36 * var(--pv)), 21px); }
  .says { margin-top: 14px; font-size: 12px; }
  .more { margin-top: 16px; font-size: 12px; }
  .play { display: block; text-align: center; padding: .53em 0 .47em; font-size: clamp(26px, calc(7.7 * var(--pv)), 40px); }

  /* the room is one screen: the tall photograph, the text over the dark carpet */
  .scene.hall { position: relative; height: 100vh; height: 100svh; min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
  .hall .shot { position: absolute; left: 0; right: 0; top: -4.7%; height: 90%; aspect-ratio: auto; }
  .hall .fit { --ar: .5581; --px: .5; --py: 0; }
  .hall .shade { background: linear-gradient(180deg, rgba(7,5,4,0) 56%, rgba(7,5,4,.82) 78%, var(--night) 98%); }
  .hall .col { padding: 0 var(--edge) max(34px, env(safe-area-inset-bottom)); }
  h1 { font-size: min(calc(23.08 * var(--pv)), 14.5svh); }
  .hall .text { margin-top: 14px; }
  .hall .play { margin-top: 22px; }
  .corner { display: none; }

  form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
  label { font-size: 11px; }
  input, textarea { font-size: 17px; padding: 11px 12px; }
  button { align-self: stretch; padding: .58em 0 .54em; font-size: 24px; }
  .note { align-self: flex-start; font-size: 12px; }

  .log { margin-top: 22px; }
  .log li { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 0; }
  .log b { font-size: 20px; }
  .log p { font-size: 14px; }
  .log span { font-size: 11px; letter-spacing: .03em; }

  footer { padding: 0 var(--edge) max(48px, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 26px; }
  .credit { flex-direction: column; gap: 18px; }
  .sheet { padding: 44px var(--edge) max(48px, env(safe-area-inset-bottom)); }
  .plate h2.title { font-size: calc(13.2 * var(--pv)); }
  .essay { padding-top: 8px; padding-bottom: 24px; }
  .essay h2 { margin-top: 56px; }
  .essay h3 { margin-top: 30px; font-size: 24px; }
  .essay .log { max-width: none; }
  .essay .figures li { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
  .essay .says { margin-top: 36px; }
  .sheet .kick { margin-top: 30px; }
  .sheet .text { margin-top: 10px; }
  .back { margin-top: 36px; }
  .maker { text-align: center; font-size: 11px; }
}