:root {
  color-scheme: light;
  --cream: #f7eee1;
  --coffee: #492509;
  --terra: #a95330;
  --studio-bg: #141116;
  --studio-ink: #f4f1f5;
  --studio-muted: #c6bec9;
  --display: "Bodoni MT", Didot, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--studio-bg); color: var(--coffee); font-family: var(--sans); }
img { display: block; max-width: 100%; }
p, h1 { margin: 0; }

.coming-soon {
  display: grid;
  grid-template-columns: 53.65% 46.35%;
  min-height: 39rem;
  min-height: max(39rem, calc(100svh - 11rem));
}

.intro {
  display: grid;
  align-content: space-between;
  justify-items: start;
  gap: clamp(3.25rem, 7vh, 5rem);
  padding: clamp(3rem, 8.2vh, 5.5rem) clamp(1.75rem, 4vw, 4.25rem) clamp(2.2rem, 4vh, 3.25rem) clamp(2.5rem, 7.9vw, 9rem);
  background: var(--cream) url("papel.webp") repeat;
}

.brand-mark {
  width: clamp(12rem, 20vw, 18rem);
  height: auto;
}

.brand-opening {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: block;
  overflow: hidden;
  pointer-events: none;
  animation: finish-opening 1.3s linear both;
}

.opening-door {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, #492c1a 0%, #301c11 56%, #20140c 100%);
  clip-path: var(--door-half);
  animation: open-door .88s cubic-bezier(.72, 0, .22, 1) .42s both;
}

.opening-door-left {
  --door-half: inset(0 calc(50% - 1px) 0 0);
  --door-offset: -50%;
}

.opening-door-right {
  --door-half: inset(0 0 0 50%);
  --door-offset: 50%;
}

.opening-door img {
  width: clamp(10rem, 43vw, 24rem);
  height: auto;
  filter: brightness(0) invert(.94) sepia(.18);
  animation: show-opening-logo .23s ease-out both;
}

body:focus-within .brand-opening { opacity: 0; }

@keyframes show-opening-logo {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes open-door {
  from { transform: translateX(0); }
  to { transform: translateX(var(--door-offset)); }
}

@keyframes finish-opening {
  from { visibility: visible; }
  to { visibility: hidden; }
}

.brand-line {
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 1.6vw, 1.5rem);
  margin-top: .75rem;
  font-size: clamp(.66rem, 1vw, .9rem);
  letter-spacing: .44em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-line svg { width: 1.05rem; height: 1.4rem; flex: none; }

.status {
  display: flex;
  align-items: center;
  gap: .95em;
  font-size: clamp(.72rem, 1.35vw, 1.18rem);
  letter-spacing: .29em;
  text-transform: uppercase;
}

.status::before {
  content: "";
  flex: 0 0 .85em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--terra);
}

h1 {
  margin-top: clamp(1.35rem, 3.25vh, 2.35rem);
  font: 400 clamp(3.65rem, 8.7vw, 8.75rem)/.96 var(--display);
  letter-spacing: -.045em;
}

h1 span { display: block; }

.tagline {
  margin-top: clamp(1.4rem, 3.9vh, 2.35rem);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: .035em;
}

.teaser {
  margin-top: clamp(.85rem, 2vh, 1.25rem);
  font: italic 400 clamp(1.05rem, 1.9vw, 1.55rem)/1.3 var(--display);
}

.scene {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #382519;
}

.scene-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% 56%;
}

.scene-mark {
  position: absolute;
  right: clamp(1.25rem, 2.8vw, 2.75rem);
  bottom: clamp(1.25rem, 2.8vh, 2.5rem);
  width: clamp(4rem, 7.4vw, 7.5rem);
  height: auto;
}

.studio { color: var(--studio-ink); background: var(--studio-bg); }

.studio-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  width: min(calc(100% - clamp(3rem, 9vw, 8rem)), 72.5rem);
  margin-inline: auto;
  padding-block: 1.75rem;
}

.studio-logo { display: block; width: 6.75rem; }
.studio-logo img { width: 100%; height: auto; }

.studio-copy {
  padding-left: clamp(1.3rem, 2.1vw, 1.875rem);
  border-left: 1px solid #413a43;
  font-size: .9375rem;
  line-height: 1.5;
}

.studio-kicker {
  margin-bottom: .35rem;
  color: var(--studio-muted);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.studio-copy span { color: var(--studio-muted); }

.studio-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  min-width: 10.75rem;
  min-height: 2.75rem;
  border-bottom: 1px solid #8e7e96;
  color: #fff;
  font-size: .75rem;
  text-decoration: none;
}

.studio-link svg { flex: none; width: 1.0625rem; height: 1.0625rem; }
.studio-link:hover { border-bottom-color: #fff; }
.studio a:focus-visible { outline: 2px solid #e16aff; outline-offset: .3rem; }

.legal {
  padding: .4rem 1rem 1.3rem;
  color: #a69da9;
  font-size: .625rem;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 48rem) {
  .coming-soon { grid-template-columns: minmax(0, 1fr); min-height: 0; }

  .intro {
    gap: clamp(2.85rem, 10vw, 4.5rem);
    padding: clamp(2.15rem, 7vw, 3.5rem) clamp(1.5rem, 7vw, 3.5rem) 2.35rem;
  }

  .brand-mark { width: clamp(10rem, 42vw, 14.5rem); }
  .brand-line { margin-top: .55rem; }
  .status { letter-spacing: .24em; }
  h1 { font-size: clamp(3.1rem, 12.5vw, 6rem); }
  .tagline { margin-top: 1.35rem; }
  .scene { min-height: clamp(18rem, 68vw, 26rem); }
  .scene-photo { object-position: 56% 53%; }
}

@media (max-width: 37.5rem) {
  .studio-inner {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    width: calc(100% - 3rem);
    padding-block: 1.4rem;
  }

  .studio-logo { width: 100%; }
  .studio-copy { padding-left: .95rem; font-size: .82rem; }
  .studio-link { grid-column: 1 / -1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-opening { display: none; }
}