/* The Trench House. One lawn, one house, things lying on the grass.
   ---------------------------------------------------------------------------------------------------
   ONE CONTAINER. Every block on every page is as wide as .col and starts and ends on its two vertical
   lines. Nothing bleeds past them: a word cut by the window reads as a word that did not fit.
   TWO FACES, AND THAT IS ALL. The display words are a drawn raster of a bracketed serif; everything
   else, heading, key, paragraph and value alike, is the one mono. The grotesque is gone: three faces
   arguing on one page is what the page looked like before.
   ONE SCALE, in variables below: type 16 / 20 / 24 / 32 / 48, space 4 / 8 / 12 / 16 / 24 / 32 / 48, and
   the gap between two sections is 64 (48 on a narrow screen) and nothing else.
   ONE MEANING PER COLOUR. Red is the roof and the recording lamp, and is in no control anywhere. Gold
   is money standing in the pot. Cream is a surface you can read on. Green is the ground.
   ---------------------------------------------------------------------------------------------------*/

@font-face { font-family: "Tabular"; src: url("/fonts/tabular-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("/fonts/tabular-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --sky: #A7CDF4;
  --lawn: #527C2E;
  --lawn-deep: #41682A;
  --cream: #F7F1E4;
  --cream-dark: #DCD2BC;
  --cream-deep: #BBAE93;
  --ink: #121212;
  --ink-soft: #3E3A33;
  --ink-off: #5A5346;           /* an off control's LABEL: 5.07:1 on the off key's own face */
  --wood: #A9744F;
  --wood-deep: #6B4730;         /* the one accent left in the interface now that red has gone */
  --gold: #E2A32C;              /* ONE meaning: money standing in the pot. Never used for type. */
  --rec: #E53935;               /* ONE meaning: the camera is running. The roof carries the other red. */
  --shadow-lawn: #1E3A12;

  --mono: "Tabular", "Consolas", "Courier New", monospace;

  /* the one type scale */
  --t16: 16px; --t20: 20px; --t24: 24px; --t32: 32px; --t48: 48px;
  /* the one space scale */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px;
  --lh: 1.75;                   /* reading line height: a mono column needs more air than a grotesque */
  --sec: 64px;                  /* the only gap allowed between two sections */
  --gutter: 32px;
  --max: 1240px;

  /* The display words are a 6 px block raster (tools/type.mjs). --blk is the size, in whole screen
     pixels, that ONE drawn block is printed at, so no edge is ever half lit. The masthead gets its own,
     because it is the one word allowed to be the biggest thing on the page. */
  --blk: 3;
  --blk-mast: 4;
  --blk-num: 2;

  /* the porch hangs under the hall's door: the door is drawn at x 248..340 of a 393 wide cell, so its
     centre is 91.6% across the house, and the porch picture is 26.3% of the house wide */
  --porch-left: 83.12%;

  font-synthesis: none;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;
  background: var(--lawn-deep);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t20);
  line-height: var(--lh);
  overflow-x: hidden;
}

/* The weather. Painted at the TOP of the page, never fixed behind it: a field that stayed put would put
   pale sky behind whatever happened to scroll into the top of the window, and no ink reads on both
   halves of a sky to lawn gradient. Below the picture the lawn is flat and pale ink reads on it. */
