/*
  BOILERBROKERS - homepage.

  Two rules run through all of this.

  The first is that the pixel typeface carries the identity and the sans carries
  the reading. Silkscreen is used for anything a sign would be engraved with -
  headings, labels, numbers, buttons - and never for a sentence longer than a
  line, because a paragraph set in a bitmap face is a paragraph nobody finishes.

  The second is that nothing is round. The city is drawn on a 32-pixel grid and
  every panel, border and button here is square, hard-edged, and one pixel thick.
  A rounded card would read as a SaaS product sitting on top of a city rather
  than as part of one.
*/

:root {
  /* Sampled from the city rather than chosen: brick, stone, paper, ink, brass. */
  --ink:        #14161c;   /* deep charcoal, the ground everything sits on */
  --ink-2:      #1b1e26;   /* one step up, for panels */
  --ink-3:      #252932;   /* borders and rules on dark */
  --slate:      #3c3c44;   /* the city's own asphalt */
  --brick:      #8f4a3f;   /* muted brick red */
  --brick-dim:  #5e332c;
  --brass:      #9c8f4a;   /* faded bronze, used sparingly */
  --gold:       #c8ae5e;   /* desaturated gold, rarer still */
  --olive:      #4f5a3a;   /* dark olive */
  --moss:       #6f8a4b;   /* muted forest green */
  --cream:      #e8e2d4;   /* aged cream, the paper sections */
  --cream-2:    #d6cfbe;
  --beige:      #b9b1a0;   /* warm beige, body copy on dark */
  --paper:      #ded7c6;
  --paper-ink:  #241f19;

  --display: "Silkscreen", "Courier New", monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --edge: 1px solid var(--ink-3);
  --edge-paper: 1px solid #a89b83;

  --bar-h: 58px;
  --wrap: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--beige);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* Pixel art must never be smoothed. Browsers scale it bilinearly by default,
   which turns a 32-pixel grid into mush at any size but 1:1. */
.map, .placard-art, .broker-art, .window-art { image-rendering: pixelated; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-2); color: var(--cream); padding: 10px 16px;
  font-family: var(--display); font-size: 12px;
}
.skip:focus { left: 12px; top: 12px; }

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }

/* ------------------------------------------------------------------ header */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: rgba(20, 22, 28, 0.62);
  border-bottom: 1px solid rgba(60, 64, 76, 0.5);
  backdrop-filter: blur(6px);
  transition: background 240ms ease, border-color 240ms ease;
}
.bar.settled {
  background: rgba(20, 22, 28, 0.95);
  border-bottom-color: var(--ink-3);
}

.mark {
  font-family: var(--display); font-size: 17px; letter-spacing: 0.06em;
  color: var(--cream); text-decoration: none; white-space: nowrap; margin: 0;
}
.mark span { color: var(--brass); }
.mark.static { font-size: 18px; }

/* Auto on BOTH sides, so the links sit in the middle of what is left between
   the wordmark and the key rather than being shoved against the key. Not
   absolute centring: the two ends are different widths, and pinning the nav
   to the viewport centre puts it under one of them on a narrow desktop. */
.nav { display: flex; gap: 22px; margin: 0 auto; }
.nav a {
  font-family: var(--display); font-size: 13px; letter-spacing: 0.08em;
  color: var(--beige); text-decoration: none; padding: 6px 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--cream); border-bottom-color: var(--brass); }

.key {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.06em;
  color: var(--cream); text-decoration: none;
  padding: 9px 14px;
  background: rgba(37, 41, 50, 0.8);
  border: 1px solid #3a3f4b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.key:hover { background: #2f3440; border-color: var(--brass); transform: translateY(-1px); }

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  overflow: hidden;
  border-bottom: var(--edge);
}

/* The city itself. Held at more than the viewport so it has somewhere to drift
   to, and moved by transform rather than background-position so the browser
   composites it instead of repainting the whole layer every frame. */
