/* Monopoly Arena, articulo.css: the article (articulo.html). The same conclusions as the board, read as a paper:
   one white sheet on the felt, one reading column, a deed band in the section's colour over each section, and
   the figures as real HTML (rent-table bar rows, a dot plot, tables, the viewer's own captures and final boards).
   Variables, faces and colours come from theme.css. Static: no script, nothing hidden; the one motion is the bar
   strips growing as their figure scrolls in (CSS scroll timeline), with the full bars as the resting state.
   Colour code in every comparison: .is-do = what to do (the section colour), .is-ref = the reference (ink),
   no class = what not to do (grey). */

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--table); }
*, *::before, *::after { box-sizing: inherit; }

body {
  /* five text sizes and the title: title, band, lead (h3, standfirst, recipe, figure values), body, note */
  --a-h1: clamp(2.75rem, 1.5rem + 4.4vw, 6rem);
  --a-h2: clamp(2rem, 1.35rem + 2.4vw, 3rem);
  --a-lead: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --a-body: clamp(1.125rem, 1.08rem + 0.2vw, 1.1875rem);
  --a-small: 0.9375rem;
  /* the sheet: a reading measure of about 68–72 characters a line (Barlow's letters run narrower than its
     zero, so 56ch of the zero hold about 70 letters), and its side padding */
  --measure: 56ch;
  --pad-x: clamp(1.25rem, 6vw, 5.5rem);
  /* the grey of what not to do, the margin of a dot, the fair-share mark */
  --bar-no: #9a9d98;
  --margen: #cfd1cc;
  --justo: #8d908b;
  --c: var(--ink); --c-ink: var(--paper);
  margin: 0; color: var(--ink); font-family: var(--text); font-size: var(--a-body); line-height: 1.55;
  font-kerning: normal; font-variant-numeric: lining-nums;
}
img { display: block; max-width: 100%; height: auto; }
.nw { white-space: nowrap; }

/* ── links: ink, underlined, the accent on hover ──────────────────────────── */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; text-decoration-color: currentColor; transition: color var(--t-hover) var(--ease-out), text-decoration-color var(--t-hover) var(--ease-out); }
@media (hover: hover) { a:hover { color: var(--accent-2); } }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── the quiet way back, on the felt, on the sheet's column line ──────────── */
.volver { width: 100%; max-width: calc(var(--measure) + 2 * var(--pad-x)); margin: 0 auto; padding: 1.1rem var(--pad-x); font-size: var(--a-body); }
.volver a { color: var(--paper); font-size: var(--a-small); font-weight: 600; line-height: 1.4; }
@media (hover: hover) { .volver a:hover { color: var(--board); } }
.volver a:focus-visible { outline-color: var(--paper); }
.volver--fin { padding-top: 1.5rem; padding-bottom: 3rem; }

/* ── the sheet ────────────────────────────────────────────────────────────── */
.hoja {
  display: block; width: 100%; max-width: calc(var(--measure) + 2 * var(--pad-x)); margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--pad-x) clamp(3rem, 7vw, 5rem);
  background: var(--paper); color: var(--ink);
}
@media (min-width: 56rem) { .hoja { border-radius: var(--radius-card); } }

p { margin: 0 0 1em; text-wrap: pretty; }
strong, b { font-weight: 600; }

/* ── the title, its sentence, the line under it ───────────────────────────── */
.cabecera h1 {
  margin: 0; padding-top: 0.04em;
  font-family: var(--display); font-weight: 700; font-size: var(--a-h1); line-height: 0.92; letter-spacing: -0.02em;
  text-transform: uppercase; text-wrap: balance;
}
.entradilla { margin: clamp(1.25rem, 3vw, 2rem) 0 0; font-size: var(--a-lead); font-weight: 500; line-height: 1.3; text-wrap: pretty; }
.firma { margin: 1.25rem 0 0; font-size: var(--a-small); line-height: 1.4; color: var(--ink-2); }

