/* MarketRunner: a site plan. Fine grid, cobalt ink, one signal color, an editorial serif. */
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light dark;
  --page: #f1f3f7;
  --ink: #0d1a45;
  --soft: #47527a;
  --line: #1b34c9;
  --grid: rgb(27 52 201 / .07);
  --hair: rgb(13 26 69 / .28);
  --signal: #e4500f;
  --lit: rgb(228 80 15 / .16);
  --link: #1b34c9;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0a1230;
    --ink: #eef1fb;
    --soft: #a7b1d6;
    --line: #8ea0ff;
    --grid: rgb(142 160 255 / .08);
    --hair: rgb(238 241 251 / .26);
    --signal: #ff8a4c;
    --lit: rgb(255 138 76 / .2);
    --link: #aab8ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Instrument Sans", system-ui, sans-serif;
  background-color: var(--page);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
a { color: var(--link); text-underline-offset: .18em; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.label { margin: 0; font: 500 .8rem/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }

.top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 24px 14px; border-bottom: 1px solid var(--hair); }
.logo { color: inherit; text-decoration: none; font: 400 1.75rem/1 "Instrument Serif", Georgia, serif; }
.logo em { color: var(--line); }

.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding-block: clamp(36px, 6vw, 80px); }
h1 { margin: 0; font: 400 clamp(3rem, 7vw, 6.1rem)/.98 "Instrument Serif", Georgia, serif; letter-spacing: -.015em; text-wrap: balance; }
h1 em { color: var(--line); }
.lede { margin: clamp(22px, 3vw, 34px) 0 0; max-width: 34rem; font-size: clamp(1.13rem, 1.7vw, 1.3rem); line-height: 1.5; color: var(--ink); }

.plan { margin: 0; }
.plan svg { display: block; width: 100%; height: auto; max-height: 76vh; }
.plan-lines { fill: none; stroke: var(--line); stroke-width: 1.5; }
.stalls rect { fill: var(--page); }
.lit { fill: var(--lit); stroke: var(--signal); stroke-width: 2.5; }
.route { stroke: var(--signal); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; animation: walk 2.4s linear infinite; }
.dot { fill: var(--signal); stroke: none; }
.plan-text { fill: var(--soft); font: 500 15px "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .08em; }
.plan figcaption { margin-top: 10px; font-size: .92rem; color: var(--soft); }
@keyframes walk { to { stroke-dashoffset: -44; } }
@media (prefers-reduced-motion: reduce) { .route { animation: none; } }

.who, .stand { display: grid; grid-template-columns: 200px 1fr; gap: 16px 32px; padding-block: clamp(30px, 5vw, 56px); border-top: 1px solid var(--hair); }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); }
.who h3 { margin: 0 0 8px; font: 400 clamp(1.9rem, 3.4vw, 2.7rem)/1.05 "Instrument Serif", Georgia, serif; }
.who p { margin: 0; max-width: 32rem; }

dl { margin: 0; }
dl div { display: grid; grid-template-columns: 200px 1fr; gap: 2px 24px; padding-block: 12px; border-bottom: 1px dashed var(--hair); }
dl div:first-child { padding-top: 0; }
dl div:last-child { border-bottom: 0; }
dt { font: 500 .8rem/1.9 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
dd { margin: 0; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-block: 24px 36px; border-top: 1px solid var(--ink); }
.foot p { margin: 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .plan svg { max-height: none; }
  .who, .stand { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .who-grid { grid-template-columns: 1fr; }
  dl div { grid-template-columns: 1fr; }
  .top .label { font-size: .72rem; }
}

.notfound { padding-block: clamp(48px, 10vw, 120px); }
.notfound h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin-top: 12px; }
.notfound p:last-child { font-size: 1.2rem; }