/* Generated from src/styles.css by _build.py. Edit the source in src/, then run python3 _build.py. */
/* Places & Pieces, v3 "The Route".
   Warm paper, big uncropped photographs, one thin line through ten stops. No custom cursor, no scroll-reveal:
   everything is visible without JavaScript. */

@property --bg { syntax: "<color>"; inherits: true; initial-value: #f5f0e6; }

:root {
  --tint: #f5f0e6;                 /* the paper's colour; the chapter page sets a faint tint per stop (site.js) and --bg follows it */
  --bg: var(--tint);
  --paper-2: #ebe4d5;
  --band: #ece4d3;
  --ink: #26221e;
  --ink-2: #554f45;
  --dim: #6a6358;
  --hair: rgba(38, 34, 30, .26);
  --hair-2: rgba(38, 34, 30, .14);
  --red: #d4553b;
  --halo: rgba(212, 85, 59, .2);
  --edge: rgba(38, 34, 30, .09);   /* the hairline inside every photograph */
  --shade: 0 1px 2px rgba(60, 40, 20, .09), 0 26px 46px -30px rgba(80, 55, 30, .5);
  --shade-band: 0 1px 3px rgba(60, 40, 20, .12), 0 30px 50px -32px rgba(70, 45, 20, .55);
  --dots: #857d70;
  --display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --head: 3.25rem;                 /* fixed header */
  --bar: 2.75rem;                  /* route bar (phones, tablets) */
  --top: calc(var(--head) + var(--bar));
  --pl: var(--gutter);             /* page left padding (grows with the desktop route line) */
  --svh: 1vh;
  --gap: 1.75rem;                  /* between blocks inside a stop */
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@supports (height: 1svh) { :root { --svh: 1svh; } }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  :root { --band: color-mix(in srgb, var(--bg) 84%, #cdb994); --halo: color-mix(in srgb, var(--red) 20%, transparent); }
}

/* Dark: the same paper after sundown. It follows the system setting unless the reader picks one with the header switch
   (site.js stores it and sets data-theme on <html> before the page draws). The two dark blocks below must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181613; --paper-2: #24211c; --band: #211e19;
    --ink: #ece6da; --ink-2: #bbb3a5; --dim: #978e80;
    --hair: rgba(236, 230, 218, .26); --hair-2: rgba(236, 230, 218, .13);
    --red: #e46a4f; --halo: rgba(228, 106, 79, .24);
    --edge: rgba(236, 230, 218, .06);
    --shade: 0 1px 2px rgba(0, 0, 0, .3), 0 26px 46px -30px rgba(0, 0, 0, .8);
    --shade-band: 0 1px 3px rgba(0, 0, 0, .35), 0 30px 50px -32px rgba(0, 0, 0, .85);
    --dots: #6f685d;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #181613; --paper-2: #24211c; --band: #211e19;
  --ink: #ece6da; --ink-2: #bbb3a5; --dim: #978e80;
  --hair: rgba(236, 230, 218, .26); --hair-2: rgba(236, 230, 218, .13);
  --red: #e46a4f; --halo: rgba(228, 106, 79, .24);
  --edge: rgba(236, 230, 218, .06);
  --shade: 0 1px 2px rgba(0, 0, 0, .3), 0 26px 46px -30px rgba(0, 0, 0, .8);
  --shade-band: 0 1px 3px rgba(0, 0, 0, .35), 0 30px 50px -32px rgba(0, 0, 0, .85);
  --dots: #6f685d;
  color-scheme: dark;
}
/* the per-stop tint survives at night as a whisper over the dark paper, and the band stays a step off the page */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg: color-mix(in srgb, var(--tint) 5%, #151310); --band: color-mix(in srgb, var(--bg) 88%, #4a3f2e); }
  }
  :root[data-theme="dark"] { --bg: color-mix(in srgb, var(--tint) 5%, #151310); --band: color-mix(in srgb, var(--bg) 88%, #4a3f2e); }
}
/* the height a photograph may take on a desktop screen: the frame and its caption fit one screen */
:root {
  --ph: max(17rem, calc(100 * var(--svh) - var(--top) - 6.25rem));          /* plates */
  --ph-hero: var(--ph);                                                       /* heroes: the caption row is the same height, so the same reserve */
  --ph-pair: max(15rem, calc(100 * var(--svh) - var(--top) - 10rem));        /* the diptych needs a gear row more, and the portrait's caption wraps to two lines (measured: 138px of caption + 16px scroll margin) */
  --ph-band: max(18rem, calc(100 * var(--svh) - var(--top) - 5.75rem));      /* on the deeper band (its caption row plus the band's own padding) */
}
@media (min-width: 69rem) {
  :root { --head: 4.25rem; --top: var(--head); --rail: 1.5rem; --pl: calc(var(--gutter) + var(--rail) + 1.75rem); --gap: clamp(3rem, calc(9 * var(--svh)), 5.5rem); }
}
@media (min-width: 85rem) { :root { --rail: 7.25rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; transition: --bg 1.4s ease; scroll-padding-top: var(--top); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.65 var(--serif); font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 99; background: var(--ink); color: var(--bg); padding: .75rem 1rem; font: 500 .8125rem var(--sans); }
.skip:focus { left: .5rem; }

.eyebrow, .sign-meta, .of, .place, .cover-meta { font: 500 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sep { opacity: .5; padding-inline: .12em; }
.nw { white-space: nowrap; }
/* a line of small facts ("Spring 2025 · 10 stops · 28 frames"). The dot between two facts is drawn in the padding in front of the later one;
   if that fact wraps to a new line its padding sits outside the box and is clipped, so a dot never dangles at the end of a line. */
.mline { display: flex; flex-wrap: wrap; overflow: hidden; --sepw: 1.1em; }
.mline > .nw { position: relative; padding-inline: var(--sepw); margin-left: calc(-1 * var(--sepw)); }
.mline > .nw:last-child { margin-right: calc(-1 * var(--sepw)); }
.mline > .nw::before { content: "·"; content: "·" / ""; position: absolute; left: 0; width: var(--sepw); text-align: center; opacity: .5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
em { font-style: italic; }

/* ---------- Header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--head);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-inline: var(--gutter); background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .3s, transform .35s var(--ease);
}
.top.scrolled { border-bottom-color: var(--hair-2); }
.logo { font: 400 1.5rem/1 var(--display); letter-spacing: .008em; word-spacing: .1em; white-space: nowrap; padding-block: .75rem; }
.logo em, .foot-mark em, .home-hero h1 em { font-style: italic; color: var(--red); }
.nav { display: flex; gap: clamp(.1rem, 1.4vw, .9rem); font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.nav a { position: relative; padding: 1.05rem .6rem; }
.nav a::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .8rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a:last-child { margin-right: -.6rem; }
@media (max-width: 30rem) {
  /* the header scales with the screen, so a larger text size can never push About off the edge */
  .top { gap: .5rem; }
  .logo { font-size: min(1.3rem, 6vw); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .logo:focus-visible { outline-offset: -3px; }
  .nav { font-size: min(.75rem, 3.2vw); letter-spacing: .08em; gap: 0; flex: none; }
  .nav a { padding-inline: .5rem; }
  .nav a::after { left: .5rem; right: .5rem; }
  .nav a:last-child { margin-right: -.5rem; }
  .nav a:first-child { display: none; }
}
/* a rem breakpoint is in the user's text size: this matches a small phone, and a larger one once the text size is raised */
@media (max-width: 20rem) {
  .top { gap: .35rem; padding-inline: min(var(--gutter), 5vw); }
  .nav { letter-spacing: .04em; }
  .nav a { padding-inline: .3rem; }
  .nav a::after { left: .3rem; right: .3rem; }
  .nav a:last-child { margin-right: -.3rem; }
  .mline > .nw { white-space: normal; }       /* a fact may wrap inside itself when the text is very large */
}
@media (min-width: 69rem) {
  .top { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .logo { font-size: 1.625rem; }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .top { background: var(--bg); } }

.theme-swap, .theme-swap * { transition: none !important; }
/* theme picker: Light, Dark or System. The icon is a dot (empty, full, or half ink for the system).
   It needs site.js, so it only shows once that can run. */
.theme { display: none; }
.js .theme { display: block; position: relative; flex: none; margin: 0 -.6rem 0 -.6rem; }
.theme-btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  appearance: none; background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink-2); transition: color .25s;
}
.theme-btn:hover, .theme-btn[aria-expanded="true"] { color: var(--ink); }
.theme svg { display: block; width: 1.05rem; height: 1.05rem; }
.theme svg .i-half, .theme svg .i-full { display: none; }
[data-mode="system"] > svg .i-half, [data-mode="dark"] > svg .i-full,
.theme[data-mode="system"] .theme-btn .i-half, .theme[data-mode="dark"] .theme-btn .i-full { display: inline; }
.theme-menu {
  position: absolute; top: calc(100% + .35rem); right: .35rem; z-index: 70; min-width: 9.5rem; padding: .35rem;
  background: var(--bg); border: 1px solid var(--hair-2); border-radius: 6px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35);
}
.theme-menu[hidden] { display: none; }
.theme-menu button {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 2.75rem; padding: 0 .75rem;
  appearance: none; background: none; border: 0; border-radius: 4px; cursor: pointer; text-align: left;
  font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.theme-menu button:hover { background: var(--hair-2); color: var(--ink); }
.theme-menu button[aria-pressed="true"] { color: var(--ink); }
.theme-menu button[aria-pressed="true"]::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--red); }   /* the current choice */
.theme-menu .theme-ico { display: grid; place-items: center; }
.theme-menu :focus-visible { outline-offset: -2px; }
.js .top .nav { margin-left: auto; }                 /* the header has three items now; keep the nav beside the picker */
.js .top .nav a:last-child { margin-right: 0; }
@media (max-width: 30rem) { .js .theme { margin-inline: -.5rem; } .theme-btn { width: 2.5rem; } }
@media (max-width: 20rem) { .js .theme { margin-inline: -.3rem; } .theme-btn { width: 2.25rem; } }

/* live readout in the desktop header: Stop 04 / 10, Kyoto, Frame 09 / 28 */
.readout { display: none; }
@media (min-width: 69rem) {
  .readout { display: flex; align-items: baseline; gap: 1.1rem; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;
    font: 500 .75rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); }
  .readout b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .ro-name { font: italic 400 1.4rem/1 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); min-width: 7.5rem; text-align: center; }
  .ro-stop::after { content: ""; }
}

/* ---------- The route: desktop line ---------- */
.rail, .routebar { display: none; }
.page { padding-inline: var(--gutter); }
@media (min-width: 69rem) {
  .rail {
    display: block; position: fixed; z-index: 40; left: var(--gutter); top: calc(var(--head) + 2.25rem);
    height: calc(100 * var(--svh) - var(--head) - 4.5rem); width: var(--rail); min-height: 24rem;
  }
  .rail ol { height: 100%; display: grid; grid-template-rows: repeat(10, 1fr); position: relative; }
  .rail ol::before, .rail ol::after { content: ""; position: absolute; left: 5px; top: 5%; bottom: 5%; width: 1px; }
  .rail ol::before { background: var(--hair); }
  .rail ol::after { background: var(--red); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .25s linear; }
  .rail li { position: relative; z-index: 1; }
  .rail a { height: 100%; display: flex; align-items: center; gap: .75rem; font: 500 .8125rem/1.2 var(--sans); color: var(--dim); position: relative; }
  .rail .dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--dim); transition: transform .35s var(--ease), background .3s, border-color .3s; }
  .rail .lbl { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
  .rail .nm { white-space: nowrap; transition: color .3s, transform .35s var(--ease); }
  .rail .ticks { display: none; gap: 3px; align-items: flex-end; height: 9px; }
  .rail .ticks i { width: 3px; height: 6px; background: var(--hair); border-radius: 1px; }
  .rail .ticks i.seen { background: var(--ink-2); }
  .rail .ticks i.on { background: var(--red); height: 9px; }
  .rail a:hover .nm, .rail a:focus-visible .nm { color: var(--ink); }
  .rail li.past .dot { background: var(--ink); border-color: var(--ink); }
  .rail li.past a { color: var(--ink-2); }
  .rail li.here .dot { background: var(--red); border-color: var(--red); transform: scale(1.4); box-shadow: 0 0 0 4px var(--halo); }
  .rail li.here a { color: var(--ink); font-weight: 600; }
  /* narrow rail (laptops): dots only; the name shows on hover or focus, the header always names the current stop */
  .rail .nm { position: absolute; left: 1.9rem; top: 50%; transform: translateY(-50%); background: var(--bg); border: 1px solid var(--hair-2); padding: .3rem .6rem; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 5; }
  .rail a:hover .nm, .rail a:focus-visible .nm { opacity: 1; }
  .page-rail { padding-left: var(--pl); }
}
@media (min-width: 85rem) {
  .rail .nm { position: static; transform: none; background: none; border: 0; padding: 0; opacity: 1; pointer-events: auto; border-radius: 0; }
  .rail li.here .nm { transform: translateX(.15rem); }
  .rail li.here .ticks { display: flex; }
}

/* ---------- The route: compact bar (phones, tablets) ---------- */
@media (max-width: 68.99rem) {
  .routebar { display: block; position: fixed; z-index: 55; top: var(--head); left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--hair-2); transition: transform .35s var(--ease); }
  .routebar summary {
    list-style: none; position: relative; display: flex; align-items: center; gap: .9rem; height: var(--bar); padding-inline: var(--gutter); cursor: pointer;
    font: 500 .75rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; -webkit-tap-highlight-color: transparent;
  }
  .routebar summary::-webkit-details-marker { display: none; }
  .rb-label { display: flex; align-items: baseline; gap: .6rem; min-width: 0; flex: 1; white-space: nowrap; }
  .rb-count { font-weight: 600; font-variant-numeric: tabular-nums; }
  .rb-name { font: italic 400 1.25rem/1 var(--display); letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .rb-name::before { content: "·"; margin-right: .6rem; opacity: .5; font-family: var(--sans); font-style: normal; }
  .rb-frame { font-variant-numeric: tabular-nums; color: var(--ink-2); letter-spacing: .06em; }
  .rb-chev { width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s; flex: none; }
  .routebar[open] .rb-chev { transform: rotate(-135deg) translateY(-1px); }
  /* segmented progress edge: one segment per stop, as wide as the stop has frames */
  .rb-seg { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: flex; gap: 2px; padding-inline: 0; }
  .rb-seg i { position: relative; flex: 1; background: var(--hair-2); overflow: hidden; }
  .rb-seg i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(var(--f, 0)); }
  .rb-seg i.past::after { background: var(--ink); }
  .rb-list {
    margin: 0; padding: .25rem var(--gutter) 1rem; background: var(--bg); border-bottom: 1px solid var(--hair);
    max-height: calc(100 * var(--svh) - var(--head) - var(--bar)); overflow: auto; overscroll-behavior: contain;
  }
  /* number, name, frame count: one line, the count at the right. At a large text size they no longer fit one line, and the count moves to a line of its own */
  .rb-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 0; padding: .8rem 0; min-height: 3rem; border-top: 1px solid var(--hair-2); }
  .rb-list li:first-child a { border-top: 0; }
  .rb-list b { flex: none; width: 2.25rem; font: 500 .75rem var(--sans); letter-spacing: .1em; color: var(--ink-2); }
  .rb-list span { flex: 1 1 auto; min-width: 0; font: 400 1.5rem/1 var(--display); }
  .rb-list small { flex: 0 1 auto; margin-left: auto; padding-left: .75rem; font: 500 .75rem var(--sans); letter-spacing: .08em; color: var(--ink-2); text-transform: uppercase; text-align: right; }
  .rb-list a[aria-current] span { color: var(--red); }
  .page-rail { padding-top: var(--head); }
  .js .page-rail { padding-top: var(--top); }
  html.hide-top .top { transform: translateY(-100%); }
  html.hide-top .routebar { transform: translateY(calc(-1 * var(--head))); }
}
/* without JavaScript the bar would be stuck on Stop 1: hide it; the contents list and the stop links still work */
html:not(.js) .routebar, html:not(.js) .readout { display: none; }

