/* wavie.me — the scroll. Tokens first, then type, then the page. */

:root {
  --paper: #f7f6f2;
  --paper-2: #efede7;
  --ink: #1c1c1a;
  --ink-2: #6f6e6a;
  --ink-3: #c9c7c1;
  --indigo: #2f4f7f;
  --indigo-2: #a9b8cc;
  --cinnabar: #b8312f;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino", Georgia, serif;
  /* Latin first in every CJK stack. A browser resolves a font stack per glyph, so
     English inside a Chinese line comes from Cormorant and only the han characters
     fall through to the CJK face. Without this, a credit like
     「緬甸仰光一景。（Photo by Wavie Hu on Unsplash）」 sets its English in Noto Serif's
     Latin, which is not the site's English face. No local fonts anywhere in these
     stacks: that is Parote's lesson, so mixed 简/繁 never lands on two metrics. */
  --kai: "Cormorant Garamond", "WenKai Site", "LXGW WenKai TC", "Noto Serif SC", "Noto Serif TC", serif;
  --zh: "Cormorant Garamond", "Noto Serif TC", "Noto Serif SC", serif;
  --zh-hans: "Cormorant Garamond", "Noto Serif SC", "Noto Serif TC", serif;

  --gutter: clamp(20px, 5vw, 96px);
  /* A scroll has an edge. Past this the river would be a thread in an empty field and
     the hero would drift away from it, so the page stops widening and centres instead.
     The rail keeps its full-bleed background; only what it holds is bounded. */
  --page-max: 1680px;
  --rim: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  --measure: 40rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15140f;
    --paper-2: #1d1c17;
    --ink: #ebe8e0;
    --ink-2: #a39f95;
    --ink-3: #3a3830;
    --indigo: #8fa6c9;
    --indigo-2: #3d4d66;
    --cinnabar: #d24d48;
  }
}
:root[data-theme="dark"] {
  --paper: #15140f;
  --paper-2: #1d1c17;
  --ink: #ebe8e0;
  --ink-2: #a39f95;
  --ink-3: #3a3830;
  --indigo: #8fa6c9;
  --indigo-2: #3d4d66;
  --cinnabar: #d24d48;
}

