/* The work pages: the portfolio's monitor and the project pages (Installations is the template; Pop-ups, Sport
   Activations and Dyson each add their own moment). Loads after main.css and uses its tokens, bar, note and footer;
   DESIGN.md has the why. */

/* ---------- the portfolio: his monitor, a folder per project (his ask, 20 Oct) ---------- */
.desk-page { padding-block: clamp(120px, 18vh, 180px) clamp(64px, 10vh, 120px); }
.monitor { max-width: 1180px; margin: clamp(36px, 6vh, 64px) auto 0; }
.screen {
  padding: clamp(8px, 1.1vw, 14px); border: 1px solid #262626; border-radius: 14px; background: #0D0D0D;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
/* the desktop: brand navy, with the window on top */
.screen-inner {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px;
  background: radial-gradient(120% 90% at 25% 15%, #2E3E5C, #141C2B 55%, #070A10);
}
.stand { width: 16%; height: 54px; margin: 0 auto; background: linear-gradient(#1A1A1A, #0B0B0B); clip-path: polygon(34% 0, 66% 0, 74% 82%, 100% 82%, 100% 100%, 0 100%, 0 82%, 26% 82%); }
/* it wakes up when it reaches the screen: the logo, then the window opens */
.boot { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: #000; transition: opacity .5s ease .7s; pointer-events: none; }
.boot span {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; background: var(--white); color: var(--black);
  font: 800 1.25rem/1 var(--display); letter-spacing: -0.04em; opacity: 0; transition: opacity .3s ease .15s;
}
.monitor.on .boot span { opacity: 1; }
.monitor.on .boot { opacity: 0; }
.win {
  position: absolute; inset: clamp(10px, 2vw, 26px); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #2A2A2A; border-radius: 10px; background: #101010; box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  opacity: 0; transform: scale(.95); transition: opacity .35s ease 1.1s, transform .5s cubic-bezier(.2, .9, .3, 1.1) 1.1s;
}
.monitor.on .win { opacity: 1; transform: none; }
/* the lock screen: the covers drift by as the wallpaper, the time in Toronto, and his face to click on */
.lock {
  position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: 1fr auto; justify-items: center; width: 100%;
  padding: clamp(18px, 4vw, 48px) 16px clamp(22px, 5vw, 56px); border: 0; overflow: hidden; background: #070A10; color: var(--white);
  font: inherit; text-align: center; cursor: pointer; opacity: 0; transition: opacity .5s ease 1s, transform .7s cubic-bezier(.7, 0, .2, 1), filter .7s;
}
.monitor.on .lock { opacity: 1; }
.lock-wall { position: absolute; inset: 0; }
.lock-wall img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(.42) saturate(.9);
  animation: wall 28s linear infinite;
}
.lock-wall img:nth-child(2) { animation-delay: 4s; }
.lock-wall img:nth-child(3) { animation-delay: 8s; }
.lock-wall img:nth-child(4) { animation-delay: 12s; }
.lock-wall img:nth-child(5) { animation-delay: 16s; }
.lock-wall img:nth-child(6) { animation-delay: 20s; }
.lock-wall img:nth-child(7) { animation-delay: 24s; }
@keyframes wall {
  0% { opacity: 0; transform: scale(1.12); }
  4%, 14% { opacity: 1; }
  19%, 100% { opacity: 0; transform: scale(1); }
}
.lock-top, .lock-user { position: relative; display: grid; justify-items: center; }
.lock-date { font: 600 clamp(.8rem, 1.2vw, 1rem)/1 var(--display); color: #DCE2EC; }
.lock-time { margin-top: 6px; font: 800 clamp(3.6rem, 10vw, 8rem)/.9 var(--display); letter-spacing: -0.05em; }
.lock-user { gap: 10px; align-self: end; }
.lock-face { width: clamp(64px, 7vw, 92px); height: auto; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 12px 30px rgba(0, 0, 0, .6); }
.lock-name { font: 700 clamp(1rem, 1.4vw, 1.2rem)/1 var(--display); }
.lock-go {
  margin-top: 4px; padding: 12px 22px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px);
  font: 700 clamp(.95rem, 1.3vw, 1.1rem)/1 var(--display); animation: call 2.4s ease-in-out infinite;
}
@keyframes call {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 165, 65, 0); }
  50% { box-shadow: 0 0 0 4px rgba(242, 165, 65, .9), 0 0 32px rgba(242, 165, 65, .45); }
}
.lock:hover .lock-go, .lock:focus-visible .lock-go { background: var(--amber); color: var(--black); }
/* unlocked: the lock screen lifts away and the window opens */
.monitor.locked .win { opacity: 0; transform: scale(.95); }
.monitor.unlocked .lock { opacity: 0; transform: translateY(-100%); filter: blur(6px); transition-delay: 0s; pointer-events: none; }
.monitor.unlocked .win { transition-delay: .25s, .25s; }
.monitor.relock .lock { transition-delay: 0s; }  /* locked again by hand: no waiting for the boot */
.monitor.unlocked .folder[aria-selected="true"] .fold-key { animation: key 1s ease 1s 2; }
@keyframes key { 50% { box-shadow: 0 0 0 4px rgba(242, 165, 65, .35); } }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid #222; background: #141414; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3A3A3A; }
.win-title { flex: 1; text-align: center; color: var(--smoke); font: 600 .8rem/1 var(--display); }
/* the Lock button: puts the lock screen back */
.win-lock {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 4px 8px 3px; border: 1px solid #333; border-radius: 4px;
  background: none; color: var(--smoke); font: 600 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: color .2s, border-color .2s;
}
.win-lock i { position: relative; width: 9px; height: 7px; margin-top: 4px; border-radius: 1.5px; background: currentColor; }
.win-lock i::before { content: ""; position: absolute; left: 1.5px; bottom: 5px; width: 6px; height: 6px; box-sizing: border-box; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 3px 3px 0 0; }
.win-lock:hover { color: var(--amber); border-color: var(--amber); }
.win-lock[hidden] { display: none; }
.win-clock, .win-status, .folders-head, .files-head { font: 600 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.win-status { margin: 0; padding: 8px 14px; border-top: 1px solid #1E1E1E; background: #0C0C0C; }
.win-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 236px minmax(0, 1fr); }
.folders { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; overflow: auto; border-right: 1px solid #1E1E1E; background: #0B0B0B; }
.folders-head { margin: 4px 10px 8px; }
.folder {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  color: #C9CED6; font: 600 .86rem/1.2 var(--display); text-align: left; text-decoration: none; cursor: pointer;
}
.folder span { flex: 1; min-width: 0; }
.folder:hover { background: #161616; }
.folder[aria-selected="true"] { background: #1D2737; color: var(--white); }
.fold-ico { position: relative; flex: none; width: 18px; height: 13px; margin-top: 3px; border-radius: 1px 3px 3px 3px; background: #5C6B85; }
.fold-ico::before { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: inherit; }
/* the open folder is lit */
.folder[aria-selected="true"] .fold-ico { background: var(--amber); }
/* the enter key: the open folder shows it (press Enter, double-click, or click it again to go in) */
.fold-key {
  flex: none; padding: 3px 6px 2px; border: 1px solid #3A4458; border-radius: 4px; color: var(--smoke);
  font: 600 .72rem/1 var(--mono); opacity: 0; transition: opacity .2s;
}
.folder:hover .fold-key { opacity: .6; }
.folder[aria-selected="true"] .fold-key { opacity: 1; border-color: var(--amber); color: var(--amber); }
.folder-new { margin-top: auto; color: var(--smoke); }
.folder-new .fold-ico { background: none; outline: 1px dashed #5C6B85; }
.panes { min-width: 0; overflow: auto; padding: clamp(12px, 1.6vw, 20px); }
.pane { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "pv info" "files ."; gap: 12px 22px; }  /* Open project ends level with the photo (his ask, 20 Oct) */
.pane[hidden], .lock[hidden] { display: none; }
.preview { grid-area: pv; position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: #000; }
.pv { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pv.swap { animation: swap .35s ease; }
.pv.loading { filter: blur(6px) saturate(.8); }
@keyframes swap { from { opacity: .15; transform: scale(1.03); } }
/* the files play through on their own: a line along the bottom of the photo runs down to the next one */
.pv-time { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--amber); transform: scaleX(0); transform-origin: left; }
.pv-time.run { animation: run var(--auto, 3.6s) linear forwards; }
@keyframes run { to { transform: scaleX(1); } }
.pv-name { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px 3px; border-radius: 3px; background: rgba(0, 0, 0, .7); color: #E5E7EB; font: 600 .68rem/1 var(--mono); }
.pane-info { grid-area: info; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pane-info h2 { font-size: clamp(1.3rem, 2vw, 1.9rem); letter-spacing: -0.02em; }
.pane-info p { color: #C9CED6; font-size: .98rem; line-height: 1.45; }
.pane-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.pane-meta dt { font: 600 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.pane-meta dd { margin: 5px 0 0; font: 600 .92rem/1.3 var(--display); }
.pane-open {
  display: flex; justify-content: center; align-items: center; gap: 12px; align-self: stretch; margin-top: auto; padding: 18px 20px 17px;
  border-radius: 8px; background: var(--white); color: var(--black); font: 800 clamp(1.05rem, 1.4vw, 1.25rem)/1 var(--display);
  text-decoration: none; transition: background-color .2s, transform .2s;
}
.pane-open kbd { padding: 3px 6px 2px; border: 1.5px solid currentColor; border-radius: 4px; font: 700 .8rem/1 var(--mono); }
.pane-open:hover { transform: translateY(-1px); }
.pane-open:hover { background: var(--amber); }
.pane .pane-soon { margin-top: auto; font: 600 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }
.pane-files { grid-area: files; min-width: 0; }
.files-head { margin: 0 0 8px; }
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.file {
  display: grid; gap: 6px; width: 100%; padding: 6px; border: 1px solid transparent; border-radius: 6px; background: none;
  color: #C9CED6; font: 600 .64rem/1.25 var(--mono); text-align: center; cursor: pointer;
}
.file img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.file span { overflow-wrap: anywhere; }
.file:hover, .file[aria-pressed="true"] { border-color: #2E3B52; background: #141B27; color: var(--white); }

.folders-hint, .pane-back { display: none; }
@media (max-width: 760px) {
  .screen-inner { aspect-ratio: auto; }
  .win { position: relative; inset: auto; margin: 10px; }
  .win-body { grid-template-columns: minmax(0, 1fr); }
  /* a phone: the Files app (his note, 21 Oct). Every folder at once as a big icon; tap one and the window turns to it,
     with Projects at the top to go back (work.js adds .in). */
  .folders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 4px; padding: 14px 8px 16px; border-right: 0; overflow: visible; }
  .folders-head { grid-column: 1 / 3; margin: 0 8px 10px; }
  .folders-hint { display: block; grid-column: 3; justify-self: end; margin: 0 8px 10px; color: var(--amber); font: 600 .62rem/1 var(--mono); letter-spacing: .06em; text-align: right; }
  .folder { flex-direction: column; justify-content: start; gap: 9px; padding: 14px 4px 12px; border-radius: 10px; text-align: center; font-size: .76rem; line-height: 1.2; }
  .folder span { flex: none; }
  .folder .fold-ico { width: 50px; height: 36px; margin: 6px 0 0; border-radius: 2px 6px 6px 6px; box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .12); }
  .folder .fold-ico::before { top: -6px; width: 22px; height: 7px; border-radius: 4px 4px 0 0; }
  .folder[aria-selected="true"], .folder:hover { background: none; }
  .folder[aria-selected="true"] .fold-ico { background: #5C6B85; }
  .folder:active { background: #1D2737; }
  .folder:active .fold-ico { background: var(--amber); }
  .fold-key { display: none; }
  .folder-new { margin-top: 0; }
  .folder-new .fold-ico { box-shadow: none; }
  .win:not(.in) .panes { display: none; }
  .win.in .folders { display: none; }
  .win.in .panes { animation: open-folder .3s cubic-bezier(.2, .8, .2, 1); }
  @keyframes open-folder { from { opacity: 0; transform: translateX(24px); } }
  .pane-back {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px 8px 8px; border: 0; border-radius: 8px;
    background: #161B24; color: var(--white); font: 700 .9rem/1 var(--display); cursor: pointer;
  }
  .pane-back i { width: 8px; height: 8px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(45deg); margin-left: 4px; }
  .pane { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pv" "files" "info"; }
  .monitor.locked .screen-inner { aspect-ratio: 4 / 5; }
  .monitor.locked .win { display: none; }
  .files .file span { font-size: .58rem; }
  .stand { height: 34px; }
}

/* ---------- a project page: the template ---------- */
.case-open { padding-block: clamp(120px, 18vh, 190px) clamp(32px, 6vh, 64px); }
.case-crumb { margin-bottom: clamp(18px, 3vh, 28px); }
.case-crumb a { padding-bottom: 3px; border-bottom: 1px solid #3A3A3A; color: var(--smoke); font: 600 .92rem/1 var(--display); text-decoration: none; }
.case-crumb a:hover { color: var(--white); border-color: currentColor; }
.case-open .giant { font-size: max(2.3rem, min(9vw, 8rem)); }
.case .giant { padding-bottom: .12em; }  /* room for the descenders (the p in Cup) above the line under it */
/* the spec sheet: the same three lines on every project */
.spec { display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 5vw, 64px); margin: clamp(28px, 5vh, 44px) 0 0; }
.spec dt { font: 600 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.spec dd { margin: 8px 0 0; font: 600 1.05rem/1.3 var(--display); }

/* the lead photo opens out of a slit as you scroll to it (--o from work.js), like the About photo */
.case-lead {
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.lead-frame {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--panel);
  clip-path: inset(calc((1 - var(--o, 1)) * 16%) calc((1 - var(--o, 1)) * 10%) round 6px);
}
.lead-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.04 + (1 - var(--o, 1)) * .16)); }

.case-brief { padding-block: clamp(64px, 11vh, 130px) clamp(40px, 7vh, 80px); }
.case-brief p { max-width: 40em; color: #D5D9E0; font-size: clamp(1.12rem, 1.4vw, 1.28rem); }
.case-brief p + p { margin-top: 1.2em; }
.case-brief .case-question {
  max-width: 20em; margin-top: .9em; color: var(--white); font: 800 clamp(1.9rem, 3.6vw, 3.2rem)/1.08 var(--display);
  letter-spacing: -0.03em; text-wrap: balance;
}

/* a chapter per build: words on one side, photos on the other */
.chapter, .reveal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 100px); }
.chapter { align-items: center; padding-block: clamp(48px, 9vh, 110px); }
.ch-text h2 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); letter-spacing: -0.03em; }
.ch-text p { max-width: 36em; margin-top: 18px; color: #D5D9E0; font-size: 1.1rem; }
/* photos at different depths drift at different speeds (--y from work.js, on the picture, so the box stays put) */
.layer img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--panel); transform: translateY(var(--y, 0px)); }
.collage { position: relative; aspect-ratio: 1 / 1.08; }
.collage .layer { position: absolute; }
.collage .c1 { top: 0; left: 0; width: 60%; }
.collage .c2 { right: 0; bottom: 0; width: 54%; }
.collage .c2 img { box-shadow: 0 24px 48px rgba(0, 0, 0, .7); }

/* the bold moment for Installations: the finished store wipes across the bare room as you scroll (--w from work.js) */
.reveal { align-items: start; padding-top: clamp(40px, 8vh, 100px); }
.reveal-text { position: sticky; top: 38svh; }
.reveal-track { height: 220svh; }
.reveal-frame {
  position: sticky; top: 10svh; height: 80svh; max-width: 100%; aspect-ratio: 965 / 1287; margin-left: auto;
  overflow: hidden; border-radius: 6px; background: var(--panel); container-type: inline-size;
}
.reveal-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-open { clip-path: inset(0 calc((1 - var(--w, 0)) * 100%) 0 0); }
.r-line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--white); box-shadow: 0 0 14px rgba(255, 255, 255, .7);
  opacity: var(--lv, 0); transform: translateX(calc(var(--w, 0) * 100cqw - 1px));
}
/* the labels are strips of console tape, like the rest of the site */
.r-tape {
  position: absolute; z-index: 2; font-size: clamp(1.1rem, 1.6vw, 1.45rem); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55));
  transition: opacity .16s ease, transform .34s cubic-bezier(.2, .9, .3, 1.25);
}
.r-tape span {
  display: block; padding: .24em .8em .18em; color: #151515; font: 400 1em/1.1 var(--hand);
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 40%, rgba(0,0,0,.05)), var(--tape);
  clip-path: polygon(0 6%, 100% 0, 98.6% 18%, 100% 34%, 98.2% 52%, 100% 70%, 98.8% 86%, 100% 100%, 0 96%, 1.4% 80%, 0 62%, 1.8% 44%, 0 28%, 1.2% 14%);
}
.r-tape-build { top: 18px; right: 14px; transform: rotate(3deg); }
.r-tape-open { bottom: 22px; left: 14px; opacity: 0; transform: scale(1.5) rotate(-9deg); }
.reveal-frame.half .r-tape-build { opacity: 0; transform: rotate(3deg) translateY(-8px); }
.reveal-frame.done .r-tape-open { opacity: 1; transform: rotate(-3deg); }

.gallery { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(16px, 2.5vw, 32px); align-items: start; padding-block: clamp(48px, 9vh, 110px); }
.gallery .g2 { margin-top: clamp(60px, 12vh, 160px); }
.gallery .g3 { grid-column: 1 / -1; }

/* ---------- Installations: built to last (uplift, 21 Oct) ---------- */
/* the opening: a departures board. Each letter is a flap tile: two halves with a seam and its hinge pins; the top half
   falls and the next one drops into place (work.js). Sizes come from the board's width, so it fits a phone and a laptop
   alike. Without the script the same words sit there, still. */
.inst-open { position: relative; overflow: hidden; border-bottom: 1px solid #1A1A1A; background: radial-gradient(90% 60% at 50% 0%, #11151D, #000 70%); }
.inst-open-inner { position: relative; padding-block: clamp(110px, 16vh, 170px) clamp(32px, 6vh, 60px); }
.board {
  container-type: inline-size; margin-top: clamp(4px, 1vh, 12px); padding: clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vw, 24px) clamp(14px, 2vw, 26px);
  border: 1px solid #23252B; border-radius: 10px; background: linear-gradient(#0D0E12, #08090B);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(10px, 1.6vw, 18px); color: var(--smoke); font: 600 clamp(.66rem, 1.6cqw, .8rem)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.board-clock { display: inline-flex; align-items: center; gap: .7em; }
.board-time { --cell: clamp(16px, 3.4cqw, 24px); color: var(--white); font: 700 calc(var(--cell) * .74)/1 var(--mono); letter-spacing: 0; }
.board-title.giant { font-size: min(6.6rem, 100cqw / 11.4); line-height: 1.12; letter-spacing: 0; padding-bottom: 0; white-space: nowrap; }
.board-rows { margin-top: clamp(12px, 2vw, 22px); padding-top: clamp(10px, 1.6vw, 16px); border-top: 1px solid #1E2026; container-type: inline-size; }
.board-head, .board-row { --cell: min(30px, 100cqw / 39); display: grid; grid-template-columns: calc(16 * var(--cell)) calc(11 * var(--cell)) calc(10 * var(--cell)); column-gap: var(--cell); }
.board-head { margin-bottom: 8px; color: #6B7280; font: 600 clamp(.6rem, 1.4cqw, .72rem)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.board-row + .board-row { margin-top: calc(var(--cell) * .24); }
.board-row span { font: 700 calc(var(--cell) * .74)/1 var(--mono); text-transform: uppercase; }
.board .lit { --fc: var(--amber); color: var(--amber); }

/* a flap tile (built by work.js): --cell is its width with the gap, --fc the letter colour */
.fl-row { display: inline-flex; vertical-align: top; }
.fl {
  position: relative; display: inline-block; flex: none; width: calc(var(--cell, .79em) - var(--fg, 2px)); height: calc(var(--cell, .79em) * 1.36);
  margin-right: var(--fg, 2px); border-radius: calc(var(--cell, .79em) * .1); perspective: calc(var(--cell, .79em) * 6); color: var(--fc, #F3F4F6);
}
.fl > span {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.fl > span::before { content: attr(data-c); white-space: pre; }  /* the letter (work.js sets data-c) */
.fl-t, .fl-ft { clip-path: inset(0 0 50% 0); background: linear-gradient(#25272D, #1D1F24); }
.fl-b, .fl-fb { clip-path: inset(50% 0 0 0); background: linear-gradient(#18191D, #121316); }
.fl-ft, .fl-fb { z-index: 1; }
.fl-fb { transform: rotateX(90deg); }
.fl::after {  /* the seam, with a hinge pin at each end */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: #000;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}
.fl::before {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px;
  background: radial-gradient(circle at 1.5px 50%, #050506 0 1px, transparent 1.5px), radial-gradient(circle at calc(100% - 1.5px) 50%, #050506 0 1px, transparent 1.5px);
}
/* the title's tiles: the letters in the site's own type, a touch of space between */
.board-title .fl { --cell: .79em; --fg: .05em; height: 1.12em; }
.board-title .fl > span { font: inherit; }
.board-row .fl, .board-time .fl, .tag .fl { --fg: 2px; }

/* Amex: dressed after hours. The lounge starts dark and its lights come up bank by bank (.on from work.js, with a
   flicker as each bank strikes); the shoe bar's come up last. */
.lounge { position: relative; aspect-ratio: 1 / 1.1; }
.lounge figure { position: absolute; margin: 0; overflow: hidden; border-radius: 6px; background: var(--panel); }
.lounge img { display: block; width: 100%; height: auto; }
.lounge-room { top: 0; left: 0; width: 62%; }
.lounge-shoes { right: 0; bottom: 0; width: 48%; box-shadow: 0 24px 48px rgba(0, 0, 0, .7); }
.banks { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.banks i { flex: 1; background: rgba(3, 7, 15, .86); transition: opacity .4s ease; }
.banks i.on { opacity: 0; animation: strike .6s linear; }
@keyframes strike { 0% { opacity: 1; } 14% { opacity: .15; } 26% { opacity: .8; } 40% { opacity: 0; } 55% { opacity: .45; } 70%, 100% { opacity: 0; } }
.lounge .r-tape { font-size: clamp(1rem, 1.4vw, 1.3rem); }
.lounge-off { top: 14px; right: 12px; transform: rotate(3deg); }
.lounge-on { bottom: 18px; left: 12px; opacity: 0; transform: scale(1.5) rotate(-9deg); }
.lounge.lit .lounge-off { opacity: 0; transform: rotate(3deg) translateY(-8px); }
.lounge.lit .lounge-on { opacity: 1; transform: rotate(-3deg); }
@media (hover: hover) { .lounge figure { transition: scale .45s cubic-bezier(.2, .8, .2, 1); } .lounge figure:hover { scale: 1.04; z-index: 4; } }

/* the last photos: each one's name on a strip of flaps, rolled in as it arrives */
.inst-gallery .tag { --cell: clamp(15px, 1.5vw, 20px); margin-top: 10px; color: var(--white); font: 700 calc(var(--cell) * .74)/1 var(--mono); letter-spacing: 0; text-transform: uppercase; }
.inst-gallery figure { margin: 0; }

@media (max-width: 800px) {
  .inst-open-inner { padding-top: 104px; }
  .board-head { display: none; }
  .board-row { --cell: min(26px, 100cqw / 22); grid-template-columns: calc(11 * var(--cell)) calc(10 * var(--cell)); }
  .board-row > :first-child { grid-column: 1 / -1; margin-bottom: calc(var(--cell) * .2); }
  .board-row + .board-row { margin-top: calc(var(--cell) * .6); }
  .lounge { aspect-ratio: 1 / 1.16; }
  .lounge-room { width: 70%; }
  .lounge-shoes { width: 52%; }
}

.case-close { padding-block: clamp(56px, 10vh, 120px); }
.case-close p { max-width: 30em; color: var(--white); font: 700 clamp(1.45rem, 2.7vw, 2.3rem)/1.25 var(--display); letter-spacing: -0.02em; text-wrap: pretty; }
.case-close em, .read-quote em { font-style: normal; color: var(--amber); }
/* words light up as the reading line passes (work.js wraps them: --p on the paragraph, --i on each word) */
.read .w { opacity: calc(.2 + .8 * clamp(0, (var(--p, 0) - var(--i, 0)) * var(--k, 14), 1)); transition: opacity .2s linear; }

/* the next show: a card that's plainly a link (his ask, 21 Oct): the photo the same size on every page, the name a size
   down, and Open project with the enter key, as on the monitor. The whole card is the link. */
.case-next { padding-block: clamp(48px, 8vh, 100px) clamp(24px, 4vh, 40px); }
.case-next a {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 30vw, 360px); grid-template-rows: auto 1fr auto;
  grid-template-areas: "label pic" "name pic" "go pic"; gap: 14px clamp(24px, 4vw, 56px);
  padding: clamp(16px, 2vw, 22px); border: 1px solid var(--line); border-radius: 12px; background: #0A0A0A; text-decoration: none;
  transition: border-color .25s, background-color .25s;
}
.case-next a:hover { border-color: #4A4A4A; background: #101010; }
.next-label { grid-area: label; font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
.next-name { grid-area: name; align-self: end; min-width: 0; font: 800 clamp(1.9rem, 3.6vw, 3.4rem)/.95 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
.next-go {
  grid-area: go; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px 12px; border-radius: 8px;
  background: var(--white); color: var(--black); font: 800 1rem/1 var(--display); transition: background-color .2s;
}
.next-go kbd { padding: 3px 6px 2px; border: 1.5px solid currentColor; border-radius: 4px; font: 700 .75rem/1 var(--mono); }
.case-next a:hover .next-go { background: var(--amber); }
.case-next img { grid-area: pic; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.case-next a:hover img { transform: scale(1.03); }

/* chapters can swap sides, hold one photo, or overlap two landscape ones */
.chapter.flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.chapter.flip .ch-text { order: 2; }
.layer.solo img { box-shadow: 0 24px 48px rgba(0, 0, 0, .6); }
.collage.landscape { aspect-ratio: 1 / .8; }
.collage.landscape .c1 { width: 84%; }
.collage.landscape .c2 { width: 58%; }

/* a looser photo wall with captions (Pop-ups' "more pop-ups") */
.gallery.more { display: block; columns: 3 240px; column-gap: clamp(16px, 2.5vw, 32px); }
.gallery-title { column-span: all; margin-bottom: clamp(20px, 3vh, 32px); font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -0.02em; }
.gallery.more figure { margin: 0 0 clamp(16px, 2.5vw, 32px); break-inside: avoid; }
.gallery figcaption { margin-top: 8px; font: 600 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--smoke); }

/* Pop-ups' header (21 Oct, his ask: an animated header like the other project pages). The title is the book's paper:
   its letters lie flat on a navy board and stand up one after another as the page opens, with the cards' springy
   overshoot, and their shadow lands on the board. The tab folds them down and pops them up again (work.js splits the
   letters; without it the word stands up whole). */
.pp-open {
  position: relative; overflow: hidden; border-bottom: 1px solid #1A1A1A;
  background: radial-gradient(60% 55% at 30% 80%, rgba(242, 165, 65, .08), transparent 70%), var(--black);
}
.pp-open-inner { position: relative; padding-block: clamp(120px, 18vh, 190px) clamp(32px, 6vh, 64px); }
.pp-word {
  position: relative; isolation: isolate; width: fit-content; margin-top: clamp(4px, 1.5vh, 16px); padding: 0 .12em .4em;
  font-size: clamp(3.6rem, 17vw, 10.5rem); perspective: 6em; perspective-origin: 50% -30%;
}
/* the board, seen from above at an angle: a far edge, a near edge and its thickness */
.pp-word::before {
  content: ""; position: absolute; z-index: -1; left: -.1em; right: -.1em; top: .68em; height: .56em;
  background: linear-gradient(180deg, transparent 84%, #131B2A 84%), linear-gradient(180deg, #1A2436, var(--navy) 50%, #33456A);
  clip-path: polygon(6% 0, 94% 0, 100% 84%, 100% 100%, 0 100%, 0 84%);
}
/* the letters' shadow on the board, there once they stand */
.pp-word::after {
  content: ""; position: absolute; z-index: -1; left: .1em; right: .1em; top: .76em; height: .2em;
  background: radial-gradient(50% 100% at 50% 0, rgba(0, 0, 0, .6), transparent 75%); opacity: 0; transition: opacity .5s ease .5s;
}
.pp-word.up::after { opacity: 1; }
.pp-title.giant {
  font-size: 1em; line-height: .86; letter-spacing: -0.035em; padding-bottom: 0; color: #F3EFE6; text-shadow: 0 .022em 0 #C9C1B0;
  perspective: 6em; perspective-origin: 50% -30%; transform-origin: 50% .79em; animation: pp-stand .7s cubic-bezier(.3, 1.6, .5, 1) 1.5s both;
}
.pp-title.js { animation: none; }
@keyframes pp-stand { from { transform: rotateX(86deg); } }
.pp-l { display: inline-block; transform-origin: 50% .79em; transform: rotateX(86deg); transition: transform .75s cubic-bezier(.3, 1.6, .5, 1) calc(.15s + var(--i, 0) * 75ms); }
.pp-l.dot { color: var(--amber); text-shadow: 0 .022em 0 #8A5A1C; }
.pp-word.up .pp-l { transform: none; }
.pp-word.fold .pp-l { transform: rotateX(86deg); transition: transform .3s cubic-bezier(.5, 0, .8, .4) calc((7 - var(--i, 0)) * 40ms); }
/* the pull tab: paper sticking out from under the board */
.pp-tab {
  position: absolute; right: 8%; top: calc(100% - .06em); padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 clamp(1rem, 1.5vw, 1.3rem)/1 var(--hand); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)); transition: translate .3s cubic-bezier(.3, 1.5, .5, 1);
}
.pp-tab[hidden] { display: none; }
.pp-tab span {
  display: block; padding: .9em .9em .45em; color: #151515; transform: rotate(-3deg);
  background: linear-gradient(180deg, #D9D2C2, #F3EFE6 30%), #F3EFE6; border-radius: 0 0 .5em .5em;
}
.pp-tab.hint { animation: pp-nudge .9s ease 2; }
.pp-tab.pulled { animation: pp-pull .55s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes pp-nudge { 30% { translate: 0 .35em; } 60% { translate: 0 -.05em; } }
@keyframes pp-pull { 35% { translate: 0 .8em; } }
@media (hover: hover) { .pp-tab:hover { translate: 0 .2em; } }
.pp-word + .act-sub { margin-top: clamp(56px, 4.4vw, 68px); }  /* clear of the tab hanging under the board */
.pp-open + .popbook { padding-top: clamp(40px, 7vh, 80px); }

/* Pop-ups' moment (20 Oct): a pop-up book. It lies open on the table, tilted away from you; each spread's photos are
   cards hinged on the paper that stand up to face you, and fold flat before the page turns (work.js). Sizes inside are
   in cqw, so the book is the same at every width. */
.popbook { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(8px, 2vh, 24px) clamp(48px, 8vh, 96px); }
.pb-size { container-type: inline-size; min-width: 0; }  /* the cqw sizes; kept off the stage, where Safari drops the perspective */
.pb-stage { perspective: 1500px; perspective-origin: 50% -20%; padding-top: 4%; }
.pb-book {
  --paper: #F3EFE6; --stand: -46deg;
  position: relative; aspect-ratio: 2 / 1.3; transform-style: preserve-3d; transform: rotateX(52deg); transform-origin: 50% 100%;
  transition: translate 1s cubic-bezier(.55, .05, .3, 1); cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none;  /* no grey flash or zoom on a tap (iPhone) */
}
.pb-book > * { position: absolute; }
.pb-board { top: -2.4%; bottom: -2.4%; width: 51.2%; background: var(--navy); box-shadow: 0 3cqw 5cqw rgba(0, 0, 0, .75); }
.pb-board.l { left: -1.2%; border-radius: 1cqw 0 0 1cqw; }
.pb-board.r { right: -1.2%; border-radius: 0 1cqw 1cqw 0; }
/* every layer sits a clear 3px or more above the one under it (his note, 21 Oct: on an iPhone the navy board and the cards
   flickered through the paper at 1px apart). Board 0, paper 3px, the spread 6px (so when Safari flattens a spread while
   it fades, its words still lie on top of the paper), cards 8px, the turning page 12px, the cover 14px. */
.pb-page { top: 0; bottom: 0; width: 50%; transform: translateZ(3px); box-shadow: 0 .3cqw 0 #DCD6C9, 0 .6cqw 0 #CFC8B9; }
.pb-page.l { left: 0; background: linear-gradient(90deg, #E7E1D4, var(--paper) 14%, var(--paper) 82%, #D9D2C2); border-radius: .5cqw 0 0 .5cqw; }
.pb-page.r { right: 0; background: linear-gradient(90deg, #D9D2C2, var(--paper) 18%, var(--paper) 86%, #E7E1D4); border-radius: 0 .5cqw .5cqw 0; }
.pb-spread { inset: 0; transform-style: preserve-3d; transform: translateZ(6px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.pb-spread.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.pb-print {
  position: absolute; left: 5%; bottom: 6%; width: 40%; margin: 0; transform: translateZ(1px);
  color: var(--navy); font: 800 3.4cqw/1 var(--display); letter-spacing: -0.03em; text-wrap: balance;
}
.pb-print span { display: block; margin-bottom: .5cqw; color: #8A6A3A; font: 700 1.5cqw/1 var(--display); letter-spacing: 0; }
.pb-folio { position: absolute; bottom: 2.6%; transform: translateZ(1px); color: #9C9282; font: 600 max(9px, 1cqw)/1 var(--mono); }
.pb-folio.l { left: 3%; }
.pb-folio.r { right: 3%; }
/* a card stands on its hinge (its bottom edge, at --d down the spread) */
.pb-card {
  position: absolute; bottom: calc(100% - var(--d)); left: var(--x); width: var(--w); margin: 0; padding: .7cqw; border-radius: .4cqw; background: #fff;
  transform-origin: 50% 100%; transform: translateZ(2px) rotateX(0deg); opacity: 0;
  box-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .25);
  transition: transform .35s cubic-bezier(.5, 0, .8, .4), opacity .2s ease .15s;
}
.pb-card img { display: block; width: 100%; height: auto; border-radius: .2cqw; }
.pb-spread.up .pb-card { transform: translateZ(2px) rotateX(var(--stand)); opacity: 1; transition: transform .75s cubic-bezier(.3, 1.5, .55, 1), opacity .12s, scale .4s cubic-bezier(.2, .8, .2, 1); }
.pb-spread.up .pb-front { transition-delay: .14s, .14s, 0s; }
@media (hover: hover) { .pb-spread.up .pb-card:hover { scale: 1.16; box-shadow: 0 1.5cqw 3cqw rgba(0, 0, 0, .35); } }
/* their shadows on the paper, cast toward you */
.pb-shadow {
  position: absolute; top: var(--d); left: var(--x); width: var(--w); height: 9%; transform: translateZ(.5px); opacity: 0;
  background: radial-gradient(60% 100% at 50% 0, rgba(60, 45, 20, .35), transparent 70%); transition: opacity .4s;
}
.pb-spread.up .pb-shadow { opacity: 1; }
.pb-back, .pb-sh-back { --d: var(--bd); --x: var(--bx); --w: var(--bw); }
.pb-front, .pb-sh-front { --d: var(--fd); --x: var(--fx); --w: var(--fw); }
.s-amex { --bd: 50%; --bx: 18%; --bw: 58%; --fd: 84%; --fx: 54%; --fw: 36%; }
.s-kitkat { --bd: 50%; --bx: 17%; --bw: 54%; --fd: 86%; --fx: 55%; --fw: 36%; }
.s-miller { --bd: 47%; --bx: 25%; --bw: 28%; --fd: 84%; --fx: 58%; --fw: 25%; }
/* the page that turns: plain paper, swinging over the spine */
.pb-leaf {
  left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; visibility: hidden;
  background: linear-gradient(90deg, #D9D2C2, var(--paper) 18%, var(--paper) 86%, #E7E1D4); border-radius: 0 .5cqw .5cqw 0;
}
.pb-leaf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 60%); opacity: 0; }
.pb-leaf.next, .pb-leaf.prev { visibility: visible; }
.pb-leaf.next { animation: leaf-next .8s cubic-bezier(.45, .05, .35, 1) both; }
.pb-leaf.prev { animation: leaf-next .8s cubic-bezier(.45, .05, .35, 1) reverse both; }
.pb-leaf.next::after, .pb-leaf.prev::after { animation: leaf-shade .8s ease both; }
@keyframes leaf-next { from { transform: translateZ(12px) rotateY(0deg); } to { transform: translateZ(12px) rotateY(-180deg); } }
@keyframes leaf-shade { 50% { opacity: 1; } }
/* the cover: shut until the book reaches you, then it swings open */
.pb-cover {
  left: 50%; top: -2.4%; width: 51.2%; height: 104.8%; transform-origin: 0 50%; transform-style: preserve-3d;
  transform: translateZ(14px) rotateY(0deg); transition: transform 1.1s cubic-bezier(.55, .05, .3, 1);
}
.pb-cover-front, .pb-cover-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 1cqw 1cqw 0; }
.pb-cover-front {
  display: grid; place-content: center; justify-items: center; gap: 1.2cqw; background: var(--navy);
  box-shadow: inset 0 0 0 .5cqw rgba(242, 165, 65, .35), inset 0 0 0 .9cqw var(--navy), inset 0 0 0 1.1cqw rgba(242, 165, 65, .25);
  transition: opacity 0s .55s;
}
.pb-cover-front b { color: var(--amber); font: 800 7cqw/1 var(--display); letter-spacing: -0.04em; text-shadow: 0 .2cqw 0 #8A5A1C; }
.pb-cover-front small { color: #C9D2E3; font: 700 1.3cqw/1 var(--display); }
.pb-cover-back { background: linear-gradient(90deg, #E7E1D4, var(--paper) 14%, var(--paper) 82%, #D9D2C2); transform: rotateY(180deg); opacity: 0; transition: opacity 0s .55s; }
.pb-book.open .pb-cover { transform: translateZ(14px) rotateY(-180deg); }
.pb-book.open .pb-cover-front { opacity: 0; }
.pb-book.open .pb-cover-back { opacity: 1; }
.pb-cover[hidden] { display: none; }
/* shut: the book sits to the right with only its cover showing */
.pb-book.shut { translate: -25% 0; }
.pb-book .pb-board.l, .pb-book .pb-page.l, .pb-book .pb-print, .pb-book .pb-folio.l { transition: opacity 0s .6s; }
.pb-book.shut .pb-board.l, .pb-book.shut .pb-page.l, .pb-book.shut .pb-print, .pb-book.shut .pb-folio.l { opacity: 0; }
/* without script: the first spread, standing, and no cover */
.pb-book:not(.js) .pb-cover { display: none; }
.pb-book:not(.js) .pb-spread.on .pb-card { transform: translateZ(2px) rotateX(var(--stand)); opacity: 1; }

.pb-text { display: grid; gap: 22px; align-content: center; }
.pb-count { color: var(--smoke); font: 600 .78rem/1 var(--mono); letter-spacing: .08em; }
.pb-ch h2 { margin-top: 6px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.03em; }
.pb-brand { color: var(--amber); font: 700 1rem/1.2 var(--display); }
.pb-ch > p:last-child { margin-top: 14px; color: #D5D9E0; font-size: 1.05rem; }
.pb-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pb-prev { padding: 0; border: 0; background: none; color: var(--white); font: 600 .95rem/1 var(--display); cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.pb-prev:disabled { color: #4A4F57; cursor: default; text-decoration: none; }

/* Sport Activations' moment: the arena's big screen and scoreboard, three game weeks as you scroll (work.js) */
.arena { height: 300svh; }
.arena-stage { position: sticky; top: 0; height: 100svh; display: grid; place-content: center; justify-items: center; gap: 18px; }
.jumbotron {
  width: min(100%, 1000px, calc((100svh - 260px) * 16 / 9)); padding: 10px; border: 1px solid #222; border-radius: 10px;
  background: #0B0B0B; box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
}
.jt-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.jt-shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity .35s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.jt-shot.on { opacity: 1; transform: none; }
.jt-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(0, 0, 0, .3) 30%, transparent 32%) 0 0 / 4px 4px; }
/* the week's fixtures under the big screen: a played game goes Final, tonight's is Live (work.js) */
.fixtures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.fixtures li {
  display: grid; grid-template-areas: "day state" "sport sport"; gap: 8px 10px; padding: 10px 12px 12px; border: 1px solid #1B2436;
  border-radius: 4px; background: #0D1320; transition: background-color .3s, border-color .3s, opacity .3s;
}
.fx-day, .fx-state { font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8C97AD; }
.fx-day { grid-area: day; }
.fx-state { grid-area: state; justify-self: end; white-space: nowrap; }
.fx-sport { grid-area: sport; min-width: 0; color: #C9D3E6; font: 800 clamp(.92rem, 1.6vw, 1.25rem)/1 var(--display); letter-spacing: -0.01em; }
.fixtures li.live { border-color: var(--amber); background: var(--navy); }
.fixtures li.live .fx-sport { color: var(--white); }
.fixtures li.live .fx-state { color: var(--amber); }
.fixtures li.live .fx-state::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--amber);
  vertical-align: 1px; animation: live 1.2s ease-in-out infinite;
}
.fixtures li.done { opacity: .5; }
@keyframes live { 50% { opacity: .2; } }
.arena-note { max-width: 40em; padding-inline: 8px; color: var(--smoke); font-size: 1rem; text-align: center; }

/* Pop-ups' "more pop-ups": one full wall, no gaps; each photo drifts a little inside its frame */
.bento { padding-block: clamp(48px, 9vh, 110px); }
.bento-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(200px, 22vw, 330px)); gap: 10px; }
.tile { position: relative; margin: 0; overflow: hidden; border-radius: 6px; background: var(--panel); }
.tile img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; border-radius: 0; transition: scale .6s cubic-bezier(.2, .8, .2, 1); }
.tile:hover img { scale: 1.04; }
/* hover a photo and it comes up toward you (his ask, 20 Oct); a mouse only, phones keep still */
@media (hover: hover) {
  .layer, .tile { transition: scale .45s cubic-bezier(.2, .8, .2, 1); }
  .layer:hover, .tile:hover { scale: 1.06; z-index: 4; }
  .tile:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .75); }
  .collage .layer:hover img, .layer.solo:hover img { box-shadow: 0 30px 60px rgba(0, 0, 0, .8); }
}
.tile figcaption {
  position: absolute; inset: auto 0 0; margin: 0; padding: 28px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  color: var(--white); font: 600 .7rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.b1 { grid-column: 1 / 4; }
.b2 { grid-column: 4; grid-row: 1 / 3; }

/* Sport: the line over the big screen */
.arena-kicker { font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }

/* ---------- Sports: the arena before the doors open (his ask, 21 Oct) ---------- */
/* the house lights sweep the bowl; the far stands flash with phones; the centre-hung board drops in on its cables,
   powers on, and runs his line, hockey one week, basketball the next, baseball right after (work.js) */
.sp-open {
  position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid #141A26;
  background: radial-gradient(110% 75% at 62% 0%, #1F2C47, #0C1220 52%, #000 100%);
}
.sp-beams, .sp-flashes { position: absolute; pointer-events: none; }
.sp-beams { inset: 0; }
.sp-beams i {
  position: absolute; top: -8%; width: 30vw; height: 118%; transform-origin: 50% 0; mix-blend-mode: screen;
  background: linear-gradient(rgba(214, 226, 255, .2), rgba(214, 226, 255, .05) 55%, transparent 85%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  animation: sweep 9s ease-in-out infinite alternate, house 1.4s ease .1s both;
}
.sp-beams i:nth-child(1) { left: -2%; --a: -26deg; --b: 8deg; animation-duration: 8s, 1.4s; }
.sp-beams i:nth-child(2) { left: 22%; --a: 18deg; --b: -16deg; animation-duration: 10s, 1.4s; animation-delay: -3s, .3s; }
.sp-beams i:nth-child(3) {
  left: 46%; --a: -14deg; --b: 22deg; animation-duration: 7s, 1.4s; animation-delay: -5s, .5s;
  background: linear-gradient(rgba(242, 165, 65, .2), rgba(242, 165, 65, .05) 55%, transparent 85%);
}
.sp-beams i:nth-child(4) { left: 70%; --a: 24deg; --b: -10deg; animation-duration: 11s, 1.4s; animation-delay: -1s, .7s; }
@keyframes sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
@keyframes house { from { opacity: 0; } }
.sp-flashes { inset: 26% 0 auto; height: 20%; }
.sp-flashes i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .6);
  opacity: 0; animation: flash 4.6s ease-out infinite;
}
.sp-flashes i:nth-child(1) { left: 6%; top: 30%; animation-delay: 1.1s; }
.sp-flashes i:nth-child(2) { left: 17%; top: 70%; animation-delay: 2.9s; }
.sp-flashes i:nth-child(3) { left: 29%; top: 12%; animation-delay: 1.8s; animation-duration: 5.2s; }
.sp-flashes i:nth-child(4) { left: 38%; top: 55%; animation-delay: 3.6s; }
.sp-flashes i:nth-child(5) { left: 47%; top: 22%; animation-delay: .6s; animation-duration: 3.9s; }
.sp-flashes i:nth-child(6) { left: 56%; top: 80%; animation-delay: 2.3s; }
.sp-flashes i:nth-child(7) { left: 64%; top: 40%; animation-delay: 4.1s; animation-duration: 5.6s; }
.sp-flashes i:nth-child(8) { left: 76%; top: 64%; animation-delay: 1.5s; }
.sp-flashes i:nth-child(9) { left: 86%; top: 18%; animation-delay: 3.1s; animation-duration: 4.2s; }
.sp-flashes i:nth-child(10) { left: 94%; top: 52%; animation-delay: .9s; }
@keyframes flash { 0%, 9%, 100% { opacity: 0; } 2% { opacity: .9; } }
/* the board hangs on two cables at the top right of the opening (above the title on a phone) */
.sp-hang {
  --drop: clamp(84px, 13vh, 128px);
  position: absolute; top: 0; right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); z-index: 1;
  width: clamp(260px, 25vw, 380px); padding-top: var(--drop); transform-origin: 50% 0;
  animation: board-drop 1.25s cubic-bezier(.3, 1.3, .5, 1) .15s both, board-sway 7s ease-in-out 1.4s infinite alternate;
}
.sp-hang::before, .sp-hang::after { content: ""; position: absolute; top: 0; width: 2px; height: var(--drop); background: linear-gradient(#05070B, #4A5468); }
.sp-hang::before { left: 24%; }
.sp-hang::after { right: 24%; }
@keyframes board-drop { from { transform: translateY(-110%); } }
@keyframes board-sway { from { rotate: -.5deg; } to { rotate: .5deg; } }
.sp-board {
  container-type: inline-size; display: grid; gap: 6px; padding: 7px; border-radius: 6px; background: linear-gradient(#1C2029, #0A0C11);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.sp-ribbon { display: grid; place-items: center; height: 24px; border-radius: 3px; background: #040507; overflow: hidden; }
.sp-faces { display: grid; grid-template-columns: 11% minmax(0, 1fr) 11%; gap: 4px; }
.sp-wing { border-radius: 2px; background: radial-gradient(rgba(242, 165, 65, .14) 30%, transparent 34%) 0 0 / 3px 3px, linear-gradient(90deg, #06070A, #12151C); }  /* the side faces, turned away */
.sp-wing:first-child { clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 91%); }
.sp-wing:last-child { clip-path: polygon(0 0, 100% 9%, 100% 91%, 0 100%); }
.sp-screen {
  position: relative; display: grid; align-content: center; gap: clamp(6px, 1vw, 12px); aspect-ratio: 16 / 9; padding: 6% 8%;
  overflow: hidden; border-radius: 3px; background: #030405;
}
.sp-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .07), transparent 40%); }
/* LED lettering, made of dots */
.sp-led {
  font-family: var(--mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  -webkit-mask: radial-gradient(#000 60%, transparent 64%) 0 0 / 3px 3px; mask: radial-gradient(#000 60%, transparent 64%) 0 0 / 3px 3px;
}
.sp-sport { color: var(--white); font-size: 8.6cqw; line-height: 1; text-shadow: 0 0 12px rgba(255, 255, 255, .55); }
.sp-read { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sp-per { color: #B9C4DA; font-size: max(9px, 3.8cqw); }  /* the board's lettering is sized to the board */
.sp-clock { color: var(--amber); font-size: 8.6cqw; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(242, 165, 65, .7); }
.sp-venue { color: var(--amber); font-size: max(9px, 2.9cqw); letter-spacing: .16em; text-shadow: 0 0 8px rgba(242, 165, 65, .6); }
.sp-pips { display: flex; gap: 8px; }
.sp-pips i { width: 8px; height: 8px; border-radius: 50%; background: #262A33; transition: background-color .2s, box-shadow .2s; }
.sp-pips i.on { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
/* dark until the board has landed, then it powers on; each change of sport flickers through (classes from work.js) */
.sp-board.js:not(.on) .sp-led, .sp-board.js:not(.on) .sp-pips { opacity: 0; }
.sp-board.on .sp-screen { animation: power .5s steps(4) both; }
.sp-board.swap .sp-screen .sp-led, .sp-board.swap .sp-venue { animation: led-swap .34s steps(3) both; }
@keyframes power { from { filter: brightness(2.2); } 50% { filter: brightness(.4); } }
@keyframes led-swap { from { opacity: .1; } 50% { opacity: .7; } 70% { opacity: .25; } }
.sp-open-inner { position: relative; padding-block: clamp(120px, 18vh, 190px) clamp(40px, 7vh, 72px); }
.sp-open .giant { font-size: clamp(2.9rem, 7.4vw, 6.6rem); line-height: .94; letter-spacing: -0.032em; }  /* no letters touching */

/* the page's moment (his ask, 21 Oct): his "one-button" start. A wall of screens and a desk with one big button: it
   brings the fan zone up in order, power, screens, sound, the games; pressed again, it shuts down (work.js) */
.ob-chapter { align-items: center; }
.ob { display: grid; gap: 10px; padding: clamp(10px, 1.4vw, 16px); border: 1px solid #1E1E1E; border-radius: 12px; background: #0A0A0A; box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }
.ob-label { color: var(--smoke); font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.ob-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-screen { position: relative; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; border: 1px solid #1C1C1C; border-radius: 4px; background: #020304; }
.ob-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(155deg, rgba(255, 255, 255, .07), transparent 38%); }
/* off, the picture is a thin line; on, it opens to the full screen */
.ob-screen > * { opacity: 0; transform: scaleY(.008); transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .1s; }
.ob-screen.on > * { opacity: 1; transform: none; }
.ob-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ob-led > span, .ob-meter > span { position: absolute; inset: 0; display: grid; place-items: center; }
.ob-led > span {
  padding: 8%; color: var(--amber); font: 700 clamp(.95rem, 1.7vw, 1.45rem)/1.15 var(--mono); letter-spacing: .06em; text-align: center; text-transform: uppercase;
  text-shadow: 0 0 10px rgba(242, 165, 65, .7);
  -webkit-mask: radial-gradient(#000 60%, transparent 64%) 0 0 / 3px 3px; mask: radial-gradient(#000 60%, transparent 64%) 0 0 / 3px 3px;
}
.ob-screen.on.ob-led > span { animation: led-blink 1.6s steps(2) infinite; }
@keyframes led-blink { 50% { opacity: .55; } }
.ob-meter > span { display: flex; align-items: flex-end; justify-content: center; gap: 6%; padding: 14% 12%; }
.ob-meter i { flex: 1; height: 100%; border-radius: 1px; background: linear-gradient(0deg, #4E6BA8 0 64%, var(--amber) 64%); transform: scaleY(.08); transform-origin: 50% 100%; }
.ob-screen.on.ob-meter i { animation: level .5s ease-in-out infinite alternate; }
.ob-meter i:nth-child(2n) { animation-duration: .38s; }
.ob-meter i:nth-child(3n) { animation-duration: .62s; animation-delay: -.2s; }
.ob-meter i:nth-child(5n) { animation-duration: .44s; animation-delay: -.1s; }
@keyframes level { from { transform: scaleY(.2); } to { transform: scaleY(.95); } }
.ob-desk {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "checks btn" "status btn"; align-items: center; gap: 10px 18px;
  padding: 14px 16px; border: 1px solid #1E1E1E; border-radius: 8px; background: #111;
}
.ob-checks { grid-area: checks; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; color: #6B7280; font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ob-checks li { display: flex; align-items: center; gap: 7px; transition: color .2s; }
.ob-checks li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2A2A2A; transition: background-color .2s, box-shadow .2s; }
.ob-checks li.on { color: #E5E7EB; }
.ob-checks li.on::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ob-status { grid-area: status; min-height: 1.3em; color: var(--smoke); font: 600 .78rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ob.ready .ob-status { color: var(--amber); }
/* the button: a big round one on the desk, pressed down when you press it */
.ob-btn {
  grid-area: btn; position: relative; width: clamp(84px, 8.5vw, 112px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 32%, #3E3E3E, #161616 72%); color: var(--white); font: 800 1.05rem/1 var(--display);
  box-shadow: 0 0 0 4px #1A1A1A, 0 0 0 6px #343434, 0 9px 0 #050505, 0 18px 30px rgba(0, 0, 0, .6);
  transition: transform .1s, box-shadow .1s, background .25s, color .25s;
}
.ob-btn:active { transform: translateY(6px); box-shadow: 0 0 0 4px #1A1A1A, 0 0 0 6px #343434, 0 3px 0 #050505, 0 8px 16px rgba(0, 0, 0, .6); }
.ob-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; }
.ob:not(.on) .ob-btn::after { animation: call-btn 1.8s ease-out infinite; }  /* press me, until it's running */
@keyframes call-btn { from { box-shadow: 0 0 0 0 rgba(242, 165, 65, .55); } to { box-shadow: 0 0 0 18px rgba(242, 165, 65, 0); } }
.ob.on .ob-btn {
  background: radial-gradient(circle at 50% 32%, #FFD493, var(--amber) 58%, #B8741C); color: #1A1206;
  box-shadow: 0 0 0 4px #1A1A1A, 0 0 0 6px #6B4A1C, 0 9px 0 #3A2608, 0 0 34px rgba(242, 165, 65, .55);
}
@media (hover: hover) { .ob-btn:hover { color: var(--amber); } .ob.on .ob-btn:hover { color: #000; } }

/* ---------- Dyson: industrial, precise, with air ---------- */
.dy-open { position: relative; min-height: 88svh; display: grid; align-items: end; overflow: hidden; border-bottom: 1px solid #1A1A1A; }
.airflow { position: absolute; inset: 0; width: 100%; height: 100%; }
.dy-open-inner { position: relative; padding-block: clamp(120px, 18vh, 190px) clamp(28px, 4vh, 44px); pointer-events: none; }
.dy-open-inner a { pointer-events: auto; }
/* the title a size down, and less tightly packed, so no two letters touch (his note, 20 Oct) */
.dy-open .giant { font-size: clamp(2.9rem, 8.2vw, 7.2rem); line-height: .94; letter-spacing: -0.032em; }
.dyson .case-brief { padding-block: clamp(36px, 6vh, 64px) clamp(16px, 3vh, 32px); }  /* closer to the title and to Stop One (his note) */
.dyson .case-question em { font-style: normal; color: var(--amber); }
/* a stop: the heading on one side, his words on the other */
.dy-stop { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(48px, 9vh, 104px) 0; }
.dy-stop h2 { font-size: clamp(2.1rem, 4vw, 3.6rem); letter-spacing: -0.035em; }
.dy-stop .stop-k { display: block; margin-bottom: 14px; color: var(--smoke); font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dy-stop .stop-t { display: block; margin-top: 10px; color: var(--smoke); font-size: .5em; letter-spacing: -0.02em; }
.dy-stop-copy p { max-width: 36em; color: #D5D9E0; font-size: clamp(1.08rem, 1.3vw, 1.2rem); }
.dy-stop-copy p + p { margin-top: 1.1em; }
/* the build in four stages: four photos side by side like panels. Pinned while scrolling opens one at a time to a full
   3:4 photo and closes the others to slivers that keep their stage number (work.js sets --l, --r, --x and --act per
   panel). Without the script: four equal panels and every caption listed. */
.stages { height: 280svh; margin-top: -6svh; }  /* the pinned frame starts closer to the words above it */
.stages-pin {
  position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  grid-template-areas: "caps frame"; gap: clamp(28px, 5vw, 80px); align-items: center; pointer-events: none;
}
.stage-caps, .stage-box { pointer-events: auto; }
.stage-caps { grid-area: caps; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.stage-caps li { min-width: 0; }
.cap-n { display: block; color: var(--amber); font: 600 .78rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.stage-caps b { display: block; margin-top: 12px; font: 800 clamp(2.2rem, 4.6vw, 4.2rem)/.95 var(--display); letter-spacing: -0.04em; }
.cap-d { display: block; max-width: 17em; margin-top: 16px; color: #D5D9E0; font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.stages.js .stage-caps li { grid-area: 1 / 1; opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.stages.js .stage-caps li.on { opacity: 1; transform: none; }
.stage-box {  /* printer's crop marks at the corners, like the gallery */
  grid-area: frame; justify-self: end; width: min(100%, calc(min(72svh, 680px) * 1.17 + 28px)); padding: 14px;
  background:
    linear-gradient(#4A4F56, #4A4F56) 0 14px / 9px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) 14px 0 / 1px 9px no-repeat,
    linear-gradient(#4A4F56, #4A4F56) 100% 14px / 9px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) calc(100% - 14px) 0 / 1px 9px no-repeat,
    linear-gradient(#4A4F56, #4A4F56) 0 calc(100% - 14px) / 9px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) 14px 100% / 1px 9px no-repeat,
    linear-gradient(#4A4F56, #4A4F56) 100% calc(100% - 14px) / 9px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) calc(100% - 14px) 100% / 1px 9px no-repeat;
}
.stage-frame { --iw: .64; position: relative; aspect-ratio: 1.17 / 1; background: var(--panel); }  /* --iw: the open panel's share of the width (work.js reads it) */
.stage { position: absolute; inset: 0; margin: 0; overflow: hidden; clip-path: inset(0 var(--r) 0 var(--l)); }
.stage img { position: absolute; top: 0; left: 0; width: calc(var(--iw) * 100%); height: 100%; object-fit: cover; transform: translateX(var(--x)); }
.stage::after { content: ""; position: absolute; inset: 0; background: #000; opacity: calc((1 - var(--act, 1)) * .5); pointer-events: none; }
.stage-tag {
  position: absolute; left: 0; bottom: 14px; z-index: 1; writing-mode: vertical-rl; transform: translateX(calc(var(--l) + 9px)) rotate(180deg);
  color: var(--white); font: 600 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8); opacity: calc(1 - var(--act, 0));
}
/* without the script: four equal panels, each photo centred in its quarter */
.stage:nth-child(1) { --l: 0%; --r: 75%; --x: -30.5%; }
.stage:nth-child(2) { --l: 25%; --r: 50%; --x: 8.6%; }
.stage:nth-child(3) { --l: 50%; --r: 25%; --x: 47.7%; }
.stage:nth-child(4) { --l: 75%; --r: 0%; --x: 86.7%; }
.stage-mark {  /* an amber line under the open panel */
  position: absolute; left: 0; bottom: -9px; width: 100%; height: 2px; background: var(--amber);
  transform-origin: 0 50%; transform: translateX(var(--mx, 0)) scaleX(var(--mw, .25));
}
/* the route between the stops */
.route { display: grid; justify-items: center; gap: 8px; padding-block: clamp(40px, 8vh, 90px); }
.route-map { width: min(100%, 360px); height: auto; overflow: visible; }
.route-land { fill: #141A24; stroke: #2E3A4E; stroke-width: 1; }
.route-line { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: var(--len, 100); stroke-dashoffset: calc(var(--len, 100) * (1 - var(--r, 0))); }
.route-stop { fill: var(--white); }
.route-label { fill: var(--smoke); font: 600 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.route-note { font: 600 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--smoke); }
/* the finished stand, printed: each photo with crop marks at its corners */
.dy-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2.4vw, 36px); padding-block: clamp(48px, 9vh, 110px) clamp(24px, 5vh, 60px); }
.cm {
  margin: 0; padding: 12px;
  background:
    linear-gradient(#4A4F56, #4A4F56) 0 12px / 8px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) 12px 0 / 1px 8px no-repeat,
    linear-gradient(#4A4F56, #4A4F56) 100% 12px / 8px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) calc(100% - 12px) 0 / 1px 8px no-repeat,
    linear-gradient(#4A4F56, #4A4F56) 0 calc(100% - 12px) / 8px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) 12px 100% / 1px 8px no-repeat,
    linear-gradient(#4A4F56, #4A4F56) 100% calc(100% - 12px) / 8px 1px no-repeat, linear-gradient(#4A4F56, #4A4F56) calc(100% - 12px) 100% / 1px 8px no-repeat;
}
.cm img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.dy-gallery .cm:nth-child(2n) { margin-top: clamp(30px, 8vh, 90px); }

/* ---------- Rogers Cup: a hard court, a Fan Hub made of crates, a wheel to spin, ten summers ---------- */
.rc-open {
  position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden;
  background: radial-gradient(120% 80% at 55% 30%, #31446A, var(--navy) 50%, #121A29);
}
.court-wrap { position: absolute; inset: 0; }
/* the lines paint themselves in, one after another (each is one unit long: pathLength="1") */
.court { position: absolute; inset: 4% 3% 26%; width: 94%; height: 70%; fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 7; }  /* a texture under the title, not a drawing over it */
.court > * { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: paint .9s cubic-bezier(.6, .1, .3, 1) forwards; }
.court > :nth-child(2) { animation-delay: .25s; } .court > :nth-child(3) { animation-delay: .35s; }
.court > :nth-child(4) { animation-delay: .5s; } .court > :nth-child(5) { animation-delay: .6s; }
.court > :nth-child(6) { animation-delay: .75s; } .court > :nth-child(7), .court > :nth-child(8) { animation-delay: .85s; }
.court .net { stroke: rgba(255, 255, 255, .5); stroke-width: 12; animation-delay: 1s; }
@keyframes paint { to { stroke-dashoffset: 0; } }
.court-v { display: none; }
@media (max-aspect-ratio: 1 / 1) { .court-h { display: none; } .court-v { display: block; inset: 3% 8% 34%; width: 84%; height: 63%; } }
/* the ball rallies across as you scroll (--bx, --by, --bs from work.js) */
.ball { position: absolute; left: 0; top: 0; width: clamp(16px, 1.6vw, 24px); aspect-ratio: 1; transform: translate(var(--bx, -100px), var(--by, -100px)); }
.ball i {
  display: block; width: 100%; height: 100%; border-radius: 50%; transform: scale(var(--bs, 1));
  background: radial-gradient(circle at 35% 35%, #FFE2A8, var(--amber) 55%, #C47E1E); box-shadow: 0 0 16px rgba(242, 165, 65, .55);
}
.ball::after { content: ""; position: absolute; left: 10%; top: calc(100% + var(--bh, 0px)); width: 80%; height: 30%; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(2px); }
.rc-open .giant { font-size: clamp(3.2rem, 10.5vw, 9.5rem); }
.rc-open-inner { position: relative; padding-block: clamp(120px, 18vh, 190px) clamp(40px, 7vh, 72px); pointer-events: none; }
.rc-open-inner a { pointer-events: auto; }
/* All work on a plate of its own, so the court's lines never run through it (his note, 21 Oct) */
.rc-open .case-crumb a { display: inline-block; padding: 7px 12px 6px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; background: #1E2A42; color: #D5DCE8; }
.rc-open .case-crumb a:hover { border-color: var(--white); color: var(--white); }
/* the old name big, the new one under it (copy deck V18) */
.rc-open .giant .now { display: block; margin-top: .34em; font-size: .44em; letter-spacing: -0.03em; }  /* clear of the g and p above it */
.rogerscup .case-brief { padding-bottom: clamp(24px, 4vh, 48px); }
.rogerscup .rc-callout { padding-top: clamp(40px, 7vh, 80px); }

/* the Fan Hub: crates drop and stack as you scroll, then the photo takes over (classes from work.js) */
/* pinned stages (data-pin): as tall as their content, stuck mid-screen for --hold of scrolling (sizes from work.js) */
[data-pin] { height: calc(var(--pin-h, 100svh) + var(--hold, 150svh)); }
.pin-stage { position: sticky; top: var(--pin-top, 0px); }
.hub { --hold: 170svh; }
.hub-stage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.hub-scene { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; background: linear-gradient(#18233A, #0B0F17 85%); }
.ground { position: absolute; inset: auto 0 0; height: 12%; border-top: 1px solid #2E3A4E; background: #141A24; }
.crate, .rail, .hub-sign { position: absolute; opacity: 0; transform: translateY(-240%); transition: transform .55s cubic-bezier(.3, 1.35, .5, 1), opacity .1s; }
.crate {
  display: grid; place-items: center; height: 27%; border: 2px solid #7A1C20; border-radius: 2px;
  background: repeating-linear-gradient(90deg, #B8292F 0 7px, #9C2227 7px 9px); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), 0 10px 18px rgba(0, 0, 0, .45);
}
.crate::after { content: ""; position: absolute; top: 10%; bottom: 10%; right: 3%; width: 5%; border-inline: 2px solid rgba(0, 0, 0, .28); }
.crate b { color: rgba(255, 255, 255, .92); font: 700 clamp(.55rem, .95vw, .85rem)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.c-1 { left: 8%; bottom: 12%; width: 42%; }
.c-2 { left: 50%; bottom: 12%; width: 42%; }
.c-3 { left: 36%; bottom: 39%; width: 42%; }
.rail { left: 10%; bottom: 39%; width: 26%; height: 9%; border: 2px solid rgba(215, 220, 226, .7); border-bottom: 0; background: rgba(200, 220, 255, .08); }
.hub-sign { left: 62%; bottom: 66%; padding: .35em .7em .3em; border-radius: 2px; background: #B8292F; color: var(--white); font: 800 clamp(.6rem, 1vw, .9rem)/1 var(--display); }
.hub-scene .in { opacity: 1; transform: none; }
.hub-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hub-scene.photo .hub-photo { opacity: 1; }
.hub-tape { top: 16px; right: 16px; opacity: 0; transform: scale(1.5) rotate(9deg); }
.hub-scene.photo .hub-tape { opacity: 1; transform: rotate(3deg); transition-delay: .45s; }

/* spin to win */
.spin { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(48px, 9vh, 110px); }
.spin-machine { position: relative; padding: clamp(10px, 1.4vw, 18px); border: 1px solid #262626; border-radius: 50%; background: #0D0D0D; box-shadow: 0 30px 70px rgba(0, 0, 0, .7); }
.wheel { display: block; width: 100%; height: auto; }
.wheel-turn { transition: transform 3.8s cubic-bezier(.12, .6, .08, 1); }
.slice path { fill: #16202F; stroke: #0A0E15; stroke-width: 2; transition: fill .3s; }
.slice:nth-child(even) path { fill: #22314A; }
.slice text { fill: var(--white); font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; }
.wheel-hub { fill: #0D0D0D; stroke: var(--amber); stroke-width: 3; }
.pointer {
  position: absolute; z-index: 2; left: 50%; top: 2px; width: 22px; height: 26px; transform: translateX(-50%);
  background: var(--amber); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 0 6px rgba(242, 165, 65, .6));
}
.spin-side h2 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.035em; }
.spin-side p { margin-top: 12px; color: #D5D9E0; }
.spin-btn { margin-top: 22px; }
/* where it lands: a prize ticket pops up with what that piece of the Hub was (notched paper, a torn-off stub) */
.spin-slot { min-height: 12.5rem; margin-top: 22px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }  /* the shadow sits out here: the notches' mask would cut it off the card */
.spin-card {
  --notch: radial-gradient(circle at 0 50%, #0000 11px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 11px, #000 12px) right / 51% 100% no-repeat;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 25rem; transform: rotate(-1.5deg);
  background: #F4F1EA; color: #151515; border-radius: 4px; -webkit-mask: var(--notch); mask: var(--notch);
  transition: opacity .2s, transform .2s;
}
.spin-card.gone { opacity: 0; transform: rotate(-1.5deg) scale(.96); }
.spin-card.pop { animation: ticket .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes ticket { from { opacity: 0; transform: translateY(18px) rotate(-9deg) scale(.6); } to { opacity: 1; transform: rotate(-1.5deg); } }
.sc-main { padding: 18px 16px 18px 24px; }
.sc-kicker { color: #6B6B6B; font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.spin-side .sc-kicker { margin: 0; color: #6B6B6B; }
.sc-name { margin-top: 8px; color: #151515; font: 800 clamp(1.4rem, 2.2vw, 1.8rem)/1 var(--display); letter-spacing: -0.03em; }
.spin-side .sc-text { margin-top: 10px; color: #2B2B2B; font-size: .98rem; line-height: 1.45; }
.spin-side .sc-stub {
  display: grid; place-items: center; margin: 0; padding: 0 14px; border-left: 2px dashed #C9C3B6;
  color: #A8501A; font: 700 .8rem/1 var(--mono); writing-mode: vertical-rl; letter-spacing: .14em;
}
.spin-notes { display: none; }
.spin-photos { display: grid; gap: 14px; }
.spin-photos figure { margin: 0; }


/* ---------- Hometown Hockey: his AutoCAD screen. Model space in the opening, then his site plan zone by zone ---------- */
.hth { --cad: #1B2130; --cad-bar: #10141D; --cad-edge: #2B3242; }
.hth-open, .cad-view {
  background:
    linear-gradient(rgba(232, 236, 242, .09) 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(90deg, rgba(232, 236, 242, .09) 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(rgba(232, 236, 242, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(232, 236, 242, .035) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--cad);
}
.hth-open { position: relative; min-height: 88svh; display: grid; align-items: end; overflow: hidden; }
/* the crosshair: follows a mouse; on a phone it drifts on its own */
.cross { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; transform: translate(var(--cx, 72vw), var(--cy, 34svh)); }
.cross::before, .cross::after { content: ""; position: absolute; background: rgba(232, 236, 242, .32); }
.cross::before { left: -200vw; width: 400vw; top: 0; height: 1px; }
.cross::after { top: -200svh; height: 400svh; left: 0; width: 1px; }
.cross i { position: absolute; z-index: 1; left: -7px; top: -7px; width: 15px; height: 15px; border: 1px solid rgba(232, 236, 242, .9); background: var(--cad); }
.cross:not(.live) { animation: drift 16s ease-in-out infinite alternate; }
@keyframes drift {
  0% { transform: translate(74vw, 30svh); } 35% { transform: translate(60vw, 46svh); }
  70% { transform: translate(84vw, 56svh); } 100% { transform: translate(66vw, 22svh); }
}
@media (hover: hover) and (pointer: fine) { .hth-open { cursor: none; } .hth-open a { cursor: pointer; } }
.ucs { width: 46px; height: 46px; fill: none; stroke: rgba(232, 236, 242, .55); stroke-width: 1.6; }
.ucs text { fill: rgba(232, 236, 242, .7); stroke: none; font: 600 9px var(--mono); }
.hth-open > .ucs { position: absolute; left: clamp(16px, 3vw, 40px); bottom: 18px; }
.hth-open > .cad-xy { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 22px; margin: 0; color: var(--smoke); font: 500 .74rem/1 var(--mono); }
.hth-open .giant { font-size: clamp(4rem, 10vw, 8.5rem); }  /* a little smaller than the other titles on a laptop (his note) */
.hth-open-inner { position: relative; z-index: 2; padding-block: clamp(120px, 18vh, 190px) clamp(84px, 12vh, 120px); pointer-events: none; }
.hth-open-inner a { pointer-events: auto; }

/* the walk through his plan: a CAD window, pinned while it zooms zone to zone (classes and --s/--tx/--ty from work.js) */
.walk-intro { padding-block: clamp(48px, 8vh, 96px) clamp(24px, 4vh, 40px); }
.walk-intro h2 { font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -0.035em; }
.walk-intro p { max-width: 40em; margin-top: 16px; color: #D5D9E0; font-size: 1.12rem; }
.walk { --hold: 280svh; }
/* a laptop: no pinning, the plan stays whole and you point at the zones (work.js adds "hover") */
@media (min-width: 801px) {
  .walk { height: auto; padding-bottom: clamp(16px, 3vh, 32px); }
  .walk .pin-stage { position: static; }
}
.walk.hover .cad-view { cursor: crosshair; }
.walk.hover .cad-pick { display: none; }
.walk.hover .zone { border-color: rgba(150, 196, 255, .75); cursor: crosshair; }
.walk.hover .zone:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; }
.walk.hover .zone.sel { border-color: var(--amber); transition-delay: 0s; }
.walk.hover .zone.done { border-color: rgba(242, 165, 65, .75); }
.walk.hover .cad-shot.on { transition-delay: 0s; }
.cad { overflow: hidden; border: 1px solid var(--cad-edge); border-radius: 8px; background: var(--cad); box-shadow: 0 40px 90px rgba(0, 0, 0, .6); }
.cad-bar, .cad-cmd { display: flex; align-items: center; gap: .6em; margin: 0; background: var(--cad-bar); color: var(--smoke); font: 500 .74rem/1.2 var(--mono); white-space: nowrap; }
.cad-bar { justify-content: space-between; padding: 0 0 0 14px; border-bottom: 1px solid var(--cad-edge); }
.cad-tabs { display: flex; align-self: stretch; }
.cad-tab { padding: 10px 14px; border: 0; background: none; color: var(--smoke); font: inherit; cursor: pointer; transition: color .2s, background-color .2s; }
.cad-tab:hover { color: var(--white); }
.cad-tab[aria-selected="true"] { background: var(--cad); color: var(--white); font-weight: 600; }
.cad-tab:focus-visible { outline-offset: -3px; }
.cad-tab.nudge::after {  /* a light on Layout1 until it's been opened once */
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 1px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 50% { opacity: .25; } }
.cad-body { position: relative; }
.cad-view { position: relative; height: clamp(340px, 62svh, 640px); overflow: hidden; }
.cad-plan { position: absolute; left: 0; top: 0; width: 1500px; height: 968px; transform-origin: 0 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, .6)); transition: transform 1.1s cubic-bezier(.65, .05, .25, 1), background-color .3s; }
.cad-plan img { display: block; width: 1500px; max-width: none; height: 968px; }
.zone { position: absolute; padding: 0; border: 2px dashed transparent; background: none; transition: border-color .3s, background-color .5s; }
.zone.sel { border-color: var(--amber); background: rgba(242, 165, 65, .1); transition-delay: .7s; }
.zone.sel::before {  /* AutoCAD's grips: a square at each corner of what you picked */
  content: ""; position: absolute; inset: -7px;
  background: linear-gradient(var(--amber), var(--amber)) top left / 10px 10px no-repeat, linear-gradient(var(--amber), var(--amber)) top right / 10px 10px no-repeat,
    linear-gradient(var(--amber), var(--amber)) bottom left / 10px 10px no-repeat, linear-gradient(var(--amber), var(--amber)) bottom right / 10px 10px no-repeat;
}
.zone.done { border: 2px solid rgba(242, 165, 65, .75); background: rgba(242, 165, 65, .08); }
.z-hub { left: 806px; top: 428px; width: 184px; height: 106px; }
.z-stage { left: 516px; top: 348px; width: 112px; height: 116px; }
.z-studio { left: 552px; top: 232px; width: 86px; height: 112px; }
.z-rink { left: 830px; top: 646px; width: 126px; height: 104px; }
.z-food { left: 594px; top: 492px; width: 114px; height: 154px; }
/* the pick cursor sits where each zone lands */
.cad-pick { position: absolute; left: 0; top: 0; transform: translate(var(--fx, 50%), var(--fy, 50%)); transition: transform 1.1s cubic-bezier(.65, .05, .25, 1); }
.cad-pick::before, .cad-pick::after { content: ""; position: absolute; background: rgba(232, 236, 242, .75); }
.cad-pick::before { left: -34px; width: 68px; top: 0; height: 1px; }
.cad-pick::after { top: -34px; height: 68px; left: 0; width: 1px; }
.cad-view > .ucs { position: absolute; left: 14px; bottom: 12px; width: 38px; height: 38px; }
.cad-cmd { padding: 10px 14px; border-top: 1px solid var(--cad-edge); color: #C9CED8; }
.cad-prompt { color: var(--smoke); }
.cad-cmd-text::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.cad-cmd .cad-xy { margin-left: auto; color: var(--smoke); }
/* Layout1, paper space (his ask, 21 Oct): the drawing pulls back into a viewport in the corner of the sheet and the
   festival, as built, opens up behind it, from close in to the whole picture (.paper and --vx/--vy/--vw/--vh from work.js) */
.cad-sheet { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.cad-sheet img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); transition: transform .3s; }
.cad.paper .cad-sheet { opacity: 1; transition: opacity .6s ease .3s; }
.cad.paper .cad-sheet img { transform: none; transition: transform 1.9s cubic-bezier(.2, .7, .15, 1) .3s; }
.cad.paper .cad-plan { background-color: var(--cad); }
.cad-vp {
  position: absolute; left: var(--vx, 0px); top: var(--vy, 0px); width: var(--vw, 0px); height: var(--vh, 0px);
  border: 1.5px solid rgba(232, 236, 242, .85); box-shadow: 0 16px 34px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cad.paper .cad-vp { opacity: 1; transition: opacity .4s 1s; }
.cad-title {
  position: absolute; right: 14px; bottom: 14px; display: grid; grid-template-columns: repeat(3, auto); margin: 0;
  border: 1px solid rgba(232, 236, 242, .55); background: rgba(16, 20, 29, .86); color: #C9CED8; font: 500 .68rem/1.2 var(--mono);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.cad-title span { padding: 6px 9px; border: 1px solid rgba(232, 236, 242, .14); }
.cad-title span:first-child { grid-column: 1 / -1; color: var(--white); font-weight: 600; }
.cad.paper .cad-title { opacity: 1; transition: opacity .4s 1.1s; }
.cad.paper .cad-pick, .cad.paper .cad-view > .ucs { opacity: 0; }
.cad.paper .zone { pointer-events: none; }
.cad-shots { transition: opacity .3s; }
@media (min-width: 801px) { .cad.paper .cad-shots { opacity: 0; pointer-events: none; } }
/* the photo of each zone, as built, in a palette at the corner; with no zone picked it shows the layer list */
.cad-shots { position: absolute; top: 16px; right: 16px; width: 36%; aspect-ratio: 4 / 3.4; }
.cad-layers, .cad-shot { position: absolute; inset: 0; margin: 0; padding: 8px; border: 1px solid var(--cad-edge); border-radius: 6px; background: var(--cad-bar); }
.cad-layers { bottom: auto; padding-bottom: 10px; }
.cad-layers p { margin: 2px 4px 10px; color: var(--smoke); font: 600 .68rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.cad-layers ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cad-layers li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 3px; color: #C9CED8; font: 500 .8rem/1.2 var(--mono); }
.cad-layers i { width: 10px; height: 10px; border: 1px solid #59606E; }
.cad-layers .done i { border-color: var(--amber); background: var(--amber); }
.cad-shot { display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(12px) scale(.95); transition: opacity .25s, transform .25s; }
.cad-shot.on { opacity: 1; transform: none; transition: opacity .35s .75s, transform .55s .75s cubic-bezier(.2, 1.3, .4, 1); }
.cad-shot img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 3px; }
.cad-shot figcaption { display: flex; align-items: center; gap: 8px; color: var(--white); font: 600 .78rem/1 var(--mono); }
.cad-shot figcaption::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

/* his video from year two, which made it to air */
.hth-film { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(48px, 9vh, 110px); }
.film-text h2 { font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -0.035em; }
.film-text p { max-width: 30em; margin-top: 14px; color: #D5D9E0; font-size: 1.08rem; }
.film-text .on-air { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 12px; border: 1px solid #3A3A3A; border-radius: 4px; color: var(--white); font: 700 .7rem/1.45 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.on-air i { flex: none; }
.on-air i { width: 9px; height: 9px; border-radius: 50%; background: #E5322D; box-shadow: 0 0 10px #E5322D; }
.video.film .v-title { font-size: clamp(1rem, 1.6vw, 1.3rem); }

/* ---------- Earls Japan: a noren at the door, a torch for what the guests didn't see, the race's clues ---------- */
/* the opening: a noren (ようこそ, welcome) hangs in a lit doorway and sways when you brush past (--a from work.js) */
.earls-open {
  position: relative; min-height: 92svh; display: grid; align-content: end; overflow: hidden;
  background: radial-gradient(55% 45% at 50% 18%, rgba(242, 165, 65, .13), transparent 72%), #000;
}
.noren {
  position: absolute; left: 50%; top: clamp(64px, 9vh, 96px); transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: min(88vw, 760px); padding-top: 14px;
}
.noren .rod { position: absolute; left: -3%; right: -3%; top: 0; height: 14px; border-radius: 7px; background: linear-gradient(#8A6A47, #5C4330); box-shadow: 0 6px 14px rgba(0, 0, 0, .6); }
.cloth {
  display: grid; place-items: center; height: clamp(170px, 34svh, 330px); transform-origin: 50% 0; transform: skewX(var(--a, 0deg)) rotate(calc(var(--a, 0deg) * -.25));
  border-radius: 0 0 3px 3px; box-shadow: 0 18px 30px rgba(0, 0, 0, .55);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), linear-gradient(#2E3E5E, var(--navy) 55%, #1C273B);
}
.cloth b {
  color: #F3F0E8; font: 600 clamp(2.6rem, 7vw, 5.4rem)/1 "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  transform: translateY(12%); text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.earls-open-inner { position: relative; padding-block: calc(clamp(64px, 9vh, 96px) + clamp(184px, 34svh, 344px) + 40px) clamp(40px, 7vh, 72px); }
.earls-open .giant { font-size: clamp(3rem, 8.4vw, 7.6rem); line-height: .96; letter-spacing: -0.03em; }  /* no letters touching (his note, 21 Oct) */

/* what the guests saw: a torch reveals what ran behind each moment (--mx/--my and "lit" from work.js) */
.backstage { position: relative; padding-block: clamp(56px, 10vh, 120px); background: radial-gradient(420px circle at var(--gx, -999px) var(--gy, -999px), rgba(242, 165, 65, .09), transparent 70%), #050608; }
.bs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: end; margin-bottom: clamp(28px, 5vh, 48px); }
.bs-head h2 { font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -0.035em; }
.bs-head p { grid-column: 1; max-width: 38em; color: #D5D9E0; font-size: 1.1rem; }
.if-touch { display: none; }
@media (hover: none) { .if-hover { display: none; } .if-touch { display: inline; } }
.bs-switch {
  grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; cursor: pointer;
  border: 1px solid #333; border-radius: 999px; background: #0E0F12; color: var(--white); font: 600 .78rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.bs-switch i { position: relative; width: 34px; height: 18px; border-radius: 9px; background: #2A2A2A; transition: background-color .25s; }
.bs-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9A9A9A; transition: transform .25s, background-color .25s; }
.bs-switch[aria-pressed="true"] i { background: rgba(242, 165, 65, .35); }
.bs-switch[aria-pressed="true"] i::after { transform: translateX(16px); background: var(--amber); }
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.moment { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 5; background: #111; }
.moment figure { margin: 0; height: 100%; }
.moment img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s; }
.moment figcaption { position: absolute; inset: auto 0 0; padding: 48px 18px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font: 700 1.08rem/1.25 var(--display); text-wrap: balance; }
.crew {
  position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; padding: clamp(18px, 2.4vw, 28px);
  background: rgba(8, 9, 12, .86); clip-path: circle(0% at var(--mx, 50%) var(--my, 50%)); transition: clip-path .55s cubic-bezier(.3, .7, .2, 1);
}
.crew p { color: var(--amber); font: 600 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.crew ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.crew li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px dashed #3A3A3A; color: #ECEFF3; font: 500 .95rem/1.4 var(--mono); }
.crew li::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--amber); border-radius: 2px; background: linear-gradient(var(--amber), var(--amber)) center / 4px 4px no-repeat; }
.moment.lit .crew, .backstage.lights .crew { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
.moment.lit img { transform: scale(1.04); filter: saturate(.6); }
/* a tap puts the torch down on that photo, so you can see it; another tap brings the notes back (his ask, 20 Oct) */
.moment { cursor: pointer; }
.moment.peek .crew, .backstage.lights .moment.peek .crew { clip-path: circle(0 at var(--mx, 50%) var(--my, 50%)); }
.moment.peek img { transform: none; filter: none; }

/* the race: a deck of clues, dealt onto the table one at a time (--jx/--jy/--jr and "dealt" from work.js) */
.race { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(56px, 10vh, 120px); }
.race-text h2 { font-size: clamp(2rem, 4.4vw, 4rem); letter-spacing: -0.035em; }
.race-text p { margin-top: 14px; color: #D5D9E0; font-size: 1.08rem; }
.race-btn { margin-top: 24px; }
.race-text .race-count { margin-top: 14px; color: var(--smoke); font: 600 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.race-table {
  position: relative; container-type: inline-size; aspect-ratio: 7 / 5; border-radius: 8px; overflow: hidden;
  background: radial-gradient(80% 70% at 60% 40%, #1A1F2A, #0B0D12); box-shadow: inset 0 0 0 1px #20242C;
}
.clues { margin: 0; padding: 0; list-style: none; }
.clue {
  --cw: 40cqw; position: absolute; left: 5cqw; bottom: 5cqw; width: var(--cw); aspect-ratio: 1 / 1.16; perspective: 1200px; cursor: default;
  transform: translate(calc(var(--n) * .5cqw), calc(var(--n) * -.5cqw)) rotate(calc(var(--n) * 1.4deg - 5deg));
  transition: transform .75s cubic-bezier(.2, .9, .25, 1);
}
.clue.dealt { cursor: pointer; transform: translate(calc(46cqw + var(--jx, 0px)), calc(-6cqw + var(--jy, 0px))) rotate(var(--jr, 0deg)); }
.clue-in { position: relative; height: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .7s cubic-bezier(.45, .05, .35, 1); }
.clue.dealt .clue-in { transform: none; }
/* the faces also swap halfway through the turn, when the card is edge-on: WebKit can ignore backface-visibility */
.clue-front { opacity: 0; transition: opacity 0s .35s; }
.clue-back { transition: opacity 0s .35s; }
.clue.dealt .clue-front { opacity: 1; }
.clue.dealt .clue-back { opacity: 0; }
.clue-front, .clue-back {
  position: absolute; inset: 0; margin: 0; border-radius: 6px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .6);
}
.clue-front { display: flex; flex-direction: column; padding: 7px; background: #F4F1EA; }
.clue-front img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 3px; }
.clue-front figcaption { display: grid; gap: 4px; padding: 9px 4px 3px; color: #151515; }
.clue-front figcaption span { color: #A8501A; font: 700 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.clue-front figcaption b { font: 800 clamp(.82rem, 1.4vw, 1.05rem)/1.15 var(--display); letter-spacing: -0.01em; }
.clue-back {
  display: grid; place-content: center; justify-items: center; gap: 6px; transform: rotateY(180deg); color: #151515;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 6px, transparent 6px 12px), var(--amber);
}
.clue-back span { font: 700 .74rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.clue-back b { font: 800 clamp(2.2rem, 5cqw, 3.4rem)/1 var(--display); letter-spacing: -0.04em; }
.earls-pack { justify-self: center; width: min(100%, 400px); }
.earls-team { margin-block: 0 clamp(24px, 5vh, 56px); }
.earls-team img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--panel); }
.earls-team figcaption { margin-top: 12px; color: var(--smoke); font-size: .95rem; }
/* the overview opens on his question, the goal under it (copy deck V18) */
.earls-brief .case-question { margin-top: 0; }
.earls-brief .case-question + p { margin-top: 1.4em; }
/* a year and a half: his three cards */
.earls-roles { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.earls-roles li { padding: 16px 18px 17px; border: 1px solid #23262D; border-radius: 8px; background: #0B0C10; color: #D5D9E0; font-size: 1.02rem; line-height: 1.55; }
.earls-roles b { display: block; margin-bottom: 6px; color: var(--white); font: 800 1.02rem/1.25 var(--display); letter-spacing: -0.01em; }
/* his philosophy: a callout of its own between the crew photo and the race, lit as you read */
.case-brief.earls-creed { padding-block: clamp(48px, 9vh, 110px) clamp(24px, 5vh, 56px); }
.earls-creed .case-question { max-width: 23em; margin-top: 0; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.12; }
/* K36 (his ask, 21 Oct: a girl at the edge was cut off). The group is wider than a tall card, so on a laptop the
   whole photo fits across the card and the dusk sky carries on above it; on a phone the square card shows more of it. */
@media (min-width: 801px) {
  .moment.k36 figure { background: linear-gradient(#141B2B, #3E4E70 55%, #63769C); }
  .moment.k36 img { position: absolute; left: 0; bottom: 0; width: 130%; height: auto; max-width: none; translate: -8% 0; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
}

/* the bullet train: Tokyo to Kyoto as you scroll, braking to a stop right on Kyoto's mark (--tx and "in" from work.js).
   Westbound, so it runs right to left; the stations sit where they are on the line. */
.shinkansen { --th: clamp(44px, 5.2vw, 78px); position: relative; overflow: hidden; padding-bottom: clamp(48px, 9vh, 104px); }
.sk-stops { position: relative; height: 2.6rem; }
.sk-stop { position: absolute; bottom: 0; display: grid; gap: 5px; justify-items: start; color: var(--smoke); }
.sk-stop::after {  /* the stop mark, running down behind the train to the rail */
  content: ""; position: absolute; left: 0; top: calc(100% + 6px); width: 1px; height: calc(var(--th) + 14px);
  background: linear-gradient(#3C3F46, rgba(60, 63, 70, .2)); transition: background-color .4s;
}
.sk-stop b { color: #E8E6E1; font: 600 1rem/1 "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif; transition: color .4s; }
.sk-stop i { font: 600 .6rem/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; transition: color .4s; }
.sk-kyoto { left: 0; }
.sk-nagoya { left: 28.2%; }  /* 342 of the line's 476 km from Tokyo */
.sk-tokyo { right: 0; justify-items: end; }
.sk-tokyo::after { left: auto; right: 0; }
.shinkansen.in .sk-kyoto b, .shinkansen.in .sk-kyoto i { color: var(--amber); }
.shinkansen.in .sk-kyoto::after { width: 2px; background: var(--amber); box-shadow: 0 0 10px rgba(242, 165, 65, .6); }
.sk-track { position: relative; height: calc(var(--th) + 26px); }
.sk-track::after {  /* the rail, on its slab */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(#5A5F69, #5A5F69) top / 100% 1.5px no-repeat, repeating-linear-gradient(90deg, #26282D 0 5px, transparent 5px 16px) bottom / 100% 3px no-repeat;
}
.sk-train { position: absolute; left: 0; bottom: 6px; transform: translate3d(var(--tx, var(--gutter)), 0, 0); will-change: transform; }
.sk-svg { display: block; height: var(--th); width: auto; aspect-ratio: 2024 / 64; }
.sk-s1 { stop-color: #FFFFFF; }
.sk-s2 { stop-color: #ECEFF3; }
.sk-s3 { stop-color: #B6BDC8; }
.sk-body { fill: url(#sk-sheen); }
.sk-cab, .sk-win { fill: #161C29; }
.sk-blue, .sk-pin { fill: #2457B0; }
.sk-door { fill: none; stroke: #AEB5C0; stroke-width: 1; }
.sk-gap, .sk-bogie { fill: #24272D; }
.sk-panto { fill: none; stroke: #7C828C; stroke-width: 1.4; }
.sk-lamp { fill: #FFF8E6; }
.sk-glow { fill: rgba(255, 244, 214, .12); }

@media (max-width: 800px) {
  .chapter, .reveal { grid-template-columns: 1fr; }
  .reveal-text { position: static; }
  .reveal-track { height: 190svh; }
  .reveal-frame { top: 12svh; height: auto; width: min(100%, calc(76svh * 965 / 1287)); margin: 0 auto; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .g2 { width: 72%; margin-top: 0; justify-self: end; }
  .case-next a { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "label" "name" "pic" "go"; }
  .next-go { justify-self: stretch; justify-content: center; }
  .chapter.flip { grid-template-columns: 1fr; }
  .chapter.flip .ch-text { order: 0; }
  .arena { height: 260svh; }
  .jumbotron { padding: 6px; }
  .fixtures li { padding: 9px 9px 10px; }
  .fx-day, .fx-state { font-size: .6rem; letter-spacing: .08em; }
  .sp-open { display: flex; flex-direction: column; justify-content: flex-end; }
  .sp-hang { --drop: 72px; position: relative; right: auto; align-self: center; width: min(76vw, 340px); }
  .sp-open-inner { padding-top: 26px; }
  .sp-beams i { width: 60vw; }
  .ob-btn { width: 88px; }
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 170px); gap: 8px; }
  .b1 { grid-column: 1 / 3; }
  .b2 { grid-column: 1; grid-row: 2 / 4; }
  .b5 { grid-column: 1 / 3; }
  .dy-stop { grid-template-columns: 1fr; }
  .stages { height: 240svh; margin-top: 0; }
  .stage-frame { --iw: .76; aspect-ratio: 1 / 1; }  /* phones: the open photo wider, the slivers thinner */
  .stages-pin { grid-template-columns: minmax(0, 1fr); grid-template-areas: "frame" "caps"; align-content: start; gap: 22px; padding-top: max(88px, 11svh); }
  .stage-box { justify-self: stretch; width: 100%; }
  .stage-caps b { font-size: 2rem; margin-top: 8px; }
  .cap-d { margin-top: 10px; }
  .dy-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dy-gallery .cm:nth-child(2n) { margin-top: 40px; }
  .hub-stage { grid-template-columns: 1fr; gap: 18px; }
  .hub-stage .ch-text p { font-size: 1rem; }
  .hth-open > .cad-xy { display: none; }
  .cad-view { height: clamp(220px, 36svh, 340px); }
  .cad-cmd .cad-xy { display: none; }
  .cad-shots { position: relative; top: auto; right: auto; width: auto; height: min(30svh, 62vw); aspect-ratio: auto; margin: 10px; }
  .cad-layers { bottom: 0; }
  .cad-title { top: 10px; right: 10px; bottom: auto; font-size: .6rem; }
  /* the wheel stays in view between the words and the button, so you can watch it turn */
  .spin { gap: 14px; }
  .spin-side { display: contents; }
  .spin-side h2 { order: 1; }
  .spin-side > p { order: 2; margin-top: 0; }
  .spin-machine { order: 3; margin-block: 14px 6px; }
  .spin-btn { order: 4; justify-self: center; margin-top: 0; }
  .spin-slot { order: 5; margin-top: 4px; }
  .spin-photos { order: 6; margin-top: 18px; }
  .hth-film { grid-template-columns: 1fr; }
  .noren { width: 92vw; gap: 4px; }
  .cloth { height: clamp(150px, 25svh, 220px); }
  .earls-open-inner { padding-top: calc(clamp(64px, 9vh, 96px) + clamp(164px, 25svh, 234px) + 28px); }
  .bs-head { grid-template-columns: 1fr; }
  .bs-switch { grid-column: 1; grid-row: auto; justify-self: start; }
  .moments { grid-template-columns: 1fr; }
  .popbook { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pb-stage { padding-top: 6%; }
  .pb-text { gap: 16px; margin-top: 18px; }
  .earls-brief { padding-bottom: 0; }  /* phones: the brief runs straight into the challenge (his ask, 20 Oct) */
  .earls-brief + .chapter { padding-top: 36px; }
  .earls-pack { width: 70%; }
  .moment { aspect-ratio: 1 / 1.08; }
  .moment.k36 img { object-position: 33% 50%; }  /* the square card shows more of the photo: the girl in pink comes in */
  /* a phone: the table sits between the words and the button, the deck at its foot and the pile above it */
  .race { grid-template-columns: 1fr; gap: 14px; }
  .race-text { display: contents; }
  .race-text h2 { order: 1; }
  .race-text p { order: 2; margin-top: 0; }
  .race-table { order: 3; aspect-ratio: 1 / 1.4; margin-top: 8px; }
  .race-btn { order: 4; justify-self: center; margin-top: 6px; }
  .race-text .race-count { order: 5; margin-top: 0; text-align: center; }
  .clue { --cw: 54cqw; left: 6cqw; bottom: 4cqw; }
  .clue.dealt { transform: translate(calc(17cqw + var(--jx, 0px)), calc(-68cqw + var(--jy, 0px))) rotate(var(--jr, 0deg)); }
  .spin { grid-template-columns: 1fr; }
  .spin-machine { width: min(100%, 380px); justify-self: center; }
  .spin-photos { grid-template-columns: 1fr 1fr; }
}