@charset "UTF-8";

/* =============================================================================
   DARIA SHARAPOVA

   THE REFUSAL, held on every page and every breakpoint:
   This site never shows a photograph on hover and never enlarges one on click.
   There is no lightbox, at any width. Every picture is at its final size the
   moment it loads. If a picture needs to be bigger, it was the wrong picture.
   The refusal is structural: it removes the standard portfolio interaction,
   it forces the edit to be ruthless, and it means the phone gets the same site
   as the desktop rather than a degraded one.

   THE ONE MOVE:
   The page runs on three clocks and walks down the map. Moscow 55.7558° N,
   New York 40.7128° N, Hawaiʻi 21.5561° N, the volcano 19.4069° N. The ground
   changes temperature as the latitude falls. Nobody is told why.

   Two families. Five sizes. One transition duration. One moving thing.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* The default ground: New York. Bone, and near-monochrome. */
  --ground: #f2f0ec;
  --ink: #14100c;                /* 16.4:1 on ground */
  --ink-soft: #33302b;           /* 11.6:1 */
  --muted: #6c6760;              /*  4.9:1 — labels, captions, credits */
  --rule: #d2cdc4;               /* hairlines only, never text */
  --accent: #b23a12;             /*  5.0:1 — links, the active clock, numerals */

  /* Two families, five sizes, and nothing set outside them. Newsreader carries
     an optical-size axis, so it does the display and the reading both. IBM Plex
     Mono carries Cyrillic, which is the load-bearing reason it is here: all
     Russian on this site is set in the mono and all English editorial in the
     serif, with no toggle and no translation of the city names. Two alphabets,
     two faces, one rule. */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --t-rail: 11px;
  /* 11px was carrying every label, caption, credit, filter and clock: about 170
     elements and 40% of the text on a phone, and it was the one token with no
     fluid range. Captions and credits move up to --t-note; the rail, the section
     numbers and the true labels stay at 11. */
  --t-note: clamp(12.5px, 0.72rem + 0.08vw, 13px);
  --script: "Allura", "Snell Roundhand", cursive;
  --t-script: clamp(64px, 17.5vw, 300px);   /* the wordmark, used once, and it bleeds */
  --t-body: clamp(16px, 0.6rem + 0.6vw, 17px);   /* 16px floor: below it iOS zooms a focused input */
  --t-deck: clamp(21px, 0.95rem + 1vw, 23px);
  --t-title: clamp(37px, 1.1rem + 2.9vw, 52px);
  /* The floor matters more than the ceiling. At the old floors a phone rendered
     title at 29px and mega at 34px, a ratio of 1.16 against 1.69 on the desktop,
     so the scale flattened on the one device most people use. */
  --t-mega: clamp(56px, 0.4rem + 7.2vw, 88px);

  --rail-h: 40px;
  --gutter: 24px;
  --margin-i: clamp(20px, 4.4vw, 64px);
  /* One left edge for the whole site. .page is a centred 1400px column, so past
     that width its text starts further in than a full-bleed element padded
     against the raw viewport. Every full-width thing uses --edge instead, which
     adds back half the leftover so the masthead, the rail, and a bleed caption
     line up with the body text on any screen. */
  --edge: max(var(--margin-i), calc((100% - 1400px) / 2 + var(--margin-i)));
  --measure: 26em;   /* ~66 characters in Newsreader, which averages 0.386em */
}

/* The three climates. Each section declares one; ground, ink and accent move
   together, so a reader crossing from New York into Hawaiʻi feels the
   temperature change without being told that a latitude has passed. */
/* Cold paper, not a second night. Moscow at #1b1e22 sat 1.11:1 from the Hawaii
   ground and the two were never adjacent, so the descent read as one cream page
   with two dark interruptions. Pale and cold, then warm cream, then green-black
   is a fall a reader can actually see. */
.climate-moscow {
  --ground: #e3e8ea;             /* cold light */
  --ink: #12171a;                /* 15.4:1 */
  --ink-soft: #262d31;           /* 11.6:1 */
  --muted: #5b656c;              /* 4.9:1 */
  --rule: #c2cacf;
  --accent: #2c6a88;             /* 5.3:1 — winter light, not fire */
}

.climate-newyork {
  --ground: #f2f0ec;
  --ink: #14100c;
  --ink-soft: #33302b;
  --muted: #6c6760;
  --rule: #d2cdc4;
  --accent: #b23a12;
}

.climate-hawaii {
  --ground: #0e1411;             /* warm green-black */
  --ink: #e9e6dd;
  --ink-soft: #cbc7bc;
  --muted: #93a09a;              /* 6.9:1 */
  --rule: #26302b;
  --accent: #d98a4a;             /* the light, not the leaf */
}

/* Night. Only the bone ground has anywhere to go; the two dark climates are
   already night, so they stay as they are and the rhythm survives intact. */
