/* mural intelligence. A station that watches one wall.
   Built flat, the way the reference sheet is built: hairlines, corner brackets, dotted leaders,
   one machine face and one mono. Colour exists in exactly one place on this page, inside the wall. */

@font-face {
  font-family: "RX100";
  src: url("/fonts/RX100-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/Technor-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Technor";
  src: url("/fonts/Technor-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ground: #000302;
  --ink-1: #2B4733;
  --ink-2: #5E8A6B;
  --ink-3: #9DC5A6;
  --ink-4: #C9ECD0;
  --ink-5: #ECFFF0;
  --hot: #D4D152;
  --alarm: #C8402E;
  --line: #1C2E22;
  --line-hot: #3C5F47;
  --wall: #E8E6E0;

  --mono: "RX100", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --voice: "Technor", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(20px, 5.2vw, 104px);
  --gap: clamp(18px, 1.7vw, 32px);
  --pad: clamp(20px, 1.7vw, 32px);
  --body: 19px;

  color-scheme: dark;
  font-synthesis: none;
}

* { box-sizing: border-box; }
figure, figcaption, dl, dd, h1, h2, h3, ol, ul, p, table { margin: 0; padding: 0; }

/* a class that sets display beats the hidden attribute; nothing hidden here is ever on screen */
[hidden] { display: none !important; }

html { background: var(--ground); }

body {
  margin: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* the hall behind the station: more of the same world, blurred, on its own clock */
.hall {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; filter: blur(26px) saturate(0.5); opacity: 0.5;
  pointer-events: none;
}

.station {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(40px, 5vw, 96px);
}

/* ----------------------------------------------------------------- station line */

/* the rules that hold the sheet run to the edge of the window, like the sheet's own trim */
.idline, .masthead { position: relative; }
.idline::after, .masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid var(--line-hot);
  pointer-events: none;
}
.masthead::after { border-bottom-color: var(--line); }

.idline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  min-height: 62px; padding: 14px 0 12px;
  font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
}
.idline-code { color: var(--ink-4); }
.idline-sep { color: var(--ink-1); }
.idline-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.idline-day { color: var(--ink-4); }
.idline-clock { color: var(--hot); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- masthead */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1fr) minmax(300px, 1.08fr);
  gap: clamp(18px, 2vw, 30px) clamp(28px, 3vw, 56px);
  align-items: start;
  padding: clamp(22px, 2.1vw, 36px) 0 clamp(20px, 2vw, 32px);
}
.wordmark {
  margin: 0;
  font-family: var(--voice); font-weight: 500;
  font-size: clamp(40px, 3.5vw, 62px);
  line-height: 0.94; letter-spacing: 0.005em;
  color: var(--ink-5);
}
.standfirst {
  margin: 0; max-width: 46ch;
  font-size: 17px; line-height: 1.58; color: var(--ink-2);
}
.standfirst b { color: var(--ink-4); font-weight: 400; }

/* the index: the reference's dotted leaders, doing a job */
/* One column, so the longest label never wraps; two only on a window wide enough that a column
   still holds HOW IT WORKS on one line. */
