/* =========================================================================
   Rumbo — hoja de estilos única.

   Sistema
   -------
   Color   Blanco y negro. Gris sólo para lo secundario, azul sólo para
           enlaces. Ningún otro color decora nada.
   Tipo    Una sola familia (Source Sans 3) en todo el sitio, más una
           monoespaciada para código. Cuerpo a 20px.
   Trama   Una columna de 66 caracteres, centrada. Nada compite con ella.
   ========================================================================= */

@font-face {
  font-family: 'Source Sans';
  src: url('/fonts/sourcesans-normal.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans';
  src: url('/fonts/sourcesans-italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/plexmono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --bg: #ffffff;
  --text: #111111;
  --text-2: #575757;
  --text-3: #8a8a8a;
  --line: #e3e3e3;
  --line-2: #c9c9c9;
  --link: #1155cc;
  --link-visited: #6b3fa0;
  --mark: #fff2a8;
  --code-bg: #f5f5f5;

  --font: 'Source Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --measure: 36rem;   /* ~66 caracteres a 20px */
  --gutter: 1.5rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111111;
    --text: #ededed;
    --text-2: #a8a8a8;
    --text-3: #808080;
    --line: #2e2e2e;
    --line-2: #454545;
    --link: #7aa7f0;
    --link-visited: #b795e0;
    --mark: #4a4423;
    --code-bg: #1c1c1c;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #111111;
  --text: #ededed;
  --text-2: #a8a8a8;
  --text-3: #808080;
  --line: #2e2e2e;
  --line-2: #454545;
  --link: #7aa7f0;
  --link-visited: #b795e0;
  --mark: #4a4423;
  --code-bg: #1c1c1c;
  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.25rem;      /* 20px */
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:visited { color: var(--link-visited); }
a:hover { text-decoration-thickness: 2px; }

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

img, svg, video { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
::selection { background: var(--mark); color: var(--text); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--text); color: var(--bg);
  padding: 0.6rem 1rem; z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* La misma columna en todas las páginas. No hay anchos alternativos. */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Cabecera ------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header > .wrap {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.5rem;
}

.brand {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}
.brand:visited { color: var(--text); }

.site-nav { display: flex; align-items: baseline; gap: 1.1rem; }
.site-nav a {
  font-size: 0.9375rem;
  color: var(--text-2);
  text-decoration: none;
}
.site-nav a:visited { color: var(--text-2); }
.site-nav a:hover { color: var(--text); text-decoration: underline; }
.site-nav a[aria-current='page'] { color: var(--text); }

.header-tools { display: flex; align-items: baseline; gap: 0.9rem; }
.icon-btn {
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
}
.icon-btn:hover { color: var(--text); text-decoration: underline; }
.icon-btn:visited { color: var(--text-2); }

@media (max-width: 26rem) {
  .site-header > .wrap { flex-wrap: wrap; row-gap: 0.5rem; }
  .brand { flex-basis: 100%; margin-right: 0; }
  .site-nav { margin-right: auto; }
}

/* --- Migas ---------------------------------------------------------------- */
.breadcrumb { padding-top: 2rem; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.875rem;
  color: var(--text-3);
}
.breadcrumb a { color: var(--text-3); text-decoration: none; }
.breadcrumb a:visited { color: var(--text-3); }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb li + li::before { content: '›'; margin-right: 0.35rem; }

/* --- Artículo ------------------------------------------------------------- */
.article-grid { padding-block: 1rem 4rem; }
.article-main { max-width: 100%; }

.post-head { margin-bottom: 2.5rem; }

.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
a.eyebrow { text-decoration: none; }
a.eyebrow:visited { color: var(--text-3); }
a.eyebrow:hover { color: var(--text); text-decoration: underline; }

h1 {
  font-size: clamp(2rem, 1.55rem + 2.2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.dek {
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}

.post-meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.35rem 0.6rem;
  font-size: 0.9375rem;
  color: var(--text-3);
  padding-block: 0.85rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.post-meta a { color: var(--text-2); text-decoration: none; }
.post-meta a:visited { color: var(--text-2); }
.post-meta a:hover { color: var(--text); text-decoration: underline; }
.post-meta .sep { color: var(--line-2); }

/* Respuesta directa: una regla vertical, sin fondo ni caja. */
.answer {
  margin: 2.5rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--text);
}
.answer > .eyebrow { color: var(--text); margin-bottom: 0.5rem; }
.answer p {
  font-size: 1.1875rem;
  line-height: 1.6;
  margin: 0;
  color: var(--text);
}

/* Puntos clave: una lista, sin adornos. */
.takeaways { margin: 2.5rem 0; }
.takeaways ul { list-style: none; margin: 0; padding: 0; }
.takeaways li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-2);
}
.takeaways li + li { margin-top: 0.5rem; }
.takeaways li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-3);
}

/* --- Índice del artículo: una lista discreta, sin caja ni carril ---------- */
.toc {
  margin: 2.5rem 0;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.toc > .eyebrow { margin-bottom: 0.6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { line-height: 1.4; }
.toc li + li { margin-top: 0.4rem; }
.toc li.lv3 { padding-left: 1.1rem; }
.toc a {
  font-size: 1rem;
  color: var(--text-2);
  text-decoration: none;
}
.toc a:visited { color: var(--text-2); }
.toc a:hover { color: var(--link); text-decoration: underline; }

/* --- Cuerpo --------------------------------------------------------------- */
.prose { color: var(--text); }

/* El margen lo pone siempre el elemento de arriba. Un selector de tipo
   (.prose p) tendría más especificidad y anularía esta separación. */
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.4em; }
.prose p { text-wrap: pretty; }

.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  margin-top: 2.6em;
  text-wrap: balance;
  scroll-margin-top: 2rem;
}
.prose h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.35;
  margin-top: 2.1em;
  text-wrap: balance;
  scroll-margin-top: 2rem;
}
.prose h2 + * { margin-top: 0.8em; }
.prose h3 + * { margin-top: 0.65em; }

