/* Blog: índice y entradas, portado de sadok.mx (blog.css + las partes de BaseLayout que usa).
   Todo cuelga de .bp, que va DENTRO de #content (el overlay copia solo el innerHTML de #content
   a #page). Páginas claras como en el original: el fondo cambia con :has(). */

@font-face {
  font-family: 'Emerald Bold';
  src: url(/assets/fonts/emerald-bold.woff2) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.bp {
  --page: #fff;
  --text: #1a1c1a;
  --text-dim: #555a55;
  --text-faint: #8b908b;
  --rule: #d6d6d6;
  --accent-ink: #1f6a6a;
  --bone-dim: #9a9a90;
  --gray-block: #f2f2ef;
  --gray-block-lg: #f2f2ef;
  --code-bg: #f2f2ef;
  --code-edge: #d9d9d4;
  --measure: 680px;
  --wide: 1120px;
  --font-pixel: 'Press Start 2P', ui-monospace, monospace;
  --font-heading: 'Emerald Bold', system-ui, sans-serif;
  --font-display: 'Handjet', system-ui, sans-serif;
  --font-text: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-code: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  color: var(--text);
  font: 16px/1.5 var(--font-text);
  color-scheme: light;
}

/* Fondo blanco en la página suelta y en el overlay; el .cs de styles.css se vuelve neutro. */
body.page:has(.bp), .frame:has(.bp) { background: #fff; color: #1a1c1a; }
.cs:has(> .bp) { max-width: none; padding: 0; font: inherit; }
body.page:has(.bp) .credits { color: #555a55; }

/* ---------- Cabecera ---------- */

.bp-head { max-width: var(--measure); margin: 56px auto 0; }
.bp-index > .bp-head { padding: 112px var(--gutter) 0; margin-top: 0; }
@media (max-width: 759.98px) { .bp-index > .bp-head { padding-top: 96px; } }
.bp-head h1 {
  margin: 0; padding-block: .075em; color: var(--text); font-size: 32px; line-height: .85;
  text-shadow: .0625em .0625em 0 var(--rule);
}
@media (min-width: 560px) { .bp-head h1 { font-size: 48px; } }
@media (min-width: 1024px) { .bp-head h1 { font-size: 64px; } }
.bp-head h1:focus { outline: none; }
@media (max-width: 759px) { .bp-head { margin-top: 40px; } }

/* Títulos en Emerald Bold, sin suavizado, como el original. */
.bp-head h1, .bp-row__title, .bp-author__name, .bp .prose h2, .bp .prose h3, .bp .prose h4, .bp .sources h2 {
  font-family: var(--font-heading); font-weight: 700; font-style: normal; letter-spacing: 0;
  font-kerning: none; -webkit-font-smoothing: none; text-wrap: balance; line-height: 1;
}

/* Firma: avatar con esquinas pixeladas, autor y fecha. */
.bp-byline {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: center; column-gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule);
}
@media (max-width: 559px) { .bp-byline { margin-top: 32px; } }
.bp-byline__face, .bp-author__face {
  --px: 2px; display: block; max-width: none; image-rendering: pixelated; background: #dfe2e6;
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px));
}
.bp-byline__face { grid-row: 1 / 3; width: 56px; height: 56px; }
.bp-byline__who {
  display: flex; flex-wrap: wrap; align-items: baseline; align-self: end; column-gap: 10px; margin: 0;
  font: 15px/1.35 var(--font-text); color: var(--text-dim);
}
.bp-byline__name { color: var(--text); font-weight: 600; text-decoration: underline 1px transparent; text-underline-offset: 3px; }
.bp-byline__name:hover, .bp-byline__name:focus-visible { text-decoration-color: currentColor; }