@media (prefers-color-scheme: dark) {
  :root,
  .climate-newyork {
    --ground: #121110;
    --ink: #eeeae2;
    --ink-soft: #cfcabf;
    --muted: #948d83;            /* 5.6:1 */
    --rule: #2e2b27;
    --accent: #e2683a;           /* 5.6:1 */
  }
}

/* -----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--rail-h);
}

img,
video { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--ground); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ground);
  padding: 12px 20px;
  font: 500 var(--t-rail)/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skip-link:focus { left: 8px; top: 8px; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   3. TYPE
   Serif for English editorial. Mono for every label, every number, every credit,
   and all Russian. The two alphabets never share a face.
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
  font-size: var(--t-title);
}

.mega { font-size: var(--t-mega); line-height: 1; letter-spacing: -0.025em; }

/* Her own words, verbatim. Never smoothed, never corrected, and never used for
   anything the site itself is saying. */
.said {
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
}

.label,
.rail,
.cap,
.clock,
.credits {
  font-family: var(--mono);
  font-size: var(--t-note);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.label {
  display: block;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 18px;
}

/* Russian sets in the mono at the same size as the English beneath it, as a
   second line of equal weight rather than a subtitle. */
.ru { font-family: var(--mono); letter-spacing: 0.06em; }

/* The Russian seam holds, but a monospaced face at display size needs the
   tracking taken out of it, or the word reads as an interface label rather than
   the name of a city. */
.mega.ru { letter-spacing: -0.035em; font-weight: 400; }

.deck {
  font-size: var(--t-deck);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink);
  max-width: 32ch;
  text-wrap: pretty;
}

.body { max-width: var(--measure); }
.body p + p { margin-top: 1.5em; }

.body-lead::first-letter {
  float: left;
  font-size: var(--t-title);
  line-height: 0.82;
  padding: 0.04em 0.1em 0 0;
  color: var(--accent);
}

/* -----------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

html { scroll-padding-bottom: calc(var(--rail-h) + 14px); }

.page {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--margin-i);
}

section[data-place] {
  transition: background-color 420ms ease, color 420ms ease;
  background: var(--ground);
  color: var(--ink-soft);
  padding-block: clamp(72px, 11vh, 150px);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 1099px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --gutter: 14px; } }

/* Spans stand down as the columns run out. Never set inline: an inline style
   beats every media query and the layout silently stops collapsing. */
.c3, .c4, .c5, .c6, .c7, .c8 { grid-column: 1 / -1; }

/* On a phone the grid is two columns, and the smaller spans pair up rather than
   each taking a whole screen. Fourteen full-width plates is a nine-screen
   section; paired, it is five. */
/* On a phone the photographs are the product, so most of them run the full width
   of the screen. Pairing everything to shorten the scroll put 42 of 62 pictures
   under 190px, which is a contact sheet rather than a portfolio. Only the small
   spans pair now, and only where two frames were chosen to sit together. */
@media (max-width: 639px) {
  .c3 { grid-column: span 1; }
  .c3 > .cap { letter-spacing: 0.06em; }
}

@media (min-width: 640px) {
  .c3, .c4, .c5, .c6 { grid-column: span 3; }
  .c7, .c8 { grid-column: span 6; }
}

@media (min-width: 1100px) {
  .c3 { grid-column: span 3; }
  .c4 { grid-column: span 4; }
  .c5 { grid-column: span 5; }
  .c6 { grid-column: span 6; }
  .c7 { grid-column: span 7; }
  .c8 { grid-column: span 8; }
}

.offset { margin-top: clamp(24px, 5vw, 88px); }

/* SECTION OPENERS.
   Every section used to open with the same stack: number, huge title, a gap the
   height of a hand, then a narrow italic deck, then another gap. Ten times, which
   is a template however good the individual parts are. Setting the deck beside the
   title closes the void and lets the sections stop announcing themselves the same
   way. Below 900px it stacks, where stacking is the only sensible option anyway. */
.opener { display: grid; gap: clamp(18px, 2.6vw, 40px); align-items: end; margin-bottom: clamp(30px, 4.4vw, 64px); }

