/* ============================================================================
   SOMA · public surface
   Governed by docs/PUBLIC_SURFACE.md, which amends MANIFESTO.md §02 and §03 for
   this surface only: display type above 28px is permitted, and the ground is
   warm mineral white. One typeface. No bold above 500. No gradient chrome, no
   rounded cards, no shadows, no decoration.

   The public surface is the desirable exterior. The engine plate — and only the
   engine plate — is dark, because the instrument is what you enter through it.
   ========================================================================== */

:root {
  /* paper — the public ground */
  --paper:      #f2eee6;
  --paper-deep: #e9e4d9;
  --paper-edge: #ded8ca;

  /* ink */
  --ink:        #16151a;
  --ink-dim:    #55525c;
  --ink-soft:   #656069;

  /* rules: hairline for structure, ink for statement */
  --rule:       #cfc8ba;
  --rule-ink:   #16151a;

  /* pigments — matter, not chrome. See PUBLIC_SURFACE.md amendment 3. */
  --indigo:     #232c73;
  --blue:       #2f56b5;
  --cyan:       #3f93b8;
  --violet:     #4a2f78;
  --coral:      #d4553a;

  /* the engine plate — MANIFESTO §02, unchanged */
  --void:         #141218;
  --void-ink:     #e6e1d3;
  --void-ink-dim: #a39e91;
  --void-ash:     #6c675f;
  --void-rule:    #2b2733;

  /* one pigment dominates per surface */
  --accent:     var(--indigo);
  /* The warm region in the material. One accent per view, never two. */
  --field-heat: var(--coral);

  --mono: "IBM Plex Mono", ui-monospace, "Input Mono", "Berkeley Mono", monospace;

  /* public type scale — seven steps, no intermediates */
  --t-display:  clamp(72px, 11.5vw, 176px);
  --t-head:     clamp(28px, 4.6vw, 54px);
  --t-sub:      clamp(19px, 2.6vw, 29px);
  --t-lede:     clamp(17px, 2vw, 23px);
  --t-body:     14px;
  --t-control:  11px;
  --t-eyebrow:  10px;
  --t-note:     9px;

  --gutter:     clamp(22px, 7vw, 110px);
  --band:       clamp(76px, 10vw, 152px);
  --measure:    62ch;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.page-facilitators { --accent: var(--blue); --field-heat: var(--cyan); }
body.page-create       { --accent: var(--violet); --field-heat: var(--coral); }

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 12px 18px;
  background: var(--paper);
  border: 1px solid var(--rule-ink);
  font-size: var(--t-control);
  letter-spacing: .2em;
}
.skip:focus { left: 0; }

/* ---- type roles ---------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .26em;
  line-height: 1;
  text-transform: uppercase;
}
.eyebrow .mark { flex: 0 0 auto; }

/* The wordmark is the product's name, not an annotation of it: weight and
   contrast, not air. §03's 500 ceiling still binds. */
.display {
  color: var(--ink);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: .84;
  letter-spacing: .015em;
}

.head {
  color: var(--ink);
  font-size: var(--t-head);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .01em;
}

.sub {
  font-size: var(--t-sub);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: .01em;
}

.lede {
  max-width: 42ch;
  color: var(--ink);
  font-size: var(--t-lede);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .005em;
}

.body { max-width: var(--measure); color: var(--ink-dim); }
.body + .body { margin-top: 20px; }

.note {
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .06em;
  line-height: 1.8;
}

.annotation {
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.num { font-variant-numeric: tabular-nums; }

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

.mast {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 0 var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-ink);
}

.mast-mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  white-space: nowrap;
}
/* The mark is a logo, not a flex casualty: it never shrinks to a dot. */
.mast-mark > span, .mast-mark .mark { flex: 0 0 auto; }

/* The maker's signature, beside the product name. SOMA stays the wordmark;
   IFAH is the quiet house that signs it — a tier down, never competing, and
   the bare initials make no claim (docs/PUBLIC_SURFACE.md). */
.mast-by {
  padding-left: 13px;
  border-left: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .22em;
  text-indent: .22em;
  white-space: nowrap;
}

.mast-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  color: var(--ink-dim);
}
.mast-nav a:hover { color: var(--ink); }
.mast-nav a[aria-current="page"] { color: var(--accent); }

