/* ============================================================================
   MANSIO — DE NACHT
   La home, y sólo la home. UNA idea contada con el scroll: UNA NOCHE.

   El visitante baja y el reloj avanza —21:40 → 07:02—. La casa se apaga
   ventana a ventana, queda UNA encendida, y esa ventana es la web. Al amanecer
   las reservas están hechas. Cada gesto de scroll mueve el argumento.

   ── POR QUÉ ESTA CASA Y NO UNA CIUDAD ───────────────────────────────────────
   La primera versión dibujaba un skyline. Decía «noche», no decía «su casa»:
   cualquier plantilla tiene un skyline. El sujeto del argumento es UN hotel,
   así que hay UNA casa de canal y sus vecinas apagándose antes. La ventana que
   aguanta lleva la BOCA DE ARCO del logotipo: la marca no se estampa encima de
   la escena, la escena está hecha de la marca. Y en la fachada va la
   GEVELSTEEN con el nombre tallado, que es como una casa de canal se llama.

   ── LA FACHADA, QUE ES LO QUE SE REHÍZO EN LA v8 ────────────────────────────
   Hasta la v7 la casa era una silueta negra con rectángulos amarillos: decía
   «casa», no decía «Ámsterdam». Lo que hace que un neerlandés reconozca su
   calle no es la silueta, es el detalle, y son cinco cosas concretas:

     · OP DE VLUCHT — la fachada se inclina hacia delante. Aquí es literal:
       `rotateX` negativo con perspectiva y origen en el suelo. Las ventanas de
       arriba salen un pelo más grandes que las de abajo, que es exactamente lo
       que hace una fachada volcada sobre la calle.
     · EL HASTIAL — trapgevel de cinco peldaños, cada uno con su ALBARDILLA de
       piedra que vuela 2 px por cada lado. La piedra no es el ladrillo: es
       otro color, otro brillo y otra sombra. Las vecinas llevan klokgevel y
       halsgevel, porque una calle de canal no repite el mismo remate.
     · HIJSBALK Y HIJSDEUR — la viga de izar con su gancho, y debajo la puerta
       del desván. Sin eso, la casa es una casita genérica con escalones.
     · LADRILLO CON JUNTA — tendel cada 5 px y perpiaños en dos periodos
       distintos (11 y 17 px) para que el aparejo no se lea a cuadrícula. La
       junta de cal es MÁS CLARA que el ladrillo: de noche es la junta la que
       recoge la luna, y por eso el muro se lee por hiladas y no por color.
     · CARPINTERÍA MÁS CLARA QUE EL MURO — marco, parteluces y montantes en un
       tono hueso. Una ventana de canal es una cuadrícula de vidrios; el vidrio
       apagado NO desaparece —queda vidrio oscuro reflejando cielo—, porque una
       fachada con agujeros donde había ventanas deja de ser una fachada.

   ── PROFUNDIDAD ────────────────────────────────────────────────────────────
   Perspectiva atmosférica de verdad, y no bajando la opacidad: lo lejano tiene
   OTROS colores. Los tokens de material (`--baksteen`, `--voeg`, `--steen`,
   `--hout`) se redeclaran en `.buur` y en `.verte`, así que el mismo CSS pinta
   la protagonista cálida y nítida, las vecinas frías y pálidas, y la otra
   orilla casi disuelta en el cielo. Encima, la bruma.

   ── LA LUZ ─────────────────────────────────────────────────────────────────
   Una ventana iluminada que no ilumina nada es una pegatina. La que aguanta
   derrama sobre el ladrillo de alrededor (`.schijn`), sobre el adoquín
   (`.plassen`) y sobre el agua (`.weerschijn`, roto en tiras y con temblor).
   Y la luz GIRA: de noche una rasante fría desde la derecha —donde está la
   luna—, al amanecer una cálida desde la izquierda. Las dos son capas que se
   relevan con `opacity`; las sombras cambian de lado sin repintar nada.

   ── CÓMO ESTÁ HECHO, Y POR QUÉ ASÍ ──────────────────────────────────────────
   UNA sola línea de tiempo (`view-timeline` nativa) y, colgando de ella, capas
   que animan SÓLO `opacity` y `transform`. Cero JavaScript en el camino feliz,
   cero layout, cero paint: todo compositor. TODO el detalle nuevo es materia
   QUIETA —degradados que se pintan una vez y se quedan en su capa—, así que
   una fachada diez veces más detallada cuesta lo mismo en el hilo principal
   que la silueta que había: nada. Es la forma barata por diseño, no por
   recorte — y es exactamente el argumento que esta web vende.

   ── LA GEOMETRÍA, QUE ES LO QUE SE ROMPIÓ LA PRIMERA VEZ ────────────────────
   El lienzo pegajoso NO aporta altura: `margin-bottom: -100svh`. La altura la
   ponen los seis actos (6 × 100svh) más un remate de 100svh. Con eso el tramo
   `contain` —la parte en que el lienzo está clavado— mide 600svh y cada acto
   cae en un SEXTO exacto del reloj. En la v1 el lienzo sí ocupaba flujo: el
   texto iba un viewport por delante de su hora y el acto 1 no llegaba a verse.

   ── LOS TRES ESTADOS, LOS TRES DIGNOS ───────────────────────────────────────
   · con scroll-driven animations   la noche entera, sin tocar el hilo principal
   · sin ellas, con JS              seis fases por IntersectionObserver, con
                                    transiciones — ni rAF ni scroll listener
   · sin JS, o reduced-motion       la escena se queda en el AMANECER, que es
                                    donde aterriza el argumento. Un póster, no
                                    una animación amputada.
   ========================================================================= */

/* --- el lienzo ----------------------------------------------------------- */
.nacht {
  position: relative;
  padding-bottom: 100svh;      /* el remate: el amanecer se queda quieto */
  background: #070f14;
  view-timeline-name: --klok;
  view-timeline-axis: block;

  /* ── LA ESCENA, EN SEIS NÚMEROS ──────────────────────────────────────────
     Todo lo que se apoya en el suelo cuelga de estas medidas. Cambiar la
     altura del agua movía antes seis reglas; ahora mueve una.               */
  --waterlijn: 20%;                        /* el canal, desde abajo          */
  --kade-hoog: 4.5%;                       /* el muelle, encima del agua     */
  --grond: calc(var(--waterlijn) + var(--kade-hoog));   /* donde se apoya todo*/
  /* LA CASA, y todo escala con ella. El tope de 216 px dejaba en un 1920×1080
     una casa del 11 % del cuadro, perdida en cielo vacío. Subirlo a secas no
     vale: lo que limita es el ALTO, porque la fachada mide 2,42 veces su ancho
     y tiene que caber entre el suelo y la cabecera. Manda el menor de los dos,
     y una pantalla ancha pero BAJA conserva su casa corta. */
  --huisbreed: clamp(126px, min(15vw, 23svh), 288px);
  --huishoog: calc(var(--huisbreed) * 2.42);   /* 1 : 2,42, la proporción de
                                       una casa de canal: el impuesto iba por
                                       metros de fachada y por eso son altas */
  --brandend: #f7dda4;                     /* la luz que sale de una ventana */

  /* ── LA MATERIA ─────────────────────────────────────────────────────────
     Estos ocho tokens son TODO el material de la escena. `.buur` y `.verte`
     los redeclaran, y con eso —sin una sola regla duplicada— la misma fachada
     se pinta cálida y nítida delante, y fría y pálida al fondo.             */
  --baksteen-top: #2b1a13;                 /* el muro recoge cielo arriba    */
  --baksteen-bot: #150d0a;                 /* y se hunde en sombra abajo     */
  --gloed-steen: rgba(140, 82, 56, .16);   /* la mancha de cocción           */
  --voeg: rgba(180, 154, 128, .13);        /* el tendel: la junta de cal, que
                                              de noche es MÁS clara que el
                                              ladrillo porque recoge la luna */
  --voeg-kop: rgba(180, 154, 128, .028);   /* el perpiaño, CINCO veces más
                                              flojo que el tendel. No es un
                                              capricho de valor: con dos
                                              gradientes, el perpiaño sale
                                              corrido de arriba abajo en vez de
                                              trabado a matajunta, y en cuanto
                                              se ve, el muro se lee a
                                              cuadrícula. Tiene que estar —da
                                              la textura— y no tiene que
                                              verse. Mirado al 200 %, que es
                                              donde se delata.               */
  --steen: #564d41;                        /* albardilla, dintel, alféizar   */
  --steen-licht: #6f6557;
  --hout: #8b7d66;                         /* carpintería: clara sobre muro  */
  --roede: rgba(26, 18, 12, .85);          /* parteluz y montante            */
}

.nacht-doek {
  position: sticky; top: 0;
  height: 100svh;
  margin-bottom: -100svh;      /* no aporta flujo: la altura la dan los actos */
  overflow: hidden;
  isolation: isolate;
}

