/* PSYKYODAI — black and white, no exceptions.
   Full rationale in ./DESIGN.md. The short version:

   One ground. The mark is drawn in ink on the same paper the text is printed
   on, at the top of the document, and there is no second static wordmark.

   There is no accent colour. State is carried by weight, rule, dash and fill,
   never by hue — which is stricter information design than a colour system,
   not a concession. The mark is monochrome for the same reason it always was:
   PSY reads as a drifting cloud and KYODAI as a solid travelling body, so the
   split is already visible without being asserted. */

:root {
  --paper:    #ffffff;
  --paper-2:  #f1f1f1;                  /* recessed field on paper */
  --ink:      #0a0a0a;
  --ink-2:    #4a4a4a;                  /* secondary prose */
  --rule:     #dcdcdc;                  /* hairlines, graticules */
  --rule-2:   #b4b4b4;                  /* rules that carry weight */
  --ghost:    #767676;                  /* labels — quiet, still AA on paper */

  /* instrument state — tone only. Form does the rest: dash, fill, weight. */
  --warn: #5c5c5c;
  --fail: #0a0a0a;

  --display: Archivo, ui-sans-serif, system-ui, sans-serif;
  --prose: "IBM Plex Serif", ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, .wordmark { font-family: var(--display); }

.plate {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* With no accent colour a link has to earn its distinction from weight and
   rule: it sits at full ink against secondary prose, and the underline thickens
   under the pointer rather than changing hue. */
a {
  color: var(--ink);
  text-decoration-line: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-2);
  transition: text-decoration-color .18s ease, text-decoration-thickness .18s ease;
}
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── masthead: the mark and the letter ─────────────────── */
/* The mark sits in the document, at the top of it, the size a masthead is. It
   does not get a screen of its own and there is no second static wordmark —
   the live one is the wordmark. */
.mast { display: flex; flex-direction: column; gap: 1.75rem; }

/* The opener carries more argument per line than anything below it, and the
   next section is announced by a small-caps label that cannot hold a reader
   back on its own. At the plate's ordinary 3.5rem the eye runs straight out of
   the statement and into the areas lede still carrying the density of the
   first, so the masthead is given more room to end in. Whitespace does it:
   a rule here would read as a second horizon under the mark. */
.mast { margin-bottom: 2rem; }

/* Height comes from the mark: it decides whether the word fits on one line or
   breaks to PSY / KYO / DAI, and sizes this box to match. */
.hero {
  position: relative;
  min-height: 6rem;
  display: flex;
  align-items: center;
  cursor: crosshair;
  touch-action: none;
}
.hero canvas { position: absolute; inset: 0; display: block; }

/* Canvas takes over painting, but the h1 stays for screen readers and SEO. */
.hero.live .wordmark {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wordmark {
  margin: 0;
  font-size: clamp(2.4rem, 9.5vw, 4.8rem);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--ink);
}
.wordmark .kyo { font-weight: 700; }

/* ── statement ─────────────────────────────────────────── */
/* The opener, and now the whole of the masthead's prose: it sits directly under
   the mark, is the first thing read, and so is the subject rather than the
   etymology of the name for it.

   It briefly lived inside a .mast-letter wrapper, whose `.mast-letter p` rule
   outranked this one on specificity and quietly served the opener at secondary
   size and secondary ink. The wrapper is gone; prose runs to the plate here the
   way the seats and the area rows do, so the sheet keeps one right edge.

   No text-wrap: balance — balancing evens the lines and so keeps them off that
   right edge. */
.statement {
  margin: 0;
  font-size: clamp(1.08rem, 2.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
}
.statement .lede { color: var(--ink); }

/* ── research areas + icon language ────────────────────── */
.areas { display: flex; flex-direction: column; gap: 1rem; }

/* The index of areas. A row on a spec sheet, not a card, and the same
   hairlines .row uses.

   Two levels, not three: the name, then one paragraph whose first sentence is
   the claim and carries full ink. An earlier version set the claim as its own
   underlined line between the two, which read as a link inside a row that was
   already a link, and stacked three type sizes where two say it.

   Hover changes weight, never a rule: putting the row's top border to full ink
   drew a heavy line above the row and a hairline below it, so a row lit up
   lopsided. The name takes the underline instead and the mono labels come up
   to ink with it. */
.area-list { list-style: none; margin: 0; padding: 0; }

.area-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 1.25rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.area-list li:last-child .area-item { border-bottom: 1px solid var(--rule); }
.area-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.area-no, .area-state {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ghost);
  font-variant-numeric: tabular-nums;
  line-height: 1.75;
  transition: color .18s ease;
}
.area-item:hover .area-no, .area-item:hover .area-state { color: var(--ink); }

.area-body { display: flex; flex-direction: column; gap: .3rem; }

.area-name {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-2);
  transition: text-decoration-color .18s ease, text-decoration-thickness .18s ease;
}
.area-item:hover .area-name {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.area-sub { color: var(--ink-2); font-size: .95rem; max-width: 34em; }
/* The lead sentence is the area said once, so it holds ink against the rest. */
.area-claim { color: var(--ink); }

@media (max-width: 34rem) {
  .area-item { grid-template-columns: 2rem 1fr; gap: 1rem; }
  .area-state { grid-column: 2; }
}

.areas-head {
  margin: 0;
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ghost);
}
.areas-lede { margin: 0 0 .75rem; color: var(--ink-2); }

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}
/* Three instruments into two columns leaves the third with a dead half-row
   beside it, so it takes the whole row instead. Consequence is the one with a
   chain to lay out, and it stops wrapping once it has the width. */