/* ---------- Cover (chapter opener, and Stop 01's first frame) ---------- */
.cover { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; }
.cover-text { display: flex; flex-direction: column; gap: 1rem; }
.cover h1 { font: 400 clamp(min(6rem, 26.7vw), 29vw, 11rem)/.8 var(--display); letter-spacing: -.035em; margin: .12em 0 0 .06em; padding-bottom: .16em; }
.dek { font: italic 400 clamp(1.5rem, 6.6vw, 2.25rem)/1.15 var(--display); letter-spacing: -.005em; max-width: 24ch; text-wrap: balance; }
.cover .dek { margin-top: 1.1rem; }
.cover-meta { margin-top: 1.1rem; }
.cue { display: none; }
.cover-sign { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; margin-top: .5rem; }
.frame.cover-frame { margin-inline: calc(-1 * var(--gutter)); }

@media (min-width: 56rem) {
  .cover {
    /* The portrait is narrow: once the photograph is under about 23.7rem wide (its height under 35.5rem, a screen under 48rem tall) the
       one-line gear text no longer fits under it and wraps, and the caption gains a line too. --gear-room is 0 above that and 2.5rem
       (one more gear line, with the usual margin) below it: a clamp over a very steep ramp, i.e. a step that follows the header height. */
    --gear-room: clamp(0rem, calc((var(--top) + 43.75rem - 100 * var(--svh)) * 100), 2.5rem);
    --ph-cover: max(18rem, calc(100 * var(--svh) - var(--top) - 8.25rem - var(--gear-room)));
    grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 4vw, 5rem); padding-top: 1.25rem; min-height: calc(100 * var(--svh) - var(--top));
    align-items: start;
  }
  .cover-text { justify-content: space-between; min-height: calc(var(--ph-cover) + 1rem); padding-bottom: .25rem; }
  .cover-title { display: flex; flex-direction: column; align-items: flex-start; }
  .cover h1 { font-size: clamp(7rem, min(24vw, 40 * var(--svh)), 26rem); margin: -.04em 0 0 -.02em; padding-bottom: .14em; }
  .cover .dek { font-size: clamp(1.7rem, 2.7vw, 3rem); margin-top: .9rem; }
  .cue {
    display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.9rem; padding: 1rem 1.35rem; border: 1px solid var(--ink); border-radius: 999px;
    font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s;
  }
  .cue:hover { background: var(--ink); color: var(--bg); }
  .cue i { font-style: normal; }
  .frame.cover-frame { width: min(calc(var(--ph-cover) * var(--ar)), 44vw); margin-right: calc(-1 * var(--gutter)); margin-left: 0; }
  .cover-frame .gear, .cover-frame figcaption { padding-right: var(--gutter); }
}
@media (min-width: 56rem) and (max-height: 40rem) { .cover-frame .gear { font-size: .75rem; } }   /* a 240px-wide photograph: keep the gear to two lines */
@media (min-width: 69rem) { .cover { padding-top: calc(var(--head) + 1.25rem); min-height: calc(100 * var(--svh)); } }