@media (min-width: 900px) {
  .opener { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
  .opener .deck { max-width: 34ch; padding-bottom: 0.35em; }
}

.opener .label { margin-bottom: 12px; }

/* Full bleed. The section is already the width of the screen, so a bleed simply
   fills it; 100vw would add the scrollbar width and force a horizontal scroll. */
.bleed { width: 100%; }
.page > .bleed { margin-inline: calc(-1 * var(--margin-i)); }

/* A bleed that opens a section sits flush to its top edge; otherwise the
   section's own padding leaves a band of ground above the picture. */
section[data-place] > .bleed:first-child { margin-top: calc(-1 * clamp(72px, 11vh, 150px)); }

/* Still Life, Wet, said once and at full width. Four frames flush against each
   other and against both edges of the screen: the section opens with the thing
   it is named after instead of describing it in a grid of the same size as
   everything else on the page. */
.wet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

/* Two horizontal compositions above two vertical ones. One shape for all four
   put an outstretched arm through the right edge of one and cut the raised hand
   off another, which is squeezing rather than framing. */
.wet > .plate { margin: 0; }
.wet > .plate > img { display: block; }

@media (max-width: 767px) { .wet { grid-template-columns: minmax(0, 1fr); } }

/* On a phone the frame is portrait against a portrait screen, so she can sit
   where she was shot rather than being pushed out of the crop. */
@media (max-width: 767px) {
  .sec--shot > .sec-bg > img { object-position: 68% 20%; }
}

/* The picture runs to the trim; its caption still has to respect the margin. */
.bleed > .cap { padding-inline: var(--edge); max-width: calc(34ch + var(--edge)); }

/* A 16/9 opener is 219px tall on a phone, which is a band rather than a picture.
   Section openers take a taller crop where the screen is narrow. */
@media (max-width: 767px) {
  section[data-place] > .bleed > img,
  section[data-place] > .bleed > video {
    aspect-ratio: auto;
    height: 76svh;
    /* Both figures in the Waikīkī opener sit low in the frame, so a centred crop
       takes the tops of their heads off. Bias the crop upward. */
    object-position: 50% 35%;
  }

  /* Openers cut from a landscape source keep a landscape crop. Forcing 5/6 on
     the volcano threw away the sides of the fountain and left mostly ash. */
  section[data-place] > .bleed--wide > img,
  section[data-place] > .bleed--wide > video { aspect-ratio: auto; height: 62svh; }
}

/* -----------------------------------------------------------------------------
   5. PICTURES
   Fixed aspect boxes, so nothing shifts as files arrive. The blurred placeholder
   is painted as the image's own background and covered the moment it loads.
   -------------------------------------------------------------------------- */

.plate { position: relative; }

.plate > img,
.plate > video {
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 5);
  object-fit: cover;
  /* Where the subject actually is. A centred crop of a portrait clip inside a
     16/9 band is all sky, which is what the two section openers were. */
  object-position: var(--focus, 50% 50%);
  background-size: cover;
  background-position: center;
}

.cap {
  display: block;
  font-size: var(--t-note);
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.65;
  letter-spacing: 0.1em;
  /* Follows the width of the picture it belongs to, up to a readable measure,
     rather than being clipped to a fixed count that suits neither a 700px plate
     nor a 200px one. */
  max-width: min(100%, 40ch);
}

.cap b { color: var(--accent); font-weight: 500; }

.cap i {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 4px;
}

/* -----------------------------------------------------------------------------
   6. THE MASTHEAD
   The clip is 1080px wide and that is the ceiling of the archive, so it is never
   asked to fill a 2880px desktop. It stands at its own aspect beside the type,
   which is both sharper and a better composition than a cover-cropped backdrop.
   The wordmark is deliberately the smallest type on the screen.
   -------------------------------------------------------------------------- */

/* THE COVER
   One photograph, full bleed, with her name across it in the signature face the
   previous site used. The gloss is two flat layers over the picture: a warm
   scrim that buys the type its contrast, and one soft highlight raked across the
   frame. Nothing is done to the photograph itself. */

/* Specific enough to beat .plate { position: relative }, which is defined later
   and was leaving the cover photograph in flow, pushing the type off the fold. */
.masthead > .masthead-bg { position: absolute; inset: 0; margin: 0; z-index: 0; }

.masthead > .masthead-bg > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 30%;
}

