/* Jack · Spiral Hill — piel (KC Style · Jack Pixel)
   Un mundo pixel nativo de 108 px de ancho. Todo arte se escala en píxeles enteros con image-rendering: pixelated.
   Orden: fuentes · base · gate · hero · sistema de escenas · módulos · ring · reduced-motion. */

/* KiwiSoda: rejilla de 16 unidades por em, nítida solo en tamaños 16·n px de dispositivo (ver pixelScale). */
@font-face {
  font-family: 'KiwiSoda';
  src: url('../../assets/font/kiwisoda-latin.woff2') format('woff2');
  font-display: swap;
}
/* Silkscreen: mayúsculas chicas legibles (Pixelify confunde C con O a 12 px). */
@font-face {
  font-family: 'Silkscreen';
  src: url('../../assets/font/silkscreen-latin.woff2') format('woff2');
  font-display: swap;
}
/* Pixelify dibuja el 5 como S y el 8 como S cerrada: los dígitos vienen de Tiny5, misma familia vía unicode-range. */
@font-face {
  font-family: 'Pixelify Sans';
  src: url('../../assets/font/pixelify-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pixelify Sans';
  src: url('../../assets/font/tiny5-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0030-0039;
}

/* ── Base ─────────────────────────────────────────────── */
html { -webkit-tap-highlight-color: transparent; background: var(--c-ink); }
body { background: var(--kc-canvas); }
::selection { background: var(--c-pumpkin-1); color: var(--c-ink); }
:focus-visible { outline: 3px solid var(--kc-focus); outline-offset: 3px; }

.jack-art,
.jack-gate__canvas,
.jack-sprite { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }

.kc-eyebrow {
  font-family: var(--kc-font-label);
  font-size: var(--kc-text-eyebrow);
  font-weight: 400;
  letter-spacing: var(--kc-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kc-accent);
}
.kc-title,
.kc-hero__title {
  font-family: var(--kc-font-display);
  font-weight: 400;
  line-height: 0.95;
  color: var(--kc-ink);
}
.kc-title { font-size: var(--kc-text-title); }

/* Voz de etiqueta: todo lo corto y en mayúsculas habla en Silkscreen. */
.jack-hero__date,
.jack-hero__place,
.jack-hero__cue,
.jack-gate__open,
.kc-map-link,
.kc-registry a,
.kc-captura__cta,
.kc-bank button[data-kc-copy],
.kc-rsvp-attendance-face,
.kc-rsvp-submit,
.kc-countdown__label,
.kc-family__group h3,
.kc-location__title,
.kc-location__time,
.kc-stop__time,
.kc-swatch__label,
.kc-secret__hint,
.kc-footer__mark {
  font-family: var(--kc-font-label);
  font-weight: 400;
  font-synthesis: none;
}

/* ── Gate: el umbral pinta la noche antes de abrirse ──── */
.jack-gate {
  display: block;
  padding: 0;
  background: var(--c-ink);
  cursor: pointer;
}
html[data-jack-phase="rip"] .jack-gate { background: transparent; }
html[data-jack-stage="ready"] .jack-gate[data-gate-state="opening"] { opacity: 1; transition: none; }
.jack-gate .kc-gate__body { position: static; display: block; }

.jack-gate__open {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 8svh);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  filter: drop-shadow(0 calc(var(--px) * 1) 0 var(--c-ink));
}
.jack-gate__open > * { pointer-events: none; }
.jack-gate__label {
  --u: max(3px, var(--px));
  white-space: nowrap;
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0 1.15rem 0 0.85rem;
  background: var(--c-moon-pale);
  box-shadow: inset 0 calc(var(--u) * -1) 0 var(--c-bone-shade);
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}
html[data-jack-phase="ready"] .jack-gate__label {
  visibility: visible;
  animation: jack-enter 240ms steps(3, end) both;
}
.jack-gate__open:focus-visible .jack-gate__label { visibility: visible; animation: none; }
.jack-gate__label::before {
  content: "";
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  background: var(--c-pumpkin-1);
  box-shadow: 0 0 0 0 var(--c-flame);
  animation: jack-blink 1.2s steps(1, end) infinite;
}
.jack-gate__glyph { display: none; }
.jack-gate__open:active .jack-gate__label { transform: translateY(var(--u)); box-shadow: none; }
html[data-jack-phase="reveal"] .jack-gate__open { animation: jack-leave 260ms steps(3, end) forwards; }

@keyframes jack-blink { 50% { background: var(--c-flame); } }
@keyframes jack-enter { from { clip-path: inset(100% 0 0); } to { clip-path: inset(0); } }
@keyframes jack-leave {
  to { opacity: 0; transform: translateX(-50%) translateY(calc(var(--px) * 3)); }
}

/* ── Hero: la pareja toma el lugar del umbral ─────────── */
.jack-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 0 0 calc(var(--kc-space-6) + env(safe-area-inset-bottom));
  background: var(--c-night-1) url('../../assets/pixel/tile-stars.png') repeat;
  background-size: calc(var(--px) * 96);
  image-rendering: pixelated;
}
.jack-gate__canvas {
  position: absolute;
  top: 0;
  left: var(--stage-left);
  width: var(--stage-w);
  height: var(--stage-h);
  image-rendering: pixelated;
}

.jack-hero__crown {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  /* The crown sits a breath below the top edge, on the night above the moon. */
  padding: calc(env(safe-area-inset-top) + 8svh) 16px 0;
  text-align: center;
}
.jack-hero__art {
  display: flex;
  justify-content: center;
  width: 100%;
  /* The plate's top 10 rows are empty night: tuck them under the crown so the hero stays near one screen. */
  margin: calc(var(--px) * -10) 0 0;
  overflow: hidden;
}
.jack-hero__art { position: relative; }
.jack-hero__art[data-jack-drawing] img { visibility: hidden; }
.jack-hero__draw {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--px) * 108);
  height: calc(var(--px) * 128);
  transform: translateX(-50%);
  image-rendering: pixelated;
}
.jack-hero__art img {
  flex: 0 0 auto;
  width: calc(var(--px) * 108);
  height: calc(var(--px) * 128);
  max-width: none;
  image-rendering: pixelated;
}
.jack-hero__eyebrow { margin: 0; }
.jack-hero__names {
  display: grid;
  justify-items: center;
  margin-block: 0.25rem 0.35rem;
  font-size: var(--kc-text-hero);
  line-height: 1;
  color: var(--c-moon-pale);
  text-shadow: 0 calc(var(--px) * 0.75) 0 var(--c-ink);
}
/* Names on their own lines; the ampersand is a small pumpkin-lit hinge between them. */
.jack-hero__name { display: block; white-space: nowrap; }
.jack-hero__amp {
  display: block;
  margin-block: 0.1em;
  font-size: var(--kiwi-sub, 1.75rem);
  color: var(--c-pumpkin-2);
}
.jack-hero__names:focus { outline: none; }
.jack-hero__names:focus-visible { outline: 3px solid var(--kc-focus); outline-offset: 6px; }
.jack-hero__date {
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  color: var(--c-bone);
}