/* Fecha · minutos, en pixel. El separador "·" se dibuja antes de cada item y se esconde al cortar línea. */
.bp-byline__when, .bp-row__date {
  --sep: 2.8em; display: flex; flex-wrap: wrap; column-gap: var(--sep); overflow: hidden;
  font: 9px/2 var(--font-pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim);
}
.bp-byline__when > :not(.visually-hidden), .bp-row__date > :not(.visually-hidden) {
  position: relative; margin-left: calc(-1 * var(--sep)); padding-left: var(--sep); white-space: nowrap;
}
.bp-byline__when > :not(.visually-hidden)::before, .bp-row__date > :not(.visually-hidden)::before {
  content: '·'; content: '·' / ''; position: absolute; left: 0; width: var(--sep); text-align: center;
}
.bp-byline__when { align-self: start; margin: 6px 0 0; }
.bp-byline__minutes, .bp-row__minutes { color: var(--text-faint); }

/* ---------- Índice ---------- */

.bp-body { padding: 0 var(--gutter) 64px; overflow-x: clip; }
.bp-list { max-width: var(--measure); margin: 40px auto 0; }
.bp-list__title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding-bottom: 10px;
  border-bottom: 2px solid var(--text);
  font: 400 9px/2 var(--font-pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim);
}
.bp-list__items { margin: 0; padding: 0; list-style: none; }
.bp-list__items > li { border-bottom: 1px solid var(--rule); }
.bp-row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; column-gap: 32px;
  padding: 32px 0; color: var(--text); text-decoration: none;
}
.bp-row__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--rule); background: var(--page); }
.bp-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-row__text { display: grid; align-content: start; gap: 10px; min-width: 0; }
.bp-row__title { font-size: 32px; text-decoration: underline 2px transparent; text-underline-offset: 4px; }
.bp-row__desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font: 16px/1.45 var(--font-text); color: var(--text-dim); text-wrap: pretty;
}
.bp-row:hover .bp-row__title, .bp-row:focus-visible .bp-row__title { text-decoration-color: currentColor; }
.bp-row:hover .bp-row__thumb, .bp-row:focus-visible .bp-row__thumb { border-color: var(--text); }
.bp .bp-row:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.bp-list__empty { padding: 32px 0; color: var(--text-dim); }
@media (min-width: 760px) { .bp-row__desc { font-size: 17px; } }
@media (max-width: 559px) {
  .bp-list { margin-top: 32px; }
  .bp-row { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 24px 0 28px; }
  .bp-row__desc { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ---------- Entrada ---------- */

/* Foto de portada: 60% del alto de la ventana, con el borde tramado abajo. */
.bp-hero { position: relative; height: 60svh; overflow: hidden; background: #0f1110; }
.bp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--still-x, 50%) 50%; }
.bp-hero__dither {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px; pointer-events: none; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M0 0h2v2H0zM4 0h2v2H4zM0 4h2v2H0zM4 4h2v2H4zM0 8h2v2H0zM4 8h2v2H4zM2 10h2v2H2zM6 10h2v2H6zM0 12h2v2H0zM4 12h2v2H4zM2 14h2v2H2zM6 14h2v2H6zM0 16h8v2H0zM2 18h2v2H2zM6 18h2v2H6zM0 20h8v2H0zM2 22h2v2H2zM6 22h2v2H6z'/%3E%3C/svg%3E") 0 0 / 8px 24px repeat-x;
}

.bp .prose { font: 19px/1.65 var(--font-text); }
.bp .prose > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.bp .prose > :first-child { margin-top: 48px; }
.bp .prose p, .bp .prose ul, .bp .prose ol { margin-top: 0; margin-bottom: 1.1em; }
.bp .prose li + li { margin-top: .35em; }
.bp .prose a { color: var(--accent-ink); text-underline-offset: 2px; }
.bp .prose h2 { margin-top: 64px; margin-bottom: 12px; font-size: 32px; }
.bp .prose h3, .bp .prose h4 { margin-top: 40px; margin-bottom: 12px; font-size: 32px; }
@media (min-width: 760px) { .bp .prose h2 { font-size: 48px; } }
.bp .prose mark { background: #fff6c8; color: inherit; padding: 0 .1em; }
.bp .prose img, .bp .prose video { max-width: 100%; height: auto; display: block; }
.bp .prose figure { margin-top: 40px; margin-bottom: 40px; }
.bp .prose figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }

/* Citas grandes en Handjet; la línea con solo <cite> es la firma en pixel. */
.bp .prose > blockquote {
  box-sizing: border-box; width: round(down, 100%, 2px); max-width: var(--measure); margin: 48px auto; padding: 0 24px;
  font: 500 30px/34px var(--font-display); letter-spacing: .01em; -webkit-font-smoothing: none; text-wrap: pretty;
}
.bp .prose > blockquote p { margin: 0; }
.bp .prose > blockquote p + p { margin-top: 16px; }
.bp .prose > blockquote :is(em, i) { font-style: normal; font-weight: 900; }
.bp .prose blockquote p:has(> cite:only-child) { margin-top: 18px; }
.bp .prose blockquote cite {
  display: flex; align-items: center; gap: 10px;
  font: 400 10px/1.4 var(--font-pixel); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim);
}
.bp .prose blockquote cite::before { content: ''; flex: none; width: 24px; height: 2px; background: currentColor; }
@media (min-width: 760px) {
  .bp .prose > blockquote { margin-block: 72px; padding-inline: 32px; font-size: 38px; line-height: 42px; }
  .bp .prose > blockquote p + p { margin-top: 20px; }
}