/* ---------- Frames (every photograph) ---------- */
.frame { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .7rem; grid-template-areas: "photo" "gear" "cap"; min-width: 0; }
.photo { grid-area: photo; display: block; position: relative; background: var(--paper-2); }
.photo img { width: 100%; height: auto; }
.photo::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--edge); pointer-events: none; }
.js .photo[data-lb] { cursor: zoom-in; }
.gear {
  grid-area: gear; text-align: right; text-wrap: balance; font: italic 400 .8125rem/1.35 var(--serif); letter-spacing: .005em; color: var(--ink-2);
  font-variant-numeric: lining-nums; padding-inline: var(--gutter);
}
.frame figcaption { grid-area: cap; padding-inline: var(--gutter); }
.meta { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .2rem; }
.num { font: italic 400 1.625rem/1 var(--display); color: var(--red); font-variant-numeric: lining-nums; }
.line { font: italic 400 1.1875rem/1.35 var(--serif); max-width: 40rem; text-wrap: pretty; }

/* jumping to #frame-NN or a stop lands the photograph just under the fixed bars */
.frame { scroll-margin-top: 1rem; }

/* phones and small tablets: photographs run edge to edge, captions keep the gutter */
@media (max-width: 55.99rem) {
  .photo { margin-inline: calc(-1 * var(--gutter)); }
  .cover-frame .photo { margin-inline: 0; }
  .gear, .frame figcaption { padding-inline: 0; }
  .cover-frame .gear, .cover-frame figcaption { padding-inline: var(--gutter); }
}
/* a tall photograph never grows taller than the screen */
@media (min-width: 37.5rem) and (max-width: 55.99rem) {
  .frame.is-p { width: min(100%, calc(var(--ph) * var(--ar))); margin-inline: auto; }
  .frame.is-p .photo { margin-inline: 0; }
  .frame.is-p .gear, .frame.is-p figcaption { padding-inline: 0; }
}
@media (min-width: 56rem) {
  .gear, .frame figcaption { padding-inline: 0; }
  .photo { box-shadow: var(--shade); }
}

.stop { margin-top: clamp(3.25rem, calc(11 * var(--svh)), 8rem); scroll-margin-top: .25rem; }
.intro, .closing, .sheet { scroll-margin-top: calc(-1 * var(--top)); }   /* these start with generous air of their own */
.stop:first-child { margin-top: 0; }
@media (max-width: 55.99rem) { .stop { margin-top: 2.75rem; } }
.stop-body { display: grid; gap: var(--gap); }

