/* NOCTURNALIA — sistema editorial propio */

:root {
  --ed-paper: #f7f3ea;
  --ed-paper-deep: #ebe4d6;
  --ed-ink: #101010;
  --ed-muted: #6e685f;
  --ed-line: #171717;
  --ed-accent: #e33b2f;
  --ed-accent-text-on-paper: #c9271b;
  --ed-accent-text-on-dark: #e64e43;
  --ed-white: #fff;
  --ed-ui-sans: "Arial Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ed-display-serif: "Iowan Old Style", Baskerville, "Times New Roman", Georgia, serif;
  --ed-body-serif: var(--ed-display-serif);
  --ed-typewriter: "Courier New", Courier, monospace;
  --ed-sans: var(--ed-ui-sans);
  --ed-serif: var(--ed-display-serif);
  --ed-shell: 1440px;
  --ed-editorial: 1180px;
  --ed-visual: 1320px;
  --ed-reading: 740px;
  --ed-reading-two: 1000px;
  --ed-reading-two-sidebar: 850px;
  --ed-reading-size: 20px;
  --ed-reading-leading: 1.68;
  --ed-masthead-size: clamp(3.7rem, 8.6vw, 8.5rem);
  --ed-masthead-mobile-size: clamp(2.55rem, 11vw, 5rem);
  --ed-lead-title-size: clamp(3.35rem, 7vw, 7.7rem);
  --ed-lead-title-mobile-size: clamp(2.8rem, 15vw, 5.4rem);
  --ed-article-title-size: clamp(3.5rem, 7vw, 7.5rem);
  --ed-article-opening-title-size: clamp(2.65rem, 4.2vw, 5.2rem);
  --ed-article-opening-mobile-title-size: clamp(2.45rem, 11vw, 4.4rem);
  --ed-body-lead-size: clamp(2rem, 2.8vw, 2.625rem);
  --ed-archive-title-size: clamp(3.7rem, 8vw, 8.2rem);
  --ed-page-title-mobile-size: clamp(3rem, 14vw, 5.8rem);
  --ed-section-title-size: clamp(2.4rem, 4vw, 4.6rem);
  --ed-card-title-size: clamp(1.45rem, 2.2vw, 2.25rem);
  --ed-row-title-size: clamp(1.35rem, 2vw, 2rem);
  --ed-photo-title-size: clamp(3rem, 6.2vw, 6.8rem);
  --ed-photo-title-mobile-size: clamp(2.75rem, 13vw, 5rem);
  --ed-front-photo-title-size: clamp(2.7rem, 5.4vw, 6rem);
  --ed-front-photo-title-mobile-size: clamp(2.35rem, 9.8vw, 3.4rem);
  --ed-empty-title-size: clamp(3rem, 6.5vw, 6.8rem);
  --ed-error-title-size: clamp(2.8rem, 6vw, 6rem);
  --ed-header-bg: #f7f3ea;
  --ed-header-text: #101010;
  --ed-header-utility-size: 11px;
  --ed-header-nav-size: 11px;
  --ed-footer-bg: #101010;
  --ed-footer-text: #f7f3ea;
  --ed-footer-cat: #e33b2f;
  --ed-footer-brand-size: clamp(3.5rem, 10vw, 10rem);
  --ed-footer-manifesto-size: clamp(1rem, 1.25vw, 1.125rem);
  --ed-footer-nav-size: 11px;
  --ed-footer-legal-size: 10px;
  --ed-article-sidebar: 300px;
  --ed-article-hero-bg: #101010;
  --ed-article-hero-text: #f7f3ea;
  --ed-gutter: clamp(20px, 4vw, 64px);
  --ed-rule: 1px solid var(--ed-line);
  --ed-space-xs: 4px;
  --ed-space-s: 8px;
  --ed-space-m: 16px;
  --ed-space-l: 24px;
  --ed-space-xl: 40px;
  --ed-space-2xl: 64px;
  --ed-space-3xl: 96px;
  --ed-grid-columns: 12;
  --ed-grid-gap: var(--ed-space-l);
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body.nocturnalia-site {
  background: var(--ed-paper);
  color: var(--ed-ink);
  font-family: var(--ed-sans);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html.menu-open,
body.nocturnalia-site.menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.nocturnalia-site.nocturnalia-dialog-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
  color: var(--ed-accent-text-on-paper);
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button,
input[type="submit"] {
  cursor: pointer;
}

img,
svg,
video,
iframe {
  display: block;
  height: auto;
  max-width: 100%;
}

figure,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

::selection {
  background: var(--ed-accent-text-on-paper);
  color: var(--ed-white);
}

:focus-visible {
  outline: 3px solid var(--ed-accent);
  outline-offset: 3px;
}

.ed-shell {
  margin-inline: auto;
  max-width: var(--ed-shell);
  padding-inline: var(--ed-gutter);
  width: 100%;
}

/*
 * Retícula normativa: 12 columnas en escritorio, 8 en tableta y 4 en móvil.
 * Las tres medidas canónicas no compiten con la grid: son usos editoriales de ella.
 */
.ed-grid {
  display: grid;
  gap: var(--ed-grid-gap);
  grid-template-columns: repeat(var(--ed-grid-columns), minmax(0, 1fr));
}

/* Tres medidas canónicas: lectura, edición y visual. */
.ed-reading-shell {
  max-width: calc(var(--ed-reading) + (2 * var(--ed-gutter)));
}

.ed-editorial-shell {
  max-width: calc(var(--ed-editorial) + (2 * var(--ed-gutter)));
}

.ed-visual-shell {
  max-width: calc(var(--ed-visual) + (2 * var(--ed-gutter)));
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link {
  background: var(--ed-ink);
  color: var(--ed-white);
  font-size: 13px;
  font-weight: 800;
  left: 16px;
  padding: 12px 16px;
  position: fixed;
  text-transform: uppercase;
  top: -100px;
  z-index: 100000;
}

.skip-link:focus {
  color: var(--ed-white);
  top: 16px;
}

.ed-kicker {
  color: var(--ed-accent-text-on-paper);
  display: inline-block;
  font-family: var(--ed-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
}

.ed-meta,
.ed-card__meta {
  align-items: center;
  color: var(--ed-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--ed-sans);
  font-size: 11px;
  font-weight: 700;
  gap: 8px 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ed-meta a {
  color: var(--ed-ink);
  text-decoration: none;
}

.ed-button {
  background: var(--ed-ink);
  border: 1px solid var(--ed-ink);
  color: var(--ed-white);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0.1em;
  padding: 14px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.ed-button:hover,
.ed-button:focus-visible {
  background: var(--ed-accent-text-on-paper);
  border-color: var(--ed-accent-text-on-paper);
  color: var(--ed-white);
}


@media (max-width: 980px) {
  :root { --ed-grid-columns: 8; }
}

@media (max-width: 680px) {
  :root { --ed-grid-columns: 4; --ed-grid-gap: var(--ed-space-m); }
}