/* ===========================================================================
   Dysonspot. A glazier's console: a 1998 workstation desktop cut from lead and
   coloured glass, with the star burning behind it.

   Three faces, one per role, and nothing else:
     Marcellus  the display and every heading
     Karla      prose, and only prose
     Sligoil    every label, value, address, file name and key
   One scale: 16 / 20 / 24 / 32 / 48 / 72. One spacing step: 4 / 8 / 12 / 16 / 24 / 32 / 48.
   One meaning per colour: starlight = text, amber = a number read off the chain, emerald = a panel
   going in, ruby = a panel coming out, cobalt = the window in hand, muted = not live yet.
   =========================================================================== */

@font-face { font-family: Marcellus; src: url(/fonts/marcellus-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: Karla; src: url(/fonts/karla-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: Sligoil; src: url(/fonts/Sligoil-Micro.woff2) format("woff2"); font-display: swap; }

:root {
  --field: #0A0906;
  --lead: #2B2721;
  --lead-high: #4A443A;
  --lead-low: #15130F;
  --body: #100E0A;
  --star: #FFF4D6;
  --muted: #A99D84;
  --amber: #E8A33D;
  --cobalt: #1F4E9C;
  --cobalt-lit: #6FA2E8;
  --emerald: #4FBE86;
  --ruby: #E0596B;

  --page: 1360px;
  --rail: 160px;
  --gap: 24px;
  --pad: 32px;

  --display: Marcellus, Georgia, serif;
  --prose: Karla, system-ui, sans-serif;
  --data: Sligoil, ui-monospace, "Courier New", monospace;

  --wash: rgba(232, 163, 61, 0.16);
  --t-press: transform .08s ease;
  --t-hover: background-color .18s ease, color .18s ease, opacity .18s ease;
}

* { box-sizing: border-box; }

/* a layout rule outweighs the hidden attribute: .menu is display:flex, so hidden did nothing at all */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--field);
  color: var(--star);
  font: 400 16px/1.6 var(--prose);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
/* No overflow-x: hidden on the root. It does not fix an overflow, it hides one, and the audit then
   reports a clean page over a block that is 36 px wider than the phone (memory:
   an-overflow-set-on-the-root-leaves-the-root-nothing-to-clip). */

/* ------------------------------------------------------------- the field ---
   The desktop under everything: black, with the star's light lying on it in the
   colour of whatever glass is already set, and one even grain over the lot. */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.field-wash {
  position: absolute; inset: 0;
  background: radial-gradient(52% 46% at 46% 34%, var(--wash) 0%, rgba(0, 0, 0, 0) 72%);
  transition: background 1.2s linear;
}
.field-grain {
  position: absolute; inset: 0;
  background-image: url(/assets/img/grain-tile.png);
  background-size: 128px 128px;
  opacity: .5;
}

/* -------------------------------------------------------------- the desk --- */
.desk {
  position: relative;
  z-index: 1;
  max-width: var(--page);
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  /* start, so a window is exactly as tall as what is in it; only the masthead stretches, because the
     dialog beside it is taller and the band under a short masthead would be a hole */
  align-items: start;
}

/* TWO STACKS, not a grid of rows. A row grid makes every block as tall as the tallest one beside it,
   so a short window leaves a band of black under it, and a row only starts when the slowest column
   above it has finished. Two columns that each flow on their own have no hole anywhere inside them. */
.deck {
  display: grid;
  grid-template-columns: minmax(0, 776fr) minmax(0, 376fr);
  gap: var(--gap);
  align-items: stretch;
}
/* Flex, not grid, inside a column: the two columns are stretched to the same height and the LAST
   window of the shorter one takes up the slack, so the two sides end on one line (symmetry) and the
   slack is air inside a window instead of a band of black on the desk. */
.col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.col > :last-child { flex: 1 1 auto; }
/* the side is a stack inside a stack, and its last window takes the slack the same way */
.side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.side > :last-child { flex: 1 1 auto; }
.feed { display: flex; flex-direction: column; }
.feed .body-feed { flex: 1 1 auto; }
.feed .feed-list { align-content: start; }

/* ------------------------------------------------------------ the windows ---
   Every window is one generated object: a lead came, nine sliced out of
   art/site/frame-lead.png, with the glass of its body printed in the middle. */
.win {
  border: 24px solid transparent;
  border-image: url(/assets/img/frame-lead.png) 48 fill / 24px / 0 stretch;
  position: relative;
}

.body { padding: var(--pad); }

/* the title strip: a bar of cobalt glass, or of lead when the window is not the one in hand */
.strip {
  min-height: 56px;
  padding: 4px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  background-image: url(/assets/img/strip-lead.png);
  background-size: 100% 100%;
}
.strip-cobalt { background-image: url(/assets/img/strip-cobalt.png); }
.strip-mark { display: block; flex: none; }
.strip-name {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 20px/1.2 var(--data);
  letter-spacing: .04em;
  color: var(--star);
}
.strip-state {
  margin-left: auto;
  /* the state may be cut, the window's own NAME may not: both shrink, and flexbox takes more off the
     longer one, which is the state */
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 16px/1.2 var(--data);
  letter-spacing: .04em;
  color: #E2D9C2;
}
.strip-cobalt .strip-state { color: #DCE8FB; }

.strip-key {
  margin-left: auto;
  flex: none;
  width: 48px; height: 48px;
  border: 0;
  background: url(/assets/img/key-lead.png) 50% 50% / 100% 100% no-repeat;
  color: var(--star);
  font: 400 16px/1 var(--data);
  cursor: pointer;
  transition: var(--t-press);
}
.strip-key:hover { background-image: url(/assets/img/key-lead-hot.png); }
.strip-key:active { background-image: url(/assets/img/key-lead-down.png); transform: translateY(1px); }
.strip-key:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }

/* --------------------------------------------------------------- the rail --- */
.rail { display: grid; gap: 24px; align-content: start; }
.rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.prog {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 8px 16px;
  border: 0;
  background: transparent;
  color: var(--star);
  font: 400 16px/1.2 var(--data);
  letter-spacing: .02em;
  cursor: pointer;
  transition: var(--t-hover);
}
.prog img { display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7)); transition: transform .18s ease, filter .18s ease; }
.prog:hover img { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(255, 244, 214, .45)); }
.prog:active img { transform: scale(1.0) translateY(1px); }
.prog:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
/* cobalt is where you are (the strip of the window in hand is cobalt too); amber is only ever a
   number read off the chain */