.hero-city {
  position: absolute; inset: -6% -6% -6% -6%;
  background: url("assets/city-hero.png") center / cover no-repeat;
  image-rendering: pixelated;
  transform: scale(1.06);
  will-change: transform;
}

/* Fills the drifting layer, so the parallax carries the film exactly as it
   carried the still. object-fit:cover crops rather than squashes - the broker
   is centred in every shot, which is what makes a 16:9 clip survive being put
   behind a portrait phone. */
.hero-video {
  width: 100%; height: 100%; object-fit: cover;
  display: block; border: 0;
}

.hero-grain {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.hero-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14,16,20,0.97) 0%, rgba(14,16,20,0.72) 26%,
                    rgba(14,16,20,0.18) 52%, rgba(14,16,20,0.34) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(10,12,16,0.55) 100%);
}

.hero-copy {
  position: relative;
  width: min(100% - 48px, var(--wrap));
  margin: 0 auto;
  padding-bottom: clamp(56px, 9vh, 110px);
  padding-top: calc(var(--bar-h) + 40px);
  max-width: 780px;
}

.eyebrow {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.22em;
  color: var(--brass); margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5.6vw, 68px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin: 0 0 16px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.6), 0 0 26px rgba(0,0,0,0.5);
}

.tagline {
  font-family: var(--display);
  font-size: clamp(13px, 1.5vw, 17px);
  color: var(--gold);
  margin: 0 0 20px;
  letter-spacing: 0.02em;
}