.jack-hero__cue {
  position: relative;
  align-self: center;
  margin-top: var(--kc-space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: var(--c-ink);
  color: var(--c-moon-pale);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 300ms steps(3, end);
}
html[data-jack-phase="awake"] .jack-hero__cue { opacity: 1; transition-delay: 600ms; }
html[data-jack-phase="awake"][data-jack-scrolled] .jack-hero__cue { opacity: 0; transition-delay: 0s; }

.jack-hero__ground {
  position: relative;
  margin-top: var(--kc-space-3);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding-inline: 20px;
  text-align: center;
}
.jack-hero__phrase {
  max-width: 24ch;
  font-family: var(--kc-font-display);
  font-size: var(--kiwi-sub, 1.75rem);
  line-height: 1;
  color: var(--c-moon-pale);
}
.jack-hero__place {
  text-wrap: balance;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-pumpkin-2);
}

/* ── Sistema de escenas ───────────────────────────────
   Cada sección es una banda del mismo mundo: lienzo de noche con estrellas, costura de dither entre bandas,
   un objeto protagonista distinto por escena. Nada de tarjetas iguales. */
.jack-scene {
  position: relative;
  isolation: isolate;
  text-align: center;
  background: var(--c-night-1) url('../../assets/pixel/tile-stars.png') repeat;
  background-size: calc(var(--px) * 96);
  image-rendering: pixelated;
}
.jack-scene::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--px) * 6);
  background-repeat: repeat-x;
  background-size: calc(var(--px) * 4) calc(var(--px) * 6);
  z-index: -1;
}
.jack-scene--graveyard,
.jack-scene--path,
.jack-scene--camera { background-color: var(--c-night-2); }

.jack-scene--graveyard::before,
.jack-scene--path::before,
.jack-scene--camera::before { background-image: url('../../assets/pixel/edge-n1-n2.png'); }
.jack-scene--portraits::before,
.jack-scene--wardrobe::before,
.jack-scene--seal::before { background-image: url('../../assets/pixel/edge-n2-n1.png'); }

/* The pantheon ends in ink-dark earth: the town rises out of it. */
.jack-scene--town::before { background-image: url('../../assets/pixel/edge-k-n1.png'); }

.kc-section .kc-title { margin-bottom: var(--kc-space-5); }
.kc-section .kc-title::after {
  content: "";
  display: block;
  width: calc(var(--px) * 30);
  height: calc(var(--px) * 3);
  margin: 0.9rem auto 0;
  background: url('../../assets/pixel/tile-stitch.png') repeat-x;
  background-size: calc(var(--px) * 6) calc(var(--px) * 3);
}
.kc-body,
.kc-dedication {
  max-width: 30ch;
  margin-inline: auto;
  color: var(--kc-ink);
}
.kc-dedication { font-size: 1.125rem; line-height: 1.6; }
.kc-dedication,
.kc-story__item p,
.kc-location__address,
.kc-rsvp-attendance-hint,
.kc-envelopes p,
.kc-secret__message { text-wrap: pretty; }

/* Revelado en cels: 4 pasos y un desplazamiento de 3 px lógicos, no un fade de plantilla. */
[data-reveal] {
  transform: translateY(calc(var(--px) * 3));
  transition: opacity var(--kc-reveal-duration) var(--jack-steps), transform var(--kc-reveal-duration) var(--jack-steps);
}

/* Placa: marco pixel 9-slice para objetos con datos (familias, sedes, sobre bancario, secreto). */
.kc-bank,
.kc-secret__card {
  border: calc(var(--px) * 4) solid transparent;
  border-image: url('../../assets/pixel/frame-plaque.png') 4 fill / calc(var(--px) * 4) stretch;
  padding: 1rem 1rem 1.15rem;
  image-rendering: pixelated;
}