.field {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1400px;
  z-index: -1;
  background:
    url("/assets/img/field.png") top center no-repeat,
    linear-gradient(to bottom, #92C0F2 0, #C2DCF5 322px, #8EBB40 324px, #527C2E 700px, #41682A 1100px);
  pointer-events: none;
}

/* THE container. Every block is a child of it and inherits its two vertical lines. */
.col {
  width: min(var(--max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-bottom: var(--sec);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

a { color: inherit; }

code, pre, kbd, samp { font-family: var(--mono); font-size: 1em; }

/* The focus ring carries no red: it is a cream ring with an ink ring outside it, so it is seen on the
   cream surfaces AND on the dark lawn, which one colour cannot do. */
:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 0;
  box-shadow: 0 0 0 7px var(--ink);
  border-radius: 2px;
}

/* ---------------------------------------------------------------- the margin labels */

.margins {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s24);
  padding: var(--s24) 0 0;
  font-size: var(--t16);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #0E2410;
}

.margins .live { display: inline-flex; align-items: center; gap: var(--s8); }

.lamp {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 0 0 2px #7E1D19;
  animation: blink 2.4s steps(1, end) infinite;
}

@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

/* ---------------------------------------------------------------- the washing line: the navigation */

/* The line is a 40 px band with a post at each end and a length of rope between them, and the five
   cards hang off it on one bottom line. The rope is a repeated length, not one wide picture: a picture
   scaled to the column moved the rope up and down with the window and squashed its fibre. */
.line {
  position: relative;
  margin-top: var(--s16);
  padding-top: 40px;
}

.line .post {
  position: absolute;
  top: 0;
  width: 16px; height: 40px;
  image-rendering: pixelated;
}
.line .post-l { left: 0; }
.line .post-r { right: 0; transform: scaleX(-1); }

.line .rope {
  position: absolute;
  top: 10px; left: 14px; right: 14px;
  height: 10px;
  background: url("/assets/img/props/rope.png") left top / auto 10px repeat-x;
}

.cards {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--s16);
  align-items: stretch;
}

.cards li { display: flex; }

.card {
  position: relative;
  display: flex;
  width: 100%;
  padding-top: var(--s4);                /* the peg's foot overlaps the top edge of the card */
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.18s ease;
}

.card .peg {
  position: absolute;
  top: -32px; left: 50%;
  width: 18px;
  transform: translateX(-50%);
  image-rendering: pixelated;
}

.card-face {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--s8);
  width: 100%;
  min-height: 104px;
  border-image: url("/assets/img/props/card.png") 40 fill / 20px / 0 stretch;
  padding: var(--s16);
}

.card .name {
  font-weight: 500;
  font-size: var(--t20);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.card .count {
  font-size: var(--t16);
  line-height: 1.3;
  color: var(--ink-soft);
  margin-top: auto;
}

.card:hover { transform: translateY(3px); }
.card:hover .card-face { filter: drop-shadow(0 6px 0 rgba(20, 44, 12, 0.3)); }
.card:active { transform: translateY(5px); }

/* the page you are on is marked by its COLOUR, never by standing out of the line it hangs on. The
   colour is the deep green of the lawn it hangs over, so the one red left on the page is the roof. */
.card[aria-current="page"] .card-face {
  border-image-source: url("/assets/img/props/card-here.png");
  color: var(--cream);
}
.card[aria-current="page"] .count { color: #DCE8D2; }

/* ---------------------------------------------------------------- the display words */

/* Printed at a whole number of screen pixels per drawn block, so the staircase stays a staircase, with
   no shadow and no glow: a hard offset shadow on a stepped edge is what made these look soft. */
.word {
  display: block;
  width: calc(var(--natw) * var(--blk) / 6);
  height: auto;
  max-width: 100%;
  image-rendering: pixelated;
}

.band-head { margin-bottom: var(--s24); }

/* the two steps a block may be pushed down by, and there are no others */
.stack { margin-top: var(--s32); }
.stack-s { margin-top: var(--s16); }

/* ---------------------------------------------------------------- the masthead row */

.mast-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--s32);
  align-items: start;
}

.mast { margin: 0; min-width: 0; font-size: var(--t32); line-height: 0; }
.mast .word { width: calc(var(--natw) * var(--blk-mast) / 6); }
.mast .word.second { margin-top: var(--s4); }

/* ---------------------------------------------------------------- a board: the one surface text sits on */

.board {
  border-image: url("/assets/img/props/board.png") 72 fill / 36px / 0 stretch;
  padding: var(--s32);
  color: var(--ink);
}

.board h1, .board h2 {
  font-weight: 500;
  font-size: var(--t32);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s16);
}