html { color-scheme: light dark; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:lang(zh-Hant) { font-family: var(--zh); }
:lang(zh-Hans) { font-family: var(--zh-hans); }   /* her own essays keep the script she wrote them in */
/* Chinese has no italic. Wherever Chinese sits inside an italic line, it stays upright:
   an invariant, so it is allowed to win over whatever local rule set the italic. */
:lang(zh-Hans), :lang(zh-Hant) { font-style: normal !important; font-synthesis-style: none; }
.kai, :lang(zh-Hant).kai { font-family: var(--kai); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--cinnabar); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.small-caps {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* rail */
.rail {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px var(--rim);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(6px);
}
.rail .mark { display: inline-flex; }
.rail nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.rail nav .lead { margin-right: 4px; }
.rail nav a, .rail nav button { display: inline-flex; align-items: center; gap: 8px; }
.rail .lang { color: var(--ink); }
.rail .following { display: none; align-items: center; gap: 10px; color: var(--ink); }
body[data-follow] .rail .following { display: inline-flex; }
body[data-follow] .rail nav.lines { display: none; }
.rail .following .stop { color: var(--ink-2); margin-left: 4px; }
@media (max-width: 720px) {
  .rail { padding: 14px 20px; gap: 12px; }
  .rail nav.lines { flex-wrap: nowrap; overflow-x: auto; gap: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; }
  .rail nav.lines::-webkit-scrollbar { display: none; }
  .rail nav.lines .lead { display: none; }
  .rail nav.lines button { flex: 0 0 auto; font-size: 13px; }
}

/* hero */
.hero {
  position: relative;
  padding: clamp(40px, 8vh, 96px) var(--rim) 0 var(--rim);
  min-height: 62vh;
}
.hero h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(64px, 15.5vw, 228px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.hero .thesis {
  margin: 28px 0 0 4px;
  max-width: 26ch;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.15;
  font-style: italic;
}
.hero .how {
  margin: 22px 0 0 6px;
}
.hero .zh-vertical {
  position: absolute;
  right: var(--rim);
  top: clamp(40px, 8vh, 96px);
  margin: 0;
  writing-mode: vertical-rl;
  font-size: clamp(18px, 2.2vw, 30px);
  letter-spacing: 0.18em;
  color: var(--ink);
}
/* A vertical line must never break into a second column: that reads as a mistake, not
   as a second line. If it cannot fit in one, it lies down instead. */
.hero .zh-vertical { white-space: nowrap; }
@media (max-width: 720px) {
  .hero .zh-vertical { right: 22px; font-size: 17px; top: 200px; }
  .hero .thesis { max-width: 22ch; }
}
/* On a phone there is no room beside the writing for a vertical column, and a line set
   vertically in a 375px window lands on top of the standfirst. A short window is the
   same problem turned on its side. Either way it lies down and joins the flow, which
   is what Chinese does perfectly well. */
@media (max-width: 560px), (max-height: 660px) {
  .hero { min-height: auto; padding-top: clamp(28px, 5vh, 56px); }
  .hero .zh-vertical {
    position: static; writing-mode: horizontal-tb; margin: 20px 0 0 4px;
    font-size: 19px; letter-spacing: 0.12em; max-width: 22ch;
  }
  .hero .thesis { max-width: none; font-size: 21px; }
  .hero .how { max-width: 30ch; font-size: 13px; letter-spacing: 0.08em; }
  .hero h1 { font-size: clamp(48px, 17vw, 96px); }
}

/* Below a laptop's width the water cannot hold twenty-seven names without them
   touching, and a drawing where some marks are named and others are not reads as an
   oversight rather than a choice. So the names come off, and come back one line at a
   time: follow a line and its own names return. A mark still opens when pressed.
   Measured, not guessed: at 1280 nothing has to be dropped, at 1024 three do. */
.river-hint { display: none; margin: 0 auto; padding: 0 var(--rim) 8px; color: var(--ink-3); }
@media (max-width: 1024px) {
  body:not([data-follow]) .river text.label { display: none; }
  body[data-follow] .river text.label.dim { display: none; }
  body:not([data-follow]) .river-hint { display: block; }
}

/* the river */
.river {
  position: relative;
  width: 100%;
  padding-inline: max(0px, calc((100% - var(--page-max)) / 2));
  box-sizing: border-box;
}
.river svg { display: block; width: 100%; height: auto; overflow: visible; }
.river .line { fill: none; transition: opacity 0.4s ease; }
.river .line.ink { stroke: var(--ink); }
.river .line.indigo { stroke: var(--indigo); }
.river .spring { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; transition: opacity 0.4s ease; }
.river .seal { cursor: pointer; transition: opacity 0.4s ease; }
/* The browser draws its own focus box on a focusable <g>, and it frames the invisible
   hit area, so it is both blue and far too big. Keyboard focus says so by filling the
   ring instead, which is the same thing hovering does and needs no box at all. */
.river .seal:focus { outline: none; }
.river .seal:focus-visible { outline: none; }
.river .seal:focus-visible .dot { fill: var(--cinnabar); stroke-width: 2.6; }
.river .seal:focus-visible .stone { fill: var(--ink); }
.river .seal:focus-visible .dun, .river .seal:focus-visible .knot { stroke: var(--cinnabar); }
.river .seal .stone { fill: var(--cinnabar); stroke: none; }
.river .seal:hover .stone, .river .seal:focus .stone { fill: var(--ink); }

/* Where the photographs went. A hairline world on paper: countries stay empty until
   one of her pictures surfaced there, and then they take ink. No colour scale — with
   counts of one to seven a scale would be a decoration pretending to be information;
   the number is in the line under the map. Hong Kong and Singapore have no outline of
   their own at this resolution, so they are drawn as points rather than being folded
   into a neighbour. */
.atlas { max-width: 1120px; margin: 26px auto 6px; padding: 0 var(--gutter); }
.atlas-map svg { display: block; width: 100%; height: auto; }
.atlas .land { fill: none; stroke: var(--ink-3); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.atlas .lit { fill: var(--ink); fill-opacity: 0.14; stroke: var(--ink-2); cursor: pointer; }
.atlas .lit:hover, .atlas .lit:focus, .atlas .lit.on {
  fill: var(--cinnabar); fill-opacity: 0.85; stroke: var(--cinnabar); outline: none;
}
.atlas .spot { fill: var(--ink); fill-opacity: 0.55; stroke: var(--paper); stroke-width: 1.4; cursor: pointer; }
.atlas .spot:hover, .atlas .spot:focus, .atlas .spot.on { fill: var(--cinnabar); fill-opacity: 1; outline: none; }
.atlas-note {
  min-height: 4.4em; margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2);
  max-width: var(--measure);
}
.atlas-note b { color: var(--ink); font-weight: 400; }
.atlas-note .n { font-variant-numeric: tabular-nums; }

/* The record itself, gathered under the place it happened rather than run out flat. */
.usages .group { margin-top: 30px; scroll-margin-top: 90px; }
.usages .group > h3 {
  margin: 0 0 4px 0; font-size: 15px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
}
.usages .group > h3 .n { color: var(--ink-3); margin-left: 8px; }

/* The marker: a small cinnabar ring, the same red as the seal at the foot of every
   page. Its middle is paper, not transparent, so the line stops at the ring instead
   of running through it; nothing is drawn along the line, so no number of them can
   tangle the drawing. Geometry in scroll.js, colour here. */
.river .dot { fill: var(--paper); stroke: var(--cinnabar); stroke-width: 1.6; transition: fill 0.15s ease; }
/* Pointing at one fills it in, the way a seal goes from cut stone to a stamped mark. */
.river .seal:hover .dot, .river .seal:focus .dot { fill: var(--cinnabar); }
.river .seal.dim .dot { stroke: var(--ink-3); fill: var(--paper); }
.river .seal.dim:hover .dot, .river .seal.dim:focus .dot { stroke: var(--cinnabar); fill: var(--cinnabar); }

/* 頓筆: the line's own stroke, briefly heavier where it pauses. No new shape, so it
   cannot clutter; it takes the line's colour and turns with the water. Cinnabar only
   on hover, which keeps red meaning the same thing everywhere on the site. */
.river .dun { fill: none; stroke-linecap: round; }
.river .dun.ink { stroke: var(--ink); }
.river .dun.indigo { stroke: var(--indigo); }
.river .seal:hover .dun, .river .seal:focus .dun { stroke: var(--cinnabar); }
.river .seal.dim .dun { stroke: var(--ink-3); }
.river .seal.dim:hover .dun, .river .seal.dim:focus .dun { stroke: var(--cinnabar); }

/* The knot marker. It is the line's own rope, so it takes the line's colour and never
   its dash: a rope is continuous where it is tied. Cinnabar arrives only on hover, to
   say the knot can be pressed, which keeps red meaning the same thing it means elsewhere. */
.river .knot { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.river .knot.ink { stroke: var(--ink); }
.river .knot.indigo { stroke: var(--indigo); }
.river .grab { fill: transparent; stroke: none; }
.river .seal:hover .knot, .river .seal:focus .knot { stroke: var(--cinnabar); }
.river .seal.dim .knot { stroke: var(--ink-3); }
.river .seal.dim:hover .knot, .river .seal.dim:focus .knot { stroke: var(--cinnabar); }

/* While another line is being followed, a seal off that line must not go translucent:
   the water would show through it and the two drawings would smear together. It keeps
   its full opacity and turns into an empty stone instead, so it still covers the line
   it sits on and still reads as quieter than the line you are following. */
.river .seal.dim { opacity: 1; }
.river .seal.dim .stone { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1; }
.river .seal.dim:hover .stone, .river .seal.dim:focus .stone { fill: var(--ink-3); stroke: none; }
.river .silt { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1; }
.river text {
  font-family: var(--serif);
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
  transition: opacity 0.4s ease;
}
.river text.label { font-size: 15px; font-style: italic; }
.river text .zh { font-family: var(--kai); font-style: normal; font-size: 0.94em; letter-spacing: 0.03em; }
.river text.bank { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-2); }
.river text.year { font-size: 13px; letter-spacing: 0.1em; fill: var(--ink-2); stroke-width: 4px; }
.river text.year.now { fill: var(--ink); }
.river .tick { stroke: var(--ink-3); stroke-width: 1; }
.river .tick.now { stroke: var(--ink); stroke-width: 1.2; }
.river .lagoon { fill: var(--indigo-2); opacity: 0.45; }
.river .ripple { stroke: var(--indigo-2); stroke-width: 1; fill: none; }

.river .dim { opacity: 0.16; }
.river text.dim { opacity: 0.35; }

@media (max-width: 720px) {
  .river text.label { font-size: 12px; }
  .river text.bank { font-size: 10px; }
  .river text.year { font-size: 10px; }
}

/* colophon: the note a seal opens */
.colophon {
  position: absolute;
  width: min(340px, calc(100vw - 48px));
  box-sizing: border-box;
  padding: 20px 22px 18px 22px;
  background: var(--paper);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 0.34s ease, transform 0.34s ease, visibility 0s linear 0.34s;
}
.colophon.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.34s ease, transform 0.34s ease, visibility 0s;
}
.colophon .kicker { padding-right: 30px; }
.colophon .title { margin: 0; font-size: 27px; line-height: 1.05; font-style: italic; font-weight: 400; }
.colophon .title-zh { font-family: var(--kai); font-size: 19px; line-height: 1.3; color: var(--ink-2); margin-top: -6px; }
.colophon .meta { font-size: 14px; letter-spacing: 0.04em; color: var(--ink-2); }
.colophon p { margin: 0; font-size: 15px; line-height: 1.5; }
.colophon .zh-original { font-family: var(--kai); font-size: 17px; }
.colophon .note { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.colophon .read { color: var(--cinnabar); }
.colophon .close { position: absolute; top: 10px; right: 12px; line-height: 1; color: var(--ink-2); }
.colophon .close:hover { color: var(--ink); }

/* A set page: a handful of photographs, each at its own width. The wall next door is
   for choosing among forty-eight; this is for looking. */
.set { display: flex; flex-direction: column; gap: clamp(40px, 6vh, 80px);
       margin: 34px auto 0; padding: 0 var(--gutter); max-width: 1100px; }
.set figure { margin: 0; }
.set img { display: block; width: 100%; height: auto; background: var(--paper-2); }
.set figure.tall { max-width: 680px; margin-inline: auto; }
.set figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--ink-2); font-style: italic; }
.set figcaption:lang(zh-Hans), .set figcaption:lang(zh-Hant) { font-style: normal; }
.set .set-place {
  margin: 10px 0 -14px; font-size: 14px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
}
.set-more { margin-top: clamp(40px, 6vh, 72px); }

/* The chosen photographs, as a wall. Forty-eight at full width is a page nobody
   reaches the bottom of, and the record of where they travelled lives below it.
   Columns rather than a square grid, so no photograph is cropped to fit the wall.
   `.plates` next door is the documentary's grid of stills and is a different thing. */
.chosen { columns: 172px; column-gap: 8px; margin: 30px auto 0;
          padding: 0 var(--gutter); max-width: 1180px; }
.chosen button { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0;
                 background: none; cursor: zoom-in; line-height: 0; }
.chosen img { display: block; width: 100%; height: auto; background: var(--paper-2);
              transition: opacity 0.25s ease; }
.chosen button:hover img, .chosen button:focus-visible img { opacity: 0.72; }

/* One photograph, whole. Same grammar as a colophon: it fades, and the paper closes it. */
.viewer {
  position: fixed; inset: 0; z-index: 60; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: clamp(16px, 4vw, 40px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
}
.viewer.is-open { opacity: 1; visibility: visible; }
.viewer img { max-width: 100%; max-height: 76vh; width: auto; height: auto; object-fit: contain; }
.viewer .cap { margin: 0; font-size: 15px; color: var(--ink-2); font-style: italic; text-align: center; }
.viewer .cap:lang(zh-Hans), .viewer .cap:lang(zh-Hant) { font-style: normal; }
.viewer .shut, .viewer .step {
  position: absolute; background: none; border: 0; color: var(--ink-2);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 10px;
}
.viewer .shut { top: 14px; right: 16px; }
.viewer .step { top: 50%; transform: translateY(-50%); font-size: 26px; }
.viewer .prev { left: 8px; }
.viewer .next { right: 8px; }
.viewer .shut:hover, .viewer .step:hover { color: var(--ink); }

/* The seal wherever it appears outside the river. 五筆, cut 白文: the five strokes
   are masked out of the cinnabar, not painted on top of it, so the knockout shows
   whatever is behind and no dark-mode rule is needed. Geometry: tools/seal.py. */
.seal { display: block; color: var(--cinnabar); flex: none; }
.seal-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* lagoon */
.lagoon-section {
  padding: 40px var(--gutter) 60px var(--gutter);
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.lagoon-section .heading { display: flex; align-items: baseline; gap: 22px; }
.lagoon-section .heading .en { font-size: clamp(40px, 5vw, 60px); line-height: 1; font-weight: 500; }
.lagoon-section .heading .zh { font-family: var(--kai); font-size: clamp(24px, 3vw, 34px); color: var(--ink-2); }
.lagoon-section p { margin: 0; max-width: 620px; font-size: 20px; line-height: 1.5; font-style: italic; }
.lagoon-section form { display: flex; gap: 12px; max-width: 560px; }
.lagoon-section input {
  flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--ink-3); background: var(--paper);
  font: inherit; font-size: 17px; font-style: italic; color: var(--ink);
}
.lagoon-section input::placeholder { color: var(--ink-2); }
.lagoon-section .btn { padding: 12px 22px; border: 1px solid var(--ink-3); color: var(--ink); }
.lagoon-section .btn:hover { border-color: var(--ink); }
.lagoon-section .links { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-top: 18px; font-size: 16px; letter-spacing: 0.06em; }
.lagoon-section footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 70px; padding-top: 16px; border-top: 1px solid var(--ink-3);
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .river .line, .river .spring, .river .seal, .river text { transition: none; }
  .viewer, .viewer.is-open, .chosen img { transition: none; }
  .colophon, .colophon.is-open { transition: none; }
}

/* ─────────────────────────────────────────────────────────────
   Reading pages. Same paper, same hand; the river becomes a margin.
   ───────────────────────────────────────────────────────────── */

.rail .back { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.rail .here { color: var(--ink-2); }

.page {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 80px var(--gutter);
}
.page-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(30px, 6vh, 70px) 0 clamp(26px, 5vh, 54px) 0;
}
.page-head h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(44px, 8vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.page-head .zh {
  font-family: var(--kai);
  font-size: clamp(20px, 3vw, 30px);
  color: var(--ink-2);
  letter-spacing: 0.08em;
}
.page-head .lede {
  margin: 6px 0 0 0;
  max-width: 34ch;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.35;
  font-style: italic;
}
.page-head .facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 8px; }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em 0; font-size: 19px; line-height: 1.72; }
.prose p:lang(zh-Hant) { font-family: var(--zh); }
.prose p:lang(zh-Hans) { font-family: var(--zh-hans); }
.prose p:lang(zh-Hant), .prose p:lang(zh-Hans) { font-size: 17.5px; line-height: 1.95; }
.prose h2 { font-weight: 500; font-size: 30px; line-height: 1.1; margin: 2em 0 0.6em 0; }
.prose blockquote {
  margin: 1.6em 0; padding-left: 20px; border-left: 1px solid var(--ink-3);
  font-style: italic; color: var(--ink-2);
}
.prose figure { margin: 1.8em 0; }
.prose img { display: block; width: 100%; height: auto; background: var(--paper-2); }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* an entry on a long page */
.entry { padding: 0 0 clamp(48px, 7vh, 84px) 0; scroll-margin-top: 90px; }
.entry-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
/* The date reads the same here as it does on a Lagoon issue: quiet, unshouted,
   the same size and tracking. The wording itself is hers and is left alone. */
