@font-face{
  font-family:"Cormorant Garamond";
  src:url("/assets/fonts/cormorant-garamond.5d618c46.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("/assets/fonts/eb-garamond.68fd4b24.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("/assets/fonts/eb-garamond-italic-400.078bb1c0.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/assets/fonts/ibm-plex-mono-400.c36f509c.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/assets/fonts/ibm-plex-mono-500.a76f53ca.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink: #141813;
  --ink-dim: #59615A;
  --ground: #08090722;
  --ground-solid: #E7EAE5;
  --accent: #1D5B44;
  --rule: #C6CCC3;
  --scrim-top: rgba(8,9,7,.72);
  --scrim-mid: rgba(8,9,7,.15);
  --scrim-bot: rgba(8,9,7,.80);
  --display: "Cormorant Garamond","EB Garamond",Georgia,serif;
  --body: "EB Garamond","Iowan Old Style",Georgia,serif;
  --mono: "IBM Plex Mono","SF Mono",Menlo,monospace;
  --measure: 66ch;
  --title-width: 20ch;
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur-fast: .28s;
  --dur: .55s;
  --dur-slow: .9s;
  --paper: #E7EAE5;
  --leaf: #F1F3EE;
  --muted: #59615A;
  --faint: #7C847C;
  --viridian: #1D5B44;
  --rubric: #8E2B24;
  --hair: #D4D9D1;
  --serif: "EB Garamond","Iowan Old Style",Georgia,serif;
  --h1: #A8322B;
  --h4: #7E8A2E;
  --h5: #4A7A3A;
  --h6: #1D5B44;
  --h7: #23716B;
  --h8: #2A6B84;
  --h9: #2F5E8F;
  --h10: #4E4A8C;
  --h11: #6E3F7A;
  --h12: #8E3560;
  --h2: #B5622A;
  --h3: #A8842E;
}

/* flow-kit · base — everything reads from the client's tokens, nothing hardcodes. */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--ground-solid); color:var(--ink);
  font-family:var(--body); font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100% }
a{ color:inherit }

.skip{ position:absolute; left:-9999px }
.skip:focus{ left:1rem; top:1rem; z-index:99; padding:.6rem 1rem; background:var(--ink); color:var(--ground-solid) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }

/* ── type ───────────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 1rem;
}
.display{
  font-family:var(--display); font-weight:400; line-height:1.06;
  font-size:clamp(2.2rem,1.4rem + 4vw,4.6rem);
  text-wrap:balance; max-width:var(--title-width); margin:0 0 1rem;
}
.section-title{ margin-bottom:2.5rem }
.lede{ font-size:1.15em; max-width:42ch; margin:0; color:var(--ink) }
.body{ max-width:var(--measure); margin:0 0 1.1rem }

/* ── hero / chapter ─────────────────────────────────────────────────────── */
.hero,.chapter,.stage{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:clip }
.hero-media,.chapter-media{ position:absolute; inset:0 }
.hero-poster,.film,.stage-canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero-copy,.chapter-copy,.stage-copy{ position:relative; z-index:1; padding:clamp(1.5rem,5vw,5rem); max-width:70ch }

/* Never a flat overlay — a flat one dirties the bright half and still loses the
   dark half. A gradient scrim keeps the frame and still guarantees contrast. */
.scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,var(--scrim-top) 0%,var(--scrim-mid) 55%,var(--scrim-bot) 100%);
}

/* ── worlds ─────────────────────────────────────────────────────────────── */
.worlds,.closing,.quote-section{ padding:clamp(4rem,10vw,9rem) clamp(1.5rem,5vw,5rem) }
.worlds-list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)) }
.world img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; margin-bottom:1.2rem }
.world-title{ font-family:var(--display); font-weight:400; font-size:1.6rem; margin:0 0 .5rem }

.quote .display{ max-width:24ch }
cite{ font-style:normal; display:block; margin-top:1.5rem }

.actions{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:2rem }
.action{ font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; padding-bottom:.35rem; border-bottom:1px solid var(--rule);
  transition:border-color var(--dur) var(--ease) }
.action:hover{ border-color:var(--accent) }

/* ── the 3D island ──────────────────────────────────────────────────────── */
/* The poster carries the LCP and stays until frame 1 has really rendered.
   flow-dimensional §5. */
.stage-canvas{ opacity:0; transition:opacity var(--dur-slow) var(--ease) }
.stage-canvas.is-live{ opacity:1 }
.stage-poster{ transition:opacity var(--dur-slow) var(--ease) }
.stage:has(.is-live) .stage-poster{ opacity:0 }

/* ── shed: el par de placas y el frente que viaja ───────────────────────── */
/* La sección es alta a propósito: el progreso del shader ES el scroll dentro de
   ella. 300svh da un frente que se lee; menos se siente un parpadeo. */
.shed{ position:relative; min-height:300svh }
.shed-plates{ position:sticky; top:0; height:100svh; overflow:clip }
.shed-plate,.shed-canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* La placa A se queda SIEMPRE debajo: es el póster, es el LCP, y es lo que ve quien
   no corre el shader. El canvas entra encima de ella y nada más.
   La primera versión desvanecía las tres capas a la vez y la transición pasaba por un
   bajón a oscuro en medio — medido en headless: canvas 0.667, copy 0.755, placa A
   subiendo desde 0, todo a la vez. Una capa se mueve, las otras se quedan quietas. */
