@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-regular.ttf') format('truetype');
}

:root:has(body.frontend) {
  /* Figma: 1920px canvas, 20px = 1rem; scale with the full viewport. */
  --maxWidth: 100vw;
  --fontSize20: 1rem;
  --fontSize24: 1.2rem;
  --fontSize56: 2.8rem;
  --fontSize66: 3.3rem;
  --fontSize70: 3.5rem;
  --fontSize22: 1.0871rem;
  --fontSize26: 1.281rem;
  --fontSize27: 1.35885rem;
  --lineHeight30: 1.47535rem;
  --textSize: var(--fontSize56);
  --displaySize: var(--fontSize70);
  --footerSize: var(--fontSize66);
  --textLineHeight: var(--lineHeight76);
  --footerSideSpacing: var(--sideSpacing);
  --lineHeight76: 3.8rem;
  --sideSpacing: 2.4rem;
  --outerSpacing: 0rem;
  --fontText: 'Inter', sans-serif;
  --fontDisplay: 'Spectral', serif;
  --colorBackground: #000;
  --colorText: #fff;
  --colorMark: #414141;
  --colorMuted: #707070;
  /* SVG ink extends above Figma’s trimmed text frame: 102px - 53.5px. */
  --markTop: 2.425rem;
  --markInset: .25rem;
  --markWidth: 95.7rem;
  --markReleaseGap: 3rem;
  --entranceOffset: 2rem;
  --editionWidth: 8.2rem;
  --introTop: 97.25rem;
  --introHeight: 119.3rem;
  --galleryHeight: 405.9rem;
  --aboutFooterGap: 12.9rem;
  --footerLinksGap: 3.975rem;
  --footerBottom: 2.2rem;
  --creditsGap: 1.5rem;
  --textTracking: -.02em;
  --heroX: 10.1rem;
  --heroY: -8rem;
  --heroWidth: 74.35rem;
  --radialX: -.25rem;
  --radialY: 0rem;
  --radialWidth: 96.5rem;
  --smallX: 0rem;
  --smallY: 80.3rem;
  --smallWidth: 27.6rem;
  --detailX: 54.85rem;
  --detailY: 86.55rem;
  --detailWidth: 41.15rem;
  --foldX: -.35rem;
  --foldY: 159.1rem;
  --foldWidth: 76.6rem;
  --sideX: 39.8rem;
  --sideY: 250.7rem;
  --sideWidth: 64.35rem;
  --clusterX: .05rem;
  --clusterY: 284.6rem;
  --clusterWidth: 65.7rem;
  --completeX: 17.75rem;
  --completeY: 363.05rem;
  --completeWidth: 60.5rem;
}

html:has(body.frontend) {
  font-size: calc(var(--maxWidth) / 96);
  background: var(--colorBackground);
  scrollbar-width: thin;
  scrollbar-color: var(--colorMuted) var(--colorBackground);
  overflow-x: clip;


  &.lenis, &.lenis body { height: auto; }
  &.lenis-stopped { overflow: clip; }
}

body.frontend {
  margin: 0;
  background: var(--colorBackground);
  color: var(--colorText);
  font: 400 var(--fontSize20) / 1.5 var(--fontText);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;

  *, *::before, *::after { box-sizing: border-box; }
  figure, h1 { margin: 0; }
  img { display: block; width: 100%; height: 100%; object-fit: cover; }
  a { color: inherit; text-underline-offset: .12em; text-decoration-thickness: .035em; }
  a:focus-visible { outline: .08em solid currentColor; outline-offset: .15em; }
  p:first-child { margin-top: 0; }
  p:last-child { margin-bottom: 0; }

  .innerwrapper {
    width: calc(100% - var(--sideSpacing) * 2);
    max-width: calc(var(--maxWidth) - var(--sideSpacing) * 2);
    margin-inline: auto;
  }
}

.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mark { display: block; width: var(--markWidth); height: auto; overflow: visible; }
.masthead {
  position: fixed;
  inset: var(--markTop) auto auto calc(var(--outerSpacing) + var(--markInset));
  z-index: 2;
  color: var(--colorMark);
  margin-bottom: var(--markReleaseGap);
  pointer-events: none;
  will-change: transform;
}

.text {
  font-size: var(--textSize);
  line-height: var(--textLineHeight);
  text-align: center;

  p { margin-block: var(--textLineHeight); }
  .name {
    font: 400 var(--displaySize) / var(--textLineHeight) var(--fontDisplay);
    letter-spacing: var(--textTracking);
    white-space: nowrap;
  }
  .edition {
    display: inline-block;
    width: var(--editionWidth);
    height: auto;
    vertical-align: -.13em;
    margin-left: -.13em;
  }
}

body.frontend main, body.frontend footer {
  width: var(--maxWidth);
  margin-inline: auto;
  overflow-x: clip;
}

.section__introduction {
  position: relative;

  .innerwrapper {
    min-height: var(--introHeight);
    padding-top: var(--introTop);
  }
  .text { position: relative; z-index: 3; }
}

.section__objects {
  position: relative;

  .innerwrapper {
    width: 100%;
    max-width: var(--maxWidth);
    min-height: var(--galleryHeight);
  }
}