.bp .prose code, .bp :is(p, li, td, th, figcaption) > code {
  padding: .1em .32em; font-size: .86em; background: var(--code-bg); box-shadow: inset 0 -2px 0 var(--code-edge);
  overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-family: var(--font-code);
}
.bp .prose pre {
  --px: 4px; box-sizing: border-box; margin-top: 0; margin-bottom: 1.4em; padding: 20px 24px; overflow-x: auto; tab-size: 2;
  font: 14.5px/1.6 var(--font-code); color: var(--text); background: var(--code-bg);
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px));
}
.bp .prose pre code { padding: 0; font-size: inherit; background: none; box-shadow: none; overflow-wrap: normal; }

/* Fuentes numeradas al pie. */
.bp .source-ref { margin-left: 2px; font-size: .68em; line-height: 0; }
.bp .source-ref a { padding: 0 1px; text-decoration: none; }
.bp .sources {
  max-width: var(--measure); margin: 72px auto 0; padding-top: 22px; font-size: 14px; line-height: 1.55; color: var(--text-dim);
  background: linear-gradient(to right, var(--bone-dim) 50%, transparent 0) 0 0 / 4px 2px repeat-x;
}
.bp .sources h2 { margin-top: 0; font-size: 32px; color: var(--text); }
.bp .sources li { overflow-wrap: anywhere; scroll-margin-top: 72px; }
.bp .sources li:target { background: #fff6c8; }

/* Recuadro del autor al final. */
.bp-author {
  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px;
  width: round(down, 100%, 2px); max-width: var(--measure); margin: 96px auto 0; padding: 48px 20px; background: var(--gray-block);
}
.bp-author__face { --px: 3px; width: 84px; height: 84px; background: var(--page); }
.bp-author__text { min-width: 0; }
.bp-author__name { margin: 0; font-size: 32px; color: var(--text); }
.bp-author__kicker {
  display: block; margin-bottom: 14px; font: 400 9px/2 var(--font-pixel); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); -webkit-font-smoothing: auto;
}
.bp-author__title { margin: 10px 0 0; font: 15px/1.4 var(--font-text); color: var(--text-dim); }
.bp-author__bio { margin-top: 20px; font: 16px/1.6 var(--font-text); color: var(--text); text-wrap: pretty; }
.bp-author__bio p { margin: 0; }
.bp-author__bio p + p { margin-top: .8em; }
.bp-author__bio a { color: var(--accent-ink); text-underline-offset: 2px; }
.bp-author__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.bp-author__links a {
  display: inline-block; padding: 6px 0; font: 10px/1.4 var(--font-pixel); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text); text-decoration: underline 2px var(--text-dim); text-underline-offset: 6px;
}
.bp-author__links a:hover, .bp-author__links a:focus-visible { text-decoration-color: var(--text); }
.bp .bp-author__links a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
@media (min-width: 560px) {
  .bp-author { grid-template-columns: 112px minmax(0, 1fr); column-gap: 32px; padding: 48px 32px; }
  .bp-author__face { --px: 4px; width: 112px; height: 112px; }
}
@media (min-width: 760px) {
  .bp-author { padding: 72px 48px; background: var(--gray-block-lg); }
  .bp-author__bio { font-size: 17px; }
}

