:root{
  --ink: #eef3f1;
  --ink-dim: #93a8ad;
  --ground: #08090722;
  --ground-solid: #081419;
  --accent: #d4b26a;
  --rule: #ffffff1c;
  --scrim-top: rgba(8,20,25,.55);
  --scrim-mid: rgba(8,20,25,.15);
  --scrim-bot: rgba(8,20,25,.92);
  --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --body: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --measure: 62ch;
  --title-width: 16ch;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .28s;
  --dur: .55s;
  --dur-slow: .9s;
}

/* 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 }
}

/* Social Alchemy — a calm reading site. Everything reads from the tokens. */
.topbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem;
  padding:1.1rem clamp(1rem,5vw,5rem); border-bottom:1px solid var(--rule); background:#081419ee; backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10 }
.brand img{ width:clamp(170px,22vw,240px); height:auto }
.mainnav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem }
.mainnav a{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-dim); padding-bottom:.2rem; border-bottom:1px solid transparent }
.mainnav a:hover,.mainnav a[aria-current="page"]{ color:var(--accent); border-color:var(--accent) }

.display{ color:var(--ink) }
h1.display,h2.display{ color:var(--accent) }
.lede{ max-width:46ch; margin:0 0 .8rem }

.intro{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem);
  align-items:center; padding:clamp(3rem,8vw,7rem) clamp(1rem,5vw,5rem) }
.intro-img{ width:100%; height:auto; border-radius:50%; aspect-ratio:1; object-fit:cover; box-shadow:0 0 120px -10px #3fa7c455 }
.intro-img[src*="seven-levels"]{ border-radius:4px; aspect-ratio:auto; object-fit:contain; box-shadow:none }

.prose,.contact{ padding:clamp(3rem,7vw,6rem) clamp(1rem,5vw,5rem); border-top:1px solid var(--rule) }
.prose .section-title{ margin-bottom:1.6rem }
.pointlist{ max-width:var(--measure); padding-left:1.2rem; margin:0 0 1.2rem }
.pointlist li{ margin-bottom:.7rem }
.pointlist li::marker{ color:var(--accent) }

.quote-section{ background:#0d1f26; border-top:1px solid var(--rule) }
.quote-section .display{ color:var(--ink); font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem); max-width:34ch; line-height:1.25 }
.quote-section cite{ color:var(--accent) }

.fig{ margin:0; padding:0 clamp(1rem,5vw,5rem) clamp(3rem,6vw,5rem) }
.fig img{ width:100%; max-width:900px; height:auto; margin:0 auto }
.fig figcaption{ text-align:center; margin-top:1rem }
.post .fig{ padding:2rem 0 }
.post .fig img{ max-width:100% }
.epigraph{ font-family:var(--display); font-style:italic; font-size:1.25rem; color:var(--ink-dim); margin:0 0 2rem }

.bio{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(2rem,5vw,5rem);
  padding:clamp(3rem,7vw,6rem) clamp(1rem,5vw,5rem); align-items:start }
.bio-img{ width:100%; height:auto; border-radius:4px; position:sticky; top:7rem }

.posts{ list-style:none; margin:0; padding:0; display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)) }
.post-card a{ display:flex; flex-direction:column; gap:.6rem; text-decoration:none }
.post-card img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--rule) }
.post-title{ font-family:var(--display); font-size:1.6rem; color:var(--accent) }
.post-card:hover .post-title{ text-decoration:underline }

.closing{ border-top:1px solid var(--rule) }
.action{ color:var(--accent) }
.foot{ padding:2.5rem clamp(1rem,5vw,5rem); border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:baseline }
.foot p{ margin:0 }

@media (max-width:760px){
  .intro,.bio{ grid-template-columns:1fr }
  .intro-img{ max-width:420px; margin:0 auto }
  .bio-img{ position:static; max-width:280px }
  .topbar{ position:static }
}

/* ── ours: the night version ─────────────────────────────── */
h1.display,h2.display{ color:var(--ink) }
.hero .display{ font-size:clamp(2.6rem,1.6rem + 5vw,6rem) }
.hero-poster{ object-position:50% 40% }
.brand img{ filter:brightness(0) invert(1); opacity:.92 }
.fig img,.intro-img[src*="seven-levels"],.post .fig img,.post-card img{ background:#f6f3ec; padding:clamp(.6rem,2vw,1.4rem); border-radius:6px }
.action{ color:var(--accent) }
.mainnav a:hover,.mainnav a[aria-current="page"]{ color:var(--accent); border-color:var(--accent) }
.books{ padding:clamp(4rem,9vw,8rem) clamp(1rem,5vw,5rem); border-top:1px solid var(--rule);
  background:radial-gradient(ellipse at 70% 0%,#123540 0%,transparent 60%) }
.formula{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; color:var(--accent); margin:0 0 3rem }
.book-list{ list-style:none; margin:0; padding:0; display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)) }
.book{ border:1px solid var(--rule); border-radius:6px; padding:2rem 1.6rem; display:flex; flex-direction:column; gap:.9rem; min-height:14rem }
.book-n{ font-family:var(--display); font-size:2.4rem; color:var(--accent); line-height:1 }
.book-title{ font-family:var(--display); font-size:1.6rem; line-height:1.15 }
.foot a{ color:var(--accent) }
.hero{ min-height:calc(100svh - 76px) }
.hero .scrim{ background:linear-gradient(90deg,rgba(8,20,25,.88) 0%,rgba(8,20,25,.45) 45%,rgba(8,20,25,0) 75%),linear-gradient(180deg,rgba(8,20,25,0) 50%,rgba(8,20,25,.9) 100%) }
.hero .display{ font-size:clamp(2.4rem,1.4rem + 4.2vw,5rem); max-width:13ch }
.hero .eyebrow{ color:var(--accent) }