/* Monopoly Arena — content.css. Everything inside <main>: the four sections and their pages, the parts of a
   page (the verdict line, rent rows, Suerte and Caja cards, tables, the dot plot, pictures, the round controls,
   the rows of the ten games), the buttons, and the document without JavaScript (html:not(.js)): the first
   screen's headline on the felt and each section as a printed title deed. The deed shell (#card.deed, its band,
   deck and foot), the board, the figure plate and the dice belong to stage.css and board.css; nothing here
   hides content. Colours, faces, radii and timings come from theme.css.
   A page is a title deed: one heading (h3), its verdict in one line (p.verdict: the phone's copy of the board's
   plate; stage.css hides it in split), the evidence anchored right under it (rent rows, a table or a picture),
   and the card pinned to the bottom (margin-top: auto; stage.js sizes the deed to the page and adds the gap).
   Type: five sizes in a deed: the plate and the band (stage.css; the band's second line, --step-lead, also sets
   the one large quote and the recipe), --head (h3 and rent values), --body, --step-small (notes). Each shrinks
   on a short screen through its vh term, so a page fits a 1440×900 deck (≈ 520×576).
   One colour code on every rent row and table: .is-do = what to do (the section colour), .is-ref = the
   reference (ink), no class = what not to do (plain grey).
   Breakpoints are container queries on the section (section.stop), so a page lays out the same in the document
   (a 44rem deed) and in stage.js's deck (34rem and up), whatever the viewport. */

