:root{
  color-scheme:light;
  --paper:#FFFFFF;
  --sheet:#F7F6F2;
  --ink:#16150F;
  --ink-2:#57544A;
  --ink-3:#6E6A5C;
  --guide:#C9C5B6;
  --guide-soft:#E3E0D5;
  --cinnabar:#C33018;
  --serif:'Instrument Serif','Georgia calibrada',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --t--2:clamp(.625rem,.60rem + .12vw,.6875rem);
  --t--1:clamp(.75rem,.72rem + .16vw,.8125rem);
  --t-0:clamp(1rem,.95rem + .24vw,1.125rem);
  --t-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --t-2:clamp(1.75rem,1.5rem + 1.2vw,2.5rem);
  --t-3:clamp(2.5rem,1.9rem + 3vw,4.5rem);
  --t-4:clamp(3.5rem,2.2rem + 6.4vw,8rem);
  --t-5:clamp(4.5rem,2.4rem + 10vw,10.5rem);

  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem;
  --s-5:4rem;  --s-6:6.5rem; --s-7:10rem;
  --pad:var(--s-5);
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-short:cubic-bezier(.61,1,.88,1);
  --enter-travel:1.125rem;
  --enter-delay:260ms;
  --enter-step:90ms;
  --enter-dur:300ms;

}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-synthesis:none}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-0);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--cinnabar);color:var(--paper)}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
.row{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--s-3);
  padding-inline:var(--pad);
  max-width:90rem;margin-inline:auto;
}
.opening .row{max-width:120rem}
@media (max-width:43.75em){
  :root{--pad:var(--s-3)}
  .row{grid-template-columns:repeat(4,1fr)}
}
.brand{
  max-width:120rem;margin-inline:auto;
  padding-inline:var(--pad);padding-block:var(--s-4) 0;
}
.brand__link{
  display:inline-flex;align-items:center;gap:.25rem;
  text-decoration:none;color:var(--ink);
}
.brand__mark{width:3.75rem;height:3.75rem;flex:none}
.brand__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.75rem,1.55rem + .8vw,2.125rem);
  line-height:1.15;letter-spacing:-.01em;
}
@media (hover:hover){.brand__link:hover .brand__name{color:var(--ink-2)}}
.brand__link:focus-visible{outline:2px solid var(--cinnabar);outline-offset:4px}
.reveal{position:relative}
.opening{position:sticky;top:0;z-index:0}
.cover{
  position:relative;z-index:1;margin:0;
  height:100svh;background:var(--paper);
}
.cover img,
.cover video{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:56.25em){
  .opening{position:static}
  .cover{height:auto}
  .cover img,
  .cover video{height:auto;aspect-ratio:16/9}
}
.cover--entera{
  width:100%;
  height:auto;
  aspect-ratio:1440/1024;
  max-height:100svh;
  background:var(--paper);
}
.cover--entera video,
.cover--entera img{
  width:100%;height:100%;
  aspect-ratio:auto;
  object-fit:contain;
}
.head{padding-block:var(--s-5) var(--s-6)}
.head__title{grid-column:1/-1;margin:0}
.head__title h1{
  margin:0;font-family:var(--serif);font-size:var(--t-4);line-height:.92;
  font-weight:400;
  letter-spacing:-.02em;text-wrap:balance;
}
.head__lede{
  grid-column:1/9;margin:var(--s-3) 0 0;font-size:var(--t-2);
  line-height:1.15;letter-spacing:-.02em;
  font-weight:400;text-wrap:pretty;
}
@media (max-width:43.75em){.head__lede{grid-column:1/-1}}
.summary{
  border-top:2px solid var(--ink);border-bottom:1px solid var(--guide);
  padding-block:var(--s-4);
}
.summary dl{grid-column:1/-1;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s-3)}
.summary div{border-left:1px solid var(--guide);padding-left:var(--s-2)}
.summary div:first-child{border-left-color:var(--cinnabar)}
.summary dd{margin:0;font-size:var(--t-0);line-height:1.4;
  font-weight:400}