@media (min-width: 56rem) {
  /* one big photograph: photo, gear line and caption fit one screen.
     Row 2 holds the number and place (left) and the gear line (right); row 3 is the caption, as wide as the photograph.
     The gear column is as wide as the line needs, up to 55% of the photograph, and only ever wraps between camera, lens and settings. */
  .plate, .reel .frame, .index-lead {
    grid-template-columns: minmax(0, 1fr) fit-content(55%); column-gap: 2.5rem; row-gap: 0; align-items: baseline;
    grid-template-areas: "photo photo" "meta gear" "line line";
  }
  .plate { width: min(100%, calc(var(--ph) * var(--ar))); }
  .plate figcaption, .reel .frame figcaption, .index-lead figcaption { display: contents; }
  .plate .meta, .reel .frame .meta, .index-lead .meta { grid-area: meta; margin: .7rem 0 .2rem; }
  .plate .line, .reel .frame .line, .index-lead .line { grid-area: line; max-width: none; }
  .plate .gear, .reel .frame .gear, .index-lead .gear { grid-area: gear; justify-self: end; margin-top: .7rem; padding-top: .2rem; max-width: none; }
  .plate .line { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
  .plate.r { margin-left: auto; }
  /* a hero: larger, flush to the right edge of the screen */
  .plate.big { width: min(calc(100% + var(--gutter)), calc(var(--ph-hero) * var(--ar))); margin: 0 calc(-1 * var(--gutter)) 0 auto; }
  .plate.big .gear, .plate.big .line { padding-right: var(--gutter); }
}

/* the deeper band: a gallery-wall moment that runs edge to edge */
@media (min-width: 56rem) {
  .band { position: relative; isolation: isolate; display: grid; padding-block: 1.5rem 1.35rem; }
  .band::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--gutter)) 0 calc(-1 * var(--pl)); background: var(--band); }
  .band .plate { width: min(100%, calc(var(--ph-band) * var(--ar))); margin-inline: auto; }
  .band.wide .plate { width: min(calc(100% + var(--gutter)), calc(var(--ph-band) * var(--ar))); margin: 0 calc(-1 * var(--gutter)) 0 auto; }
  .band.wide .gear, .band.wide .line { padding-right: var(--gutter); }
  .band .photo { box-shadow: var(--shade-band); }
}

/* diptych at one height: a landscape beside a portrait, flush right */
.pair { display: grid; gap: var(--gap); }
@media (min-width: 56rem) {
  /* two columns in the ratio of the photographs, so both come out one height; photo, gear and caption rows are shared */
  .pair {
    --pgap: 1rem; grid-template-columns: var(--cols); grid-template-rows: auto auto auto; column-gap: var(--pgap); row-gap: .7rem; align-items: start;
    width: min(calc(100% + var(--gutter)), calc(var(--ph-pair) * var(--sum) + var(--pgap))); margin-right: calc(-1 * var(--gutter));
    margin-left: auto;      /* when the height cap wins the pair is narrower than the column: it still ends at the screen edge, where the gutter padding below expects it */
  }
  .pair-item { grid-row: 1 / span 3; min-width: 0; grid-template-areas: "photo" "gear" "cap"; }
  .pair-item:last-child .gear, .pair-item:last-child figcaption { padding-right: var(--gutter); }
  .pair-item .gear { padding-top: 0; }
}
@supports (grid-template-rows: subgrid) { @media (min-width: 56rem) { .pair-item { grid-template-rows: subgrid; } } }
@media (min-width: 56rem) and (max-width: 82rem) { .pair-item .gear { font-size: .75rem; } }
/* squarer windows (tablets, 1024 x 768, tall monitors): side by side the two photographs would be small, so each is set like a plate */
@media (min-width: 56rem) and (max-aspect-ratio: 31/20), (min-width: 56rem) and (orientation: landscape) and (max-height: 30rem) {
  .pair { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--gap); width: 100%; margin-right: 0; }
  .pair-item, .pair-item:last-child {
    grid-row: auto; grid-template-rows: none; width: min(100%, calc(var(--ph) * var(--ar))); grid-template-columns: minmax(0, 1fr) fit-content(55%); column-gap: 2.5rem; row-gap: 0;
    align-items: baseline; grid-template-areas: "photo photo" "meta gear" "line line";
  }
  .pair-item.is-p, .pair-item.is-p:last-child { width: min(100%, calc((var(--ph) - 2.5rem) * var(--ar))); }   /* narrow: it needs a row more under the photograph */
  .pair-item:last-child { margin-left: auto; }
  .pair-item figcaption { display: contents; }
  .pair-item .meta { grid-area: meta; margin: .7rem 0 .2rem; }
  .pair-item .line { grid-area: line; font-size: clamp(1.2rem, 1.5vw, 1.5rem); max-width: none; }
  .pair-item .gear, .pair-item:last-child .gear { grid-area: gear; justify-self: end; margin-top: .7rem; padding: .2rem 0 0; font-size: .8125rem; }
  /* the portrait is narrow: gear line right under it, then the number and place, then the caption */
  .pair-item.is-p, .pair-item.is-p:last-child { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "gear" "meta" "line"; }
  .pair-item.is-p .gear { padding-top: 0; }
  .pair-item.is-p .meta { margin-top: .5rem; }
}
@media (max-width: 55.99rem) { .pair { gap: var(--gap); } }

/* a photograph beside its caption, set large; "quiet" is the smaller, calmer version */
@media (min-width: 56rem) {
  .side { --sgap: clamp(2rem, 3.2vw, 5rem); --pw: min(calc(var(--ph) * var(--ar) * .95), calc(100% - 13rem - var(--sgap))); width: 100%; grid-template-columns: minmax(0, var(--pw)) minmax(0, 1fr); column-gap: var(--sgap); grid-template-areas: "photo cap" "gear cap"; align-items: end; }
  .side.flip { grid-template-columns: minmax(0, 1fr) minmax(0, var(--pw)); grid-template-areas: "cap photo" "cap gear"; }
  .side figcaption { align-self: end; padding-bottom: 2.1rem; }
  .side .line { font: italic 400 clamp(1.6rem, 2.1vw, 3.2rem)/1.1 var(--display); letter-spacing: -.01em; max-width: 14em; text-wrap: balance; }
  .side .meta { margin-bottom: 1rem; }
  .side.is-p { --pw: calc(var(--ph) * var(--ar)); }
  .side.is-p figcaption { align-self: center; padding-bottom: 0; }
  /* a portrait is narrow, so its caption sits against it (one gap away) instead of at the far edge of the page; the line is kept
     close to the width its two balanced lines need, so the text itself ends near the photograph, not just its box */
  .side.is-p.flip figcaption { justify-self: end; }
  .side.is-p .line { max-width: 12em; }
  .side .gear { max-width: none; }
  .side.quiet { --pw: min(calc(var(--ph) * var(--ar) * .93), calc(100% - 13rem - var(--sgap))); }
  .side.quiet .line { font: italic 400 clamp(1.2rem, 1.5vw, 1.5rem)/1.35 var(--serif); max-width: 24em; letter-spacing: 0; }
  .side.quiet figcaption { padding-bottom: 2.15rem; }
  .side.quiet .meta { margin-bottom: .2rem; }
}
/* tablets and tall windows (56 to 69rem wide, or squarer than 3:2): there is no room beside the photograph, so a side frame is set
   like a plate: the photograph as wide as the screen height allows, its caption beneath */