.shed-plate-b{ opacity:0 }                       /* sólo existe como textura para el shader */
.shed-canvas{ opacity:0; transition:opacity var(--dur-slow) var(--ease) }
.shed.is-live .shed-canvas{ opacity:1 }
.shed-copy{ position:sticky; top:0; z-index:1; padding:clamp(1.5rem,5vw,5rem);
  height:100svh; display:grid; align-content:end; max-width:70ch; margin-top:-100svh }

/* ── conmutador de idioma ───────────────────────────────────────────────────
   Son ENLACES a páginas reales, no un toggle de JavaScript: cada idioma tiene su
   URL, se indexa, se comparte, y no hay parpadeo al cargar. El sitio le pone
   encima su propio estilo; esto es sólo la forma. */
.i18n{ position:fixed; z-index:70; top:0; right:0; display:flex; gap:1px;
       padding:clamp(.7rem,2vw,1.1rem) clamp(1rem,4vw,2.4rem) }
.i18n a{ font-family:var(--mono); font-size:10px; letter-spacing:.18em;
         text-transform:uppercase; text-decoration:none; color:var(--ink-dim);
         padding:.35rem .5rem; transition:color var(--dur-fast) var(--ease) }
.i18n a:hover{ color:var(--ink) }
.i18n a[aria-current]{ color:var(--accent) }
.i18n a + a{ border-left:1px solid var(--rule) }

/* Texto sólo para lectores de pantalla: cuando una imagen decorativa lleva el
   argumento, el equivalente va en el documento, no en un alt. flow-immersive §3. */
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0 }

/* flow-kit · motion — one curve for the whole site. Mixing easings is what makes
   a page feel amateur. Only transform and opacity animate; anything else hits
   layout and drops the scroll to 30 fps on a mid-range Android. */
.reveal{ opacity:0; transform:translateY(20px);
  transition:opacity var(--dur) var(--ease) var(--d,0ms), transform var(--dur) var(--ease) var(--d,0ms) }
.reveal.is-in{ opacity:1; transform:none }
.d1{ --d:80ms } .d2{ --d:160ms } .d3{ --d:240ms }   /* past ~240ms reads as lag */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important;
                        scroll-behavior:auto!important }
  .reveal{ opacity:1; transform:none }
  /* Reduced motion means the posters — not a frozen <video>, not a slower spin. */
  .film{ display:none }
  .hero-poster{ opacity:1 }
  .stage-canvas{ display:none }
}

@media (prefers-reduced-motion: reduce){
  /* Sin movimiento, el par de placas es una sola imagen quieta — no un canvas congelado. */
  .shed{ min-height:100svh }
  .shed-canvas{ display:none }
  .shed-plate-b{ display:none }
}

/* cryptocommons.church — el instrumento.
   Los tokens viven en brand.json; el kit los emite antes de este archivo.
   Aquí sólo está la forma, y es una sola para las dos páginas: la portada dejó
   de ser una landing oscura de cripto y habla el mismo idioma que la carta. */

/* ── modo oscuro ────────────────────────────────────────────────────────────
   Papel a tinta y tinta a papel, sin invertir nada más: la viridiana y la
   rúbrica se aclaran lo justo para sostener contraste sobre fondo oscuro. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0D100E; --leaf:#151A16; --ink:#DFE4DD; --muted:#98A199; --faint:#7E877F;
    --viridian:#59A783; --rubric:#D0796D; --rule:#2C332D; --hair:#242A25;
    --ground-solid:#0D100E; --ink-dim:#98A199; --accent:#59A783;
  }
}

body{ background:var(--paper); color:var(--ink); font-family:var(--serif);
      font-size:19px; line-height:1.62; }

/* ── el pliego ──────────────────────────────────────────────────────────────
   Una sola medida para todo el documento. El aire no es decorativo: es lo que
   hace que una página se lea como impresa y no como una pantalla llena. */
#main,.sheet{ max-width:1180px; margin:0 auto;
        padding:clamp(24px,5vw,72px) clamp(18px,4vw,48px) 0; }

h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:.01em; margin:0; }
h2,h3{ text-wrap:balance; }
h1{ text-wrap:pretty; }
h1{ font-size:clamp(38px,6.4vw,86px); line-height:1.02; font-weight:500; }
h2{ font-size:clamp(24px,3.4vw,34px); line-height:1.12; }
h3{ font-size:clamp(17px,1.7vw,21px); line-height:1.25; }
p{ margin:0 0 1.05rem; } p:last-child{ margin-bottom:0; }
a{ color:var(--viridian); }
em{ font-style:italic; }
b,strong{ font-weight:600; color:var(--ink); }

/* ── el aparato marginal ────────────────────────────────────────────────────
   El siglo en el margen y el texto en su columna. Es lo que convierte una
   página en un documento: el lector sabe dónde está sin que nadie se lo grite.
   Es la misma rejilla que usa la carta, a propósito. */
.clause{ display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem 2.4rem;
         margin-bottom:2.1rem; }
