@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) }

/* 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); }
.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)}