/* Páginas de notas: índice y artículo. Solo lo que no cubre style.css */

.cell.article,
.cell.notes-index {
  --measure: 38rem;
  grid-column: 1 / -1;
  justify-content: flex-start;
  gap: 18px;
  padding: clamp(22px, 3.5vw, 44px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 52px);
  min-width: 0;
}

.cell.article:hover,
.cell.notes-index:hover {
  transform: none;
  box-shadow: none;
}

/* La celda mide la columna de lectura más su margen: el borde cobalto es la columna */
@media (min-width: 1021px) {
  .cell.article,
  .cell.notes-index { grid-column: 1 / -1; width: 100%; max-width: calc(var(--measure) + 112px); justify-self: center; }
  .cell.notes-index { min-height: 50vh; }
}

/* Miga de pan */
.crumbs {
  font-size: 11px;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}
.crumbs a { text-decoration: none; color: var(--blue); }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 6px; }

/* Cabecera del artículo */
.article-title,
.notes-index h1 {
  margin: 0;
  color: var(--blue);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 0.96;
  max-width: 100%;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.article-meta {
  font-size: 11px;
  color: var(--ink);
  opacity: 0.72;
  margin: 0;
}

/* Portada de la nota */
.cover {
  margin: 18px 0 0;
  padding: 0;
  max-width: min(var(--measure), 100%);
}
.cover img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--blue);
  background: var(--paper);
}

/* Cuerpo del artículo */
.prose {
  max-width: min(var(--measure), 100%);
  min-width: 0;
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  margin-top: 18px;
}

.prose p { margin: 0 0 1.7em; }

.prose h2,
.prose h3 {
  font-family: "Bricolage Grotesque", "Arial Black", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--blue);
  line-height: 1.05;
  margin: 2.2em 0 0.7em;
  text-wrap: balance;
}
.prose h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.prose h3 { font-size: clamp(17px, 1.9vw, 21px); font-weight: 700; }

.prose ul {
  margin: 0 0 1.7em;
  padding-left: 20px;
}
.prose li { margin-bottom: 0.4em; }
.prose li::marker { color: var(--blue); }

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.prose a:hover { color: #2735b0; text-decoration-thickness: 2.5px; }

.prose blockquote {
  margin: 1.7em 0;
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--blue);
  color: var(--ink);
  opacity: 0.8;
}
.prose blockquote p:last-child { margin-bottom: 0; }

.prose code {
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 0.9em;
  background: var(--grey);
  padding: 1px 5px;
}

.prose pre {
  margin: 2.55em 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 2px solid var(--blue);
  overflow-x: auto;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.6;
}
.prose pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

.prose figure {
  margin: 2.55em 0;
  padding: 0;
}
.prose figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--blue);
  background: #fff;
}
.prose figure.phone img {
  max-width: 360px;
  margin-inline: auto;
}

.prose figcaption {
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  opacity: 0.72;
}

/* Bloque de autor al final de la nota */
.author {
  display: flex;
  gap: 18px;
  align-items: center;
  max-width: min(var(--measure), 100%);
  margin-top: 18px;
  padding-top: 36px;
  border-top: 1px solid var(--blue-mist);
}
.author-pic {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border: 2px solid var(--blue);
  background: #fff;
  overflow: hidden;
}
.author-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.05);
}
.author-alt { opacity: 0; transition: opacity 0.3s ease; }
.author.is-wink .author-alt { opacity: 1; }
@media (hover: hover) {
  .author:hover .author-alt { opacity: 1; }
}
.author-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.author-name { margin: 0; font-size: 18px; line-height: 1; color: var(--blue); }
.author-role { margin: 0; font-size: 11px; color: var(--ink); opacity: 0.72; }
.author-lede { margin: 2px 0 0; font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.author-link { margin-top: 6px; font-size: 11px; font-weight: 700; text-decoration: none; align-self: flex-start; }
.author-link:hover { text-decoration: underline; }

.note-nav {
  margin-top: 18px;
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.note-nav a { text-decoration: none; }
.note-nav a:hover { text-decoration: underline; }
.notes-index .small { margin-top: 18px; }

/* Índice de notas */

/* Móvil: la celda sangra hasta el borde de página y los enlaces ganan zona táctil */
@media (max-width: 640px) {
  .cell.article,
  .cell.notes-index { margin-inline: -18px; border-inline: 0; box-shadow: none; }
  .author { padding-top: 28px; }
  .author-pic { width: 64px; height: 64px; }
  .crumbs a,
  .note-nav a,
  .author-link,
  .notes-index .small a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}