.masthead-gloss {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* A band under the top bar. The main scrim decays to almost nothing by 30%
       height, which is exactly where the navigation sits, so it measured 1.7:1. */
    linear-gradient(180deg, rgba(6, 7, 9, 0.72) 0%, rgba(6, 7, 9, 0.42) 6%, rgba(6, 7, 9, 0) 13%),
    /* the highlight */
    linear-gradient(196deg, rgba(255, 233, 205, 0.24) 0%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(120% 80% at 80% 8%, rgba(255, 214, 168, 0.26) 0%, rgba(255, 255, 255, 0) 56%),
    /* the type has to sit on something. The left third carries the words, so it
       darkens; the right two thirds stay as photographed. */
    radial-gradient(95% 105% at -6% 76%, rgba(6, 7, 9, 0.94) 0%, rgba(6, 7, 9, 0.8) 30%, rgba(6, 7, 9, 0.42) 52%, rgba(6, 7, 9, 0.08) 70%, rgba(6, 7, 9, 0) 82%),
    linear-gradient(180deg, rgba(8, 9, 11, 0.5) 0%, rgba(8, 9, 11, 0.1) 30%, rgba(8, 9, 11, 0.42) 68%, rgba(8, 9, 11, 0.9) 100%);
}

.masthead > *:not(.masthead-bg):not(.masthead-gloss) { position: relative; z-index: 2; }

/* Her name, with a slow specular pass across the letters. Painted onto the
   glyphs rather than behind them, so it stays crisp at any size. */
.signature {
  white-space: nowrap;
  font-family: var(--script);
  font-weight: 400;
  font-size: var(--t-script);
  /* Set to run off the left trim and, on a wide screen, off the right one too.
     It is a wordmark, not a paragraph: being cut by the edge is the point. */
  margin-left: -0.055em;
  line-height: 0.84;
  letter-spacing: 0.01em;
  margin: 0 0 0.04em -0.05em;
  background: linear-gradient(104deg,
    #f6ede0 0%, #ffffff 17%, #ffd9a8 33%, #ffffff 47%, #f3e4d2 63%, #ffb877 81%, #f7efe4 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 12px 40px rgba(0, 0, 0, 0.55));
  animation: sheen 9s ease-in-out infinite;
}

@keyframes sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .signature { animation: none; background-position: 34% 50%; }
}

.masthead {
  position: relative;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(14px, 2vh, 26px);
  padding: clamp(18px, 3.4vw, 34px);
  padding-inline: var(--edge);
  padding-bottom: calc(clamp(18px, 3.4vw, 34px) + var(--rail-h));
  background: #0b0d0f;
  color: #e6e2da;
  --ink: #fbf8f3;
  --muted: #b9b4ab;
  --accent: #e8834f;
}

.masthead-top {
  min-width: 0;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

/* The sections are reachable from the first screen, in the bar, instead of from
   a ten-row contents page dropped in front of the first photograph. */
.topnav {
  min-width: 0;
  max-width: 100%;
  display: flex;
  gap: clamp(12px, 1.7vw, 26px);
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.topnav a {
  color: #d8d3ca;
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.topnav a:hover,
.topnav a:focus-visible { color: #fff; border-bottom-color: var(--accent); }

@media (max-width: 900px) {
  /* One line that scrolls, rather than three that wrap and eat the cover. */
  .masthead-top { display: block; }
  .topnav {
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding-block: 10px; }
}

.wordmark {
  font-family: var(--mono);
  font-size: var(--t-rail);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f2f0ec;
  text-decoration: none;
}

.masthead-body {
  min-width: 0;
  display: grid;
  gap: clamp(22px, 3.4vw, 52px);
  align-items: end;
  min-height: 0;
}

/* The type holds the left of the screen; the rest of it is the photograph. */
/* The name is allowed to run wider than the words underneath it. */
@media (min-width: 900px) {
  .masthead-role, .masthead-foot { max-width: 34ch; }
  .masthead-line { max-width: 15ch; }
}

.masthead-clip { align-self: end; min-width: 0; }

.masthead-clip > video {
  width: 100%;
  object-fit: cover;
  background-color: #14171a;
}

.masthead-mid {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(18px, 3.4vh, 40px);
  min-width: 0;
}

/* The descent, stated before the reader meets the rail that performs it. Three
   latitudes falling: it is the legend for the clocks, and it is why the first
   screen of a tall dark column is a held breath rather than an empty one. */
.ladder {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Held inside the darkened left third. Run full width and the place names land
     on bright sky, where the accent row measured 1.3:1. */
  max-width: 26ch;
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ladder li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  white-space: nowrap;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #efeae1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

/* The ladder holds the top of the column and everything the page says holds the
   bottom. Two groups, one gap, rather than four things spread evenly down 850px
   of black. */
.masthead-say {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 32px);
}

.ladder-lat { color: #c8cfd4; font-variant-numeric: tabular-nums; }
.ladder li:last-child { color: var(--accent); }
.ladder li:last-child .ladder-lat { color: var(--accent); }

/* The page has to say what she does before it says anything clever. The role
   line is the h1; the Hawaiʻi quote is a pull-quote under it, which is what it
   always was. */
.masthead-role {
  font-size: var(--t-deck);
  font-weight: 400;
  line-height: 1.25;
  color: #fbf8f3;
  letter-spacing: 0;
  max-width: 22ch;
}

.masthead-line {
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-title);
  line-height: 1.04;
  color: #fbf8f3;
  max-width: 14ch;
}

.deck-link {
  font-family: var(--mono);
  font-size: var(--t-rail);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  white-space: nowrap;
}

.masthead-foot { display: flex; gap: clamp(4px, 2.4vw, 30px); flex-wrap: wrap; align-items: baseline; }

/* Every tappable thing clears 44px of height on a phone. Gated on width rather
   than on (hover: none), because a narrow window on a laptop is still a narrow
   window and the padding does no harm there. */
@media (max-width: 767px) {
  /* The bar itself grows so the controls inside it can clear 44px. */
  :root { --rail-h: 52px; }

  .masthead-foot a,
  .clock,
  .rail-name { padding-block: 13px; }
  .wordmark { padding-block: 13px; margin-block: -13px; }
  .contacts a,
  .credits a[href],
  .feed-handle { padding-block: 15px; }
  .index-row a { padding-block: 10px; }

  /* The rail is 52px; its controls fill it rather than floating inside it. */
  .rail-toggle { min-height: 44px; display: inline-flex; align-items: center; }

  /* "The whole book" is a link styled as a button and sits in the flow, so it
     needs its own height rather than the rail's. */
  .page .rail-toggle { min-height: 44px; padding-inline: 16px; }

  /* Inline handles inside running text are still text; give them room without
     turning them into blocks. */
  .cap a { display: inline-block; padding-block: 10px; }
}

.masthead-foot a {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 240, 236, 0.88);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms linear;
}

.masthead-foot a:hover,
.masthead-foot a:focus-visible { border-bottom-color: var(--accent); color: #fff; }

/* On a phone the clip leads and the type sits beneath it. At 1080px wide against
   a 390px viewport it is the sharpest thing on the screen. */
/* On a phone the bar shows the city the reader is standing in, not all three.
   With the Motion control and the seconds, three faces plus the latitude ran off
   the right edge at every phone width. */
@media (max-width: 767px) {
  .masthead { gap: 12px; padding-inline: var(--margin-i); padding-bottom: calc(clamp(18px, 3.4vw, 34px) + var(--rail-h) + 10px); }
  .masthead-body { grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
  .masthead-mid { gap: 12px; }
  .masthead-line { font-size: var(--t-title); max-width: none; }
  .masthead-foot { gap: 2px 14px; }
  .masthead-gloss {
    background:
      linear-gradient(196deg, rgba(255, 233, 205, 0.22) 0%, rgba(255, 255, 255, 0) 40%),
      linear-gradient(180deg, rgba(8, 9, 11, 0.52) 0%, rgba(8, 9, 11, 0.06) 26%, rgba(8, 9, 11, 0.68) 58%, rgba(8, 9, 11, 0.94) 100%);
  }
  --t-script: clamp(64px, 19vw, 116px);
  .ladder { letter-spacing: 0.12em; }
  .ladder li { padding: 7px 0; }
  .masthead-line { max-width: none; }
}


/* -----------------------------------------------------------------------------
   7. THE INDEX
   The only navigation. Number, title, latitude, one entry line.
   -------------------------------------------------------------------------- */

.index-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }

.index-row a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.index-no { font-family: var(--mono); font-size: var(--t-rail); color: var(--muted); }

.index-title { font-size: var(--t-deck); color: var(--ink); display: block; }

.index-entry { display: block; color: var(--muted); font-style: italic; }

.index-lat { font-family: var(--mono); font-size: var(--t-rail); color: var(--muted); white-space: nowrap; }

.index-row a:hover .index-title,
.index-row a:focus-visible .index-title { color: var(--accent); }

@media (max-width: 559px) {
  .index-row a { grid-template-columns: 2rem minmax(0, 1fr); }
  .index-lat { grid-column: 2; }
}

/* -----------------------------------------------------------------------------
   8. THE RECEIPTS
   Two frames and the elapsed time between them. Nothing explains it.
   -------------------------------------------------------------------------- */

.receipts { display: grid; gap: clamp(28px, 5vw, 64px); }

.receipt {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: center;
}

.receipt-gap {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  writing-mode: vertical-rl;
}

@media (max-width: 639px) {
  .receipt { grid-template-columns: 1fr 1fr; }
  .receipt-gap { writing-mode: horizontal-tb; grid-column: 1 / -1; order: -1; text-align: left; }
}

/* The one entry with no photographs, because none exist. The seam is left visible. */
.receipt--words {
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}

.receipt--words p { font-style: italic; color: var(--ink); }

/* -----------------------------------------------------------------------------
   9. THE INVENTORY
   One sentence, no photograph. The only screen on a photographer's site with
   nothing to look at.
   -------------------------------------------------------------------------- */

section[data-place].inventory { padding-block: clamp(110px, 20vh, 240px); }

.inventory blockquote {
  font-size: var(--t-mega);
  font-style: italic;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 20ch;
  color: var(--ink);
  hanging-punctuation: first;
}

/* Her caption, quoted and dated, so her writing is not read as the site's. */
.said-block p { font-style: italic; font-weight: 300; color: var(--ink); }
.said-block cite {
  display: block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: var(--t-rail);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.inventory cite {
  display: block;
  margin-top: 36px;
  font-family: var(--mono);
  font-size: var(--t-rail);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -----------------------------------------------------------------------------
   10. DISPATCHES
   -------------------------------------------------------------------------- */

.beats { display: grid; gap: clamp(28px, 4vw, 48px); }

@media (min-width: 700px)  { .beats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .beats { grid-template-columns: repeat(3, 1fr); } }

.beat { border-top: 1px solid var(--rule); padding-top: 18px; }

.beat h3 {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.beat .said { display: block; font-size: var(--t-deck); margin: 10px 0 12px; line-height: 1.28; }
.beat .plate { margin-top: 16px; }

/* The single most-watched thing she has made gets its own space rather than a
   190px slot in a scroller. The figure is the headline; the film is the proof. */
.headliner { display: grid; gap: clamp(20px, 3vw, 44px); align-items: center; margin-bottom: clamp(34px, 5vw, 64px); }

@media (min-width: 760px) { .headliner { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } }

.headliner-clip > video { width: 100%; }

.headliner-figure {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mega);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.headliner-note .cap { max-width: 40ch; margin-top: 14px; text-transform: none; letter-spacing: 0.02em; }

/* Reproduced as posted, captions and emoji intact, each with its real number.
   Printing 931 next to 3,700,000 is the point. */
.reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 230px);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  overscroll-behavior-x: contain;
}

.reel > * { scroll-snap-align: start; }
.reel .cap { text-transform: none; letter-spacing: 0.04em; max-width: none; }


/* -----------------------------------------------------------------------------
   10a. THE FEEDS
   The site exists to send people to the accounts, so the handles are set at
   reading size, the numbers are real and dated, and the follow buttons appear
   twice: once with the feeds and once at the end of the reel.
   -------------------------------------------------------------------------- */

/* A SECTION SET ON A PHOTOGRAPH
   Same construction as the cover: the picture behind, one scrim over it, the
   content above. Used where a pale ground was leaving a screen with nothing on
   it but words. */
.sec--shot {
  position: relative;
  overflow: hidden;
  --ground: #0b0d0f;
  --ink: #fbf8f3;
  --ink-soft: #ddd8cf;
  --muted: #b9b4ab;
  --rule: rgba(255, 255, 255, 0.24);
  --accent: #e8834f;
  color: var(--ink-soft);
  background: #0b0d0f;
}

/* The picture holds the top of the section and dissolves into the ground. A
   section two thousand pixels tall on a phone would otherwise crop a portrait
   frame to a narrow vertical strip of whatever happened to be behind her. */
.sec--shot > .sec-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100%, 150svh);
  margin: 0;
  z-index: 0;
}

.sec--shot > .sec-bg > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 74% 30%;
}

.sec-gloss {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100%, 150svh);
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(110% 90% at 82% 6%, rgba(255, 214, 168, 0.18) 0%, rgba(255, 255, 255, 0) 58%),
    /* Enough to read the type against, and no more. At 0.74 to 0.9 the
       photograph underneath was not visible at all, which is a dark rectangle
       with extra steps. */
    linear-gradient(180deg, rgba(7, 8, 10, 0.74) 0%, rgba(7, 8, 10, 0.40) 34%, rgba(7, 8, 10, 0.72) 78%, #0b0d0f 100%);
}

.sec--shot > *:not(.sec-bg):not(.sec-gloss) { position: relative; z-index: 2; }

/* Three handles used three full screens on a phone, each with a sentence and two
   statistics. One line of identity and one number each fits them on one. */
.feeds { list-style: none; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 34px); }

@media (min-width: 760px)  { .feeds { grid-template-columns: repeat(3, 1fr); } }

.feed { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 6px; align-content: start; }

.feeds-note {
  margin-top: clamp(20px, 2.6vw, 34px);
  font-family: var(--mono);
  font-size: var(--t-note);
  letter-spacing: 0.08em;
  color: var(--muted);
  max-width: 46ch;
}

.feed-plat {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.feed-handle {
  font-size: var(--t-deck);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  /* Two of the three handles end in an underscore, which collides with the rule
     unless the rule is given somewhere to sit. */
  padding-bottom: 5px;
  justify-self: start;
  word-break: break-word;
}

.feed-handle:hover { color: var(--accent); }



/* The numbers are the argument, so the figure is set at reading size and the
   words around it stay small. Six million views rendered at 11px in caption grey
   was the site hiding its own best evidence. */
.feed-stat {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.5;
}

.feed-stat b {
  display: block;
  font-size: var(--t-deck);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
}

.feed:first-child .feed-stat:first-of-type b { color: var(--accent); }

/* A square grid, because that is what the feed it points at looks like. */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

@media (min-width: 700px) { .ig-grid { grid-template-columns: repeat(4, 1fr); } }

.clients { max-width: var(--measure) !important;
  max-width: 74ch;
  color: var(--ink-soft);
  margin-bottom: clamp(30px, 4vw, 52px);
}

.follow-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.btn {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ground);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 13px 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: background 120ms linear;
}

.btn:hover { background: transparent; color: var(--accent); }

/* -----------------------------------------------------------------------------
   11. COMMISSIONS
   -------------------------------------------------------------------------- */

.services { list-style: none; padding: 0; border-top: 1px solid var(--rule); }

.service {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 6px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 559px) { .service { grid-template-columns: 1fr; } }

.service h3 {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.service p { font-style: italic; color: var(--muted); }

.contacts { display: grid; gap: 22px; margin-top: 44px; }
@media (min-width: 700px) { .contacts { grid-template-columns: repeat(3, 1fr); } }

.contacts h3 {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}

.contacts a {
  font-size: var(--t-body);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  /* Break at the @ and the dot, never through a word. */
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.5;
  display: inline-block;
  margin-top: 6px;
}

.contacts a:hover { color: var(--accent); }

.contacts-plain { display: block; margin-top: 6px; color: var(--ink-soft); }

/* -----------------------------------------------------------------------------
   12. THE LATITUDE RAIL
   Fixed to the foot of every page. The wordmark, three live clocks, and the
   latitude of wherever the reader currently is on the map. The active clock
   walks left to right as the page descends. The site's one moving thing.
   -------------------------------------------------------------------------- */

/* The rail resolves its colours from whichever climate the reader is standing in,
   stamped on :root by site.js. Transitioned, because this is the one place on the
   site where a crossfade is right: the ground is changing temperature, not turning
   a page. */
:root[data-climate="moscow"] .rail {
  --ground: #e3e8ea; --ink: #12171a; --muted: #5b656c; --rule: #c2cacf; --accent: #2c6a88;
}

/* The cover keeps its own stock. It is the one screen that is not part of the
   descent, and a pale bar across a black opening screen was the site's clearest
   colour lie in the other direction. */
:root[data-climate="cover"] .rail {
  --ground: #0b0d0f; --ink: #fbf8f3; --muted: #b9b4ab; --rule: #23262a; --accent: #e8834f;
}

:root[data-climate="hawaii"] .rail {
  --ground: #0e1411; --ink: #e9e6dd; --muted: #93a09a; --rule: #26302b; --accent: #d98a4a;
}

.rail {
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(var(--rail-h) + env(safe-area-inset-bottom));
  transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  height: var(--rail-h);
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
  padding-inline: var(--edge);
  background: var(--ground);
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

.rail-motion[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

.rail-name { color: var(--ink); text-decoration: none; letter-spacing: 0.2em; font-weight: 500; }

/* Everything in the bar changes temperature together. Declared on .rail alone,
   the transition did not inherit, so the ground crossfaded while the type cut. */
.rail-name,
.rail-lat,
.rail-toggle,
.clock,
.clock b { transition: color 420ms ease, border-color 420ms ease; }

.clocks { display: flex; gap: clamp(10px, 2vw, 26px); margin-left: auto; }

.clock {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms linear;
}

.clock[data-active] { color: var(--ink); }
.clock[data-active] b { color: var(--accent); }
.clock b { font-weight: 400; }
.clock:hover { color: var(--ink); }

.rail-lat { color: var(--ink); white-space: nowrap; }

/* On a phone the wordmark and latitude go, and the three clocks carry the bar. */
@media (max-width: 760px) {
  .rail-name { display: none; }
  .clocks { margin-inline: auto; gap: 14px; }
}

@media (max-width: 639px) {
  .clocks:has([data-active]) .clock:not([data-active]) { display: none; }

  /* Everything in the bar earns its width again: one city instead of three, the
     motion control drawn rather than spelled, and the tracking eased off. */
  .rail { gap: 8px; padding-inline: 14px; letter-spacing: 0.06em; }
  .clock, .rail-lat, .rail-toggle { letter-spacing: 0.06em; }

  .rail-motion { padding-inline: 9px; }
  .rail-motion-word {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rail-motion::before {
    content: "";
    display: block;
    width: 9px; height: 11px;
    border-inline: 3px solid currentColor;
  }
  .rail-motion[aria-pressed="true"]::before {
    width: 0; height: 0;
    border: 6px solid transparent;
    border-inline-start: 10px solid currentColor;
  }
}

/* An SE-width screen: the bar keeps all four of its parts by dropping a point,
   rather than by dropping the descent. */
@media (max-width: 344px) {
  .rail { --t-rail: 10px; gap: 6px; padding-inline: 11px; }
  .rail-toggle { padding-inline: 7px; }
}


.rail-toggle {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 1px solid var(--muted);
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
}

.rail-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* -----------------------------------------------------------------------------
   13. THE INDEX OVERLAY
   -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ground);
  padding: clamp(20px, 5vw, 64px);
  overflow-y: auto;
  display: none;
}

.overlay.is-open { display: block; }

.overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 28px;
}

/* -----------------------------------------------------------------------------
   14. THE BOOK, IN FULL
   -------------------------------------------------------------------------- */

/* The book is an edited run, not a sheet of tiles. Twelve columns, a five-beat
   rhythm that closes each row exactly, and every picture at its own shape. The
   beat is written by work.js onto the visible plates, so filtering down to nine
   portraits keeps the rhythm instead of leaving holes where hidden ones were. */
.book-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.6vw, 36px);
  row-gap: clamp(30px, 4vw, 64px);
  align-items: start;
}

.book-grid > .plate { grid-column: span 4; }
.book-grid > [data-beat="1"] { grid-column: span 5; }
.book-grid > [data-beat="2"] { grid-column: span 7; }
.book-grid > [data-beat="3"],
.book-grid > [data-beat="4"] { grid-column: span 3; }
.book-grid > [data-beat="5"],
.book-grid > [data-beat="6"],
.book-grid > [data-beat="7"] { grid-column: span 6; }

@media (max-width: 1099px) {
  .book-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .book-grid > .plate { grid-column: span 2; }
  .book-grid > [data-beat="1"],
  .book-grid > [data-beat="2"] { grid-column: span 3; }
  .book-grid > [data-beat="3"],
  .book-grid > [data-beat="4"],
  .book-grid > [data-beat="5"] { grid-column: span 2; }
  .book-grid > [data-beat="6"],
  .book-grid > [data-beat="7"] { grid-column: span 3; }
}

@media (max-width: 639px) {
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  /* Three of every seven run the full width, and the four that pair up are an
     even number, so the cycle closes and nothing is stranded beside a gap. */
  .book-grid > .plate { grid-column: span 1; }
  .book-grid > [data-beat="1"],
  .book-grid > [data-beat="2"],
  .book-grid > [data-beat="5"] { grid-column: span 2; }
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 34px; padding: 0; list-style: none; }

@media (max-width: 767px) {
  .filter { min-height: 44px; padding-block: 12px; }
  .deck-link { display: inline-block; padding-block: 12px; }
}

.filter {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--muted);
  color: var(--muted);
  padding: 7px 11px;
  cursor: pointer;
  transition: color 120ms linear;
}

