*, *::before, *::after{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-synthesis:none;
}

a{ color:inherit; text-decoration:none; }
a:not(.project-row__name):not(.skip-link):hover{ color:var(--ink-mute); }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:1px;
}

.skip-link{
  position:fixed;
  top:var(--space-sm);
  left:var(--space-sm);
  z-index:101;

  transform:translateY(-200%);
  min-height:1.5rem;

  padding:var(--space-xs) var(--space-sm);
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:var(--label-size);
  font-weight:var(--w-medium);
  letter-spacing:var(--label-ls);
  text-transform:uppercase;
}

.skip-link:focus-visible{
  transform:translateY(0);
  outline-offset:2px;
}
#contenido:focus-visible{ outline:none; }

.skip-splash{
  position:fixed;
  top:var(--space-sm);
  left:var(--space-sm);
  z-index:100;
  transform:translateY(-200%);
  padding:var(--space-xs) var(--space-sm);
  background:var(--ink);
  color:var(--paper);
  border:0;
  font-family:var(--sans);
  font-size:var(--label-size);
  font-weight:var(--w-medium);
  letter-spacing:var(--label-ls);
  text-transform:uppercase;
  cursor:pointer;
}

.skip-splash:focus-visible{
  transform:translateY(0);
  outline-offset:2px;
}

body:not([data-locked]) .skip-splash{ display:none; }

.hero{
  position:relative;
  background:var(--paper);
  --layout:split;
}

.hero__stage{
  position:relative;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero__grid{
  position:relative;
  width:100%;
  max-width:calc(var(--container) + 2 * var(--space-xl));
  height:100%;
  margin:0 auto;
  padding:0 var(--space-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-lg);
}

.hero__col-stage,
.hero__col-index{
  flex:0 1 auto;
  min-width:0;
  align-self:stretch;
}
.hero__col-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero__col-index{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.stage__character{
  margin:0;
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}

.hero[data-scene="2"] .stage__character{ opacity:1; }

.stage__character-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  opacity:0;
}

.stage__character-img:first-of-type{ opacity:1; }

.brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand__lockup{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-2xs);
  font-family:var(--serif);
  font-weight:var(--w-regular);
  white-space:nowrap;
}
.brand__mark{
  display:block;
  width:var(--hero-mark-lg);
  height:var(--hero-mark-lg);
  filter:brightness(1) invert(0);
}

.brand__name{
  display:block;
  font-size:var(--hero-display);
  line-height:var(--hero-display-lh);
  letter-spacing:var(--hero-display-ls);
}
.col-index__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-lg);
}

.project-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2xs);
  width:100%;
  max-width:var(--index-row);
}
.project-row__name{
  display:block;
  font-family:var(--serif);
  font-size:var(--hero-name);
  line-height:var(--hero-name-lh);
  font-weight:var(--w-regular);
  letter-spacing:var(--hero-name-ls);
  white-space:nowrap;
}

.project-row__meta{
  font-size:var(--hero-meta);
  line-height:var(--hero-meta-lh);
  font-weight:var(--w-semi);
  letter-spacing:var(--hero-meta-ls);
}

.project-row__name:hover,
.project-row__name:focus-visible{
  text-decoration:underline;
  text-underline-offset:0.12em;
  text-decoration-thickness:from-font;
}
.hero[data-scene="0"]{ height:100svh; }
html:not([data-smooth]) body[data-locked]{ overflow:hidden; }
.hero[data-scene="0"] .hero__col-index{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.hero[data-scene="0"] .brand__mark{ display:none; }
.hero[data-scene="0"] .brand{ opacity:0; }

.hero[data-scene="0"] .hero__col-stage{ overflow:visible; }

.hero[data-scene="2"] .hero__grid{
  max-width:none;
  padding:0;
  gap:var(--hero-gap-tight);
}

.hero[data-scene="2"] .hero__col-stage{
  flex:1 1 auto;
  align-items:flex-start;
  justify-content:flex-start;
  padding:var(--space-lg);
}

.hero[data-scene="2"] .hero__col-index{
  flex:0 1 auto;
  width:min(calc((100% - var(--hero-gap-tight)) * 5 / 18), var(--index-col));
  justify-content:flex-end;
  align-items:flex-end;
  padding:var(--space-lg) var(--space-lg) var(--space-lg) 0;
}
.hero[data-scene="2"] .brand__lockup{
  flex-direction:row;
  align-items:center;
}

.hero[data-scene="2"] .brand__mark{
  width:var(--hero-mark-sm);
  height:var(--hero-mark-sm);
}

.hero[data-scene="2"] .brand__name{
  font-size:var(--hero-name);
  line-height:var(--hero-name-lh);
  letter-spacing:var(--hero-name-ls);
}
.hero[data-scene="2"] .project-row[data-state="current"] .project-row__name{
  font-size:var(--hero-name-lg);
  line-height:var(--hero-name-lg-lh);
  letter-spacing:var(--hero-name-lg-ls);
}

@media (max-width: 64.375em){

  .hero{ --layout:stack; }

  .hero[data-scene="0"]{ height:auto; }

  .hero__stage{
    height:auto;
    min-height:100svh;
    overflow:visible;
  }

  .hero__grid,
  .hero[data-scene="2"] .hero__grid{
    flex-direction:column;
    justify-content:center;
    max-width:calc(var(--container) + 2 * var(--page-x));
    padding:var(--space-2xl) var(--page-x);
    gap:var(--space-lg);
  }

  .hero__col-stage,
  .hero__col-index,
  .hero[data-scene="0"] .hero__col-stage,
  .hero[data-scene="1"] .hero__col-stage,
  .hero[data-scene="2"] .hero__col-stage,
  .hero[data-scene="0"] .hero__col-index,
  .hero[data-scene="1"] .hero__col-index,
  .hero[data-scene="2"] .hero__col-index{
    position:static;
    flex:0 0 auto;
    width:auto;
    align-self:stretch;
    align-items:flex-start;
    justify-content:flex-start;
    overflow:visible;
    opacity:1;
    padding:0;
  }

  .stage__character{ display:none; }

  .brand__lockup,
  .hero[data-scene="2"] .brand__lockup{
    flex-direction:row;
    align-items:center;
  }

  .brand__mark,
  .hero[data-scene="0"] .brand__mark,
  .hero[data-scene="2"] .brand__mark{
    display:block;
    width:var(--hero-mark-sm);
    height:var(--hero-mark-sm);
  }

  .brand__name,
  .hero[data-scene="2"] .brand__name{
    font-size:var(--hero-name);
    line-height:var(--hero-name-lh);
    letter-spacing:var(--hero-name-ls);
  }

  .hero[data-scene="2"] .project-row[data-state="current"] .project-row__name{
    font-size:var(--hero-name);
    line-height:var(--hero-name-lh);
    letter-spacing:var(--hero-name-ls);
  }

  .col-index__list{ gap:var(--space-md); }

  .project-row{ max-width:var(--measure-sm); }

}