.board h3 {
  font-weight: 500;
  font-size: var(--t20);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: var(--s24) 0 var(--s8);
}

/* A board is as wide as the container, but a line of prose is not: past about 72 characters of a mono
   the eye loses the start of the next line. The board keeps its width, the text keeps its measure. */
.board p { margin: 0 0 var(--s16); font-size: var(--t16); line-height: var(--lh); max-width: 72ch; }
.board p:last-child { margin-bottom: 0; }

/* the broadcast tally: a label, then the one number this panel is about, then the note */
.tally {
  display: flex;
  align-items: center;
  gap: var(--s12);
  margin-bottom: var(--s16);
  padding-bottom: var(--s16);
  border-bottom: 3px solid var(--cream-deep);
}

.tally img { width: 40px; height: 40px; }

.tally .state {
  font-weight: 500;
  font-size: var(--t16);
  letter-spacing: 0.05em;
}

.seats {
  display: block;
  font-weight: 500;
  font-size: var(--t24);
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s12);
}

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

main { margin-top: var(--s32); }
.stage { margin-top: 0; }

/* the premise, and the three shares of a forwarded fee: two columns of one width, first lines on one
   top line, and the gap between them is one step of the scale, not a canyon */
.says-band {
  margin-top: var(--sec);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s32);
  align-items: start;
}

/* Ranged left, never justified: justifying a column of this width opened rivers between the words. */
.premise {
  margin: 0;
  text-align: left;
  font-size: var(--t20);
  line-height: var(--lh);
  color: #FFFFFF;
  text-shadow: 2px 2px 0 var(--shadow-lawn);
}

.shares { margin: 0; display: grid; gap: var(--s24); grid-auto-rows: 1fr; }

/* one row per share: the figure is a display word like the headings, the line beside it is the mono,
   and all three rows are the same height whatever the line under them runs to */
.shares div {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: var(--s24);
  align-items: start;
  align-content: start;
  min-height: 72px;
}

.shares dt { margin: 0; }
.shares dt .word { width: calc(var(--natw) * var(--blk-num) / 6); }

.shares dd {
  margin: 0;
  font-size: var(--t16);
  line-height: var(--lh);
  color: #FFFFFF;
  text-shadow: 2px 2px 0 var(--shadow-lawn);
}

/* ---------------------------------------------------------------- the house */

.house {
  position: relative;
  margin-top: var(--s24);
}

.house .roof { display: block; width: 100%; height: auto; }

.floors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 95.08%;
  margin: -1.6% auto 0;
}

.room { position: relative; }
.room > img { display: block; width: 100%; height: auto; }

