@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root {
  --color-paper: oklch(98.8% 0.002 250);
  --color-surface: oklch(96% 0.004 250);
  --color-ink: oklch(22% 0.012 250);
  --color-ink-2: oklch(48% 0.014 250);
  --color-muted: oklch(63% 0.012 250);
  --color-rule: oklch(88% 0.022 245);
  --color-accent: oklch(48% 0.150 25);
  --color-accent-hover: oklch(38% 0.140 25);
  --color-accent-underline: oklch(82% 0.070 25);

  --font-body: "Familjen Grotesk", "Helvetica Neue", Helvetica, sans-serif;
  --font-data: "Spline Sans Mono", ui-monospace, monospace;

  --text-base: 17px;
  --text-xs: .97rem;
  --text-sm: 1rem;
  --text-lg: 1.15rem;
  --text-xl: 1.45rem;
  --text-stat: 1.5rem;
  --text-2xl: clamp(2.6rem, 7vw, 4rem);

  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .7rem;
  --space-sm: .85rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 7rem;

  --measure: 48rem;
  --sheet: 66rem;
  --rule-hair: 1px;
  --focus-width: 2px;
  --dur-short: 150ms;
  --ease-out: ease-out;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.62; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.sheet { max-width: var(--sheet); margin: 0 auto; padding: clamp(2rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3rem) clamp(3.5rem, 7vw, 7rem); }
.sheet > * { width: 100%; max-width: var(--measure); margin-right: auto; margin-left: auto; }

a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: .17em; text-decoration-color: var(--color-accent-underline); transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-accent-hover); text-decoration-color: var(--color-accent); }
a:focus-visible { outline: var(--focus-width) solid var(--color-accent); outline-offset: 3px; text-decoration: none; }

.masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: 0; font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.masthead a { color: var(--color-ink); text-decoration: none; }
.masthead .stato { color: var(--color-muted); }

.apertura { margin-top: clamp(3rem, 8vw, 6rem); }
.apertura.nofigure { margin-bottom: 0; }
h1 { max-width: 24ch; margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-2xl); font-weight: 500; line-height: 1.02; letter-spacing: -.032em; text-wrap: balance; }
figure { width: 100%; margin: var(--space-xl) 0 0; padding: 0; background: var(--color-surface); }
figure img { display: block; width: 100%; height: auto; background: var(--color-surface); }
.standfirst { max-width: none; margin: var(--space-xl) 0 0; color: var(--color-ink-2); font-size: var(--text-lg); font-style: normal; line-height: 1.6; text-align: left; }

.meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; width: 100%; margin: var(--space-xl) 0 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); }
.meta div { min-width: 0; margin: 0; padding: 1.1rem var(--space-lg) 1.1rem 0; }
.meta dt { margin: 0; color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; }
.meta dd { margin: var(--space-2xs) 0 0; color: var(--color-ink); font-family: var(--font-data); font-size: var(--text-stat); font-weight: 400; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

.corpo, .apparato { max-width: var(--measure); margin-top: clamp(3.5rem, 8vw, 6rem); }
.corpo > h2, .apparato > h2 { margin: 0 0 var(--space-lg); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; text-transform: none; }
.corpo { color: var(--color-ink-2); }
.corpo > :first-child { margin-top: 0; }
.corpo > :last-child { margin-bottom: 0; }
.corpo ul, .corpo ol { margin: var(--space-lg) 0; padding-left: var(--space-lg); color: var(--color-ink-2); }
.corpo li { margin: var(--space-2xs) 0; }

.pairs { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.pairs li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.pairs .v { flex: none; color: var(--color-ink); font-family: var(--font-data); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pairs__total { font-weight: 600; }
.pairs__total .v { font-weight: 500; }

.scroll { width: 100%; max-width: none; margin: 0; padding: 0; overflow-x: auto; background: transparent; border: 0; }
.matrix { width: 100%; min-width: 21rem; border-collapse: collapse; color: var(--color-ink); font-size: var(--text-base); }
.matrix th { padding: 0 var(--space-lg) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.matrix th:not(:first-child), .matrix .n { text-align: right; }
.matrix td { padding: var(--space-xs) var(--space-lg) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.matrix .n { color: var(--color-ink); font-family: var(--font-data); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix th:last-child, .matrix td:last-child { padding-right: 0; }
.matrix tr:last-child td { border-bottom: 0; }

.apparato__note { margin: 0 0 1.75rem; padding: 0; color: var(--color-ink-2); font-size: var(--text-base); line-height: 1.62; }
.aside { padding: var(--space-md) 0; border-top: var(--rule-hair) solid var(--color-rule); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.aside p { margin: 0; }
.aside p + p { margin-top: var(--space-2xs); }
.aside ul { margin: 0; padding-left: var(--space-lg); }
.aside li { margin: var(--space-3xs) 0; }

.sources { color: var(--color-ink-2); font-size: var(--text-xs); line-height: 1.6; }
.sources ol { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); counter-reset: source; }
.sources li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); margin: 0; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); counter-increment: source; }
.sources li::before { content: counter(source, decimal-leading-zero); color: var(--color-accent); font-family: var(--font-data); font-size: var(--text-xs); line-height: 1.8; font-variant-numeric: tabular-nums; }
sup a { padding: 0 .1em; text-decoration: none; }
code { padding: .1em .3em; background: transparent; color: var(--color-ink); font-family: var(--font-data); font-size: var(--text-xs); }
pre { padding: var(--space-md); overflow-x: auto; background: transparent; border: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); line-height: 1.5; }
pre code { padding: 0; background: none; font-size: inherit; }

.colophon { max-width: var(--measure); margin-top: clamp(4rem, 9vw, 7rem); color: var(--color-ink-2); font-size: var(--text-base); }
.colophon h2 { margin: 0 0 var(--space-lg); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.colophon ul { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.colophon li { margin: 0; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.colophon .file { margin: var(--space-xl) 0 0; color: var(--color-muted); font-family: var(--font-data); font-size: var(--text-xs); letter-spacing: .02em; }

@media (max-width: 34rem) {
  .sheet { padding-right: 1.25rem; padding-left: 1.25rem; }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .sheet { max-width: none; padding: 0; }
  .masthead, figure { display: none; }
  a { color: inherit; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-family: var(--font-data); font-size: 8pt; word-break: break-all; }
}