/* --- el cielo: tres capas que se relevan -------------------------------- */
.lucht { position: absolute; inset: 0; will-change: opacity; }
.lucht-schemer  { background: linear-gradient(178deg, #26364a 0%, #5d5566 46%, #a8815f 82%, #c99a6e 100%); opacity: 1; }
.lucht-nacht    { background: linear-gradient(178deg, #060c16 0%, #0e1c2a 50%, #1b3242 100%); opacity: 0; }
/* EL AMANECER, MEDIDO. La v8b lo pintaba claro de arriba abajo, y con eso el
   párrafo del acto 6 —tinta clara— daba 2,07:1 sobre su propio cielo. No se
   dedujo del degradado: se fotografió la escena sin texto y se leyeron los
   píxeles que hay detrás de cada línea.
   El arreglo no es oscurecer la tinta: es que un amanecer de verdad NO es
   claro de arriba abajo. A las siete de la mañana de septiembre el cielo alto
   sigue siendo azul profundo y lo que arde es una banda estrecha en el
   horizonte. Pintado así, el texto claro tiene su fondo oscuro donde vive
   —del 0 al 60 %— y el naranja cae justo donde está el agua y la otra orilla,
   que es donde tiene que estar. Contraste y verdad, en el mismo cambio. */
.lucht-dageraad { background: linear-gradient(178deg, #101f33 0%, #21314b 30%, #3e4a63 58%, #7d6b74 68%, #c99b78 82%, #f2cda2 100%); opacity: 0; }

/* El resplandor de la ciudad sobre los tejados. Sin él, una fachada casi negra
   contra un cielo casi negro no tiene silueta — y el filo no se puede pintar
   porque `clip-path` se come bordes y sombras internas. */
.gloed {
  position: absolute; left: 50%; bottom: 16%;
  width: min(1240px, 130vw); height: 44svh; transform: translateX(-50%);
  background: radial-gradient(58% 100% at 50% 100%, rgba(126, 158, 190, .22), transparent 72%);
  opacity: 0;
}

/* ── DÓNDE VA `will-change` Y DÓNDE NO ──────────────────────────────────────
   Cada `will-change` es una capa de compositor reservada de antemano: memoria
   de GPU y trabajo de preparación al cargar. Con la fachada nueva salían unas
   treinta y cinco, y en el móvil aparecía una tarea larga en el ARRANQUE —
   nunca durante el scroll, pero aparecía, y antes no estaba.
   Se queda sólo donde de verdad paga: las tres capas de cielo a pantalla
   completa, la luna, el reloj, el texto de los actos, la ventana que aguanta,
   el reguero del agua, el temblor y la tarjeta. Todo lo demás lo promociona
   Chrome solo mientras su animación corre, que es exactamente cuando hace
   falta. Medido antes y después; el número está en el parte.                */

/* --- las estrellas ------------------------------------------------------- */
.sterren { position: absolute; inset: 0 0 46% 0; width: 100%; height: 54%; opacity: 0; }

/* --- la luna: pequeña y pálida. Un disco gris grande es una pegatina. ---- */
.maan {
  position: absolute; right: 13%; top: 15%;
  width: clamp(26px, 3.2vw, 46px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffaf0, #eee3cd 58%, #d3c6a8);
  box-shadow: 0 0 44px 10px rgba(255, 250, 240, .16);
  opacity: 0; will-change: opacity, transform;
}

/* ============================================================================
   LA OTRA ORILLA — perspectiva atmosférica
   Lo que está lejos no es «lo mismo más transparente»: es otro color. Estos
   tejados llevan los tokens del cielo, no los del ladrillo, y no tienen ni una
   ventana dibujada — a esa distancia no se distinguen. Compiten en NADA con la
   protagonista, que es justo lo que se les pide.
   ========================================================================= */
/* Catorce, y repartidas con `flex: 1` de borde a borde: la otra orilla es una
   HILERA CONTINUA, no siete edificios sueltos. La primera versión las centraba
   con anchos fijos, así que se agrupaban justo detrás de la fila de delante y
   no se veía ni una: el fondo estaba, pero escondido tras el sujeto. */
.verte {
  position: absolute; left: -6%; right: -6%; bottom: calc(var(--grond) - 1%);
  height: clamp(44px, 11svh, 102px); z-index: 1; opacity: .5;
  display: flex; align-items: flex-end; gap: 2px;
}
.verte i {
  flex: 1 1 0; height: 62%;
  /* MÁS CLARAS que el cielo a esa altura, no más oscuras: a esa distancia lo
     que se ve de un edificio de noche es el aire iluminado que tiene delante.
     Con el mismo azul que el cielo, la otra orilla sencillamente no existía —
     y con demasiado contraste era un recortable de cartón delante del
     amanecer. La otra orilla tiene que estar y no mirarse. */
  background: linear-gradient(180deg, #4a596b, #3a4757);
}
.verte i:nth-child(7n+1) { flex-grow: 1.1; height: 48%; clip-path: polygon(0 100%, 0 22%, 50% 0, 100% 22%, 100% 100%) }
.verte i:nth-child(7n+2) { flex-grow: .74; height: 72%; clip-path: polygon(0 100%, 0 12%, 26% 12%, 26% 4%, 74% 4%, 74% 12%, 100% 12%, 100% 100%) }
.verte i:nth-child(7n+3) { flex-grow: 1.3; height: 55%; clip-path: polygon(0 100%, 0 26%, 100% 8%, 100% 100%) }
.verte i:nth-child(7n+4) { flex-grow: .82; height: 84%; clip-path: polygon(0 100%, 0 16%, 34% 16%, 50% 0, 66% 16%, 100% 16%, 100% 100%) }
.verte i:nth-child(7n+5) { flex-grow: 1.15; height: 60%; clip-path: polygon(0 100%, 0 14%, 100% 14%, 100% 100%) }
.verte i:nth-child(7n+6) { flex-grow: .68; height: 76%; clip-path: polygon(0 100%, 0 10%, 50% 0, 100% 10%, 100% 100%) }
.verte i:nth-child(7n+7) { flex-grow: 1.24; height: 50%; clip-path: polygon(0 100%, 0 30%, 60% 12%, 100% 30%, 100% 100%) }

/* LA BRUMA, y es la pieza que hace la profundidad. Se apoya en el AGUA —no en
   el muelle—, porque la niebla de un canal sale del agua: al amanecer vela el
   reflejo y aplana la otra orilla, que es exactamente lo que hace la niebla de
   verdad. Va por delante del agua y de la orilla lejana, y por detrás del
   muelle y de la fila de casas: lo cercano no se empaña.
   El gris es NEUTRO a propósito: sobre el azul de la noche lee bruma fría, y
   sobre el naranja del amanecer lee bruma cálida, sin necesitar dos capas. */
.nevel {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 48%; z-index: 5;
  background: linear-gradient(0deg, rgba(196, 196, 200, .34), rgba(190, 194, 202, .15) 44%, transparent 86%);
  opacity: .5;
}

/* ============================================================================
   EL MUELLE Y LA FILA
   ========================================================================= */
.kade {
  position: absolute; left: 0; right: 0; bottom: var(--grond);
  display: flex; align-items: flex-end; justify-content: center;
  /* SE TOCAN. Una fila de canal es una hilera con medianeras: entre casa y
     casa hay una junta, no un trozo de cielo. Con 24 px de aire eran tres
     torres sueltas; con 2 px es una calle. */
  gap: 2px;
  z-index: 5;
}

.grachtenhuis, .buur { position: relative; }

/* LA CASA. `rotateX` negativo con el origen en el suelo: el remate se viene
   hacia el que mira. Eso es «op de vlucht», y es lo que hace que una fachada
   de Ámsterdam sea de Ámsterdam. Es un transform: no cuesta ni un pixel de
   layout, y se compone una vez.

   ── POR QUÉ SE LLAMA `grachtenhuis` Y NO `huis` ────────────────────────────
   Porque `huis` YA ESTABA COGIDO. El guion de la conversación marca cada
   burbuja con quién habla: `.bel.gast` el huésped y `.bel.huis` el hotel. Con
   la casa llamándose `.huis`, cada frase del hotel heredaba `width` y `height`
   de un edificio: burbujas de 537 px de alto detrás del texto, dentro de la
   tarjeta. Se veía como una mancha crema desplazada detrás de cada frase y se
   achacó a un artefacto de captura durante dos versiones. No lo era.
   La lección no es «renombra»: es que una hoja que se cuelga de una página que
   ya tiene otra hoja comparte el espacio de nombres con ella. `probar-
   regresies.js` lo vigila ahora: ninguna clase del gesto de reserva puede
   aparecer en `nacht.css` fuera de `.nacht-widget`. */
.grachtenhuis {
  width: var(--huisbreed); height: var(--huishoog);
  transform: perspective(1100px) rotateX(-3.4deg);
  transform-origin: 50% 100%;
  z-index: 1;
}

/* LAS VECINAS. Mismo CSS, otro material: más frías, más pálidas, y sin nada
   del detalle fino —ni gevelsteen, ni hijsbalk, ni escalones—. Ahí es donde se
   nota la distancia. */
.buur {
  width: calc(var(--huisbreed) * .66);
  /* ── 2026-08-14 · LA VECINA BAJA UN PUNTO, Y NO POR GUSTO ────────────────
     El rótulo de la cuenta se apoya, en el móvil y al amanecer, sobre la
     vecina de la izquierda. Medido con meet-scene-contrast tras arreglar su
     scroll: 2,52:1. Se aisló apagando capas una a una, y el píxel que decidía
     NO era el ladrillo (que ya es casi negro) sino la PIEDRA y la MADERA de
     sus huecos: #55606d con la rasante del amanecer encima se va a #7f7874.
     Así que bajan esos tres tokens —y sólo los de `.buur`, nunca los de la
     casa protagonista—. Es además lo que esta hoja ya dice diez líneas más
     arriba: las vecinas no llevan detalle fino porque son la DISTANCIA. Aquí
     la distancia se paga en luminancia, que es la moneda que pedía la puerta.
     Valores de antes: #1e2833 · #121a22 · #3b4450 · #4a5461 · #55606d.       */
  --baksteen-top: #18212b;
  --baksteen-bot: #0e151c;
  --gloed-steen: rgba(70, 96, 122, .12);
  --voeg: rgba(126, 152, 178, .085);
  --voeg-kop: rgba(126, 152, 178, .02);
  --steen: #2f3742;
  --steen-licht: #3a4350;
  --hout: #333b45;
  --roede: rgba(10, 16, 22, .7);
  opacity: .92;
}
.buur-links  { height: calc(var(--huishoog) * .72) }
.buur-rechts { height: calc(var(--huishoog) * .8) }

/* --- el cuerpo de ladrillo ---------------------------------------------- *
   Cinco capas y ni una imagen: la mancha de cocción, la sombra del lado que no
   ve luna, el perpiaño flojo cada 13 px, el TENDEL cada 5 px —que es la capa
   que hace que el muro se lea por hiladas— y el degradado del propio muro.
   La primera versión llevaba dos juegos de perpiaños tan marcados como el
   tendel: el resultado era papel milimetrado, no ladrillo. La junta vertical
   tiene que estar y casi no verse; ésa es toda la diferencia.               */
.gevel {
  position: absolute; inset: 19% 0 0 0;
  background-color: var(--baksteen-bot);
  background-image:
    radial-gradient(130% 66% at 26% 14%, var(--gloed-steen), transparent 64%),
    radial-gradient(88% 50% at 78% 70%, rgba(0, 0, 0, .34), transparent 68%),
    repeating-linear-gradient(90deg, var(--voeg-kop) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(180deg, var(--voeg) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--baksteen-top), var(--baksteen-bot));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);   /* el vuelo del hastial */
}
.buur .gevel { inset: 17% 0 0 0 }

/* ── LA SOMBRA SOBRE LA MEDIANERA, Y DÓNDE TIENE QUE VIVIR ──────────────────
   Estaba en `.grachtenhuis`, o sea en la CAJA ENTERA — que incluye el hastial,
   y el hastial no es muro sino peldaños con cielo entre ellos. Una sombra
   exterior se pinta fuera del borde y se recorta dentro: el cielo de fuera
   salía oscurecido y el de dentro no, y aparecía un rectángulo del tamaño
   exacto de la casa flotando en el amanecer. A 216 px no se veía; a 1920, con
   la casa a 257, es lo primero que se ve. Verificado apagándola. Baja al
   CUERPO DE LADRILLO, que es lo que la proyecta. */
.grachtenhuis > .gevel {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), -7px 0 14px -4px rgba(0, 0, 0, .75);
}

/* LA WATERLIJST: el filete de piedra que separa el hastial del cuerpo.
   Se llamaba `.lijst` a secas, y `.lijst` es la lista con viñeta de arco de
   `mansio.css` — la que cierra esta misma home. Resultado: el `<ul>` del final
   de la página se volvía `position: absolute`, de 3 px de alto y un 104 % de
   ancho, y empujaba el documento 29 px a la derecha. La página entera tenía
   scroll horizontal y el bloque de cierre estaba roto. Segunda colisión de
   nombres de la noche, después de `.huis`; ahora hay un candado que compara
   las dos hojas enteras. */
.waterlijst {
  position: absolute; left: -2%; right: -2%; top: 0; height: 3px;
  background: linear-gradient(180deg, var(--steen-licht), var(--steen));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

/* --- EL HASTIAL ESCALONADO (trapgevel) ----------------------------------- *
   Cinco peldaños de anchura decreciente, cada uno con su albardilla de piedra
   volando 2 px por lado. La albardilla del peldaño de abajo queda tapada en el
   centro por el de arriba: así es como se ve un trapgevel de verdad.        */
.trap {
  position: absolute; left: 0; right: 0; top: 0; height: 19%;
  display: flex; flex-direction: column-reverse; align-items: center;
}
.trap i {
  position: relative; flex: 1 0 0; width: 100%;
  background-color: var(--baksteen-bot);
  background-image:
    repeating-linear-gradient(90deg, var(--voeg-kop) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(180deg, var(--voeg) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--baksteen-top), var(--baksteen-bot));
}
.trap i:nth-child(2) { width: 78% }
.trap i:nth-child(3) { width: 57% }
.trap i:nth-child(4) { width: 38% }
.trap i:nth-child(5) { width: 21% }
.trap i::after {                                   /* la albardilla */
  content: ''; position: absolute; left: -2px; right: -2px; top: -2.5px; height: 2.5px;
  background: linear-gradient(180deg, var(--steen-licht), var(--steen));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.buur .trap { display: none }

/* La luz del amanecer sobre el hastial: los peldaños no pueden quedarse fríos
   mientras el muro se calienta. Misma coreografía que `.ochtendlicht`. */
.trap i::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(255, 186, 122, .40), rgba(255, 186, 122, .06) 62%, transparent);
  opacity: 0;
}

/* --- LA VIGA DE IZAR Y LA PUERTA DEL DESVÁN ------------------------------ */
.hijsbalk {
  position: absolute; left: 50%; top: 2.6%; width: 30%; height: 4px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #7b6039 22%, #2e2317);
  border-radius: 1px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .6);
}
.hijsbalk::after {                                 /* el gancho */
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 6px; height: 9px; transform: translateX(-50%);
  border: 1.4px solid #7b6039; border-top: 0; border-left: 0;
  border-radius: 0 0 70% 0;
}
.luik {
  position: absolute; left: 50%; top: 8.4%; width: 13%; height: 6.4%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #17110c, #0c0806);
  box-shadow: 0 0 0 1px var(--hout), 0 2px 3px rgba(0, 0, 0, .6);
}
.luik::after {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--hout); opacity: .55;
}

/* --- LA GEVELSTEEN ------------------------------------------------------- *
   Una casa de canal lleva su nombre TALLADO en una piedra puesta en el muro.
   Ahí va la marca: no estampada encima de la escena, sino parte del edificio.
   El relieve es todo sombra — tinta oscura con un filo de luz por debajo, que
   es como se lee un hueco tallado cuando la luz viene de arriba.            */
.steen {
  position: absolute; left: 50%; top: 2.6%; width: 64%;
  transform: translateX(-50%);
  padding: .34em 0 .40em; text-align: center;
  border-radius: 2px;
  background: linear-gradient(180deg, #7d7466, #5a5246 60%, #4a4339);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, .10),
    0 2px 5px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(6px, .92vw, 12px);
  line-height: 1;
}
.steen span {
  color: #1f1a14;
  letter-spacing: .32em; text-indent: .32em;
  text-shadow: 0 1px 0 rgba(232, 220, 196, .38);
}
/* su momento: una rasante cálida cruza la piedra cuando el visitante pasa por
   delante, y otra vez al amanecer. Ni antes ni después. */
.steen i {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(100deg, transparent 18%, rgba(255, 226, 176, .40) 48%, transparent 78%);
  opacity: 0;
}

/* --- LAS VENTANAS -------------------------------------------------------- */
.ramen {
  position: absolute; inset: 12.5% 13% 22% 13%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: .82fr 1.5fr .92fr;
  gap: 9% 15%;
}
.buur .ramen { inset: 13% 17% 12% 17%; grid-template-rows: repeat(3, 1fr); gap: 12% 17% }

/* El hueco: vidrio oscuro que refleja cielo, dintel y alféizar de piedra,
   marco de madera clara, y la jamba de arriba en sombra porque el muro vuela
   sobre ella. Esto se pinta UNA vez y no se vuelve a tocar en toda la noche. */
.raam {
  position: relative; --aan: .84;
  /* el vidrio apagado: refleja un poco de cielo y lleva su reflejo sesgado —
     un rectángulo negro es un agujero, no una ventana */
  background:
    linear-gradient(114deg, transparent 42%, rgba(146, 178, 210, .055) 50%, transparent 58%),
    linear-gradient(178deg, #1b2735, #0e151d);
  box-shadow:
    0 0 0 1px var(--hout),
    0 -3px 0 -1px var(--steen),
    0 2px 0 1px var(--steen-licht),
    inset 0 2px 3px rgba(0, 0, 0, .7);
}
/* LA LUZ, que es una capa aparte: al apagarse queda el vidrio, no un agujero.
   Ésta es la diferencia entre una fachada de noche y una fachada con huecos. */
/* La luz de dentro no es un rectángulo de un color: la bombilla está arriba, y
   por eso el vidrio va de blanco cálido en la cabeza a ámbar en el alféizar. */
.raam::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(130% 78% at 50% 4%, #fff6dc, rgba(255, 246, 220, 0) 72%),
    linear-gradient(178deg, var(--brandend), #dfba79);
  box-shadow: 0 0 15px 2px rgba(247, 221, 164, .32);
  opacity: var(--aan);
}
.buur .raam { --aan: .7 }
.buur .raam::before {
  background:
    radial-gradient(130% 78% at 50% 4%, #f6e9c6, rgba(246, 233, 198, 0) 72%),
    linear-gradient(178deg, #e9d5a6, #c9ac7c);
  box-shadow: 0 0 11px 1px rgba(247, 221, 164, .2);
}
/* no todas las ventanas de una casa tienen la misma luz dentro */
.raam:nth-child(2n) { --aan: .74 }
.raam:nth-child(3n) { --aan: .92 }

/* PARTELUZ Y MONTANTES, encima de la luz: una ventana de canal es una
   cuadrícula de vidrios. Dos travesaños y un parteluz = seis vidrios. */
.raam::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, transparent calc(50% - .6px), var(--roede) 0 calc(50% + .6px), transparent 0),
    linear-gradient(180deg,
      transparent calc(34% - .5px), var(--roede) 0 calc(34% + .5px),
      transparent 0 calc(67% - .5px), var(--roede) 0 calc(67% + .5px), transparent 0);
}
.buur .raam::after {
  background-image:
    linear-gradient(90deg, transparent calc(50% - .5px), var(--roede) 0 calc(50% + .5px), transparent 0),
    linear-gradient(180deg, transparent calc(50% - .5px), var(--roede) 0 calc(50% + .5px), transparent 0);
}

/* LA VENTANA: la que aguanta toda la noche. Es la web, y es el logotipo a
   tamaño de casa — arco de medio punto sobre jambas rectas. Manda sobre las
   demás por tamaño, por arco y por el cerco de piedra que sólo tiene ella. */
/* z-index 2: las dos rasantes —la fría de la noche y la cálida del amanecer—
   van DELANTE de las ventanas pequeñas, para que el vidrio apagado también
   recoja la luz que hay fuera. Ésta no: la ventana que aguanta es la única
   fuente de luz de la escena y nada se le pone por delante. */
.raam-groot {
  position: relative; z-index: 2;
  grid-column: 1 / -1; grid-row: 2;
  margin-inline: 11%;
  border-radius: 50% 50% 2px 2px / 53% 53% 2px 2px;
  /* La cabeza del arco recoge más cielo que el pie: así el abanico de la
     tracería se silueta contra el vidrio incluso con la luz apagada, y el
     hueco deja de ser un agujero negro los tres primeros actos. */
  background: linear-gradient(178deg, #24313f, #0b1219 78%);
  box-shadow:
    0 0 0 2px var(--steen),
    0 3px 0 1px var(--steen-licht),
    inset 0 3px 5px rgba(0, 0, 0, .7);
}
.raam-groot::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50% 50% 2px 2px / 53% 53% 2px 2px;
  background: linear-gradient(178deg, #fffaea, #fbe6b4);
  box-shadow: 0 0 55px 10px rgba(247, 221, 164, .42);
  opacity: 0; will-change: opacity;
}
/* El abanico del arco arriba y la cuadrícula abajo: el vidriado de un ventanal
   de canal. `repeating-conic-gradient` sale de un centro, que es justo lo que
   hace un abanico — no hay otra forma tan barata de dibujarlo. */
.raam-groot::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50% 50% 2px 2px / 53% 53% 2px 2px;
  background-image:
    repeating-conic-gradient(from 186deg at 50% 100%, var(--roede) 0 .9deg, transparent .9deg 15deg),
    linear-gradient(90deg, transparent calc(33.3% - .6px), var(--roede) 0 calc(33.3% + .6px),
                    transparent 0 calc(66.6% - .6px), var(--roede) 0 calc(66.6% + .6px), transparent 0),
    linear-gradient(180deg, transparent calc(50% - .7px), var(--roede) 0 calc(50% + .7px), transparent 0);
  background-size: 100% 52%, 100% 48%, 100% 100%;
  background-position: 50% 0, 50% 100%, 0 0;
  background-repeat: no-repeat;
}

/* --- LA PUERTA, EL MONTANTE EN ABANICO Y LOS ESCALONES ------------------- */
.deur {
  position: absolute; left: 50%; bottom: 0; width: 27%; height: 19%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: linear-gradient(180deg, #241a12, #0e0a07);
  box-shadow: 0 0 0 1.5px var(--steen), inset 0 2px 4px rgba(0, 0, 0, .7);
}
.waaier {
  position: absolute; left: 6%; right: 6%; top: 4%; height: 30%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background-color: rgba(247, 221, 164, .8);
  background-image: repeating-conic-gradient(from 182deg at 50% 100%, var(--roede) 0 1.6deg, transparent 1.6deg 16deg);
  box-shadow: 0 0 10px 2px rgba(247, 221, 164, .3);
}
/* Los escalones: tres, y cada uno más ancho que el de arriba. Son sombras con
   `spread` creciente — un `clip-path` habría recortado también la barandilla,
   que es hija suya. */
.stoep {
  position: absolute; left: 50%; bottom: -3%; width: 30%; height: 1.4%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #7b7160, #544c40);
  box-shadow:
    0 2px 0 2px #625a4c,
    0 5px 0 5px #4a4338,
    0 5px 8px 6px rgba(0, 0, 0, .55);
}
/* la barandilla: dos balaustres de hierro que suben hasta la puerta, con el
   filo que les saca la farola — el hierro de noche se ve por su brillo */
.stoep::before, .stoep::after {
  content: ''; position: absolute; bottom: 0; width: 1.5px; height: 820%;
  background: linear-gradient(180deg, #5a6570, #12181d);
  box-shadow: 0 0 4px rgba(247, 221, 164, .3);
}
.stoep::before { left: -14% }
.stoep::after  { right: -14% }

/* --- LA LUZ QUE SALE, Y LA LUZ QUE GIRA ---------------------------------- *
   `.schijn` es el derrame de la ventana encendida sobre su propio ladrillo.
   `.nachtlicht` y `.ochtendlicht` son la rasante: fría desde la derecha —donde
   está la luna— y cálida desde la izquierda al amanecer. Se relevan con
   opacidad, y con eso las sombras cambian de lado sin repintar nada.        */
.schijn {
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 34% at 50% 44%, rgba(247, 221, 164, .26), transparent 72%),
    linear-gradient(180deg, transparent 44%, rgba(247, 221, 164, .1) 62%, transparent 92%);
  opacity: 0;
}
.nachtlicht {
  position: absolute; inset: 0;
  background: linear-gradient(258deg, rgba(150, 182, 214, .17), rgba(150, 182, 214, .03) 46%, rgba(0, 0, 0, .28));
  opacity: 0;
}
/* La rasante del amanecer entraba a .52 por la izquierda, y a esa fuerza la
   veladura cálida CASI SUSTITUYE al ladrillo: la fachada de la vecina pasaba
   de #1e2833 a #937a62. Justo ahí, en el móvil, se apoya el rótulo de la
   cuenta — 2,52:1. Baja a .38 (y el tramo medio a .12), que es el número al
   que el fondo cae por debajo del techo que exige AA con la tinta del reloj.
   No es aflojar el amanecer: es que a las 06:12 el sol todavía no le ha dado
   a esa fachada. Lo dijo la puerta, no el ojo. */
.ochtendlicht {
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(255, 198, 142, .34), rgba(255, 182, 128, .11) 52%, rgba(84, 96, 140, .26));
  opacity: 0;
}

/* --- LAS VECINAS, CON SU REMATE PROPIO ----------------------------------- *
   Una calle de canal no repite el mismo hastial dos veces. A la izquierda un
   KLOKGEVEL —campana, todo curva—, a la derecha un HALSGEVEL —cuello con su
   frontón—. Los dos con el filo de piedra, y ninguno con más detalle: están
   más lejos, y competir en nitidez con la protagonista es el error que se
   arregló aquí.                                                             */
.kroon { position: absolute; left: 0; right: 0; top: 0; height: 17%; }
.kroon::before, .kroon::after {
  content: ''; position: absolute;
  background: linear-gradient(180deg, var(--baksteen-top), var(--baksteen-bot));
}
/* KLOKGEVEL: hombros, y encima la campana. Un solo bloque redondeado salía
   igloo; un remate de canal son DOS piezas, y por eso se reconoce. */
.buur-links .kroon::before {
  left: 0; right: 0; bottom: 0; height: 38%;
  border-radius: 14% 14% 0 0 / 100% 100% 0 0;
  box-shadow: inset 0 1.4px 0 var(--steen-licht);
}
.buur-links .kroon::after {
  left: 31%; right: 31%; top: 0; bottom: 22%;
  border-radius: 50% 50% 0 0 / 82% 82% 0 0;
  box-shadow: inset 0 1.4px 0 var(--steen-licht), inset 1.2px 0 0 var(--steen), inset -1.2px 0 0 var(--steen);
}
/* HALSGEVEL: hombros rectos con su albardilla y, encima, el cuello rematado
   por un frontón. Es el remate más de Ámsterdam después del escalonado. */
.buur-rechts .kroon::before {
  left: 0; right: 0; bottom: 0; height: 40%;
  box-shadow: inset 0 1.6px 0 var(--steen-licht);
}
.buur-rechts .kroon::after {
  left: 33%; right: 33%; top: 0; bottom: 20%;
  clip-path: polygon(0 100%, 0 26%, 14% 26%, 50% 0, 86% 26%, 100% 26%, 100% 100%);
  box-shadow: inset 1.2px 0 0 var(--steen), inset -1.2px 0 0 var(--steen);
}

/* ============================================================================
   EL MUELLE Y EL CANAL
   ========================================================================= */
.straat {
  position: absolute; left: 0; right: 0; bottom: var(--waterlijn);
  height: var(--kade-hoog); z-index: 4;
  background:
    radial-gradient(26% 200% at 30% -30%, rgba(247, 221, 164, .12), transparent 66%),
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, rgba(33, 40, 48, .9) 0%, rgba(15, 20, 26, .96) 100%);
  box-shadow: inset 0 -1px 0 rgba(150, 176, 200, .2);    /* el filo del muelle */
}
/* los charcos de luz: sólo existen si hay una ventana encendida que los haga */
.plassen {
  position: absolute; left: 0; right: 0; bottom: var(--waterlijn);
  height: calc(var(--kade-hoog) + 3%); z-index: 4;
  background:
    radial-gradient(24% 150% at 50% -30%, rgba(247, 221, 164, .3), transparent 70%),
    radial-gradient(9% 110% at 50% 0%, rgba(247, 221, 164, .26), transparent 74%);
  opacity: 0;
}

/* la farola: su halo, su charco, y se apaga al amanecer como se apagan */
.lantaarn {
  position: absolute; left: 29%; bottom: calc(var(--grond) - .6%);
  width: 2.5px; height: clamp(66px, 11svh, 124px); z-index: 6;
  background: linear-gradient(180deg, #2f3941, #0b1015);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .6);
}
.lantaarn::before {
  content: ''; position: absolute; left: 50%; top: -15px;
  width: 14px; height: 16px; transform: translateX(-50%);
  clip-path: polygon(24% 0, 76% 0, 100% 88%, 88% 100%, 12% 100%, 0 88%);
  background: linear-gradient(180deg, #fff0cd, #dda85e);
  box-shadow: 0 0 22px 6px rgba(247, 221, 164, .5);
}
.lantaarn::after {
  content: ''; position: absolute; left: 50%; top: -8px;
  width: 170px; height: 170px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 221, 164, .17), rgba(247, 221, 164, .05) 38%, transparent 66%);
}

/* EL AGUA NO ES UN COLOR: es el cielo, más oscuro. Por eso el canal se declara
   SEMITRANSPARENTE sobre el mismo cielo que ya está pintado detrás — de noche
   sale negro azulado, y al amanecer se calienta solo, sin una capa más y sin
   una línea de coreografía. Opaco, el canal seguía siendo un rectángulo negro
   a las siete de la mañana, que es la hora a la que el agua de un canal está
   más bonita. */
.gracht {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--waterlijn);
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 18, 26, .78) 0%, rgba(5, 9, 14, .94) 100%);
}

/* EL REFLEJO. Es la misma fila, volteada sobre la línea del agua y apagada al
   mismo compás — cuando la casa se apaga, su reflejo se apaga. Pero un reflejo
   PIERDE detalle: el del agua no lleva ni gevelsteen, ni hijsbalk, ni
   escalones, ni carpintería fina. Sale barato y además es lo que hace el agua.
   Y no se inclina: lo que se refleja es el plano, no el volumen. */
.kade-spiegel {
  bottom: var(--waterlijn);
  transform: scaleY(-.42); transform-origin: bottom;
  opacity: .38; z-index: 2;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .45) 44%, transparent 82%);
          mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .45) 44%, transparent 82%);
}
.kade-spiegel .grachtenhuis { transform: none }
.kade-spiegel .raam, .kade-spiegel .raam-groot { box-shadow: none }
.kade-spiegel .raam::after, .kade-spiegel .raam-groot::after { display: none }
.kade-spiegel .gevel { box-shadow: none }