.room .glow {
  position: absolute;
  inset: 4% 4% 10%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.room.lit .glow { opacity: 1; }

.room .room-name {
  position: absolute;
  left: 5.5%; top: 5.5%;
  max-width: 84%;
  font-size: var(--t16);
  line-height: 1.3;
  color: var(--ink);
  background: #F7F1E4;
  padding: var(--s8) var(--s12);
  border: 2px solid var(--cream-deep);
  border-radius: 4px;
}
.room.dark .room-name { color: #F7F1E4; background: #121212; border-color: #3A3A48; }

.base { width: 95.08%; margin-inline: auto; display: block; }

/* The porch stands under the hall's door with its deck touching the plinth, not out on the grass at
   the end of the house, which is where a cell wide picture pushed to the right end of the row put it. */
.porch-wrap { position: relative; width: 95.08%; margin: -0.5% auto 0; }
.porch-wrap img { display: block; width: 16.96%; margin-left: var(--porch-left); height: auto; }

/* the cast walks over the whole house, so a resident can cross from one room to another */
.cast-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.doll {
  position: absolute;
  width: 3.55%;                           /* 44 of 1240 */
  aspect-ratio: 44 / 80;
  transition: left 1.1s cubic-bezier(.4, 0, .2, 1), top 1.1s cubic-bezier(.4, 0, .2, 1);
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
}

.doll span {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: calc(var(--n) * 100%) 100%;
  background-position: calc(var(--i) * 100% / (var(--n) - 1)) 0;
  image-rendering: auto;
}
.doll .b { background-image: url("/assets/img/cast/bodies.png"); --n: 8; }
.doll .f { background-image: url("/assets/img/cast/faces.png"); --n: 4; }
.doll .h { background-image: url("/assets/img/cast/hats.png"); --n: 6; }
.doll .c { background-image: url("/assets/img/cast/crown.png"); --n: 1; --i: 0; background-size: 100% 100%; }

.doll.talking { animation: bob 0.9s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }

.doll:hover { filter: drop-shadow(0 0 10px rgba(255, 217, 138, 0.95)); }

/* The bubble sits INSIDE the room its scene is in, in the air above the residents' heads, and is as
   wide as that room less its two insets. It used to be placed above the room, which put it over the
   room upstairs. */
.bubble {
  position: absolute;
  width: 360px;
  min-height: 72px;
  border-image: url("/assets/img/props/bubble.png") 60 fill / 24px / 0 stretch;
  padding: var(--s12) var(--s16);
  font-size: var(--t16);
  line-height: 1.4;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease, left 0.9s ease, top 0.9s ease, width 0.9s ease;
  pointer-events: none;
  z-index: 4;
}
.bubble.on { opacity: 1; transform: translateY(0); }
.bubble .who {
  display: block;
  font-weight: 500;
  font-size: var(--t16);
  color: var(--ink-soft);
  margin-bottom: var(--s4);
}
.bubble .tail {
  position: absolute;
  bottom: -22px; left: 28px;
  width: 36px;
}

/* lights off: the house goes dark and SAYS so, never just a dimmed picture */
.house.off .floors, .house.off .roof, .house.off .base, .house.off .porch-wrap { filter: brightness(0.42) saturate(0.5) hue-rotate(-10deg); }

.lights-off-word {
  position: absolute;
  left: 0; top: 36%;
  width: calc(var(--natw) * var(--blk) / 6);
  z-index: 5;
  display: none;
}
.house.off .lights-off-word { display: block; }

/* ---------------------------------------------------------------- the subtitle strip */

.strip-band { margin-top: var(--sec); }

/* one event line: what was said, then who said it and what caused it, a step down in size. Every strip
   of this kind is the same height whatever it carries. */
.strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s24);
  align-items: center;
  min-height: 136px;
}

.strip .said {
  font-size: var(--t20);
  line-height: 1.5;
  margin: 0 0 var(--s8);
  max-width: 72ch;
}

.strip .by {
  font-size: var(--t16);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.strip .by a { color: var(--wood-deep); }

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

/* One key, four states, one surface. The face is flat: a dot screen under a 16 px label was noise. */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s12);
  min-height: 56px;
  padding: 0 var(--s24);
  border: 0;
  background: none;
  border-image: url("/assets/img/props/key-plate.png") 52 fill / 26px / 0 stretch;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t16);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease;
}

.key img { width: 24px; height: 24px; }
.key:hover { transform: translateY(-2px); }
.key:active { transform: translateY(3px); border-image-source: url("/assets/img/props/key-plate-down.png"); }

/* An off key is a key that is not lit, and its LABEL is dimmed by colour: 5.07:1 on its own face, so
   it is still read. Nothing here is dimmed with a filter, which would dim the surface under it too. */
.key[aria-disabled="true"], .key:disabled {
  border-image-source: url("/assets/img/props/key-plate-off.png");
  color: var(--ink-off);
  cursor: not-allowed;
  transform: none;
}
.key[aria-disabled="true"]:hover, .key:disabled:hover { transform: none; }
.key[aria-disabled="true"] img, .key:disabled img { opacity: 0.55; }

/* ---------------------------------------------------------------- the prize trough */

.pot-band { margin-top: var(--sec); }

.pot-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s12);
  margin-bottom: var(--s12);
  color: #FFFFFF;
  text-shadow: 2px 2px 0 var(--shadow-lawn);
}