@media (min-width:900px){ .clause{ grid-template-columns:8.5rem minmax(0,66ch); } }
.siglum{ font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:.06em;
         color:var(--faint); text-transform:uppercase; padding-top:.45rem; }
.siglum b{ display:block; font-weight:500; color:var(--viridian); letter-spacing:.1em; }

.part{ margin-top:clamp(3.4rem,7vw,6rem); }
.lede{ font-size:21px; line-height:1.55; color:var(--ink); max-width:60ch; }
.body{ max-width:var(--measure); color:var(--muted); }

/* Un filete, no una caja. Las cajas con borde en los cuatro lados son de
   interfaz; los documentos se ordenan con líneas horizontales. */
.rule-top{ border-top:1px solid var(--rule); }
.hair{ border-top:1px solid var(--hair); }

/* ── frontispicio ───────────────────────────────────────────────────────────
   Grabado a la izquierda, título a la derecha. Un solo pliegue, como una
   portada de instrumento — no un hero a sangre con texto encima. */
.front{ display:grid; gap:clamp(2rem,4vw,3.4rem); align-items:center;
        padding:clamp(2.6rem,6vw,5rem) 0 clamp(2.2rem,4vw,3.2rem);
        border-bottom:1px solid var(--rule); }
@media (min-width:960px){ .front{ grid-template-columns:340px minmax(0,1fr); gap:3.6rem; } }
.front-figure{ display:flex; justify-content:flex-start; }
.front-text{ min-width:0; }
.front-plate{ width:100%; max-width:340px; height:auto; display:block; }
.front-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.22em;
                text-transform:uppercase; color:var(--faint); margin:0 0 1.5rem;
                display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; }
.front-eyebrow b{ font-weight:500; color:var(--viridian); letter-spacing:.22em; }
h1 .l1,h1 .l2{ display:block; color:var(--ink); }
h1 .l3{ display:block; color:var(--rubric); font-style:italic; }
.front .lede{ margin-top:1.6rem; }

/* Acciones como enlaces con filete, no botones con degradado. Un degradado con
   sombra de color es de 2016 y es lo que más abarataba la página. */
.actions{ display:flex; flex-wrap:wrap; gap:1.8rem; margin-top:2rem; }
.action{ font-family:var(--mono); font-size:12px; letter-spacing:.14em;
         text-transform:uppercase; text-decoration:none; color:var(--viridian);
         padding-bottom:.4rem; border-bottom:1px solid var(--rule);
         transition:border-color .22s var(--ease), color .22s var(--ease); }
.action:hover{ border-color:var(--viridian); }
.action-mark{ color:var(--rubric); border-bottom-color:var(--rubric); }
.action-mark:hover{ border-bottom-color:var(--rubric); color:var(--rubric); }

/* ── la cuenta: cifras como registro, no como tarjetas ──────────────────── */
.toll{ display:grid; grid-template-columns:repeat(2,1fr); gap:0;
       margin-top:clamp(2.2rem,4vw,3.2rem); border-top:1px solid var(--rule); }
@media (min-width:760px){ .toll{ grid-template-columns:repeat(4,1fr); } }
.toll div{ padding:1.1rem 1.4rem 1.1rem 0; border-bottom:1px solid var(--hair); }
@media (min-width:760px){ .toll div + div{ padding-left:1.4rem; border-left:1px solid var(--hair); } }
.toll b{ display:block; font-family:var(--display); font-weight:500;
         font-size:clamp(22px,2.6vw,30px); line-height:1; color:var(--ink); }
.toll span{ display:block; margin-top:.55rem; font-family:var(--mono); font-size:10px;
            letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* ── el registro de lo que ardió ───────────────────────────────────────────
   Una tabla rayada de verdad. Antes eran filas flotando en negro con la cifra
   en naranja fluorescente; ahora la cifra va en rúbrica, que es el color que
   los libros llevan siglos usando para lo que hay que mirar. */
.dead{ margin-top:clamp(1.8rem,3vw,2.6rem); border-top:1px solid var(--rule); }
.dead .row{ display:grid; grid-template-columns:1fr; gap:.25rem 2rem;
            padding:1.35rem 0; border-bottom:1px solid var(--hair); align-items:baseline; }
@media (min-width:820px){ .dead .row{ grid-template-columns:7rem 1fr 11rem 1.3fr; gap:0 2rem; } }
.dead .yr{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--faint); }
.dead .who{ font-family:var(--display); font-weight:600; font-size:clamp(19px,2vw,24px); color:var(--ink); }
.dead .amt{ font-family:var(--mono); font-size:12.5px; color:var(--rubric); }
.dead .why{ font-size:17px; color:var(--muted); }

.verdict{ margin-top:clamp(2.2rem,4vw,3.2rem); padding-left:1.4rem;
          border-left:2px solid var(--rubric); font-family:var(--display);
          font-weight:500; font-size:clamp(21px,2.8vw,30px); line-height:1.3; max-width:30ch; }
.verdict .hit{ color:var(--rubric); font-style:italic; }