.prog.is-open { color: var(--cobalt-lit); }
.prog.is-open img { filter: drop-shadow(0 0 12px rgba(111, 162, 232, .6)); }

.plate {
  border: 20px solid transparent;
  border-image: url(/assets/img/frame-lead.png) 48 fill / 20px / 0 stretch;
  padding: 8px 4px 12px;
}
.plate-head { margin: 0 0 8px; font: 400 24px/1.1 var(--display); color: var(--star); }
.plate-note { margin: 0 0 12px; font: 400 16px/1.45 var(--prose); color: var(--muted); }
.glass-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.glass-list li { display: flex; align-items: center; gap: 8px; font: 400 16px/1.4 var(--data); color: #D6CBB2; }
.glass-list img { display: block; width: 24px; height: 24px; }

/* ----------------------------------------------------------- the masthead --- */
.masthead { display: flex; align-items: center; align-self: stretch; gap: 32px; padding: 16px 12px; }
.masthead-mark img { display: block; width: 200px; height: 200px; flex: none; }
.masthead-words { min-width: 0; }
.masthead h1 {
  margin: 0;
  font: 400 64px/0.98 var(--display);
  letter-spacing: .005em;
  color: var(--star);
}
.ticker { margin: 8px 0 0; font: 400 20px/1.3 var(--data); letter-spacing: .04em; color: var(--star); }
.ticker .sep { color: var(--muted); padding: 0 4px; }
.tagline {
  margin: 16px 0 0;
  font: 400 16px/1.55 var(--data);
  letter-spacing: .1em;
  color: #D6CBB2;
}
.tagline span { display: block; }

/* ---------------------------------------------------------- the calculator --- */
.dialog .body { padding: 20px 28px; }
.field-label { margin: 0; flex: none; font: 400 16px/1.2 var(--data); letter-spacing: .06em; color: var(--muted); }
.field-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sunk {
  flex: 1 1 110px;
  min-width: 0;
  border: 14px solid transparent;
  border-image: url(/assets/img/field-sunken.png) 28 fill / 14px / 0 stretch;
  background: transparent;
  color: var(--star);
  font: 400 20px/1.4 var(--data);
  padding: 4px 6px;
}
input.sunk:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.unit { font: 400 20px/1.2 var(--data); color: var(--muted); }
.calc-out { margin: 12px 0 0; font: 400 20px/1.4 var(--data); color: var(--star); }
.calc-out b { color: var(--amber); font-weight: 400; }
.dialog { box-shadow: 0 18px 40px rgba(0, 0, 0, .65); }
.dialog.is-dragging { cursor: grabbing; }
.strip[data-drag] { cursor: grab; }

/* -------------------------------------------------------------- the keys --- */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  background: url(/assets/img/key-lead.png) 50% 50% / 100% 100% no-repeat;
  color: var(--star);
  font: 400 16px/1.2 var(--data);
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--t-press), var(--t-hover);
}
.key img { display: block; }
.key:hover { background-image: url(/assets/img/key-lead-hot.png); color: #FFFFFF; }
.key:active { background-image: url(/assets/img/key-lead-down.png); transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--star); outline-offset: 2px; }
.key[disabled],
.key[aria-disabled="true"] {
  background-image: url(/assets/img/key-lead-off.png);
  color: #8C8370;
  cursor: not-allowed;
  pointer-events: none;
}
.key[disabled] img,
.key[aria-disabled="true"] img { opacity: .55; }
.key-wide { width: 100%; margin-top: 16px; }