.pot-top .read { font-weight: 500; font-size: var(--t24); }
.pot-top .goal { font-size: var(--t16); }

/* the same height as every key on the page, because it is the one thing here that fills */
.trough {
  position: relative;
  border-image: url("/assets/img/props/trough-bar.png") 56 fill / 28px / 0 stretch;
  height: 56px;
  overflow: hidden;
}

/* the groove the pot fills along, the gold standing in it, and nine notches at every tenth so the
   level can be read off the bar and not only off the number above it */
.trough .level {
  position: absolute;
  left: 15px; top: 13px; bottom: 11px;
  min-width: 8px;
  width: 0;
  background: url("/assets/img/props/trough-fill.png") left center / auto 100% repeat-x;
  border-radius: 3px;
  transition: width 1.2s ease;
}

.trough .tick {
  position: absolute;
  top: 13px; bottom: 11px;
  width: 4px;
  height: auto;
  transform: translateX(-2px);
  opacity: 0.85;
}

.pot-line {
  font-size: var(--t16);
  line-height: var(--lh);
  color: #FFFFFF;
  text-shadow: 2px 2px 0 var(--shadow-lawn);
  margin: var(--s12) 0 0;
}

/* ---------------------------------------------------------------- the yard: the lifted front wall */

.yard { margin-top: var(--sec); position: relative; }

.wall {
  position: relative;
  width: 100%;
  border-image: url("/assets/img/props/wall-plate.png") 88 fill / 44px / 0 stretch;
  padding: var(--s48);
}

.wall-shadow {
  position: absolute;
  bottom: -22px; left: 0;
  width: 100%;
  z-index: -1;
}

.wall h2 {
  font-weight: 500;
  font-size: var(--t32);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 var(--s16);
  padding-bottom: var(--s16);
  border-bottom: 3px solid var(--cream-deep);
}

.wall .explains {
  font-size: var(--t16);
  line-height: var(--lh);
  color: var(--ink-soft);
  margin: 0 0 var(--s24);
  max-width: 72ch;
}

/* the address and its key are one row, on one height */
.slot {
  display: flex;
  align-items: stretch;
  gap: var(--s12);
  margin-bottom: var(--s24);
}

.slot .address {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  border-image: url("/assets/img/props/field-plate.png") 48 fill / 24px / 0 stretch;
  padding: var(--s12) var(--s16);
  font-size: var(--t16);
  line-height: 1.4;
  overflow-wrap: anywhere;
  user-select: all;
}

.slot .address.empty { color: var(--ink-soft); user-select: none; }
.slot .key { flex: 0 0 auto; align-self: stretch; }

.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s12);
}

.keys .key { width: 100%; padding: var(--s12); gap: var(--s8); text-align: center; }

.said-ok {
  font-size: var(--t16);
  line-height: 1.4;
  margin: var(--s16) 0 0;
  min-height: 24px;
}

/* ---------------------------------------------------------------- lists: the cast and the tape */

.grid-cast {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: var(--s16);
  margin-top: var(--s24);
}

.tenant {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s16);
  align-items: start;
  border-image: url("/assets/img/props/board.png") 72 fill / 30px / 0 stretch;
  padding: var(--s24);
  text-decoration: none;
  color: var(--ink);
  min-height: 164px;
}

.tenant:hover { filter: brightness(1.03) drop-shadow(0 6px 0 rgba(20, 44, 12, 0.28)); }

.tenant .pic { position: relative; width: 64px; aspect-ratio: 44 / 80; }
.tenant .pic span { position: absolute; inset: 0; background-repeat: no-repeat; background-size: calc(var(--n) * 100%) 100%; background-position: calc(var(--i) * 100% / (var(--n) - 1)) 0; }
.tenant .pic .b { background-image: url("/assets/img/cast/bodies.png"); --n: 8; }
.tenant .pic .f { background-image: url("/assets/img/cast/faces.png"); --n: 4; }
.tenant .pic .h { background-image: url("/assets/img/cast/hats.png"); --n: 6; }