.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ground); background: var(--accent); border-color: var(--accent); }

.plate[hidden] { display: none; }

/* -----------------------------------------------------------------------------
   15. CREDITS
   -------------------------------------------------------------------------- */

.credits {
  border-top: 1px solid var(--rule);
  padding-block: clamp(40px, 6vw, 72px);
  display: grid;
  gap: 18px;
  color: var(--muted);
  line-height: 1.9;
}

@media (min-width: 800px) { .credits { grid-template-columns: repeat(3, 1fr); } }

.credits a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.credits a:hover { color: var(--ink); border-color: var(--accent); }

/* -----------------------------------------------------------------------------
   15a. THE GATE
   A soft lock, not a wall. See the note at the top of gate.js.
   -------------------------------------------------------------------------- */

:root[data-locked] body > *:not(.gate) { display: none !important; }

/* The ground goes dark too, so overscroll and the browser chrome match the gate
   rather than flashing the paper colour of a page nobody has unlocked yet. */
:root[data-locked],
:root[data-locked] body { background: #0b0d0f; padding-bottom: 0; }
:root:not([data-locked]) .gate { display: none; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--margin-i);
  background: #0b0d0f;
  color: #f2f0ec;
  --ink: #fbf8f3;
  --muted: #b9b4ab;
  --accent: #e8834f;
  --ground: #0b0d0f;
}