/* Botón pixel: esquinas escalonadas, bisel inferior, se hunde 1 px lógico al tocar. */
.kc-map-link,
.kc-registry a,
.kc-captura__cta,
.kc-bank button[data-kc-copy],
.kc-rsvp-attendance-face,
.kc-rsvp-submit {
  --u: max(3px, var(--px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border: 0;
  background: var(--c-moon-pale);
  color: var(--c-ink);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 calc(var(--u) * -1) 0 var(--c-bone-shade);
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}
.kc-map-link:active,
.kc-registry a:active,
.kc-bank button[data-kc-copy]:active { transform: translateY(var(--u)); box-shadow: none; }
.kc-map-link:focus-visible,
.kc-registry a:focus-visible,
.kc-bank button[data-kc-copy]:focus-visible { outline: none; background: var(--c-flame); }

/* ── Dedicatoria: el bordado de Sally ─────────────────── */
.jack-sampler {
  width: fit-content;
  margin: 0 auto var(--kc-space-6);
  border: calc(var(--px) * 4) solid transparent;
  border-image: url('../../assets/pixel/frame-plaque.png') 4 fill / calc(var(--px) * 4) stretch;
  image-rendering: pixelated;
}
.jack-art--sampler { width: calc(var(--stitch, calc(var(--px) / 2)) * 124); height: auto; }
.jack-sampler--small { margin-block: 0 var(--kc-space-6); }
.jack-sampler--small .jack-art--sampler { width: calc(var(--stitch, calc(var(--px) / 2)) * 63); }

/* ── Counter: un panteón, una lápida por unidad ───────── */
.jack-scene--graveyard .kc-countdown {
  max-width: calc(var(--px) * 96);
  margin-inline: auto;
  gap: calc(var(--px) * 2);
}
.kc-countdown__unit { gap: 0.4rem; }
.kc-countdown__value {
  display: grid;
  place-items: center;
  width: calc(var(--px) * 21);
  height: calc(var(--px) * 32);
  /* Digits sit in the lápida's engraved window: rows 13-25 of 32. */
  padding: calc(var(--px) * 13) 0 calc(var(--px) * 6);
  background: url('../../assets/pixel/sprite-tomb.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  font-family: var(--kc-font-body);
  font-size: calc(var(--px) * 6);
  line-height: 1;
  font-weight: 700;
  color: var(--c-moon-pale);
  text-shadow: 0 calc(var(--px) * 0.5) 0 var(--c-ink);
}
.kc-countdown__label {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-bone-shade);
}
.kc-countdown__status { margin-top: var(--kc-space-4); color: var(--c-pumpkin-2); }
/* Jack-faced skulls and a pair of bones keep watch from behind the fence. */
.jack-watchers {
  position: relative;
  display: block;
  height: calc(var(--px) * 10);
  margin-top: var(--kc-space-5);
  margin-bottom: calc(var(--px) * -6);
}
.jack-watcher,
.jack-bones {
  position: absolute;
  bottom: 0;
  image-rendering: pixelated;
}
.jack-watcher {
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 10);
  background: url('../../assets/pixel/sprite-watchers.png') 0 0 / calc(var(--px) * 22) calc(var(--px) * 10) no-repeat;
  animation: jack-blink-eyes 5.2s steps(1, end) infinite;
}
.jack-watcher:nth-child(1) { left: 12%; }
.jack-watcher:nth-child(2) { right: 9%; animation-delay: -2.4s; animation-duration: 6.6s; }
.jack-bones {
  left: 58%;
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 9);
  background: url('../../assets/pixel/sprite-bones.png') 0 0 / 100% 100% no-repeat;
}
@keyframes jack-blink-eyes { 0%, 92% { background-position: 0 0; } 94%, 97% { background-position: 100% 0; } }
.jack-fence {
  position: relative;
  display: block;
  height: calc(var(--px) * 15);
  margin: 0 -16px calc(var(--kc-section-pad) * -1);
  background: url('../../assets/pixel/tile-fence.png') repeat-x 50% 100%;
  background-size: calc(var(--px) * 8) calc(var(--px) * 15);
}

/* ── Tierra al pie de las escenas ───────────────────────
   Dedicatoria, RSVP and captura stand on the same earth as the pantheon, with a grave or candle. */
.jack-scene--letter,
.jack-scene--ticket,
.jack-scene--camera { padding-bottom: calc(var(--tomb-px, 2px) * 54 + var(--kc-space-4)); }
.jack-scene--letter::after,
.jack-scene--ticket::after,
.jack-scene--camera::after {
  --t: var(--tomb-px, 2px);
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: calc(var(--t) * 50 + var(--px) * 4);
  background:
    url('../../assets/pixel/pantheon-props.png') calc(var(--t) * -158) 0 / calc(var(--t) * 477) calc(var(--t) * 66) no-repeat,
    url('../../assets/pixel/ground-strip.png') 50% 100% / calc(var(--px) * 108) calc(var(--px) * 18) repeat-x;
  background-position: calc(100% + var(--t) * 158 - var(--t) * 38 - 6%) 0, 50% 100%;
  image-rendering: pixelated;
}
.jack-scene--camera::after {
  background:
    url('../../assets/pixel/pantheon-props.png') 0 0 / calc(var(--t) * 477) calc(var(--t) * 66) no-repeat,
    url('../../assets/pixel/ground-strip.png') 50% 100% / calc(var(--px) * 108) calc(var(--px) * 18) repeat-x;
  background-position: calc(6% - 0px) calc(var(--t) * 11), 50% 100%;
}

/* ── Familia: lápidas grabadas ───────────────────────────
   The CEO's skull lápida as a 9-slice frame: crest on top, vines down the sides, engraved stone inside.
   Parents share one row; the godparents share a single wide tablet. */
.jack-scene--portraits { padding-block: var(--kc-space-6); }
.jack-scene--portraits .kc-container { display: grid; justify-items: center; }
.kc-family {
  display: grid;
  gap: var(--kc-space-2);
  width: 100%;
  max-width: 30rem;
}
#familia-padres,
#familia-padrinos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#familia-padrinos > .kc-family__group:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--kc-space-2) / 2); }
.kc-family__group {
  --t: var(--half-px, 2px);
  /* Narrow enough that the crest slice repeats exactly once, in WebKit and Chromium alike. */
  width: min(100%, calc(var(--t) * 80));
  justify-self: center;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.25rem;
  border-style: solid;
  border-color: transparent;
  border-width: calc(var(--t) * 25) calc(var(--t) * 14) calc(var(--t) * 13) calc(var(--t) * 15);
  border-image: url('../../assets/pixel/lapida-skull.png') 25 14 13 15 / calc(var(--t) * 25) calc(var(--t) * 14) calc(var(--t) * 13) calc(var(--t) * 15) round;
  background: var(--c-night-2) padding-box;
  padding: 0.3rem 0.25rem 0.4rem;
  image-rendering: pixelated;
}
.kc-family__group h3 {
  font-size: 0.75rem;
  letter-spacing: var(--kc-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-pumpkin-2);
}
.kc-family__group ul { display: grid; gap: 0.1rem; }
.kc-family__group li { font-size: 0.8125rem; line-height: 1.22; color: var(--c-moon-pale); text-wrap: balance; }
.kc-family + .kc-family { margin-top: 0; }

/* ── Historia: un panteón que se recorre de lado ─────────
   Backdrop at world scale (--px) drifts at 0.45x; tombs, props and plaques ride the track at --tomb-px.
   Each tomb is the CEO's lápida: the story photo sits behind its transparent window. */
