/* Fuentes propias del plugin. Licencia OFL, ficheros en assets/fonts/. */
@font-face {
    font-family: "Cinzel";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/cinzel-latin.woff2") format("woff2");
}

@font-face {
    font-family: "EB Garamond";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/eb-garamond-latin.woff2") format("woff2");
}

@font-face {
    font-family: "EB Garamond";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/eb-garamond-latin-italic.woff2") format("woff2");
}

:root {
    --ink-font-display: "Cinzel", "Palatino Linotype", Georgia, serif;
    --ink-font-body: "EB Garamond", Georgia, "Times New Roman", serif;
    --ink-bg: #050505;
    --ink-black: #070707;
    --ink-panel: #0d0a09;
    --ink-panel-soft: #15100e;
    --ink-red: #9b1c18;
    --ink-red-hot: #d6421e;
    --ink-parchment: #d8c7a3;
    --ink-bone: #eee3cc;
    --ink-muted: #998b73;
    --ink-blue: #193557;
    --ink-gold: #b28a43;
    --ink-line: rgba(216, 199, 163, 0.26);
}

body.inkietud-canvas-page {
    margin: 0;
    background: var(--ink-bg);
}

body.inkietud-canvas-page .inkietud-canvas-content {
    margin: 0;
    padding: 0;
}

body.inkietud-canvas-page .ink-page {
    left: auto;
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.ink-page {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    overflow-x: hidden;
    background: var(--ink-bg);
    color: var(--ink-bone);
    font-family: var(--ink-font-body);
    line-height: 1.55;
}

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

/* Grano de película sobre toda la página, para unificar las piezas. */
.ink-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    background-image: var(--ink-grain);
    background-repeat: repeat;
    background-size: 280px 280px;
    opacity: 0.5;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.ink-page a {
    color: inherit;
    text-decoration: none;
}

.ink-page p {
    text-wrap: pretty;
}

.ink-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

/* Igual que el ancho de lectura de .ink-article: a línea completa un
   formulario se vuelve tan difícil de seguir como un párrafo. */
.ink-shell--narrow {
    width: min(720px, calc(100% - 48px));
}

.ink-center {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

/* ============ TIPOGRAFÍA ============ */

.ink-kicker {
    margin: 0;
    color: var(--ink-gold);
    font-family: var(--ink-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ink-h2 {
    margin: 0;
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: 2.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.08;
    text-transform: uppercase;
    text-shadow: 0 5px 0 rgba(0, 0, 0, 0.88);
}

.ink-h3 {
    margin: 0;
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* "a.ink-link", mismo motivo que a.ink-notice__more más abajo: .ink-page a
   gana por especificidad a una sola clase. Aquí no se notaba porque el
   color heredado (--ink-bone) también se lee bien, pero nunca fue el
   --ink-gold que pedía la regla (encontrado y corregido 2026-08-21). */
a.ink-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-gold);
    font-family: var(--ink-font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ink-link::after {
    content: "→";
    transition: transform 0.2s ease;
}

.ink-link:hover::after {
    transform: translateX(4px);
}

/* Un enlace de vuelta apunta al revés, pero el componente siempre pinta su
   flecha a la derecha. Escribir "←" dentro del texto no lo arregla: sale
   "← Volver al Archivo →", con las dos flechas peleándose. Estaba así en las
   tres fichas desde que existen; visto y corregido el 2026-08-26 al montar el
   pase de capítulo del libro del Lore. La flecha la pone el componente, nunca
   el texto. */
.ink-link--back::after { content: none; }

.ink-link--back::before {
    content: "←";
    transition: transform 0.2s ease;
}

.ink-link--back:hover::before { transform: translateX(-4px); }

/* ============ HERO ============ */

.ink-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: min(100svh, 940px);
    overflow: hidden;
    background: var(--ink-bg);
}

.ink-hero__sky,
.ink-hero__city,
.ink-hero__figure {
    position: absolute;
    background-repeat: no-repeat;
}

.ink-hero__sky {
    inset: -4% -2%;
    background-image: var(--ink-hero-sky);
    background-position: center top;
    background-size: cover;
}

.ink-hero__city {
    inset: 0;
    background-image: var(--ink-hero-city);
    background-position: center bottom;
    background-size: cover;
}

.ink-hero__figure {
    right: 4%;
    bottom: 0;
    width: min(30vw, 430px);
    height: 86%;
    background-image: var(--ink-hero-figure);
    background-position: right bottom;
    background-size: contain;
}

.ink-hero__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 58% 46% at 46% 48%, transparent 0%, rgba(3, 2, 2, 0.58) 82%),
        linear-gradient(180deg, rgba(3, 2, 2, 0.6) 0%, transparent 26%, transparent 48%, var(--ink-bg) 100%);
}

.ink-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ink-embers span {
    position: absolute;
    bottom: 90px;
    left: var(--ink-x);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ink-red-hot);
    opacity: 0;
    animation: ink-rise 9s linear infinite;
    animation-delay: var(--ink-delay);
}

@keyframes ink-rise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    14% { opacity: var(--ink-ember-peak, 0.8); }
    100% { transform: translateY(-380px) scale(0.3); opacity: 0; }
}

/* Versión tenue para reutilizar las brasas fuera del hero, como hilo de
   atmósfera entre secciones sin competir con el contenido. */
.ink-embers--faint { --ink-ember-peak: 0.4; }

.ink-banner {
    position: absolute;
    top: -6px;
    right: 52px;
    z-index: 4;
    width: 86px;
    height: 196px;
    background-image: var(--ink-banner);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7));
}

/* Variante espejada para flanquear el hero por los dos lados, como en el
   mockup del hub — reutiliza el mismo banner-standard.webp de la home. */
.ink-banner--left {
    right: auto;
    left: 52px;
    transform: scaleX(-1);
}

.ink-nav {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 26px;
}

.ink-nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 30px;
    justify-content: flex-end;
}

/* El estandarte de los heroes con escena (portada y hub) se ancla al borde del
   viewport — right: 52px — y no al .ink-shell, así que por debajo de ~1456px se
   mete por dentro del ancho de la barra y el último enlace acaba pisando la
   filigrana. Se vio en la portada al pasarla a la barra común (2026-08-26),
   pero ya pasaba en el hub. Se reserva su hueco en vez de mover el estandarte,
   que está donde tiene que estar.

   El cálculo es el hueco que le falta a la barra para llegar al canto interior
   del estandarte (86px de ancho + 52px de margen = 138px desde el borde),
   descontando lo que ya aporta el margen del .ink-shell. max() lo apaga solo en
   cuanto la pantalla es lo bastante ancha. Los heroes de página no llevan
   estandarte, así que quedan fuera. */
.ink-hero:not(.ink-hero--page) .ink-nav__links {
    padding-right: max(0px, calc(138px - (100vw - min(1180px, 100vw - 48px)) / 2));
}

/* Lo mismo del lado izquierdo, pero solo en el hub: es el único hero que
   monta el estandarte espejado, y ahí la brújula quedaba clavada encima de
   él. La portada solo lleva el de la derecha. */
.ink-hero--hub .ink-nav__brand {
    padding-left: max(0px, calc(138px - (100vw - min(1180px, 100vw - 48px)) / 2));
}