/* ---- audio state --------------------------------------------------------- */
/* One discreet global statement, in words. It does not exist when nothing is
   playing, and it never moves. PUBLIC_SURFACE.md, additional law 7. */

.mast-state {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: var(--t-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mast-state[data-playing="true"] { display: inline-flex; }
.mast-state .dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.mast-state .field { color: var(--ink); }

/* ---- bands --------------------------------------------------------------- */

.band {
  padding: var(--band) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.band--deep { background: var(--paper-deep); }
.band--tight { padding-block: clamp(54px, 6vw, 96px); }
.band-head { margin-bottom: clamp(38px, 5vw, 66px); }
.band-head .head { margin-top: 16px; }
.band-head .body { margin-top: 26px; }

/* The engine plate. The one dark ground on the public surface: every token is
   inverted here so the components inside need no dark-specific rules. */
.band--engine {
  --paper:      var(--void);
  --paper-deep: var(--void);
  --ink:        var(--void-ink);
  --ink-dim:    var(--void-ink-dim);
  --ink-soft:   var(--void-ash);
  --rule:       var(--void-rule);
  --rule-ink:   var(--void-rule);
  --accent:     var(--cyan);
  background: var(--void);
  color: var(--void-ink);
  border-bottom-color: var(--void);
}

/* ---- hero ---------------------------------------------------------------- */
/* An editorial spread. The field is material on the page, not a screen set
   into it: no frame, no plate, no corner ticks. */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  min-height: min(860px, calc(100vh - 64px));
  padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(44px, 5vw, 72px);
  border-bottom: 1px solid var(--rule-ink);
}

.hero-copy > * + * { margin-top: 28px; }
.hero-copy .display { margin-top: 22px; }
.hero-copy .lede { margin-top: 34px; }
.hero-support { max-width: 38ch; color: var(--ink-dim); }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 42px !important;
}

.hero-ledger {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: clamp(38px, 5vw, 66px);
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

/* The material runs off the right edge of the sheet. One crop, at the page
   boundary, where a crop reads as a bleed rather than as a box. */
.hero-field {
  position: relative;
  aspect-ratio: 5 / 6;
  width: auto;
  margin-right: calc(var(--gutter) * -1);
}
/* The hero artwork is a single static image — decorative, inert. It fills the
   right column, sits INTO the paper (multiply) rather than on it, and may bleed
   softly off the right edge with the container. No pointer events, no motion. */
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* the generated square carries wide white margins — scale it up so the burst
     fills the column and bleeds softly, the way the reference does. */
  transform: scale(1.28);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* let the enlarged artwork bleed past its frame instead of being clipped */
.hero-field { overflow: visible; }

.field-caption {
  margin-top: 14px;
  padding-top: 10px;
  margin-right: calc(var(--gutter) * -1);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- actions ------------------------------------------------------------- */
/* Ink on paper. No fill, no gradient, no shadow — the primary action is the
   one drawn in black. */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: var(--t-control);
  font-weight: 400;
  letter-spacing: .18em;
  white-space: nowrap;
  transition: color .16s linear, background-color .16s linear,
              border-color .16s linear;
}
.cta:hover, .cta:focus-visible {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.cta--own {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 500;
}
.cta--own:hover, .cta--own:focus-visible {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

.cta[aria-disabled="true"] {
  color: var(--ink-soft);
  background: none;
  border-color: var(--rule);
  cursor: default;
}
.cta[aria-disabled="true"]:hover {
  color: var(--ink-soft);
  background: none;
  border-color: var(--rule);
}

.cta-status {
  flex-basis: 100%;
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .1em;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: var(--t-control);
  letter-spacing: .16em;
}
.textlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- figures ------------------------------------------------------------- */

figure.figure { margin: 0; }
figure.figure .frame {
  overflow-x: auto;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
}
figure.figure img { width: 100%; min-width: 640px; }
figure.figure figcaption {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.figure--bleed { margin-inline: calc(var(--gutter) * -1); }
.figure--bleed .frame { border-inline: 0; }
.figure--bleed figcaption { padding-inline: var(--gutter); }

/* A real capture of the instrument, on the instrument's own ground. */
.band--engine figure.figure .frame {
  border-color: var(--void-rule);
  background: var(--void);
}

/* ---- ledger -------------------------------------------------------------- */
/* The instrument's own information device, editorially enlarged. */

.ledger { border-top: 1px solid var(--rule-ink); }

.ledger-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: 8px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.ledger-row dt {
  color: var(--ink);
  font-size: var(--t-control);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.6;
}
.ledger-row dd { color: var(--ink-dim); }

.ledger-row .status {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 9px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: var(--t-note);
  letter-spacing: .18em;
  vertical-align: 2px;
}
.ledger-row .status[data-status="Preview"] {
  border-color: var(--rule);
  color: var(--ink-soft);
}

.ledger--compact .ledger-row { padding: 16px 0; }
.ledger--compact .ledger-row dt { color: var(--accent); }

/* ---- three entrances ----------------------------------------------------- */
/* Rules, not cards. Nothing is boxed, nothing floats. */

.pathways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule-ink);
}

.pathway {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: clamp(26px, 3vw, 44px) clamp(22px, 2.6vw, 40px);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  transition: background-color .18s linear;
}
.pathway:first-child { border-left: 0; padding-left: 0; }
.pathway:hover { background: var(--paper-deep); }
.pathway-number {
  color: var(--accent);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: .22em;
}
.pathway h3 {
  margin-top: clamp(40px, 6vw, 64px);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1em;
}
.pathway p { margin-top: 16px; color: var(--ink-dim); }
.pathway .textlink { margin-top: auto; padding-top: 30px; border-bottom: 0; }
.pathway:hover .textlink { color: var(--accent); }

.one-instrument {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 40px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.one-instrument p { font-size: var(--t-sub); font-weight: 400; }

/* ---- listening room ------------------------------------------------------ */
/* A ledger of fields. Black rules, strong names, sparse metadata. The material
   field of the sounding excerpt is drawn beside it, never under it. */

.listening-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 34px;
}
.listening-head .sub { margin-top: 12px; color: var(--ink-dim); }

/* The one honest statement about the un-produced set. Stated at the section,
   once, on its own rule — never a status word repeated beside every field. */
.listening-opening {
  margin-bottom: 30px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-ink);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  letter-spacing: .24em;
}

.room { border-top: 1px solid var(--rule-ink); }

.room-row {
  display: block;
  width: 100%;
  padding: 22px 4px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
  transition: background-color .16s linear;
}
.room-row {
  position: relative;
}
.room-row:hover { background: var(--paper-deep); }
.room-row[disabled] { cursor: default; }
.room-row[disabled]:hover { background: none; }
/* The sounding field leaves a trace: a pigment mark down its leading edge, in
   the surface's own accent. A mark, not a filled card. */
.room-row[aria-pressed="true"] { border-bottom-color: var(--accent); }
.room-row[aria-pressed="true"]::before {
  content: '';
  position: absolute;
  top: 0; bottom: -1px;
  left: -18px;
  width: 2px;
  background: var(--accent);
}

.room-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 62px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

/* The field's own figure — an orbit and its nodes — and the play affordance.
   A field is selected by its glyph, the way a lens is chosen on the instrument,
   not by a media button. */
.room-glyph {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--ink-dim);
  transition: color .18s linear;
}
.room-glyph .glyph { width: 26px; height: 26px; }
.room-glyph .orbit { stroke-width: 1; opacity: .55; }
.room-glyph .carrier { }
.room-row:hover .room-glyph { color: var(--ink); }
.room-row[aria-pressed="true"] .room-glyph { color: var(--accent); }
.room-row[aria-pressed="true"] .room-glyph .orbit { opacity: 1; }
/* A field that has not been produced rests as a symbol: its figure is present
   but quiet, and it makes no claim of a control it does not have. */
.room-row[disabled] .room-glyph { color: var(--ink-soft); }
.room-row[disabled] .room-glyph .orbit { opacity: .32; }
.room-row[data-state="loading"] .room-glyph .carrier {
  animation: room-load 1.4s linear infinite;
}
@keyframes room-load {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

.room-code {
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .18em;
}
.room-name {
  color: var(--ink);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .12em;
}
.room-row[disabled] .room-name { color: var(--ink); }
.room-row[aria-pressed="true"] .room-name { color: var(--accent); }
.room-duration {
  color: var(--ink-dim);
  font-size: var(--t-control);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.room-row[disabled] .room-duration { color: var(--ink-soft); }

.room-character {
  margin-top: 6px;
  padding-left: 42px;
  color: var(--ink-dim);
  font-size: var(--t-body);
}
.room-row[disabled] .room-character { color: var(--ink-soft); }

.room-progress {
  display: none;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-left: 42px;
}
.room-row[aria-pressed="true"] .room-progress { display: flex; }
.room-track { flex: 1; height: 1px; background: var(--rule); }
.room-fill { display: block; width: 0; height: 1px; background: var(--accent); }
.room-elapsed {
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}

.listening-foot { margin-top: 32px; }
.listening-foot .note { max-width: var(--measure); }
.listening-foot .cta { margin-top: 28px; }

/* ---- session flow -------------------------------------------------------- */

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule-ink);
}
.flow-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 226px;
  padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 30px);
  border-bottom: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.flow-step:first-child { border-left: 0; padding-left: 0; }