.heading-anchor {
  margin-left: 0.3rem;
  color: var(--text-3);
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 120ms ease;
}
h2:hover .heading-anchor, h3:hover .heading-anchor,
.heading-anchor:focus-visible { opacity: 1; }

.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--text-3); }
.prose li > ul, .prose li > ol { margin-top: 0.4em; }
.prose li > p { margin-block: 0; }

.prose strong { font-weight: 700; }
.prose mark { background: var(--mark); color: var(--text); padding: 0 0.15em; }

.prose blockquote {
  margin: 2em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--line-2);
  color: var(--text-2);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.1em 0.3em;
}
.prose pre {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--code-bg);
  padding: 1rem;
  overflow-x: auto;
  line-height: 1.55;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

.prose figure { margin: 2.5em 0; }
.prose figure img { display: block; width: 100%; }
.prose figcaption {
  font-size: 0.9375rem;
  color: var(--text-3);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* Tablas: sólo líneas horizontales.
   El texto se lee mejor en 36rem, pero una tabla de cuatro columnas no cabe
   ahí. En vez de recortarla, se ensancha sobre el espacio libre a los lados
   sin mover la columna de lectura. Si aun así desborda, las sombras laterales
   avisan de que hay más contenido: una tabla cortada sin señal parece rota. */
.table-wrap {
  overflow-x: auto;
  margin: 2.2em 0;
  width: min(52rem, 100vw - 3rem);
  margin-left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(to right, var(--bg) 30%, rgb(255 255 255 / 0)) left / 2.5rem 100% no-repeat,
    linear-gradient(to left, var(--bg) 30%, rgb(255 255 255 / 0)) right / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / 0.13), rgb(0 0 0 / 0)) left / 0.9rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.13), rgb(0 0 0 / 0)) right / 0.9rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* Los bloques de código siguen la misma regla. */