/* ── las dos economías ─────────────────────────────────────────────────── */
.econ{ display:grid; gap:clamp(2rem,3vw,3rem); margin-top:clamp(2rem,3.4vw,3rem); }
@media (min-width:960px){ .econ{ grid-template-columns:1fr 1fr; gap:3.4rem; } }
.card{ border-top:1px solid var(--rule); padding-top:1.4rem; display:flex; flex-direction:column; }
.cardHead{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; margin-bottom:.5rem; }
.card h3{ color:var(--rubric); }
.card.good h3{ color:var(--viridian); }
.cardHead .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.14em;
                text-transform:uppercase; color:var(--faint); }
.card .sum{ font-size:17px; color:var(--muted); }
.figure{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.4rem 0 1.2rem; }
.figure svg{ display:block; width:100%; min-width:520px; height:auto; }
.fnote{ border-top:1px solid var(--hair); padding-top:1.05rem; margin-top:auto;
        font-size:17px; color:var(--ink); }
.fnote b{ color:var(--rubric); font-weight:600; }
.card.good .fnote b{ color:var(--viridian); }

/* ── la lámina de la red ───────────────────────────────────────────────── */
.plate{ margin-top:clamp(2rem,3.4vw,3rem); border-top:1px solid var(--rule);
        padding-top:1.6rem; overflow-x:auto; }
.plate svg{ display:block; width:100%; min-width:640px; height:auto; }
.plate-cap{ margin-top:1rem; font-family:var(--mono); font-size:10.5px;
            letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.plate-cap b{ font-weight:500; color:var(--viridian); }

/* ── el canon: artículos, no un terminal de hacker ─────────────────────── */
.canon{ margin-top:clamp(2rem,3.4vw,3rem); border-top:1px solid var(--rule); }
.canon .art{ display:grid; grid-template-columns:minmax(0,1fr); gap:.3rem 2rem;
             padding:1.15rem 0; border-bottom:1px solid var(--hair); align-items:baseline; }
@media (min-width:820px){ .canon .art{ grid-template-columns:9rem minmax(0,1fr) 1.1fr; gap:0 2rem; } }
.canon .n{ font-family:var(--mono); font-size:11px; letter-spacing:.1em;
           text-transform:uppercase; color:var(--viridian); }
.canon .cond{ font-family:var(--mono); font-size:13.5px; color:var(--ink); }
.canon .cond .op{ color:var(--rubric); }
.canon .gloss{ font-size:16.5px; color:var(--muted); }
.canon-note{ margin-top:1.6rem; font-size:17px; color:var(--muted); max-width:56ch; }

/* ── el espectro ────────────────────────────────────────────────────────── */
.gate{ display:grid; gap:clamp(2rem,3.4vw,3.4rem); margin-top:clamp(2rem,3.4vw,3rem); }
@media (min-width:980px){ .gate{ grid-template-columns:1.05fr .95fr; align-items:start; } }
.spectrum{ border-top:1px solid var(--rule); padding-top:1.4rem; }
.spectrum .cap{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
                text-transform:uppercase; color:var(--faint); margin-bottom:1.2rem; }
.slots{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--hair); }
@media (min-width:520px){ .slots{ grid-template-columns:repeat(3,1fr); } }
.slot{ display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem .7rem 0;
       border-bottom:1px solid var(--hair); }
@media (min-width:520px){ .slot:not(:nth-child(3n+1)){ padding-left:.9rem; border-left:1px solid var(--hair); } }
/* Un anillo abierto, no un cuadro relleno: el color está reclamado por nadie
   todavía, y un contorno dice «vacante» donde un bloque dice «ocupado». */
.chip{ width:12px; height:12px; flex:none; border-radius:50%;
       border:1.5px solid var(--h); background:transparent;
       transition:background .2s var(--ease); }
.slot:hover .chip{ background:var(--h); }
.slot span{ font-family:var(--mono); font-size:10px; letter-spacing:.13em;
            text-transform:uppercase; color:var(--faint); }
.spectrum .free{ margin-top:1.2rem; font-size:16.5px; color:var(--muted); }

/* ── la puerta: un aviso impreso, no una consola ────────────────────────── */
.notice{ border-top:1px solid var(--rule); padding-top:1.4rem; }
.notice-head{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
              text-transform:uppercase; color:var(--faint); margin-bottom:1.1rem; }
.notice-body{ background:var(--leaf); border-top:1px solid var(--hair);
              border-bottom:1px solid var(--hair); padding:1.5rem 1.7rem; }
.notice-body dl{ margin:0; display:grid; grid-template-columns:1fr auto; gap:.55rem 1.4rem;
                 font-family:var(--mono); font-size:12px; letter-spacing:.04em; }
.notice-body dt{ color:var(--muted); }
.notice-body dd{ margin:0; text-align:right; color:var(--ink); }
.notice-body dd.no{ color:var(--rubric); }
.notice-foot{ margin-top:1.2rem; font-size:16.5px; color:var(--muted); }

.stand{ display:inline-block; margin-top:clamp(2.4rem,4vw,3.4rem);
        border:1px solid var(--rubric); padding:.55rem 1rem;
        font-family:var(--mono); font-size:11px; letter-spacing:.16em;
        text-transform:uppercase; color:var(--rubric); }

/* ── colofón ────────────────────────────────────────────────────────────── */
.colophon{ margin-top:clamp(3.4rem,6vw,5.4rem); border-top:1px solid var(--rule);
           padding:1.6rem 0 clamp(3rem,6vw,5rem);
           display:flex; flex-wrap:wrap; gap:.7rem 2.4rem; justify-content:space-between;
           font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
           text-transform:uppercase; color:var(--faint); }