.flow-step .n {
  color: var(--accent);
  font-size: var(--t-note);
  font-weight: 500;
  letter-spacing: .24em;
}
.flow-step h3 {
  font-size: var(--t-control);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink);
}
.flow-step p { color: var(--ink-dim); margin-top: -4px; }

/* ---- method -------------------------------------------------------------- */

.method-motto {
  max-width: 28ch;
  font-size: var(--t-sub);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.method-closing {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-ink);
  max-width: 52ch;
  color: var(--ink);
  font-size: var(--t-lede);
  line-height: 1.5;
}
.method-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}

/* ---- own ----------------------------------------------------------------- */

.own {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding-block: clamp(88px, 11vw, 160px);
}
.own .price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: var(--t-head);
  font-weight: 500;
  letter-spacing: .01em;
}
.own .price span {
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: .24em;
  color: var(--ink-soft);
}
.own .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- collaborations ------------------------------------------------------ */
/* One discreet door for commissioned work. A line and an enquiry, never a tier
   grid or a service menu. */

.collab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.collab-line {
  max-width: 46ch;
  color: var(--ink);
  font-size: var(--t-sub);
  font-weight: 400;
  line-height: 1.35;
}
.collab .textlink[aria-disabled="true"] {
  color: var(--ink-soft);
  border-bottom-color: var(--rule);
  cursor: default;
}
.collab [data-enquiry-status] { margin-top: -8px; }