/* ------------------------------------------------------- the main window --- */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 20px;
  background: url(/assets/img/strip-lead.png) 50% 50% / 100% 100% no-repeat;
  min-height: 48px;
  align-items: center;
}
.menu-item {
  border: 0;
  background: transparent;
  color: #D6CBB2;
  font: 400 16px/1.2 var(--data);
  letter-spacing: .06em;
  min-height: 44px;
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  transition: var(--t-hover);
}
.menu-item:hover { color: var(--star); }
.menu-item:focus-visible { outline: 2px solid var(--star); outline-offset: -2px; }
.menu-item.is-on { color: var(--cobalt-lit); }
.menu-item.is-on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--cobalt-lit);
}
.menu-item[disabled] { color: #7E7563; cursor: not-allowed; }

/* minmax(0, 1fr), never auto: a <canvas> carries its attribute width as its minimum, and at 1024 that
   pushed the whole stage 80 px past the window and dragged the caption out with it */
.body-stage { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.canvas-wrap { position: relative; }
#sphere { display: block; width: 100%; max-width: 100%; height: auto; }
/* under the canvas, never on it: a line of text laid over a drawn object is the thing he reads first */
.stage-note {
  margin: 12px 0 0;
  overflow-wrap: anywhere;
  font: 400 16px/1.45 var(--data);
  letter-spacing: .03em;
  color: var(--muted);
}
.pane-panel { border-top: 0; }
.pane-panel h3 { margin: 0 0 8px; font: 400 24px/1.2 var(--display); }
.pane-panel dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
.pane-panel dt { font: 400 16px/1.5 var(--data); color: var(--muted); }
.pane-panel dd { margin: 0; font: 400 16px/1.5 var(--data); color: var(--star); overflow-wrap: anywhere; }

/* ------------------------------------------------------------ the counter --- */
.count { margin: 0; font: 400 48px/1 var(--data); color: var(--amber); letter-spacing: .01em; }
.count b { font-weight: 400; }
.count span { color: var(--muted); font-size: 24px; }
.bar {
  margin: 16px 0;
  height: 16px;
  background: url(/assets/img/field-sunken.png) 50% 50% / 100% 100% no-repeat;
  padding: 4px;
}
.bar-fill {
  height: 8px;
  width: 0%;
  background: linear-gradient(90deg, var(--cobalt) 0%, var(--amber) 100%);
  transition: width .6s ease;
}
.rows { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); gap: 8px 16px; }
.rows dt { font: 400 16px/1.4 var(--data); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.rows dd { margin: 0; min-width: 0; font: 400 16px/1.4 var(--data); color: var(--star); text-align: right; overflow-wrap: anywhere; }
.rows dd.live { color: var(--amber); }

/* --------------------------------------------------------------- the feed --- */
.body-feed { padding: 16px var(--pad) var(--pad); }
.feed-list { list-style: none; margin: 0; padding: 0; display: grid; }
.feed-list li { position: relative; }
/* the whole row is the link, not the twelve characters of the address inside it: a finger needs a row */
.feed-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 4px;
  font: 400 16px/1.3 var(--data);
  color: inherit;
  text-decoration: none;
  transition: var(--t-hover);
}
a.feed-row:hover { color: var(--star); background: rgba(255, 244, 214, .06); }
a.feed-row:focus-visible { outline: 2px solid var(--star); outline-offset: -2px; }
.feed-list li + li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #2A251E;
}
.feed-chip { width: 24px; height: 24px; display: block; }
.feed-who { color: var(--star); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-n { font-variant-numeric: tabular-nums; }
.feed-in .feed-n { color: var(--emerald); }
.feed-out .feed-n { color: var(--ruby); }
.feed-empty { color: var(--muted); font: 400 16px/1.6 var(--prose); }
.feed-who { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #5A5244; }

/* ---------------------------------------------------------------- the pot --- */
.pot-total { margin: 0; font: 400 32px/1.1 var(--data); color: var(--amber); }
.pot-total span { font-size: 16px; color: var(--muted); }
.pot-note { margin: 16px 0 24px; font: 400 16px/1.6 var(--prose); color: var(--muted); }
.split { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.split li { display: grid; grid-template-columns: 56px 1fr max-content; gap: 16px; align-items: center; font: 400 16px/1.4 var(--data); }
.split .pc { color: var(--amber); font-variant-numeric: tabular-nums; }
.split .what { color: var(--star); }
.split .sum { color: var(--muted); }

/* ----------------------------------------------------------- the contract --- */
.ca-label { margin: 0 0 12px; font: 400 16px/1.2 var(--data); letter-spacing: .06em; color: var(--muted); }
.ca-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.ca {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 14px solid transparent;
  border-image: url(/assets/img/field-sunken.png) 28 fill / 14px / 0 stretch;
  padding: 10px 12px;
  font: 400 16px/1.4 var(--data);
  color: var(--star);
  overflow-wrap: anywhere;
  user-select: all;
}
.ca.is-empty { color: var(--muted); }
.ca-feedback { margin: 12px 0 0; min-height: 24px; font: 400 16px/1.5 var(--data); color: var(--emerald); }
.links { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* ------------------------------------------------------- programs 2, 3, 4 --- */
.prose { margin: 0 0 16px; font: 400 16px/1.65 var(--prose); color: #DCD2BB; max-width: 62ch; }
/* the long rules read in two columns on a wide window, so the program is a screen and not a scroll */
@media (min-width: 1200px) {
  .rules-full { column-count: 2; column-gap: 32px; }
  .rules-full .prose { max-width: none; break-inside: avoid; }
}
.prose:last-child { margin-bottom: 0; }
.head { margin: 0 0 16px; font: 400 32px/1.15 var(--display); color: var(--star); }
.sub { margin: 32px 0 12px; font: 400 24px/1.2 var(--display); color: var(--star); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; counter-increment: s; }
.steps li::before {
  content: counter(s);
  font: 400 32px/1 var(--display);
  color: var(--amber);
}
.steps p { margin: 0; font: 400 16px/1.6 var(--prose); color: #DCD2BB; }
.steps h4 { margin: 0 0 4px; font: 400 20px/1.3 var(--data); letter-spacing: .03em; color: var(--star); }

.table { width: 100%; border-collapse: collapse; font: 400 16px/1.5 var(--data); }
.table caption { text-align: left; font: 400 16px/1.4 var(--data); color: var(--muted); padding-bottom: 12px; }
.table th, .table td { text-align: left; padding: 12px 16px 12px 0; vertical-align: top; }
.table th { color: var(--muted); font-weight: 400; }
.table td { color: var(--star); }
.table td.num, .table th.num { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.table tbody tr { position: relative; }
.table tbody tr + tr th::before,
.table tbody tr + tr td::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: #2A251E; margin-top: -12px;
}

.hall-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.hall-item { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: start; }
.hall-item canvas { display: block; width: 160px; height: 160px; }
.empty { margin: 0; font: 400 16px/1.6 var(--prose); color: var(--muted); }

.addr-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-bottom: 24px; }
.addr-row .sunk { flex: 1 1 280px; }

/* ----------------------------------------------------------------- phone --- */
/* On one column the two stacks dissolve and the blocks take the reading order the brief asks for:
   the masthead, the calculator, the sphere, the counter and the feed, the pot, the contract. */
@media (max-width: 1100px) {
  :root { --pad: 24px; }
  .deck { grid-template-columns: minmax(0, 1fr); }
  .col { display: contents; }
  /* the brief's own order on a phone: the counter stands ABOVE the sphere and the feed below it */
  .masthead { order: 1; }
  .dialog { order: 2; }
  .side { display: contents; }
  .counter { order: 3; }
  .main { order: 4; }
  .feed { order: 5; }
  .pot { order: 6; }
  .contract { order: 7; }
  .masthead h1 { font-size: 56px; }
  .masthead-mark img { width: 160px; height: 160px; }
}

/* On a phone the whole console becomes one column in the order the brief asks for, and the rail stops
   being a rail: the four programs are a row of icons straight under the masthead, so the navigation is
   the second thing a thumb reaches and not the last. */
@media (max-width: 860px) {
  .desk {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: 24px 16px 40px;
  }
  .deck, .col, .side, .rail { display: contents; }
  .masthead { order: 1; flex-direction: column; align-items: flex-start; }
  .masthead h1 { font-size: 48px; }
  .rail-list { order: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .dialog { order: 3; }
  .counter { order: 4; }
  .main { order: 5; }
  .feed { order: 6; }
  .pot { order: 7; }
  .contract { order: 8; }
  .glass-plate { order: 9; }
  .links { grid-template-columns: 1fr; }
  .hall-item { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  :root { --pad: 20px; }
  .masthead h1 { font-size: 40px; }
  .masthead-mark img { width: 120px; height: 120px; }
  .count { font-size: 40px; }
  .rail-list { grid-template-columns: repeat(2, 1fr); }
  .strip { padding: 0 20px; }
  .body-stage { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .001ms !important; }
}

/* The side column is 376 px wide, so its windows take the smaller inner step: a label and its value
   still sit on one line, which is the whole point of a column of readings. */
.side .body { padding: 24px; }

/* A strip has room for its own name before anything else: under 560 px the state goes, not the name. */
@media (max-width: 560px) {
  .strip-state { display: none; }
}

/* 320 px is a real width, and a title strip there has room for a name OR a decoration, never both. */
@media (max-width: 560px) {
  .strip-name { font-size: 16px; }
  .split li { grid-template-columns: 56px minmax(0, 1fr); }
  .split .sum { grid-column: 2; color: var(--amber); }
}
@media (max-width: 420px) {
  .strip-mark { display: none; }
  .body-stage { padding: 16px 12px; }
}

/* the hall: a sphere, its readings and the people who glazed it, side by side */
.hall-item canvas { background: radial-gradient(50% 50% at 50% 46%, rgba(232, 163, 61, .16), rgba(0, 0, 0, 0) 70%); }
.mini { margin: 24px 0 12px; font: 400 16px/1.2 var(--data); letter-spacing: .06em; color: var(--muted); }
.builders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.builders li { display: grid; grid-template-columns: 20px minmax(0, 1fr) max-content; gap: 12px; align-items: center; font: 400 16px/1.4 var(--data); }
.builders img { display: block; }
.builders .who { color: var(--star); overflow: hidden; text-overflow: ellipsis; }
.builders .many { color: var(--amber); }

/* On a narrow dialog the unit joins the label and the field takes the whole row: "SOL" alone on a
   line of its own reads as a stray word. */
@media (max-width: 560px) {
  .field-row { display: grid; grid-template-columns: minmax(0, 1fr) max-content; gap: 8px 12px; }
  .field-label { grid-area: 1 / 1; }
  .unit { grid-area: 1 / 2; text-align: right; }
  .sunk { grid-area: 2 / 1 / 3 / 3; }
  .addr-row .sunk { grid-column: auto; }
}