@font-face {
  font-family: "TT Interphases Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/TTInterphasesPro-Rg.ttf") format("truetype");
}

@font-face {
  font-family: "TT Interphases Pro";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/TTInterphasesPro-Md.ttf") format("truetype");
}

@font-face {
  font-family: "TT Interphases Pro Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/TTInterphasesProMono-Rg.ttf") format("truetype");
}

:root {
  --color-black: #000000;
  --color-cool-gray-50: #818489;
  --color-white: #ffffff;
  --blend-foreground: #ffffff;
  --blend-muted-foreground: rgb(255 255 255 / 49%);
  --motion-duration-fast: 0.24s;
  --motion-duration-soft: 0.2s;
  --motion-duration-menu-exit: 1.72s;
  --motion-duration-menu-overlay-out: 0.12s;
  --motion-delay-menu-exit-content: 0.12s;
  --motion-duration-menu-content-out: 0.2s;
  --motion-delay-menu-enter: 0.3s;
  --motion-delay-logo-compact: 0.26s;
  --motion-ease: ease-in-out;
  --project-view-transition-duration: 0.55s;

  --figma-lead: 28px;
  --figma-h3: 60px;
  --figma-h4: 28px;
  --figma-mono: 16px;
  --figma-mono-small: 12px;
  --figma-body: 20px;
  --figma-body-small: 14px;

  --font-sans: "TT Interphases Pro", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "TT Interphases Pro Mono", "Roboto Mono", "SFMono-Regular", Consolas, monospace;

  --font-lead-family: var(--font-sans);
  --font-lead-size: var(--figma-lead);
  --font-lead-weight: 400;
  --font-lead-line-height: 1.25;
  --font-lead-letter-spacing: -0.56px;

  --font-h3-family: var(--font-sans);
  --font-h3-size: var(--figma-h3);
  --font-h3-weight: 400;
  --font-h3-line-height: 0.95;
  --font-h3-letter-spacing: -1.2px;

  --font-h4-family: var(--font-sans);
  --font-h4-size: var(--figma-h4);
  --font-h4-weight: 400;
  --font-h4-line-height: 1.25;
  --font-h4-letter-spacing: -0.56px;

  --font-mono-16-family: var(--font-mono);
  --font-mono-16-size: var(--figma-mono);
  --font-mono-16-weight: 400;
  --font-mono-16-line-height: 1;
  --font-mono-16-letter-spacing: 0.32px;

  --font-mono-small-family: var(--font-mono-16-family);
  --font-mono-small-size: var(--figma-mono-small);
  --font-mono-small-weight: var(--font-mono-16-weight);
  --font-mono-small-line-height: var(--font-mono-16-line-height);
  --font-mono-small-letter-spacing: var(--font-mono-16-letter-spacing);

  --font-body-family: var(--font-sans);
  --font-body-size: var(--figma-body);
  --font-body-weight: 400;
  --font-body-line-height: 1.35;
  --font-body-letter-spacing: -0.4px;

  --font-body-small-family: var(--font-body-family);
  --font-body-small-size: var(--figma-body-small);
  --font-body-small-weight: var(--font-body-weight);
  --font-body-small-line-height: var(--font-body-line-height);
  --font-body-small-letter-spacing: var(--font-body-letter-spacing);

  --font-header-size: 28px;
  --font-header-letter-spacing: -0.8px;
  --font-brand-size: 24px;
  --font-brand-letter-spacing: -0.48px;
  --font-meta-size: 15px;
  --font-meta-letter-spacing: 0.3px;
  --font-quote-letter-spacing: -0.9px;
  --header-menu-open-height: 330px;
  --header-spacer-height: 470px;
  --header-contact-right: 91px;
  --header-content-offset: 0px;
  --header-menu-hang: 28px;
  --header-nav-left: 974px;
  --header-menu-left: 942px;
  --header-menu-top: 12px;
  --header-menu-gap: 10px;
  --header-menu-icon-width: 24px;
  --header-menu-icon-height: 18px;
  --header-menu-close-size: 18px;

  --page-width: 1440px;
  --page-pad: 24px;
  --grid-gap: 16px;
  --content-width: 1392px;
  --card-half: 688px;
  --image-small-height: 240px;    
  --image-short-height: 360px;
  --image-tall-height: 540px;
  --row-gap: 75px;
  --layout-left: 0px;
  --layout-scale: 1;
  --project-controls-pin-y: 90px;
  --project-controls-reveal-y: 1px;
  --project-controls-hide-before-end: 150px;
  --project-controls-start-offset: 20vh;
  --project-controls-motion-y: -30px;
  --projects-home-offset: 3vh;
  --viewport-width: 100vw;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  font-style: normal;
  font-weight: var(--font-body-weight);
  letter-spacing: var(--font-body-letter-spacing);
  line-height: var(--font-body-line-height);
  margin: 0;
  min-width: 320px;
}