.prose > pre { width: min(52rem, 100vw - 3rem); margin-left: 50%; transform: translateX(-50%); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.prose thead th {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid var(--text);
  white-space: nowrap;
}
.prose tbody td {
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose tbody td:first-child { font-weight: 600; }

/* Nota al margen: {.nota} en el markdown. */
.prose .nota {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-2);
  padding-left: 1.25rem;
  border-left: 3px solid var(--line-2);
  margin-block: 2em;
}
.prose .nota strong { color: var(--text); }

/* --- Bloques posteriores -------------------------------------------------- */
.block { margin-top: 3.5rem; }
.block > h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.9rem 1.75rem 0.9rem 0;
  position: relative;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  position: absolute; right: 0; top: 0.85rem;
  color: var(--text-3);
  font-weight: 400;
}
.faq-item[open] > summary::after { content: '−'; }
.faq-item .faq-answer {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-2);
  padding: 0 0 1.1rem;
  margin: 0;
}

/* Serie: numerada porque el orden de lectura es información real. */
.series ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.series li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.55rem 0;
  line-height: 1.4;
}
.series li + li { border-top: 1px solid var(--line); }
.series li::before {
  content: counter(s) '.';
  color: var(--text-3);
  font-size: 0.9375rem;
  padding-top: 0.1em;
}
.series a { font-size: 1.0625rem; text-decoration: none; }
.series a:hover { text-decoration: underline; }
.series li[aria-current='true'] span {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-2);
}

.mentions ul, .tag-list { list-style: none; margin: 0; padding: 0; }
.mentions li + li { margin-top: 0.45rem; }
.mentions a { font-size: 1.0625rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; }
.tag-list a { font-size: 0.9375rem; }

.author-card { color: var(--text-2); font-size: 1rem; line-height: 1.6; }
.author-card .name { font-weight: 700; color: var(--text); margin: 0 0 0.3rem; font-size: 1.0625rem; }
.author-card .name a { color: var(--text); text-decoration: none; }
.author-card .name a:visited { color: var(--text); }
.author-card .name a:hover { text-decoration: underline; }
.author-card .bio { margin: 0; }

/* --- Listado de artículos ------------------------------------------------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list > li + li { border-top: 1px solid var(--line); }
.post-list article { padding: 1.75rem 0; }
.post-list .card-meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem;
  font-size: 0.875rem;
  color: var(--text-3);
  margin-bottom: 0.4rem;
}
.post-list .card-meta a { color: var(--text-3); text-decoration: none; }
.post-list .card-meta a:visited { color: var(--text-3); }
.post-list .card-meta a:hover { color: var(--text); text-decoration: underline; }
.post-list h2, .post-list h3 {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0 0 0.35rem;
  text-wrap: balance;
}
.post-list h2 a, .post-list h3 a { color: var(--text); text-decoration: none; }
.post-list h2 a:visited, .post-list h3 a:visited { color: var(--text); }
.post-list h2 a:hover, .post-list h3 a:hover { text-decoration: underline; }
.post-list p {
  margin: 0;
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.post-list .badge-pillar {
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* --- Portada -------------------------------------------------------------- */
.hero { padding-block: 3rem 2rem; }
.hero h1 { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.5rem); }
.hero p {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0.85rem 0 0;
  text-wrap: pretty;
}

.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-list > li + li { border-top: 1px solid var(--line); }
.hub { display: block; padding: 1.1rem 0; text-decoration: none; }
.hub h3 { font-size: 1.125rem; font-weight: 700; margin: 0 0 0.2rem; color: var(--text); }
.hub:hover h3 { text-decoration: underline; }
.hub p { margin: 0; font-size: 1rem; color: var(--text-2); line-height: 1.5; }
.hub .count { font-size: 0.875rem; color: var(--text-3); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 3rem 0 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}
.section-head h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.section-head a { font-size: 0.9375rem; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }

/* --- Paginación y páginas simples ---------------------------------------- */
.pagination {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.pagination a { text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination .pos { color: var(--text-3); }

.page-head { padding-block: 2.5rem 1.5rem; }
.page-head h1 { font-size: clamp(1.85rem, 1.5rem + 1.8vw, 2.375rem); }
.page-head p {
  font-size: 1.1875rem;
  color: var(--text-2);
  margin: 0.7rem 0 0;
  line-height: 1.5;
  text-wrap: pretty;
}

.empty { padding: 2.5rem 0; color: var(--text-2); }

.search-form { display: flex; gap: 0.5rem; margin: 1.5rem 0 2rem; }
input[type='search'], input[type='text'], input[type='password'], input[type='date'], select, textarea {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 0;
  padding: 0.5rem 0.65rem;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--text); }

.btn {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--bg);
  background: var(--text);
  border: 1px solid var(--text);
  border-radius: 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { opacity: 0.85; color: var(--bg); }
.btn:visited { color: var(--bg); }
.btn-ghost { background: none; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--code-bg); color: var(--text); }
.btn-danger { background: none; color: #b3261e; border-color: #b3261e; }
.btn-danger:hover { background: #b3261e; color: #fff; }

/* --- Pie ------------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding-block: 2rem 3rem;
  font-size: 0.9375rem;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.footer-nav a { color: var(--text-2); text-decoration: none; }
.footer-nav a:visited { color: var(--text-2); }
.footer-nav a:hover { color: var(--text); text-decoration: underline; }
.footer-bottom { color: var(--text-3); display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; align-items: baseline; }
.footer-bottom .icon-btn { font-size: inherit; color: var(--text-3); margin-left: auto; }

/* --- Panel de redacción --------------------------------------------------- */
/* El panel es una herramienta, no una lectura: usa el ancho completo. */
.admin-bar { border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.admin-bar .wrap,
.admin-main .wrap { max-width: 68rem; }
.admin-bar .wrap { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; padding-block: 0.9rem; }
.admin-bar a { color: var(--text-2); text-decoration: none; }
.admin-bar a:visited { color: var(--text-2); }
.admin-bar a:hover, .admin-bar a[aria-current='page'] { color: var(--text); text-decoration: underline; }
.admin-bar .spacer { margin-left: auto; }

.admin-main { padding-block: 2rem 4rem; font-size: 1rem; }
.admin-grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .admin-grid { grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); align-items: start; } }

.field { display: grid; gap: 0.3rem; margin-bottom: 1.1rem; }
.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field .hint { font-size: 0.875rem; color: var(--text-3); line-height: 1.45; }
.field textarea { font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.6; resize: vertical; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

.panel { border-top: 1px solid var(--text); padding-top: 0.9rem; }
.panel + .panel { margin-top: 1.75rem; }
.panel h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.9rem;
}

.admin-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.admin-table th {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid var(--text);
  white-space: nowrap;
}
.admin-table td { padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table th:last-child, .admin-table td:last-child { padding-right: 0; }
.admin-table td.n { font-size: 0.9375rem; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table a { color: var(--text); text-decoration: none; font-weight: 600; }
.admin-table a:visited { color: var(--text); }
.admin-table a:hover { text-decoration: underline; }

.status { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.status-live { color: var(--text-2); }
.status-draft { color: #9a6700; }

.flash { padding: 0.7rem 0; font-size: 1rem; margin-bottom: 1.25rem; border-block: 1px solid var(--text); }
.flash-err { color: #b3261e; border-color: #b3261e; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.checks li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.4rem; align-items: start; line-height: 1.45; }
.checks .ok { color: var(--text-2); }
.checks .warn { color: #9a6700; }
.checks .bad { color: #b3261e; }
.checks .label { color: var(--text-2); }

.login-wrap { max-width: 20rem; margin: 6rem auto; padding-inline: var(--gutter); }
.login-wrap h1 { font-size: 1.75rem; margin-bottom: 0.3rem; }
.login-wrap p { color: var(--text-2); font-size: 1rem; margin: 0 0 1.75rem; }

@media print {
  .site-header, .site-footer, .toc, .block { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { color: #000; }
}