/* ---- footer -------------------------------------------------------------- */

.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px 40px;
  padding: 40px var(--gutter);
  border-top: 1px solid var(--rule-ink);
}
.foot-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-dim);
  font-size: var(--t-control);
  letter-spacing: .14em;
}
.foot-line { margin-top: 10px; }
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--ink-soft);
  font-size: var(--t-note);
  letter-spacing: .2em;
}
.foot-nav a:hover { color: var(--ink); }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.76fr); }
  .ledger-row { grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-step:nth-child(3) { border-left: 0; padding-left: 0; }
  .method-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 40px;
  }
  /* The material arrives before the ask. */
  .hero-field-wrap { order: 0; }   /* text first, artwork beneath, on mobile */
  .hero-copy .hero-actions { margin-top: 34px !important; }
  .hero-field { aspect-ratio: 5 / 4; }
  .pathways { grid-template-columns: minmax(0, 1fr); }
  .pathway { min-height: 0; border-left: 0; padding-left: 0; }
  .pathway h3 { margin-top: 26px; }
  .one-instrument { flex-direction: column; align-items: flex-start; }
  .mast-nav { gap: 14px; }
  .foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 620px) {
  .mast { min-height: 58px; }
  .mast-mark { font-size: 14px; letter-spacing: .18em; text-indent: .18em; }
  /* The signature yields first when the masthead gets tight. */
  .mast-by { display: none; }
  .mast-state { margin-left: 12px; padding-left: 12px; }
  .mast-state .field { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .cta { width: 100%; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-step { min-height: 0; border-left: 0; padding-left: 0; }
  .ledger-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }
  .room-line { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; }
  .room-code { display: none; }
  .room-name { font-size: 16px; }
  .room-character, .room-progress { padding-left: 34px; }
  .own .actions { width: 100%; flex-direction: column; }
  .own .actions .cta { width: 100%; }
  figure.figure img { min-width: 520px; }
}

/* Motion exists because a force acts. When motion is refused, the field is
   still drawn — once, correctly — never replaced by an empty rectangle. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .room-row[data-state="loading"] .room-glyph::before { animation: none; }
  * { transition-duration: .001ms !important; }
}