.object {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--width);
  aspect-ratio: var(--ratio);
  pointer-events: none;

  &[data-depth='back'] { z-index: 1; }
  &[data-depth='front'] { z-index: 3; }
  .motion, .image { width: 100%; height: 100%; }
  .motion { transform-origin: 50% 50%; }
  .image { position: relative; overflow: hidden; }
  img { position: absolute; }

  &[data-object='hero'] { --x: var(--heroX); --y: var(--heroY); --width: var(--heroWidth); --ratio: 1487 / 2644; }
  &[data-object='radial'] {
    --x: var(--radialX); --y: var(--radialY); --width: var(--radialWidth); --ratio: 1930 / 1736;
    img { width: 186.21%; height: 146.26%; left: -41.79%; top: -23.13%; }
  }
  &[data-object='small'] { --x: var(--smallX); --y: var(--smallY); --width: var(--smallWidth); --ratio: 552 / 982; }
  &[data-object='detail'] { --x: var(--detailX); --y: var(--detailY); --width: var(--detailWidth); --ratio: 823 / 1462; }
  &[data-object='fold'] {
    --x: var(--foldX); --y: var(--foldY); --width: var(--foldWidth); --ratio: 1532 / 1868;
    img { width: 100.05%; height: 145.93%; left: -.02%; top: -26.07%; }
  }
  &[data-object='side'] {
    --x: var(--sideX); --y: var(--sideY); --width: var(--sideWidth); --ratio: 1287 / 771;
    img { width: 106.6%; height: 100.05%; left: -6.6%; top: -.03%; }
  }
  &[data-object='cluster'] {
    --x: var(--clusterX); --y: var(--clusterY); --width: var(--clusterWidth); --ratio: 1314 / 1145;
    img { width: 154.98%; height: 100.02%; left: -37.34%; top: -.01%; }
  }
  &[data-object='complete'] { --x: var(--completeX); --y: var(--completeY); --width: var(--completeWidth); --ratio: 1210 / 681; }
}

.section__about {
  position: relative;
  z-index: 3;

  .innerwrapper { padding-bottom: var(--aboutFooterGap); }
}

body.frontend footer {
  position: relative;
  z-index: 3;

  .innerwrapper {
    width: calc(100% - var(--footerSideSpacing) * 2);
    max-width: calc(var(--maxWidth) - var(--footerSideSpacing) * 2);
    padding-bottom: var(--footerBottom);
  }
  .mark { margin-left: calc(var(--markInset) - var(--footerSideSpacing)); }
  .links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: baseline;
    margin-top: var(--footerLinksGap);
    font: 400 var(--footerSize) / 1.5 var(--fontDisplay);
    letter-spacing: var(--textTracking);

    span:nth-child(2) { text-align: center; white-space: nowrap; }
    a {
      justify-self: end;
      position: relative;
      text-decoration: none;

      &::after {
        content: '';
        position: absolute;
        inset-inline: 0;
        bottom: .16em;
        height: .035em;
        background: currentColor;
        transform-origin: right;
      }
      &:hover::after, &:focus-visible::after {
        animation: contact-underline .75s cubic-bezier(.65, 0, .35, 1);
      }
    }
  }
  .credits {
    margin-top: var(--creditsGap);
    color: var(--colorMuted);
    font-size: var(--fontSize24);
    line-height: 1.2;
    letter-spacing: var(--textTracking);
  }
}

/* Hide before the first paint; the small head script provides a timed fallback. */
html.intro-pending {
  .masthead .mark, [data-object='hero'] img, .section__introduction .text { opacity: 0; }
}

/* Mobile layout: 390px Figma canvas, shared scroll and entrance effects. */
@media (max-width: 767px) {
  :root:has(body.frontend) {
    --textSize: var(--fontSize22);
    --displaySize: var(--fontSize27);
    --footerSize: var(--fontSize26);
    --textLineHeight: var(--lineHeight30);
    --sideSpacing: 1.05rem;
    --footerSideSpacing: 0.5825rem;
    --markTop: 0.7375rem;
    --markInset: 0.25rem;
    --markWidth: 19.05rem;
    --markReleaseGap: 0.6rem;
    --entranceOffset: 0.7rem;
    --editionWidth: 3.15rem;
    --introTop: 28.9rem;
    --introHeight: 46.8rem;
    --galleryHeight: 117.15rem;
    --aboutFooterGap: 3.5rem;
    --footerLinksGap: 0.6rem;
    --footerBottom: 0.8rem;
    --creditsGap: 0.7rem;
    --heroX: 0.55rem;
    --heroY: 1.45rem;
    --heroWidth: 17.95rem;
    --radialX: -0.3rem;
    --radialY: 0rem;
    --radialWidth: 20.15rem;
    --smallX: -0.1rem;
    --smallY: 15.95rem;
    --smallWidth: 7.6rem;
    --detailX: 8.8745rem;
    --detailY: 24.3rem;
    --detailWidth: 10.75rem;
    --foldX: -0.2rem;
    --foldY: 45.05rem;
    --foldWidth: 20.3rem;
    --sideX: 5.7rem;
    --sideY: 72.75rem;
    --sideWidth: 13.8rem;
    --clusterX: 0.05rem;
    --clusterY: 84.1rem;
    --clusterWidth: 16.55rem;
    --completeX: 0.05rem;
    --completeY: 102.95rem;
    --completeWidth: 19.45rem;
  }

  html:has(body.frontend) { font-size: calc(100vw / 19.5); }

  body.frontend footer {
    .links {
      grid-template-columns: 1fr auto;
      line-height: var(--textLineHeight);

      span:first-child { grid-column: 1 / -1; }
      span:nth-child(2) { text-align: left; }
    }
    .credits { font-size: calc(var(--fontSize20) * .55); }
  }
}

@keyframes contact-underline {
  0% { transform: scaleX(1); transform-origin: right; }
  49% { transform: scaleX(0); transform-origin: right; }
  50% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

@media (prefers-reduced-motion: reduce) {
  body.frontend footer .links a::after { animation: none; }
}