/* Sky above (the shared night with its stars), earth below: the scene runs down to the section's edge. */
.jack-scene--album { padding-block: var(--kc-space-6) 0; }
.jack-scene--album .kc-title { margin-bottom: var(--kc-space-3); }
.jack-pantheon {
  --t: var(--tomb-px, 2px);
  position: relative;
  isolation: isolate;
  min-height: calc(var(--px) * 150);
  /* Phones: edge to edge. Desktop: the whole panorama, centred, never wider than the screen. */
  margin-inline: calc((100% - min(var(--px) * 238, 100vw)) / 2);
  overflow: hidden;
}
/* Night thickening toward the horizon, behind the castle hill: blue, never a purple wall. */
.jack-pantheon::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(var(--px) * 40) 0 auto;
  height: calc(var(--px) * 24);
  background: url('../../assets/pixel/sky-haze.png') 0 0 / calc(var(--px) * 8) calc(var(--px) * 24) repeat-x;
  image-rendering: pixelated;
}
.jack-pantheon::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: calc(var(--px) * 64) 0 auto;
  height: calc(var(--px) * 38);
  background: var(--c-night-2);
}
/* Earth under the panorama: moves with it, so the ground never slides against the graves. */
.jack-pantheon__ground {
  position: absolute;
  z-index: 0;
  top: calc(var(--px) * 102);
  left: 0;
  width: calc(var(--px) * 238);
  height: calc(var(--px) * 48);
  background: url('../../assets/pixel/pantheon-ground.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform: translateX(var(--jack-pan-x, 0px));
  pointer-events: none;
}
.jack-pantheon__backdrop,
.jack-pantheon__lights {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  image-rendering: pixelated;
  transform: translateX(var(--jack-pan-x, 0px));
}
.jack-pantheon__backdrop {
  z-index: 1;
  width: calc(var(--px) * 238);
  height: calc(var(--px) * 102);
  background: url('../../assets/pixel/pantheon-backdrop.png') 0 0 / 100% 100% no-repeat;
}
/* The pumpkin garland hangs behind the tombs and breathes in held cels. */
.jack-pantheon__lights {
  z-index: 2;
  width: calc(var(--t) * 238);
  height: calc(var(--t) * 80);
  background: url('../../assets/pixel/pantheon-lights.png') 0 0 / calc(var(--t) * 304) calc(var(--t) * 80) no-repeat;
  animation: jack-glow 2.4s steps(1, end) infinite;
}
@keyframes jack-glow { 0%, 100% { filter: none; } 30% { filter: brightness(1.12); } 55% { filter: brightness(0.94); } 70% { filter: brightness(1.06); } }

.jack-pantheon .kc-story {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0;
  margin: 0;
  min-height: calc(var(--px) * 150);
  /* Tombs stand on the backdrop's ground line, row 92. */
  padding: calc(var(--px) * 92 - var(--t) * 85) calc(50% - var(--t) * 48) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  list-style: none;
}
.jack-pantheon .kc-story::-webkit-scrollbar { display: none; }
.jack-pantheon .kc-story:focus-visible { outline: 3px solid var(--kc-focus); outline-offset: -3px; }
.jack-tomb {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  align-content: start;
  width: calc(var(--t) * 96);
  scroll-snap-align: center;
  text-align: center;
}
.jack-tomb__stone {
  position: relative;
  z-index: 2;
  width: calc(var(--t) * 67);
  height: calc(var(--t) * 85);
  background: url('../../assets/pixel/lapida-skull.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.jack-tomb--cross .jack-tomb__stone { width: calc(var(--t) * 68); height: calc(var(--t) * 84); background-image: url('../../assets/pixel/lapida-cross.png'); }
/* The photo window: skull lápida 38x47 at (15, 25); cross lápida 38x55 at (15, 22). */
.jack-tomb .kc-story__photo {
  position: absolute;
  z-index: 1;
  top: calc(var(--t) * 25);
  left: calc(50% - var(--t) * 33.5 + var(--t) * 15);
  width: calc(var(--t) * 38);
  height: calc(var(--t) * 47);
  margin: 0;
  overflow: hidden;
  background: var(--c-night-2);
}
.jack-tomb--cross .kc-story__photo { top: calc(var(--t) * 22); left: calc(50% - var(--t) * 34 + var(--t) * 15); height: calc(var(--t) * 55); }
/* Pixel vignettes are 38x55: whole pixels at tomb scale, the skull window crops their lower rows.
   FOTO VIP CEO: a real photo here wants width/height 100% with object-fit: cover. */
.jack-tomb .kc-story__photo img {
  display: block;
  width: calc(var(--t) * 38);
  height: calc(var(--t) * 55);
  max-width: none;
  object-fit: fill;
  image-rendering: pixelated;
}
/* Props at the tomb's feet, from the CEO's adornos and luces sheets. */
.jack-tomb::before,
.jack-tomb::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-image: url('../../assets/pixel/pantheon-props.png');
  background-size: calc(var(--t) * 477) calc(var(--t) * 66);
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.jack-tomb:nth-child(3n + 1)::before { width: calc(var(--t) * 40); height: calc(var(--t) * 66); top: calc(var(--t) * 21); left: calc(50% - var(--t) * 66); background-position: calc(var(--t) * -73) 0; }
.jack-tomb:nth-child(3n + 2)::before { width: calc(var(--t) * 26); height: calc(var(--t) * 39); top: calc(var(--t) * 48); left: calc(50% - var(--t) * 56); background-position: 0 0; }
.jack-tomb:nth-child(3n + 3)::before { width: calc(var(--t) * 38); height: calc(var(--t) * 50); top: calc(var(--t) * 37); left: calc(50% - var(--t) * 64); background-position: calc(var(--t) * -158) 0; }
.jack-tomb::after {
  width: calc(var(--t) * 22);
  height: calc(var(--t) * 26);
  top: calc(var(--t) * 61);
  left: calc(50% + var(--t) * 30);
  background-image: url('../../assets/pixel/pantheon-lights.png');
  background-size: calc(var(--t) * 304) calc(var(--t) * 80);
  background-position: calc(var(--t) * -282) 0;
  animation: jack-glow 1.7s steps(1, end) infinite;
}
.jack-tomb:nth-child(2n)::after { width: calc(var(--t) * 22); height: calc(var(--t) * 31); top: calc(var(--t) * 56); background-position: calc(var(--t) * -240) 0; animation-delay: -0.8s; }
/* A Jack-faced skull keeps watch from the grass. */
.jack-tomb__peek {
  position: absolute;
  z-index: 3;
  top: calc(var(--t) * 77);
  left: calc(50% - var(--t) * 30);
  width: calc(var(--t) * 11);
  height: calc(var(--t) * 10);
  background: url('../../assets/pixel/sprite-watchers.png') 0 0 / calc(var(--t) * 22) calc(var(--t) * 10) no-repeat;
  image-rendering: pixelated;
  animation: jack-blink-eyes 5.8s steps(1, end) infinite;
}
.jack-tomb:nth-child(2n) .jack-tomb__peek { animation-delay: -3.1s; }
/* Left and right only: a subtle hint on the earth, two pixel chevrons breathing beside it. */
.jack-pantheon__hint,
.jack-town__hint {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--px) * 9);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--kc-font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-moon-pale);
  opacity: 0.72;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 300ms steps(3, end);
}
.jack-pantheon__hint::before,
.jack-pantheon__hint::after,
.jack-town__hint::before,
.jack-town__hint::after {
  content: "";
  width: 6px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: jack-nudge 1.2s steps(2, end) infinite;
}
.jack-pantheon__hint::before,
.jack-town__hint::before { transform: scaleX(-1); }
@keyframes jack-nudge { 50% { translate: 3px 0; } }
.jack-pantheon__hint::before,
.jack-town__hint::before { animation-name: jack-nudge-left; }
@keyframes jack-nudge-left { 50% { translate: -3px 0; } }
.jack-pantheon[data-jack-swiped] .jack-pantheon__hint { opacity: 0; }
@media (pointer: fine) {
  .jack-pantheon .kc-story { cursor: grab; }
  .jack-pantheon .kc-story[data-jack-dragging] { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}
.jack-pantheon[data-jack-paused] *,
.jack-pantheon[data-jack-paused] *::before,
.jack-pantheon[data-jack-paused] *::after { animation-play-state: paused; }

/* ── Ubicaciones: el pueblo de noche, de lado ────────────
   Chapel on the left, crooked street, the lantern garden on the right. Each venue is a signboard hung
   in front of its building; the track swipes left and right over the panorama (mountPanorama). */
.jack-town {
  --t: var(--tomb-px, 2px);
  position: relative;
  isolation: isolate;
  min-height: calc(var(--px) * 150);
  margin-inline: calc((100% - min(var(--px) * 260, 100vw)) / 2);
  overflow: hidden;
}
.jack-town__backdrop {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: calc(var(--px) * 260);
  height: calc(var(--px) * 150);
  background: url('../../assets/pixel/town-panorama.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  transform: translateX(var(--jack-pan-x, 0px));
  pointer-events: none;
}
.jack-town .kc-locations {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16vw;
  margin: 0;
  /* Signs hang in the plaza below the street line: the whole town stays visible above them. */
  padding: calc(var(--px) * 86) calc(50% - min(34vw, 9.5rem)) calc(var(--px) * 12);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.jack-town .kc-locations::-webkit-scrollbar { display: none; }
.jack-town .kc-locations:focus-visible { outline: 3px solid var(--kc-focus); outline-offset: -3px; }
.jack-sign {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
  width: min(68vw, 19rem);
  border: calc(var(--px) * 4) solid transparent;
  border-image: url('../../assets/pixel/frame-plaque.png') 4 fill / calc(var(--px) * 4) stretch;
  padding: 0.5rem 0.7rem 0.7rem;
  scroll-snap-align: center;
  image-rendering: pixelated;
  text-align: center;
}
/* The sign's two chains up to the eaves. */
.jack-sign::before,
.jack-sign::after {
  content: "";
  position: absolute;
  top: calc(var(--px) * -14);
  width: var(--px);
  height: calc(var(--px) * 10);
  background: repeating-linear-gradient(var(--c-bone-shade) 0 var(--px), transparent var(--px) calc(var(--px) * 2));
}
.jack-sign::before { left: 18%; }
.jack-sign::after { right: 18%; }
.kc-location__title {
  font-size: var(--kc-text-eyebrow);
  letter-spacing: var(--kc-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--c-pumpkin-2);
}
.kc-location h3 { font-family: var(--kc-font-display); font-size: var(--kiwi-sub, 1.75rem); font-weight: 400; line-height: 0.95; color: var(--c-moon-pale); }
.kc-location__address { max-width: 26ch; font-size: 0.8125rem; line-height: 1.35; color: var(--c-bone); }
.kc-location__time { font-size: 1rem; color: var(--c-flame); }
.kc-map-link { justify-self: center; margin-top: 0.4rem; }
.jack-town__hint {
  bottom: calc(var(--px) * 4);
}
.jack-town[data-jack-swiped] .jack-town__hint { opacity: 0; }
@media (pointer: fine) {
  .jack-town .kc-locations { cursor: grab; }
  .jack-town .kc-locations[data-jack-dragging] { cursor: grabbing; scroll-snap-type: none; user-select: none; }
}

/* ── Itinerario: el sendero de calabazas ─────────────────
   A dirt path winds down the night between graves; each stop is a pumpkin lantern on the path.
   mountItinerary (anime.js) lights them top to bottom; without motion they are lit at once. */
.jack-scene--path {
  padding-bottom: calc(var(--tomb-px, 2px) * 66 + var(--kc-space-3));
  background:
    url('../../assets/pixel/pantheon-props.png') calc(var(--px) * -2) calc(100% - var(--px) * 6) / calc(var(--t) * 477) calc(var(--t) * 66) no-repeat,
    url('../../assets/pixel/pantheon-props.png') calc(100% + var(--t) * 300) calc(100% - var(--px) * 4) / calc(var(--t) * 477) calc(var(--t) * 66) no-repeat,
    url('../../assets/pixel/sky-haze.png') 0 100% / calc(var(--px) * 8) calc(var(--px) * 24) repeat-x,
    url('../../assets/pixel/sky-haze.png') 0 45% / calc(var(--px) * 8) calc(var(--px) * 24) repeat-x,
    var(--c-night-2) url('../../assets/pixel/tile-stars.png') repeat;
  --t: var(--tomb-px, 2px);
  background-size: calc(var(--t) * 477) calc(var(--t) * 66), calc(var(--t) * 477) calc(var(--t) * 66), calc(var(--px) * 8) calc(var(--px) * 24), calc(var(--px) * 8) calc(var(--px) * 24), calc(var(--px) * 96);
}
.kc-schedule {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: 0;
  text-align: left;
}
.kc-stop {
  position: relative;
  grid-template-columns: calc(var(--px) * 11) 5.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding-bottom: var(--kc-space-5);
}
.jack-stop__lantern {
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 10);
  background: url('../../assets/pixel/sprite-pumpkin.png') 0 0 / calc(var(--px) * 22) calc(var(--px) * 10) no-repeat;
  image-rendering: pixelated;
}
.kc-stop.is-lit .jack-stop__lantern { background-position: 100% 0; animation: jack-flicker 1.6s steps(1, end) infinite; }
.kc-stop:nth-child(2n).is-lit .jack-stop__lantern { animation-delay: -0.7s; }
/* The trail down to the next lantern: a dithered dirt path, grown top to bottom. */
.jack-stop__path {
  position: absolute;
  z-index: -1;
  top: calc(var(--px) * 10);
  bottom: 0;
  left: calc(var(--px) * 1);
  width: calc(var(--px) * 9);
  /* Packed earth with a darker rut down the middle, edges ragged against the night. */
  background:
    linear-gradient(90deg, transparent calc(var(--px) * 4), var(--c-plum-1) calc(var(--px) * 4) calc(var(--px) * 5), transparent calc(var(--px) * 5)),
    url('../../assets/pixel/pantheon-ground.png') 0 calc(var(--px) * -14) / calc(var(--px) * 238) calc(var(--px) * 48);
  clip-path: polygon(var(--px) 0, calc(100% - var(--px)) 0, 100% 30%, calc(100% - var(--px)) 60%, 100% 100%, 0 100%, var(--px) 70%, 0 35%);
  transform-origin: top;
  image-rendering: pixelated;
}
.kc-stop:last-child .jack-stop__path { display: none; }
.kc-stop__time { font-size: 0.875rem; color: var(--c-pumpkin-2); white-space: nowrap; }
.kc-stop__label { color: var(--c-moon-pale); }

/* ── Vestimenta: Jack y Sally, de cuentas ───────────────
   The couple from the CEO's Hama-bead reference, under a moon, standing on the earth. One caption. */
.jack-wardrobe {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--kc-space-4);
  margin: 0 auto var(--kc-space-4);
}
.jack-wardrobe::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--px) * -6);
  left: 50%;
  width: calc(var(--px) * 56);
  height: calc(var(--px) * 56);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c-moon-pale) 0 62%, var(--c-moon) 62% 66%, transparent 66%);
  opacity: 0.85;
}
.jack-couple-figure {
  width: calc(var(--bead-px, var(--px)) * 50);
  height: calc(var(--bead-px, var(--px)) * 76);
  image-rendering: pixelated;
}
.jack-wardrobe .kc-body {
  max-width: none;
  margin: calc(var(--px) * 8) 0 0;
  font-family: var(--kc-font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-moon-pale);
  text-shadow: 1px 0 0 var(--c-ink), -1px 0 0 var(--c-ink), 0 1px 0 var(--c-ink), 0 -1px 0 var(--c-ink);
}
.jack-wardrobe::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -16px;
  right: -16px;
  top: calc(var(--bead-px, var(--px)) * 70);
  height: calc(var(--px) * 18);
  background: url('../../assets/pixel/ground-strip.png') 50% 0 / calc(var(--px) * 108) 100% repeat-x;
  image-rendering: pixelated;
}
#vestimenta-swatches:empty { display: none; }
.kc-swatches { gap: var(--kc-space-4) 0.75rem; }
@media (max-width: 400px) {
  .kc-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 8rem)); justify-content: center; }
}
.kc-swatch { gap: 0.4rem; }
.kc-swatch__drop {
  --u: var(--px);
  width: calc(var(--px) * 13);
  height: calc(var(--px) * 13);
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--u) var(--c-ink), inset var(--u) var(--u) 0 var(--u) rgb(255 255 255 / 0.18);
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, calc(100% - var(--u)) var(--u), 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, var(--u) calc(100% - var(--u)), 0 calc(100% - var(--u)), 0 var(--u), var(--u) var(--u));
}
.kc-swatch__label { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--c-bone); }