.colophon a{ color:var(--viridian); text-decoration:none; }
.colophon a:hover{ color:var(--rubric); }

/* ── conmutador de idioma ───────────────────────────────────────────────── */
.i18n{ padding:clamp(14px,2.6vh,22px) clamp(18px,4vw,48px); gap:0; }
.i18n a{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
         text-transform:uppercase; color:var(--faint); padding:.2rem .55rem; }
.i18n a:hover{ color:var(--muted); }
.i18n a[aria-current]{ color:var(--viridian); }
/* mezcla con el fondo: viridiana sobre papel, claro sobre la tierra */
.journey ~ * .i18n a, body:has(.journey) .i18n a{ color:rgba(255,255,255,.55); }
body:has(.journey) .i18n a:hover{ color:#fff; }
body:has(.journey) .i18n a[aria-current]{ color:#9fd6b8; }
body:has(.journey) .i18n a + a{ border-left-color:rgba(255,255,255,.22); }
.i18n a + a{ border-left:1px solid var(--rule); }

/* ── entrada ────────────────────────────────────────────────────────────────
   Un documento no se desliza. Sólo aparece, y poco. */
.reveal{ opacity:0; transform:translateY(10px); }
.reveal.is-in{ opacity:1; transform:none;
               transition:opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ── los doce del espectro ──────────────────────────────────────────────────
   Eran `style="--h:#…"` en el markup; `style-src 'self'` los bloquea.
   Sobre papel son tintas de imprenta, no neones: los valores de neón que
   funcionaban sobre negro se ven de plástico sobre un fondo cálido. */
.slot-1{--h:var(--h1)}   .slot-2{--h:var(--h2)}   .slot-3{--h:var(--h3)}
.slot-4{--h:var(--h4)}   .slot-5{--h:var(--h5)}   .slot-6{--h:var(--h6)}
.slot-7{--h:var(--h7)}   .slot-8{--h:var(--h8)}   .slot-9{--h:var(--h9)}
.slot-10{--h:var(--h10)} .slot-11{--h:var(--h11)} .slot-12{--h:var(--h12)}
/* ══════════════════════════════════════════════════════════════════════════
   /charter — la carta. Es un segundo diseño completo (papel claro, Garamond,
   en inglés) que comparte hoja de estilos con la portada, así que TODOS sus
   selectores van bajo `.charter`, la clase que el kit pone en <html> para esa
   página — incluidos los de dentro de cada @media. Su bloque de modo oscuro
   redefine --ink y --paper en :root: sin ámbito, repintaba la portada.
   Los tokens quedan en `:root.charter` a propósito: el sello los lee con
   getComputedStyle(document.documentElement), y en <body> no los alcanzaría.
   ══════════════════════════════════════════════════════════════════════════ */

:root.charter{
    --paper:#E7EAE5;
    --leaf:#F1F3EE;
    --ink:#141813;
    --muted:#59615A;
    --faint:#7C847C;
    --viridian:#1D5B44;
    --rubric:#8E2B24;
    --rule:#C6CCC3;
    --hair:#D4D9D1;
    --serif:"EB Garamond","Iowan Old Style",Georgia,serif;
    --display:"Cormorant Garamond","EB Garamond",Georgia,serif;
    --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
  }
@media (prefers-color-scheme: dark){
:root.charter:not([data-theme="light"]){
      --paper:#0D100E; --leaf:#151A16; --ink:#DFE4DD; --muted:#98A199; --faint:#7E877F;
      --viridian:#59A783; --rubric:#D0796D; --rule:#2C332D; --hair:#242A25;
    }
}
:root.charter[data-theme="dark"]{
    --paper:#0D100E; --leaf:#151A16; --ink:#DFE4DD; --muted:#98A199; --faint:#7E877F;
    --viridian:#59A783; --rubric:#D0796D; --rule:#2C332D; --hair:#242A25;
  }
.charter body{
    background:var(--paper); color:var(--ink);
    font-family:var(--serif); font-size:19px; line-height:1.62;
    font-feature-settings:"onum" 1,"kern" 1;
    -webkit-font-smoothing:antialiased;
  }
.charter .sheet{max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,72px) clamp(18px,4vw,48px) 96px;}
.charter .clause{display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem 2.4rem;margin-bottom:2.1rem;}
.charter .siglum{
    font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.06em;
    color:var(--faint);text-transform:uppercase;padding-top:.45rem;
  }
.charter .siglum b{display:block;font-weight:500;color:var(--viridian);letter-spacing:.1em;}
.charter .body{max-width:66ch;}
@media (min-width:1000px){
.charter .clause{grid-template-columns:8.5rem minmax(0,66ch);}
.charter .siglum{text-align:right;}
}
.charter p{margin:0 0 1.05rem;}
.charter p:last-child{margin-bottom:0;}
.charter a{color:var(--viridian);}
.charter .masthead{display:grid;gap:2.6rem;align-items:center;justify-items:center;text-align:center;
    padding-bottom:2.6rem;border-bottom:1px solid var(--rule);margin-bottom:.4rem;}
@media (min-width:900px){
.charter .masthead{grid-template-columns:320px minmax(0,1fr);text-align:left;justify-items:start;gap:3.4rem;}
}
.charter .sealwrap{position:relative;width:320px;height:320px;max-width:100%;}
.charter .sealwrap canvas, .charter .sealwrap svg{position:absolute;inset:0;width:100%;height:100%;}
.charter .sealwrap svg text{font-family:var(--display);font-size:12.5px;font-weight:600;
    letter-spacing:.22em;fill:var(--viridian);}
.charter .sealwrap svg .lower{fill:var(--rubric);font-size:11px;letter-spacing:.3em;}
.charter .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--rubric);margin:0 0 1.1rem;}
.charter .latin{font-family:var(--display);font-weight:600;font-size:clamp(28px,5.2vw,50px);
    line-height:1.06;letter-spacing:.02em;margin:0 0 .5rem;text-wrap:balance;}