@media (min-width: 56rem) and (max-width: 68.99rem), (min-width: 69rem) and (max-aspect-ratio: 3/2) {
  .side:not(.is-p), .side.flip:not(.is-p) {
    width: min(100%, calc(var(--ph) * var(--ar))); grid-template-columns: minmax(0, 1fr) fit-content(55%); column-gap: 2.5rem; row-gap: 0; align-items: baseline;
    grid-template-areas: "photo photo" "meta gear" "line line";
  }
  .side:not(.is-p) figcaption { display: contents; }
  .side:not(.is-p) .meta { grid-area: meta; margin: .7rem 0 .2rem; }
  .side:not(.is-p) .line, .side.quiet:not(.is-p) .line { grid-area: line; font: italic 400 clamp(1.2rem, 1.5vw, 1.5rem)/1.35 var(--serif); letter-spacing: 0; max-width: none; text-wrap: pretty; }
  .side:not(.is-p) .gear { grid-area: gear; justify-self: end; margin-top: .7rem; padding-top: .2rem; }
}
@media (max-width: 55.99rem) {
  .side .line { font: italic 400 clamp(1.75rem, 7.4vw, 2.5rem)/1.12 var(--display); letter-spacing: -.01em; }
  .side .meta { margin-bottom: .45rem; }
  .side figcaption { padding-top: .35rem; }
  .side.quiet .line { font: italic 400 1.1875rem/1.35 var(--serif); letter-spacing: 0; }
}

/* ---------- Intro (inside Stop 01) ---------- */
.intro { padding-block: clamp(3.25rem, calc(10 * var(--svh)), 6.5rem) clamp(2.5rem, calc(7 * var(--svh)), 4.5rem); }
.intro-text { margin-top: 1.25rem; display: grid; gap: 1.6rem; max-width: 64rem; }
.lead { font: 400 clamp(1.625rem, 6vw, 2.25rem)/1.2 var(--display); letter-spacing: -.005em; text-wrap: pretty; max-width: 30ch; }
.intro-cols { display: grid; gap: 1.1rem; color: var(--ink-2); }
.intro-cols p { font-size: 1.0625rem; max-width: 34rem; text-wrap: pretty; }
@media (min-width: 56rem) {
  .lead { max-width: 36ch; font-size: clamp(2rem, 2.9vw, 3rem); }
  .intro-text { gap: 2.25rem; }
  .intro-cols { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .intro-cols p { font-size: 1.125rem; }
}

/* contents: ten stops, one small thumbnail each, with frame numbers */
.contents { margin: 2.25rem 0 0; }
.contents a { display: grid; grid-template-columns: 11px 3.25rem minmax(0, 1fr); align-items: center; gap: .85rem; padding: .3rem 0; position: relative; min-height: 3.25rem; }
.contents .t { grid-column: 2; grid-row: 1; width: 3.25rem; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.contents .t img { width: 100%; height: 100%; object-fit: cover; }
.contents .pin { grid-column: 1; grid-row: 1; align-self: stretch; position: relative; }
.contents .pin::before { content: ""; position: absolute; left: 5px; top: 0; bottom: -.8rem; width: 1px; background: var(--hair); }
.contents li:first-child .pin::before { top: 50%; }
.contents li:last-child .pin::before { bottom: 50%; }
.contents .pin::after { content: ""; position: absolute; left: 0; top: calc(50% - 5.5px); width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink); transition: background .25s, border-color .25s; }
.contents .txt { grid-column: 3; grid-row: 1; display: block; }
.contents .nm { font: 400 min(1.625rem, 8vw)/1 var(--display); }
.contents .nm b { font: 500 .75rem var(--sans); letter-spacing: .1em; color: var(--ink-2); margin-right: .45rem; vertical-align: .18em; }
.contents .ct { font: 500 .75rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0 .6rem; margin-top: .3rem; }
.contents a:hover .pin::after, .contents a:focus-visible .pin::after { background: var(--red); border-color: var(--red); }
@media (min-width: 56rem) {
  .contents { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0 .9rem; margin-top: clamp(2.75rem, calc(7 * var(--svh)), 4.5rem); }
  .contents a { display: block; padding: 0; min-height: 0; }
  .contents .t { display: block; width: 100%; aspect-ratio: 4 / 5; transition: transform .5s var(--ease); }
  .contents a:hover .t, .contents a:focus-visible .t { transform: translateY(-.35rem); }
  .contents .pin { display: block; height: 11px; margin: 1rem 0 .75rem; }
  .contents .pin::before { left: 0; right: -.9rem; top: 5px; bottom: auto; width: auto; height: 1px; }
  .contents li:first-child .pin::before { top: 5px; }
  .contents li:last-child .pin::before { display: none; }
  .contents .pin::after { top: 0; }
  .contents .txt { display: block; }
  .contents li { container-type: inline-size; }
  .contents .nm { display: block; overflow-wrap: anywhere; font-size: 1.15rem; font-size: min(1.4rem, 21cqw); letter-spacing: -.005em; }   /* "Shirakawa-go" is 4.7em wide: it fits its column on one line; with extra letter or word spacing it may break at its hyphen instead of running into its neighbour */
  .contents .nm b { display: block; margin: 0 0 .25rem; }
  .contents .ct { display: block; margin-top: .45rem; font-size: .6875rem; letter-spacing: .08em; }
  .contents .ct span { display: block; }
}
@media (min-width: 56rem) and (max-width: 74rem) { .contents .ct { letter-spacing: .04em; } }

/* ---------- Stop opener (the station sign) ---------- */
.sign {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem;
  padding: 1.25rem 0 clamp(1.5rem, calc(4 * var(--svh)), 2.75rem); border-top: 1px solid var(--ink);
}
.sign::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.sign-kicker { display: flex; align-items: baseline; gap: .8rem; }
.idx { font: italic 400 1.75rem/1 var(--display); color: var(--red); font-variant-numeric: lining-nums; }
.sign h2 { font: 400 clamp(3.6rem, 17vw, 6.5rem)/.9 var(--display); letter-spacing: -.025em; margin: .12em 0 0 -.02em; overflow-wrap: anywhere; }
.hook { font: italic 400 1.1875rem/1.3 var(--serif); color: var(--ink-2); max-width: 26em; text-wrap: balance; margin-top: .2rem; }
.sign-side { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; margin-top: .7rem; }
.mini { display: flex; gap: 6px; align-items: center; position: relative; margin: 0; }
.mini::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; background: var(--hair); }
.mini li { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--dim); }
.mini li.past { background: var(--ink); border-color: var(--ink); }
.mini li.here { background: var(--red); border-color: var(--red); transform: scale(1.5); }
.stop-body { margin-top: .5rem; }
@media (min-width: 69rem) {
  .sign { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kick kick" "name side" "hook side"; align-items: end; padding-top: 1.5rem; column-gap: 3rem; }
  .sign-kicker { grid-area: kick; }
  .sign h2 { grid-area: name; font-size: clamp(5.5rem, 11vw, 12rem); margin: .08em 0 0 -.03em; }
  .hook { grid-area: hook; font: italic 400 clamp(1.35rem, 1.9vw, 1.9rem)/1.25 var(--display); letter-spacing: 0; color: var(--ink-2); margin-top: .4rem; }
  .sign-side { grid-area: side; align-items: flex-end; margin: 0 0 .4rem; align-self: end; }
  .stop-body { margin-top: 1.25rem; }
}

/* ---------- Closing and contact sheet ---------- */
.closing { padding-block: clamp(4.5rem, calc(13 * var(--svh)), 8.5rem) clamp(3rem, calc(8 * var(--svh)), 5rem); margin-top: clamp(3rem, calc(8 * var(--svh)), 6rem); border-top: 1px solid var(--ink); position: relative; }
.closing::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
@media (max-width: 55.99rem) { .closing { margin-top: 1.5rem; padding-top: 2.5rem; } }
.closing-text { font: 400 clamp(2rem, 8vw, 4.25rem)/1.08 var(--display); letter-spacing: -.012em; max-width: 20em; margin-top: 1.5rem; text-wrap: balance; }
.closing-meta { margin-top: 1.75rem; font: 500 .75rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sheet { margin-top: clamp(3rem, calc(8 * var(--svh)), 5rem); }
.sheet-stops { margin-top: 1.1rem; border-top: 1px solid var(--hair); }
.sheet-stops > li { display: grid; gap: .65rem; padding: .95rem 0 1.05rem; border-bottom: 1px solid var(--hair-2); }
.sheet-stop { font: 400 1.5rem/1 var(--display); }
.sheet-stop b { font: 500 .75rem var(--sans); letter-spacing: .1em; color: var(--ink-2); margin-right: .45rem; vertical-align: .18em; }
.sheet-frames { display: flex; flex-wrap: wrap; gap: .5rem; --th: 3.9rem; }
.sheet-frames li { width: calc(var(--th) * var(--ar)); height: var(--th); }
.sheet-frames a { display: block; position: relative; height: 100%; background: var(--paper-2); }
.sheet-frames a::before { content: ""; position: absolute; inset: -.3rem -.2rem; }   /* a 44px hit area around the narrow portrait tiles */
.sheet-frames img { width: 100%; height: 100%; }
.sheet-frames a::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--edge); transition: box-shadow .2s; }
.sheet-n { position: absolute; left: 0; bottom: 0; padding: .2rem .35rem; background: rgba(38, 34, 30, .78); font: 500 .6875rem/1 var(--sans); letter-spacing: .06em; color: #fff; opacity: 0; transition: opacity .2s; }   /* a dark label: legible on snow as well as on shadow */
.sheet-frames a:hover::after, .sheet-frames a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--red); }
.sheet-frames a:hover .sheet-n, .sheet-frames a:focus-visible .sheet-n { opacity: 1; }
@media (min-width: 56rem) {
  .sheet-stops > li { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: 1.5rem; }
  .sheet-frames { --th: 5.25rem; }
}
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