.tenant .nm { display: block; font-weight: 500; font-size: var(--t20); line-height: 1.3; }
.tenant .meta { display: block; font-size: var(--t16); line-height: 1.4; color: var(--ink-soft); margin-top: var(--s4); }
.tenant .ch { display: block; font-size: var(--t16); line-height: var(--lh); margin-top: var(--s12); }

.scenes { display: flex; flex-direction: column; gap: var(--s16); margin-top: var(--s24); }

.scene {
  border-image: url("/assets/img/props/board.png") 72 fill / 32px / 0 stretch;
  padding: var(--s32);
}

/* the strip across the head of a scene, the way a window carries its title */
.scene .head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8) var(--s16);
  align-items: baseline;
  font-size: var(--t16);
  line-height: 1.4;
  color: var(--ink-soft);
  background: var(--cream-dark);
  border-bottom: 3px solid var(--cream-deep);
  margin: calc(var(--s32) * -1) calc(var(--s32) * -1) var(--s24);
  padding: var(--s16) var(--s32);
}

.scene .tag {
  font-weight: 500;
  font-size: var(--t16);
  color: var(--wood-deep);
  letter-spacing: 0.06em;
}

.scene ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s12); }
.scene li { display: grid; grid-template-columns: minmax(120px, 22%) minmax(0, 1fr); gap: var(--s16); align-items: baseline; }
.scene .nm { font-weight: 500; font-size: var(--t16); line-height: var(--lh); }
.scene .tx { font-size: var(--t16); line-height: var(--lh); margin: 0; max-width: 72ch; }

/* ---------------------------------------------------------------- forms */

.form { display: flex; flex-direction: column; gap: var(--s16); margin-top: var(--s8); }

.form label { font-size: var(--t16); display: block; margin-bottom: var(--s8); }

.form input, .form textarea {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--t16);
  line-height: 1.6;
  padding: var(--s12) var(--s16);
  min-height: 56px;
  border: 3px solid var(--cream-deep);
  border-radius: 6px;
  background: #FFFCF5;
  color: var(--ink);
}

.form textarea { min-height: 128px; resize: vertical; }
.form .row { display: flex; gap: var(--s12); flex-wrap: wrap; align-items: center; }
.form .left { font-size: var(--t16); color: var(--ink-soft); }

dialog {
  border: 0;
  padding: 0;
  background: none;
  max-width: min(680px, calc(100vw - 48px));
  width: 100%;
}
dialog::backdrop { background: rgba(14, 30, 10, 0.68); }

.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--s16); margin: var(--s16) 0 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s16); align-items: baseline; }
.steps li::before {
  content: counter(step);
  font-weight: 500;
  font-size: var(--t24);
  color: var(--wood-deep);
  line-height: 1.3;
}

.rules p, .rules li { font-size: var(--t16); line-height: var(--lh); }
.rules table { width: 100%; border-collapse: collapse; margin-top: var(--s8); table-layout: fixed; }
.rules th, .rules td { text-align: left; padding: var(--s12) var(--s16); border-bottom: 3px solid var(--cream-deep); font-size: var(--t16); line-height: 1.5; overflow-wrap: anywhere; }
.rules th { font-weight: 500; }
.rules td.n { white-space: normal; }

/* the exact text a wallet is asked to sign, shown before it is signed */
#preview {
  background: #FFFCF5;
  border: 3px solid var(--cream-deep);
  border-radius: 6px;
  padding: var(--s16);
  font-size: var(--t16);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* the porch at the end of the 404, with the suitcase already on it */
.porch-404 { position: relative; width: min(420px, 100%); margin-top: var(--s32); }
.porch-404 img { display: block; width: 100%; height: auto; }
.porch-404 .case { position: absolute; left: 8%; top: 2%; width: 17%; }

/* ---------------------------------------------------------------- narrower windows */