.charter .vernacular{font-family:var(--display);font-size:clamp(18px,2.4vw,25px);font-style:italic;
    color:var(--muted);margin:0 0 1.6rem;}
.charter .subtitle{font-size:20px;margin:0 0 1.5rem;max-width:34ch;}
.charter .docline{font-family:var(--mono);font-size:11.5px;line-height:1.9;letter-spacing:.05em;
    color:var(--faint);text-transform:uppercase;}
.charter .stamp{display:inline-block;margin-top:1.4rem;padding:.42rem .8rem .34rem;
    border:1.5px double var(--rubric);color:var(--rubric);transform:rotate(-1.6deg);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;}
.charter .part{margin-top:4.4rem;}
.charter .partmark{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--rubric);margin:0 0 .35rem;}
.charter h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3.4vw,34px);line-height:1.12;
    margin:0 0 1.4rem;letter-spacing:.01em;text-wrap:balance;}
.charter h3{font-family:var(--display);font-weight:600;font-size:22px;margin:0 0 .5rem;}
.charter .lede{font-size:21px;line-height:1.55;color:var(--ink);}
.charter .rubric{color:var(--rubric);font-variant:small-caps;letter-spacing:.06em;font-weight:600;}
.charter .lat{font-style:italic;}
.charter hr.rule{border:0;border-top:1px solid var(--rule);margin:3.2rem 0 0;}
.charter hr.double{border:0;border-top:3px double var(--rule);margin:3.6rem 0 0;}
.charter .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.4rem 0 1.2rem;}
.charter table{border-collapse:collapse;width:100%;min-width:640px;font-size:16px;
    font-variant-numeric:tabular-nums lining-nums;}
.charter th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);text-align:left;
    padding:0 1.1rem .55rem 0;border-bottom:1px solid var(--rule);vertical-align:bottom;}
.charter td{padding:.72rem 1.1rem .72rem 0;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.42;}
.charter td:last-child, .charter th:last-child{padding-right:0;}
.charter .yr{font-family:var(--mono);font-size:13px;color:var(--viridian);white-space:nowrap;letter-spacing:.02em;}
.charter .code{font-family:var(--mono);font-size:13px;line-height:1.45;color:var(--muted);}
.charter .st{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.charter .st.done{color:var(--viridian);}
.charter .st.open{color:var(--rubric);}
.charter .st.wait{color:var(--faint);}
.charter tr .fate{color:var(--muted);}
.charter .creed{margin:0;padding:0 0 0 1.4rem;border-left:2px solid var(--rubric);
    font-family:var(--display);font-size:clamp(20px,2.4vw,25px);line-height:1.42;}
.charter .creed p{margin:0 0 .62rem;}
.charter .creed p:last-child{margin-bottom:0;}
.charter ol.arts{list-style:none;margin:0;padding:0;counter-reset:none;}
.charter ol.arts li{margin:0 0 1.15rem;padding:0;}
.charter .num{font-family:var(--mono);font-size:12px;color:var(--viridian);letter-spacing:.08em;
    margin-right:.55rem;}
.charter ul.plain{margin:0 0 1.05rem;padding-left:1.15rem;}
.charter ul.plain li{margin-bottom:.4rem;}
.charter .panel{background:var(--leaf);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    padding:1.6rem 1.8rem;margin:0 0 1.3rem;}
.charter .panel p:last-child{margin-bottom:0;}
.charter .ledger{display:grid;gap:.1rem;font-family:var(--mono);font-size:14px;
    font-variant-numeric:tabular-nums;}
.charter .ledger div{display:flex;justify-content:space-between;gap:1.2rem;padding:.42rem 0;
    border-bottom:1px dotted var(--rule);}
.charter .ledger div:last-child{border-bottom:0;border-top:1.5px solid var(--ink);margin-top:.4rem;
    font-weight:500;color:var(--viridian);}
.charter .ledger span:first-child{color:var(--muted);}
.charter sup a{font-family:var(--mono);font-size:10px;text-decoration:none;padding-left:1px;}
.charter .sources{font-size:14.5px;line-height:1.55;color:var(--muted);max-width:74ch;}
.charter .sources li{margin-bottom:.42rem;}
.charter .sources ol{padding-left:1.4rem;margin:0;}
.charter .colophon{font-family:var(--mono);font-size:11px;line-height:1.9;color:var(--faint);
    letter-spacing:.04em;max-width:70ch;}
.charter .sig{font-family:var(--display);font-size:26px;color:var(--viridian);margin:.2rem 0 .3rem;}
.charter :focus-visible{outline:2px solid var(--viridian);outline-offset:3px;}
.charter .homelink{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule);}
.charter .homelink a{display:inline-block;padding:.7rem clamp(18px,4vw,48px);font-family:var(--mono);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--viridian);text-decoration:none;}
.charter .homelink a:hover{color:var(--rubric);}

