/*
  HOODED APE CLUB - 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. 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 the Hood rather than as part of it.
*/

:root {
  /* Sampled from the district 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 district'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;

  /* The one colour that is ours rather than the district's. It appears only on
     the mint plate and on a state that is genuinely open, so it stays a signal
     instead of becoming a theme. */
  --lime:       #ccff00;
  --lime-dim:   #9ec400;

  --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; }
/* The bar is fixed, so an anchor jump lands with its own heading hidden under
   it. The offset is measured from --bar-h rather than from the number 58, so
   the phone layout that makes the bar two rows moves this with it. */
html { scroll-padding-top: calc(var(--bar-h) + 16px); }
@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, .ape-art, .window-art, .pop-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(--lime-dim); }
.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. */
.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(--lime); }

.key {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none;
  padding: 9px 14px;
  background: var(--lime);
  border: 1px solid var(--lime-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: background 160ms ease, transform 160ms ease;
}
.key:hover { background: #d9ff3d; transform: translateY(-1px); }

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

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

/* The district 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;
}

.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;
}

/* The crest is the one illustrated object on the page. It sits in a hard frame
   like every other plate here rather than floating on the artwork, because the
   club's badge is a sign the club hangs, not a sticker it pastes on. */
.crest {
  width: 128px; height: 128px; margin-bottom: 20px;
  border: var(--edge); background: #0d0f14;
  box-shadow: 0 2px 0 rgba(0,0,0,0.5);
}
.foot-crest { width: 64px; height: 64px; border: var(--edge); margin-bottom: 14px; }

.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. The mint plate is the only lime object on
   the page, which is what makes it findable in a dark street. */
.sign {
  font-family: var(--display); font-size: 12px; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none;
  padding: 14px 22px;
  background: var(--lime);
  border: 1px solid var(--lime-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 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); background: #d9ff3d; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 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
  width 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.
*/
.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
   is the building's own footprint, and the plate rides along at its base. */
.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;
}
.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 eight labels. */
.plot .tag i { width: 5px; height: 5px; background: #6a7180; }
.plot.open .tag i { background: var(--lime); }

/* 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); }

/* 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 page load. */
.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(--lime); }

.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(--lime); }

.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(--lime); }

/* ---------------------------------------------------------------- 03 apes */

.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; }
/* The art is a 1024 square with the ape centred and the brand lime behind it,
   so a 190-tall window crops to the head rather than squashing the figure. */
.ape-art {
  width: 100%; height: 190px; object-fit: cover; object-position: 50% 26%;
  background: var(--lime); 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 terms */

.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. 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. */
.cell {
  background: var(--paper); margin: 0; padding: 20px 18px;
  border-right: var(--edge-paper); border-bottom: var(--edge-paper);
}

/* The values on this board that are links: the drop and the stage countdown.
   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 utility */

.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; object-position: 50% 22%; 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(--lime); border-color: #6d7f1f; }

/* -------------------------------------------------------------- 06 record */

.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; }
}

/* -------------------------------------------------------------- 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) {
  /*
    Two rows rather than a hamburger. There are four short links, and a menu
    that needs a script, a panel and a close handler to reveal four 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 district; 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; }
}