.area-grid > .area:last-child { grid-column: 1 / -1; }

/* Each area is an instrument, not a card — it reacts, so it looks operable. */
.area {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .9rem .95rem 1rem;
  border: 1px solid var(--rule);
  background:
    linear-gradient(to right, var(--rule) 1px, transparent 1px) center / 1.0625rem 1.0625rem,
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px) center / 1.0625rem 1.0625rem;
  transition: border-color .3s ease;
}
.area:hover, .area:focus-visible { border-color: var(--ink); }
.area:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.area[data-instrument="envelope"] { cursor: grab; user-select: none; touch-action: none; }
.area[data-instrument="envelope"].held { cursor: grabbing; border-color: var(--ink); }
.area[data-instrument="drift"] { cursor: ew-resize; }

.area-top { display: flex; align-items: center; gap: .55rem; }
.area-top h3 {
  margin: 0; flex: 1;
  font-size: .92rem; font-weight: 500; color: var(--ink); letter-spacing: -.005em;
}

.mark { width: 1.25rem; height: 1.25rem; display: block; color: var(--ink); flex: none; }

.scope { width: 100%; height: 150px; display: block; }

.out {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--rule);
  padding-top: .55rem;
  transition: color .25s ease;
}
.out[data-state="warn"] { color: var(--ink-2); }
.out[data-state="fail"] {
  color: var(--ink);
  font-weight: 500;
  border-top-color: var(--ink);
  border-top-width: 2px;
}