.ink-nav__links a {
    padding-bottom: 6px;
    color: rgba(238, 227, 204, 0.8);
    font-family: var(--ink-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ink-nav__links a:hover {
    color: var(--ink-bone);
}

.ink-nav__links a.is-active {
    color: var(--ink-bone);
    border-bottom: 2px solid var(--ink-red-hot);
}

.ink-compass {
    flex: none;
    width: 76px;
    height: 76px;
    background-image: var(--ink-emblem);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
    transition: transform 0.4s ease;
}

.ink-compass:hover {
    transform: rotate(22deg);
}

/* Sesión junto al emblema (templates/partials/session.php). Comparte familia
   y caja con .ink-nav__links pero un punto más pequeña y sin subrayado de
   activo: es una utilidad de cuenta, no una sección del sitio, y no debe
   competir con Comunicados/Archivo/Herramientas. */
.ink-nav__brand {
    display: flex;
    flex: none;
    align-items: center;
    gap: 20px;
}

.ink-session {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    font-family: var(--ink-font-display);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Separador entre nombre y acciones. El punto medio ya es el separador de la
   casa — el mismo de los kickers ("Comunidad · Archivo") — y aquí además
   despega el nombre, que no es un enlace, de los dos que sí lo son. */
.ink-session > * + *::before {
    content: "·";
    margin-right: 10px;
    color: rgba(216, 199, 163, 0.38);
}

.ink-session a {
    color: rgba(216, 199, 163, 0.72);
}

.ink-session a:hover {
    color: var(--ink-bone);
}

.ink-session__user {
    color: var(--ink-gold);
}

/* Aviso bajo el botón de una herramienta externa: decir a dónde lleva antes
   de pulsar es lo mínimo cuando el destino no es nuestro. */
.ink-external-note {
    margin-top: 10px;
    color: rgba(238, 227, 204, 0.55);
    font-size: 0.82rem;
}

/* Atajo para publicar, bajo los filtros de cada archivo. Discreto a
   propósito: solo lo ve quien puede publicar ese tipo, así que no tiene que
   pelearse por atención con el contenido de la página. */
.ink-publish-note {
    margin-top: 20px;
    text-align: center;
}

/* Hero de ficha. La diferencia con la de sección no es decorativa: ahí el
   título son una o dos palabras ("Archivo") y aquí es el de la pieza, que
   puede tener siete. A la escala de .ink-h2 un título así ocupaba 1111 px de
   los 1200 de la caja en una sola línea y quedaba pegado al kicker, sin aire
   entre los dos (medido el 2026-08-25). Se baja la escala y se limita el
   ancho para que parta en dos líneas antes de llegar al borde. */
.ink-hero--piece .ink-h2 {
    max-width: 24ch;
    margin-inline: auto;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.ink-hero--piece .ink-kicker {
    margin-bottom: 12px;
}

.ink-hero__inner {
    position: relative;
    z-index: 4;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0 120px;
    text-align: center;
}

.ink-title {
    margin: 22px 0 0;
    line-height: 0;
}

.ink-title img {
    width: min(760px, 84vw);
    height: auto;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.9));
}

.ink-hero__subtitle {
    margin: 24px 0 0;
    color: var(--ink-parchment);
    font-size: 1.5rem;
}

.ink-chant {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 12px 0 0;
    color: var(--ink-red-hot);
    font-size: 1.1rem;
}

.ink-chant__arrow {
    position: relative;
    width: 54px;
    height: 1px;
    background: rgba(214, 66, 30, 0.75);
}

.ink-chant__arrow::before {
    content: "";
    position: absolute;
    top: -4px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.ink-chant__arrow--left::before {
    left: 0;
    border-right: 7px solid rgba(214, 66, 30, 0.9);
}

.ink-chant__arrow--right::before {
    right: 0;
    border-left: 7px solid rgba(214, 66, 30, 0.9);
}

.ink-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    justify-content: center;
    margin-top: 46px;
}

/* ============ TABLILLAS ============ */

/* "a.ink-slab, button.ink-slab": el tipo "a" es el mismo motivo que
   a.ink-link/a.ink-notice__more — sin él perdía por especificidad frente a
   .ink-page a (2026-08-21). "button" se añadió después (2026-08-25, formulario
   de publicación): un <button> nunca tuvo ese problema porque .ink-page a
   solo afecta a enlaces, pero sin esta regla tampoco recibía ningún estilo
   propio — quedaba con el botón gris por defecto del navegador. */
a.ink-slab,
button.ink-slab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    padding: 17px 34px;
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.16s ease, filter 0.16s ease;
}

/* Un <button> trae cromado nativo del sistema (fondo gris, borde biselado)
   que un <a> nunca tuvo — sin este reset se queda por encima del
   pseudoelemento de relleno, que es de donde sale el color real (ver el
   comentario de abajo). appearance:none es lo que lo desactiva. */
button.ink-slab {
    appearance: none;
    background: transparent;
    border: none;
    font: inherit;
}

/* El relleno vive DENTRO del marco, nunca hasta el borde de la caja: el asset
   conserva un halo transparente y cualquier relleno a sangre asomaría por fuera. */
.ink-slab::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px 6px;
    clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

.ink-slab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-width: 11px 20px;
    border-style: solid;
    border-color: transparent;
    border-image: var(--ink-frame-button) 32 80 round;
    pointer-events: none;
}

.ink-slab:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.ink-slab--primary::before {
    background: linear-gradient(180deg, #b8241d 0%, var(--ink-red) 50%, #66110f 100%);
    box-shadow: inset 0 2px rgba(255, 255, 255, 0.18), inset 0 -8px 16px rgba(0, 0, 0, 0.3);
}

.ink-slab--ghost::before {
    background: linear-gradient(180deg, rgba(22, 18, 16, 0.92), rgba(7, 6, 5, 0.96));
    box-shadow: inset 0 2px rgba(255, 255, 255, 0.06);
}

.ink-slab {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7));
}

.ink-slab--small {
    min-width: 0;
    padding: 13px 26px;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
}

.ink-slab--small::after {
    border-width: 9px 16px;
}

/* ============ SECCIONES ============ */

/* Nace y muere en transparente sobre --ink-bg: ningún negro de sección
   propio, solo un pozo de luz detrás de las tarjetas para que no sea un
   vacío plano. */
.ink-section {
    position: relative;
    padding: 104px 0;
    background: radial-gradient(ellipse 56% 48% at 50% 62%, rgba(178, 138, 67, 0.09), transparent 72%);
}

.ink-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.ink-divider {
    display: block;
    width: min(460px, 92%);
    height: 62px;
    margin-top: 4px;
    background-image: var(--ink-divider);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ink-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

/* ---- Marco ---- */

/* Marco ornamental por border-image de 9 sectores: las esquinas no se deforman
   y los tramos rectos se repiten, así el mismo asset vale para cualquier caja. */
.ink-frame {
    position: relative;
    isolation: isolate;
    border: 30px solid transparent;
    border-image: var(--ink-frame-ornate) 160 round;
}

/* Sin panel de relleno. Un rectángulo detrás de un marco ornamental siempre
   acaba dibujándose: asoma por las esquinas, o su silueta contamina el
   drop-shadow. La tarjeta es el marco sobre el fondo de página, como el mockup. */

/* El resplandor se aplica a una copia del marco, no a la tarjeta: un drop-shadow
   sobre la tarjeta entera recoge también la silueta de la imagen interior y esa
   se filtra por los huecos del ornamento como un rectángulo rojo. */
.ink-frame--red::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -30px;
    border: 30px solid transparent;
    border-image: var(--ink-frame-ornate) 160 round;
    filter: drop-shadow(0 0 16px rgba(155, 28, 24, 0.85)) drop-shadow(0 0 5px rgba(214, 66, 30, 0.5));
    pointer-events: none;
}

/* ---- Lore ---- */

.ink-lore {
    position: relative;
    z-index: 5;
    margin-top: -90px;
    padding-bottom: 40px;
    /* Evita que el margin-top de .ink-lore__seam colapse con este
       margin-top negativo (position:relative no lo impide por sí solo);
       sin esto el solape del pergamino sobre el hero se anularía. */
    display: flow-root;
}

/* Puente entre el negro plano de después del hero y el pergamino: sin esto
   el pergamino parece flotar en un vacío. Se extiende por encima (hacia el
   hero) y por debajo (hacia Juegos Activos) para que ningún corte sea seco. */
.ink-lore::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -260px 0 -160px;
    background: radial-gradient(ellipse 62% 60% at 50% 42%, rgba(214, 66, 30, 0.13), transparent 72%);
    pointer-events: none;
}

/* .ink-lore sube 90px sobre el hero (margin-top: -90px); este margin-top
   positivo cancela justo eso, así la línea cae en la costura real entre el
   hero y el pergamino en vez de quedar 90px más arriba o más abajo. */
.ink-lore__seam {
    margin-top: 90px;
    margin-bottom: 50px;
}

.ink-parchment {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 62px 76px;
    color: #241811;
    background-image: var(--ink-lore-banner);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.8));
}

/* El retrato va impreso EN el pergamino, no pegado encima. El asset trae
   alfa real y bordes ya deshilachados (salpicaduras de tinta, veladura),
   así que el alfa hace el recorte y solo hace falta multiply para que la
   figura se funda con la textura del pergamino que hay debajo. */
.ink-parchment__art {
    flex: none;
    width: 268px;
    aspect-ratio: 3 / 4;
    background-image: var(--ink-lore-portrait);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    mix-blend-mode: multiply;
}