/* ── Regalos: la lluvia de sobres ────────────────────── */
.kc-envelopes {
  justify-items: center;
  max-width: 24rem;
  margin: var(--kc-space-6) auto var(--kc-space-5);
}
.kc-envelopes h3 { font-family: var(--kc-font-display); font-size: var(--kiwi-sub, 1.75rem); font-weight: 400; color: var(--c-moon-pale); }
.kc-envelopes p { color: var(--c-bone); }
/* Tu calaverita: candies, sugar skulls and pumpkins fall into a jack-o'-lantern bucket, in whole-pixel cels. */
.jack-rain {
  position: relative;
  width: 100%;
  height: calc(var(--px) * 52);
  overflow: hidden;
  margin-bottom: var(--kc-space-3);
}
.jack-rain__drop {
  position: absolute;
  top: calc(var(--half-px, var(--stitch)) * -10);
  left: var(--x);
  width: calc(var(--half-px, var(--stitch)) * 10);
  height: calc(var(--half-px, var(--stitch)) * 10);
  margin-left: calc(var(--half-px, var(--stitch)) * -5);
  background: url('../../assets/pixel/sprite-sweets.png') 0 0 / calc(var(--half-px, var(--stitch)) * 30) calc(var(--half-px, var(--stitch)) * 10) no-repeat;
  image-rendering: pixelated;
  animation:
    jack-rain var(--t, 3000ms) steps(5, end) calc(var(--d, 0ms) * -1) infinite,
    jack-flip calc(var(--t, 3000ms) / 2) steps(1, end) calc(var(--d, 0ms) * -1) infinite;
}
.jack-rain__drop--lollipop { background-position: calc(var(--half-px, var(--stitch)) * -10) 0; }
.jack-rain__drop--skull { background-position: calc(var(--half-px, var(--stitch)) * -20) 0; }
.jack-rain__drop--pumpkin {
  width: calc(var(--half-px, var(--stitch)) * 11);
  background: url('../../assets/pixel/sprite-pumpkin.png') 100% 0 / calc(var(--half-px, var(--stitch)) * 22) calc(var(--half-px, var(--stitch)) * 10) no-repeat;
}
/* The bucket stands on a strip of earth; the drops fall behind its rim. */
.jack-rain::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--px) * 9);
  background: url('../../assets/pixel/ground-strip.png') 50% 100% / calc(var(--px) * 108) calc(var(--px) * 18) repeat-x;
  image-rendering: pixelated;
}
/* The bucket waits at the bottom; the drops fall behind its rim. */
.jack-rain__bucket {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--px) * 3);
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 21);
  transform: translateX(-50%);
  background: url('../../assets/pixel/sprite-bucket.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.jack-rain[data-jack-paused] .jack-rain__drop { animation-play-state: paused; }
@keyframes jack-rain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(calc(var(--px) * 3 * var(--s, 1)), calc(var(--px) * 13)); }
  50% { transform: translate(0, calc(var(--px) * 27)); }
  75% { transform: translate(calc(var(--px) * -3 * var(--s, 1)), calc(var(--px) * 41)); }
  100% { transform: translate(0, calc(var(--px) * 56)); }
}
/* Flutter as a 2-cel flip, never a squash: a squeezed sprite breaks its pixels. */
@keyframes jack-flip { 50% { scale: -1 1; } }
.kc-registries { justify-items: center; }

