:root {
  color-scheme: light;
  --paper: #f4f2ed;
  --ink: #20252a;
  /* Slightly deeper than #777B7D to meet AA for small text on the paper. */
  --muted: #686c6e;
  --margin: clamp(32px, 4.45vw, 96px);
  --viewport-height: 100vh;
}

/* Keep mobile positioning usable when dynamic viewport units are unavailable. */
@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}

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

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.cover {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.identity {
  position: absolute;
  z-index: 2;
  top: 36.5%;
  left: max(var(--margin), env(safe-area-inset-left));
  right: max(var(--margin), env(safe-area-inset-right));
}

h1 {
  margin: 0 0 28px -0.055em;
  font-size: clamp(42px, 5.05vw, 106px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
  animation: reveal 1100ms cubic-bezier(.2,.65,.3,1) both;
}

.location {
  margin: 0;
  font-size: clamp(9px, .68vw, 12px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .23em;
  color: var(--muted);
  animation: reveal 1000ms 220ms ease-out both;
}

.architecture {
  position: absolute;
  z-index: -1;
  overflow: hidden;
  animation: architecture-enter 1200ms cubic-bezier(.2,.65,.3,1) both;
  transform-origin: bottom right;
}

/* Transparent photographic artwork stays to the right of the identity. */
.architecture--photographic { inset: 0 0 0 42%; }

.architecture-picture {
  position: absolute;
  inset: 0;
  display: block;
}

.architecture-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}

.colophon {
  position: absolute;
  left: max(var(--margin), env(safe-area-inset-left));
  right: max(var(--margin), env(safe-area-inset-right));
  bottom: max(38px, env(safe-area-inset-bottom));
  color: var(--muted);
  animation: reveal 1000ms 320ms ease-out both;
}

.colophon small { font-size: 9px; line-height: 1.5; letter-spacing: .14em; }

@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes architecture-enter {
  from { opacity: 0; transform: scale(1.018); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 700px) {
  :root {
    --margin: 28px;
    --mobile-identity-top: clamp(110px, calc(var(--viewport-height) * .17), 170px);
  }
  .identity {
    top: max(var(--mobile-identity-top), calc(env(safe-area-inset-top) + 32px));
  }
  h1 { font-size: clamp(34px, 12vw, 78px); margin-bottom: 21px; letter-spacing: -.06em; }
  .location { font-size: 9px; letter-spacing: .2em; }
  /* The portrait asset contains 400px of transparent headroom over a 1400px
     square scene. Size its visible square explicitly, rather than containing
     the padded canvas. The height cap keeps rooflines below the identity. */
  .architecture--photographic {
    top: calc(max(var(--mobile-identity-top), calc(env(safe-area-inset-top) + 32px)) + 92px);
    right: 0;
    bottom: 0;
    left: 0;
  }
  .architecture-photo {
    position: absolute;
    right: -6vw;
    bottom: 0;
    /* Preserve the approved size cap independently of bottom anchoring. */
    width: min(118vw, calc(var(--viewport-height) - max(var(--mobile-identity-top), calc(env(safe-area-inset-top) + 32px)) - 92px - max(68px, calc(env(safe-area-inset-bottom) + 48px))));
    height: auto;
    max-width: none;
  }
  .colophon {
    top: max(28px, calc(env(safe-area-inset-top) + 16px));
    bottom: auto;
    left: auto;
    text-align: right;
  }
}

@media (max-height: 480px) and (min-width: 701px) {
  .identity { top: 30%; }
  h1 { margin-bottom: 18px; }
  .colophon { bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* Short phone landscapes need a side-by-side composition. This also covers
   phones wider than the portrait breakpoint, without affecting desktop. */
@media (orientation: landscape) and (max-width: 950px) and (max-height: 480px) {
  .identity { top: max(24px, calc(env(safe-area-inset-top) + 12px)); }
  .architecture--photographic { inset: 0 0 0 42%; }
  .architecture-photo {
    position: absolute;
    right: -4vw;
    bottom: 0;
    width: min(68vw, calc(var(--viewport-height) - 20px));
    height: auto;
    max-width: none;
  }
  .colophon {
    top: calc(max(24px, calc(env(safe-area-inset-top) + 12px)) + 130px);
    bottom: auto;
    left: max(var(--margin), env(safe-area-inset-left));
    right: auto;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  h1, .location, .architecture, .colophon { animation: none; }
}