.ink-parchment__book {
    flex: none;
    align-self: center;
    width: 190px;
    height: 240px;
    background-image: var(--ink-lore-book);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ink-parchment__copy {
    /* Sin esto, el flex-item no se encoge por debajo del ancho de su
       contenido y empuja al libro fuera de la tarjeta en anchos intermedios
       (por debajo de escritorio completo, por encima del punto de apilado). */
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.ink-parchment .ink-kicker {
    color: #6d4a1e;
}

.ink-parchment .ink-h2 {
    color: #16100c;
    font-size: 2rem;
    text-shadow: none;
}

.ink-parchment p {
    margin: 0;
    color: #2c1d13;
    font-size: 1.05rem;
}

.ink-parchment .ink-link {
    color: #6d4a1e;
}

/* ---- Tarjetas de juego ---- */

.ink-card {
    display: flex;
    flex-direction: column;
}

.ink-card__art {
    height: 280px;
    margin: 8px 8px 0;
    background-position: center;
    background-size: cover;
}

/* La ilustración de la tarjeta la pone cada juego desde su ficha, en una
   variable inline. Hasta el 2026-08-31 esto era .ink-card__art--warera con el
   asset de WarEra cableado: un segundo juego habría necesitado su propia clase
   en esta hoja, o sea tocar CSS para añadir contenido. */
.ink-card__art--imagen {
    background-image: var(--ink-card-art);
}

.ink-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
}

.ink-card p {
    margin: 0;
    color: rgba(238, 227, 204, 0.72);
    font-size: 1rem;
}

.ink-card--locked {
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 470px;
    padding: 30px;
    text-align: center;
}

.ink-badge {
    display: inline-flex;
    padding: 6px 13px;
    color: var(--ink-bone);
    background: var(--ink-red);
    box-shadow: inset 0 0 0 1px rgba(216, 199, 163, 0.4);
    font-family: var(--ink-font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ink-lock {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: inset 0 0 0 1px rgba(178, 138, 67, 0.7);
}

.ink-lock b {
    width: 21px;
    height: 16px;
    margin-top: 5px;
    border: 1px solid var(--ink-gold);
    background: rgba(178, 138, 67, 0.16);
}

.ink-lock i {
    position: absolute;
    top: 18px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--ink-gold);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
}

/* ---- WarEra ---- */

/* Sin color de fondo propio ni bordes: solo tintes que nacen y mueren en
   transparente, para que no haya escalón contra el fondo de página. */
.ink-section--warera {
    background:
        radial-gradient(ellipse 46% 66% at 0% 50%, rgba(155, 28, 24, 0.22), transparent 70%),
        radial-gradient(ellipse 46% 66% at 100% 50%, rgba(25, 53, 87, 0.24), transparent 70%);
}

.ink-sigil-bg {
    position: absolute;
    top: 50%;
    width: 96px;
    height: 380px;
    background-image: var(--ink-ornament-side);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.55;
    transform: translateY(-50%);
}

.ink-sigil-bg--left { left: 28px; }
.ink-sigil-bg--right { right: 28px; transform: translateY(-50%) scaleX(-1); }

.ink-warera__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
}

.ink-warera__head > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ink-warera__tagline {
    margin: 0;
    color: var(--ink-red-hot);
    font-family: var(--ink-font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ink-warera__head .ink-h2 {
    max-width: 560px;
}

.ink-warera__head > p {
    max-width: 330px;
    margin: 0;
    color: rgba(238, 227, 204, 0.72);
}

.ink-plate-card {
    display: flex;
    flex-direction: column;
}

.ink-plate-card__art {
    position: relative;
    overflow: hidden;
    height: 200px;
    margin: 8px 8px 0;
    /* Reserva mientras la portada carga: el negro puro deja un agujero con
       pinta de tarjeta rota, y estas imágenes viajan lentas en local. */
    background-color: #17100c;
    background-image: var(--ink-plate-image);
    background-position: center;
    background-size: cover;
}

/* Cada imagen trae una vela pintada; este resplandor la refuerza en vez de
   competir con ella, así que se posa arriba-centro donde suele estar la llama. */
.ink-plate-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 40% 55% at 50% 20%, rgba(214, 66, 30, 0.4), transparent 72%);
    mix-blend-mode: screen;
    opacity: 0.55;
    pointer-events: none;
}

.ink-plate-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: -32px;
    padding: 24px;
    text-align: center;
}

.ink-plate-card p {
    margin: 0;
    color: rgba(238, 227, 204, 0.72);
    font-size: 1rem;
}

.ink-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 32px;
    position: relative;
    isolation: isolate;
    color: #1b120c;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.62));
    font-family: var(--ink-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-width: 15px 24px;
    border-style: solid;
    border-color: transparent;
    border-image: var(--ink-frame-plate) 53 90 round;
}

.ink-plate::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* inset se mide desde la caja de relleno, ya dentro del borde: en negativo
       el relleno se desliza bajo la banda del marco y no deja junta. */
    inset: -6px -18px;
    background:
        linear-gradient(180deg, rgba(240, 228, 200, 0.72), rgba(197, 173, 130, 0.76)),
        var(--ink-parchment-texture) center / cover,
        linear-gradient(180deg, #e6d7b4 0%, var(--ink-parchment) 55%, #a9926c 100%);
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

/* ---- Archivo ---- */

.ink-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: center;
    margin-top: 34px;
}

.ink-tabs a {
    padding: 7px 14px;
    color: rgba(216, 199, 163, 0.7);
    font-family: var(--ink-font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ink-tabs a.is-active {
    color: var(--ink-bone);
    background: rgba(155, 28, 24, 0.85);
    box-shadow: inset 0 0 0 1px rgba(216, 199, 163, 0.35);
}

.ink-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* El marco sobresale 10px por lado (ver .ink-gallery__pieza::before), así
       que el hueco visible entre dos piezas es este menos 20px. Con el gap de
       20px de antes los marcos contiguos se tocaban y la fila se leía como una
       sola tira. */
    gap: 46px;
    margin-top: 34px;
}

/* La imagen va en el elemento y el marco en el pseudoelemento superpuesto,
   nunca al revés: un hijo con z-index negativo se pinta ENCIMA del borde de
   su padre, no debajo. Así estaba esta galería hasta el 2026-08-31 —
   `span::before` con z-index:-1 tapaba los laterales del marco y solo dejaba
   asomar las esquinas. Es el mismo fallo que ya se corrigió en
   .ink-single-cover; ver .context/brand/design-system.md. */
.ink-gallery__pieza {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background-image: var(--ink-cover);
    background-position: center;
    background-size: cover;
    filter: brightness(0.82) saturate(0.85);
    transition: transform 0.25s ease, filter 0.4s ease;
}

.ink-gallery__pieza:hover,
.ink-gallery__pieza:focus-visible {
    transform: translateY(-4px);
    filter: brightness(1.05) saturate(1.05);
}

.ink-gallery__pieza::before {
    content: "";
    position: absolute;
    inset: -10px;
    border: 18px solid transparent;
    border-image: var(--ink-frame-ornate) 160 round;
    pointer-events: none;
}

/* El título es HTML, no está horneado en la imagen: cambia con la pieza y se
   puede leer, seleccionar y traducir.

   Aparece al pasar el ratón (owner, 2026-08-31): en reposo manda la
   ilustración, y al apuntar una pieza se lee de qué es. El velo es opaco de
   verdad, no un degradado suave, porque el título tiene que sostenerse sobre
   cualquier portada que suba quien publica — incluidas las claras. */
.ink-gallery__titulo {
    position: absolute;
    inset: auto 0 0;
    padding: 34px 14px 14px;
    background: linear-gradient(to top, rgba(8, 5, 4, 0.96) 38%, rgba(8, 5, 4, 0.72) 68%, transparent);
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: 0.88rem;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.ink-gallery__pieza:hover .ink-gallery__titulo,
.ink-gallery__pieza:focus-visible .ink-gallery__titulo {
    opacity: 1;
    transform: translateY(0);
}

/* Sin ratón no hay hover: en móvil y tableta el título se queda puesto, o la
   pieza sería una imagen sin nombre y sin manera de averiguarlo. Misma razón
   para prefers-reduced-motion: quien pide menos movimiento no debería tener
   que provocar una animación para leer un título. */
@media (hover: none) {
    .ink-gallery__titulo {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ink-gallery__titulo {
        transition: none;
    }
}

/* ---- Comunidad ---- */

.ink-community {
    position: relative;
    padding: 118px 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ink-bg) 0%, rgba(9, 18, 31, 0.9) 24%, rgba(16, 32, 53, 0.92) 55%, var(--ink-bg) 100%);
}

.ink-community__scene {
    position: absolute;
    inset: auto 0 0;
    height: 62%;
    background-image: var(--ink-community-banner);
    background-position: center bottom;
    background-size: cover;
    opacity: 0.72;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 34%);
    mask-image: linear-gradient(180deg, transparent, #000 34%);
}

.ink-community__panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.ink-community__lead {
    margin: 0;
    color: rgba(238, 227, 204, 0.78);
    font-size: 1.15rem;
}

.ink-community .ink-h2 {
    max-width: 780px;
}

.ink-community__links {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    justify-content: center;
    margin-top: 22px;
}

.ink-community__links a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-gold);
    font-family: var(--ink-font-display);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ink-clink {
    width: 34px;
    height: 34px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}

.ink-clink--discord { background-image: var(--ink-icon-discord); }
.ink-clink--rules { background-image: var(--ink-icon-rules); }

/* ---- Footer ---- */

.ink-footer {
    padding: 66px 0 54px;
    background: var(--ink-bg);
}

/* Línea fina en vez del ornamento pesado: ese ya aparece tres veces en la
   página y aquí repetirlo cansaba. Se reutiliza en cualquier costura entre
   secciones que necesite marcarse (ver .ink-lore__seam). */
.ink-seam {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ink-line) 12%, rgba(178, 138, 67, 0.6) 50%, var(--ink-line) 88%, transparent);
}

/* A todo el ancho y pegada al borde superior del footer, justo en la
   costura con Comunidad — el margin-top negativo cancela el padding del
   footer para que quede en la propia intersección en vez de flotar dentro
   del bloque. */
.ink-footer__divider {
    margin-top: -66px;
    margin-bottom: 66px;
}

.ink-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 42px;
}