/* ── RSVP: el pase a Spiral Hill ─────────────────────── */
.jack-ticket {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
  border: calc(var(--px) * 6) solid transparent;
  border-image: url('../../assets/pixel/frame-ticket.png') 6 fill / calc(var(--px) * 6) stretch;
  padding: 1rem 0.75rem 1.25rem;
  image-rendering: pixelated;
}
/* Punched notches at mid-height: drawn here, not in the 9-slice, so the stretched edge stays solid. */
.jack-ticket::before,
.jack-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--px) * 3);
  height: calc(var(--px) * 6);
  margin-top: calc(var(--px) * -3);
  background: var(--c-night-1);
  box-shadow: 0 calc(var(--px) * -1) 0 var(--c-ink), 0 var(--px) 0 var(--c-ink);
}
.jack-ticket::before { left: calc(var(--px) * -6); box-shadow: var(--px) 0 0 var(--c-ink), 0 calc(var(--px) * -1) 0 var(--c-ink), 0 var(--px) 0 var(--c-ink); }
.jack-ticket::after { right: calc(var(--px) * -6); box-shadow: calc(var(--px) * -1) 0 0 var(--c-ink), 0 calc(var(--px) * -1) 0 var(--c-ink), 0 var(--px) 0 var(--c-ink); }
.kc-rsvp-attendance { text-align: center; }
.kc-rsvp-attendance legend {
  width: 100%;
  margin-bottom: 0.75rem;
  font-family: var(--kc-font-display);
  font-size: var(--kiwi-sub, 1.75rem);
  line-height: 1;
  color: var(--c-moon-pale);
}
.kc-rsvp-attendance-face { width: 100%; padding: 0 0.75rem; }
.kc-rsvp-attendance-option input:checked + .kc-rsvp-attendance-face { background: var(--c-pumpkin-2); }
.kc-rsvp-attendance-hint,
.kc-rsvp-decline-note,
.kc-rsvp-allocation-note { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--c-bone); }
.kc-field label { font-weight: 700; color: var(--c-moon-pale); text-align: left; }
.kc-field input,
.kc-field select {
  border: var(--px) solid var(--kc-field-line);
  border-radius: 0;
  background: var(--c-ink);
  color: var(--c-moon-pale);
  padding: 0 0.75rem;
}
.kc-rsvp-submit { width: 100%; background: var(--c-pumpkin-2); }
.kc-rsvp-error { color: var(--kc-error); }
.kc-rsvp-deadline { color: var(--c-bone); }
.kc-rsvp-form[inert] .kc-rsvp-attendance-face { cursor: default; }
.kc-rsvp-offline {
  max-width: 26rem;
  margin: var(--kc-space-4) auto 0;
  font-weight: 600;
  color: var(--c-pumpkin-2);
}

