:root {
  color-scheme: light;
  --red: #9d1313;
  --ink: #050505;
  /* Reproduces Cargo's measured 23.6px mobile / 33.6px desktop edge. */
  --pad: clamp(1.475rem, 2.333vw, 2.1rem);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--red);
  color: var(--ink);
  font-family: "Arial Narrow", Arial, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.stage {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 28rem;
  background: var(--red);
  isolation: isolate;
}

.site-link {
  position: fixed;
  z-index: 20;
  display: grid;
  place-items: center;
  width: clamp(1.65rem, 2.625vw, 2.34rem);
  height: clamp(1.65rem, 2.625vw, 2.34rem);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}
.site-link:hover, .site-link:focus-visible { opacity: .58; transform: scale(.94); }
.site-link:focus-visible { outline: 1px solid currentColor; outline-offset: .2rem; }
.site-link svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.6; fill: none; }
.site-link--ig { top: var(--pad); right: var(--pad); }
.site-link--mail { left: var(--pad); bottom: var(--pad); }
.site-link--pdf { right: var(--pad); bottom: var(--pad); }

.gallery {
  position: absolute;
  inset: var(--pad);
  display: grid;
  place-items: center;
  cursor: e-resize;
  touch-action: pan-y;
  user-select: none;
}
.gallery.is-scrubbing { cursor: ew-resize; }
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.slide.is-active { opacity: 1; }
.slide img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.gallery-status {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad) + .45rem);
  z-index: 10;
  transform: translateX(-50%);
  font-size: .68rem;
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity 150ms ease;
}
.gallery:hover .gallery-status, .gallery:focus-within .gallery-status { opacity: .65; }

.portrait,
.statement {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 8vw, 8rem);
}
.portrait img,
.statement img {
  display: block;
  max-width: 100%;
  max-height: 72svh;
  object-fit: contain;
}
.statement { align-items: end; padding: var(--pad); }
.statement img {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(56vmin, 34rem);
  height: min(56vmin, 34rem);
  transform: translate(-50%, -50%);
  z-index: -1;
}
.statement__words {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 2rem;
  font-size: clamp(2.8rem, 9vw, 9rem);
  line-height: .76;
  letter-spacing: -.035em;
}
.statement__words span:last-child { text-align: right; }

.name-card h1 {
  position: fixed;
  right: var(--pad);
  bottom: calc(var(--pad) + 1.7rem);
  margin: 0;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: .8;
  letter-spacing: -.035em;
}

.ball-field { position: absolute; inset: 0; overflow: hidden; }
.ball {
  position: absolute;
  width: clamp(3rem, 7vw, 7rem);
  aspect-ratio: 1;
  cursor: grab;
  will-change: transform;
  filter: none;
}
.ball:active { cursor: grabbing; }

.link-page {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--pad);
}
.link-page__grid {
  width: min(42rem, 100%);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.link-page__grid a,
.link-page__grid span {
  min-height: 5rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
}
.link-page__grid > * + * { border-left: 1px solid currentColor; }
.link-page__unavailable { opacity: .45; }

.error {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

@media (max-width: 700px) {
  .portrait { padding: 4.5rem 1rem; }
  .statement__words { font-size: clamp(2.6rem, 15vw, 6rem); }
  .statement__words span { max-width: 48%; }
  .gallery-status { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}