/* EL AGUA QUE ROMPE EL REFLEJO. No es un espejo: son tiras. `.rimpel` son
   bandas del color del canal pintadas ENCIMA del reflejo —capa quieta, se
   rasteriza una vez— y `.deining` es una segunda trama que se mueve muy
   despacio. El reflejo de debajo no se vuelve a pintar nunca: sólo se compone.
   Un temblor de agua por el precio de un `translateY`. */
.rimpel {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--waterlijn);
  z-index: 3;
  background: repeating-linear-gradient(180deg,
    rgba(5, 12, 18, .6) 0 1.2px, rgba(5, 12, 18, 0) 2.8px 6px);
}
.deining {
  position: absolute; left: -2%; right: -2%; bottom: 0; height: var(--waterlijn);
  z-index: 3;
  background: repeating-linear-gradient(179deg,
    rgba(140, 176, 208, .055) 0 1px, transparent 1px 9px);
  animation: deinen 19s ease-in-out infinite;
  will-change: transform;
}
@keyframes deinen {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(4px) }
}

/* EL REGUERO de la ventana encendida sobre el agua: se estira hacia el que
   mira y se rompe en trozos, que es lo que hace una luz sobre un canal. */
.weerschijn {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(44px, 6vw, 92px); height: var(--waterlijn);
  transform: translateX(-50%);
  opacity: 0; z-index: 3; will-change: opacity;
}
.weerschijn i {
  position: absolute; inset: 0;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: repeating-linear-gradient(180deg,
    rgba(247, 221, 164, .6) 0 1.6px, rgba(247, 221, 164, 0) 1.6px 5px);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 34%, #000 88%, transparent 100%);
          mask-image: linear-gradient(0deg, transparent 0, #000 34%, #000 88%, transparent 100%);
  filter: blur(1.2px);
  animation: deinen 13s ease-in-out infinite reverse;
}

/* --- el reloj ------------------------------------------------------------
   Un número enorme en el centro se peleaba con el texto del acto Y con el
   hastial de la casa. Un reloj no necesita gritar: es un sello de hora arriba
   a la izquierda, alineado con el margen del sitio, con su filete debajo.
   Deja libre el centro, que es donde vive la casa.                          */
.klok {
  position: absolute; top: clamp(96px, 14svh, 138px);
  display: grid;
  font-family: var(--serif); font-optical-sizing: auto;
  font-size: clamp(1.15rem, 2.6vw, 1.65rem); line-height: 1;
  left: max(var(--marge), calc((100% - var(--breed)) / 2));
  letter-spacing: .1em; color: #f2eadd;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .6);
  pointer-events: none; z-index: 8;
}
.klok span { grid-area: 1 / 1; opacity: 0; will-change: opacity; }
.klok span:last-child { opacity: 1; }   /* el póster sin animación: el amanecer */
.klok::after {
  content: ''; position: absolute; left: 0; top: calc(100% + 11px);
  width: clamp(46px, 7vw, 88px); height: 1px;
  background: linear-gradient(90deg, rgba(154, 120, 69, .75), transparent);
}

/* --- los actos: el texto que avanza el argumento ------------------------
   Nunca centrados: el centro es de la casa. En escritorio, columna a un lado
   —alternando— y en móvil, una columna baja que arranca por debajo del sello
   de la hora. La v3 los ponía al medio y el acto 1 se leía ENCIMA del reloj. */
.akten { position: relative; z-index: 2; pointer-events: none; }
.akte {
  min-height: 100svh;
  display: grid; align-content: center;
  padding: 26svh var(--marge) 30svh;
}
.akte > div {
  width: 100%; max-width: 30ch;
  opacity: 0; transform: translateY(24px);
  will-change: opacity, transform;
}
.akte h2 {
  max-width: 15ch;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.05; letter-spacing: -.026em;
  color: #f7f1e6; text-wrap: balance;
  text-shadow: 0 2px 44px rgba(0, 0, 0, .75);
}
/* La tinta del párrafo: #d3c9b8 hasta el 2026-08-14. Subió a #ece4d4 porque en
   un móvil el párrafo del acto 3 aterriza sobre la ventana encendida —que es
   la pieza MÁS CLARA del cuadro y la que la escena existe para enseñar— y ahí
   medía 3,88:1 contra los 4,5 que exige AA. La ventana no se toca y el texto
   no se mueve: sube la tinta, que es la variable que no cuesta nada. Con
   #ece4d4 son 4,78:1 medidos, y el escalón con el titular (#f7f1e6) sigue
   existiendo. Ver `meet-scene-contrast`, que es quien lo dijo. */
.akte p {
  margin-top: .85em; max-width: 30ch;
  font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.55;
  color: #ece4d4;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .85);
}
@media (max-width: 899px) {
  /* Arriba, bajo el sello de la hora: el centro es de la casa y de la
     conversación, que es lo que el hotelero tiene que ver en un móvil. */
  .akte { align-content: start; padding: 17svh var(--marge) 8svh }
}
@media (min-width: 900px) {
  .akte {
    align-content: center;
    padding: 12svh max(var(--marge), calc((100% - var(--breed)) / 2));
  }
  .akte > div { max-width: 26ch }
  .akte-rechts > div { margin-left: auto; text-align: right }
  .akte-rechts h2, .akte-rechts p { margin-left: auto }
}

/* ============================================================================
   EL GESTO DE RESERVA, AL LADO DE LA VENTANA
   La v6 la dejaba flotando abajo a la izquierda, sin relación con la casa. La
   v8 la puso ENCIMA de la ventana —«la ventana crece hasta ser la
   conversación»—: la idea, buena; el sitio, el peor posible. Ahora convive con
   la ventana en vez de sustituirla. El reparto del cuadro, más abajo.

   Y ES LA ÚNICA PANTALLA DONDE UN HOTELERO VE EL PRODUCTO. Por eso no es un
   bocadillo de chat: cabecera con marca y estado, hilo con su ritmo, y al
   cerrarse la reserva un RESGUARDO con las cifras en tipografía tabular —
   fechas, noches, total— que cuadran con lo que dijo la conversación. Lo
   dispara la clase `geboekt` que el guion ya ponía: cero JavaScript nuevo.
   ========================================================================= */
.nacht-widget {
  position: absolute; left: 50%; top: 34%;
  /* `--uit`: -50 % cuando la tarjeta se centra con `left: 50%`, 0 cuando se
     ancla a una columna. Es variable porque la misma cifra sale en los tres
     fotogramas de `k-widget` y en la regla de `data-fase`: escrita cinco
     veces, la próxima recolocación se olvida una. */
  --uit: -50%;
  transform: translate(var(--uit), 14px);
  width: min(340px, calc(100vw - 2 * var(--marge)));
  background: #fbf8f2;
  /* EL ARCO DE ARRIBA ES DE LA TARJETA, NO DE LA PÁGINA. Llevaba `--boog-mid`
     —`clamp(22px, 4vw, 54px)`—, que pasados los 1350 vale 54 sobre una cabecera
     de 31: a 1920 la «M» del sello salía cortada y «ONLINE» se perdía por la
     derecha. Ahora escala con la TARJETA, que mide 340 y no 1920. */
  border-radius: clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px) 10px 10px;
  box-shadow: 0 0 90px 22px rgba(247, 221, 164, .26),
              0 30px 70px -24px rgba(0, 0, 0, .85);
  overflow: hidden; z-index: 9;
  font-size: clamp(11.5px, 1.25vw, 13px); line-height: 1.5;
  opacity: 0; will-change: opacity, transform;
}
.nacht-widget .widget-kop {
  background: var(--groen); color: #fff;
  padding: 8px 12px; display: flex; align-items: center; gap: 8px;
  letter-spacing: .04em;
}
.nacht-widget .merkje {
  flex: none; width: 19px; height: 19px; border-radius: 6px;
  background: rgba(255, 255, 255, .15);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 12px; line-height: 1;
}
.nacht-widget .widget-staat {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font-size: .84em; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.nacht-widget .widget-staat i { width: 5px; height: 5px; border-radius: 50%; background: #7fd7b0; flex: none }
.nacht-widget .widget-draad {
  padding: 13px 12px; display: flex; flex-direction: column; gap: 8px;
  /* ── ANCLADO ARRIBA, Y ESO ES LO QUE PONE EL CLS EN CERO ─────────────────
     El hilo estaba anclado abajo (`flex-end`), que es como se ven los chats de
     mensajería: cada frase nueva empuja a las anteriores hacia arriba. Bonito,
     y con un precio que aparece medido y no a ojo — 0,00508 de CLS, siempre en
     el segundo 8, siempre las mismas dos burbujas subiendo 40 px. Es la única
     cosa de esta página que movía layout.
     Anclado ARRIBA no se mueve nada: la frase nueva ocupa el hueco que ya
     había debajo y ninguna de las anteriores cambia de sitio. Y además es como
     se comporta un panel de reserva de verdad, que no es una app de mensajes:
     la conversación se lee de arriba abajo y el resguardo espera al pie.
     El alto da para las cinco frases más la de los puntos suspensivos, así que
     tampoco desborda nunca. Medido: CLS 0,00000 en las tres pasadas.        */
  /* ── 22 em, Y NO 21: LO QUE SE CORTABA ERA EL REMATE ────────────────────
     Ponía 21 em con la nota «da para las cinco frases … no desborda nunca».
     No se midió en las TRES lenguas: el hilo ocupa 246 px en inglés y 284 en
     español y neerlandés, y en 21 em caben 273. Los 11 que sobran no se
     difuminan, se cortan —`mask-clip` recorta en el borde—, y lo cortado era
     la mitad de abajo de la ÚLTIMA burbuja, «Reservada. La confirmación va en
     camino.». En producción, en dos idiomas de tres. */
  min-height: 22em; justify-content: flex-start;
  /* si algún día una traducción se alarga, lo que sobre se va en degradado:
     un corte recto delata la caja */
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 20px);
          mask-image: linear-gradient(0deg, transparent 0, #000 20px);
}
/* Las burbujas del hilo, con su color escrito ENTERO. Dentro de la noche
   heredaban un fondo que las dejaba transparentes: la fachada se veía a través
   del texto del hotel y sólo la burbuja del huésped —que trae su propio verde—
   se salvaba. La tarjeta de la noche no hereda paleta: la declara. */
/* Y con su espaciado propio, más apretado que en servicios: allí el gesto se
   LEE a ancho de columna, aquí ocurre en una tarjeta que comparte pantalla con
   una casa. Son 26 px medidos entre las cinco frases, sin apretar el texto. */
.nacht-widget .widget-draad { gap: 7px; line-height: 1.45 }
.nacht-widget .bel { max-width: 92%; width: fit-content; padding: 6px 10px; background: #ece4d4; color: #35302a }
.nacht-widget .bel.gast { background: var(--groen); color: #fff }
.nacht-widget .bel.tikt { color: #6b6357 }
.nacht-widget .bel.klaar { background: #e2ece6; color: var(--groen) }

/* EL RESGUARDO. Cifras tabulares: las columnas cuadran, y eso es la mitad de
   la sensación de «esto es software y no un dibujo de software».

   POR QUÉ ESTÁ AHÍ DESDE EL PRINCIPIO Y NO APARECE DE LA NADA. La v8a lo
   ocultaba entero hasta cerrar la reserva, y durante los nueve segundos de
   conversación quedaba un hueco crema al pie de la tarjeta que parecía un
   fallo de maquetación. Ahora el panel está siempre: rótulos puestos y un
   guion largo esperando en cada valor. Es lo que hace una pantalla de reserva
   de verdad — y hacer aparecer la CIFRA, no la caja, es además mejor gesto.
   Nada cambia de tamaño: sólo se relevan dos opacidades. */
.widget-bon {
  padding: 10px 13px 12px;
  border-top: 1px solid #e8e0d2;
  font-variant-numeric: tabular-nums;
}
.bon-regel {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2em; padding: 2px 0;
}
.bon-regel span { color: #6b6357; letter-spacing: .04em }
.bon-regel b {
  font-weight: 400; color: #35302a; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(3px);
  transition: opacity .5s var(--curve), transform .5s var(--curve);
}
.bon-regel::after {                        /* el valor que todavía no se sabe */
  content: '—'; position: absolute; right: 0; bottom: 2px;
  color: #6b6357;
  transition: opacity .3s var(--curve);
}
.nacht-doek.geboekt .bon-regel b { opacity: 1; transform: none }
.nacht-doek.geboekt .bon-regel::after { opacity: 0 }
.bon-som { margin-top: 5px; padding-top: 7px; border-top: 1px solid #e8e0d2 }
.bon-som b { font-family: var(--serif); font-optical-sizing: auto; font-size: 1.5em; line-height: 1 }
.bon-som::after { font-size: 1.3em }
.bon-voet {
  margin-top: 8px; font-size: .86em; letter-spacing: .03em; color: #6b6357;
  opacity: .4; transition: opacity .5s var(--curve);
}
.nacht-doek.geboekt .bon-voet { opacity: 1 }

/* --- el recuento del amanecer -------------------------------------------
   Centrado y abajo caía justo encima de las fachadas: ilegible. Aquí es una
   NOTA AL MARGEN, en la misma columna que la hora y que los actos: se lee como
   lo que es —la cuenta de la noche— y deja la casa en paz.

   ── POR QUÉ LA TINTA ES CLARA Y NO OSCURA ──────────────────────────────────
   Era tinta oscura, «como en papel», colocada donde el amanecer sería claro.
   Medido con la escena fotografiada sin texto: 2,62:1 el rótulo y 2,51:1 la
   nota, las dos muy por debajo de 4,5. Y no había forma de arreglarlo bajando
   la tinta, porque el fondo real ahí es un gris azulado de luminancia media —
   el peor sitio posible para cualquier tinta.
   Así que la cuenta se sube a la parte alta del cielo, que al amanecer sigue
   siendo azul profundo, y pasa a tinta clara como la hora y como los actos.
   Además es más coherente: TODO lo que se lee dentro de la noche es claro
   sobre oscuro. El registro de tinta sobre papel vuelve dos pantallas después,
   en la sección del amanecer, que es papel de verdad.                        */
.oogst {
  position: absolute; top: 26%;
  left: max(var(--marge), calc((100% - var(--breed)) / 2));
  display: grid; gap: clamp(10px, 1.6svh, 18px);
  opacity: 0; z-index: 9;
}
.oogst div { display: flex; align-items: baseline; gap: .7em; color: #f4ecdf }
.oogst b {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 7ch;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
}
/* El rótulo de la cuenta: #cdbfa8 hasta el 2026-08-14. En el móvil, al
   amanecer, la tercera fila cae sobre la fachada de la vecina de la izquierda
   y medía 2,52:1. Aquí la tinta SOLA no llega: sobre ese fondo, ni el blanco
   puro pasa de 4,52:1, que es un «casi» y los casi no se firman. Así que van
   las dos variables —sube la tinta a #f2eadd (la del reloj, que ya existe) y
   baja la luz del amanecer, arriba en `.ochtendlicht`—. Medido: 4,65:1. */
.oogst span {
  font-size: .72rem; letter-spacing: .17em; text-transform: uppercase;
  color: #f2eadd;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
}
.oogst-noot {
  position: absolute; top: calc(26% + clamp(130px, 18svh, 176px));
  left: max(var(--marge), calc((100% - var(--breed)) / 2));
  width: min(34ch, calc(100vw - 2 * var(--marge)));
  font-size: .74rem; line-height: 1.55; color: #d0c3ae;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .6);
  opacity: 0; z-index: 9;
}

/* ============================================================================
   EL ESCRITORIO ANCHO — TRES COLUMNAS, Y EL CENTRO ES DE LA CASA
   Hasta la v9 la tarjeta se centraba con `left: 50%`: 340 × 437 encima de una
   fachada de 222 × 537. Medido a 1280, 1440, 1680 y 1920 y a cuatro alturas:
   en los ocho casos tapaba la casa y la VENTANA ENCENDIDA — la pieza de la que
   tiene que parecer que sale. Se veía la conversación y no de dónde salía.

       IZQUIERDA      CENTRO            DERECHA
       la hora        la casa entera    el acto, arriba
       y al alba,     con su ventana    la conversación, abajo
       la cuenta      encendida
   ========================================================================= */
@media (min-width: 900px) {
  .nacht-widget {
    --uit: 0%;
    left: auto; top: auto;
    /* el mismo filo que la columna del texto: `.akte` usa esta misma fórmula */
    right: max(var(--marge), calc((100% - var(--breed)) / 2));
    bottom: clamp(20px, 4svh, 52px);
    /* 300 px es el suelo: por debajo, las cinco frases se parten en tres
       líneas, el hilo crece por encima de su `min-height` y vuelve el CLS que
       costó dos versiones apagar. */
    width: clamp(300px, 26vw, 340px);
    /* 12 px FIJOS, no `clamp(11.5px, 1.25vw, 13px)`: con la escala por viewport
       la letra llegaba a 13 px pasados los 1040 y el hilo reserva su alto en
       `em`, así que la tarjeta pasaba de 405 a 450 justo donde compite con la
       casa. Un panel de reserva de verdad no crece con el monitor. */
    font-size: 12px;
  }
  /* el alto reservado, contra el contenido medido a 12 px: 253 la lengua más
     larga, 258 reservados */
  .nacht-widget .widget-draad { min-height: 21.5em }

  /* ── EL ÚNICO ACTO QUE SE MUEVE, Y POR QUÉ CRUZA EN VEZ DE SUBIR ──────────
     Subirlo a la mitad alta de su columna no cabía: en un 1280 × 800 habría de
     alojar cabecera (76) + luna + texto (220) + tarjeta (416), y la luna
     acababa sobre la palabra «website» —medido a 1440 × 900 y 1920 × 1080—. Y
     la luna no se mueve: la rasante fría entra desde donde está ella.
     Cruza a la columna izquierda, vacía a esa hora (el reloj ya subió y la
     cuenta del alba no llega hasta el 93 %). Cuesta la alternancia de un acto
     —3, 4 y 5 seguidos a la izquierda— y a cambio el escenario se queda quieto
     durante la reserva. Vuelve a alternar en el acto 6.
     Va aquí y no en la plantilla porque el motivo es la tarjeta. */
  .akte-rechts:nth-of-type(4) > div { margin-left: 0; margin-right: auto; text-align: left }
  .akte-rechts:nth-of-type(4) h2, .akte-rechts:nth-of-type(4) p { margin-left: 0; margin-right: auto }
}

/* ============================================================================
   LA COREOGRAFÍA — una línea de tiempo, cada capa con su ventana.
   `contain` es exactamente el tramo en que el lienzo está clavado: 0 % es la
   primera hora y 100 % la última. Cada acto ocupa un sexto redondo.
   ========================================================================= */
@supports (animation-timeline: view()) {
  .lucht, .sterren, .maan, .gloed, .nevel, .klok span, .akte > div,
  .raam::before, .raam-groot::before, .steen i, .trap i::before,
  .nachtlicht, .ochtendlicht, .schijn, .plassen, .lantaarn,
  .weerschijn, .nacht-widget, .oogst, .oogst-noot {
    animation-timeline: --klok;
    animation-range: contain 0% contain 100%;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }

  /* ── DÓNDE CAE CADA ACTO, QUE ES LO QUE SE CALCULÓ MAL DOS VECES ─────────
     El acto N ocupa el bloque [(N-1)·100svh, N·100svh] y su texto va centrado
     dentro. Ese texto está en el CENTRO DE LA PANTALLA cuando el scroll vale
     (N-1)·100svh — o sea, cuando el reloj marca p = (N-1)/6, no (N-0,5)/6.
     Con la rejilla anterior el texto se volvía opaco medio sexto tarde: ya
     había subido fuera de la pantalla. Centros reales: 0 · 16,7 · 33,3 · 50 ·
     66,7 · 83,3 %. Todo lo demás cuelga de esos seis números.               */

  .lucht-schemer  { animation-name: k-schemer }
  .lucht-nacht    { animation-name: k-nacht }
  .lucht-dageraad { animation-name: k-dageraad }
  /* EL AMANECER CAE ENTRE EL 72 % Y EL 84 %, y no entre el 76 y el 88 como en
     la v8a. El motivo es aritmético: el acto 6 —«baja usted por la escalera»—
     está clavado en el 83,3 %, así que con la rejilla anterior el cielo iba
     por la mitad del amanecer y el ladrillo seguía frío justo en el fotograma
     que remata la idea. Ahora, cuando se lee ese texto, ya ha amanecido. */
  @keyframes k-schemer  { 0%,6% { opacity: 1 } 22%,100% { opacity: 0 } }
  @keyframes k-nacht    { 0% { opacity: 0 } 16%,72% { opacity: 1 } 84%,100% { opacity: 0 } }
  @keyframes k-dageraad { 0%,72% { opacity: 0 } 84%,100% { opacity: 1 } }

  .gloed { animation-name: k-gloed }
  @keyframes k-gloed { 0%,12% { opacity: 0 } 26%,70% { opacity: 1 } 82%,100% { opacity: 0 } }

  .sterren { animation-name: k-sterren }
  @keyframes k-sterren { 0%,16% { opacity: 0 } 28%,68% { opacity: .9 } 79%,100% { opacity: 0 } }

  .maan { animation-name: k-maan }
  @keyframes k-maan {
    0%,16% { opacity: 0; transform: translateY(22px) }
    28%,66% { opacity: 1; transform: none }
    79%,100% { opacity: 0; transform: translateY(-18px) }
  }

  /* La bruma del canal sube al amanecer: a las siete de la mañana en Ámsterdam
     el agua humea, y es lo que remata la profundidad. */
  .nevel { animation-name: k-nevel }
  @keyframes k-nevel { 0%,20% { opacity: .5 } 40%,70% { opacity: .34 } 86%,100% { opacity: .96 } }

  /* EL RELOJ. Cada hora cubre el tramo de su acto. */
  .klok span:nth-child(1) { animation-name: k-u1 }
  .klok span:nth-child(2) { animation-name: k-u2 }
  .klok span:nth-child(3) { animation-name: k-u3 }
  .klok span:nth-child(4) { animation-name: k-u4 }
  .klok span:nth-child(5) { animation-name: k-u5 }
  .klok span:nth-child(6) { animation-name: k-u6 }
  @keyframes k-u1 { 0%,8% { opacity: 1 } 10%,100% { opacity: 0 } }
  @keyframes k-u2 { 0%,10% { opacity: 0 } 12%,25% { opacity: 1 } 27%,100% { opacity: 0 } }
  @keyframes k-u3 { 0%,27% { opacity: 0 } 29%,42% { opacity: 1 } 44%,100% { opacity: 0 } }
  @keyframes k-u4 { 0%,44% { opacity: 0 } 46%,58% { opacity: 1 } 60%,100% { opacity: 0 } }
  @keyframes k-u5 { 0%,60% { opacity: 0 } 62%,75% { opacity: 1 } 77%,100% { opacity: 0 } }
  @keyframes k-u6 { 0%,77% { opacity: 0 } 79%,100% { opacity: 1 } }

  /* LOS ACTOS, cada uno alrededor de su centro. */
  .akte:nth-of-type(1) > div { animation-name: a1 }
  .akte:nth-of-type(2) > div { animation-name: a2 }
  .akte:nth-of-type(3) > div { animation-name: a3 }
  .akte:nth-of-type(4) > div { animation-name: a4 }
  .akte:nth-of-type(5) > div { animation-name: a5 }
  .akte:nth-of-type(6) > div { animation-name: a6 }
  @keyframes a1 { 0%,7% { opacity: 1; transform: none } 11%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes a2 { 0%,8%  { opacity: 0; transform: translateY(24px) } 12%,21% { opacity: 1; transform: none } 25%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes a3 { 0%,25% { opacity: 0; transform: translateY(24px) } 29%,38% { opacity: 1; transform: none } 42%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes a4 { 0%,42% { opacity: 0; transform: translateY(24px) } 46%,54% { opacity: 1; transform: none } 58%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes a5 { 0%,58% { opacity: 0; transform: translateY(24px) } 62%,71% { opacity: 1; transform: none } 75%,100% { opacity: 0; transform: translateY(-18px) } }
  @keyframes a6 { 0%,75% { opacity: 0; transform: translateY(24px) } 79%,88% { opacity: 1; transform: none } 92%,100% { opacity: 0; transform: translateY(-18px) } }

  /* LA CASA SE APAGA. Ventana a ventana, y las vecinas antes que la nuestra.
     Lo que se apaga es la LUZ, no la ventana: debajo queda el vidrio oscuro.
     Este es el corazón de la idea: no es un fundido, es una secuencia. */
  .raam::before { animation-name: k-uit }
  @keyframes k-uit { from { opacity: var(--aan) } to { opacity: 0 } }
  .buur-links  .raam:nth-child(1)::before { animation-range: contain 3% contain 8% }
  .buur-links  .raam:nth-child(2)::before { animation-range: contain 6% contain 11% }
  .buur-links  .raam:nth-child(3)::before { animation-range: contain 10% contain 15% }
  .buur-links  .raam:nth-child(4)::before { animation-range: contain 14% contain 19% }
  .buur-links  .raam:nth-child(5)::before { animation-range: contain 18% contain 23% }
  .buur-links  .raam:nth-child(6)::before { animation-range: contain 22% contain 27% }
  .buur-rechts .raam:nth-child(1)::before { animation-range: contain 5% contain 10% }
  .buur-rechts .raam:nth-child(2)::before { animation-range: contain 9% contain 14% }
  .buur-rechts .raam:nth-child(3)::before { animation-range: contain 13% contain 18% }
  .buur-rechts .raam:nth-child(4)::before { animation-range: contain 17% contain 22% }
  .buur-rechts .raam:nth-child(5)::before { animation-range: contain 21% contain 26% }
  .buur-rechts .raam:nth-child(6)::before { animation-range: contain 25% contain 30% }
  .grachtenhuis .raam:nth-child(1)::before { animation-range: contain 8% contain 14% }
  .grachtenhuis .raam:nth-child(2)::before { animation-range: contain 12% contain 18% }
  .grachtenhuis .raam:nth-child(3)::before { animation-range: contain 16% contain 22% }
  .grachtenhuis .raam:nth-child(5)::before { animation-range: contain 24% contain 31% }
  .grachtenhuis .raam:nth-child(6)::before { animation-range: contain 29% contain 36% }
  .grachtenhuis .raam:nth-child(7)::before { animation-range: contain 34% contain 41% }

  /* LA GEVELSTEEN TIENE SU MOMENTO. Una rasante cálida cruza la piedra cuando
     el visitante pasa por delante —acto 2, con la casa aún medio encendida— y
     otra vez al amanecer. Fuera de esos dos instantes no pide nada. */
  .steen i { animation-name: k-steen }
  @keyframes k-steen {
    0%,17% { opacity: 0 } 25%,31% { opacity: .9 } 39%,86% { opacity: 0 }
    96%,100% { opacity: .5 }
  }

  /* Y LA QUE NO SE APAGA. Enciende cuando el huésped escribe, y ya no se va —
     y con ella el ladrillo de alrededor, el adoquín y el agua. */
  .raam-groot::before { animation-name: k-brandt }
  @keyframes k-brandt { 0%,38% { opacity: 0 } 46%,100% { opacity: 1 } }
  .schijn { animation-name: k-schijn }
  @keyframes k-schijn { 0%,39% { opacity: 0 } 49%,100% { opacity: 1 } }
  .plassen { animation-name: k-plassen }
  @keyframes k-plassen { 0%,40% { opacity: 0 } 52%,88% { opacity: 1 } 100% { opacity: .45 } }
  .weerschijn { animation-name: k-weerschijn }
  @keyframes k-weerschijn { 0%,41% { opacity: 0 } 51%,86% { opacity: 1 } 100% { opacity: .5 } }

  /* LA LUZ GIRA. La fría entra con la noche y viene de la derecha, donde está
     la luna; la cálida entra con el amanecer y viene de la izquierda. Se
     relevan, y con eso las sombras cambian de lado. */
  .nachtlicht { animation-name: k-nachtlicht }
  @keyframes k-nachtlicht { 0%,10% { opacity: 0 } 24%,70% { opacity: 1 } 83%,100% { opacity: 0 } }
  .ochtendlicht, .trap i::before { animation-name: k-ochtendlicht }
  @keyframes k-ochtendlicht { 0%,72% { opacity: 0 } 84%,100% { opacity: 1 } }

  /* La farola se apaga cuando ya no hace falta. */
  .lantaarn { animation-name: k-lantaarn }
  @keyframes k-lantaarn { 0%,6% { opacity: 0 } 14%,78% { opacity: 1 } 88%,100% { opacity: 0 } }

  .nacht-widget { animation-name: k-widget }
  /* Nace pequeña y se levanta: la conversación sube del muelle a la altura de
     los ojos mientras la ventana de enfrente se queda encendida. */
  @keyframes k-widget {
    0%,40% { opacity: 0; transform: translate(var(--uit), 8px) scale(.86) }
    47%,70% { opacity: 1; transform: translate(var(--uit), 0) scale(1) }
    76%,100% { opacity: 0; transform: translate(var(--uit), -6px) scale(.94) }
  }

  /* La cuenta entra cuando el acto 6 ya se ha ido (92 %), no antes: en el móvil
     comparten columna y durante un tramo se leían encima. */
  .oogst, .oogst-noot { animation-name: k-oogst }
  @keyframes k-oogst { 0%,86% { opacity: 0 } 93%,100% { opacity: 1 } }
}

/* ============================================================================
   SIN scroll-driven animations, PERO CON JS — seis fases, con transición.
   Ni rAF ni scroll listener: un IntersectionObserver sobre los seis actos.
   ========================================================================= */
@supports not (animation-timeline: view()) {
  .js .lucht, .js .sterren, .js .maan, .js .nevel, .js .klok span,
  .js .raam::before, .js .raam-groot::before, .js .steen i, .js .trap i::before,
  .js .nachtlicht, .js .ochtendlicht, .js .schijn, .js .plassen, .js .lantaarn,
  .js .weerschijn, .js .nacht-widget, .js .oogst, .js .oogst-noot, .js .akte > div {
    transition: opacity .8s var(--curve), transform .8s var(--curve);
  }
  .js .nacht[data-fase] .lucht-schemer { opacity: 0 }
  .js .nacht[data-fase="0"] .lucht-schemer { opacity: 1 }
  .js .nacht[data-fase] .lucht-nacht { opacity: 1 }
  .js .nacht[data-fase="0"] .lucht-nacht,
  .js .nacht[data-fase="5"] .lucht-nacht { opacity: 0 }
  .js .nacht[data-fase] .lucht-dageraad { opacity: 0 }
  .js .nacht[data-fase="5"] .lucht-dageraad { opacity: 1 }
  .js .nacht[data-fase] .sterren { opacity: .9 }
  .js .nacht[data-fase="0"] .sterren,
  .js .nacht[data-fase="5"] .sterren { opacity: 0 }
  .js .nacht[data-fase] .maan { opacity: 1 }
  .js .nacht[data-fase="0"] .maan,
  .js .nacht[data-fase="5"] .maan { opacity: 0 }
  .js .nacht[data-fase] .nevel { opacity: .34 }
  .js .nacht[data-fase="5"] .nevel { opacity: .96 }
  .js .nacht[data-fase] .klok span { opacity: 0 }
  .js .nacht[data-fase="0"] .klok span:nth-child(1),
  .js .nacht[data-fase="1"] .klok span:nth-child(2),
  .js .nacht[data-fase="2"] .klok span:nth-child(3),
  .js .nacht[data-fase="3"] .klok span:nth-child(4),
  .js .nacht[data-fase="4"] .klok span:nth-child(5),
  .js .nacht[data-fase="5"] .klok span:nth-child(6) { opacity: 1 }
  /* la casa se apaga por plantas, una por fase */
  .js .nacht[data-fase="1"] .buur .raam::before,
  .js .nacht[data-fase="1"] .grachtenhuis .raam:nth-child(-n+3)::before { opacity: 0 }
  .js .nacht[data-fase="2"] .buur .raam::before,
  .js .nacht[data-fase="2"] .grachtenhuis .raam::before { opacity: 0 }
  .js .nacht[data-fase="3"] .buur .raam::before, .js .nacht[data-fase="3"] .grachtenhuis .raam::before,
  .js .nacht[data-fase="4"] .buur .raam::before, .js .nacht[data-fase="4"] .grachtenhuis .raam::before,
  .js .nacht[data-fase="5"] .buur .raam::before, .js .nacht[data-fase="5"] .grachtenhuis .raam::before { opacity: 0 }
  /* la gevelsteen tiene su momento en el acto 2, y otro al amanecer */
  .js .nacht[data-fase="1"] .steen i { opacity: .9 }
  .js .nacht[data-fase="5"] .steen i { opacity: .5 }
  /* la luz de la ventana, y todo lo que esa luz toca */
  .js .nacht[data-fase="3"] .raam-groot::before, .js .nacht[data-fase="3"] .weerschijn,
  .js .nacht[data-fase="3"] .schijn, .js .nacht[data-fase="3"] .plassen,
  .js .nacht[data-fase="4"] .raam-groot::before, .js .nacht[data-fase="4"] .weerschijn,
  .js .nacht[data-fase="4"] .schijn, .js .nacht[data-fase="4"] .plassen,
  .js .nacht[data-fase="5"] .raam-groot::before, .js .nacht[data-fase="5"] .weerschijn,
  .js .nacht[data-fase="5"] .schijn, .js .nacht[data-fase="5"] .plassen { opacity: 1 }
  /* la luz gira: fría desde la derecha de noche, cálida desde la izquierda al
     amanecer, y la farola apagada cuando ya no hace falta */
  .js .nacht[data-fase] .nachtlicht { opacity: 1 }
  .js .nacht[data-fase="0"] .nachtlicht,
  .js .nacht[data-fase="5"] .nachtlicht { opacity: 0 }
  .js .nacht[data-fase] .ochtendlicht, .js .nacht[data-fase] .trap i::before { opacity: 0 }
  .js .nacht[data-fase="5"] .ochtendlicht, .js .nacht[data-fase="5"] .trap i::before { opacity: 1 }
  .js .nacht[data-fase] .lantaarn { opacity: 1 }
  .js .nacht[data-fase="0"] .lantaarn,
  .js .nacht[data-fase="5"] .lantaarn { opacity: 0 }
  .js .nacht[data-fase="3"] .nacht-widget { opacity: 1; transform: translate(var(--uit), 0) scale(1) }
  .js .nacht[data-fase="4"] .oogst, .js .nacht[data-fase="4"] .oogst-noot,
  .js .nacht[data-fase="5"] .oogst, .js .nacht[data-fase="5"] .oogst-noot { opacity: 1 }
  .js .akte > div.in-beeld { opacity: 1; transform: none }
}

/* ============================================================================
   EL PÓSTER — sin JS, o con reduced-motion: la escena se queda en el AMANECER,
   que es donde aterriza el argumento, y TODO el texto es legible a la vez.
   Con la fachada nueva el póster gana: el ladrillo, la piedra, la gevelsteen y
   el reflejo están ahí en el fotograma quieto, sin depender de nada.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .nacht { padding-bottom: 0; view-timeline-name: none }
  .nacht *, .akte > div { animation: none !important }
  .gloed { opacity: 1 }
  .nacht-doek { position: relative; height: 82svh; margin-bottom: 0 }
  .lucht-schemer, .lucht-nacht, .sterren, .maan { opacity: 0 !important; animation: none !important }
  .lucht-dageraad { opacity: 1 !important; animation: none !important }
  .nevel { opacity: .96 !important }
  .raam::before { opacity: 0 !important; animation: none !important }
  .raam-groot::before, .weerschijn, .schijn, .plassen { opacity: 1 !important; animation: none !important }
  .nachtlicht, .lantaarn { opacity: 0 !important }
  .ochtendlicht, .trap i::before { opacity: 1 !important }
  .steen i { opacity: .5 !important }
  .klok span { opacity: 0 !important; animation: none !important }
  .klok span:last-child { opacity: 1 !important }
  /* En el póster la tarjeta vuelve al flujo y se centra. `right` y `bottom` se
     apagan a mano: con `position: relative` no serían un anclaje sino un
     desplazamiento, y la tarjeta se iría de la pantalla por abajo. */
  .nacht-widget {
    position: relative; left: auto; top: auto; right: auto; bottom: auto;
    margin: 0 auto; opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .oogst, .oogst-noot { opacity: 1 !important; animation: none !important }
  .akte { min-height: 0; padding-block: 6svh }
  .akte > div { opacity: 1 !important; transform: none !important; animation: none !important }
  .akten { background: #070f14 }
}

/* SIN JS. Mismo póster, y con la lección aprendida: no basta con poner
   `opacity: 1`, porque una animación gana a una declaración normal en la
   cascada. Con la línea de tiempo nativa activa y la sección ya encogida, el
   tramo `contain` es degenerado, el reloj se queda en el fotograma 0 y los
   actos 2 a 6 estaban en opacidad 0: una franja negra vacía. Hay que APAGAR
   las animaciones, no taparlas. Medido en una copia servida sin los dos
   scripts —el externo y el que pone la clase `js`—, que es la única forma de
   ver este estado de verdad. */
html:not(.js) .nacht { padding-bottom: 0; view-timeline-name: none }
html:not(.js) .nacht-doek { position: relative; height: 76svh; margin-bottom: 0 }
html:not(.js) .nacht *, html:not(.js) .akte > div { animation: none !important }
html:not(.js) .akte { min-height: 0; padding-block: 7svh }
html:not(.js) .akte > div { opacity: 1; transform: none }
html:not(.js) .akten { background: #070f14 }
html:not(.js) .lucht-schemer, html:not(.js) .lucht-nacht,
html:not(.js) .sterren, html:not(.js) .maan { opacity: 0 }
html:not(.js) .lucht-dageraad, html:not(.js) .gloed { opacity: 1 }
html:not(.js) .nevel { opacity: .96 }
html:not(.js) .raam::before { opacity: 0 }
html:not(.js) .raam-groot::before, html:not(.js) .weerschijn,
html:not(.js) .schijn, html:not(.js) .plassen { opacity: 1 }
html:not(.js) .nachtlicht, html:not(.js) .lantaarn { opacity: 0 }
html:not(.js) .ochtendlicht, html:not(.js) .trap i::before { opacity: 1 }
html:not(.js) .steen i { opacity: .5 }
html:not(.js) .klok span { opacity: 0 }
html:not(.js) .klok span:last-child { opacity: 1 }
/* Sin JS la conversación no existe —la escribe el guion— y una tarjeta crema
   vacía en mitad de la noche es exactamente la «animación amputada» que no
   queremos. El póster la retira: el argumento lo llevan enteros los seis actos,
   la ventana encendida y la cuenta del amanecer, que son texto y CSS. */
html:not(.js) .nacht-widget { display: none }
html:not(.js) .oogst, html:not(.js) .oogst-noot { opacity: 1 }

/* ============================================================================
   LA CABECERA DENTRO DE LA NOCHE — una barra color papel flotando sobre un
   cielo nocturno delata el truco. Se oscurece mientras la noche está en
   pantalla. Un solo IntersectionObserver, en los tres navegadores.
   ========================================================================= */
html.in-de-nacht .kop {
  background: rgba(7, 15, 20, .82);
  border-bottom-color: rgba(154, 120, 69, .22);
  color: #ece4d5;
}
html.in-de-nacht .kop a { color: #ece4d5 }
html.in-de-nacht .kop a:hover { color: #fff }
html.in-de-nacht .talen [aria-current] { color: var(--brandend) }
.kop { transition: background var(--mid) var(--curve), border-color var(--mid) var(--curve), color var(--mid) var(--curve) }

/* --- la costura con el papel -------------------------------------------- */
.nacht-in, .nacht-uit { height: 13svh }
.nacht-in  { background: linear-gradient(180deg, var(--papier) 0%, #b99377 62%, #26364a 100%) }
.nacht-uit { background: linear-gradient(180deg, #f2cda2 0%, var(--papier) 100%) }

/* --- la apertura, la invitación a bajar, y el amanecer ------------------- */
.opening { padding-bottom: clamp(48px, 9svh, 110px) }
.opening h1 { max-width: 13ch }
.uitnodiging {
  margin-top: clamp(40px, 8svh, 96px);
  display: flex; align-items: center; gap: .9em;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brons-diep);
}
.uitnodiging svg { color: var(--brons); animation: zakken 2.4s ease-in-out infinite }
@keyframes zakken { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .uitnodiging svg { animation: none }
  .deining, .weerschijn i { animation: none !important }
}

.ochtend-kop { max-width: 16ch; font-size: clamp(2.2rem, 5.6vw, 3.6rem) }

/* sólo para lectores de pantalla: el título que da sentido a la sección */
.alleen-voor-lezers {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* El instante de la reserva: la ventana sube un punto de luz. Nada más — a las
   tres de la mañana tampoco debería pasar nada más. */
.nacht-doek.geboekt .raam-groot::before { box-shadow: 0 0 70px 14px rgba(247, 221, 164, .5) }
.raam-groot::before { transition: box-shadow .6s var(--curve) }

/* ============================================================================
   EL MÓVIL — AL FINAL DE LA HOJA, Y NO POR CAPRICHO
   Estas reglas pisan posiciones declaradas más arriba con la misma
   especificidad, así que sólo ganan si van después. Dos veces se colocaron
   antes y dos veces la tarjeta y la nota se quedaron donde no debían: la
   media query no sube la especificidad, sólo acota cuándo aplica.
   ========================================================================= */
@media (max-width: 899px) {
  /* La casa se acorta en el móvil: con la proporción de escritorio salía una
     torre de 1 : 4, que no es una casa de canal sino un campanario.
     Y el agua sube al 38 %, que era el 31 %. Ese 31 se puso «para que el arco
     quede POR ENCIMA de la tarjeta» y no se comprobó: en un 390 × 844 la
     ventana acaba en y = 447 y la tarjeta empezaba en 405 — se comía el
     alféizar y el pie de la tracería; en un 360 × 740, 81 px. Y la tarjeta no
     da más de sí: sus cinco frases y su resguardo SON el producto. Así que
     sube la casa (52 px en un 740, 59 en un 844) y la tarjeta baja a ras del
     suelo, porque los 5svh que tenía debajo eran aire regalado. Con las dos,
     el arco entero queda sobre su filo en los cuatro móviles medidos. */
  .nacht {
    --huisbreed: clamp(112px, 32vw, 152px);
    --huishoog: calc(var(--huisbreed) * 2.32);
    --waterlijn: 38%;
    --kade-hoog: 4%;
  }
  .nacht-widget { top: auto; bottom: 0; border-radius: clamp(16px, 2.2vw, 28px) clamp(16px, 2.2vw, 28px) 0 0 }
  .lantaarn { left: 15% }
  /* En vertical la cifra y su rótulo se apilan: en línea, el rótulo se salía de
     la columna del margen y aterrizaba sobre la fachada, ilegible. */
  /* En el móvil no hay columna libre al lado de la casa: la fila ocupa el ancho
     entero. Así que la cuenta va ARRIBA, en la única franja de cielo que queda
     entre el sello de la hora y el remate del hastial —del 20 % al 39 %—, y la
     nota se va abajo, al agua. Puesta a media altura, la última línea de la
     nota aterrizaba justo sobre la ventana encendida: 1,46:1, medido. */
  .oogst { top: 20%; gap: clamp(8px, 1.4svh, 14px) }
  .oogst div { flex-direction: column; align-items: flex-start; gap: .3em }
  .oogst b { min-width: 0 }
  .oogst-noot {
    top: auto; bottom: 3svh; left: var(--marge); right: var(--marge);
    width: auto; text-align: center; color: #f4ecdf;
  }
}

/* EL MÓVIL CORTO. En un 360 × 740 la tarjeta se lleva 409 de 740 y con el agua
   al 38 % el arco quedaba 4 px bajo su filo: el alféizar, no el vidrio — pero
   es la misma clase de «casi» que ya se dio por buena una vez. Sube sólo aquí;
   las pantallas altas conservan su 38 %, donde el canal se ve en los actos
   1, 2 y 6. */
@media (max-width: 899px) and (max-height: 780px) {
  .nacht { --waterlijn: 42% }
}