/* Placeless. The page is ONE OBJECT: the house board of a theatre with no stage, a brass framed
   board hung in the dark whose face is divided into unequal lit cells.

   Built 50 on 50, as the brief orders: the WORLD, the four colours and the two faces come from its
   own "Дизайн сайта и UI" section (velvet #5A0F1E, leaf gold #C9A227, ivory #F5EEDC, ink #1A1414,
   Cinzel and EB Garamond); the COMPOSITION, the ink distribution, the inverse title bars, the dotted
   leaders, the hairline callouts and the dot texture are measured off his collage
   (tools/refmeasure.mjs: 64.13% of his frame under luminance 64, ONE dominant ink at 68.07% of
   everything that draws, ONE neutral at 18.01%, accents 11.91%; seams at 27.9 / 56.9 / 73.0% of the
   width, which are this page's own column splits; dot pitch 0.3% of the frame = 3 px here).

   TYPE, one face per role and no fourth.
     Cinzel        the house's own voice: the wordmark, a cell's name, a seat number.
     EB Garamond   every sentence a person reads.
     Spline Sans Mono  every label, value, address and count.
   Sizes come off one scale: 16 / 20 / 24 / 32 / 48. Nothing is 14, 18, 22, 26 or 30, and nothing
   essential is under 16 px.

   SPACE, one scale: 4 / 8 / 12 / 16 / 24 / 32 / 48.

   COLOUR, one meaning each.
     gold    a seat that is TAKEN, and every live value of the house
     ivory   a sentence or a label a person reads
     velvet  the material of the house: a free seat, the curtain, a tier still shut
     ember   one meaning only: the seat being taken right now (his collage spends 2.42% on one red)
   Nothing is gold because gold looked better. */

