:root {
  color-scheme: dark;
  background: #191233;
  color: #fff;
  font-family: var(--font-body);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
.home-page { scrollbar-width: none; overscroll-behavior: none; }
.home-page::-webkit-scrollbar { display: none; }
.home-experience-active, .lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.home-experience {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #000;
}
.home-experience__frame { display: block; width: 100%; height: 100%; border: 0; }
.home-experience-spacer { height: 100vh; pointer-events: none; }
body[data-home-phase="projects"] .home-experience { pointer-events: none; }
body[data-home-phase="experience"] .projects-surface { visibility: hidden; }
body[data-home-covered="true"] .home-experience { visibility: hidden; }
h1, h2, h3, p, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
a:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid #e4e3ff;
  outline-offset: 6px;
}

/* One unit is one Figma pixel at the 1440px reference width. The layout
   scales together on desktop; related content uses grids and normal flow.
   The gradient spans the viewport while the content stays capped at 1920px. */
.projects-surface {
  --u: min(0.0694444444vw, 1.3333333333px);
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: clip;
}

.projects-page {
  --artwork-scale: 1;
  position: relative;
  z-index: 1;
  isolation: isolate;
  width: 100%;
  overflow: clip;
  background: transparent;
}

.projects-page > main {
  max-width: 1920px;
  margin-inline: auto;
}

.projects-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.projects-background__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 8, 32, 0) 0%,
    rgba(14, 8, 32, 0.18) calc(220 * var(--u)),
    rgba(14, 8, 32, 0.55) calc(440 * var(--u)),
    #0e0820 calc(640 * var(--u)),
    #191233 100%
  );
}
.section-heading {
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: calc(57.521 * var(--u));
  line-height: 0.91;
  letter-spacing: -0.03em;
}
.featured-projects { padding-top: calc(96 * var(--u)); }
.featured-projects__heading {
  height: calc(220 * var(--u));
  padding-left: calc(89.486 * var(--u));
}
.featured-projects__list { padding-left: calc(89.486 * var(--u)); }
.featured-project {
  display: grid;
  grid-template-columns: calc(533.148 * var(--u)) calc(726.003 * var(--u));
  align-items: end;
  height: calc(712.821 * var(--u));
}
.featured-project + .featured-project { margin-top: calc(207.179 * var(--u)); }
.featured-project:nth-child(3) { margin-top: calc(184.848 * var(--u)); }
.featured-project__copy { margin-bottom: calc(5.473 * var(--u)); }
.featured-project:nth-child(2) .featured-project__copy { margin-bottom: calc(3.473 * var(--u)); }
.featured-project:nth-child(3) .featured-project__copy { margin-bottom: calc(-8.858 * var(--u)); }
.featured-project__title {
  height: calc(37 * var(--u));
  margin-left: calc(3.631 * var(--u));
  margin-bottom: calc(12.448 * var(--u));
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: calc(41.879 * var(--u));
  line-height: 0.88;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.project-location {
  color: rgba(255, 255, 255, 0.67);
  font-size: calc(14.891 * var(--u));
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.featured-project__copy .project-location {
  height: calc(18 * var(--u));
  margin-left: calc(5.321 * var(--u));
  margin-bottom: calc(21.14 * var(--u));
}
.featured-project__description {
  width: calc(370.637 * var(--u));
  height: calc(75 * var(--u));
  margin-left: calc(4.877 * var(--u));
  margin-bottom: calc(43.844 * var(--u));
  color: rgba(255, 255, 255, 0.67);
  font-weight: 300;
  font-size: calc(15.16 * var(--u));
  line-height: 1.24;
  letter-spacing: -0.01em;
}
.project-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(189.266 * var(--u));
  height: calc(58.163 * var(--u));
  padding-left: calc(29.024 * var(--u));
  padding-right: calc(25.358 * var(--u));
  border: 0.5px solid #d9d9d9;
  border-radius: calc(12 * var(--u));
  font-weight: 300;
  font-size: calc(15.16 * var(--u));
  line-height: 1.24;
  letter-spacing: -0.01em;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.featured-project__copy .project-action { margin-left: calc(9.673 * var(--u)); }
.project-action:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.project-arrow {
  position: relative;
  display: block;
  flex: none;
  width: calc(5.328 * var(--u));
  height: calc(10.73 * var(--u));
}
.project-arrow img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg) scale(var(--arrow-scale, var(--artwork-scale)));
}
.project-image { position: relative; display: block; overflow: hidden; }
.project-image--featured {
  width: calc(726.003 * var(--u));
  height: calc(712.821 * var(--u));
}
.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--parallax-scale, 1.12));
  will-change: transform;
}
.project-image--featured.project-image--cascades img {
  --parallax-scale: 1;
  position: absolute;
  top: -12.93%;
  left: -4.03%;
  width: 104.21%;
  height: 132.67%;
  object-fit: fill;
}