/* ── page ──────────────────────────────────────────────────────────────────── */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; background: var(--table); }
*, *::before, *::after { box-sizing: inherit; }
@media (prefers-reduced-motion: no-preference) { html:not(.js) { scroll-behavior: smooth; } }
body { margin: 0; color: var(--ink); font-family: var(--text); font-size: var(--step-body); line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nw { white-space: nowrap; }                                   /* a phrase that never breaks (GPT-6, «gana el 6,4 %.») */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html:not(.js) .js-only { display: none; }                      /* a hint that only the live board can keep */

/* ── the first screen's quiet second way in: the page as an article (stage.css places it with JS) ── */
.portada__alt { margin: 0; font-size: var(--step-body); font-weight: 600; line-height: 1.3; }
.portada__alt a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.portada__alt a + a { margin-left: 1.25em; }
.portada__alt a:focus-visible { outline: 2px solid var(--focus-ring, var(--paper)); outline-offset: 3px; }

/* ── the sections: each takes its square's group colour ───────────────────── */
/* --c fills the recommended rows and the verdict; --c-ink is the ink on it; --c-text is the same colour where it
   is legible as text on white (rosa, azul) and ink where it is not (naranja, amarillo); --bar-no is the plain
   grey of the rows not to follow. Set on the section: the deck carries the whole section, pages inherit. */
section.stop { --c: var(--ink); --c-ink: var(--paper); --c-text: var(--ink); --bar-no: #c4c6c0; container: stop / inline-size; }
#estrategia { --c: var(--c-estrategia); --c-ink: var(--ink); --c-text: var(--c-estrategia); }
#metodo { --c: var(--c-metodo); --c-ink: var(--ink); --c-text: var(--ink); }
#partida { --c: var(--c-partida); --c-ink: var(--ink); --c-text: var(--ink); }
#partidas { --c: var(--c-partidas); --c-ink: var(--white); --c-text: var(--c-partidas); }

/* the deed's band, in the flow: the street in the deed's printed caps, the section under it, set like the shell's
   band (stage.css #card .deed__band). Inside the shell the section rides in the deck and stage.css hides this one */
section.stop > .deed__band { padding: clamp(1rem, 3.5cqi, 1.75rem) clamp(1rem, 4cqi, 2rem) clamp(1.1rem, 3.5cqi, 1.6rem); border-bottom: var(--frame-w) solid var(--board-edge); background: var(--c); color: var(--c-ink); text-align: center; }
section.stop > .deed__band .deed__title { margin: 0; display: grid; gap: 0.35rem; justify-items: center; }
section.stop > .deed__band .deed__street { font-family: var(--display); font-weight: 700; font-size: min(var(--step-head), 10cqi); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
section.stop > .deed__band .deed__name { font-family: var(--text); font-weight: 600; font-size: var(--step-lead); line-height: 1.15; }

/* ── a page: heading, verdict, evidence, card ─────────────────────────────── */
/* --ch is the height a page may take: the deck's largest page height inside the deed (stage.js sets --card-h),
   else the screen. */
.card-page {
  --ch: var(--card-h, 100svh);
  --head: var(--step-head); --body: var(--step-body);
  --pad: clamp(1rem, 4.5cqi, 2rem);
  --gap: clamp(0.625rem, 1.85vh, 1.125rem);
  position: relative; display: flex; flex-direction: column;
  padding: var(--pad); background: var(--paper); color: var(--ink);
}
/* the rhythm between a page's parts is a margin, not the flex gap, so the card can take the free space above it */
.card-page > :nth-child(n + 2) { margin-top: var(--gap); }        /* (0,2,0): above the parts' own margin: 0 */
@supports (font-size: 1cqi) {
  .card-page {
    --head: clamp(1.75rem, min(1rem + 4.6cqi, 4.4vh), 3.5rem);
    --body: clamp(0.9375rem, 2.35vh, var(--step-body));
    --pad: clamp(1rem, min(4.5cqi, 2.4vh), 2rem);
  }
}

.card-page h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--head); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.proof { margin: 0; max-width: 62ch; font-size: var(--body); line-height: 1.45; text-wrap: pretty; }
.lead { margin: 0; max-width: 46ch; font-size: var(--body); line-height: 1.45; text-wrap: pretty; }
.caption, figcaption, .note { margin: 0; font-size: var(--step-small); line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.note { max-width: 62ch; }
.note a { color: inherit; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.note a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.next { align-self: flex-start; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* the verdict: the board's plate in one line, for the sheet and the plain document (stage.css hides it in split,
   where the plate shows it); the figure on the section colour, then what it measures */
.card-page > .verdict { margin-top: calc(var(--gap) * 0.55); }
.verdict { margin: 0; font-size: var(--body); font-weight: 500; line-height: 1.35; text-wrap: pretty; }
.verdict__fig {
  display: inline-block; margin-right: 0.45em; padding: 0.16em 0.4em 0.06em;
  background: var(--c); color: var(--c-ink);
  font-family: var(--display); font-weight: 700; font-size: var(--body); line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
html.is-split .card-page .verdict { display: none; }

/* the recipe, in the order it is played: a real list at the band's second size */
.receta { margin: 0; padding: 0 0 0 1.35em; display: grid; row-gap: calc(var(--gap) * 0.8); font-size: min(var(--step-lead), 2.9vh); font-weight: 500; line-height: 1.28; text-wrap: pretty; }
.receta li { padding-left: 0.15em; }
.receta li::marker { font-family: var(--display); font-weight: 700; color: var(--c-text); }
.receta strong { font-weight: 700; }

/* ── proofs are game cards: Suerte (the bot games) and Caja de Comunidad (the frontier games) ── */
/* one size inside a card (the page's --body); pinned to the bottom of the page; never tilted */
.carta { position: relative; padding: clamp(0.875rem, min(4cqi, 2.4vh), 1.5rem); border-radius: var(--radius-card); background: var(--suerte); color: var(--ink); }
.carta--caja { background: var(--caja); }
.carta::after { content: ""; display: table; clear: both; }
.carta__glyph { float: right; width: 2.2rem; height: 2.2rem; margin: -0.3rem -0.3rem 0.4rem 0.9rem; color: var(--ink); }
.carta .proof { max-width: none; }
.card-page > .carta { margin-top: auto; }
/* where the deck does not size the page to its content (the sheet, the plain document) the part above keeps the gap */
html:not(.is-split) .card-page > :has(+ .carta) { margin-bottom: var(--gap); }

/* ── buttons: flat, square, red for the one action ────────────────────────── */
.button, .next {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0.625rem 1.25rem;
  border: 0; border-radius: var(--radius-btn); background: var(--accent); color: var(--accent-ink);
  font-family: var(--text); font-size: var(--step-body); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
@media (hover: hover) { .button:hover, .next:hover { background: var(--accent-2); } }
.button:active, .next:active { transform: scale(0.97); }
.button--ink { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .button--ink:hover { background: var(--ink-2); } }
.button.is-playing { background: var(--ink); color: var(--paper); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.button:focus-visible, .next:focus-visible, .step:focus-visible, .rondas button:focus-visible, .fila:focus-visible, .rent--links a:focus-visible, #ronda:focus-visible {
  outline: 2px solid var(--focus-ring, var(--ink)); outline-offset: 2px;
}
.count { font-variant-numeric: tabular-nums; }

/* ── a comparison reads like the deed's rent table: label left, value right, a filled strip in the row ── */
/* the strip's length is --v of --max (30 % by default: every win rate sits under it) */
.rent { --max: 30; list-style: none; margin: 0; padding: 0; display: grid; row-gap: calc(var(--gap) * 0.8); }
.rent__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "bar bar"; align-items: baseline; column-gap: 1rem; row-gap: clamp(0.2rem, 0.6vh, 0.35rem); }
.rent__label { grid-area: label; font-size: var(--body); font-weight: 500; line-height: 1.25; text-wrap: pretty; }
.rent__val { grid-area: val; text-align: right; font-family: var(--display); font-weight: 700; font-size: var(--head); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rent__bar { grid-area: bar; display: block; height: clamp(0.4rem, 1.15vh, 0.625rem); width: calc(min(var(--v), var(--max)) / var(--max) * 100%); background: var(--bar-no); transform-origin: 0 50%; }
.rent__row.is-do .rent__label { font-weight: 700; }
.rent__row.is-do .rent__bar { background: var(--c); }
.rent__row.is-do .rent__val { color: var(--c-text); }
.rent__row.is-ref .rent__label { font-weight: 600; }
.rent__row.is-ref .rent__bar { background: var(--ink); }
/* a time line (rounds of the game) and any ladder of five rows: the value at the text size, a thinner strip */
.rent--tl { row-gap: calc(var(--gap) * 0.55); }
.rent--tl .rent__val { font-family: var(--text); font-size: var(--body); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.rent--tl .rent__bar { height: clamp(0.35rem, 0.9vh, 0.5rem); }
/* rows without a strip: label left, value right, at the text size (the files, the links, the trades) */
.rent--list { row-gap: 0; }
.rent--list .rent__row { grid-template-areas: "label val"; align-items: baseline; padding: clamp(0.25rem, 0.8vh, 0.5rem) 0; }
.rent--list .rent__label { font-size: var(--body); font-weight: 600; line-height: 1.3; }
.rent--list .rent__val { font-family: var(--text); font-size: var(--body); font-weight: 500; line-height: 1.3; letter-spacing: 0; white-space: normal; }
.rent__file { font-size: var(--step-small); font-weight: 400; white-space: nowrap; }
/* a trade: who gives what, the long side wrapping under its own start */
.rent--deal { row-gap: calc(var(--gap) * 0.4); }
.rent--deal .rent__row { grid-template-columns: minmax(6.5rem, 2fr) minmax(0, 3fr); padding: 0; }
.rent--deal .rent__val { text-align: left; text-wrap: pretty; }
.rent--links .rent__row { padding: 0; }
.rent--links a {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val"; align-items: center; column-gap: 1rem;
  min-height: 2.75rem; padding: 0.3rem 0.5rem; margin-inline: -0.5rem; color: var(--ink); text-decoration: none;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.rent--links .rent__val { text-align: right; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (hover: hover) { .rent--links a:hover { background: var(--ink); color: var(--paper); } }

/* ── tables: on the phone each model is a small card of four figures, a real table from 27rem of section ── */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table, thead, tbody, tr, th, td { display: block; }
thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: visible; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }   /* clip-path alone hides it: no clipped box for overflow checks */
tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; padding: 0.55rem 0.75rem 0.6rem; border-radius: var(--radius-card); background: var(--paper-2); }
tbody tr.is-do { background: var(--c); color: var(--c-ink); }
tbody tr + tr { margin-top: 0.375rem; }
th[scope="row"] { grid-column: 1 / -1; font-family: var(--display); font-weight: 700; font-size: var(--body); line-height: 1.1; text-align: left; }
td { display: grid; align-content: start; padding: 0; font-size: var(--body); font-weight: 600; line-height: 1.2; text-align: left; }
td::before { content: attr(data-h); font-size: var(--step-small); font-weight: 500; line-height: 1.25; }
td strong { font-weight: 700; }

/* ── the dot plot: nine strategies, labels above their rows, the axis 5–30 across the column ── */
.dots { margin: 0; min-width: 0; --x0: 5; --span: 25; }
.dots__key { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; margin: 0 0 calc(var(--gap) * 0.5); }
.dots__k { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.dots__k::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.dots__k--b::before { background: var(--paper); border: 2px solid var(--ink); }
.dots__k--ic::before { width: 1.5rem; height: 6px; border-radius: 0; background: var(--ink-2); opacity: 0.5; }
.dots__rows { list-style: none; margin: 0; padding: 0; display: grid; row-gap: clamp(0px, 0.3vh, 0.35rem); }
.dots__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label val" "track track"; column-gap: 0.75rem; align-items: baseline; }
.dots__label { grid-area: label; font-size: var(--step-small); font-weight: 500; line-height: 1.15; }
.dots__val { grid-area: val; font-size: var(--step-small); font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dots__row.is-ref .dots__label, .dots__row.is-ref .dots__val { font-weight: 700; }
.dots__track { grid-area: track; position: relative; display: block; height: 10px; margin-top: 2px; }
/* the fair share, 25 %: a short tick behind every row, so the eye finds the line */
.dots__track::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: calc((25 - var(--x0)) / var(--span) * 100%); width: 2px; margin-left: -1px; background: var(--ink-2); opacity: 0.35; }
.dots__ic { position: absolute; top: 2px; height: 6px; left: calc((var(--lo) - var(--x0)) / var(--span) * 100%); width: calc((var(--hi) - var(--lo)) / var(--span) * 100%); background: var(--ink-2); opacity: 0.5; }
.dots__dot { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.dots__dot--a { left: calc((var(--a) - var(--x0)) / var(--span) * 100%); background: var(--ink); }
.dots__dot--b { left: calc((var(--b) - var(--x0)) / var(--span) * 100%); background: var(--paper); border: 2px solid var(--ink); }
.dots__axis { position: relative; height: 1.3rem; margin: 0.2rem 0 0; line-height: 1.3rem; font-variant-numeric: tabular-nums; }
.dots__axis span { position: absolute; top: 0; left: calc((var(--x) - var(--x0)) / var(--span) * 100%); transform: translateX(-50%); white-space: nowrap; }
.dots__axis span:first-child { transform: none; }
.dots__axis span:last-child { transform: translateX(-100%); }
.dots__key, .dots__axis { font-size: var(--step-small); color: var(--ink); }

/* ── pictures: the viewer's captures at the column's full width, at their own proportion ── */
/* never scaled down to fit: a page that runs past the deed scrolls, and the foot reads «Seguir leyendo» */
.shot { margin: 0; display: grid; gap: 0.5rem; min-width: 0; }
.shot img { width: 100%; height: auto; }
/* a picture page without a card: the caption is the page's text (the card's size and ink) */
.shot--lead figcaption { font-size: var(--body); line-height: 1.45; }

/* ── the quote: the Spanish at the band's second size, the English original small under it, as the source ── */
.quote { margin: 0; padding: 0; border: 0; display: grid; gap: calc(var(--gap) * 0.55); }
.quote p { margin: 0; text-wrap: pretty; }
.quote__es { font-family: var(--display); font-weight: 700; font-size: min(var(--step-lead), 2.9vh); line-height: 1.12; letter-spacing: -0.005em; }
.quote__en, .quote footer { font-size: var(--step-small); line-height: 1.4; }

/* ── the four seats of the replayed game: a 2 × 2 legend ──────────────────── */
.seats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; font-size: var(--step-small); line-height: 1.25; }
.seats li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.55rem; align-items: center; }
.seats li::before { content: ""; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--seat); }
.seats strong { display: block; font-family: var(--display); font-weight: 700; font-size: var(--body); line-height: 1.1; }

/* ── ronda a ronda: the scrub, the round tiles and the four seats as mini deeds ── */
.scrub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "out out out" "prev range next"; gap: 0.5rem 0.75rem; align-items: center; }
#ronda-out { grid-area: out; font-family: var(--display); font-weight: 700; font-size: var(--head); line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#ronda-prev { grid-area: prev; }
#ronda-next { grid-area: next; }
#ronda { grid-area: range; width: 100%; min-height: 2.75rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.step {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 0; border-radius: var(--radius-btn); background: var(--ink); color: var(--paper); cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
.step svg { display: block; width: 1rem; height: 1rem; fill: currentColor; }
@media (hover: hover) { .step:hover { background: var(--ink-2); } }
.step:active { transform: scale(0.97); }
.step:disabled { background: var(--paper-2); color: var(--ink-2); cursor: not-allowed; transform: none; }
.rondas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.rondas > span { flex: 0 0 100%; font-size: var(--step-small); font-weight: 500; }
.rondas button {
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.6rem;
  border: 0; border-radius: var(--radius-btn); background: var(--paper-2); color: var(--ink);
  font-family: var(--text); font-size: var(--body); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), transform var(--t-press) var(--ease-out);
}
@media (hover: hover) { .rondas button:hover { background: var(--ink); color: var(--paper); } }
.rondas button:active { transform: scale(0.97); }
.rondas button.is-active { background: var(--accent); color: var(--accent-ink); }
.asientos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.asientos li { display: grid; align-content: start; gap: 0.2rem; padding: 0 0.875rem 0.7rem; overflow: hidden; border-radius: var(--radius-card); background: var(--paper-2); }
.asientos li::before { content: ""; display: block; height: 0.5rem; margin: 0 -0.875rem 0.4rem; background: var(--seat); transition: opacity var(--t-ui) var(--ease-out); }
.asientos .model { font-family: var(--display); font-weight: 700; font-size: var(--body); line-height: 1.1; }
.asientos .figs, .asientos .state { font-size: var(--step-small); line-height: 1.35; font-variant-numeric: tabular-nums; }
.asientos .state { font-weight: 600; }
.asientos li.is-out::before { opacity: 0.3; }
.asientos li.is-out .model { color: var(--ink-2); }

/* ── the ten games: one deed row per game, a link to its viewer; the row the board shows is filled ── */
/* replay.js paints the row's final board on the big board on hover, focus or tap and marks that row
   .is-on-board; the dot is the winner's colour in that game, so the board's owners can be read */
.filas { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 0.375rem; }
.fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k go" "v go"; align-items: center; column-gap: 1rem; row-gap: 0.1rem;
  min-height: 2.75rem; padding: 0.55rem 0.75rem 0.6rem; border-radius: var(--radius-card);
  background: var(--paper-2); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.fila__k { grid-area: k; display: flex; align-items: center; gap: 0.55em; font-family: var(--display); font-weight: 700; font-size: var(--body); line-height: 1.15; }
.fila__dot { flex: none; width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--seat); }
.fila__v { grid-area: v; padding-left: 1.35em; font-size: var(--step-small); line-height: 1.3; font-variant-numeric: tabular-nums; text-wrap: pretty; }
.fila__go { grid-area: go; font-size: var(--step-small); font-weight: 600; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.fila.is-on-board { background: var(--c); color: var(--c-ink); }
.fila.is-on-board .fila__dot { outline: 2px solid var(--paper); }
@media (hover: hover) { .fila:hover { background: var(--c); color: var(--c-ink); } .fila:hover .fila__dot { outline: 2px solid var(--paper); } }

/* ── wider sections: the deck from 27rem, the 44rem deed of the plain document ─ */
@container stop (min-width: 27rem) {
  table { display: table; }
  thead { display: table-header-group; position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  tbody { display: table-row-group; }
  tr, tbody tr, tbody tr + tr { display: table-row; margin: 0; padding: 0; border-radius: 0; }
  tbody tr { background: none; }
  td { font-weight: 400; line-height: 1.3; }
  tbody tr.is-do { background: var(--c); }
  th, td { display: table-cell; padding: clamp(0.25rem, 0.75vh, 0.5rem) 0.4rem; vertical-align: baseline; border-bottom: 2px solid var(--paper-2); }
  th:first-child { padding-left: 0.6rem; }
  th:last-child, td:last-child { padding-right: 0.6rem; }
  thead th { vertical-align: bottom; font-size: var(--step-small); font-weight: 600; line-height: 1.2; text-align: left; border-bottom-color: var(--ink); }
  thead th.num { text-align: right; }
  th[scope="row"] { margin: 0; font-family: var(--text); font-size: var(--body); font-weight: 500; line-height: 1.3; white-space: nowrap; }
  tr.is-do th[scope="row"] { font-weight: 700; }
  tbody tr.is-do th, tbody tr.is-do td { border-bottom-color: var(--paper); }
  td::before { content: none; }
  .num { text-align: right; }
  td.num { white-space: nowrap; }
  td.num--wrap { white-space: normal; }
  tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
}
/* the trades table in a narrow deck: the note size, so its five columns stay inside the column */
@container stop (max-width: 40rem) {
  #tabla-tratos th[scope="row"], #tabla-tratos td { font-size: var(--step-small); }
  #tabla-tratos th, #tabla-tratos td { padding-inline: 0.3rem; }
  #tabla-tratos th:first-child { padding-left: 0.5rem; }
  #tabla-tratos th:last-child, #tabla-tratos td:last-child { padding-right: 0.5rem; }
}

/* ── entrances inside the deed: the rent strips grow when their page comes up ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .card-page.is-up .rent__bar { animation: ma-rent var(--t-count) var(--ease-expo) both; }
  html.js .card-page.is-up .rent__row:nth-child(2) .rent__bar { animation-delay: var(--stagger-item); }
  html.js .card-page.is-up .rent__row:nth-child(3) .rent__bar { animation-delay: calc(var(--stagger-item) * 2); }
  html.js .card-page.is-up .rent__row:nth-child(4) .rent__bar { animation-delay: calc(var(--stagger-item) * 3); }
  html.js .card-page.is-up .rent__row:nth-child(n + 5) .rent__bar { animation-delay: calc(var(--stagger-item) * 4); }
  html.js .card-page.is-up .dots__dot { animation: ma-dot var(--t-count) var(--ease-expo) both; }
}
@keyframes ma-rent { from { transform: scaleX(0.04); } to { transform: none; } }
@keyframes ma-dot { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── without JavaScript: the first screen on the felt, then each section a printed deed ── */
html:not(.js) .top { flex-wrap: wrap; row-gap: 0.25rem; width: min(100% - 2 * var(--margin), 44rem); margin-inline: auto; padding: 0.75rem 0; }
html:not(.js) #progress { flex-wrap: wrap; gap: 0.25rem 1rem; }
html:not(.js) #progress a { white-space: nowrap; }
html:not(.js) .portada { --focus-ring: var(--paper); width: min(100% - 2 * var(--margin), 44rem); margin: 0 auto; padding: clamp(2.5rem, 9vh, 6rem) 0 clamp(3.5rem, 11vh, 7.5rem); color: var(--paper); }
html:not(.js) .portada__title { display: inline-block; margin: 0 0 1.5rem; padding: 0.14em 0.3em 0.08em; background: var(--accent); color: var(--accent-ink); font-family: var(--display); font-weight: 700; font-size: min(var(--step-display), 6.25rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
html:not(.js) .portada__sub { margin: 0; max-width: 34ch; font-size: var(--step-lead); font-weight: 500; line-height: 1.3; text-wrap: balance; }
html:not(.js) .portada__act { margin: 2rem 0 0; }
html:not(.js) .portada__alt { margin: 1.25rem 0 0; }
html:not(.js) main { display: grid; gap: clamp(4.5rem, 14vh, 9rem); padding: 0 var(--margin) clamp(4.5rem, 14vh, 9rem); }
html:not(.js) section.stop {
  --deed-inset: 0.5rem;
  width: min(100%, 44rem); margin-inline: auto; scroll-margin-top: var(--margin);
  padding: calc(var(--deed-inset) + var(--frame-w)); border-radius: var(--radius-card); background: var(--paper);
  outline: var(--frame-w) solid var(--board-edge); outline-offset: calc(-1 * (var(--deed-inset) + var(--frame-w)));   /* the deed's printed frame, inset */
}
html:not(.js) section.stop > .card-page { padding-block: clamp(2.25rem, 7cqi, 3.5rem); scroll-margin-top: var(--margin); }
html:not(.js) section.stop > .card-page + .card-page { padding-top: clamp(1.5rem, 5cqi, 2.5rem); }

@media (prefers-reduced-motion: reduce) {
  .button, .next, .step, .fila, .rent--links a, .rondas button, .asientos li::before { transition: none; }
  .button:active, .next:active, .step:active, .rondas button:active { transform: none; }
}