/* A short laptop window (1366 x 768) cannot hold a full masthead AND the house. One step down on the
   display scale, and only while the window is short. Still a whole number of pixels to a block. */
@media (min-width: 901px) and (max-height: 820px) {
  :root { --blk-mast: 3; --sec: 48px; }
  .margins { padding-top: var(--s16); }
  .line { margin-top: var(--s8); }
  .card-face { min-height: 92px; }
  .board { padding: var(--s24); }
}

/* Under 1120 the masthead and the broadcast board stop sharing a row: side by side, the masthead's own
   column fell under the width the word needs at its whole block, and a clamped word is an off grid word. */
@media (max-width: 1120px) {
  .mast-row { grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
}

@media (max-width: 900px) {
  :root { --sec: 48px; --gutter: 24px; }
  .says-band { grid-template-columns: minmax(0, 1fr); gap: var(--s32); }
  .strip { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; }
  .strip .key { justify-self: start; }
  .keys { grid-template-columns: repeat(2, 1fr); }
  .scene li { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* the rope is gone, so the cards stop hanging and become a plain two column list */
  .line { padding-top: 0; }
  .line .post, .line .rope, .card .peg { display: none; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: var(--s12); }
  /* five cards in two columns leave a half empty row, so the fifth completes its own */
  .cards li:last-child { grid-column: 1 / -1; }
  .card { padding-top: 0; }
}

/* Each step down is taken where the LONGEST word of any page stops fitting the column: nobody home at
   1338 drawn pixels for a masthead, head of house at 1356 for a section word. */
@media (max-width: 955px) {
  :root { --blk-mast: 3; }
}

@media (max-width: 725px) {
  :root { --blk: 2; }
}

@media (max-width: 700px) {
  :root { --blk-mast: 2; }
}

@media (max-width: 760px) {
  .wall { padding: var(--s32) var(--s24); border-image-width: 32px; }
  .grid-cast { grid-template-columns: repeat(2, 1fr); }
}

/* The phone gets the WHOLE house, scaled, and never a rail: a row that scrolls sideways inside a page
   is the one thing a thumb cannot tell from the page itself. Six rooms in two columns keep each room
   wide enough for its own name. */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .floors { grid-template-columns: repeat(2, 1fr); }
  .porch-wrap img { margin-left: 78.92%; }     /* the hall is bottom right now, so its door moved */
  .bubble { width: auto; }
  .slot { flex-direction: column; }
  .slot .key { width: 100%; }
  .scene .head { margin: calc(var(--s32) * -1) calc(var(--s24) * -1) var(--s16); padding: var(--s12) var(--s24); }
  .scene { padding: var(--s32) var(--s24) var(--s24); }
  .rules th, .rules td { padding: var(--s8); }
  .shares div { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s16); }
}

/* Under 520 px no whole block both fits the column and leaves the word readable, so the section words
   take ONE height instead and the masthead fills the column. They are resampled smoothly, which is
   clean because it is a reduction: it was ENLARGING off the grid that made these words look soft. */
@media (max-width: 519px) {
  .word { width: auto; height: 44px; max-width: 100%; image-rendering: auto; }
  .mast .word { width: 100%; height: auto; image-rendering: auto; }
  .mast .word.second { width: 54%; }
  .shares dt .word { width: auto; height: 40px; }
  .lights-off-word { width: 76%; height: auto; }
  .card-face { min-height: 88px; padding: var(--s12); }
  .card .name { font-size: var(--t16); }
  .grid-cast { grid-template-columns: minmax(0, 1fr); }
  .keys { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s12); }
  .shares div { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s12); }
  .room .room-name { padding: var(--s4) var(--s8); max-width: 96%; left: 2%; top: 3%; }
  /* a mono column this narrow reads better one step down the scale */
  .premise, .strip .said { font-size: var(--t16); }
}

/* the narrowest phone the kit checks: one step further down, so the longest word still fits the column */
@media (max-width: 360px) {
  .word { height: 36px; }
  .shares dt .word { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .lamp { opacity: 1; }
}