@font-face { font-family: Cinzel; src: url("/fonts/Cinzel-var.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/EBGaramond-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Spline Sans Mono"; src: url("/fonts/SplineSansMono-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --ink: #120E0E;
  --board: #1A1414;
  --velvet: #5A0F1E;
  --velvet-lo: #330810;
  --gold: #C9A227;
  --gold-hi: #E8CE74;
  --ivory: #F5EEDC;
  --label: #BFB29A;          /* a label and a value not reading yet: 8.3:1 on the cell face */
  --ember: #D9452F;          /* 5.2:1 on the cell face, and it means exactly one thing */

  --page: 1120px;
  --gutter: 24px;
  --rail: 20px;              /* the board's brass rail, the nine-slice width of board.png */
  --frame: 12px;             /* a cell's own frame, the nine-slice width of cell.png */
  --pad-x: 24px;             /* one inner padding for every cell on the board */
  --pad-t: 20px;
  --pad-b: 24px;
  --head: 84px;              /* the headline slot every cell of a four column row reserves, so the
                                lists below start on ONE line across the whole section */
  --links: 572px;            /* three even levers and the plate around them: see the box office */

  --cinzel: Cinzel, "Trajan Pro", Georgia, serif;
  --garamond: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --slice-board: url("/img/board.png") 40 fill / var(--rail) / 0 stretch;
  --slice-cell: url("/img/cell.png") 24 / 12px / 0 stretch;
  --slice-cell-lit: url("/img/cell-lit.png") 24 / 12px / 0 stretch;
  --cloth: url("/img/weave.png") repeat;
  --slice-bar: url("/img/bar.png") 20 28 20 28 fill / 10px 14px / 0 stretch;
  --slice-ticket: url("/img/ticket-flush.png") 56 88 192 88 fill / 28px 44px 96px 44px / 0 stretch;
  --slice-lever: url("/img/lever-flush.png") 20 fill / 10px / 0 stretch;
  --slice-lever-hover: url("/img/lever-flush-hover.png") 20 fill / 10px / 0 stretch;
  --slice-lever-down: url("/img/lever-flush-down.png") 20 fill / 10px / 0 stretch;
  --slice-lever-off: url("/img/lever-flush-off.png") 20 fill / 10px / 0 stretch;
  --slice-hot: url("/img/lever-hotface.png") 20 fill / 10px / 0 stretch;
  --slice-hot-hover: url("/img/lever-hotface-hover.png") 20 fill / 10px / 0 stretch;
  --slice-hot-down: url("/img/lever-hotface-down.png") 20 fill / 10px / 0 stretch;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font: 400 16px/1.62 var(--garamond);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The house the board hangs in: the air of an empty auditorium, blurred and on its own clocks.
   Nothing here follows the pointer. */
canvas.air {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9;
  padding: 12px 24px;
  background: var(--gold);
  color: var(--ink);
  font: 500 16px var(--mono);
}
.skip:focus { left: 24px; top: 24px; }

/* ------------------------------------------------------------------ the one object */
.board {
  position: relative;
  z-index: 1;
  width: min(var(--page), calc(100vw - 2 * var(--gutter)));
  margin: 48px auto 64px;
  border: var(--rail) solid transparent;
  border-image: var(--slice-board);
  padding: 14px;
}

/* Every row of the board is a mosaic of unequal cells with no gutter between them: his collage has
   no gutters at all, and its vertical seams fall at 27.9 / 56.9 / 73.0% of the width. Those are the
   splits below. Every row starts on the same left line and ends on the same right line. */
.row { display: grid; grid-template-columns: 1fr; }
.row + .row { margin-top: -1px; }               /* the cells' own hairlines make one seam, not two */
@media (min-width: 900px) {
  .row-head { grid-template-columns: 62.9% 37.1%; }
  .row-house { grid-template-columns: 62.9% 37.1%; }
  .row-two { grid-template-columns: 56.9% 43.1%; }
  /* Two first, four only where four fit. The longest title in this row is OPENS BALCONY III at
     178 px of mono, and its column has to hold that plus the 36 px left line and 36 px right:
     250 px, which the 24.5% column only reaches from a window of about 1140. Under that the row
     is two even columns rather than four with a wrapped title, because a wrapped title makes the
     plates different heights and every headline below them stops lining up. */
  .row-four { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1160px) {
  .row-four { grid-template-columns: 27.9% 24.5% 24.5% 23.1%; }
}

.cell {
  position: relative;
  min-width: 0;
  background: var(--cloth);
  background-size: 48px 48px;
  border: var(--frame) solid transparent;
  border-image: var(--slice-cell);
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  display: flex;
  flex-direction: column;
}
.cell-lit {
  border-image: var(--slice-cell-lit);
  background-image: linear-gradient(180deg, rgba(201, 162, 39, 0.13), rgba(201, 162, 39, 0.03) 48%, rgba(201, 162, 39, 0.10)), url("/img/weave.png");
}
.cell + .cell { margin-left: -1px; }

/* The inverse title strip of his collage: dark letters on a solid bar of the one ink.
   The plate spans the WHOLE column, edge to edge, over the cell's own frame. Held inside the frame
   it was inset 12 px on both sides of every cell, which is 1% of the box office's width and 5% of
   the narrowest column, so the same inset read as flush in a wide cell and as short in a narrow
   one. Bled to the column edge there is no inset left to read, and the four plates of a row form
   one band broken only by the plates' own end caps.
   Its text sits on the cell's own left line: 14 px of end cap plus 22 px of padding is the 36 px
   the body below it starts at. */
.cell-bar {
  position: relative;
  margin: calc(-1 * (var(--pad-t) + var(--frame))) calc(-1 * (var(--pad-x) + var(--frame))) 16px;
  border-style: solid;
  border-color: transparent;
  border-width: 10px 14px;
  border-image: var(--slice-bar);
  padding: 0 22px;
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: #1C1406;
  font: 600 16px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* two plates that meet keep the board's own seam between them, the same hairline the cells under
   them are divided by, so one band of gold still reads as one plate per column */
.cell + .cell > .cell-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ink);
}
.cell-bar .bar-note {
  margin-left: auto;
  letter-spacing: 0.08em;
  font-weight: 500;
  opacity: 0.86;
  text-transform: none;
}

/* ------------------------------------------------------------------ type roles */
.wordmark { display: block; width: 100%; max-width: 100%; height: auto; }
.lede { margin: 16px 0 0; max-width: 46ch; color: var(--ivory); font-size: 20px; line-height: 1.5; }
.prose { margin: 0 0 12px; color: var(--ivory); }
.prose:last-child { margin-bottom: 0; }

h1.name, h2.name { margin: 0; font: 600 32px/1.1 var(--cinzel); color: var(--gold); letter-spacing: 0.02em; }
.display { font: 600 48px/1 var(--cinzel); color: var(--gold); }

.label { font: 500 16px/1.3 var(--mono); letter-spacing: 0.08em; color: var(--label); text-transform: uppercase; }
.value { font: 500 20px/1.3 var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.value-big { font: 500 32px/1.1 var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; }
.value-read { color: var(--ivory); }
.value-off { color: var(--label); }
.unit { color: var(--label); font-size: 16px; letter-spacing: 0.06em; }

/* A row of the house ledger, with the dotted leader his collage runs between a name and its number.
   The leader is a background, never a border, so the row is not a box and keeps no padding debt. */
/* The ledger is ONE grid, not a stack of rows that each lay themselves out: a row of its own
   sized its value column to its own value, so the five dotted leaders stopped at five different
   verticals. Three shared columns stop every leader on one line and right align every figure on
   another. */
.ledger { margin: 0; display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: baseline; gap: 10px; }
.ledger-row { display: contents; }
.ledger .value, .ledger .value-big { text-align: right; }
.facts { display: grid; gap: 12px; }
.fact { display: grid; gap: 4px; }
.fact .value, .fact .value-big { line-height: 1.2; }

/* One step through a whole section of columns. Every cell of a four column row opens with a
   headline of the same reserved height, so the lists under them all start on one line; inside a
   list every label reserves two lines, so a label that wraps does not push its own value down and
   leave the value beside it hanging; and the closing sentence is pinned to the foot, so the four
   columns end on one line instead of four. */
.headline { display: grid; align-content: end; gap: 4px; min-height: var(--head); margin-bottom: 16px; }
.row-four .cell > .note { margin-top: auto; padding-top: 16px; }
/* The reserve sits UNDER the first line of a label, not over its value: the label block is two
   lines tall and its text sits on the bottom of it, so a label of one line still stands right on
   top of the figure it names while every figure in the section keeps its line. */
@media (min-width: 900px) {
  .row-four .fact > .label, .headline > .label { min-height: 2.6em; display: flex; align-items: flex-end; }
}

.ledger .leader {
  height: 1em;
  background-image: radial-gradient(circle at 1.5px 50%, rgba(201, 162, 39, 0.5) 1.2px, transparent 1.4px);
  background-size: 7px 100%;
  background-position: 0 0.12em;
  background-repeat: repeat-x;
}

/* ------------------------------------------------------------------ the house plan */
.house-wrap { position: relative; }
.house-canvas { display: block; width: 100%; height: auto; cursor: pointer; }
.house-canvas:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 4px; }

/* The hairline callout of his poster: a box naming a part, with a leader line into the drawing. */
.callout {
  position: absolute;
  z-index: 2;
  padding: 10px 16px;
  background: rgba(18, 14, 14, 0.96);
  border: 1px solid var(--gold);
  font: 500 16px/1.35 var(--mono);
  color: var(--ivory);
  pointer-events: none;
  white-space: nowrap;
}
.callout b { color: var(--gold); font-weight: 600; }
.callout[hidden] { display: none; }

/* Four states, four even columns: a flex legend sets the distance between pairs from the length of
   the words, so the same 24 px gap read as four different gaps. */
.house-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 16px; }
/* two columns of a phone cannot hold "behind the curtain" on one line, and a legend whose entries
   are one, two and three lines tall is not a legend */
@media (max-width: 479px) { .house-legend { grid-template-columns: 1fr; } }
.house-legend > span { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; font: 500 16px/17px var(--mono); color: var(--label); letter-spacing: 0.06em; }
.house-legend img { width: 22px; height: 17px; display: block; }

/* ------------------------------------------------------------------ the ticket */
.ticket {
  border-style: solid;
  border-color: transparent;
  border-width: 28px 44px 96px 44px;
  border-image: var(--slice-ticket);
  padding: 4px 8px 8px;
  color: #2A1008;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* the printing spreads down the whole stub instead of sitting
                                       in a block at the top with the paper empty under it */
  gap: 12px;
  min-height: 300px;
  flex: 1 1 auto;
}
.ticket .t-head { font: 500 16px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #7E1526; }
.ticket .t-seat { font: 700 48px/1 var(--cinzel); color: #2A1008; }
.ticket .t-row { font: 400 20px/1.2 var(--garamond); color: #5A2314; }
.ticket .t-price { font: 600 24px/1.2 var(--mono); color: #2A1008; font-variant-numeric: tabular-nums; }
.ticket .t-sub { font: 500 16px/1.3 var(--mono); color: #7E1526; letter-spacing: 0.06em; }
.ticket .t-foot { padding-top: 12px; }
.ticket .t-foot .lever { width: 100%; }

/* ------------------------------------------------------------------ levers (every button) */
.lever {
  appearance: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 10px solid transparent;
  border-image: var(--slice-lever);
  background: none;
  color: var(--ivory);
  font: 500 16px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.08s ease, border-image-source 0.12s linear;
}
.lever:hover { border-image: var(--slice-lever-hover); }
.lever:active { border-image: var(--slice-lever-down); transform: translateY(1px); }
.lever:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }
.lever[aria-current="page"] { border-image: var(--slice-lever-hover); color: var(--gold); }

.lever-hot { border-image: var(--slice-hot); color: #1C1406; font-weight: 600; }
.lever-hot:hover { border-image: var(--slice-hot-hover); }
.lever-hot:active { border-image: var(--slice-hot-down); transform: translateY(1px); }

.lever[disabled], .lever[aria-disabled="true"] {
  border-image: var(--slice-lever-off);
  color: #908780;                      /* 4.77:1 on the #241D1B lever-off face, dimmed by colour, never by opacity */
  cursor: not-allowed;
}
/* a disabled control still answers the keyboard, so a visitor who tabs learns it exists and is
   not yet; only the pointer is refused */
.lever[aria-disabled="true"] { pointer-events: none; }
.lever[aria-disabled="true"]:focus-visible { pointer-events: auto; }
.lever img { display: block; flex: 0 0 auto; }

.levers { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ the box office
   Two plates of ONE kind, side by side: same padding, same hairline, same grille, tops on one line
   and feet on one line. The right hand half was a bare stack, so its first label started 20 px
   above the contract's first label and its foot stopped 52 px short of the plate beside it.
   The right hand column is as wide as three even levers plus the plate that holds them and not a
   pixel wider: the widest of them is HOUSE RULES, 120 px of mono inside 22 px of lip and padding on
   each side, so three of them with two 12 px gaps need 516, and the plate adds 48 of padding and
   its hairline. Under a window of 1100 the left column would be too narrow for the address, so the
   two plates stack and each takes the whole cell, which keeps them the same two plates. */
.office { display: grid; gap: 16px; }
@media (min-width: 1100px) {
  .office { grid-template-columns: minmax(0, 1fr) var(--links); align-items: stretch; }
}

/* The grille of a box office window. The address is printed ON the plate, so the lattice is held
   under a dark wash: a texture a reader has to look through is not a texture, it is noise. */
.ca-plate {
  position: relative;
  padding: 20px 24px;
  background:
    linear-gradient(rgba(10, 7, 7, 0.80), rgba(10, 7, 7, 0.80)),
    url("/img/grille.png") 0 0 / 24px 24px repeat;
  border: 1px solid rgba(138, 108, 34, 0.55);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ca-plate .label { margin-bottom: 0; }
.ca-value {
  margin: 0;
  font: 500 20px/1.45 var(--mono);
  color: var(--gold);
  overflow-wrap: anywhere;
  min-width: 0;
  user-select: all;
}
.ca-value.empty { color: var(--label); user-select: none; }
/* the copy lever fills the plate and its answer has a slot of its own that is always there, so
   confirming a copy moves nothing on the page */
.ca-foot { margin-top: auto; display: grid; gap: 8px; }
.ca-foot .lever { width: 100%; }
.copy-said { font: 500 16px/20px var(--mono); color: var(--gold); letter-spacing: 0.06em; min-height: 20px; }
.copy-said.bad { color: var(--ember); }

/* Three marks, three places, one width each: a row of levers sized by their words read as three
   different buttons. */
.levers-even { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.levers-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.levers-wide { display: grid; gap: 12px; }
.levers-even .lever, .levers-two .lever, .levers-wide .lever { width: 100%; padding: 0 12px; min-width: 0; }

/* ------------------------------------------------------------------ the holder gauge
   Forty lamps in ten columns: a wrapping flex row fitted nine to a line and broke the fortieth off
   on its own, which reads as a drawing that ran out of room rather than as a gauge. Ten by four is
   the whole thing, and the line under it says what the lamps count. */
.gauge { display: grid; grid-template-columns: repeat(10, minmax(0, 14px)); justify-content: space-between; gap: 4px; margin: 0; }
.gauge img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------------ the curtain */
.curtain {
  position: relative;
  min-height: 112px;
  background-image: url("/img/curtain.png");
  background-size: auto 100%;
  background-repeat: repeat-x;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.curtain p { margin: 0; text-align: center; font: 500 16px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--ivory); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); }

/* ------------------------------------------------------------------ forms */
.field { display: grid; gap: 8px; }
.field input[type="text"], .field input[type="number"] {
  min-height: 48px;
  padding: 0 16px;
  background: #0C0909;
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: var(--gold);
  font: 500 20px var(--mono);
}
.field input:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

/* ------------------------------------------------------------------ the two levers of the house
   A lever with no scale is a guess. The value rides the handle, the two ends of the travel are
   named under it, and every state the control has is drawn. The input's own font was Arial at
   13.33 px, the one fourth face and the one off scale size on the whole board: it carries no text,
   but it was there. */
.slider { display: grid; gap: 4px; }
.knob-line { position: relative; height: 36px; }
.knob {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 16px;              /* a chip is a box with a fill: one em at the sides, half at top */
  height: 36px;
  display: inline-flex;
  align-items: center;
  background: rgba(10, 7, 7, 0.92);
  border: 1px solid var(--gold);
  font: 500 16px/1 var(--mono);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ends { display: flex; justify-content: space-between; font: 500 16px/1.3 var(--mono); color: var(--label); letter-spacing: 0.06em; }

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  margin: 0;
  background: none;
  font: 500 16px var(--mono);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: #0C0909;
  border: 1px solid rgba(201, 162, 39, 0.45);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 30px;
  margin-top: -11px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 46%, #8A6C22);
  border: 1px solid #1C1406;
}
input[type="range"]:hover::-webkit-slider-thumb { background: linear-gradient(180deg, #FFF3C4, var(--gold-hi) 46%, var(--gold)); }
input[type="range"]:active::-webkit-slider-thumb { background: linear-gradient(180deg, #8A6C22, var(--gold) 54%, var(--gold-hi)); }
input[type="range"]:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }
input[type="range"]:disabled { cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-thumb { background: #4A443E; }
input[type="range"]::-moz-range-track { height: 10px; background: #0C0909; border: 1px solid rgba(201, 162, 39, 0.45); }
input[type="range"]::-moz-range-thumb { width: 16px; height: 28px; border-radius: 0; background: var(--gold); border: 1px solid #1C1406; }

/* Both answers of the calculator in one shape, both with their unit, side by side across the
   whole panel: one of them carried a unit in small type and the other spelled it into the figure,
   and the pair sat in the left half with the right half empty. */
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: auto; padding-top: 16px; }
.results .label { min-height: 2.6em; }

table.sheet { width: 100%; border-collapse: collapse; font: 500 16px var(--mono); }
table.sheet th, table.sheet td { padding: 10px 16px 10px 0; text-align: left; vertical-align: baseline; }
table.sheet th { color: var(--label); font-weight: 500; line-height: 1.62; letter-spacing: 0.08em; text-transform: uppercase; }
table.sheet td { color: var(--gold); font-variant-numeric: tabular-nums; }
table.sheet td.read { color: var(--ivory); font-family: var(--garamond); font-size: 16px; line-height: 1.62; }
table.sheet tr + tr th, table.sheet tr + tr td { padding-top: 16px; }
table.sheet th, table.sheet td:not(.read) { white-space: nowrap; }

.note { font: 400 16px/1.5 var(--garamond); color: var(--label); }
a.plain { color: var(--gold); text-underline-offset: 3px; }
a.plain:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; }

/* Spacing has no business in a style attribute: an inline margin-top beat the rule that pins a
   cell's closing block to its foot line, and two panels side by side ended 122 px apart. */
.after { margin-top: 16px; }
.push { margin-left: auto; }
.said-slot { min-height: 1.6em; }

.stack { display: grid; gap: 16px; align-content: start; }
.stack-8 { display: grid; gap: 8px; align-content: start; }
.spread { display: flex; flex-wrap: wrap; gap: 24px 48px; }
/* The closing block of a cell sits on the cell's own foot line, a full padding clear of the frame,
   so two cells side by side end together and no button reads as cut by the frame. Only where the
   cell has something above that block to hold: a cell of one block keeps it under its title. */
.row-two .cell > :last-child:nth-child(n + 3),
.row-house .cell > :last-child:nth-child(n + 3) { margin-top: auto; padding-top: 16px; }

/* ------------------------------------------------------------------ the phone */
@media (max-width: 899px) {
  :root { --pad-x: 20px; --pad-t: 16px; --pad-b: 20px; }
  .board { margin: 24px auto 120px; padding: 10px; }
  .cell-bar { margin-bottom: 12px; padding: 0 18px; }
  .cell + .cell { margin-left: 0; margin-top: -1px; }
  .display { font-size: 32px; }
  .ticket { min-height: 0; }
  .results { grid-template-columns: 1fr 1fr; }
  /* the brief: the next seat's ticket is pinned to the foot of the phone screen */
  .pinned {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(18, 14, 14, 0.97);
    border-top: 1px solid rgba(201, 162, 39, 0.5);
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .pinned .label { font-size: 16px; }
}
@media (min-width: 900px) { .pinned { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------------ narrow ticket
   Under 520 px the ticket's own frame would eat the price, so the frame comes in with it. */
@media (max-width: 520px) {
  .ticket {
    border-width: 20px 24px 76px 24px;
    border-image: url("/img/ticket-flush.png") 56 88 192 88 fill / 20px 24px 76px 24px / 0 stretch;
  }
  .ticket .t-seat { font-size: 24px; }
  .ticket .t-price { font-size: 20px; }
}

/* Under 520 px a label and its value cannot share a line inside a 148 px cell, so the ledger
   stacks and the dotted leader, which is a detail of a two column row, goes with it. */
@media (max-width: 899px) {
  /* a leader is a detail of a wide row: under a desk width the row keeps two columns and drops it */
  .ledger { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .ledger .leader { display: none; }
  .lede { font-size: 16px; }
  .ticket .lever { width: 100%; }
}
/* Under 560 the two columns of a ledger row cannot both hold a phrase: the value goes under
   its label, which is what every narrow cell on this board already does. */
@media (max-width: 560px) {
  /* Stacked, the ledger needs two different gaps: 2 px inside a pair and 12 px between pairs.
     One grid has one gap, so below this width each row lays itself out again and the shared
     columns, which only existed to line the leaders up, are given back with the leaders. */
  .ledger { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .ledger-row { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .ledger .value { text-align: left; }
}

/* The title strip holds its name alone wherever the name and the note cannot share one line.
   Under 560 the cell is narrow; between 900 and 1159 the cell is HALF of a two column row, which
   is the narrowest a title plate ever gets, and a note that wraps makes one plate of a row taller
   than the others and throws every headline under them out of line. Over 1160 both fit: measured
   at 1280, 1440 and 1920. Under 900 every cell is the width of the board and both fit again. */
@media (max-width: 560px), (min-width: 900px) and (max-width: 1159px) {
  .cell-bar .bar-note { display: none; }
}
@media (max-width: 639px) {
  /* even levers stop fitting across a narrow cell, so they become one even column */
  .levers-even, .levers-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .results { grid-template-columns: 1fr; }
  .results .label, .row-four .fact > .label { min-height: 0; }
}
@media (max-width: 420px) {
  :root { --gutter: 12px; }
  .ticket {
    border-width: 16px 16px 60px 16px;
    border-image: url("/img/ticket-flush.png") 56 88 192 88 fill / 16px 16px 60px 16px / 0 stretch;
  }
  .ticket .lever { white-space: normal; padding: 0 12px; line-height: 1.25; }
}

/* The hundred prices of the parterre: a grid of pairs that reflows, never a ten column table. */
.pricelist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px 24px;
}
.price-cell { display: grid; grid-template-columns: 2.5em 1fr; align-items: baseline; gap: 8px; }
.price-cell .value { text-align: right; }

/* At 320 a three column table of figures cannot hold its own row: it stacks, and the head row
   goes with it, because a header above a stack labels nothing. */
@media (max-width: 560px) {
  table.sheet, table.sheet tbody, table.sheet tr, table.sheet th, table.sheet td { display: block; width: 100%; }
  table.sheet thead { display: none; }
  table.sheet tr + tr { margin-top: 20px; }
  table.sheet th, table.sheet td { padding: 0 0 4px; }
  table.sheet tr + tr th, table.sheet tr + tr td { padding-top: 0; }
}

/* At 320 the box office plate is 122 px wide inside its own padding, and PUMP.FUN with its mark
   needs 137: the plate gives back half its side padding and the levers tighten, and on the very
   narrowest phones the mark goes above the word instead of beside it. */
@media (max-width: 480px) {
  .ca-plate { padding: 20px 20px; }   /* 16 plus the hairline is 17, under the 20 px floor a
                                          20 px address needs at its sides */
  .levers-even .lever { padding: 0 8px; }
}
@media (max-width: 360px) {
  .levers-even .lever {
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
  }
}

/* A value is a value, not a word: at 320 a mono figure wraps rather than leaving its box. */
.value, .value-big, .fact .value { min-width: 0; overflow-wrap: anywhere; }
.stack, .stack-8, .ledger, .facts { min-width: 0; }
@media (max-width: 420px) {
  .value { font-size: 16px; }
  .value-big { font-size: 24px; }
}