/* ---------- "¿Continuar?": menú azul de RPG al final ---------- */

.bp .end-menu { max-width: var(--measure); margin: 88px auto 0; padding: 20px 0 16px; color: #fff; background: #081031; }
.bp-index .end-menu { margin-top: 72px; }
.bp-author + .end-menu { margin-top: 64px; }
.bp .end-menu__title {
  margin: 0 24px 12px; font: 400 10px/1.4 var(--font-pixel); letter-spacing: .08em; text-transform: uppercase; color: #b5bdd3;
}
.bp .end-menu__list { margin: 0; padding: 0; list-style: none; }
.bp .end-menu__row {
  display: grid; grid-template-columns: 12px max-content 1fr; align-items: center; column-gap: 14px;
  min-height: 52px; padding: 10px 24px; color: #fff; text-decoration: none;
}
.bp .end-menu__key { font: 13px/1.4 var(--font-pixel); text-transform: uppercase; }
.bp .end-menu__name { font-size: 16px; line-height: 1.4; color: #b5bdd3; }
.bp .end-menu__row:hover, .bp .end-menu__row:focus-visible { background: #213a7b; }
.bp .end-menu__row:hover .end-menu__name, .bp .end-menu__row:focus-visible .end-menu__name { color: #fff; }
.bp .end-menu__row:focus-visible { outline: 2px solid #3aded6; outline-offset: -2px; }
.bp .end-menu__cursor {
  visibility: hidden; width: 12px; height: 18px; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23081031' d='M0 0h2v1H0zM0 1h1v8H0zM2 1h1v1H2zM3 2h1v1H3zM4 3h1v1H4zM5 4h1v1H5zM4 5h1v1H4zM3 6h1v1H3zM2 7h1v1H2zM1 8h1v1H1z'/%3E%3Cpath fill='%233aded6' d='M1 1h1v7H1zM2 2h1v5H2zM3 3h1v3H3z'/%3E%3Cpath fill='%2319949c' d='M3 3h1v3H3zM4 4h1v1H4z'/%3E%3C/svg%3E") 0 0 / 12px 18px no-repeat;
}
.bp .end-menu__row:hover .end-menu__cursor,
.bp .end-menu__row:focus .end-menu__cursor,
.bp .end-menu__list:not(:hover):not(:focus-within) > li:first-child .end-menu__cursor {
  visibility: visible; animation: bp-cursor 1s step-end infinite;
}
@keyframes bp-cursor { 50% { transform: translateX(2px); } }
@media (max-width: 559px) {
  .bp .end-menu__row { grid-template-columns: 12px 1fr; row-gap: 4px; }
  .bp .end-menu__cursor { grid-row: span 2; align-self: start; }
  .bp .end-menu__name { grid-column: 2; }
}

/* El botón de volver con el recuadro de diálogo del Game Boy, como el BACK del original. */
body.page:has(.bp) .back-btn, .frame:has(.bp) .back-btn {
  --u: 3px; padding: 9px 15px 9px 12px; border: var(--u) solid #202020; border-radius: 0;
  box-shadow: inset 0 0 0 var(--u) #a0a0a0, inset 0 0 0 calc(2 * var(--u)) #202020;
  background: #f8f8f8; color: #202020; font: 12px/1 var(--font-pixel, 'Press Start 2P', monospace);
}
body.page:has(.bp) .back-btn kbd, .frame:has(.bp) .back-btn kbd { font-size: 10px; border-color: #202020; }
@media (max-width: 759.98px) {
  body.page:has(.bp) .back-btn, .frame:has(.bp) .back-btn { --u: 2px; font-size: 8px; }
}

/* ---------- Transición entrelazada (createInterlace en src/scenes/blog.js) ---------- */

.gb-bands { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.gb-band {
  position: absolute; inset: 0; visibility: hidden;
  background-image: repeating-linear-gradient(to bottom, #000 0 var(--band), transparent var(--band) calc(2 * var(--band)));
}
.gb-band--odd { background-position: 0 var(--band); }

@media (prefers-reduced-motion: reduce) {
  .bp .end-menu__cursor { animation: none !important; }
}