/* ── Captura ─────────────────────────────────────────── */
/* KC-Echoes: la cámara pixel levita sobre su lápida */
.jack-cam { width: min(10rem, 46vw); margin: 0 auto var(--kc-space-4); }
.jack-cam svg { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(221, 123, 48, .35)); animation: kc-echoes-levita 4.6s ease-in-out infinite; }
@keyframes kc-echoes-levita { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .jack-cam svg { animation: none; } }
.kc-captura__cta { margin-top: var(--kc-space-5); background: var(--c-night-4); color: var(--c-bone); box-shadow: inset 0 calc(var(--u) * -1) 0 var(--c-ink); }

/* ── Secreto: Jack guarda el mensaje ───────────────── */
.kc-secret__seal {
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 24);
  background: url('../../assets/pixel/sprite-seal-jack.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
}
.kc-secret__seal { position: relative; display: block; animation: jack-float 3.2s steps(4, end) infinite; }
@keyframes jack-float { 50% { transform: translateY(calc(var(--px) * -2)); } }
/* Eye-shine inside the sockets (x 8 and 15, y 7): theme.mjs nudges it one art pixel toward the guest. */
.jack-seal__pupil {
  position: absolute;
  top: calc(var(--px) * (7 + var(--eye-y, 0)));
  left: calc(var(--px) * (8 + var(--eye-x, 0)));
  width: calc(var(--px) * 2);
  height: calc(var(--px) * 2);
  background: var(--c-moon-pale);
}
.jack-seal__pupil + .jack-seal__pupil { left: calc(var(--px) * (15 + var(--eye-x, 0))); }
.kc-secret > summary:hover .kc-secret__seal,
.kc-secret > summary:focus-visible .kc-secret__seal { animation-play-state: paused; }
/* Open: Jack's seal steps aside for the message; 13 s later the message fades and Jack returns (theme.mjs). */
.kc-secret[open] > summary { position: absolute; visibility: hidden; pointer-events: none; }
.kc-secret[open] .kc-secret__card { animation: jack-enter 240ms steps(3, end) both; }
.kc-secret[data-jack-closing] .kc-secret__card { animation: jack-fade-out 300ms steps(3, end) forwards; }
.kc-secret__card:focus { outline: none; }
.kc-secret__card:focus-visible { outline: 3px solid var(--kc-focus); outline-offset: 6px; }
@keyframes jack-fade-out { to { opacity: 0; } }
.kc-secret__hint { letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-pumpkin-2); }
.kc-secret__card { max-width: 28rem; margin-inline: auto; }
.kc-secret__card .kc-title { font-size: var(--kiwi-sub, 1.75rem); margin-bottom: var(--kc-space-4); }
.kc-secret__message { margin: 0 auto; max-width: 28ch; font-size: 1.125rem; color: var(--c-moon-pale); }
.kc-secret__signature { text-wrap: balance; margin-top: var(--kc-space-4); font-family: var(--kc-font-display); font-size: var(--kiwi-sub, 1.75rem); color: var(--c-pumpkin-2); }