.body { font-size: 15.5px; color: var(--beige); margin: 0 0 28px; max-width: 62ch; }
.body.wide { max-width: 70ch; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Buttons are signage: a plate, a hard border, and a shadow that suggests it is
   screwed to something. Not a pill. */
.sign {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none;
  padding: 14px 22px;
  background: var(--gold);
  border: 1px solid #7d6c33;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 0 rgba(0,0,0,0.45);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.sign:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 0 rgba(0,0,0,0.5); }
.sign:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 0 rgba(0,0,0,0.5); }

.sign.ghost {
  background: rgba(20, 22, 28, 0.72);
  color: var(--cream);
  border-color: #4a5060;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 2px 0 rgba(0,0,0,0.45);
}
.sign.ghost:hover { background: rgba(32, 36, 45, 0.9); border-color: var(--brass); }

/* ------------------------------------------------------------------ slabs */

.slab { padding: clamp(64px, 9vw, 120px) 0; border-bottom: var(--edge); }
.slab.dark { background: #101218; }
.slab.paper { background: var(--paper); color: var(--paper-ink); }
.slab.press { background: var(--cream); color: var(--paper-ink); }

.index {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.2em;
  color: var(--brass); margin: 0 0 14px;
}
.slab.paper .index, .slab.press .index { color: var(--brick); }

.slab h2 {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.2; margin: 0 0 12px; color: var(--cream);
  letter-spacing: 0.01em;
}
.slab.paper h2, .slab.press h2 { color: var(--paper-ink); }

.stand {
  font-family: var(--display); font-size: clamp(11px, 1.2vw, 14px);
  color: var(--gold); margin: 0 0 22px; letter-spacing: 0.02em;
}
.slab.paper .stand, .slab.press .stand { color: var(--brick); }

.slab.paper .body, .slab.press .body { color: #4a4238; }

.fine {
  font-size: 13px; color: #7d8492; margin-top: 26px; max-width: 74ch;
  border-top: var(--edge); padding-top: 14px;
}
.slab.paper .fine, .slab.press .fine { color: #6b6153; border-top: var(--edge-paper); }

/* ------------------------------------------------------------- 02 district */

/*
  WIDE SCREENS FIRST HERE, which is the opposite of the rest of this file.

  The map is the one thing on the page that is worth the whole window, so full
  bleed and no scrollbar is the base state, and the narrow layout is the
  exception written underneath. Doing it the other way round means the desktop
  rule has to undo a frame, a max-height and an overflow that were only ever
  meant for a phone.
*/
/*
  A BOX, not a bleed.

  Edge to edge sounded right and read wrong: the map ran under the window
  frame with nothing to stop it, so it looked like a screenshot that had
  overflowed rather than a thing placed on a page. It is wider than the text
  column it used to be trapped in - the point of the change - but it now has
  an edge, and the whole district sits inside it with no scrollbar in either
  direction.
*/
.district {
  width: min(100% - 96px, 1720px); margin: 34px auto 0;
}
.map-holder { background: #0d0f14; border: var(--edge); padding: 10px; }
.map-stage { position: relative; }
/* height:auto with no max-height is the whole promise: the map is exactly as
   tall as its own proportions make it, so nothing is cut off and there is
   nothing to scroll in either direction. */
.map { display: block; width: 100%; height: auto; }
.map-note {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.12em;
  color: #6a7180; margin: 12px 2px 0;
}
.directory { display: none; }          /* the popup replaces it on a wide screen */

/* The overlay must not swallow clicks meant for the map underneath it, or
   there is no way to dismiss a pinned popup by clicking the street. */
.pins { position: absolute; inset: 0; pointer-events: none; }
/*
  THE BUILDING IS THE BUTTON, and the plate is only its caption.

  The hit area used to be the little name plate, which is a caption roughly two
  hundred times smaller than the shopfront it describes. Everyone points at the
  shopfront - it is the thing that looks like a door - and nothing happened. The
  button is the building's own footprint now, taken from the map export, and the
  plate rides along at its base where it always sat.
*/
.plot {
  position: absolute; z-index: 1;
  pointer-events: auto; cursor: pointer;
  background: transparent; border: 0; padding: 0;
  outline: 1px solid transparent; outline-offset: -1px;
  transition: background 120ms ease;
}
/* The plate hangs just UNDER the building now rather than inside its box. The
   box is the drawing itself, so bottom:0 would have parked every label across
   its own doorway. */
.plot .tag {
  position: absolute; left: 50%; top: 100%; margin-top: 2px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 5px;
  font-family: var(--display); font-size: 9px; letter-spacing: 0.06em;
  color: var(--beige); background: rgba(16, 18, 24, 0.86);
  border: 1px solid #40465a; padding: 3px 6px;
  white-space: nowrap; line-height: 1;
}
/* The dot carries the state, so a glance over the map says which doors open
   without reading nineteen labels. */
.plot .tag i { width: 5px; height: 5px; background: #6a7180; }
.plot.open .tag i { background: var(--moss); }

/* A wash over the footprint, so what lights up is the building you are pointing
   at rather than a label somewhere near it. */
.plot:hover, .plot:focus-visible, .plot.on {
  outline-color: var(--gold);
  background: rgba(200, 174, 94, 0.12);
  z-index: 3;
}
.plot:hover .tag, .plot:focus-visible .tag, .plot.on .tag {
  border-color: var(--gold); color: var(--gold);
  background: rgba(24, 27, 34, 0.97);
}
.plot:focus { outline-color: transparent; }
.plot:focus-visible { outline-color: var(--gold); }

/* pointer-events:none so the popup can never sit between the cursor and the
   pin that opened it - which is how a hover panel starts flickering. */
/* display:flex OUTRANKS the hidden attribute, whose display:none comes from the
   browser's own sheet at lower specificity. Without the line below the popup
   ignores hidden entirely and sits in the corner of the map from the moment the
   page loads, showing whichever building was described last. */
.pop[hidden] { display: none; }
.pop {
  position: absolute; z-index: 5; width: 288px;
  display: flex; gap: 12px; padding: 12px;
  border: 1px solid var(--gold); background: rgba(13, 15, 20, 0.97);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.pop-art {
  width: 76px; height: 76px; flex: 0 0 76px; object-fit: contain;
  border: var(--edge); background: #0d0f14; image-rendering: pixelated;
}
.pop-name { font-family: var(--display); font-size: 12px; color: var(--cream); margin: 0 0 4px; }
.pop-role {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.1em;
  color: var(--brass); margin: 0 0 7px;
}
.pop-note { font-size: 12.5px; line-height: 1.45; color: var(--beige); margin: 0 0 7px; }
.pop-state {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.08em;
  color: #6a7180; margin: 0;
}
.pop-state.open { color: var(--moss); }

.dir-head {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.18em;
  color: var(--brass); margin: 0 0 12px; padding-bottom: 10px; border-bottom: var(--edge);
}
.dir-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 1px; }
.dir-list button {
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--display); font-size: 10px; letter-spacing: 0.05em;
  color: var(--beige); background: transparent; border: 0;
  padding: 7px 8px; display: flex; justify-content: space-between; gap: 10px;
}
.dir-list button:hover, .dir-list button[aria-current="true"] {
  background: #232833; color: var(--cream);
}
.dir-list .state { color: #6a7180; }
.dir-list .state.open { color: var(--moss); }

.placard { border-top: var(--edge); padding-top: 14px; display: flex; gap: 14px; }
.placard-art { width: 96px; border: var(--edge); background: #0d0f14; }
.placard-name { font-family: var(--display); font-size: 13px; color: var(--cream); margin: 0 0 4px; }
.placard-role { font-family: var(--display); font-size: 9px; color: var(--brass); margin: 0 0 8px; letter-spacing: 0.1em; }
.placard-note { font-size: 13px; color: var(--beige); margin: 0 0 8px; }
.placard-state { font-family: var(--display); font-size: 9px; margin: 0; letter-spacing: 0.08em; color: #6a7180; }
.placard-state.open { color: var(--moss); }

/* -------------------------------------------------------------- 03 brokers */

.rail { overflow: hidden; margin-top: 30px; border: var(--edge); background: #0d0f14; }
.rail-track { display: flex; gap: 0; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.card {
  flex: 0 0 clamp(210px, 21vw, 262px);
  border-right: var(--edge); padding: 0 0 16px;
}
.card:last-child { border-right: 0; }
.broker-art {
  width: 100%; height: 190px; object-fit: cover; object-position: 50% 30%;
  background: #171a21; border-bottom: var(--edge);
}
.card h3 {
  font-family: var(--display); font-size: 13px; color: var(--cream);
  margin: 14px 16px 6px; letter-spacing: 0.03em;
}
.card p { font-size: 13px; color: var(--beige); margin: 0 16px; }
.card .trade {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.12em;
  color: var(--brass); margin: 0 16px 8px;
}

.rail-controls { display: flex; gap: 8px; margin-top: 14px; }
.step {
  font-family: var(--display); font-size: 14px; color: var(--cream);
  background: var(--ink-2); border: var(--edge); width: 40px; height: 34px;
  cursor: pointer; line-height: 1;
}
.step:hover { border-color: var(--brass); color: var(--gold); }

/* -------------------------------------------------------------- 04 economy */

.ledgers { margin-top: 30px; }
.board-head {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.2em;
  color: var(--brick); margin: 34px 0 10px;
}
.ledgers > .board-head:first-child { margin-top: 0; }

/*
  THE RULES ARE DRAWN BY THE CELLS, not by a gap over a coloured board.

  A slab of rule colour showing through 1px gaps only looks like a table while
  the last row is full. Six cards across five columns left four cards' worth of
  bare rule colour under the board like a spilt tray, and that returns at every
  width where the count and the column count disagree - which is most widths.
  With the rules on the cells there is nothing behind them to show through, and
  a part row simply ends where it ends.
*/
.board {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: var(--edge-paper); border-left: var(--edge-paper);
}
/* margin:0 is load bearing. A <dl> carries a 1em margin from the browser, which
   insets every cell inside its own grid area - so the column rules stopped
   short at both ends and the board's edge ran on past them. Under the old
   board-colour-behind-the-gaps design the same margins were what put a bar of
   rule colour above and below the row of cards. */
.cell {
  background: var(--paper); margin: 0; padding: 20px 18px;
  border-right: var(--edge-paper); border-bottom: var(--edge-paper);
}

/* The two values on this board that are links: the contract address and
   LIVE NOW while the sale runs. They keep the value's weight and take the
   brass, so they read as facts you can follow rather than as decoration. */
.cell .addr {
  color: var(--brass); text-decoration: none;
  border-bottom: 1px solid rgba(156, 143, 74, .45);
}
.cell .addr:hover { color: var(--gold); border-bottom-color: var(--gold); }
.cell dt {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.16em;
  color: #6b6153; margin-bottom: 10px;
}
.cell dd {
  font-family: var(--display); font-size: clamp(17px, 2.2vw, 26px);
  color: var(--paper-ink); margin: 0 0 8px;
}
.cell dd.quiet { color: #8a7f6d; font-size: clamp(13px, 1.4vw, 16px); }
.cell .said { font-family: var(--sans); font-size: 12.5px; color: #6b6153;
               margin: 0; line-height: 1.5; }

/* ----------------------------------------------------------- 05 activities */

.windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 32px; }
.win { border: var(--edge); background: var(--ink-2); overflow: hidden; }
.window-art { width: 100%; height: 120px; object-fit: cover; border-bottom: var(--edge); background: #0d0f14; }
.win h3 { font-family: var(--display); font-size: 12px; color: var(--cream); margin: 14px 14px 6px; letter-spacing: 0.05em; }
.win p { font-size: 13px; color: var(--beige); margin: 0 14px 14px; }
.badge {
  display: inline-block; font-family: var(--display); font-size: 8px;
  letter-spacing: 0.14em; padding: 3px 7px; margin: 0 14px 12px;
  border: 1px solid #3a4150; color: #7d8492;
}
.badge.open { color: var(--moss); border-color: #3f5230; }

/* ----------------------------------------------------------------- 06 lore */

.masthead { border-bottom: 3px double #a89b83; padding-bottom: 18px; margin-bottom: 26px; }
.dateline {
  font-family: var(--display); font-size: 9px; letter-spacing: 0.14em;
  color: #6b6153; margin: 10px 0 0;
}
.columns { columns: 3 260px; column-gap: 34px; column-rule: 1px solid #bdb2a0; }
.piece { break-inside: avoid; margin: 0 0 26px; }
.piece h3 {
  font-family: var(--display); font-size: 13px; line-height: 1.35;
  color: var(--paper-ink); margin: 0 0 4px;
}
.piece .slug {
  font-family: var(--display); font-size: 8px; letter-spacing: 0.16em;
  color: var(--brick); margin: 0 0 8px;
}
.piece p { font-size: 13.5px; color: #4a4238; margin: 0; line-height: 1.6; }
.piece.notice { border: 1px solid #a89b83; padding: 14px; background: #e4ddcc; }

/* ---------------------------------------------------------------- 07 close */

.close {
  position: relative; min-height: 88svh; display: grid; place-items: center;
  overflow: hidden; border-bottom: var(--edge); text-align: center;
}
.night, .night-lights {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  image-rendering: pixelated;
}
.night { background-image: url("assets/city-map-night.png"); }
.night-lights {
  background-image: url("assets/city-lights.png");
  mix-blend-mode: screen; opacity: 0.5;
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 0.34; } 50% { opacity: 0.62; } }

.night-veil {
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 50%, rgba(10,12,18,0.35) 0%, rgba(10,12,18,0.86) 100%);
}
.close-copy { position: relative; padding: 60px 24px; max-width: 720px; }
.close h2 {
  font-family: var(--display); font-size: clamp(24px, 4.2vw, 46px);
  line-height: 1.2; color: var(--cream); margin: 0 0 14px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.7);
}
.close .actions { justify-content: center; }

/* -------------------------------------------------------------------- foot */

.foot { background: #0d0f14; padding: 52px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 28px; align-items: start; }
.foot-note { font-size: 13px; color: #7d8492; margin: 8px 0 0; }
.foot-nav, .foot-social { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-nav a, .foot-social a {
  font-family: var(--display); font-size: 10px; letter-spacing: 0.1em;
  color: var(--beige); text-decoration: none;
}
.foot-nav a:hover, .foot-social a:hover { color: var(--gold); }

.skyline {
  height: 74px; margin-top: 40px;
  background: url("assets/city-map-night.png") center bottom / 1400px auto repeat-x;
  image-rendering: pixelated;
  border-top: var(--edge);
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%);
  mask-image: linear-gradient(to bottom, transparent, #000 70%);
}
.legal {
  font-size: 11.5px; color: #5f6673; text-align: center;
  margin: 0; padding: 16px 24px 24px; border-top: var(--edge);
}

/* ---------------------------------------------------------------- movement */

.rise { opacity: 0; transform: translateY(18px); transition: opacity 620ms ease, transform 620ms ease; }
.rise.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .night-lights { animation: none; }
  .hero-city { transform: none; }
  /* Somebody who has asked their machine to stop moving things has asked for
     this too. The poster underneath is the same frame the film opens on. */
  .hero-video { display: none; }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  /*
    BACK TO WHAT WAS THERE BEFORE, and deliberately so.

    Hover does not exist on a phone, so a map whose only way in is hovering a
    building is a map with no way in. Below this width the district returns
    inside the wrap, keeps its frame and its scroll, and the directory list
    underneath does the job the popup does on a desktop - every address named,
    tappable, with its state beside it.
  */
  .district {
    width: min(100% - 48px, var(--wrap)); margin-inline: auto;
    display: grid; grid-template-columns: 1fr; gap: 20px;
  }
  .map-holder { overflow: auto; max-height: 62vh; -webkit-overflow-scrolling: touch; }
  .map-stage { width: 1100px; }
  .pop { display: none; }
  .directory { display: block; border: var(--edge); background: var(--ink-2); padding: 16px; }

  .foot-grid { grid-template-columns: 1fr; }
  .columns { columns: 2 240px; }
}

@media (max-width: 700px) {
  /*
    THE NAVIGATION USED TO BE SWITCHED OFF HERE, not moved into a menu. On a
    phone that left the bar holding a wordmark and one button, and no route at
    all to the city, the brokers, the economy, the lore or the claim page. The
    only way to /claim on a phone was to know the address and type it - during
    a round that was being advertised by its address.

    Two rows rather than a hamburger. There are five short links, and a menu
    that needs a script, a panel and a close handler to reveal five words is
    more that can break than the thing it replaces. The bar takes one more row
    and every page follows it, because the offsets on this site are measured
    from --bar-h rather than from the number 58.
  */
  :root { --bar-h: 96px; }
  .bar { flex-wrap: wrap; align-content: center; gap: 4px 16px; }
  .mark { font-size: 15px; }
  .key { order: 2; margin-left: auto; font-size: 11px; padding: 7px 11px; }
  .nav {
    display: flex; order: 3; flex-basis: 100%;
    margin: 0; gap: 18px;
    /* Sideways if it has to. Wrapping instead would add a third row and change
       the bar height, and the bar height is what every page below is spaced
       from - one long link would push the whole site down. */
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 12px; white-space: nowrap; padding: 2px 0; }

  .hero { min-height: 92svh; }
  /* The hero keeps the city; it just stands closer to it, which is the whole
     point of a cropped view rather than a shrunken one. */
  .hero-city { background-size: auto 118%; background-position: 62% 40%; }
  .hero-copy { padding-bottom: 54px; }
  .map-stage { width: 900px; }
  .map-holder { max-height: 46vh; }
  .columns { columns: 1; column-rule: 0; }
  .actions .sign { flex: 1 1 100%; text-align: center; }
}