.entry-head .when { font-size: 14px; letter-spacing: 0.08em; text-transform: none; color: var(--ink-2); }
.entry-head .what { font-family: var(--kai); font-size: 25px; line-height: 1.2; }
.entry .stamp {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 6px; font-size: 14px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-2);
}
.entry .stamp::before { content: ""; width: 26px; height: 1px; background: var(--ink-3); }
.entry .images { display: flex; flex-direction: column; gap: 12px; margin: 1.6em 0; }
.entry .images.pair { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .entry .images.pair { grid-template-columns: 1fr; } }

/* the year rail, echoing the ticks on the river */
.with-years { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 0 32px; }
.years {
  position: sticky; top: 88px; align-self: start;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px; letter-spacing: 0.1em; color: var(--ink-2);
}
.years a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: inherit; }
.years a::after { content: ""; width: 14px; height: 1px; background: var(--ink-3); }
.years a[aria-current="true"] { color: var(--ink); }
.years a[aria-current="true"]::after { background: var(--ink); width: 22px; }
@media (max-width: 900px) { .with-years { grid-template-columns: minmax(0, 1fr); } .years { display: none; } }

/* question and answer */
.qa { padding: 0 0 40px 0; scroll-margin-top: 90px; }
.qa .q { margin: 0 0 14px 0; font-size: 24px; line-height: 1.3; font-style: italic; font-weight: 400; }
.qa .q:lang(zh-Hans), .qa .q:lang(zh-Hant) { font-family: var(--kai); font-size: 23px; line-height: 1.5; }
.qa .a p { margin: 0 0 0.9em 0; }
.qa .when { font-size: 13px; letter-spacing: 0.08em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.month-rule {
  display: flex; align-items: center; gap: 18px; margin: 28px 0 34px 0;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.month-rule::after { content: ""; flex: 1; height: 1px; background: var(--ink-3); }

/* a form on paper */
.ask-form { display: flex; flex-direction: column; gap: 12px; max-width: 34rem; margin: 0 0 20px 0; }
.ask-form textarea, .lagoon-section input, .ask-form input {
  width: 100%; box-sizing: border-box; padding: 12px 16px;
  border: 1px solid var(--ink-3); background: var(--paper);
  font: inherit; font-size: 17px; color: var(--ink); resize: vertical;
}
.ask-form textarea { min-height: 7em; line-height: 1.6; }
.ask-form .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ask-form .btn { padding: 12px 22px; border: 1px solid var(--ink-3); color: var(--ink); }
.ask-form .btn:hover { border-color: var(--ink); }
.fine { font-size: 14px; color: var(--ink-2); max-width: 34rem; }

.page footer.colophon-foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px;
  margin-top: 70px; padding-top: 16px; border-top: 1px solid var(--ink-3);
}
/* An address is written the way it is typed. The small caps around it may shout;
   the mailbox does not. */
/* Wherever small caps run, an address stays as it is typed. The rule has to hang
   off .small-caps, not off one footer: the scroll's own footer is not a .colophon-foot. */
.small-caps a[href^="mailto:"] { text-transform: none; letter-spacing: 0.06em; }

/* ─────────────────────────────────────────────────────────────
   Riverive: a walk you listen to. Water at the top, paper below.
   ───────────────────────────────────────────────────────────── */

.hero-full {
  position: relative;
  min-height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  padding: 0 var(--gutter) clamp(34px, 6vh, 64px) var(--gutter);
  background: #10171c;
  overflow: hidden;
}
.hero-full img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.62;
}
.hero-full .inner { position: relative; color: #f2f1ee; display: flex; flex-direction: column; gap: 12px; }
.hero-full h1 {
  margin: 0; font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(44px, 8.4vw, 118px); line-height: 0.92;
}
.hero-full .sub { font-size: clamp(19px, 2.4vw, 28px); font-style: italic; opacity: 0.92; }
.hero-full .zh { font-family: var(--kai); font-size: clamp(20px, 2.6vw, 30px); letter-spacing: 0.16em; opacity: 0.9; }
.hero-full .stamp {
  font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.78;
  display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 6px;
}

.pull {
  margin: clamp(40px, 7vh, 80px) 0;
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.2; font-style: italic; text-align: center; color: var(--ink);
}
.map-figure { margin: clamp(30px, 5vh, 56px) 0; }
.map-figure img { display: block; width: 100%; height: auto; }
.map-figure figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-2); }