/* ── Footer: el castillo bajo la luna ───────────────────
   The castle hill spans the whole footer behind the text; its sky is the section above's night, so no
   divider cuts the moon: the scene is taller than the footer and its moon rises into the section above. The text keeps its place, with an ink shadow for legibility over the art. */
.kc-footer {
  position: relative;
  isolation: isolate;
  min-height: calc(var(--px) * 84);
  padding-top: var(--kc-space-6);
  background: var(--c-night-1);
  color: var(--kc-footer-ink);
}
.kc-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* The sky rises into the empty padding of the section above (never over its content): no divider, one night. */
  /* ...but never shorter than the art itself, or the moon loses its top at 390–430 (box 382 px, art 408 px). */
  inset: min(calc(var(--kc-section-pad) * -0.8), calc(100% - var(--px) * 102)) 0 0;
  background: url('../../assets/pixel/footer-castle.png') 78% 100% / calc(var(--px) * 178) calc(var(--px) * 102) no-repeat;
  image-rendering: pixelated;
}
/* A 1 px ink outline, the pixel-art way: the text reads even where the moon sits behind it. */
.kc-footer__inner {
  text-shadow:
    1px 0 0 var(--c-ink), -1px 0 0 var(--c-ink), 0 1px 0 var(--c-ink), 0 -1px 0 var(--c-ink),
    1px 1px 0 var(--c-ink), -1px -1px 0 var(--c-ink), 1px -1px 0 var(--c-ink), -1px 1px 0 var(--c-ink),
    0 0 calc(var(--px) * 2) var(--c-ink);
}
.kc-footer__inner { gap: 0.6rem; }
.kc-footer__inner p { font-size: 0.875rem; color: var(--kc-footer-muted); }
.kc-footer__mark { letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-moon-pale); }
.kc-footer__icon { display: none; }
.kc-footer__link { color: var(--c-moon-pale); font-size: 0.875rem; }
.jack-sprite--pumpkin {
  display: inline-block;
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 10);
  background: url('../../assets/pixel/sprite-pumpkin.png') 0 0 / calc(var(--px) * 22) calc(var(--px) * 10) no-repeat;
  image-rendering: pixelated;
  vertical-align: middle;
}
.jack-sprite--pumpkin.is-lit { background-position: 100% 0; }
.kc-footer .jack-sprite--pumpkin { margin-bottom: var(--kc-space-3); animation: jack-flicker 1.4s steps(1, end) infinite; }
@keyframes jack-flicker { 40% { background-position: 0 0; } 46% { background-position: 100% 0; } }
.jack-hero__cue .jack-sprite--pumpkin { width: calc(var(--px) * 5.5); height: calc(var(--px) * 5); background-size: calc(var(--px) * 11) calc(var(--px) * 5); background-position: 100% 0; }

/* ── Música: sin pista, el ring no ofrece silencio ───── */
.kc-ring[data-jack-silent] { display: none !important; }
/* Ring: el sello de Jack guarda la canción. Al sonar se mece a dos tiempos bajo un halo de luna. */
.kc-ring {
  --rp: 2px;
  border-radius: 0;
  background: none;
}
.kc-ring > .kc-ring__orbit,
.kc-ring > .kc-ring__letter,
.kc-ring > .kc-ring__bars { display: none; }
.kc-ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--rp) * 24);
  height: calc(var(--rp) * 24);
  margin: calc(var(--rp) * -12) 0 0 calc(var(--rp) * -12);
  background: url('../../assets/pixel/sprite-seal-jack.png') 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 var(--rp) 0 var(--c-ink));
}
.kc-ring[data-kc-state="playing"]::before {
  filter: drop-shadow(0 0 var(--rp) var(--c-moon)) drop-shadow(0 var(--rp) 0 var(--c-ink));
  animation: jack-ring-sway 1.2s steps(2, end) infinite;
}
@keyframes jack-ring-sway { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .kc-ring[data-kc-state="playing"]::before { animation: none; } }

/* ── Reduced motion: el mundo despierto, quieto ──────── */
@media (prefers-reduced-motion: reduce) {
  .jack-gate__label::before { animation: none; }
  .jack-gate[data-gate-state="opening"] .jack-gate__open { animation: none; opacity: 0; }
  .jack-hero__cue { transition: none; }
  .kc-footer .jack-sprite--pumpkin { animation: none; }
  .jack-watcher,
  .jack-pantheon__lights,
  .jack-tomb::after,
  .jack-tomb__peek,
  .jack-pantheon__hint::before,
  .jack-pantheon__hint::after,
  .jack-town__hint::before,
  .jack-town__hint::after,
  .jack-rain__drop,
  .kc-secret__seal,
  .kc-stop.is-lit .jack-stop__lantern { animation: none; }
  .jack-rain__drop { top: auto; bottom: calc(var(--px) * 6); animation: none; }
  .kc-secret[open] .kc-secret__card,
  .kc-secret[data-jack-closing] .kc-secret__card { animation: none; }
}