.ghost-btn {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  padding: .3rem .55rem;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.ghost-btn:hover { color: var(--ink); border-color: var(--ink); }
.ghost-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ghost-btn.wide { width: 100%; padding: .5rem; }

/* consequence chain */
.chain { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .9rem 0; }
.node {
  font-family: var(--mono);
  font-size: .66rem;
  padding: .3rem .5rem;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.node + .node { position: relative; margin-left: .55rem; }
.node + .node::before {
  content: "";
  position: absolute; left: -.62rem; top: 50%;
  width: .4rem; height: 1px; background: var(--rule);
}
/* A node the change reached inverts. Nothing else on the page is a solid
   black block, so it reads instantly without needing a colour. */
.node.hit {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ── who works on it ───────────────────────────────────── */
/* Same spec-sheet block as .areas: mono label, lede, then the thing itself. */
.seats { display: flex; flex-direction: column; gap: 1rem; }

/* ── rows ──────────────────────────────────────────────── */
.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.row:last-child { border-bottom: 1px solid var(--rule); }

.key {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ghost);
}

.val { color: var(--ink); max-width: 34em; }
.val .sub { display: block; color: var(--ink-2); font-size: .92rem; margin-top: .25rem; }

/* KYODAI half of the system — anything about who */
.row.who .key { color: var(--ink); }

/* ── member page ───────────────────────────────────────── */
/* Opens on the letter they authored, running, where a portrait would go. It is
   the one thing on the site that is theirs. */
.member-head { gap: 1rem; }

.seat {
  position: relative;
  height: 12rem;
  margin: .5rem 0 0;
  cursor: crosshair;
  touch-action: none;
}
.seat canvas { position: absolute; inset: 0; display: block; }
.seat:has(.seat-still) { cursor: auto; }
.seat-still {
  font-family: var(--display);
  font-size: 10rem;
  font-weight: 600;
  line-height: 12rem;
  color: var(--ink);
}

/* The seat itself, named under the member's name. Label register, because it
   is a reading off the roster rather than something the page asserts. */
.seat-holds {
  margin: -.35rem 0 0;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ghost);
}

.seat-read {
  margin: 0;
  display: flex;
  gap: .8rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.seat-hint { color: var(--ghost); }

/* ── colophon — the footer, on every page ──────────────────────────────── */
/* One block headed like every other block on the sheet. No rule above it:
   the plate already ends, and a full-width hairline here would read as a
   second horizon under whatever the page finished on.

   It is the same markup copied into each page rather than injected, because
   every page on this site already repeats its own head, and a footer that
   needs JavaScript to exist is a worse footer. */
.colophon {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ghost);
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.colophon-col { display: flex; flex-direction: column; gap: .85rem; }

/* Prose in the footer is prose, not a caption set in the footer's mono. */
.links {
  font-family: var(--prose);
  font-size: .92rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.links li { color: var(--ink-2); }

/* ── document pages ────────────────────────────────────── */
.doc-head { display: flex; flex-direction: column; gap: .75rem; }

.backlink {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  align-self: flex-start;
}
.backlink:hover { color: var(--ink); }
.backlink .kyo { color: var(--ink); }

.doc-title {
  margin: 0;
  font-size: clamp(1.9rem, 6vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--ink);
}
.doc-lede { margin: 0; max-width: 34em; color: var(--ink-2); }

/* ── an area page ──────────────────────────────────────── */
/* The worksheet reads as prose, the instruments sit in it as readings, and
   what came out of the work is last. An instrument carries a caption saying
   which separation it reads — the plot is the evidence, not the argument. */
.area-note {
  margin: 0;
  padding-top: .2rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Who is on the area. A member holds a letter and it is printed in the cell; a
   collaborator from outside holds none and the cell is simply empty — the same
   silence an open seat keeps on the front page. Nothing is labelled "external",
   because the letter is already the whole difference and saying it twice makes
   a guest into a category. */
.people { display: flex; flex-direction: column; gap: 1rem; }

.person-list { list-style: none; margin: 0; padding: 0; }

.person {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding: .85rem 0;
  border-top: 1px solid var(--rule);
}
.person:last-child { border-bottom: 1px solid var(--rule); }

/* The letter, at the weight it carries in the word. An empty cell holds its
   column so the names stay in one line down the page. */
.person-ch {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
}

.person-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.person-name { color: var(--ink); }
.person-role {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ghost);
}

.product { display: flex; flex-direction: column; gap: .75rem; }

.product-name {
  margin: .25rem 0 0;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
}

.product-lede { margin: 0; max-width: 34em; color: var(--ink-2); }
.product .rows { margin-top: .75rem; }

.prose { display: flex; flex-direction: column; gap: .9rem; max-width: 36em; }
.prose h2 {
  margin: 1.6rem 0 0;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0; color: var(--ink); }
.prose em { color: var(--ink); font-style: normal; text-decoration: underline;
            text-underline-offset: 3px; text-decoration-color: var(--rule); }
.prose code {
  font-family: var(--mono);
  font-size: .84em;
  color: var(--ink);
}

.code {
  margin: .3rem 0;
  padding: .85rem .95rem;
  border: 1px solid var(--rule);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.7;
  color: var(--ink);
}
.code .c { color: var(--ghost); }

/* ── roster ────────────────────────────────────────────── */
.slots { display: flex; flex-wrap: wrap; gap: .5rem; }

/* A slot holds a letter and whoever signed it. Nothing else goes in it — a
   discipline in here is what made every gap look reserved. */
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-width: 4.6rem;
  flex: 1 1 4.6rem;
  padding: .7rem .45rem .6rem;
  border: 1px solid var(--rule);
  text-align: center;
}
/* A seat holds a letter of the wordmark, so it is set in the wordmark's face —
   same family and same two weights as .wordmark, or the strip reads as a
   quotation of the mark rather than the mark itself. */
.slot .ch {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
}
.slot.psy .ch { color: var(--ink-2); }
.slot.kyo .ch { color: var(--ink); font-weight: 700; }
.slot .who {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* Who signed it. Prose face, because it is a person rather than a reading. */
.slot .holder {
  margin-top: auto;
  padding-top: .1rem;
  font-family: var(--prose);
  font-size: .78rem;
  line-height: 1;
  color: var(--ink);
}
/* a free letter is drawn as a free letter, not as a gap */
.slot.free { border-style: dashed; }
.slot.free .ch { color: var(--ghost); }
.slot.free .who { color: var(--ghost); }
.slot.free .holder { color: var(--ghost); font-style: italic; }

/* ── the collective ────────────────────────────────────────────────────── */
/* Six boxes, one per member the collective will have, and the only thing
   position says is which side of the break you are on: everything to the left
   is somebody, everything to the right is open. Equal widths, because no
   discipline outranks another and a box that grew to fit "cognitive scientist"
   would say one does. */
.slots.collective { flex-wrap: nowrap; }
.slots.collective .slot {
  flex: 1 1 0;
  min-width: 0;
  min-height: 6.4rem;
  justify-content: flex-start;
}

/* An open box carries no letter — that absence is the whole guarantee that it
   is not holding a particular gap for this discipline. Its letter line is kept
   empty rather than collapsed, or the six would step down in height and the
   strip would read as a chart of who matters. */
.slot.open { border-style: dashed; }
.slot.open::before { content: ""; display: block; height: 1.5rem; }

/* The discipline. Mono, because it is a reading off the sheet — the person is
   in the prose face above it. It wraps: "cognitive scientist" over two lines is
   still one practice, which a row of names side by side could not risk. */
.practice-tag {
  margin-top: .25rem;
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1.35;
  letter-spacing: .05em;
  color: var(--ink-2);
  overflow-wrap: break-word;
}
/* Nothing above it in an open box, so it falls to the foot and the six
   disciplines read along one line whatever is stacked over them. */
.slot.open .practice-tag { margin-top: auto; color: var(--ghost); }
a.slot:hover .practice-tag { color: var(--ink); }

/* A seat that is a link is the way in — to the member, or to the application.
   The box already carries the state, so the anchor drops its underline and
   answers with its rule instead, the way the instruments do. */
a.slot { text-decoration: none; transition: border-color .18s ease; }
a.slot:hover { border-color: var(--ink); }
a.slot:hover .ch,
a.slot:hover .who,
a.slot:hover .holder { color: var(--ink); }
a.slot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* PSY is not a seat and never will be — solid, so it does not read as free */
.slot.house .who { color: var(--ghost); }

/* ── /piece/ — the mark with a screen to itself ────────── */
.stage-body { overflow: hidden; }

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
  touch-action: none;
}
.stage canvas { position: absolute; inset: 0; display: block; }
.stage-mark {
  margin: 0;
  font-size: clamp(2rem, 9vw, 7rem);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--ink);
}
.stage-mark .kyo { font-weight: 700; }
.stage.live .stage-mark {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.stage-foot {
  position: fixed;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ghost);
}
.stage-foot a { color: var(--ink-2); text-decoration: none; }
.stage-foot a:hover { color: var(--ink); }

/* a draft letter being shown in the word it is for */
.draft-bar {
  position: fixed;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.draft-bar [data-draft-pen] { margin-left: auto; }
.draft-what { margin-right: .4rem; }

.draft-source {
  position: fixed;
  inset: 3rem 0 auto 0;
  max-height: 55vh;
  margin: 0;
  overflow: auto;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre;
}

/* ── /playground/ ──────────────────────────────────────── */
.plate.wide { max-width: 60rem; gap: 1.5rem; }

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

/* One letter, drawn on its own — the box is upright so the letter fills it
   rather than sitting in the middle of a strip cut for nine. */
.pg-stage {
  position: relative;
  width: 100%;
  max-width: 34rem;
  height: clamp(16rem, 42vh, 26rem);
  margin: 0 auto;
  border: 1px solid var(--rule-2);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}
.pg-stage canvas { position: absolute; inset: 0; display: block; }

.pg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.pg-bar > [data-share] { margin-left: auto; }

.pg-seats { display: flex; gap: .3rem; margin-right: .5rem; }
.seat-btn {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: .9rem;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.seat-btn:hover:not(:disabled) { color: var(--ink); }
.seat-btn.on { color: var(--ink); border-color: var(--ink); }
.seat-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* A letter somebody holds. It stays in the row — the word is six letters
   whoever sits in them — but it is not on offer, and form says so: ghosted,
   and ruled through the way a struck line on a sheet is. */
.seat-btn.taken {
  color: var(--ghost);
  border-style: dashed;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Why you landed on this letter, when you arrived from a practice. Sits under
   the lede as a second, quieter paragraph — it is a note about your route in,
   not part of what the page is. */
.pg-arrival { color: var(--ink-2); font-style: italic; }

.pg-editor { display: block; }
.pg-editor textarea {
  width: 100%;
  min-height: 20rem;
  resize: vertical;
  padding: .95rem 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.7;
  tab-size: 2;
}
.pg-editor textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (max-width: 34rem) {
  .plate { gap: 2.5rem; padding-top: 2.25rem; }
  .row { grid-template-columns: 1fr; gap: .25rem; }
  .slot { min-width: 3.4rem; flex-basis: 3.4rem; }
  .slot .ch { font-size: 1.25rem; }
  /* Six across is unreadable at this width — a discipline gets about four
     characters a line. Two rows of three, and the break between claimed and
     open still falls where it falls. */
  .slots.collective { flex-wrap: wrap; }
  .slots.collective .slot { flex: 1 1 28%; min-width: 5.5rem; }
}