/* the five parts, strung on one line like the river */
.walk { position: relative; padding-left: 42px; }
.walk::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px;
  width: 1px; background: var(--ink-3);
}
.part { position: relative; padding: 0 0 clamp(44px, 6vh, 70px) 0; scroll-margin-top: 90px; }
.part::before {
  content: ""; position: absolute; left: -38px; top: 12px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
}
.part.playing::before { background: var(--cinnabar); border-color: var(--cinnabar); }
.part h2 {
  margin: 0; font-weight: 500; font-size: clamp(30px, 4.4vw, 46px); line-height: 1;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
}
.part h2 .sub { font-size: 0.5em; font-style: italic; color: var(--ink-2); }
.part .where { margin: 10px 0 14px 0; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.part p { margin: 0 0 0.8em 0; font-size: 18px; line-height: 1.65; max-width: var(--measure); }

.player { display: flex; align-items: center; gap: 16px; margin: 18px 0 0 0; max-width: 30rem; }
.player button {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 2px;
  background: var(--cinnabar); display: grid; place-items: center;
}
.player button:hover { background: var(--ink); }
.player button svg { display: block; fill: var(--paper); }
.player .track {
  position: relative; flex: 1; height: 18px; cursor: pointer; touch-action: none;
  display: flex; align-items: center;
}
.player .track::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink-3); }
.player .fill { position: absolute; left: 0; height: 1px; background: var(--ink); width: 0; }
.player .head {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); left: 0; margin-left: -3px;
}
.player .time { flex: 0 0 auto; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.close-lines {
  margin: clamp(40px, 7vh, 78px) 0 0 0; font-size: clamp(22px, 3vw, 34px);
  line-height: 1.3; font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   A long read, in more than one language.
   ───────────────────────────────────────────────────────────── */

.read-head { max-width: var(--measure); }
.read-head .kicker { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.read-head h1 {
  margin: 14px 0 0 0; font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(38px, 6.4vw, 76px); line-height: 1.0;
}
.read-head .standfirst { margin: 16px 0 0 0; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.35; font-style: italic; }

.versions { display: flex; gap: 0; margin: clamp(26px, 4vh, 44px) 0 0 0; border-bottom: 1px solid var(--ink-3); }
.versions button {
  padding: 10px 20px 12px 0; margin-right: 22px; position: relative;
  font-size: 16px; letter-spacing: 0.06em; color: var(--ink-2);
}
.versions button[aria-selected="true"] { color: var(--ink); }
.versions button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 22px; bottom: -1px; height: 2px; background: var(--cinnabar);
}
.version-note {
  max-width: var(--measure); margin: 20px 0 0 0;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.version-note a { color: var(--cinnabar); }
.long-read { max-width: var(--measure); margin-top: clamp(22px, 3.5vh, 38px); }
.long-read h2 {
  font-family: var(--kai); font-weight: 400; font-size: 30px; margin: 0 0 0.7em 0;
}
.long-read p { font-size: 19px; line-height: 1.78; margin: 0 0 1.15em 0; }
.long-read p:lang(zh-Hans), .long-read p:lang(zh-Hant) { font-size: 17.5px; line-height: 2.0; }
.long-read p:first-of-type::first-letter {
  float: left; font-size: 3.3em; line-height: 0.86; padding: 0.06em 0.09em 0 0; font-weight: 500;
}
.long-read p:lang(zh-Hans):first-of-type::first-letter,
.long-read p:lang(zh-Hant):first-of-type::first-letter { float: none; font-size: inherit; padding: 0; }

/* ─────────────────────────────────────────────────────────────
   The lagoon: a letter, and the issues that have gone out.
   ───────────────────────────────────────────────────────────── */

.issue { padding: 0 0 clamp(52px, 8vh, 96px) 0; scroll-margin-top: 90px; }
.issue-head { margin: 0 0 6px 0; font-weight: 400; display: flex; flex-direction: column; gap: 8px; }
.issue-head .no { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.issue-head .name { font-family: var(--kai); font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
.issue .when { font-size: 14px; letter-spacing: 0.08em; color: var(--ink-2); margin-bottom: 26px; }
.issue-head .no { order: -1; }
.piece { max-width: var(--measure); padding: 0 0 30px 0; }
.piece > h3 {
  margin: 0 0 4px 0; font-weight: 400; font-size: 24px; line-height: 1.3;
}
.piece > h3:lang(zh-Hans), .piece > h3:lang(zh-Hant) { font-family: var(--kai); font-size: 26px; }
.piece .alt { font-size: 17px; color: var(--ink-2); margin-bottom: 8px; }
.piece .sub { font-size: 16px; color: var(--ink-2); font-style: italic; margin-bottom: 14px; }
.piece.note { border-left: 1px solid var(--ink-3); padding-left: 20px; }
.piece.note > h3 { font-size: 15px; letter-spacing: 0.1em; color: var(--ink-2); font-family: var(--kai); }
.piece .to {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 6px; color: var(--cinnabar); font-size: 16px;
}
.issue .stamp {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  font-size: 14px; color: var(--ink-2);
}
.issue .stamp::before { content: ""; width: 26px; height: 1px; background: var(--ink-3); }

/* ─────────────────────────────────────────────────────────────
   A film page: the work first, the credits after.
   ───────────────────────────────────────────────────────────── */

.words { max-width: 30ch; font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25; margin: 0; }
.words .w { font-style: italic; }
.words .w::after { content: ", "; font-style: normal; color: var(--ink-2); }
.words .w:nth-last-child(2)::after { content: " and "; font-style: normal; color: var(--ink-2); }
.words .w:last-child::after { content: ""; }

.film { margin: clamp(30px, 5vh, 56px) 0 0 0; }
.film video { display: block; width: 100%; height: auto; background: #10171c; }
.film .under {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 12px; font-size: 15px; color: var(--ink-2);
}
.film .under a { color: var(--cinnabar); }

.credits { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 26px 0 0 0; padding: 0; }
.credits li { list-style: none; font-size: 17px; }
.credits li::before { content: "· "; color: var(--ink-3); }

.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: clamp(30px, 5vh, 56px) 0 0 0; }
.plates img { display: block; width: 100%; height: auto; background: var(--paper-2); }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 18px 0 0 0; }
.strip img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }

/* the signature that closes every page, beside the seal */
.signature {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────
   Where the photographs went.
   ───────────────────────────────────────────────────────────── */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 32px; margin: 0 0 clamp(30px, 5vh, 54px) 0; }
.figures .fig b { display: block; font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; }
.figures .fig span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

.usages { border-top: 1px solid var(--ink-3); }
.use {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) 9rem; gap: 4px 24px;
  padding: 14px 0; border-bottom: 1px solid var(--ink-3); align-items: baseline;
}
.use .when { font-size: 14px; letter-spacing: 0.06em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.use .who { font-size: 18px; }
.use .what { display: block; font-size: 15px; font-style: italic; color: var(--ink-2); margin-top: 3px; }
.use .subj { font-size: 14px; color: var(--ink-2); text-align: right; }
.use .early { font-style: normal; }
@media (max-width: 720px) {
  .use { grid-template-columns: minmax(0, 1fr); }
  .use .subj { text-align: left; }
}

.work-title { font-weight: 500; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; margin: 0 0 10px 0; max-width: var(--measure); }
.entry .to { display: inline-flex; gap: 8px; margin-top: 12px; color: var(--cinnabar); font-size: 16px; }

/* an issue's footnotes: small, and referenced by a superscript mark */
.piece sup { font-size: 0.62em; vertical-align: super; line-height: 0; letter-spacing: 0.02em; }
.footnotes { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--ink-3); display: flex; flex-direction: column; gap: 6px; }
.footnotes p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.footnotes p:lang(zh-Hans), .footnotes p:lang(zh-Hant) { font-size: 14px; line-height: 1.75; }
.piece .sign { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.piece .sign p { margin: 0; font-size: 16px; line-height: 1.7; }
.piece .sign p:lang(zh-Hans), .piece .sign p:lang(zh-Hant) { font-size: 15.5px; }
.piece .sign p:first-child { font-family: var(--kai); font-size: 19px; }

/* The 404 page. Its own small block, because the page has no markup of its own to
   hang styles on and a `style` attribute would be refused by the CSP. */
.gone { max-width: 640px; margin: 0 auto; padding: 18vh var(--gutter) 0; }
.gone h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 400; margin: 0 0 0.4em; }
.gone p { font-size: 18px; line-height: 1.6; }

/* Three rules that used to live in `style` attributes. The strict CSP refuses those,
   and an attribute refused by the CSP fails silently — the rule is simply not there. */
.lagoon-form-email { flex: 1; min-width: 16rem; }
.where-head { scroll-margin-top: 90px; }
.where-more { margin-top: 30px; }

/* A set page's own share of the record. Same rows as the photographs page, in a
   narrower column, because a set has a handful of uses rather than sixty-one. */
.set-went { max-width: 900px; margin: clamp(48px, 8vh, 96px) auto 0; }
.set-went h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 400; margin: 0 0 6px; }
.set-went .lede { margin: 0 0 18px; }
.set-went .uses { border-top: 1px solid var(--ink-3); }
.set-went .fine { margin-top: 16px; }