.ink-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ink-footer__brand strong {
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ink-footer__brand p {
    margin: 0;
    color: rgba(238, 227, 204, 0.6);
}

.ink-sigil {
    width: 74px;
    height: 74px;
    background-image: var(--ink-emblem);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.ink-footer h3 {
    margin: 0 0 14px;
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ink-footer a {
    display: block;
    margin-bottom: 7px;
    color: rgba(238, 227, 204, 0.62);
}

.ink-footer a:hover {
    color: var(--ink-bone);
}

.ink-footer blockquote {
    margin: 0;
    padding: 18px 22px;
    border-left: 1px solid rgba(178, 138, 67, 0.45);
    background: rgba(216, 199, 163, 0.03);
    color: rgba(238, 227, 204, 0.76);
    font-size: 1.05rem;
    font-style: italic;
}

.ink-footer cite {
    display: block;
    margin-top: 10px;
    color: var(--ink-gold);
    font-size: 0.8rem;
    font-style: normal;
}

/* ---- Hub de juego ---- */

/* Mismo tinte rojo/azul que .ink-section--warera, ahora sobre la foto de
   --ink-hub-hero en vez de sobre negro plano. El degradado intermedio hace de
   .ink-hero__veil: sin él el título pierde contraste contra la imagen. */
.ink-hero--hub {
    justify-content: center;
    min-height: min(72svh, 640px);
    background-image:
        radial-gradient(ellipse 46% 66% at 0% 50%, rgba(155, 28, 24, 0.28), transparent 70%),
        radial-gradient(ellipse 46% 66% at 100% 50%, rgba(25, 53, 87, 0.3), transparent 70%),
        linear-gradient(180deg, rgba(3, 2, 2, 0.5) 0%, rgba(3, 2, 2, 0.2) 42%, var(--ink-bg) 100%),
        var(--ink-hub-hero, none);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center, center, center, center top;
    background-size: auto, auto, auto, cover;
}

.ink-h1-hub {
    margin: 22px 0 0;
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: clamp(3rem, 7vw, 5.4rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 8px 0 rgba(0, 0, 0, 0.88);
}

.ink-empty-note {
    margin: 48px 0 0;
    color: rgba(238, 227, 204, 0.55);
    font-size: 0.95rem;
    text-align: center;
}

/* ---- Páginas globales (archivo/single de Archivo, Herramientas,
   Comunicados) ---- */

/* Cabecera sin hero: la usan los single (artículo, herramienta, comunicado
   sueltos), donde el nav vive sobre negro plano con una costura fina debajo
   en vez de sobre .ink-hero. Los archivos de las 3 páginas globales ya no la
   usan — llevan .ink-hero--page, ver más abajo. */
.ink-page-top {
    position: relative;
    padding-top: 26px;
    background: var(--ink-bg);
}

.ink-page-top .ink-seam {
    margin-top: 24px;
}

/* Hero reducida para los 3 archivos globales (Comunicados, Archivo,
   Herramientas): mismo anatomy que .ink-hero--hub, pero estas páginas son
   transversales a todos los juegos, así que llevan una imagen ambiental
   neutra (--ink-page-hero) en vez de la escena de un hub concreto, y su
   título reutiliza .ink-h2 tal cual — no hace falta una escala propia.
   Cierra con .ink-divider además del fundido: las dos piezas hacen trabajos
   distintos, el divisor marca el límite y el fundido evita que la imagen
   termine en un corte recto (owner, 2026-08-25 — comparado directamente
   contra .ink-hero--hub, donde la imagen se apaga en vez de cortarse).
   Lo que sí sigue sin hacer falta es la franja de aire vacío que había
   antes del divisor: esa era la "franja muerta" que se corrigió el
   2026-08-20, y es un problema de padding, no del degradado en sí — un
   degradado pegado a la propia imagen no genera espacio, solo la funde.
   Mientras no exista --ink-page-hero, la hero queda en negro plano con el
   título y el divisor encima, sin quedar vacía.
   El fundido de abajo (línea 1173) no oscurecía nada por encima del 55% de
   la altura, así que el nav —que vive en el primer tramo— quedaba con el
   brillo real de la imagen tal cual; con velas o lámparas encendidas cerca
   del borde (Herramientas) los enlaces se leían mal (owner, 2026-08-25).
   Oscurecido todo el tramo superior, más fuerte cerca del nav y aflojando
   hacia el título — mismo principio que .ink-hero--hub, que oscurece desde
   el 0%, no solo el tramo final. */
.ink-hero--page {
    justify-content: center;
    min-height: min(30svh, 300px);
    background-image:
        radial-gradient(ellipse 60% 70% at 50% 15%, rgba(178, 138, 67, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(3, 2, 2, 0.6) 0%, rgba(3, 2, 2, 0.3) 30%, rgba(3, 2, 2, 0.15) 55%, var(--ink-bg) 100%),
        var(--ink-page-hero, none);
    background-repeat: no-repeat, no-repeat, no-repeat;
    /* "center bottom" en la imagen, no "center top": las tres heroes de
       Prioridad 8 dejan el tercio superior a propósito oscuro y vacío para
       el título (ver asset-prompts.md). Con background-size:cover, anclar
       arriba recorta desde abajo — en viewports anchos el recorte entero se
       queda dentro de esa zona vacía y la escena real (el tercio de abajo)
       no llega a verse nunca. Anclar abajo recorta primero la zona vacía,
       que es la que sobra (encontrado 2026-08-25, viewport ancho real). */
    background-position: center, center, center bottom;
    background-size: auto, auto, cover;
}

.ink-hero--page .ink-hero__inner {
    padding: 48px 0 40px;
}

/* ============ FONDO DE SECCIÓN ============
   Decisión del owner del 2026-08-20, tras rechazar dos intentos seguidos de
   dar cuerpo material a las secciones: primero las losas físicas (muralla de
   piedra + cantos esculpidos de 1024×240), después la banda de tapiz (suelo
   elevado + tela tileable + canto rasgado). Las dos saturaban.

   El modelo definitivo es el de la landing, que llevaba desde el principio
   funcionando y no se había cuestionado: **un solo negro en toda la página**,
   y la identidad de sección la ponen el resplandor y el ornamento, nunca un
   material de fondo. Es decir, no hay clase de "cuerpo de sección"; solo
   .ink-section con su tinte, .ink-section--warera para el tinte rojo/azul, y
   .ink-sigil-bg a los lados.

   Historial de por qué, para no volver a intentarlo una tercera vez:
   cualquier material que se pueda *nombrar* —ladrillo, tablón, tela— deja de
   ser atmósfera y pasa a competir con las tarjetas. La corrección que
   design-system.md registró el 2026-08-17 contra "un solo negro" queda a su
   vez revertida: era correcta como diagnóstico del corte entre losas, pero
   partía de que las secciones necesitaban cuerpo, y esa premisa es la que
   resultó falsa. Sin cuerpo no hay corte que arreglar. */

/* Portada grande de un single de Archivo/Herramientas: mismo marco
   ornamental que las tarjetas, a escala de página. */
/* Portada de una ficha, dentro de su marco ornamentado.
   El reparto de capas es al reves de lo que parece natural, y hay que
   respetarlo: la IMAGEN va como fondo del propio elemento y el MARCO va en el
   pseudoelemento. Al reves no funciona, aunque se hizo asi primero
   (2026-08-25): un hijo con z-index negativo NO se pinta por debajo del borde
   de su padre. En el orden de pintado de un contexto de apilamiento, fondo y
   borde del padre van primero y los hijos con z-index negativo justo despues
   — o sea, ENCIMA. Con la imagen en el ::before, el border-image quedaba
   tapado y del ornamento solo asomaba la franja exterior que la imagen no
   alcanzaba. Ningun hijo puede meterse bajo el borde de su padre; por eso el
   marco tiene que ser el hijo, y no al reves.

   Tampoco vale poner las dos cosas en el elemento: con background-clip por
   defecto (border-box) la imagen se pinta bajo los 30px de borde entero y
   asoma por los huecos transparentes del ornamento, sobre todo en las
   esquinas. Y recortarla a padding-box deja el ornamento flotando sin nada
   detras.

   Los insets del marco no son a ojo: se midio el canal alfa del asset
   (900x902). En el sector superior de 160px el oro ocupa las filas 13-88; con
   un borde de 30px eso son 2,4-16,5px desde el canto exterior, o sea que el
   oro empieza a 13,5px del canto interior. Sacando el marco 12px por fuera de
   la imagen, el oro monta 4,5px sobre ella: cubre el canto sin dejar banda
   oscura y sin llegar al borde donde el ornamento se vuelve transparente. A
   los lados el oro visible es mas estrecho (los remates son filigrana, no
   barra maciza), asi que el marco sale solo 8px y monta mas. Los margenes
   laterales del elemento devuelven esos 8px para que el marco siga cuadrando
   con el ancho de .ink-shell. Si cambia el asset o el grosor del borde, hay
   que rehacer la medida, no tantear. */
.ink-single-cover {
    position: relative;
    height: min(46vw, 420px);
    margin: 52px 8px 0;
    background-image: var(--ink-cover);
    background-position: center;
    background-size: cover;
}

.ink-single-cover::before {
    content: "";
    position: absolute;
    inset: -12px -8px;
    border: 30px solid transparent;
    border-image: var(--ink-frame-ornate) 160 round;
}

/* Tipografía de lectura para el cuerpo de un single (the_content()). Ancho
   de línea propio, más estrecho que .ink-shell, porque a línea completa el
   cuerpo se vuelve difícil de seguir. */
.ink-article {
    max-width: 720px;
    margin: 40px auto 0;
    color: rgba(238, 227, 204, 0.86);
    font-size: 1.08rem;
    line-height: 1.75;
}

.ink-article > *:first-child { margin-top: 0; }

.ink-article h2,
.ink-article h3 {
    margin: 1.6em 0 0.6em;
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    letter-spacing: 0.03em;
}

.ink-article h2 { font-size: 1.6rem; }
.ink-article h3 { font-size: 1.3rem; }

.ink-article p { margin: 0 0 1.2em; }

.ink-article a {
    color: var(--ink-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ink-article blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 22px;
    border-left: 1px solid rgba(178, 138, 67, 0.45);
    color: rgba(238, 227, 204, 0.75);
    font-style: italic;
}

.ink-article ul,
.ink-article ol {
    margin: 0 0 1.2em;
    padding-left: 1.3em;
}

.ink-article img {
    max-width: 100%;
    height: auto;
}

/* Paginación de los 3 archivos globales, misma paleta que .ink-tabs. */
.ink-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
}

.ink-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    color: rgba(216, 199, 163, 0.7);
    font-family: var(--ink-font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.ink-pagination a.page-numbers:hover {
    color: var(--ink-bone);
}

.ink-pagination .page-numbers.current {
    color: var(--ink-bone);
    background: rgba(155, 28, 24, 0.85);
    box-shadow: inset 0 0 0 1px rgba(216, 199, 163, 0.35);
}

/* El Archivo es un panel enmarcado sobre el negro de página, no una ventana
   de castillo con una estancia detrás. La ventana cayó con el resto del
   sistema de losas: era el mayor foco de ladrillo de la web y, si sobrevivía
   sola, quedaba como el único material literal del sitio.
   Sin relleno rectangular propio — el contorno de frame-ornate tiene
   entrantes transparentes en las esquinas y cualquier inset asoma por un
   lado (ver Reglas De Implementación). El interior es el fondo de página. */
/* Sin marco exterior propio — con las tarjetas ya enmarcadas dentro, el
   marco del panel leía como dos marcos repetidos anidados (owner,
   2026-08-20). El panel es solo agrupación, respira sobre el fondo de
   sección igual que hacen ya las tarjetas sueltas. */
.ink-archivo-panel {
    position: relative;
    margin-top: 44px;
}

.ink-archivo-panel .ink-tabs { margin-top: 0; }
.ink-archivo-panel .ink-archivo-grid { margin-top: 40px; }

/* Herramientas tuvo un suelo de taller/arsenal propio (imagen + isolation
   para un ::before superpuesto); retirado el 2026-08-20 junto con el resto
   de fondos materiales de sección — ver "Fondo De Sección" más arriba. La
   sección ya no necesita nada propio: hereda el tinte de .ink-section--warera
   y el position:relative de .ink-section, sin reglas propias que mantener. */

/* Filigrana lateral, misma pieza y mismo patrón que Herramientas (spans a
   nivel de sección, no del shell — dentro del shell se sale del viewport en
   pantallas estrechas y mete scroll horizontal). Rellena el vacío a los
   lados del tablón cuando solo hay 1-2 comunicados activos. */
.ink-section--comunicados .ink-sigil-bg { opacity: 0.4; }

/* Destacada a doble altura a la izquierda, rejilla al lado — misma idea que
   .ink-grid-3 pero con la primera pieza ocupando dos filas. */
.ink-archivo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 22px;
    max-width: 920px;
    margin: 34px auto 0;
}

.ink-grid-3 > *,
.ink-archivo-grid > *,
.ink-frame,
.ink-plate-card,
.ink-archivo-card {
    min-width: 0;
}

/* El span a doble fila solo se aplica con masa suficiente para llenar la
   rejilla (destacada + 4 piezas = las 2 filas completas). Con menos piezas
   (1-4) dejaba un hueco vacío al lado de la destacada — reportado en la
   auditoría conjunta del 2026-08-17. Las plantillas añaden el modificador
   solo cuando el recuento de la consulta lo justifica. */
.ink-archivo-grid--featured > :first-child {
    grid-row: span 2;
}

.ink-archivo-grid--featured {
    grid-template-columns: 1.12fr repeat(2, 0.94fr);
}

.ink-archivo-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-width: 24px;
}

.ink-archivo-card .ink-h3 {
    font-size: 1.36rem;
    line-height: 1.08;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
}

.ink-archivo-card .ink-plate-card__art {
    height: 158px;
    margin: -16px -16px 0;
}

.ink-archivo-card .ink-badge {
    padding: 4px 10px;
    font-size: 0.58rem;
    letter-spacing: 0.13em;
}

.ink-archivo-card p {
    margin: 0;
    color: rgba(238, 227, 204, 0.72);
    font-size: 0.92rem;
    line-height: 1.5;
}

.ink-archivo-card .ink-link {
    margin-top: auto;
    font-size: 0.66rem;
    letter-spacing: 0.15em;
}

/* Fondo de "tablón" para Comunicados: madera vieja de verdad (asset dedicado,
/* Gancho de Comunicados, sin fondo propio: la sección es negro plano como el
   resto desde el 2026-08-20 (ver "Fondo De Sección" más arriba). Pasó primero
   por un tablón de madera físico (sistema de losas) y luego por una banda de
   tapiz — las dos, retiradas. */
.ink-section--comunicados {
    position: relative;
}

/* Sello de archivo grande y casi invisible detrás de la rejilla: con las
   tarjetas llenas, un tinte de color competiría con el contenido; un emblema
   al 5% no. Nace y muere dentro de la sección, sobre el negro de página. */
.ink-section--archivo {
    position: relative;
    isolation: isolate;
}

.ink-section--archivo::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: var(--ink-emblem);
    background-position: center 20%;
    background-repeat: no-repeat;
    background-size: min(760px, 60%);
    opacity: 0.05;
    pointer-events: none;
}

.ink-section--archivo > .ink-shell {
    position: relative;
    z-index: 1;
}

/* Costura hero → Comunicados, mismo mecanismo que .ink-lore__seam en la
   home: un .ink-seam explícito justo en la frontera (2026-08-20). Sustituye
   al solape de degradados que llevaba esta regla (margen negativo + padding
   + box-shadow, pensados para fundir la cola del hero con el tinte de la
   siguiente sección sin costura visible): con una línea marcando el límite
   a propósito no hace falta fundir nada, y sin ella el corte quedaba sin
   ninguna marca — el mismo defecto que ya se corrigió en las heroes de
   página global. El elemento en sí (.ink-hero-seam) vive como primer hijo
   de la sección en hub-warera.php.
   padding-top:0 anula el relleno superior heredado de .ink-section (104px):
   sin esto, la costura aparecía 104px + su propio margen por debajo del
   borde real del hero — no "pegada" a él, sino flotando bien por debajo,
   con un hueco muerto de por medio (owner, 2026-08-21). */
.ink-page--hub .ink-hero--hub + .ink-section,
.ink-hero--page + .ink-section {
    padding-top: 0;
}

.ink-hero-seam {
    margin: 0 0 48px;
}

/* ============ COMUNICADOS ============
   Sustituye al tablón rotatorio de pergamino (`.ink-dispatch`), retirado el
   2026-08-20 junto con el resto de fondos materiales. Dos motivos, y el
   segundo pesa más que el estético: sobre negro, una hoja de papel clara era
   lo más brillante de la página y se comía la sección entera; y la rotación
   escondía avisos detrás del tiempo, cuando lo normal es tener varios activos
   a la vez y quererlos leer todos.

   Ahora es una lista. Filetes finos, sin cajas, sin relleno: la jerarquía la
   ponen el tamaño y el color, no marcos. Mismo componente en el hub y en la
   página global de Comunicados, por petición expresa del owner.

   Cada aviso da las dos vías de lectura: el titular abre el diálogo en la
   propia página, el enlace de debajo lleva a su página completa. */
.ink-notices {
    width: min(840px, 100%);
    margin: 52px auto 0;
    padding: 0;
    border-top: 1px solid rgba(216, 199, 163, 0.13);
    list-style: none;
}

.ink-notice {
    position: relative;
    padding: 30px 8px 30px 26px;
    border-bottom: 1px solid rgba(216, 199, 163, 0.13);
}

/* Filete rojo que aparece al pasar por encima. Ocupa el hueco que ya reserva
   el padding izquierdo, así que nada se desplaza al entrar y salir — un
   cambio de ancho aquí haría saltar el texto de todas las filas. */
.ink-notice::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--ink-red-hot), var(--ink-red));
    opacity: 0;
    transition: opacity 0.28s ease;
}