.pill {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .95rem 1.4rem; border: 1px solid var(--ink); border-radius: 999px;
  font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s;
}
.pill::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease); z-index: -1; }
.pill:hover, .pill:focus-visible { color: var(--bg); }
.pill:hover::before, .pill:focus-visible::before { transform: none; }
.pill i { font-style: normal; transition: transform .45s var(--ease); }
.pill:hover i { transform: translateX(.25rem); }
.pill.ghost { border-color: var(--hair); }

/* ---------- Footer ---------- */
.foot { padding: 3.5rem var(--gutter) 1.5rem; border-top: 1px solid var(--hair); margin-top: 2rem; overflow: hidden; }
@media (min-width: 69rem) { .foot.page-rail { padding-left: var(--pl); } }
.foot-mark { display: block; font: 400 clamp(min(3rem, 13.5vw), 13.5vw, 9rem)/.95 var(--display); letter-spacing: -.03em; word-spacing: .06em; padding-bottom: .05em; }   /* the size follows the screen width, not the text size; if it ever runs out of room it wraps between words */
.foot-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: 1.5rem; font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.foot-nav a { padding: 1rem 0; }
.foot-nav a:hover, .foot-row a:hover { text-decoration: underline; text-underline-offset: .3em; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-top: .5rem; font: 500 .75rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.foot-row a { padding: 1rem 0; }

/* ---------- Home ---------- */
.home-hero { display: flex; flex-direction: column; padding-top: calc(var(--head) + 1.75rem); }
.home-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; flex: 1; }   /* one column no child can stretch (a wide control row at a large text size) */
.home-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.home-hero h1 { font: 400 clamp(3rem, 23vw, 8rem)/.84 var(--display); letter-spacing: -.035em; margin: .1em 0 0; word-spacing: .05em; }
.home-hero h1 span { display: inline-block; }
.home-hero .dek { margin-top: .3rem; max-width: 20ch; }
.home-text .pill { margin-top: 1rem; }
.home-route { display: none; }
.reel { margin-inline: calc(-1 * var(--gutter)); }
.reel .photo { margin-inline: 0; }
.reel .gear, .reel figcaption { padding-inline: var(--gutter); }
.reel-stage { display: grid; }
.reel-slide { grid-area: 1 / 1; align-content: start; }
.reel-slide:not(.is-on) { display: none; }
/* a slide is laid out (and so fetched) only once site.js has warmed it: the next one, after the first frame has loaded */
.reel.is-live .reel-slide.is-warm:not(.is-on) { display: grid; opacity: 0; visibility: hidden; }
.reel-ctl { display: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 .5rem; margin-top: .4rem; padding-inline: var(--gutter); }
.reel.is-live .reel-ctl { display: flex; }
.reel-dots { display: flex; }
.reel-dots button { appearance: none; background: none; border: 0; padding: 1.3rem min(.65rem, 1.6vw); min-width: min(2.75rem, 15vw); display: grid; place-items: center; cursor: pointer; }
.reel-dots i { display: block; width: min(1.5rem, 9vw); height: 3px; background: var(--dots); transition: background .3s; position: relative; overflow: hidden; }
.reel-dots button[aria-current="true"] i { background: var(--ink); }
.reel-pause { appearance: none; background: none; border: 0; cursor: pointer; padding: 1rem 0; font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.reel-pause:hover { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .reel.is-live .reel-slide { transition: opacity 1.2s ease, visibility 0s linear 1.2s; }
  .reel.is-live .reel-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.2s ease; }
  /* The photographs crossfade; the words do not. Two slides share one grid cell, so their captions would print over each other for 1.2s:
     the old caption is gone in a quarter of a second, and the new one arrives once its photograph is mostly there.
     (The caption's own box is display: contents on desktop, so its children carry the fade.) */
  .reel.is-live .reel-slide .gear, .reel.is-live .reel-slide .meta, .reel.is-live .reel-slide .line { opacity: 0; transition: opacity .25s ease; }
  .reel.is-live .reel-slide.is-on .gear, .reel.is-live .reel-slide.is-on .meta, .reel.is-live .reel-slide.is-on .line { opacity: 1; transition: opacity .45s ease .75s; }
}
@media (prefers-reduced-motion: reduce) {
  .reel.is-live .reel-slide.is-on { opacity: 1; visibility: visible; }
}
@media (min-width: 56rem), (orientation: landscape) and (max-height: 30rem) {
  /* The first screen is the title and one big frame. The route strip is not part of it: it starts below the fold, so the photograph
     can take the whole height (the dots row and the caption are what the 9.5rem reserves) and the strip is never cut by the screen edge. */
  .home-hero { padding-top: calc(var(--head) + 1rem); }
  .home-main { grid-template-columns: minmax(15rem, 3fr) minmax(0, 9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: calc(100 * var(--svh) - var(--head) - 1rem); padding-bottom: .5rem; }
  .home-hero h1 { font-size: clamp(4.5rem, 8.5vw, 10rem); }
  .home-hero .dek { font-size: clamp(1.4rem, 2.1vw, 2.1rem); }
  .reel { --ph-home: max(16rem, calc(100 * var(--svh) - var(--head) - 9.5rem)); width: min(100%, calc(var(--ph-home) * 1.4997)); margin: 0 0 0 auto; }
  .reel .frame { column-gap: 2rem; }
  .reel .frame .photo { margin-inline: 0; }
  .reel .gear, .reel figcaption { padding-inline: 0; }
  .reel-ctl { padding-inline: 0; }
  .home-text .pill { margin-top: 1.6rem; }
}
@media (min-width: 56rem) {
  .home-text .pill { white-space: nowrap; }       /* the text column is narrow: the label stays on one line (the column has a floor, above) */
  .home-route { display: block; margin-top: 1rem; padding-bottom: 1.5rem; }
  .home-route ol { margin: .9rem 0 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .home-route li { position: relative; }
  .home-route li::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--hair); }
  .home-route li:last-child::before { display: none; }
  .home-route a { position: relative; display: block; padding: 1.5rem 0 .5rem; font: 500 .8125rem/1.2 var(--sans); color: var(--ink-2); }
  .home-route a::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--ink); transition: background .25s, border-color .25s; }
  .home-route li:first-child a::before { background: var(--red); border-color: var(--red); }
  .home-route a:hover { color: var(--ink); }
  .home-route a:hover::before { background: var(--red); border-color: var(--red); }
}