body::before {
  background: rgb(0 0 0 / 80%);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity var(--motion-duration-soft) var(--motion-ease);
  z-index: 19;
}

body.is-menu-open::before {
  opacity: 1;
}

body.is-menu-open.is-menu-closing::before {
  opacity: 0;
  transition-duration: var(--motion-duration-menu-overlay-out);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

a:hover {
  color: var(--color-cool-gray-50);
}

button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.page {
  background: var(--color-white);
  margin: 0 auto;
  max-width: var(--page-width);
  min-height: 100vh;
  overflow: visible;
  position: relative;
}

body.is-scale-mode,
body.is-fixed-mode {
  overflow-x: hidden;
}

body.is-scale-mode .page,
body.is-fixed-mode .page,
body.is-scale-mode .under-construction,
body.is-fixed-mode .under-construction {
  max-width: none;
  min-height: 0;
  margin: 0;
  transform: scale(var(--layout-scale));
  transform-origin: top left;
  width: var(--page-width);
}

body.is-scale-mode > .header,
body.is-fixed-mode > .header {
  left: var(--layout-left);
  max-width: none;
  transform: scale(var(--layout-scale));
  transform-origin: top left;
  width: var(--page-width);
}

body.is-fixed-mode .page {
  margin-left: var(--layout-left);
}

body.is-scale-mode .under-construction,
body.is-fixed-mode .under-construction {
  height: calc(100svh / var(--layout-scale));
  left: 0;
  position: fixed;
  top: 0;
}

body.is-fixed-mode .under-construction {
  left: var(--layout-left);
}

body.is-scale-mode .header__menu-toggle,
body.is-fixed-mode .header__menu-toggle {
  left: calc(var(--layout-left) + var(--header-menu-left) * var(--layout-scale));
  top: calc(var(--header-menu-top) * var(--layout-scale));
}

.header {
  background: transparent;
  height: 570px;
  left: 50%;
  max-width: var(--page-width);
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  z-index: 20;
}

.header::before {
  background: var(--color-white);
  content: "";
  height: calc(var(--header-menu-open-height) - 16px);
  left: 8px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 8px;
}

.header a,
.header button {
  pointer-events: auto;
}

.header-spacer {
  height: var(--header-spacer-height);
}

.header__top {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  left: var(--header-nav-left);
  position: absolute;
  right: 22px;
  top: 14px;
  z-index: 1;
}

.brand,
.timezone {
  font-family: "Inter", var(--font-sans);
  font-size: var(--font-body-size);
  font-weight: 500;
  letter-spacing: var(--font-body-letter-spacing);
  line-height: 1.2;
  white-space: nowrap;
}

.timezone {
  text-transform: uppercase;
}

.header__logo {
  background: var(--blend-foreground);
  display: block;
  mask: url("assets/logo-attde.svg") center / 100% 100% no-repeat;
  max-width: none;
  mix-blend-mode: difference;
  opacity: 1;
  position: fixed;
  transition:
    opacity var(--motion-duration-soft) var(--motion-ease),
    translate var(--motion-duration-soft) var(--motion-ease);
  translate: 0 0;
  z-index: 21;
  -webkit-mask: url("assets/logo-attde.svg") center / 100% 100% no-repeat;
}

body.is-header-compact .header__logo {
  opacity: 1;
  translate: 0 0;
  transition-delay:
    var(--motion-delay-menu-enter),
    var(--motion-delay-menu-enter);
}

body.is-header-compact-entering .header__logo {
  opacity: 0;
  transition: none;
  translate: 0 -30px;
}

body.is-header-compact-exiting .header__logo {
  opacity: 0;
  transition-delay: 0s;
  translate: 0 -30px;
}

.header__nav,
.header__contact {
  color: var(--color-black);
  font-size: var(--font-header-size);
  font-weight: 400;
  letter-spacing: var(--font-header-letter-spacing);
  line-height: normal;
  opacity: 1;
  position: absolute;
  top: 355px;
  transform: translateY(0);
  visibility: visible;
}

.header__nav {
  display: flex;
  flex-direction: column;
  left: var(--header-nav-left);
}

.header__contact {
  right: var(--header-contact-right);
  text-align: right;
}

.header__menu-toggle {
  align-items: center;
  color: var(--color-black);
  display: flex;
  font-family: var(--font-lead-family);
  font-size: calc(var(--font-lead-size) * var(--layout-scale));
  font-weight: var(--font-lead-weight);
  gap: calc(var(--header-menu-gap) * var(--layout-scale));
  letter-spacing: calc(var(--font-lead-letter-spacing) * var(--layout-scale));
  line-height: var(--font-lead-line-height);
  isolation: isolate;
  mix-blend-mode: normal;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  translate: 0 -30px;
  transition:
    opacity var(--motion-duration-soft) var(--motion-ease),
    translate var(--motion-duration-soft) var(--motion-ease),
    visibility 0s linear var(--motion-duration-soft);
  visibility: hidden;
  white-space: nowrap;
  z-index: 22;
}

.header__menu-toggle:hover {
  color: var(--color-cool-gray-50);
}

.header__menu-icon {
  background: currentColor;
  color: currentColor;
  display: block;
  height: calc(var(--header-menu-icon-height) * var(--layout-scale));
  mask: url("assets/menu-icon.svg") center / calc(var(--header-menu-icon-width) * var(--layout-scale)) calc(16px * var(--layout-scale)) no-repeat;
  width: calc(var(--header-menu-icon-width) * var(--layout-scale));
  -webkit-mask: url("assets/menu-icon.svg") center / calc(var(--header-menu-icon-width) * var(--layout-scale)) calc(16px * var(--layout-scale)) no-repeat;
}

.header.is-compact {
  background: transparent;
  color: var(--blend-foreground);
  height: 172px;
}

.header.is-compact .header__top {
  transform: translateY(var(--header-content-offset));
}

.header.is-compact .header__nav,
.header.is-compact .header__contact {
  pointer-events: none;
  transform: translateY(var(--header-content-offset));
}

body.is-header-compact .header__menu-toggle {
  color: var(--blend-foreground);
  mix-blend-mode: difference;
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
  transition-delay:
    var(--motion-delay-menu-enter),
    var(--motion-delay-menu-enter),
    0s;
  visibility: visible;
}

body.is-menu-returning .header__menu-toggle {
  color: var(--blend-foreground);
  mix-blend-mode: difference;
  transition-delay: 0s;
}

body.is-header-compact-exiting .header__menu-toggle {
  opacity: 0;
  pointer-events: none;
  translate: 0 -30px;
  transition-delay: 0s;
  visibility: visible;
}

body.is-header-compact .header__menu-toggle:hover {
  color: rgb(255 255 255 / 58%);
}

.header.is-menu-open {
  background: transparent;
  color: var(--color-black);
  height: var(--header-menu-open-height);
  min-height: 0;
  mix-blend-mode: normal;
}

.header.is-menu-open::before {
  animation: header-menu-panel-in var(--motion-duration-soft) var(--motion-ease) both;
  opacity: 1;
  pointer-events: auto;
}

.header.is-menu-open.is-menu-closing::before {
  animation: header-menu-panel-out var(--motion-duration-menu-content-out) var(--motion-ease) both;
  animation-delay: var(--motion-delay-menu-exit-content);
}

.header.is-menu-open a,
.header.is-menu-open button {
  color: var(--color-black);
  mix-blend-mode: normal;
}

.header.is-menu-open a:hover,
.header.is-menu-open button:hover {
  color: var(--color-cool-gray-50);
}

.header.is-menu-open .header__top {
  opacity: 0;
  transform: translateY(-48px);
  visibility: hidden;
}

body.is-menu-open .header__logo {
  background: var(--color-black);
  mix-blend-mode: normal;
  transition-delay: 0s;
}

.header.is-menu-open .header__nav,
.header.is-menu-open .header__contact {
  color: var(--color-black);
  font-size: var(--font-header-size);
  letter-spacing: var(--font-header-letter-spacing);
  line-height: normal;
  animation: header-menu-links-in var(--motion-duration-soft) var(--motion-ease) both;
  opacity: 1;
  pointer-events: auto;
  top: 128px;
  transform: translateY(0);
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    visibility 0s linear 0s;
  visibility: visible;
}

.header.is-menu-open.is-menu-closing .header__nav,
.header.is-menu-open.is-menu-closing .header__contact {
  animation: header-menu-links-out var(--motion-duration-menu-content-out) var(--motion-ease) both;
  animation-delay: var(--motion-delay-menu-exit-content);
  pointer-events: none;
}

body.is-menu-open .header__menu-toggle {
  color: var(--color-black);
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
  transition:
    opacity var(--motion-duration-fast) var(--motion-ease),
    translate var(--motion-duration-fast) var(--motion-ease),
    visibility 0s linear 0s;
  transition-delay: 0s;
  visibility: visible;
}

body.is-menu-open .header__menu-toggle:hover {
  color: var(--color-cool-gray-50);
}

body.is-menu-open .header__menu-icon {
  height: calc(var(--header-menu-close-size) * var(--layout-scale));
  mask-image: url("assets/menu-close.svg");
  mask-position: left center;
  mask-size: calc(var(--header-menu-close-size) * var(--layout-scale)) calc(var(--header-menu-close-size) * var(--layout-scale));
  width: calc(var(--header-menu-icon-width) * var(--layout-scale));
  -webkit-mask-image: url("assets/menu-close.svg");
  -webkit-mask-position: left center;
  -webkit-mask-size: calc(var(--header-menu-close-size) * var(--layout-scale)) calc(var(--header-menu-close-size) * var(--layout-scale));
}

body.is-menu-closing .header__menu-toggle {
  opacity: 0;
  transition:
    opacity var(--motion-duration-menu-content-out) var(--motion-ease),
    translate var(--motion-duration-menu-content-out) var(--motion-ease),
    visibility 0s linear calc(var(--motion-delay-menu-exit-content) + var(--motion-duration-menu-content-out));
  transition-delay:
    var(--motion-delay-menu-exit-content),
    var(--motion-delay-menu-exit-content),
    0s;
}

body.is-menu-returning .header__logo {
  transition-delay: 0s;
}


@keyframes header-menu-links-in {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes header-menu-links-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes header-menu-panel-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes header-menu-panel-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.intro {
  font-family: var(--font-h4-family);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  letter-spacing: var(--font-h4-letter-spacing);
  line-height: var(--font-h4-line-height);
  pointer-events: none;
  width: 660px;
}

.intro--home {
  position: fixed;
  transform: scale(var(--layout-scale));
  transform-origin: top left;
  z-index: 4;
}

.intro p {
  margin: 0;
}

.intro span {
  color: var(--color-cool-gray-50);
}

.intro .intro__primary {
  color: inherit;
}

.project-controls-slot {
  height: 54px;
  margin: var(--project-controls-start-offset) var(--page-pad) 0;
  mix-blend-mode: difference;
  position: relative;
  width: var(--content-width);
  z-index: 10;
}

/* Invariant: project controls are hidden on first load, then revealed by JS via
   body.controls-visible. All controls layers must keep difference blending. */
.project-controls {
  color: var(--blend-foreground);
  margin: 0;
  mix-blend-mode: difference;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  position: relative;
  translate: 0 var(--project-controls-motion-y);
  transition:
    opacity var(--motion-duration-soft) var(--motion-ease),
    translate var(--motion-duration-soft) var(--motion-ease),
    visibility 0s linear var(--motion-duration-soft);
  visibility: hidden;
  width: var(--content-width);
}

body.controls-visible .project-controls {
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
  transition-delay: 0s;
  visibility: visible;
}

.project-controls--pinned {
  left: calc(var(--layout-left) + var(--page-pad) * var(--layout-scale));
  position: fixed;
  top: calc(var(--project-controls-pin-y) * var(--layout-scale));
  transform: scale(var(--layout-scale));
  transform-origin: top left;
  z-index: 10;
}

body.controls-after-projects .project-controls {
  opacity: 0;
  pointer-events: none;
  translate: 0 var(--project-controls-motion-y);
  transition-delay: 0s, 0s, var(--motion-duration-soft);
  visibility: hidden;
}

.project-controls__line {
  background: currentColor;
  height: 1px;
  width: 100%;
}

.project-controls__bar {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.project-tabs {
  align-items: center;
  display: flex;
  gap: 40px;
  height: 53px;
}

.project-tabs__button {
  color: var(--blend-muted-foreground);
  font-family: var(--font-lead-family);
  font-size: var(--font-lead-size);
  font-weight: var(--font-lead-weight);
  letter-spacing: var(--font-lead-letter-spacing);
  line-height: var(--font-lead-line-height);
  transition: color var(--motion-duration-fast) var(--motion-ease);
  white-space: nowrap;
}

.project-tabs__button:hover,
.project-tabs__button.is-active {
  color: var(--blend-foreground);
}

.project-view-toggle {
  align-items: center;
  color: var(--blend-muted-foreground);
  display: flex;
  height: 32px;
  justify-content: center;
  transition: color var(--motion-duration-fast) var(--motion-ease);
  width: auto;
}

.project-view-toggle:hover {
  color: var(--blend-foreground);
}

.project-view-toggle__icon {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
}

.project-view-toggle__icon::before {
  background: currentColor;
  box-shadow:
    7px 0 currentColor,
    14px 0 currentColor,
    0 7px currentColor,
    7px 7px currentColor,
    14px 7px currentColor,
    0 14px currentColor,
    7px 14px currentColor,
    14px 14px currentColor;
  content: "";
  height: 4px;
  width: 4px;
}

body.projects-grid-view .project-view-toggle__icon {
  gap: 4px;
  grid-template-columns: repeat(2, 8px);
  grid-template-rows: 8px;
}

body.projects-grid-view .project-view-toggle__icon::before {
  box-shadow: 12px 0 currentColor;
  height: 8px;
  width: 8px;
}

.projects {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
  margin: var(--projects-home-offset) var(--page-pad) 0;
  padding-bottom: 96px;
  width: var(--content-width);
}

.project-row {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}

.project-row--wide {
  grid-template-columns: 1fr;
}

.project-row--mixed {
  grid-template-columns: 336px 336px 1fr;
}

.project-card {
  cursor: pointer;
  min-width: 0;
  transform-origin: top left;
}

.project-card[hidden] {
  display: none;
}

.project-card__media {
  background: #d9d9d9;
  height: var(--image-short-height);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.project-card--tall .project-card__media {
  height: var(--image-tall-height);
}

.project-card--small .project-card__media {
  height: var(--image-small-height);
}

.project-card__media img {
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-duration-soft) var(--motion-ease);
  width: 100%;
}

.project-card--highline .project-card__media img {
  height: 100%;
  max-width: none;
  object-position: 50% 50%;
  width: 144%;
}

.project-card--mobility .project-card__media {
  background: #eeeeee;
}

.project-card--mobility .project-card__media img {
  height: 100%;
  left: -4.44%;
  max-width: none;
  position: absolute;
  top: 0;
  width: 190.96%;
}

.project-card__body {
  margin-top: 8px;
}

.project-card__title {
  font-family: var(--font-h4-family);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  letter-spacing: var(--font-h4-letter-spacing);
  line-height: var(--font-h4-line-height);
  margin: 0;
  max-width: 582px;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.project-card:hover .project-card__media img {
  transform: scale(1.03);
}

.project-card:hover .project-card__title {
  color: var(--color-cool-gray-50);
}

.project-cursor-tooltip {
  align-items: baseline;
  background: var(--color-black);
  border-radius: 999px;
  color: var(--color-white);
  display: flex;
  gap: 8px;
  left: 0;
  opacity: 0;
  padding: 9px 14px 10px;
  pointer-events: none;
  position: fixed;
  top: 0;
  transition: opacity var(--motion-duration-soft) var(--motion-ease);
  visibility: hidden;
  white-space: nowrap;
  z-index: 80;
}

.project-cursor-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

.project-cursor-tooltip__title,
.project-cursor-tooltip__separator {
  font-family: var(--font-body-small-family);
  font-size: var(--font-body-small-size);
  font-weight: var(--font-body-small-weight);
  letter-spacing: var(--font-body-small-letter-spacing);
  line-height: var(--font-body-small-line-height);
}

.project-cursor-tooltip__meta {
  font-family: var(--font-mono-small-family);
  font-size: var(--font-mono-small-size);
  font-weight: var(--font-mono-small-weight);
  letter-spacing: var(--font-mono-small-letter-spacing);
  line-height: var(--font-mono-small-line-height);
  text-transform: uppercase;
}

.project-card__title--narrow {
  max-width: 494px;
}

.project-card__meta {
  color: var(--color-cool-gray-50);
  font-family: var(--font-mono);
  font-size: var(--font-meta-size);
  letter-spacing: var(--font-meta-letter-spacing);
  line-height: 1.25;
  margin: 8px 0 0;
  text-transform: uppercase;
}

.quote {
  align-items: flex-start;
  display: grid;
  gap: 8px;
  grid-template-columns: 28px 34px minmax(0, 1fr);
  margin-top: 8px;
  max-width: 574px;
}

.quote__mark {
  height: 28.5px;
  width: 27.5px;
}

.quote__avatar {
  border-radius: 50%;
  height: 34px;
  margin-top: 12px;
  object-fit: cover;
  width: 34px;
}

.quote__text {
  font-family: var(--font-mono);
  font-size: var(--font-meta-size);
  letter-spacing: var(--font-quote-letter-spacing);
  line-height: 1.15;
  margin-top: 10px;
}

.quote__text p {
  margin: 0;
}

.quote__author {
  opacity: 0.4;
  padding-top: 2px;
}

.project-card--quote-long .quote__text {
  line-height: 1.25;
}

.project-card--quote-long .quote__author {
  padding-top: 4px;
}

.magazine {
  border-bottom: 1px solid var(--color-cool-gray-50);
  border-top: 1px solid var(--color-cool-gray-50);
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 var(--page-pad);
  min-height: 1292px;
  width: var(--content-width);
}

.magazine__intro {
  border-right: 1px solid var(--color-cool-gray-50);
  min-height: 1292px;
  position: relative;
}

.magazine__intro h3 {
  font-family: var(--font-h3-family);
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  letter-spacing: var(--font-h3-letter-spacing);
  line-height: var(--font-h3-line-height);
  margin: 12px 0 0;
}

.magazine__intro p {
  font-family: var(--font-lead-family);
  font-size: var(--font-lead-size);
  font-weight: var(--font-lead-weight);
  letter-spacing: var(--font-lead-letter-spacing);
  line-height: var(--font-lead-line-height);
  margin: 434px 0 0;
  max-width: 561px;
}

.magazine__list {
  display: flex;
  flex-direction: column;
  padding-top: 35px;
}

.magazine-card {
  cursor: pointer;
  display: grid;
  gap: 23px;
  grid-template-columns: 273px 372px;
  min-height: 272px;
  padding-left: 28px;
}

.magazine-card + .magazine-card {
  border-top: 1px solid var(--color-cool-gray-50);
  margin-top: 22px;
  padding-top: 26px;
}

.magazine-card__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 214px;
}

.magazine-card h4 {
  font-family: var(--font-h4-family);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  letter-spacing: var(--font-h4-letter-spacing);
  line-height: var(--font-h4-line-height);
  margin: 0;
  max-width: 281px;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.magazine-card p {
  font-family: var(--font-mono-16-family);
  font-size: var(--font-mono-16-size);
  font-weight: var(--font-mono-16-weight);
  letter-spacing: var(--font-mono-16-letter-spacing);
  line-height: var(--font-mono-16-line-height);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.magazine-card__media {
  height: 272px;
  overflow: hidden;
  width: 372px;
}

.magazine-card__media img {
  height: 272px;
  object-fit: cover;
  transition: transform var(--motion-duration-soft) var(--motion-ease);
  width: 372px;
}

.magazine-card:hover h4 {
  color: var(--color-cool-gray-50);
}

.magazine-card:hover .magazine-card__media img {
  transform: scale(1.02);
}

@media (max-width: 900px) {
  :root {
    --figma-lead: 18px;
    --figma-h3: 34px;
    --figma-h4: 18px;
    --figma-mono: 8px;
    --font-brand-size: 10px;
    --font-header-size: 20px;
    --header-spacer-height: 260px;
    --page-pad: 8px;
    --row-gap: 54px;
  }

  .page {
    max-width: 100%;
  }

  .header {
    height: 260px;
  }

  .header__top {
    left: 68%;
    right: 8px;
    top: 5px;
  }

  .header__logo {
    height: 274px;
    left: 8px;
    top: 25px;
    width: 1397px;
  }

  .header__nav,
  .header__contact {
    top: 122px;
  }

  .header__nav {
    left: 68%;
  }

  .header__contact {
    right: 24px;
  }

  .header.is-compact {
    height: 96px;
  }

  .header.is-compact .header__logo {
    height: auto;
    left: 8px;
    top: 10px;
    width: 72px;
  }

  .header.is-menu-open {
    height: 50vh;
    min-height: 260px;
  }

  .header.is-menu-open .header__logo {
    height: auto;
    left: 8px;
    top: 10px;
    width: 72px;
  }

  .header.is-menu-open .header__nav,
  .header.is-menu-open .header__contact {
    font-size: 20px;
    letter-spacing: -0.4px;
    top: 80px;
  }

  .intro--home {
    font-size: 16px;
    left: 8px;
    letter-spacing: -0.32px;
    line-height: 1.15;
    position: absolute;
    top: 123px;
    width: 58%;
  }

  .project-tabs {
    gap: 22px;
    height: 35px;
    overflow-x: auto;
  }

  .projects {
    margin: 17px 8px 0;
    width: calc(100% - 16px);
  }

  .project-row,
  .project-row--mixed {
    gap: 53px 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-row--wide {
    grid-template-columns: 1fr;
  }

  .project-row--mixed .project-card:last-child {
    grid-column: 1 / -1;
  }

  .project-card__media,
  .project-card--tall .project-card__media {
    height: auto;
    aspect-ratio: 223 / 157;
  }

  .project-card--small .project-card__media {
    aspect-ratio: 168 / 118;
    height: auto;
  }

  .project-row--wide .project-card__media {
    aspect-ratio: 446 / 157;
  }

  .project-card__title {
    font-size: var(--font-h4-size);
    letter-spacing: var(--font-h4-letter-spacing);
    line-height: var(--font-h4-line-height);
  }

  .project-card__meta,
  .quote__text {
    font-size: 5px;
  }

  .quote {
    gap: 4px;
    grid-template-columns: 14px 17px minmax(0, 1fr);
    margin-top: 4px;
  }

  .quote__mark {
    height: 14.5px;
    width: 14px;
  }

  .quote__avatar {
    height: 17px;
    margin-top: 6px;
    width: 17px;
  }

  .quote__text {
    margin-top: 5px;
  }

  .magazine {
    grid-template-columns: 1fr;
    margin: 0 8px;
    min-height: 0;
    width: calc(100% - 16px);
  }

  .magazine__intro {
    border-right: 0;
    min-height: 320px;
  }

  .magazine__intro h3 {
    letter-spacing: -0.68px;
    margin-top: 6px;
  }

  .magazine__intro p {
    font-size: 14px;
    letter-spacing: -0.28px;
    margin-top: 190px;
    max-width: 300px;
  }

  .magazine__list {
    border-top: 1px solid var(--color-cool-gray-50);
    padding: 16px 0 32px;
  }

  .magazine-card {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    min-height: 0;
    padding-left: 0;
  }

  .magazine-card__copy {
    min-height: 136px;
  }

  .magazine-card + .magazine-card {
    margin-top: 16px;
    padding-top: 16px;
  }

  .magazine-card h4 {
    letter-spacing: -0.36px;
    max-width: 100%;
  }

  .magazine-card p {
    white-space: normal;
  }

  .magazine-card__media {
    aspect-ratio: 372 / 272;
    height: auto;
    width: 100%;
  }

  .magazine-card__media img {
    height: 100%;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .brand,
  .timezone,
  .header__nav,
  .header__contact {
    font-size: 8px;
  }

  .project-card__title {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .project-tabs__button {
    font-size: 10px;
    letter-spacing: -0.2px;
  }
}

body.projects-grid-view .projects {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

body.projects-grid-view .project-row,
body.projects-grid-view .project-row--wide,
body.projects-grid-view .project-row--mixed {
  display: contents;
}

body.projects-grid-view .project-card__media,
body.projects-grid-view .project-card--tall .project-card__media,
body.projects-grid-view .project-card--small .project-card__media {
  aspect-ratio: 4 / 3;
  height: auto;
}

body.projects-grid-view .project-card__media img,
body.projects-grid-view .project-card--highline .project-card__media img,
body.projects-grid-view .project-card--mobility .project-card__media img {
  height: 100%;
  left: auto;
  max-width: 100%;
  object-fit: cover;
  position: static;
  top: auto;
  width: 100%;
}

body.projects-grid-view .project-card__body {
  display: none;
}

.under-construction {
  background: var(--color-white);
  color: var(--color-black);
  margin: 0 auto;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  width: var(--page-width);
}

.under-construction .header {
  color: var(--blend-foreground);
  height: 558px;
  left: 0;
  mix-blend-mode: difference;
  position: absolute;
  top: 0;
  transform: none;
  width: 100%;
  z-index: 1;
}

.under-construction__hero {
  display: contents;
}

.site-logo {
  height: 274px;
  left: 21px;
  max-width: none;
  position: absolute;
  top: 60px;
  width: 1397px;
}

.contact-block {
  color: var(--blend-foreground);
  display: flex;
  flex-direction: column;
  font-family: var(--font-h4-family);
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  justify-content: space-between;
  letter-spacing: var(--font-h4-letter-spacing);
  left: var(--header-nav-left);
  line-height: var(--font-h4-line-height);
  min-height: 176px;
  mix-blend-mode: difference;
  position: absolute;
  top: 355px;
}

.contact-block__item,
.portfolio-link {
  white-space: nowrap;
}

.contact-block__item p {
  margin: 0;
}

.contact-block__item a {
  color: var(--color-cool-gray-50);
}

.contact-block__item a:hover {
  color: var(--blend-foreground);
}

.portfolio-link {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  width: fit-content;
}

.portfolio-link img {
  height: 22px;
  max-width: none;
  width: 22px;
}

.intro--under-construction {
  left: 24px;
  position: absolute;
  top: 355px;
}

.page-footer {
  align-items: center;
  bottom: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  left: 24px;
  position: absolute;
  right: 24px;
}

.page-footer__legal,
.page-footer__social {
  align-items: center;
  display: flex;
  gap: 20px;
  white-space: nowrap;
}

.page-footer__social {
  justify-self: start;
  margin-left: 254px;
}

.page-footer__copyright {
  display: inline-flex;
  gap: 4px;
}

.page-footer__copyright-mark {
  flex: 0 0 auto;
}

@media (max-width: 440px) {
  :root {
    --figma-lead: 18px;
    --figma-h4: 18px;
    --figma-body: 14px;
    --font-body-letter-spacing: -0.26px;
    --font-h4-letter-spacing: -0.34px;
    --font-lead-letter-spacing: -0.34px;
    --footer-copyright-mark-size: 17px;
    --footer-copyright-mark-left: -19px;
    --footer-copyright-mark-top: 2px;
    --page-pad: 16px;
  }

  body {
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .under-construction {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
    padding: 16px var(--page-pad) calc(16px + env(safe-area-inset-bottom));
    transform: none;
    width: 100%;
  }

  .under-construction__hero {
    display: block;
    min-height: 658px;
    position: relative;
  }

  .under-construction .header {
    color: var(--blend-foreground);
    display: flex;
    flex-direction: column;
    height: auto;
    mix-blend-mode: difference;
    position: static;
    transform: none;
    width: 100%;
  }

  .under-construction .header__top {
    left: auto;
    position: static;
    right: auto;
    top: auto;
    width: 100%;
  }

  .under-construction .brand,
  .under-construction .timezone {
    font-size: var(--font-body-size);
    letter-spacing: var(--font-body-letter-spacing);
    line-height: 1;
  }

  .site-logo {
    height: auto;
    left: 0;
    margin-top: 0;
    position: absolute;
    top: 659px;
    transform: rotate(-90deg);
    transform-origin: top left;
    width: 604px;
    z-index: 1;
  }

  .intro--under-construction {
    font-size: var(--font-lead-size);
    left: 141px;
    letter-spacing: var(--font-lead-letter-spacing);
    line-height: var(--font-lead-line-height);
    margin-top: 0;
    position: absolute;
    top: 50px;
    width: calc(100% - 141px);
  }

  .intro--under-construction p {
    display: block;
  }

  .intro--under-construction .intro__primary {
    display: block;
  }

  .contact-block {
    font-size: var(--font-h4-size);
    gap: 36px;
    left: 141px;
    letter-spacing: var(--font-h4-letter-spacing);
    line-height: normal;
    margin-top: 0;
    min-height: 0;
    position: absolute;
    top: 408px;
  }

  .portfolio-link {
    gap: 8px;
  }

  .portfolio-link img {
    height: 16px;
    width: 16px;
  }

  .page-footer {
    align-items: flex-start;
    bottom: auto;
    display: grid;
    font-size: var(--font-body-size);
    gap: 13px 0;
    grid-template-columns: 94px 1fr;
    left: auto;
    margin-left: 141px;
    margin-top: 36px;
    position: static;
    right: auto;
    width: calc(100% - 141px);
  }

  .page-footer__legal,
  .page-footer__social {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: normal;
  }

  .page-footer__legal {
    display: contents;
  }

  .page-footer__copyright {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    margin-top: 13px;
    max-width: 147px;
    position: relative;
    text-align: left;
  }

  .page-footer__copyright-mark {
    font-size: var(--footer-copyright-mark-size);
    left: var(--footer-copyright-mark-left);
    line-height: 1;
    position: absolute;
    top: var(--footer-copyright-mark-top);
  }

  .page-footer__social {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
  }

  .page-footer__legal a {
    grid-column: 2;
    grid-row: 1;
  }

  .page-footer__legal a + a {
    margin-top: calc(1.35em + 4px);
  }
}

@media (min-width: 401px) and (max-width: 440px) {
  :root {
    /* Tune these values for wider mobile screens. 0-400px keeps the base mobile tokens above. */
    --figma-lead: 20px;
    --figma-h4: 20px;
    --figma-body: 16px;
    --font-body-letter-spacing: -0.26px;
    --font-h4-letter-spacing: -0.34px;
    --font-lead-letter-spacing: -0.34px;
  }
}