.summary dd b{font-weight:600}
.prose{padding-block:var(--s-6)}
.prose__body{grid-column:3/10;max-width:38rem}
@media (max-width:43.75em){.prose__body{grid-column:1/-1}}
.prose__body h2{
  margin:0 0 var(--s-3);font-family:var(--serif);font-size:var(--t-2);
  line-height:1.1;letter-spacing:-.01em;font-weight:400;
  text-wrap:balance;
}
.prose__body p{margin:0 0 var(--s-3);text-wrap:pretty;color:var(--ink-2)}
.prose__body p:last-child{margin-bottom:0}
.prose--tight{padding-block:var(--s-4)}
.plate{padding-block:var(--s-4) var(--s-6)}
.plate__stage{grid-column:1/10;position:relative}
.plate__notes{grid-column:10/13;font-family:var(--sans);font-size:var(--t--1);
  line-height:1.6;color:var(--ink-2);align-self:start;padding-top:.25rem}
@media (max-width:56.25em){
  .plate__stage{grid-column:1/-1}
  .plate__notes{grid-column:1/-1;margin-top:var(--s-3);
    display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s-2)}
}
.plate--wide .plate__stage{grid-column:1/13}
.plate--wide .plate__notes{grid-column:1/13;margin-top:var(--s-2);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s-3)}
.note{margin:0 0 var(--s-3)}
.note span{display:block}
.ink-band{
  --paper:#16150F;
  --sheet:#1F1E17;
  --ink:#EDEBE4;
  --ink-2:#C9C5B6;
  --ink-3:#9C988A;
  --guide:#3A382F;
  --guide-soft:#272620;
  background:var(--paper);color:var(--ink);
  padding-block:var(--s-5) var(--s-6);
}
.ink-band > .plate{padding-block:0}
.ph{
  position:relative;background:var(--sheet);
  border:1px solid var(--guide);
  background-image:linear-gradient(var(--guide-soft) 1px,transparent 1px), linear-gradient(90deg,var(--guide-soft) 1px,transparent 1px);
  background-size:5rem 5rem;
  background-position:-1px -1px;
  display:grid;place-items:center;
  aspect-ratio:16/9;
}
.ph::before,.ph::after{
  content:'';position:absolute;background:var(--guide);
}
.ph::before{left:0;right:0;top:50%;height:1px}
.ph::after{top:0;bottom:0;left:50%;width:1px}
.ph span{
  position:relative;z-index:2;background:var(--paper);
  padding:.35rem .75rem;border:1px solid var(--ink);
  font-family:var(--sans);font-size:var(--t--2);letter-spacing:.08em;
  text-transform:uppercase;
}
.ph--tall{aspect-ratio:3/4}
.ph--square{aspect-ratio:1}
.ph--band{aspect-ratio:auto;height:100%}
@media (max-width:56.25em){.ph--band{aspect-ratio:16/9;height:auto}}
.pair,.trio{display:grid;gap:var(--s-3)}
.pair{grid-template-columns:1fr 1fr}
.trio{grid-template-columns:repeat(3,1fr)}
.plate__stage > img + .pair{margin-top:var(--s-3)}
@media (max-width:43.75em){.pair,.trio{grid-template-columns:1fr}}
.pair img,.trio img{width:100%;height:auto}
.plate__stage video{display:block;width:100%;height:auto}
.plate__stage > img{width:100%;height:auto}
.nm-round{border-radius:40px}
.side{padding-block:var(--s-5)}
.side__fig{grid-column:1/7;position:relative}
.side__fig img{width:100%;height:auto}
.side__txt{grid-column:8/12;align-self:center}
.side--flip .side__fig{grid-column:7/13;order:2}
.side--flip .side__txt{grid-column:2/6;order:1}
@media (max-width:56.25em){
  .side__fig,.side__txt,.side--flip .side__fig,.side--flip .side__txt{grid-column:1/-1;order:initial}
  .side__txt{margin-top:var(--s-3)}
}
.side__txt h3{margin:0 0 var(--s-2);font-family:var(--serif);font-size:var(--t-1);
  letter-spacing:-.01em;font-weight:400;line-height:1.15}