.all-projects {
  display: flex;
  justify-content: center;
  margin-top: calc(180 * var(--u));
}

.next-projects {
  display: grid;
  grid-template-columns: calc(418.866 * var(--u)) 1fr;
  min-height: calc(1450 * var(--u));
  margin-top: calc(200 * var(--u));
  padding-left: calc(89.486 * var(--u));
  padding-bottom: calc(96 * var(--u));
}
.next-projects__heading {
  position: sticky;
  top: calc(72 * var(--u));
  align-self: start;
  padding-top: calc(36.208 * var(--u));
}
.project-action--learn {
  width: calc(170.656 * var(--u));
  margin-top: calc(40.956 * var(--u));
  margin-left: calc(2.802 * var(--u));
}
.next-projects__list { padding: 0; list-style: none; }
.next-project {
  display: grid;
  grid-template-columns: calc(328.079 * var(--u)) 1fr;
  height: calc(288.278 * var(--u));
}
.next-project--two { height: calc(291.339 * var(--u)); }
.next-project--three { height: calc(297.841 * var(--u)); }
.next-project--four { height: calc(237 * var(--u)); }
.next-project__number {
  position: relative;
  height: calc(237 * var(--u));
  opacity: var(--number-opacity, 1);
}
.next-project[data-number-start-opacity] .next-project__number { will-change: opacity; }
.next-project--one .next-project__number,
.next-project--two .next-project__number { --number-opacity: 0.5; }
.next-project--three .next-project__number { --number-opacity: 0.26; }
.next-project--four .next-project__number { --number-opacity: 0.2; }
.next-project__number img {
  position: absolute;
  top: calc(54.0776 * var(--u));
  left: calc(13.171 * var(--u));
  transform: scale(var(--number-scale, var(--artwork-scale)));
  transform-origin: top left;
}
.next-project--two .next-project__number img { left: calc(7.955 * var(--u)); }
.next-project__copy {
  padding-top: calc(48.461 * var(--u));
  opacity: var(--story-opacity, 1);
  will-change: opacity;
}
.next-project__title {
  width: calc(425.648 * var(--u));
  margin-left: calc(0.762 * var(--u));
  font-family: var(--font-heading);
  font-weight: 200;
  font-size: calc(30.493 * var(--u));
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.next-project__description {
  width: calc(435.75 * var(--u));
  margin-top: calc(18.4 * var(--u));
  color: rgba(255, 255, 255, 0.67);
  font-weight: 300;
  font-size: calc(15.16 * var(--u));
  line-height: 1.34;
  letter-spacing: -0.01em;
}
.next-project--two .next-project__copy {
  padding-top: calc(47.448 * var(--u));
  margin-left: calc(-8.598 * var(--u));
  --story-opacity: 0.5;
}
.next-project--two .next-project__title { width: calc(525.018 * var(--u)); margin-left: calc(0.914 * var(--u)); }
.next-project--two .next-project__description { width: calc(463.119 * var(--u)); }
.next-project--three .next-project__copy { padding-top: calc(47.861 * var(--u)); --story-opacity: 0.3; }
.next-project--four .next-project__copy { padding-top: calc(47.862 * var(--u)); --story-opacity: 0.2; }
.next-project--three .next-project__description,
.next-project--four .next-project__description { width: calc(442.576 * var(--u)); }

/* Measure real browser line breaks after the fonts load. Each line reveals
   through a small mask, with enough bleed for the serif's descenders. */
.reveal-line {
  display: block;
  clip-path: inset(-0.22em -0.12em);
}
.reveal-line__inner { display: block; }
.has-project-motion .text-reveal:not(.is-revealed) .reveal-line__inner {
  opacity: 0;
  transform: translate3d(0, 110%, 0);
}
.has-project-motion .reveal-line__inner {
  transition:
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 450ms ease;
  transition-delay: calc(var(--line-index, 0) * 55ms);
}
.has-project-motion .text-reveal.is-revealed .reveal-line__inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 760px) {
  .projects-surface { --u: 1px; }
  .projects-page {
    --arrow-scale: 1;
    --number-scale: 0.45;
    min-height: auto;
    background: transparent;
  }
  .section-heading { font-size: 48px; }
  .featured-projects { padding-top: 138px; }
  .featured-projects__heading { height: 220px; padding-inline: 24px; }
  .featured-projects__list { padding-inline: 24px; }
  .featured-project { grid-template-columns: minmax(0, 1fr); height: auto; gap: 30px; }
  .featured-project + .featured-project,
  .featured-project:nth-child(3) { margin-top: 90px; }
  .featured-project__copy,
  .featured-project:nth-child(2) .featured-project__copy,
  .featured-project:nth-child(3) .featured-project__copy { grid-row: 2; margin: 0; }
  .project-image--featured { width: 100%; height: auto; aspect-ratio: 726.003 / 712.821; }
  .featured-project__title { height: auto; margin: 0 0 14px; font-size: clamp(30px, 7.6vw, 41.879px); white-space: normal; line-height: 1; }
  .featured-project__copy .project-location { height: auto; margin: 0 0 18px; }
  .featured-project__description { width: min(100%, 370.637px); height: auto; margin: 0 0 28px; font-size: 15.16px; line-height: 1.4; }
  .featured-project__copy .project-action { margin: 0; }
  .project-action { min-height: 48px; }
  .all-projects { margin-top: 100px; }
  .next-projects { grid-template-columns: minmax(0, 1fr); min-height: auto; margin-top: 120px; padding: 0 24px 96px; gap: 46px; }
  .next-projects__heading { position: static; padding: 0; }
  .project-action--learn { margin: 30px 0 0; }
  .next-project,
  .next-project--two,
  .next-project--three,
  .next-project--four { grid-template-columns: 112px minmax(0, 1fr); height: auto; min-height: 155px; gap: 12px; padding-bottom: 40px; }
  .next-project:last-child { padding-bottom: 0; }
  .next-project__number { height: 88px; }
  .next-project__number img,
  .next-project--two .next-project__number img { top: 6px; left: 0; }
  .next-project__copy,
  .next-project--two .next-project__copy,
  .next-project--three .next-project__copy,
  .next-project--four .next-project__copy { padding: 0; margin: 0; }
  .next-project__title,
  .next-project--two .next-project__title { width: auto; margin: 0; font-size: 25px; line-height: 1.08; }
  .next-project__description,
  .next-project--two .next-project__description,
  .next-project--three .next-project__description,
  .next-project--four .next-project__description { width: auto; margin-top: 18px; font-size: 14px; line-height: 1.4; }
}

@media (max-width: 380px) {
  .next-project, .next-project--two, .next-project--three, .next-project--four { grid-template-columns: 88px minmax(0, 1fr); }
  .projects-page { --number-scale: 0.35; }
  .next-project__title, .next-project--two .next-project__title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-action { transition: none; }
  .project-image img { transform: none; will-change: auto; }
  .next-project__copy, .next-project__number { opacity: 1; will-change: auto; }
  .reveal-line__inner { transition: none !important; }
}