.charter .w6{width:6%}
.charter .w11{width:11%}
.charter .w13{width:13%}
.charter .w20{width:20%}
.charter .w22{width:22%}
.charter .w26{width:26%}
.charter .w30{width:30%}
.charter .w34{width:34%}
.charter .w37{width:37%}
.charter .w44{width:44%}
.charter .w54{width:54%}
.charter .w78{width:78%}
.charter .mt-lg{margin-top:2.2rem}

/* ── conmutador de idioma ───────────────────────────────────────────────────
   El kit lo pone fijo arriba a la derecha, que es donde este sitio ya tenía el
   credo. En vez de apilarlos, el credo se va con el dominio a la izquierda y la
   esquina derecha queda para el idioma. Y `padding-right` en la fila para que en
   móvil el credo no se meta debajo del conmutador al envolver. */
.heroTop .wrap{ justify-content:flex-start; gap:.4rem 2.2rem; padding-right:5.5rem; }

.i18n{ padding:clamp(18px,3.6vh,34px) clamp(20px,4.4vw,64px); gap:0; }
.i18n a{ font-family:var(--mono); font-size:11px; letter-spacing:.30em;
  text-transform:uppercase; color:var(--ashdim); padding:.15rem .55rem;
  transition:color .22s ease; }
.i18n a:hover{ color:var(--ash); }
.i18n a[aria-current]{ color:var(--regen); }
.i18n a + a{ border-left:1px solid var(--edge); }

/* ── lo que dejó de ser un atributo style= ──────────────────────────────────
   `style-src 'self'` sin `unsafe-inline` bloquea el atributo style en el HTML.
   Eran 32 en el sitio original — el color del H2 de la sección 01, el padding de
   las acciones de la puerta, los doce `--h` del espectro y los 18 anchos de la
   carta — y todos habrían fallado en silencio en producción.
   (Escribir el .style de un elemento desde JS sí está permitido; es el atributo
   en el markup el que no.)

   ⚠️ Estas reglas se perdieron una vez, al regenerar este archivo entero para
   arreglar el ámbito de la carta. El espectro arcoíris se quedó sin colores y no
   lo cantó nada: el HTML seguía diciendo `class="slot slot-7"` y el token
   `--h7` seguía existiendo; sólo faltaba la regla que los une. Por eso el kit
   ahora avisa de clases usadas y nunca definidas. */
.head-ash{ color:var(--ash); }
.gateActions{ padding:0 clamp(16px,2.4vw,28px) clamp(16px,2.4vw,28px); }

.slot-1{--h:var(--h1)}   .slot-2{--h:var(--h2)}   .slot-3{--h:var(--h3)}
.slot-4{--h:var(--h4)}   .slot-5{--h:var(--h5)}   .slot-6{--h:var(--h6)}
.slot-7{--h:var(--h7)}   .slot-8{--h:var(--h8)}   .slot-9{--h:var(--h9)}
.slot-10{--h:var(--h10)} .slot-11{--h:var(--h11)} .slot-12{--h:var(--h12)}

/* ══════════════════════════════════════════════════════════════════════════
   EL VIAJE · ceniza → esperanza → manifestación
   Ocho estados de la misma tierra. El escenario se queda quieto en sticky y la
   copy pasa por encima: el que se mueve es el lector, y con él el tiempo.
   ══════════════════════════════════════════════════════════════════════════ */
.journey{ position:relative;
  /* sale del pliego a los dos lados Y se come el padding superior, para que la
     tierra empiece en el borde de la ventana y no bajo una banda de papel */
  margin:calc(-1 * clamp(24px,5vw,72px)) calc(50% - 50vw) 0; }
.stage{ position:sticky; top:0; height:100svh; overflow:clip; background:#0e1110; }
.land{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
       will-change:opacity, transform; }
/* Sin JS o sin movimiento, la primera lámina es la que se ve y las demás
   quedan apiladas debajo: la página nunca depende del script para tener imagen. */
.journey:not(.is-live) .land ~ .land{ display:none; }
.journey.is-live .land{ opacity:0; }
.journey.is-live .land:first-of-type{ opacity:1; }

/* El velo. Nunca plano: un plano ensucia la mitad clara y aun así pierde la
   oscura. Gradiente arriba y abajo, y el centro casi limpio. */
.stage-scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,13,12,.55) 0%, rgba(10,13,12,.06) 32%,
                             rgba(10,13,12,.14) 60%, rgba(10,13,12,.70) 100%),
    linear-gradient(94deg,  rgba(10,13,12,.78) 0%,  rgba(10,13,12,.58) 26%,
                             rgba(10,13,12,.12) 58%, rgba(10,13,12,0) 74%); }