.ink-notice:hover::before,
.ink-notice:focus-within::before {
    opacity: 1;
}

.ink-notice__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
}

.ink-notice__date {
    color: var(--ink-muted);
    font-family: var(--ink-font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Etiqueta de estado sin fondo sólido: un punto y una palabra. La versión
   anterior usaba .ink-badge, un rectángulo rojo macizo que sobre negro pesaba
   más que el propio titular. */
.ink-notice__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ink-font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.ink-notice__tag::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.ink-notice__tag--live { color: var(--ink-red-hot); }
.ink-notice__tag--past { color: rgba(153, 139, 115, 0.75); }

.ink-notice__title {
    margin: 0;
    font-family: var(--ink-font-display);
    font-size: 1.42rem;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: 0.01em;
}

.ink-notice__title a {
    color: var(--ink-bone);
    transition: color 0.24s ease;
}

.ink-notice__title a:hover,
.ink-notice__title a:focus-visible {
    color: var(--ink-gold);
}

.ink-notice__excerpt {
    max-width: 62ch;
    margin: 10px 0 0;
    color: rgba(238, 227, 204, 0.66);
    font-size: 1rem;
    line-height: 1.6;
}

/* Selector "a.ink-notice__more", no ".ink-notice__more": .ink-page a (más
   arriba en el fichero) fija color:inherit con más especificidad (clase +
   tipo) que una sola clase, así que le ganaba a este color pese a venir
   después en el archivo. Sin ancestro que fije un color propio — el caso
   del modal — inherit caía hasta negro puro y el enlace quedaba invisible
   (encontrado 2026-08-20). Igualar la especificidad con el tipo "a" y ganar
   por orden de aparición es más barato que tocar la regla genérica. */
a.ink-notice__more {
    display: inline-block;
    margin-top: 14px;
    color: var(--ink-gold);
    font-family: var(--ink-font-display);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.72;
    transition: opacity 0.24s ease;
}

.ink-notice__more:hover,
.ink-notice__more:focus-visible {
    opacity: 1;
}

.ink-notice__more span {
    display: inline-block;
    margin-left: 5px;
    transition: transform 0.24s ease;
}

.ink-notice__more:hover span { transform: translateX(4px); }

/* ---- Diálogo de lectura ---- */

/* El <dialog> es el lienzo a pantalla completa; la tarjeta es el hijo. Esa
   separación es la que permite cerrar pulsando fuera sin capas extra. */
.ink-notice-modal {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* El centrado vertical necesita contexto flex: `margin: auto` en la tarjeta
   no basta dentro de un contenedor de bloque y dejaba el aviso pegado al
   borde superior. Va en [open] porque un <dialog> cerrado es display:none, y
   fijar display en la regla base lo dejaria siempre visible. */
.ink-notice-modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ink-notice-modal::backdrop {
    background: rgba(3, 2, 2, 0.82);
    backdrop-filter: blur(6px);
}

/* El frame-ornate de las tarjetas quedaba demasiado aparatoso para un
   diálogo de lectura (owner, 2026-08-20 — probado y descartado). Vuelta al
   chaflán liso con un filete fino, un único rasgo del sistema en vez del
   marco completo — minimalista a propósito. */
.ink-notice-modal__card {
    position: relative;
    width: min(660px, 100%);
    margin: auto;
    padding: 44px 46px 40px;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(155, 28, 24, 0.14), transparent 72%),
        var(--ink-panel);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(216, 199, 163, 0.22);
    /* Las dos esquinas superiores cortadas igual, las dos inferiores a
       escuadra — el chaflán heredado cortaba en diagonal (arriba-izquierda
       y abajo-derecha) y leía como descuadrado, no como una pieza del
       sistema (owner, 2026-08-20). */
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
    text-align: center;
}

/* Franja ilustrada de cabecera (--ink-notice-art, asset-prompts.md
   Prioridad 9) — tercera vuelta tras el marco completo y el divisor con
   gema, las dos descartadas por aparatosas. Sangra a los tres bordes
   superiores cancelando el padding propio del card con margen negativo, y
   se funde hacia el panel con una máscara en vez de un borde duro. Mientras
   no exista el asset, el degradado de reserva sostiene la cabecera sin
   dejarla vacía. */
.ink-notice-modal__art {
    height: 108px;
    margin: -44px -46px 22px;
    background-image: var(--ink-notice-art, linear-gradient(135deg, rgba(155, 28, 24, 0.22), rgba(13, 10, 9, 0.75)));
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.ink-notice-modal .ink-notice__meta { justify-content: center; }

/* .ink-divider (el broche con la gema) resultaba demasiado grande para una
   tarjeta de este tamaño — retirado, owner 2026-08-20. .ink-seam es la
   pieza fina que ya separa hero/lore y comunidad/footer en la home. */
.ink-notice-modal__seam {
    margin: 18px 0 24px;
}

.ink-notice-modal__title {
    margin: 0 0 4px;
    font-size: 2rem;
}

.ink-notice-modal__body {
    margin: 22px 0 0;
    text-align: left;
}

.ink-notice-modal__body > *:first-child { margin-top: 0; }

/* Opacity 1: la reducción a 0.72 de .ink-notice__more está pensada para
   convivir con el titular de al lado en la lista; sola, centrada y
   pequeña dentro del diálogo, quedaba casi negra e ilegible. */
.ink-notice-modal .ink-notice__more {
    margin-top: 26px;
    opacity: 1;
}

.ink-notice-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Fondo propio en vez de transparente: el botón cae sobre la franja
       ilustrada, no sobre negro plano, y necesita legibilidad garantizada
       sin depender de lo oscuro que salga esa zona concreta del asset. */
    background: rgba(3, 2, 2, 0.45);
    color: var(--ink-bone);
    font-family: var(--ink-font-body);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.ink-notice-modal__close:hover,
.ink-notice-modal__close:focus-visible {
    color: var(--ink-gold);
    background: rgba(3, 2, 2, 0.65);
}

/* Entrada y salida. `allow-discrete` es lo que permite animar un elemento que
   entra y sale de `display: none`; `@starting-style` fija el fotograma cero.
   Donde no haya soporte, el diálogo simplemente aparece sin transición. */
@media (prefers-reduced-motion: no-preference) {
    .ink-notice-modal,
    .ink-notice-modal::backdrop {
        transition:
            opacity 0.32s ease,
            transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
            overlay 0.32s allow-discrete,
            display 0.32s allow-discrete;
    }

    .ink-notice-modal {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }

    .ink-notice-modal[open] {
        opacity: 1;
        transform: none;
    }

    .ink-notice-modal::backdrop { opacity: 0; }
    .ink-notice-modal[open]::backdrop { opacity: 1; }

    @starting-style {
        .ink-notice-modal[open] {
            opacity: 0;
            transform: translateY(14px) scale(0.985);
        }

        .ink-notice-modal[open]::backdrop { opacity: 0; }
    }
}

/* ============ BUSCADOR Y RESULTADOS ============ */

.ink-buscador {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 8px 0 34px;
}

.ink-buscador input[type="search"] {
    flex: 1 1 320px;
    max-width: 460px;
    padding: 12px 16px;
    border: 1px solid rgba(178, 138, 67, 0.34);
    background: rgba(10, 7, 6, 0.7);
    color: var(--ink-bone);
    font-family: var(--ink-font-body);
    font-size: 1rem;
}

.ink-buscador input[type="search"]::placeholder {
    color: rgba(238, 227, 204, 0.42);
}

.ink-buscador input[type="search"]:focus-visible {
    outline: 2px solid rgba(178, 138, 67, 0.7);
    outline-offset: 2px;
}

/* Pestañas centradas: en el 404 no filtran nada, son la salida hacia las
   secciones reales. */
.ink-tabs--centro {
    justify-content: center;
}

.ink-resultados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.ink-resultado {
    display: block;
    padding: 20px 22px;
    border: 1px solid rgba(178, 138, 67, 0.2);
    background: rgba(10, 7, 6, 0.55);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ink-resultado:hover,
.ink-resultado:focus-visible {
    border-color: rgba(178, 138, 67, 0.55);
    transform: translateY(-2px);
}

.ink-resultado .ink-h3 {
    margin: 10px 0 6px;
}

.ink-resultado p {
    margin: 0;
    color: rgba(238, 227, 204, 0.74);
}

/* ============ ENCAJE DE PORTADA ============
   Los marcos del sitio son apaisados (4:3 o parecido) y las portadas se piden
   a 1200×900, pero quien publica sube lo que tiene. Cuando la imagen se aleja
   mucho de esa forma — una captura vertical, un meme cuadrado, un panorama —
   PHP le pone esta clase (inkietud_encaje_de_adjunto) y la imagen se enseña
   entera en vez de recortada.

   El hueco que sobra se queda en el negro del sitio, no en un desenfoque de la
   propia imagen: la regla es un solo negro en toda la página, y duplicar la
   imagen borrosa detrás sería justamente el tipo de fondo material que ya se
   rechazó dos veces (ver .context/decisions/009). Dentro de un marco
   ornamentado, una imagen contenida sobre negro se lee como una lámina
   montada, que es lo que es. */
.ink-plate-card__art.ink-cover--contener,
.ink-single-cover.ink-cover--contener {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #0b0706;
}

.ink-gallery__pieza.ink-cover--contener {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #0b0706;
}

/* ============ MOVIMIENTO ============ */

@media (prefers-reduced-motion: no-preference) {
    .ink-reveal {
        animation: ink-fadeup linear both;
        animation-timeline: view();
        animation-range: entry 8% cover 32%;
    }

    @keyframes ink-fadeup {
        from { opacity: 0; transform: translateY(34px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .ink-hero__sky {
        animation: ink-drift-sky linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    @keyframes ink-drift-sky {
        from { transform: translateY(0); }
        to { transform: translateY(90px); }
    }

    .ink-hero__city {
        animation: ink-drift-city linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    @keyframes ink-drift-city {
        from { transform: translateY(0); }
        to { transform: translateY(-40px); }
    }

    .ink-divider {
        animation: ink-divider-glow 4s ease-in-out infinite;
    }

    @keyframes ink-divider-glow {
        0%, 100% { filter: drop-shadow(0 0 2px rgba(155, 28, 24, 0.15)); }
        50% { filter: drop-shadow(0 0 18px rgba(214, 66, 30, 0.95)); }
    }

    .ink-sigil-bg {
        animation: ink-sigil-breathe 6s ease-in-out infinite;
    }

    @keyframes ink-sigil-breathe {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.95; }
    }

    .ink-plate-card__art::after {
        animation: ink-flicker 3.2s ease-in-out infinite;
    }

    @keyframes ink-flicker {
        0%, 100% { opacity: 0.25; }
        30% { opacity: 0.9; }
        60% { opacity: 0.45; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .ink-embers { display: none; }
}

/* Cambio de filtro sin recarga (assets/js/inkietud-site.js). El fundido lo
   hace la view transition del navegador sobre el documento entero, no una
   animación nuestra: como entre un filtro y otro solo cambia la zona
   filtrable, lo único que se ve fundirse es esa zona. Aquí solo se ajusta el
   ritmo al del resto del sitio —mismos 0.32s que el diálogo de comunicados—;
   el cruce en sí es el del navegador. Sin soporte, el intercambio es
   instantáneo y no se pierde nada. */
/* Mientras se espera la respuesta del servidor, la zona filtrable se apaga un
   punto. El clic tiene que notarse aunque el servidor tarde: sin esto la
   página se queda quieta y parece que no ha pasado nada (medido el 2026-08-25:
   ~850 ms de espera en local antes de que llegue el HTML nuevo). El JS marca
   además la pestaña pulsada en el mismo instante, así que lo que se ve es el
   resaltado rojo saltando ya a su sitio sobre el bloque atenuado. */
[data-ink-filtered].is-cargando {
    opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
    [data-ink-filtered] {
        transition: opacity 0.2s ease;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.32s;
        animation-timing-function: ease;
    }
}


/* ---- El pase de página del Lore ----
   Al pulsar un capítulo, el JS intercambia solo la zona del libro y envuelve
   el cambio en una view transition (ver 011-filtros-sin-recarga.md, mismo
   mecanismo que los filtros). Lo que se anima aquí es únicamente la página:
   índice, hero, barra y footer se quedan clavados, que es lo que hace que se
   lea como pasar una hoja y no como cargar otra pantalla.

   Darle nombre propio a la página la saca del fundido general de la raíz y
   permite animarla aparte. Todo lo demás sigue con el cruce por defecto —
   como no cambia, no se ve. */
.ink-book__page {
    view-transition-name: ink-book-page;
}

@media (prefers-reduced-motion: no-preference) {
    /* height: auto evita que los dos fotogramas se estiren al tamaño del
       grupo mientras este morfea de un alto a otro: sin esto, un capítulo
       corto entrando sobre uno largo se ve aplastado durante el cruce. */
    ::view-transition-old(ink-book-page),
    ::view-transition-new(ink-book-page) {
        height: auto;
    }

    /* El relevo, no un fundido cruzado. La hoja que sale se va rápido y la que
       entra arranca cuando la otra casi no está: con las dos a media opacidad
       al mismo tiempo se ven los dos textos superpuestos y se lee turbio
       (comprobado sobre el fotograma intermedio, 2026-08-26). El solape que
       queda son ~30ms, suficiente para que no parezca un parpadeo. */
    ::view-transition-old(ink-book-page) {
        animation: ink-hoja-sale 150ms ease-in both;
    }

    ::view-transition-new(ink-book-page) {
        animation: ink-hoja-entra 300ms cubic-bezier(0.22, 0.68, 0.28, 1) 120ms both;
    }

    /* Hacia atrás, el mismo gesto del revés. El sentido lo pone el JS en el
       <html> antes de arrancar la transición: los pseudoelementos de una view
       transition cuelgan de la raíz y no hay forma de llegar a ellos desde una
       clase puesta más abajo. */
    :root[data-ink-turn="prev"]::view-transition-old(ink-book-page) {
        animation-name: ink-hoja-sale-atras;
    }

    :root[data-ink-turn="prev"]::view-transition-new(ink-book-page) {
        animation-name: ink-hoja-entra-atras;
    }
}

/* El desplazamiento es corto a propósito: 20px bastan para dar el sentido del
   gesto. Más lejos deja de parecer una hoja y parece una diapositiva. */
@keyframes ink-hoja-sale {
    to { opacity: 0; transform: translateX(-20px); }
}

@keyframes ink-hoja-entra {
    from { opacity: 0; transform: translateX(28px); }
}

@keyframes ink-hoja-sale-atras {
    to { opacity: 0; transform: translateX(20px); }
}

@keyframes ink-hoja-entra-atras {
    from { opacity: 0; transform: translateX(-28px); }
}

/* Mientras se espera al servidor, en el libro solo se apaga la página. El
   índice es el mando que se acaba de pulsar: apagarlo también hace parecer
   que se ha ido la pieza entera en vez de que está pasando la hoja. */
.ink-shell--libro.is-cargando {
    opacity: 1;
}

.ink-shell--libro.is-cargando .ink-book__page {
    opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
    .ink-book__page {
        transition: opacity 0.2s ease;
    }
}

/* ============ FORMULARIO DE PUBLICACIÓN ============
   [inkietud_publicar], ver includes/submissions.php y templates/publicar.php.
   El editor TinyMCE (wp_editor()) trae su propio cromado claro por dentro —
   no se reskinea, es el mismo editor que ya conoce cualquiera que haya usado
   wp-admin, y reescribir su CSS interno es su propio proyecto aparte. Lo que
   sí lleva la piel del sitio es todo lo de alrededor: campos, selects,
   pestañas de tipo, avisos. */

.ink-form-notice,
.ink-form-error {
    max-width: 560px;
    margin: 32px auto 0;
    padding: 18px 22px;
    text-align: center;
}

.ink-form-notice {
    color: rgba(238, 227, 204, 0.8);
    border: 1px solid var(--ink-line);
}

.ink-form-error {
    color: var(--ink-red-hot);
    border: 1px solid rgba(214, 66, 30, 0.4);
    background: rgba(214, 66, 30, 0.08);
}

.ink-form {
    margin-top: 32px;
}

.ink-form__intro {
    margin: 0 0 20px;
    color: var(--ink-gold);
    font-family: var(--ink-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ink-form__field {
    margin-bottom: 22px;
}

.ink-form__field label {
    display: block;
    margin-bottom: 8px;
    color: var(--ink-muted);
    font-family: var(--ink-font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Nota de ayuda bajo un campo. En minúscula y sin espaciado de letras, al
   revés que la etiqueta: es texto para leer, no un rótulo. */
.ink-form__hint {
    margin: 8px 0 0;
    color: rgba(238, 227, 204, 0.55);
    font-size: 0.84rem;
    line-height: 1.5;
}

.ink-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ink-form__row .ink-form__field {
    flex: 1;
    min-width: 180px;
}

.ink-form__field input[type="text"],
.ink-form__field input[type="url"],
.ink-form__field input[type="date"],
.ink-form__field input[type="file"],
.ink-form__field select,
.ink-form__field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--ink-panel);
    border: 1px solid var(--ink-line);
    color: var(--ink-bone);
    font-family: var(--ink-font-body);
    font-size: 1rem;
}

.ink-form__field input:focus,
.ink-form__field select:focus,
.ink-form__field textarea:focus {
    outline: none;
    border-color: var(--ink-gold);
}

.ink-form__field textarea {
    resize: vertical;
}

/* El editor de WordPress trae su propio marco blanco; solo se le da un
   respiro de aire respecto al resto del formulario oscuro. */
.ink-form__field .wp-editor-wrap {
    margin-top: 4px;
}

/* wp_login_form() imprime su propio markup con clases #loginform de
   wp-admin — aquí solo se ajustan ancho y color para que no desentone,
   sin tocar su estructura. */
#loginform {
    max-width: 360px;
    margin: 20px auto 0;
    text-align: left;
}

#loginform label {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-muted);
    font-family: var(--ink-font-display);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#loginform input[type="text"],
#loginform input[type="password"] {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--ink-panel);
    border: 1px solid var(--ink-line);
    color: var(--ink-bone);
}

#loginform .login-remember { color: rgba(238, 227, 204, 0.7); margin-bottom: 16px; }

#loginform .button {
    padding: 12px 26px;
    background: var(--ink-red);
    border: 1px solid var(--ink-gold);
    color: var(--ink-bone);
    font-family: var(--ink-font-display);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

/* ============ RESPONSIVE ============ */

/* ---- El libro del Lore ----
   Índice de capítulos a la izquierda, capítulo abierto a la derecha, con una
   línea de oro entre los dos haciendo de lomo. Sin panel de relleno detrás y
   sin marco ornamental: la sección ya es negro plano y el libro se sostiene
   con tipografía y una hairline, como el resto del sistema.

   El índice va sticky porque un capítulo largo deja de tener índice a la
   vista justo cuando hace falta para saltar a otro. */
.ink-book {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 0 48px;
    margin-top: 44px;
}

.ink-book__index {
    position: sticky;
    top: 28px;
    align-self: start;
}

.ink-book__index ol {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.ink-book__index a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(216, 199, 163, 0.12);
    color: rgba(216, 199, 163, 0.72);
    font-family: var(--ink-font-display);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.ink-book__index li:last-child a { border-bottom: 0; }

.ink-book__index a:hover { color: var(--ink-bone); }

/* El capítulo abierto no se marca con fondo ni con caja: el número pasa a oro
   pleno y el título a hueso. Un realce de bloque aquí compite con el propio
   texto del capítulo, que es lo que se está leyendo. */
.ink-book__index a.is-active {
    color: var(--ink-bone);
}

.ink-book__number {
    flex: none;
    color: rgba(216, 199, 163, 0.35);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}

.ink-book__index a.is-active .ink-book__number { color: var(--ink-gold); }

/* El lomo. Va como borde de la página, no como columna propia del grid, para
   que llegue exactamente hasta donde llega el texto del capítulo. */
.ink-book__page {
    min-width: 0;
    padding-left: 48px;
    border-left: 1px solid rgba(216, 199, 163, 0.16);
}

/* El título del capítulo, en voz baja. Estuvo con la escala de .ink-h2 y su
   divisor ornamentado hasta el 2026-08-26, y el owner lo paró: con el índice
   al lado marcando ya el capítulo abierto, era decirlo dos veces y con voz
   alta la segunda.

   Sigue siendo un <h2> y no desaparece del todo. La página necesita un
   encabezado propio —si no, quien navega por encabezados llega a "Lore" y ya
   no encuentra nada que le diga qué capítulo está leyendo— y en móvil, donde
   el índice se apila muy por encima, el texto arrancaría en frío. Pero suena
   como una etiqueta, no como un titular. */
.ink-book__titulo {
    margin: 0 0 26px;
    color: rgba(238, 227, 204, 0.5);
    font-family: var(--ink-font-display);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Dentro del libro el ancho de lectura ya lo fija la columna: centrar
   .ink-article con su max-width propio lo dejaría descolgado del lomo. Y el
   aire por encima lo pone ya el título, así que su margen propio sobra. */
.ink-book__page .ink-article {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.ink-book__turn {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 52px;
    padding-top: 24px;
    border-top: 1px solid rgba(216, 199, 163, 0.16);
}

.ink-book__turn a { text-align: right; }
.ink-book__turn a[rel="prev"] { text-align: left; }

@media (max-width: 1080px) {
    .ink-h2 { font-size: 2.3rem; }
    /* El libro se apila: el índice arriba como sumario y el capítulo debajo.
       Sticky con el índice a ancho completo se comería media pantalla al
       desplazar, así que se suelta. El lomo pasa de vertical a horizontal. */
    .ink-book { grid-template-columns: 1fr; gap: 0; }
    .ink-book__index { position: static; }
    .ink-book__page {
        margin-top: 40px;
        padding-top: 36px;
        padding-left: 0;
        border-top: 1px solid rgba(216, 199, 163, 0.16);
        border-left: 0;
    }
    .ink-book__turn { flex-direction: column; gap: 14px; }
    .ink-book__turn a, .ink-book__turn a[rel="prev"] { text-align: left; }
    .ink-grid-3 { grid-template-columns: 1fr; }
    /* Retrato + libro a ancho fijo (268+190px) más el texto no caben en este
       rango sin encogerse; si no, el libro se sale de la tarjeta antes de
       llegar al punto de apilado en móvil. */
    .ink-parchment { padding: 44px 40px; gap: 28px; }
    .ink-parchment__art { width: 190px; }
    .ink-parchment__book { width: 140px; height: 176px; }
    .ink-warera__head { flex-direction: column; align-items: flex-start; gap: 22px; }
    .ink-warera__head > p { max-width: none; }
    .ink-footer__grid { grid-template-columns: 1fr 1fr; }
    .ink-gallery { grid-template-columns: repeat(2, 1fr); }
    .ink-card--locked { min-height: 340px; }
    .ink-archivo-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 520px;
        gap: 24px;
    }
    .ink-archivo-grid--featured {
        grid-template-columns: minmax(0, 1fr);
    }
    .ink-archivo-grid--featured > :first-child { grid-row: auto; }
}

@media (max-width: 780px) {
    .ink-shell { width: min(1180px, calc(100% - 32px)); }
    .ink-hero { min-height: 88svh; }
    .ink-hero__figure { width: 46vw; opacity: 0.5; }
    .ink-banner { right: 16px; width: 50px; height: 108px; padding-top: 30px; }
    .ink-nav { flex-direction: column; align-items: center; gap: 14px; }
    .ink-nav__brand { flex-direction: column; gap: 8px; }
    .ink-nav__links { justify-content: center; gap: 6px 18px; }
    /* La barra ya no está en la misma línea que el estandarte: se apila y se
       centra, así que reservar hueco a la derecha solo la descentraría. */
    .ink-hero:not(.ink-hero--page) .ink-nav__links { padding-right: 0; }
    .ink-hero--hub .ink-nav__brand { padding-left: 0; }
    .ink-nav__links a { font-size: 0.7rem; letter-spacing: 0.12em; }
    .ink-hero__subtitle { font-size: 1.15rem; }
    .ink-chant { font-size: 0.95rem; }
    .ink-chant__arrow { width: 30px; }
    .ink-actions { flex-direction: column; gap: 16px; width: 100%; }
    .ink-slab { width: 100%; min-width: 0; }
    .ink-section { padding: 72px 0; }
    .ink-h2 { font-size: 1.85rem; }
    .ink-lore { margin-top: -50px; }
    .ink-lore__seam { margin-top: 50px; }
    .ink-parchment { flex-direction: column; gap: 24px; padding: 26px; }
    .ink-parchment__art { width: 200px; }
    .ink-parchment .ink-h2 { font-size: 1.5rem; }
    .ink-community { padding: 84px 0; }
    .ink-community__links { gap: 18px; }
    .ink-footer__grid { grid-template-columns: 1fr; gap: 30px; }
    .ink-sigil-bg { display: none; }
    .ink-hero--hub { min-height: 60svh; }
    .ink-archivo-panel {
        margin-top: 34px;
    }
    .ink-archivo-grid {
        max-width: 268px;
        gap: 20px;
        margin-top: 28px;
    }
    .ink-archivo-card { padding: 13px; border-width: 18px; }
    .ink-archivo-card .ink-plate-card__art { height: 138px; margin: -13px -13px 0; }
    .ink-archivo-card .ink-h3 { font-size: 1.2rem; line-height: 1.08; letter-spacing: 0.02em; }
    .ink-archivo-card p { font-size: 0.86rem; line-height: 1.48; }
    .ink-archivo-card .ink-badge { font-size: 0.54rem; }
    .ink-archivo-card .ink-link { font-size: 0.62rem; }
    .ink-single-cover { margin-left: 5px; margin-right: 5px; }
    .ink-single-cover::before { inset: -7px -5px; border-width: 18px; }
    .ink-article { font-size: 1rem; }
    .ink-notices { margin-top: 36px; }
    .ink-notice { padding: 24px 0 24px 18px; }
    .ink-notice::before { top: 24px; bottom: 24px; }
    .ink-notice__title { font-size: 1.2rem; }
    .ink-notice__excerpt { font-size: 0.94rem; }
    .ink-notice-modal { padding: 0; }
    /* A pantalla completa en movil: una tarjeta centrada con margenes deja
       demasiado poco alto util para leer un aviso largo. */
    .ink-notice-modal__card {
        width: 100%;
        min-height: 100%;
        padding: 56px 24px 40px;
        clip-path: none;
    }
    .ink-notice-modal__title { font-size: 1.55rem; }
}