.side__txt p{margin:0 0 var(--s-3);color:var(--ink-2);font-size:var(--t-0)}
.side__txt p:last-child{margin-bottom:0}
.blueprint{background:var(--sheet);border:1px solid var(--ink);padding:var(--s-4) var(--s-3)}
.blueprint svg{width:100%;height:auto;display:block}
.bp-node{fill:var(--paper);stroke:var(--ink);stroke-width:1.25}
.bp-node--key{stroke:var(--cinnabar);stroke-width:2}
.bp-line{stroke:var(--ink-3);stroke-width:1;fill:none}
.bp-line--key{stroke:var(--cinnabar);stroke-width:1.5;stroke-dasharray:4 3}
.bp-t{font-family:var(--sans);font-size:9.5px;fill:var(--ink)}
.bp-t--mute{fill:var(--ink-3);font-size:8px;letter-spacing:.08em}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .bp-line{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.1s var(--ease)}
  .is-in .bp-line{stroke-dashoffset:0}
}
.demo{
  position:relative;background:var(--ink);color:var(--paper);
  aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
}
.demo__scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,
    color-mix(in srgb, var(--paper) 6%, transparent) 0 1px, transparent 1px 4px);
  pointer-events:none;
}
.demo__label{
  position:relative;z-index:2;font-family:var(--sans);font-size:var(--t--1);
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--cinnabar);color:var(--paper);padding:.5rem 1rem;
}
.demo__bar{position:absolute;left:0;bottom:0;height:.125rem;background:var(--cinnabar);width:38%}
.figure-block{
  padding-block:var(--s-7) var(--s-6);
  border-top:2px solid var(--ink);
}
.figure-block__n{
  grid-column:3/10;max-width:38rem;text-align:center;
  margin:0;font-family:var(--serif);font-size:var(--t-5);line-height:.85;
  letter-spacing:-.02em;font-weight:400;
  font-feature-settings:'tnum' 1;
}
.figure-block__tag{
  grid-column:3/10;max-width:38rem;margin-top:var(--s-4);
  border-top:2px solid var(--ink);padding-top:var(--s-2);
}
.figure-block__tag .v,.figure-block__tag .m{max-width:26rem}
.figure-block__tag .v{display:block;font-size:var(--t-0);line-height:1.35}
.figure-block__tag .m{
  display:block;margin-top:var(--s-1);font-family:var(--sans);
  font-size:var(--t--1);color:var(--ink-3);line-height:1.5;
}
.figure-block__body{
  grid-column:3/10;max-width:38rem;margin-top:var(--s-5);
}
@media (max-width:43.75em){.figure-block{padding-block:var(--s-5) var(--s-4)}}
.figure-block__body p{margin:0 0 var(--s-3);color:var(--ink-2)}
.figure-block__body p:has(+ .src){margin-bottom:var(--s-1)}
.figure-block__body p:last-child{margin-bottom:0}
.quote-block__q{
  grid-column:3/10;max-width:38rem;margin:0;
  font-family:var(--serif);font-size:var(--t-3);line-height:1.08;
  letter-spacing:-.015em;font-weight:400;text-wrap:pretty;
}
.quote-block__q::before{content:'\201C'}
.quote-block__q::after{content:'\201D'}
.src{font-family:var(--sans);font-size:var(--t--2);color:var(--ink-3)}
.src a{color:var(--cinnabar);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.src a:hover,.src a:focus-visible{background:var(--cinnabar);color:var(--paper);border-color:transparent}
.close{padding-block:var(--s-6) var(--s-5);border-top:2px solid var(--ink)}
.close__body{grid-column:3/10;max-width:38rem}
@media (max-width:43.75em){.close__body{grid-column:1/-1}}
.close__body p{margin:0 0 var(--s-3);color:var(--ink-2)}
.contact{grid-column:1/-1;margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:var(--s-3)}
.contact a{
  font-family:var(--sans);font-size:var(--t--1);text-decoration:none;
  border:1px solid var(--ink);padding:.7rem 1.1rem;
  display:inline-flex;align-items:center;gap:.6rem;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.contact a .ar{transition:transform .25s var(--ease)}
@media (hover:hover){
  .contact a:hover{background:var(--ink);color:var(--paper)}
  .contact a:hover .ar{transform:translateX(.25rem)}
}
.contact a:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
.back{
  padding-block:var(--s-4);border-top:1px solid var(--guide);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);
  font-family:var(--sans);font-size:var(--t--1);
}
.back a{text-decoration:none;position:relative;padding-block:var(--s-1)}
.back a::after{
  content:'';position:absolute;left:0;right:0;bottom:calc(var(--s-1) - 3px);height:1px;
  background:var(--cinnabar);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .3s var(--ease);
}
@media (hover:hover){.back a:hover::after{transform:scaleX(1);transform-origin:0 50%}}
.back a:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
.back span{color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){
  .en{
    opacity:.01;transform:translateY(var(--enter-travel));
    animation:enter var(--enter-dur) var(--ease-short) forwards;
    animation-delay:calc(var(--enter-delay) + var(--i,0) * var(--enter-step));
  }
}
@keyframes enter{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .rv{opacity:0;transform:translateY(var(--enter-travel));transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .rv.is-in{opacity:1;transform:none}
}
.side__txt h2{margin:0 0 var(--s-2);font-family:var(--serif);font-size:var(--t-2);
  line-height:1.1;letter-spacing:-.01em;font-weight:400}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
@media (max-width:43.75em){.quad{grid-template-columns:repeat(2,1fr)}}
.sheet-band{background:var(--sheet)}
.quad img{width:100%;height:auto}
.quad img{
  aspect-ratio:var(--rej-w, 3) / var(--rej-h, 4);
  object-fit:cover;
  object-position:top center;
}
.trio figcaption{margin-top:var(--s-2);font-family:var(--sans);
  font-size:var(--t--1);line-height:1.65;color:var(--ink-2)}
.skip-link{
  position:fixed;
  top:var(--s-2);
  left:var(--s-2);
  z-index:100;
  transform:translateY(-200%);
  padding:var(--s-1) var(--s-2);
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:var(--t--1);
  text-decoration:none;
}
.skip-link:focus-visible{
  transform:translateY(0);
  outline:2px solid var(--cinnabar);
  outline-offset:2px;
}
.sheet[tabindex]:focus{outline:none}
@media not all and (max-width:56.25em){
  .pantalla{
    min-height:100svh;
    align-content:center;
    padding-block:var(--s-6);
  }
  .plate.pantalla{
    --reserva:calc(var(--s-6) * 2);
    --rej-cols:3;
    --rej-filas:1;
    --rej-w:3;
    --rej-h:4;
    --rej-pie:0rem;

    --alto-fila:calc((100svh - var(--reserva) - (var(--rej-filas) - 1) * var(--s-3)) / var(--rej-filas));
    --tope-rejilla:max(24rem,calc(
      (var(--alto-fila) - var(--rej-pie)) * var(--rej-w) / var(--rej-h) * var(--rej-cols)
      + (var(--rej-cols) - 1) * var(--s-3)));
  }
  .plate.pantalla:has(.plate__notes){--reserva:calc(var(--s-6) * 2 + var(--s-2) + 4.5rem)}
  .plate.pantalla:has(.quad){--rej-cols:4}
  .plate.pantalla:has(.trio > :nth-child(4)),
  .plate.pantalla:has(.quad > :nth-child(5)){--rej-filas:2}
  .plate.pantalla:has(.trio > :nth-child(7)),
  .plate.pantalla:has(.quad > :nth-child(9)){--rej-filas:3}
  .plate.pantalla .trio,
  .plate.pantalla .quad,
  .plate.pantalla .plate__notes{
    width:100%;
    max-width:var(--tope-rejilla);
    margin-inline:auto;
  }
  .plate.pantalla .plate__notes .note{margin-bottom:0}
}
.video-block__caja{
  --vid-w:16;
  --vid-h:9;
  --vid-alto:min(calc(100svh - var(--pad) * 2), calc(var(--vid-h) * 1px));
  position:relative;
  margin-inline:auto;
  width:min(100%, calc(var(--vid-alto) * var(--vid-w) / var(--vid-h)));
  aspect-ratio:var(--vid-w) / var(--vid-h);
}
.video-block .video-block__video{
  display:block;width:100%;height:100%;
  object-fit:contain;
  background:var(--ink);
}
@media not all and (max-width:56.25em){
  .plate.pantalla--filas{
    min-height:calc(var(--rej-filas) * 100svh);
    --alto-fila:calc((var(--rej-filas) * 100svh - var(--reserva) - (var(--rej-filas) - 1) * var(--s-3)) / var(--rej-filas));
  }
}
@media (max-width:43.75em){
  .plate.pantalla--filas .trio{grid-template-columns:repeat(2,1fr)}
}