.index { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; align-content: start; }
.index a {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 48px; padding: 10px 19px;
  color: var(--ink-2); text-decoration: none;
  font-size: 17px; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid transparent;
}
.index a .label { flex: 0 0 auto; min-width: 0; white-space: nowrap; }
.index a .dots {
  flex: 1 1 auto; min-width: 10px; height: 1px; align-self: center;
  background-image: radial-gradient(circle, var(--ink-1) 1px, transparent 1px);
  background-size: 6px 2px; background-repeat: repeat-x;
}
.index a .num { color: var(--ink-1); font-variant-numeric: tabular-nums; }
.index a:hover { color: var(--ink-4); border-color: var(--line-hot); }
.index a:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.index a[aria-current="page"] {
  background: var(--ink-4); color: #04100A; border-color: var(--ink-4);
}
.index a[aria-current="page"] .dots { background-image: radial-gradient(circle, #04100A 1px, transparent 1px); }
.index a[aria-current="page"] .num { color: #04100A; }

/* ----------------------------------------------------------------- stage */

.stage { display: flex; gap: var(--gap); align-items: stretch; padding-top: var(--gap); }
.stage-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.console { flex: 0 0 456px; }

.view { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* the wall takes as much room as the window's height allows, and the six artists take the rest,
   so the two of them together fill the row at every width without a hole on the right */
.wall-row {
  display: grid; gap: var(--gap); align-items: stretch;
  /* the wall takes everything the artists rail does not, so it is the biggest thing on the page at
     every width; on a short window it runs past the fold and the page scrolls, which is the trade
     the kit asks for (pick the size first, let the page scroll). */
  grid-template-columns: min(calc(100% - 232px - var(--gap)), 820px) minmax(0, 1fr);
}
.wall-plate { min-width: 0; }
.artists-rail { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; }

@media (max-width: 1500px) {
  .console { flex: 0 0 392px; }
}
@media (max-width: 1080px) {
  .stage { flex-direction: column; }
  .console { flex: 1 1 auto; }
  .wall-row { grid-template-columns: minmax(0, 1fr); }
  .artists-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .masthead { grid-template-columns: minmax(0, 1fr); }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .idline { gap: 6px 10px; }
  .idline-sep { display: none; }
  .idline-right { margin-left: 0; width: 100%; }
  .index a { font-size: 16px; min-height: 46px; padding: 9px 17px; }
  .wordmark { font-size: 40px; }
  .standfirst { font-size: 17px; }
}
@media (max-width: 620px) {
  .artists-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .index { grid-template-columns: minmax(0, 1fr); }
  .artists-rail { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- plates */

.plate { position: relative; border: 1px solid var(--line-hot); background: rgba(0, 4, 2, 0.74); min-width: 0; }
.plate-title {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-height: 54px; padding: 10px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
}
.plate-name { font-family: var(--voice); font-weight: 500; letter-spacing: 0.1em; }
.plate-note { color: var(--ink-1); letter-spacing: 0.08em; text-transform: none; font-size: 16px; }
.plate-keys { margin-left: auto; display: flex; gap: 8px; }
.plate-body { position: relative; }
.plate-pad { padding: var(--pad); }

.corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.corner.tl { top: 7px; left: 7px; border-top: 1px solid var(--ink-2); border-left: 1px solid var(--ink-2); }
.corner.tr { top: 7px; right: 7px; border-top: 1px solid var(--ink-2); border-right: 1px solid var(--ink-2); }
.corner.bl { bottom: 7px; left: 7px; border-bottom: 1px solid var(--ink-2); border-left: 1px solid var(--ink-2); }
.corner.br { bottom: 7px; right: 7px; border-bottom: 1px solid var(--ink-2); border-right: 1px solid var(--ink-2); }

#wall-canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; cursor: pointer; touch-action: none; }
.wall-plate .plate-body { padding: 18px; }
/* A wall with nothing on it is still a wall: the plate says so on a card, it does not cover it. */
.plate-empty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; gap: 8px; max-width: min(84%, 420px);
  text-align: center; color: var(--ink-3); background: rgba(0, 4, 2, 0.93);
  border: 1px solid var(--line-hot); padding: 26px 30px;
}
.plate-empty p { margin: 0; }

/* ----------------------------------------------------------------- the console */

.console { border: 1px solid var(--line-hot); background: rgba(0, 4, 2, 0.8); min-width: 0; container-type: inline-size; }
.console-title {
  display: flex; align-items: center; gap: 12px;
  min-height: 54px; padding: 10px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4);
}
.console-title .key { margin-left: auto; }
.st { padding: var(--pad); border-bottom: 1px solid var(--line); }
.st:last-child { border-bottom: 0; }
.st-name {
  margin: 0 0 16px; font-family: var(--voice); font-weight: 500;
  font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.st-note { margin: 14px 0 0; font-size: 16px; color: var(--ink-1); }
.st-result { margin: 14px 0 0; font-size: 16px; color: var(--hot); min-height: 25px; overflow-wrap: anywhere; }
.st-keys { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* dotted leaders, the sheet's own way of setting a figure */
.dossier { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); gap: 0 10px; align-items: baseline; }
.dossier dt { font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0; min-width: 0; }
.dossier .lead { height: 1px; align-self: center; background-image: radial-gradient(circle, var(--ink-1) 1px, transparent 1px); background-size: 6px 2px; background-repeat: repeat-x; }
.dossier dd { margin: 0; padding: 6px 0; font-size: 19px; color: var(--ink-4); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.dossier dd.hot { color: var(--hot); }
.dossier.small dt, .dossier.small dd { font-size: 16px; padding: 3px 0; }

.loupe-row { position: relative; display: flex; gap: 16px; align-items: flex-start; margin-top: 18px; padding-top: 17px; }
.loupe-row::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--line); }
.loupe { width: 98px; height: 98px; flex: 0 0 auto; image-rendering: pixelated; border: 1px solid var(--line-hot); }
.loupe-row .dossier { flex: 1 1 auto; min-width: 0; }

/* the palette: the wall's own sixteen, printed as sprayed squares */
/* Eight chips across only while the console is wide enough for them to stay tappable; four
   otherwise. The console answers for its own width, so this is a container query, not a media one. */
.palette { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 400px) { .palette { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.chip {
  position: relative; aspect-ratio: 1; min-height: 38px; padding: 0;
  border: 1px solid var(--line-hot); background: transparent; cursor: pointer;
}
.chip i {
  position: absolute; inset: 4px; display: block;
  background-color: var(--c);
  -webkit-mask-image: var(--spray); mask-image: var(--spray);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.chip[aria-checked="true"] { border-color: var(--ink-5); box-shadow: 0 0 0 1px var(--ink-5); }
.chip:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }

/* ----------------------------------------------------------------- keys */

.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 21px; line-height: 1.25; text-align: center;
  border: 1px solid var(--line-hot); background: transparent; color: var(--ink-4);
  font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
.key.wide { flex: 1 1 180px; }
.key.hot { border-color: var(--hot); color: var(--hot); }
.key:hover:not([disabled]):not([aria-disabled="true"]) { background: var(--line); color: var(--ink-5); }
.key:active:not([disabled]):not([aria-disabled="true"]) { background: var(--line-hot); }
.key:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.key[disabled], .key[aria-disabled="true"] { color: var(--ink-1); border-color: var(--line); cursor: not-allowed; }
.key[aria-pressed="true"] { background: var(--ink-4); color: #04100A; border-color: var(--ink-4); }
.key.mark img { display: block; width: auto; height: 18px; opacity: 0.92; }
.key[aria-disabled="true"] img { opacity: 0.3; }

/* ----------------------------------------------------------------- the $MI window */

.win { border: 1px solid var(--line-hot); margin: var(--pad); }
.win-bar {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 8px 28px 8px 24px;
  border-bottom: 1px solid var(--line-hot); background: var(--line);
  font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4);
}
.win-name { font-family: var(--voice); font-weight: 500; }
.win-key {
  margin-left: auto; min-width: 56px; min-height: 42px; padding: 0 14px;
  border: 1px solid var(--line-hot); background: transparent; color: var(--ink-3);
  font-family: var(--mono); font-size: 16px; cursor: pointer;
}
.win-key:hover { background: var(--line-hot); color: var(--ink-5); }
.win-key:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.win-body { padding: 24px; }
.win-body[hidden] { display: none; }
.ca-label { font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.ca {
  display: block; margin: 10px 0 18px; padding: 14px 18px;
  border: 1px solid var(--line); background: #000;
  font-size: 17px; line-height: 1.5; color: var(--ink-5);
  overflow-wrap: anywhere; user-select: all; min-width: 0;
}
.ca.empty { color: var(--ink-1); user-select: none; }
.win-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.win-note { margin: 16px 0 0; font-size: 16px; color: var(--ink-1); }

/* ----------------------------------------------------------------- artists */

.artist-cell {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; align-items: center;
  padding: 12px 16px; border: 1px solid var(--line); background: rgba(0, 4, 2, 0.7);
  min-width: 0;
}
.artist-cell .patch { width: 44px; height: 44px; display: block; border: 1px solid var(--line-hot); image-rendering: pixelated; }
.artist-cell b { display: block; font-family: var(--voice); font-weight: 500; font-size: 17px; color: var(--ink-4); letter-spacing: 0.06em; }
.artist-cell span { display: block; font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.artist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.artist-card { border: 1px solid var(--line); padding: 20px; min-width: 0; }
.artist-card header { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.artist-card .patch { width: 72px; height: 72px; display: block; flex: 0 0 auto; border: 1px solid var(--line-hot); image-rendering: pixelated; }
.artist-card h3 { margin: 0; font-family: var(--voice); font-weight: 500; font-size: 22px; color: var(--ink-5); letter-spacing: 0.04em; }
.artist-card .model { font-size: 16px; color: var(--ink-1); overflow-wrap: anywhere; }
.artist-card .book { margin: 16px 0 0; padding: 16px 24px; scrollbar-gutter: stable; border: 1px solid var(--line); font-size: 16px; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 190px; overflow: auto; }

.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow: auto; }
.chat li { display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr); gap: 16px; padding: 12px 18px; border: 1px solid var(--line); min-width: 0; }
.chat b { font-family: var(--voice); font-weight: 500; color: var(--ink-4); font-size: 17px; }
.chat span { color: var(--ink-2); overflow-wrap: anywhere; }
.chat time { font-size: 16px; color: var(--ink-1); }

/* ----------------------------------------------------------------- tables, rows, steps */

.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th, .table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: right; font-size: 17px; }
.table th { color: var(--ink-2); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; font-size: 16px; }
.table th:first-child, .table td:first-child { text-align: left; }
.table td b { color: var(--ink-4); font-weight: 400; }
.table tr:last-child td { border-bottom: 0; }

.rows { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rows li { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; padding: 12px 18px; border: 1px solid var(--line); font-size: 17px; min-width: 0; }
.rows li span { overflow-wrap: anywhere; }
.rows a { color: var(--ink-4); }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.steps li { border: 1px solid var(--line); padding: 26px; min-width: 0; }
.steps img { width: 100%; height: auto; display: block; border: 1px solid var(--line); margin-bottom: 18px; }
.steps h3 { margin: 0 0 10px; font-family: var(--voice); font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--ink-5); letter-spacing: 0.03em; text-wrap: balance; }
.steps p { margin: 0; font-size: 17px; color: var(--ink-2); }
.steps .num { display: block; font-size: 16px; letter-spacing: 0.2em; color: var(--ink-1); margin-bottom: 8px; }

.mine-head { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 20px; }
.mine-head div { min-width: 0; }
.mine-head dt { font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.mine-head dd { margin: 4px 0 0; font-size: 26px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.mine-map, .lapse { display: block; width: 100%; max-width: 560px; height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid var(--line-hot); }
.waffle { display: block; width: 100%; height: auto; margin-bottom: 22px; }

.lapse-bar { display: flex; align-items: center; gap: 16px; margin-top: 18px; max-width: 560px; }
.lapse-bar input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--hot); height: 32px; }
.lapse-at { font-variant-numeric: tabular-nums; color: var(--ink-4); font-size: 17px; }

.shows { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 16px; }
.show { border: 1px solid var(--line); padding: 17px; min-width: 0; }
.show canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.show b { display: block; margin-top: 10px; font-size: 16px; color: var(--ink-4); font-weight: 400; }
.show span { display: block; font-size: 16px; color: var(--ink-1); }
.show.exhibition { border-color: var(--hot); }
.show.exhibition b { color: var(--hot); }

.empty { color: var(--ink-2); font-size: 17px; margin: 0; border: 1px solid var(--line); padding: 20px 24px; }
.artists-rail > .empty { flex: 1 1 auto; display: grid; place-content: center; text-align: center; }

/* ----------------------------------------------------------------- the square sheet */

.sheet { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px; background: rgba(0, 3, 2, 0.86); }
.sheet[hidden] { display: none; }
.sheet-card { width: min(560px, 100%); border: 1px solid var(--ink-2); background: var(--ground); max-height: 86vh; overflow: auto; }
.sheet-card .win-body { padding: 26px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------------- narrow widths, last so they win */
@media (max-width: 760px) {
  /* a table is no shape for a phone: every row becomes a block and every cell carries its heading */
  .table thead { display: none; }
  .table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); margin-bottom: 10px; }
  .table td { border-bottom: 0; text-align: left; padding: 9px 18px; }
  .table td[data-label]::before { content: attr(data-label) "  "; color: var(--ink-1); }
  .table td:first-child { grid-column: 1 / -1; color: var(--ink-4); }
  .table td:first-child[data-label]::before { content: none; }
}
@media (max-width: 420px) {
  .win-keys { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
}

/* the index, last so it beats the base rule */
@media (min-width: 1180px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) and (max-width: 1559px) { .index a { font-size: 16px; padding: 9px 18px; gap: 8px; letter-spacing: 0.07em; } }