.acts{ position:relative; margin-top:-100svh; }
.act{ min-height:112svh; display:grid; align-content:center;
      padding:clamp(4rem,10vh,9rem) clamp(20px,5vw,72px);
      max-width:1180px; margin:0 auto; }
.act-in{ max-width:64ch; }

/* Sobre el paisaje la voz es clara y el fondo es la tierra: tinta clara, no la
   tinta de papel. Es el único sitio del sitio donde la paleta se invierte. */
.act .siglum{ color:rgba(255,255,255,.62); }
.act .siglum b{ color:#9fd6b8; }
.act h1,.act h2,.act h1 .l1,.act h1 .l2{ color:#f4f2ec; }
.act .lede{ color:rgba(244,242,236,.9); }
.act .l3{ color:#e2a09a; }
.act b,.act strong{ color:#fff; font-weight:600; }
.act em{ color:#f4f2ec; }
.act .action{ color:#cfe8d8; border-bottom-color:rgba(255,255,255,.34); }
.act .action:hover{ color:#fff; border-bottom-color:#fff; }
.act .action-mark{ color:#e9b3ad; border-bottom-color:rgba(233,179,173,.6); }
.act .action-mark:hover{ color:#f3d0cc; border-bottom-color:#f3d0cc; }
.act h1{ font-size:clamp(40px,6.6vw,92px); }

/* ── el instrumento, laminado sobre el territorio ────────────────────────────
   Las secciones densas —el registro, los diagramas, los artículos, el espectro—
   no se leen sobre una foto por muy buen velo que lleve. Van en una hoja de
   papel puesta encima de la tierra: las dos lenguas del sitio, una sobre otra. */
.leafpanel{ background:var(--paper); color:var(--ink);
  border-top:2px solid var(--rubric);
  padding:clamp(1.6rem,3.4vw,2.8rem) clamp(1.4rem,3vw,2.6rem);
  box-shadow:0 24px 70px -30px rgba(0,0,0,.75);
  max-width:min(100%, 76ch); }
.leafpanel .siglum{ color:var(--faint); }
.leafpanel .siglum b{ color:var(--viridian); }
.leafpanel h2{ color:var(--ink); }
.leafpanel .lede{ color:var(--ink); }
.leafpanel .clause{ margin-bottom:1.4rem; }
.act--wide .act-in{ max-width:none; }

/* El acto de cierre respira: sale del paisaje al papel. */
.landing{ background:var(--paper); position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce){
  /* Sin movimiento el viaje no desaparece: las ocho láminas se apilan como una
     secuencia de planchas y la copy va debajo, sobre fondo oscuro para que la
     tinta clara de los actos siga siendo legible. Deja de moverse, no de existir. */
  .journey{ background:#0e1110; }
  .stage{ position:static; height:auto; display:grid; gap:2px; }
  .land{ position:static; opacity:1 !important; transform:none !important;
         height:auto; aspect-ratio:16/9; }
  .journey:not(.is-live) .land ~ .land{ display:block; }
  .acts{ margin-top:0; padding-bottom:2rem; }
  .act{ min-height:0; padding-block:clamp(2.4rem,6vh,4rem); }
  .stage-scrim{ display:none; }
}

/* ── el multiplicador ────────────────────────────────────────────────────────
   La sección es alta y el panel va sticky dentro: el scroll no pasa de largo,
   se queda mirando cómo se cierra el circuito. */
.mx{ position:relative; min-height:340svh; }
.mx-sticky{ position:sticky; top:0; min-height:100svh; display:grid; align-content:center;
            padding:clamp(2rem,5vh,4rem) clamp(20px,5vw,72px); }
.mx-panel{ max-width:min(100%, 92ch); margin:0 auto; }
.mx-figure{ position:relative; margin-top:1.4rem; }
.mx-plate{ display:block; width:100%; height:auto; }

.mx-land{ opacity:.65 }
.mx-thread{ stroke-linecap:round; }
.mx-node{ opacity:.28; transition:opacity .3s var(--ease); }
.mx-leak{ opacity:var(--mx-leak,1); transition:opacity .3s var(--ease); }
/* La fuga extractiva se dibuja discontinua a propósito: es valor que sale y no
   vuelve, y una línea rota se lee como pérdida sin necesidad de explicarlo. */
.mx-leakpath{ stroke-linecap:round; }

.mx-read{ position:absolute; right:2%; bottom:4%; margin:0; text-align:right;
          display:grid; gap:.2rem; }
.mx-count{ font-family:var(--display); font-weight:600; line-height:.92;
           font-size:clamp(56px,9vw,132px); color:var(--viridian);
           font-variant-numeric:tabular-nums; }
.mx-label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
           text-transform:uppercase; color:var(--faint); }
.mx-note{ margin-top:1.4rem; font-size:17px; color:var(--muted); max-width:62ch; }

@media (max-width:720px){
  .mx{ min-height:300svh }
  .mx-read{ position:static; text-align:left; margin-top:1rem; }
}
@media (prefers-reduced-motion: reduce){
  .mx{ min-height:0 }
  .mx-sticky{ position:static; min-height:0 }
}
.mx-layer{ opacity:0; }
.mx-core{ opacity:.9; }