@charset "UTF-8";
/* ==========================================================================
   CELADON · BASE
   Reset, global texture, typography roles, layout grid, utilities.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: var(--brand-primary); color: var(--on-brand); }
:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }
.t-dark, .t-light { background: var(--bg); color: var(--text-primary); }

/* ---- Global noise: materiality, not filter ---------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: var(--z-noise);
  pointer-events: none;
  background-image: var(--noise-image);
  background-size: var(--noise-size);
  opacity: var(--noise-opacity);
  transform: translateZ(0);
}
.noise { position: relative; isolation: isolate; }
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: var(--noise-image); background-size: var(--noise-size);
  opacity: calc(var(--noise-opacity) * 2.2); mix-blend-mode: overlay;
}

/* ---- Typography roles ------------------------------------------------- */
.t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-title-sm, .t-metric {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  text-wrap: balance;
  font-feature-settings: "kern", "liga";
}
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--text-heading); text-transform: uppercase; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--text-heading); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-spec); color: var(--brand-primary); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-spec); color: var(--brand-secondary); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-spec); color: var(--brand-tertiary); }
.t-title-sm { font-size: var(--fs-title-sm); line-height: var(--lh-spec); color: var(--brand-primary); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.t-metric { font-size: var(--fs-metric); line-height: var(--lh-display); color: var(--text-heading); font-variant-numeric: tabular-nums; }

.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text-primary); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-secondary); }
.t-sub { font-size: var(--fs-body-sm); line-height: var(--lh-spec); color: var(--text-secondary); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--text-secondary); }
.t-label { font-size: var(--fs-label); line-height: var(--lh-spec); font-weight: var(--fw-semibold); color: var(--text-primary); }
.t-overline { font-family: var(--font-mono); font-size: var(--fs-overline); line-height: var(--lh-spec); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-secondary); }
.t-code, code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-code); }
.t-data { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-spec); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.t-muted { color: var(--text-secondary); }
.t-brand { color: var(--brand-primary); }
.t-upper { text-transform: uppercase; }
.measure { max-width: 68ch; }
.measure-narrow { max-width: 52ch; }

/* Título 5 — highlight label · Título 6 — top-rule label */
.t-label-hl { display: inline-block; font-size: var(--fs-body); line-height: var(--lh-spec); color: var(--text-primary); background: var(--surface-highlight); padding: var(--space-4) var(--space-8); }
.t-label-rule { display: block; font-size: var(--fs-body); line-height: var(--lh-spec); color: var(--text-primary); border-top: var(--bw-hairline) solid var(--rule); padding-top: var(--space-8); }

/* Semantic mono text */
.t-positive, .t-negative, .t-warning, .t-info { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-spec); display: inline-flex; align-items: center; gap: var(--space-4); }
.t-positive { color: var(--status-positive); }
.t-negative { color: var(--status-negative); }
.t-warning { color: var(--status-warning); }
.t-info { color: var(--status-info); }

/* Semantic highlights */
.hl { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-spec); padding: var(--space-2) var(--space-8); display: inline-block; }
.hl-positive { background: var(--status-positive); color: var(--on-positive); }
.hl-negative { background: var(--status-negative); color: var(--on-negative); }
.hl-warning { background: var(--status-warning); color: var(--on-warning); }
.hl-info { background: var(--status-info); color: var(--on-info); }

/* Running text */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-16); }
.prose p { color: var(--text-primary); }
.prose strong { font-weight: var(--fw-semibold); }
.prose ul { display: grid; gap: var(--space-8); }
.prose ul > li { position: relative; padding-left: var(--space-20); }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--brand-primary); }
.prose code, .inline-code { background: var(--surface-strong); padding: .08em .36em; border-radius: var(--radius-2); font-size: .86em; }

/* ---- Icons (Lucide geometry, inline sprite) --------------------------- */
.ic { width: var(--ic, var(--size-icon-20)); height: var(--ic, var(--size-icon-20)); flex: none; fill: none; stroke: currentColor; stroke-width: var(--ic-stroke, 1.75); stroke-linecap: round; stroke-linejoin: round; }
.ic-16 { --ic: var(--size-icon-16); --ic-stroke: 2; }
.ic-20 { --ic: var(--size-icon-20); }
.ic-24 { --ic: var(--size-icon-24); --ic-stroke: 1.5; }
.ic-32 { --ic: var(--size-icon-32); --ic-stroke: 1.25; }

/* ---- Layout: named-line page grid ------------------------------------ */
.layout {
  --margin: clamp(var(--space-16), 4vw, var(--space-64));
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--margin), 1fr)
    [wide-start] minmax(0, calc((var(--size-wide) - var(--size-content)) / 2))
    [content-start] min(var(--size-content), 100% - var(--margin) * 2)
    [content-end] minmax(0, calc((var(--size-wide) - var(--size-content)) / 2))
    [wide-end] minmax(var(--margin), 1fr) [full-end];
}
.layout > * { grid-column: content; }
.layout > .l-wide { grid-column: wide; }
.layout > .l-full { grid-column: full; }

/* ---- 12 / 8 / 4 column grid ------------------------------------------ */
.grid {
  --cols: 12;
  --gutter: var(--space-24);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--row-gap, var(--space-32));
}
.grid > * { grid-column: var(--start, auto) / span min(var(--span, 12), var(--cols)); }
@media (max-width: 1024px) {
  .grid { --cols: 8; --gutter: var(--space-20); }
  .grid > * { grid-column: var(--start-md, auto) / span min(var(--span-md, 8), var(--cols)); }
}
@media (max-width: 640px) {
  .grid { --cols: 4; --gutter: var(--space-16); }
  .grid > * { grid-column: auto / span min(var(--span-sm, 4), var(--cols)); }
}
.container { width: min(100% - 2 * clamp(var(--space-16), 4vw, var(--space-64)), var(--size-max)); margin-inline: auto; }

/* ---- Utilities --------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-16)); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-12)); }
.row--between { justify-content: space-between; }
.row--start { align-items: flex-start; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
hr, .divider { border: 0; height: var(--bw-hairline); background: var(--border); margin: 0; }
.divider--brand { background: var(--grad-rule); }
.divider--strong { background: var(--text-primary); }