.statement { padding-block: clamp(3.5rem, calc(10 * var(--svh)), 7rem); max-width: 62rem; }
.statement-text { font: 400 clamp(1.9rem, 6.2vw, 3.75rem)/1.12 var(--display); letter-spacing: -.012em; margin-top: 1.25rem; text-wrap: pretty; }
.chapters { padding-bottom: 2rem; }
.sec-head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 1rem; }
.chapter-row { padding: 2.25rem 0 3rem; border-bottom: 1px solid var(--hair-2); }
.cr-head { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .35rem 1rem; align-items: baseline; }
.cr-num { font: italic 400 1.75rem/1 var(--display); color: var(--red); }
.cr-head h3 { font: 400 clamp(min(3.5rem, 15.6vw), 14vw, 8rem)/.9 var(--display); letter-spacing: -.03em; padding-bottom: .12em; }
.cr-head h3 a:hover { font-style: italic; }
.cr-dek { grid-column: 2; font: italic 400 1.375rem/1.3 var(--display); max-width: 28rem; }
.cr-meta { grid-column: 2; margin-top: .5rem; }
.chapter-row .pill { margin-top: 2rem; }
.chapter-row.soon { border-bottom: 0; color: var(--ink-2); }
.chapter-row.soon .cr-head h3 { font-size: clamp(2.5rem, 9vw, 5rem); }
@media (min-width: 56rem) {
  .cr-head { grid-template-columns: 4rem minmax(0, 1fr) auto; }
  .cr-meta { grid-column: 3; grid-row: 1; margin: 0; text-align: right; }
}

/* ---------- Chapters, About, 404 ---------- */
.page-head { padding-top: calc(var(--head) + 2.25rem); padding-bottom: 1.5rem; }
/* Chapters: the first screen is a photograph. On phones it runs edge to edge under the title; from 56rem it sits beside the title, as
   tall as the screen allows with its gear line and caption under it (the left column holds the title above and the dek at the foot). */
.index-head .index-lead { margin-top: 1.75rem; }
@media (min-width: 56rem) {
  .index-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: stretch; padding-top: calc(var(--head) + 1.25rem); }
  .index-head .ih-text { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; }
  .page-head.index-head h1 { font-size: clamp(5rem, min(13vw, 22svh), 11rem); }
  .index-head .index-lead { --ph-lead: max(15rem, calc(100 * var(--svh) - var(--head) - 8.75rem)); width: min(100%, calc(var(--ph-lead) * var(--ar))); margin: 0; justify-self: end; }
}
.page-head h1 { font: 400 clamp(min(4rem, 17.8vw), 17vw, 11rem)/.88 var(--display); letter-spacing: -.035em; margin: .12em 0 .1em -.03em; padding-bottom: .1em; word-spacing: .04em; }
.page-head .dek { margin-top: .5rem; }
.page-head .cta { margin-top: 2rem; }
.lost-route { margin: .5rem 0 1.5rem; }
.lost-route li.gap { border-style: dashed; opacity: .6; }
.about-main { display: grid; gap: 2rem; padding-block: 1rem 3rem; }
.about-text { display: grid; gap: 1.5rem; align-content: start; max-width: 40rem; }
.about-text .statement-text { margin-top: 0; font-size: clamp(1.75rem, 6vw, 2.75rem); }
.about-body { font-size: 1.125rem; color: var(--ink-2); max-width: 34rem; }
.frame.about-frame { margin-inline: calc(-1 * var(--gutter)); }
.about-frame .photo { margin-inline: 0; }
.about-frame .gear, .about-frame figcaption { padding-inline: var(--gutter); }
@media (min-width: 56rem) {
  .about-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
  .frame.about-frame { margin-inline: 0; }
  .about-frame .gear, .about-frame figcaption { padding-inline: 0; }
}
.trio-wrap { padding-bottom: 2rem; }
.trio { display: grid; gap: 0; }
.trio > div { padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--hair-2); display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; align-items: baseline; }
.trio h3 { font: 400 clamp(2.25rem, 8vw, 3.5rem)/1 var(--display); letter-spacing: -.02em; }
.trio p { grid-column: 2; color: var(--ink-2); font-size: 1.125rem; margin-top: .4rem; }
@media (min-width: 56rem) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .trio > div { display: block; padding: 1.75rem 0 0; border-bottom: 0; border-top: 1px solid var(--ink); }
  .trio .cr-num { display: block; margin-bottom: 1.5rem; }
  .trio p { margin-top: .6rem; }
}
.thanks { font: italic 400 clamp(1.5rem, 4vw, 2.25rem)/1.2 var(--display); margin-top: 2.5rem; }