/* ── the summary: a tone step across the sheet, the abstract of the paper ─── */
.resumen { margin: clamp(2rem, 5vw, 3rem) calc(-1 * var(--pad-x)) 0; padding: clamp(1.25rem, 3vw, 1.75rem) var(--pad-x) clamp(0.5rem, 1.5vw, 0.75rem); background: var(--paper-2); }
.resumen h2 { margin: 0 0 0.5rem; font-family: var(--display); font-weight: 700; font-size: var(--a-lead); line-height: 1.05; text-transform: uppercase; }
.nota { margin: 1.25rem 0 0; font-size: var(--a-small); line-height: 1.45; color: var(--ink-2); }

/* ── a section: its deed band across the sheet, in the board section's colour ── */
.seccion { margin-top: clamp(3.5rem, 8vw, 5.5rem); }
#estrategia { --c: var(--c-estrategia); --c-ink: var(--ink); --c-mark: var(--c-estrategia); }
#metodo { --c: var(--c-metodo); --c-ink: var(--ink); }
#partida { --c: var(--c-partida); --c-ink: var(--ink); }
#partidas { --c: var(--c-partidas); --c-ink: var(--white); }
.seccion--aparte { --c: var(--paper-2); --c-ink: var(--ink); }
.banda {
  margin: 0 calc(-1 * var(--pad-x)) clamp(1.5rem, 3.5vw, 2.25rem);
  padding: clamp(1.1rem, 2.8vw, 1.6rem) var(--pad-x) clamp(0.95rem, 2.4vw, 1.35rem);
  background: var(--c); color: var(--c-ink);
}
.banda h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: var(--a-h2); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; text-wrap: balance; }
.seccion h3 { margin: clamp(2.25rem, 5vw, 3rem) 0 0.6rem; font-family: var(--display); font-weight: 700; font-size: var(--a-lead); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.banda + h3 { margin-top: 0; }

/* ── the recipe: a real ordered list, in play order, at the lead size ─────── */
.receta { margin: 0.25rem 0 1.5rem; padding: 0 0 0 1.5em; font-size: var(--a-lead); line-height: 1.3; }
.receta li { margin: 0 0 0.5em; padding-left: 0.35em; text-wrap: pretty; }
.receta li::marker { font-family: var(--display); font-weight: 700; color: var(--c-mark, var(--ink)); }
.receta strong { font-weight: 600; }

/* ── lists of plain points (limits, data) ─────────────────────────────────── */
.lista { margin: 0 0 1.25rem; padding: 0 0 0 1.1em; }
.lista li { margin: 0 0 0.75em; padding-left: 0.2em; text-wrap: pretty; }
.lista li::marker { color: var(--ink-2); }

/* ── the model's own words: the Spanish leads, the English original under it as the source ── */
.cita { margin: 1.5rem 0; padding: 0; }
.cita p { margin: 0; font-size: var(--a-lead); font-weight: 500; line-height: 1.3; }
.cita .fuente { margin-top: 0.6rem; font-size: var(--a-small); font-weight: 400; line-height: 1.45; color: var(--ink-2); }
.fuente { display: block; margin-top: 0.3rem; }

/* ── figures: numbered in their captions only ─────────────────────────────── */
.fig { margin: clamp(1.75rem, 4.5vw, 2.75rem) 0; min-width: 0; }
.fig figcaption { margin-top: 0.9rem; font-size: var(--a-small); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.fig figcaption b { color: var(--ink); }
.fig figcaption a { color: var(--ink); }

/* a comparison reads like the deed's rent table: label left, value right, a filled strip under the pair */
.barras { --max: 30; list-style: none; margin: 0; padding: 0; display: grid; row-gap: 0.95rem; }
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "tira tira"; align-items: baseline; column-gap: 1.25rem; row-gap: 0.35rem; }
.barra__k { grid-area: k; line-height: 1.3; text-wrap: pretty; }
.barra__v { grid-area: v; font-family: var(--display); font-weight: 700; font-size: var(--a-lead); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra__tira { grid-area: tira; display: block; height: 0.75rem; width: calc(min(var(--v), var(--max)) / var(--max) * 100%); background: var(--bar-no); transform-origin: 0 50%; }
.barra.is-do .barra__k { font-weight: 600; }
.barra.is-do .barra__tira { background: var(--c); }
.barra.is-ref .barra__k { font-weight: 600; }
.barra.is-ref .barra__tira { background: var(--ink); }

/* the dot plot: nine strategies; each row holds its label and its two win rates, the dot and its margin on a
   5–30 % axis under them, across the column */
.puntos { --x0: 5; --span: 25; display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem; column-gap: 1rem; font-size: var(--a-small); line-height: 1.3; }
.punto { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem; grid-template-areas: "k v w" "p p p"; column-gap: 1rem; row-gap: 0.35rem; align-items: baseline; padding: 0.5rem 0.6rem 0.6rem; }
@supports (grid-template-columns: subgrid) { .punto { grid-template-columns: subgrid; } }
.punto:nth-child(even):not(.punto--eje) { background: var(--paper-2); }
.punto__k { grid-area: k; }
.punto__v { grid-area: v; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.punto__w { grid-area: w; text-align: right; font-variant-numeric: tabular-nums; }
.punto__w--sin { color: var(--ink-2); }
.punto.is-ref .punto__k, .punto.is-ref .punto__v, .punto.is-ref .punto__w { font-weight: 700; }
.punto--cab { grid-template-areas: "k v w"; align-items: end; padding-top: 0; font-weight: 600; }
.punto__pista { grid-area: p; position: relative; display: block; height: 0.75rem; }
.punto__pista::before { content: ""; position: absolute; top: -0.3rem; bottom: -0.3rem; left: calc((25 - var(--x0)) / var(--span) * 100%); width: 2px; margin-left: -1px; background: var(--justo); }
.punto__margen { position: absolute; top: 0.125rem; height: 0.5rem; left: calc((var(--lo) - var(--x0)) / var(--span) * 100%); width: calc((var(--hi) - var(--lo)) / var(--span) * 100%); background: var(--margen); }
.punto__dot { position: absolute; top: 0; width: 0.75rem; height: 0.75rem; margin-left: -0.375rem; left: calc((var(--a) - var(--x0)) / var(--span) * 100%); border-radius: 50%; background: var(--bar-no); }
.punto.is-ref .punto__dot { background: var(--ink); }
.punto--eje .punto__pista::before { content: none; }
.leyenda { display: flex; flex-wrap: wrap; gap: 0.2rem 1.25rem; margin: 0 0 0.9rem; font-size: var(--a-small); line-height: 1.3; }
.ley { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.ley__dot { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--bar-no); }
.ley__margen { display: inline-block; width: 1.5rem; height: 0.5rem; background: var(--margen); }
.ley__justo { display: inline-block; width: 2px; height: 1rem; background: var(--justo); }
.punto--eje { grid-template-areas: "p p p"; padding-top: 0.2rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.punto--eje .punto__pista { height: 1.3rem; }
.punto--eje .punto__pista span { position: absolute; top: 0; left: calc((var(--x) - var(--x0)) / var(--span) * 100%); transform: translateX(-50%); white-space: nowrap; }
.punto--eje .punto__pista span:first-child { transform: none; }
.punto--eje .punto__pista span:last-child { transform: translateX(-100%); }

/* tables: rows as tone steps, the winners' rows in the section colour, no rules */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.tabla th, .tabla td { padding: 0.55rem 0.6rem; text-align: left; vertical-align: baseline; }
.tabla thead th { padding-top: 0; padding-bottom: 0.35rem; font-size: var(--a-small); font-weight: 600; vertical-align: bottom; }
.tabla tbody th, .tabla tbody td { background: var(--paper-2); }
.tabla tbody th { font-weight: 600; }
.tabla tbody tr.is-do th, .tabla tbody tr.is-do td { background: var(--c); color: var(--c-ink); }
.tabla .num { text-align: right; }
.tabla th:first-child, .tabla td:first-child { padding-left: 0.75rem; }
.tabla th:last-child, .tabla td:last-child { padding-right: 0.75rem; }
.tabla--partidas td:last-child { white-space: nowrap; }
@media (min-width: 40.01rem) { .tabla tbody th { white-space: nowrap; } }
.tabla--partidas a { font-weight: 600; }

/* the viewer's captures: the column's width, the capture's own square edge */
.fig--captura img { width: 100%; background: var(--paper-2); }

/* one final board beside its caption; three final boards in a row */
.fig--tablero > a { display: block; }
.fig--tablero img { width: min(100%, 30rem); }
.tableros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tablero { display: grid; align-content: start; gap: 0.5rem; text-decoration: none; }
.tablero span { font-size: var(--a-small); font-weight: 600; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

@media (min-width: 46rem) {
  .fig--tablero { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: 1.5rem; align-items: end; }
  .fig--tablero figcaption { margin-top: 0; }
}

/* ── the phone: one column, the dot plot's track under its row, smaller table type ── */
@media (max-width: 40rem) {
  .puntos { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; column-gap: 0.6rem; }
  .punto { grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; column-gap: 0.6rem; padding-inline: 0.5rem; }
  @supports (grid-template-columns: subgrid) { .punto { grid-template-columns: subgrid; } }
  .tabla { font-size: var(--a-small); }
  .tabla th, .tabla td { padding: 0.5rem 0.4rem; }
  .tabla th:first-child, .tabla td:first-child { padding-left: 0.55rem; }
  .tabla th:last-child, .tabla td:last-child { padding-right: 0.55rem; }
  /* the two model tables: the model's name on its own line, its four figures under the four headings */
  .tabla--modelos, .tabla--modelos thead, .tabla--modelos tbody { display: block; }
  .tabla--modelos tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 3px; }
  .tabla--modelos th, .tabla--modelos td { display: block; }
  .tabla--modelos tr > :first-child { grid-column: 1 / -1; padding-left: 0.55rem; }
  .tabla--modelos tbody tr > :first-child { padding-bottom: 0.1rem; }
  .tabla--modelos tbody td { padding-top: 0.15rem; }
  .tabla--modelos tr > :nth-child(2) { padding-left: 0.55rem; }
  .tabla--modelos thead th:first-child { padding-bottom: 0.15rem; }
  .tableros { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .barra { column-gap: 0.9rem; }
}

/* ── motion: the strips grow as their figure comes up the screen; at rest, and outside that range, full ── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .barras { view-timeline: --barras block; }
    .barra__tira { animation: art-crece linear; animation-timeline: --barras; animation-range: entry 0% cover 38%; }
    .barra:nth-child(2) .barra__tira { animation-range: entry 0% cover 41%; }
    .barra:nth-child(3) .barra__tira { animation-range: entry 0% cover 44%; }
    .barra:nth-child(n + 4) .barra__tira { animation-range: entry 0% cover 47%; }
  }
}
@keyframes art-crece { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }

/* ── print: ink on white, no felt, no link chrome, figures kept whole ─────── */
@media print {
  @page { margin: 16mm 15mm; }
  html, body { background: #fff; }
  body { --a-h1: 30pt; --a-h2: 20pt; --a-lead: 13pt; --a-body: 11pt; --a-small: 8.5pt; line-height: 1.45; }
  .volver { display: none; }
  .hoja { max-width: 165mm; margin: 0; padding: 0; border-radius: 0; }
  .fig--captura img { width: auto; max-width: 120mm; }
  a { color: inherit; text-decoration: none; }
  .tablero span { text-decoration: none; }
  .resumen { margin-inline: 0; padding: 8pt 10pt 2pt; }
  .banda { margin-inline: 0; padding: 6pt 0 0; background: none; color: var(--ink); border-top: 5pt solid var(--c); }
  .seccion--aparte .banda { border-top-color: var(--ink-2); }
  .seccion { margin-top: 20pt; }
  .resumen, .barra__tira, .punto, .punto__margen, .punto__dot, .punto__pista::before, .ley__dot, .ley__margen, .ley__justo, .tabla th, .tabla td, .banda { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .barra__tira { animation: none; }
  .fig, .cita, .receta, .tabla tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .tableros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fig--tablero { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 12pt; align-items: end; }
}