.gate form { display: grid; gap: 14px; justify-items: start; width: min(320px, 100%); }

.gate .wordmark { color: #f2f0ec; margin-bottom: 10px; }

.gate-label {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.gate input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--muted);
  color: #fbf8f3;
  font-family: var(--mono);
  font-size: var(--t-body);
  letter-spacing: 0.1em;
}

.gate input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gate-note {
  font-family: var(--mono);
  font-size: var(--t-rail);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  min-height: 1em;
}

/* -----------------------------------------------------------------------------
   16. REDUCED MOTION
   There is no entrance animation to disable, which is the point: the only thing
   that moves is the clock, and a stopped clock is broken rather than calm. What
   this block does is drop the one transition and hand video back to the reader,
   so nothing on the page changes on its own without being asked.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .reel { scroll-behavior: auto; }
}

/* -----------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */

@media print {
  /* Every climate resolves to ink on paper. Without this the two dark grounds
     kept their light type and printed as near-white on white. */
  :root,
  .climate-moscow,
  .climate-newyork,
  .climate-hawaii,
  .masthead {
    --ground: #fff;
    --ink: #000;
    --ink-soft: #111;
    --muted: #444;
    --rule: #bbb;
    --accent: #000;
    background: #fff !important;
    color: #000 !important;
  }

  @page { margin: 18mm; }
  body { background: #fff; color: #000; }
  .masthead { min-height: auto; }
  .rail, .gate, #index, .filters, .skip-link { display: none !important; }
  .reel { overflow: visible; display: block; }
  section[data-place] { padding-block: 0; break-inside: auto; }
  .plate { break-inside: avoid; }
  .credits a[href^="http"]::after { content: " (" attr(href) ")"; }
}