/* ---------- Lightbox: a dark room for the photograph ---------- */
dialog.lb {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  background: var(--lb-bg, #181613); color: #efe9de; overflow: hidden; transition: background-color .45s ease;
}
dialog.lb::backdrop { background: #181613; }
dialog.lb[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem var(--gutter); font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #d6cebf; }
.lb-stop { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
.lb-stop::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: .7rem; }
.lb-stop > span { flex: none; }
.lb-stop > span + span::before { content: "·"; margin-inline: .7rem; opacity: .6; }
.lb-stop > .lb-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lb-count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-stage { min-height: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 0 var(--gutter); touch-action: pan-y pinch-zoom; }
.lb-stage img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.lb-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .85rem var(--gutter) max(1.1rem, env(safe-area-inset-bottom)); }
.lb-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 2rem; min-width: 0; }
.lb-line { font: italic 400 clamp(1.05rem, 1.5vw, 1.3rem)/1.3 var(--serif); }
.lb-gear { font: italic 400 .8125rem/1.3 var(--serif); color: #c4bcaf; margin-left: auto; text-align: right; text-wrap: balance; font-variant-numeric: lining-nums; }
dialog.lb button {
  background: none; border: 1px solid rgba(239, 233, 222, .3); color: inherit; border-radius: 999px; min-width: 2.75rem; height: 2.75rem; padding: 0 1.1rem;
  font: 500 .75rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: border-color .25s, background .25s;
}
dialog.lb button:hover { border-color: #efe9de; background: rgba(239, 233, 222, .08); }
dialog.lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-prev, .lb-next { font-size: 1.1rem !important; letter-spacing: 0 !important; }
@media (max-width: 40rem) {
  .lb-top { letter-spacing: .1em; }
  .lb-pre, .lb-place { display: none; }
  .lb-stop > .lb-name::before { display: none; }
  .lb-stage { padding: 0; }
  .lb-bar { grid-template-columns: 1fr 1fr; grid-template-areas: "cap cap" "prev next"; }
  .lb-cap { grid-area: cap; }
  .lb-prev { grid-area: prev; justify-self: start; } .lb-next { grid-area: next; justify-self: end; }
}
@media (orientation: landscape) and (max-height: 30rem) {
  dialog.lb[open] { grid-template-rows: minmax(0, 1fr); }
  .lb-stage, .lb-top, .lb-bar { grid-area: 1 / 1; }
  .lb-stage { padding: 0; }
  .lb-top, .lb-bar { position: relative; z-index: 1; transition: opacity .25s; }
  .lb-top { align-self: start; padding: .35rem max(var(--gutter), env(safe-area-inset-right)) 1.4rem max(var(--gutter), env(safe-area-inset-left));
    background: linear-gradient(rgba(24, 22, 19, .88), rgba(24, 22, 19, .6) 55%, rgba(24, 22, 19, 0)); }
  .lb-bar { align-self: end; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; gap: .75rem;
    padding: 1.6rem max(var(--gutter), env(safe-area-inset-right)) max(.35rem, env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: linear-gradient(rgba(24, 22, 19, 0), rgba(24, 22, 19, .8) 1.3rem, rgba(24, 22, 19, .92)); }
  .lb-top, .lb-line { text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
  .lb-prev, .lb-next { grid-area: auto; }
  dialog.lb button { padding-inline: .9rem; background: rgba(24, 22, 19, .45); }   /* 44px tall, as everywhere else */
  .lb-cap { flex-wrap: nowrap; justify-content: flex-start; }
  .lb-line { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .lb-gear { display: none; }
  /* a tap on the photograph clears the bars away and brings them back */
  dialog.lb.is-bare .lb-top:not(:focus-within), dialog.lb.is-bare .lb-bar:not(:focus-within) { opacity: 0; pointer-events: none; }
}
html.lb-open { overflow: hidden; }
/* Short landscape screens: a phone held sideways, up to 68.99rem wide and 30rem (480px) tall. The two bars would take a quarter of the height,
   so only the route bar is reserved (the header leaves with the scroll and returns on the way back up), and every frame is one centred
   column about three quarters of the screen tall, uncropped; its caption may run below the fold. Declared last so these rules win over
   the cover, reel, about-page and desktop plate rules above (those would leave a small photograph flush right with an empty left half). */
@media (orientation: landscape) and (max-height: 30rem) and (max-width: 68.99rem) {
  :root { --ph: max(10rem, calc(100 * var(--svh) - var(--bar) - 3.5rem)); --ph-band: var(--ph); --ph-pair: var(--ph); --gap: 2rem; }
  html { scroll-padding-top: var(--bar); }
  .frame { scroll-margin-top: .25rem; }
}
@media (orientation: landscape) and (max-height: 30rem) and (max-width: 55.99rem) {
  .frame, .frame.cover-frame, .frame.about-frame { width: min(100%, calc(var(--ph) * var(--ar))); margin-inline: auto; }
  .frame .photo, .cover-frame .photo { margin-inline: 0; }
  .frame .gear, .frame figcaption, .cover-frame .gear, .cover-frame figcaption, .reel .gear, .reel figcaption, .about-frame .gear, .about-frame figcaption { padding-inline: 0; }
}
@media (orientation: landscape) and (max-height: 30rem) and (min-width: 56rem) and (max-width: 68.99rem) {
  .plate, .plate.r, .plate.big, .band .plate, .band.wide .plate, .side:not(.is-p), .side.flip:not(.is-p), .pair-item, .pair-item:last-child {
    width: min(100%, calc(var(--ph) * var(--ar))); margin-inline: auto;
  }
  .pair-item.is-p, .pair-item.is-p:last-child { width: min(100%, calc((var(--ph) - 2.5rem) * var(--ar))); }
  .plate.big .gear, .plate.big .line, .band.wide .gear, .band.wide .line, .pair-item:last-child .gear, .pair-item:last-child figcaption { padding-right: 0; }
}
@media (orientation: landscape) and (max-height: 30rem) and (max-width: 68.99rem) {
  .home-hero { padding-top: calc(var(--head) + .5rem); }
  .home-main { min-height: 0; padding-bottom: 0; }
  .reel { --ph-home: max(10rem, calc(100 * var(--svh) - var(--head) - 3rem)); }    /* the photograph first; its caption and the dots are just below */
}
@media (orientation: landscape) and (max-height: 30rem) and (max-width: 55.99rem) {
  /* a narrower screen than the desktop hero was drawn for: a third for the title, two thirds for the photograph */
  .home-main { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; }
  .home-hero h1 { font-size: clamp(2.5rem, 9vw, 5rem); }
  .home-hero .dek { font-size: clamp(1.15rem, 2.4vw, 1.6rem); }
  .home-text { gap: .7rem; }
  .home-text .pill { margin-top: .6rem; }
}
/* Forced colours (Windows High Contrast and the like): the browser drops backgrounds, so shapes drawn only as a background would disappear.
   The reel's frame picker, the route bar's segmented progress edge and the desktop rail's line and ticks get system colours instead. */
@media (forced-colors: active) {
  .reel-dots i { background: ButtonText; forced-color-adjust: none; }
  .reel-dots button[aria-current="true"] i { background: Highlight; height: 5px; }
  .rb-seg i { background: GrayText; forced-color-adjust: none; }
  .rb-seg i::after { background: Highlight; }
  .rb-seg i.past::after { background: ButtonText; }
  .rail ol::before, .rail ol::after, .rail .ticks i { forced-color-adjust: none; }
  .rail ol::before { background: GrayText; }
  .rail ol::after { background: Highlight; }
  .rail .ticks i { background: GrayText; }
  .rail .ticks i.seen { background: ButtonText; }
  .rail .ticks i.on { background: Highlight; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.lb[open] { animation: lb-in .3s ease both; }
  .lb-stage img { animation: lb-img .45s var(--ease) both; }
  @keyframes lb-in { from { opacity: 0; } }
  @keyframes lb-img { from { opacity: 0; transform: scale(.985); } }
}
@media (prefers-reduced-motion: reduce) {
  html, .rail ol::after, .rail .dot, .top, .routebar, dialog.lb { transition: none !important; }
}