@font-face {
  font-family: "Helvetica";
  src: url("../asstes/fonts/HelveticaNeueMedium_0.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("../asstes/fonts/helveticablackoriginal_bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("../asstes/fonts/HelveticaNeueBlack_0.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("../asstes/fonts/HelveticaNeueBlackItalic_0.otf") format("opentype");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../asstes/fonts/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
}

:root {
  --font-primary: "Helvetica", "Noto Sans", sans-serif;
  --font-secondary: "Noto Sans", sans-serif;
  color-scheme: dark;
  --background: #1c1c1c;
  --accent: #bea802;
  --interaction: #de0004;
  --white: #f7f5f5;
  --black-font: #000000;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--white);
  font-family: var(--font-secondary);
  font-weight: 400;
}

a:hover,
a:active,
a:focus-visible,
a[aria-current]:not([aria-current="false"]) {
  color: var(--interaction);
}

/* Site standard: Helvetica titles; preserve page casing and uppercase card titles. */
:where(h1, h2, h3, h4, h5, h6, .page-title, .card-title) {
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: none;
}

.card-title {
  text-transform: uppercase;
}

:where(figcaption, time, .caption, .metadata, .project-number) {
  font-family: var(--font-secondary);
  font-size: 12px;
  font-weight: 400;
}

.page-background {
  isolation: isolate;
}

.gallery-background {
  isolation: isolate;
}

.gallery-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("../asstes/site-graphics/photo-gallery-background.png") no-repeat;
  background-size: cover;
  /* Figma places the image 220px right of the edge in its 1916px frame. */
  background-position: left 11.4823vw center;
  opacity: 0.2;
}

@media (max-width: 900px) {
  .gallery-background::before {
    background-position: 75% center;
  }
}

/* The landing and Work sections share the flat Figma page surface. */
.page-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--background);
}

/* Fit the Figma 1280 × 800 scene; the radial artwork occupies a 725px circle. */
.hero {
  --hero-unit: min(1px, calc((100vw - 32px) / 760), calc((100dvh - 32px) / 800));
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.hero__scene {
  position: relative;
  width: calc(1280 * var(--hero-unit));
  height: calc(800 * var(--hero-unit));
  transform: translate(calc(-0.5 * var(--hero-unit)), calc(3 * var(--hero-unit)));
}

.hero__artwork {
  position: absolute;
  top: calc(50% - 2 * var(--hero-unit));
  left: calc(50% - 3 * var(--hero-unit));
  width: calc(725 * var(--hero-unit));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.hero__rotor,
.hero__spoke {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.hero__rotor {
  transform: rotate(0deg);
}

.hero__rotor.is-rotating {
  will-change: transform;
}

.hero__spoke {
  transform: rotate(var(--spoke-angle));
}

.hero__spoke img {
  position: absolute;
  top: calc(50% - 360 * var(--hero-unit));
  left: 50%;
  display: block;
  width: calc(150 * var(--hero-unit));
  height: auto;
  transform: translateX(-50%);
}

/* Figma phone layer: retain each mockup's placement and source-image crop. */
.hero__phone {
  position: absolute;
  top: calc(50% + var(--phone-y) * var(--hero-unit));
  left: calc(50% + var(--phone-x) * var(--hero-unit));
  width: calc(var(--phone-width) * var(--hero-unit));
  height: calc(var(--phone-height) * var(--hero-unit));
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--phone-angle));
}

.hero__phone img {
  position: absolute;
  top: var(--phone-image-top);
  left: 0;
  display: block;
  width: 100%;
  height: var(--phone-image-height);
}

/* An opaque circular surface hides the bodies inside the stationary SVG. */
.hero__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: calc(362.333 * var(--hero-unit));
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--background);
  transform: translate(-50%, -50%);
}

.hero__ring img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__navigation {
  position: absolute;
  top: calc(50% + 6 * var(--hero-unit));
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(24 * var(--hero-unit));
  transform: translate(-50%, -50%);
}

.hero__name h1 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-primary);
  font-size: max(12px, calc(24 * var(--hero-unit)));
  font-weight: 700;
  line-height: normal;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
}

.portfolio-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(12px, calc(16 * var(--hero-unit)));
  line-height: normal;
  height: 1lh;
}

.portfolio-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--hero-unit));
  min-height: 44px;
  color: var(--white);
  font-family: var(--font-secondary);
  font-size: inherit;
  font-weight: 400;
  font-variation-settings: "CTGR" 100, "wdth" 100;
  line-height: inherit;
  letter-spacing: 0.3em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.portfolio-nav a:hover,
.portfolio-nav a:active,
.portfolio-nav a:focus-visible {
  color: var(--interaction);
}

.portfolio-nav a:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: 7px;
}

.work {
  --work-unit: min(1px, calc((100vw - 48px) / 1000), calc((100dvh - 96px) / 638));
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  padding: 48px 24px;
  background-color: var(--background);
}

.work__container {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
}

.work__carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--work-unit));
}

.work__panel {
  --panel-width: 258;
  --preview-height: 544;
  --label-gap: 39;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: calc(var(--panel-width) * var(--work-unit));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: width 360ms ease;
}

.work__panel--dev {
  order: 0;
  display: none;
}

.work__panel--ui {
  order: 1;
}

.work__panel--photos {
  order: 2;
}

.work__panel.is-active {
  --panel-width: 283.8;
  --preview-height: 598.4;
}

.work__label {
  display: block;
  margin-bottom: calc((var(--label-gap) - 22) * var(--work-unit));
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 22px;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
  transition: margin-bottom 360ms ease;
}

.work__panel--dev .work__label,
.work__panel.is-active .work__label,
.work__panel:hover .work__label,
.work__panel:active .work__label,
.work__panel:focus-visible .work__label {
  color: var(--interaction);
}

.work__preview {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--preview-height) * var(--work-unit));
  transition: height 360ms ease;
}

/* Frame the phone in each source image, excluding its different outer padding. */
.work__preview {
  overflow: hidden;
  border-radius: calc(44 * var(--work-unit));
}

.work__preview>img {
  position: absolute;
  display: block;
  max-width: none;
  width: var(--image-width);
  height: var(--image-height);
  left: var(--image-left);
  top: var(--image-top);
  pointer-events: none;
}

.work__panel--ui {
  --image-width: 105.459%;
  --image-height: 103.497%;
  --image-left: -2.402%;
  --image-top: -1.639%;
}

.work__panel--dev {
  --image-width: 147.55%;
  --image-height: 108.475%;
  --image-left: -23.919%;
  --image-top: -2.754%;
}

.work__panel--photos {
  --image-width: 187.079%;
  --image-height: 130.357%;
  --image-left: -49.789%;
  --image-top: -6.365%;
}

.work__panel:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: 10px;
  border-radius: 12px;
}

@media (max-width: 600px) {
  .work {
    --work-unit: min(1px, calc((100vw - 64px) / 355));
    height: auto;
    min-height: 900px;
    padding-block: 64px;
  }

  .work__carousel {
    flex-direction: column;
    gap: 40px;
  }

  .work__panel--ui {
    order: 0;
  }

  .work__panel--dev {
    order: 1;
  }

  .work__panel--photos {
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .portfolio-nav a,
  .work__panel,
  .work__label,
  .work__preview {
    transition: none;
  }
}



/* A 1300 × 786 content frame, centered and fitted to both desktop viewport axes. */
.portfolio-page {
  --page-unit: min(1px, calc((100vw - 48px) / 1300), calc((100dvh - 48px) / 786));
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
}

.page-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16 * var(--page-unit));
  width: calc(1300 * var(--page-unit));
  height: calc(786 * var(--page-unit));
}

.page-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  width: calc(1160 * var(--page-unit));
  height: calc(20 * var(--page-unit));
}

.page-header h1 {
  margin: 0;
  font-size: calc(20 * var(--page-unit));
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-back {
  position: absolute;
  top: 50%;
  left: -15px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  transform: translateY(-50%);
}

.portfolio-nav__arrow,
.page-back__icon,
.gallery-control__icon {
  display: block;
  flex: none;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

.portfolio-nav__arrow {
  --icon: url("../asstes/site-graphics/work-arrow.svg");
  position: relative;
  width: calc(11 * var(--hero-unit));
  height: calc(13 * var(--hero-unit));
  background-color: transparent;
  mask: none;
}

.portfolio-nav__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(15 * var(--hero-unit));
  height: calc(13 * var(--hero-unit));
  background-color: var(--interaction);
  mask: var(--icon) center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(90deg);
}

.page-back__icon {
  --icon: url("../asstes/site-graphics/back.svg");
  width: 18px;
  height: 14px;
}

.gallery-control__icon { width: 48px; height: 48px; }
[data-photo-direction="-1"] { --icon: url("../asstes/site-graphics/photos-previous.svg"); }
[data-photo-direction="1"] { --icon: url("../asstes/site-graphics/photos-next.svg"); }

.page-back:focus-visible,
.gallery-control:focus-visible,
.project-gallery__track:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: 4px;
}

.gallery-control {
  display: grid;
  place-items: center;
  justify-self: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.gallery-control:enabled:hover,
.gallery-control:enabled:active,
.gallery-control:enabled:focus-visible {
  color: var(--interaction);
}

.gallery-control img { display: block; }
.gallery-control:disabled { cursor: default; }
.gallery-control:disabled[data-photo-direction="1"] { opacity: 0.3; }

/* Photos / Art category landing page: the Figma frame is 1300 × 560. */
.photos-art {
  --photos-art-unit: min(1px, calc((100vw - 48px) / 1300), calc((100dvh - 48px) / 560));
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
}

.photos-art__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32.98374 * var(--photos-art-unit));
  width: calc(1300 * var(--photos-art-unit));
}

.photos-art__header {
  --page-unit: var(--photos-art-unit);
  width: calc(1241.76 * var(--photos-art-unit));
  height: calc(26.01626 * var(--photos-art-unit));
  margin: 0;
}

.photos-art__header .page-back { left: calc(-16 * var(--photos-art-unit)); }
.photos-art__header .page-back__icon { --icon: url("../asstes/site-graphics/photos-art-back.svg"); }

.photos-art__categories {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--photos-art-unit));
  width: 100%;
}

.photos-art__card {
  position: relative;
  display: block;
  flex: none;
  width: calc(387 * var(--photos-art-unit));
  height: calc(501 * var(--photos-art-unit));
  overflow: hidden;
  border: calc(8 * var(--photos-art-unit)) solid var(--white);
  color: #fff;
  text-decoration: none;
}

.photos-art__card--photography { width: calc(400 * var(--photos-art-unit)); }
.photos-art__card--concept-art { height: calc(500 * var(--photos-art-unit)); }

.photos-art__card > img {
  position: absolute;
  top: calc(-8 * var(--photos-art-unit));
  left: calc(-8 * var(--photos-art-unit));
  display: block;
  width: calc(100% + 16 * var(--photos-art-unit));
  height: calc(100% + 16 * var(--photos-art-unit));
  object-fit: cover;
  clip-path: inset(calc(8 * var(--photos-art-unit)));
}

.photos-art__label {
  position: absolute;
  top: calc(210 * var(--photos-art-unit));
  left: calc(60 * var(--photos-art-unit));
  width: calc(251 * var(--photos-art-unit));
  height: calc(75 * var(--photos-art-unit));
  background: var(--interaction);
  color: #fff;
  font-family: var(--font-primary);
  font-size: calc(24 * var(--photos-art-unit));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.photos-art__label > span {
  position: absolute;
  top: calc(23.81 * var(--photos-art-unit));
  left: calc(59 * var(--photos-art-unit));
}

.photos-art__card--photography .photos-art__label {
  top: calc(218 * var(--photos-art-unit));
  left: calc(74 * var(--photos-art-unit));
}

.photos-art__card--photography .photos-art__label > span {
  top: calc(19 * var(--photos-art-unit));
  left: calc(49 * var(--photos-art-unit));
}

.photos-art__card:hover,
.photos-art__card:active { border-color: var(--interaction); }
.photos-art__card:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: 6px;
}

@media (max-width: 600px) {
  .photos-art {
    --photos-art-unit: min(1px, calc((100vw - 48px) / 400));
    align-items: start;
    padding: 32px 24px;
  }

  .photos-art__container { width: 100%; gap: 32px; }
  .photos-art__header { --page-unit: 1px; width: 100%; height: 26px; }
  .photos-art__header .page-back { left: -16px; }
  .photos-art__categories { flex-direction: column; gap: 24px; }
}

.photo-gallery__header { width: calc(1118 * var(--page-unit)); }

.photo-gallery__carousel {
  display: grid;
  grid-template-columns: calc(50 * var(--page-unit)) minmax(0, 1fr) calc(50 * var(--page-unit));
  align-items: center;
  width: 100%;
  height: calc(750 * var(--page-unit));
}

.photo-gallery__viewport {
  min-width: 0;
  height: 100%;
  padding-inline: calc(40.5 * var(--page-unit));
}

.photo-gallery__track {
  --photo-height: calc(730 * var(--page-unit));
  display: flex;
  align-items: center;
  gap: calc(24 * var(--page-unit));
  height: 100%;
  min-width: 0;
  padding: calc(10 * var(--page-unit)) var(--photo-end-space, 8px) calc(10 * var(--page-unit)) var(--photo-start-space, 8px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--photo-start-space, 8px);
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.photo-gallery__track::-webkit-scrollbar { display: none; }

.photo-gallery__card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--photo-height);
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  scroll-snap-align: start;
}

.photo-gallery__card--portrait { width: calc(var(--photo-height) * 3 / 4); }
.photo-gallery__card--landscape {
  width: calc(var(--photo-height) * 4 / 3);
  scroll-snap-align: center;
}

.photo-gallery__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-gallery__track:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .portfolio-page {
    --page-unit: 1px;
    min-height: 100dvh;
    padding: 24px 16px;
  }

  .page-frame { width: 100%; height: auto; }
  .page-header,
  .photo-gallery__header { width: 100%; height: 24px; margin: 8px 0 8px; }
  .page-back { left: -15px; }
}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .photos-page {
    --page-unit: 1px;
    align-items: start;
    padding-top: max(24px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .photo-gallery { width: 100%; height: auto; }
  .photo-gallery__header { width: 100%; height: 24px; margin: 8px 0; }
  .photo-gallery__carousel { display: block; height: auto; }
  .photo-gallery__viewport { height: auto; padding: 0; }
  .photo-gallery__arrow { display: none; }

  .photo-gallery__track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    height: auto;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .photo-gallery__card { min-width: 0; width: 100%; height: auto; }
  .photo-gallery__card--portrait { aspect-ratio: 3 / 4; }
  .photo-gallery__card--landscape { aspect-ratio: 4 / 3; }
  .photo-gallery__card img { object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-gallery__track,
  .project-gallery__track { scroll-behavior: auto; }
}

.photo-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
}

.photo-gallery__open:hover,
.photo-gallery__open:active,
.photo-gallery__open:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: -2px;
}

html.photo-viewer-open,
html.photo-viewer-open body { overflow: hidden; }

.photo-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.photo-viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-viewer::backdrop { background: rgb(0 0 0 / 86%); }

.photo-viewer__image {
  display: block;
  flex: none;
  object-fit: contain;
}

.photo-viewer__image[hidden] { display: none; }
.photo-viewer--landscape .photo-viewer__image { transform: rotate(90deg); }

.photo-viewer__close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 55%);
  color: var(--white);
  font: 400 32px/1 var(--font-secondary);
  cursor: pointer;
}

.photo-viewer__close:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: 3px;
}

.photo-viewer__close:hover,
.photo-viewer__close:active,
.photo-viewer__close:focus-visible {
  color: var(--interaction);
}



.portfolio-page--projects {
  --page-unit: min(1px, calc((100vw - 48px) / 1300), calc((100dvh - 48px) / 957));
  grid-template-columns: minmax(0, 1fr);
}

.project-gallery {
  position: relative;
  min-width: 0;
  height: auto;
  padding-block: calc(32 * var(--page-unit));
  border-left: 1px solid rgb(247 245 245 / 35%);
}

.project-gallery__titles {
  display: flex;
  flex: none;
  width: calc(1160 * var(--page-unit));
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.project-gallery__titles::-webkit-scrollbar { display: none; }
.project-gallery__titles[hidden],
.project-menu-toggle[hidden] { display: none; }

.project-menu-toggle { display: none; }
.project-menu-toggle__icon {
  display: block;
  width: 20px;
  height: 14px;
  background-color: currentColor;
  mask: url("../asstes/site-graphics/project-menu.svg") center / contain no-repeat;
}

.project-gallery__title {
  flex: 1 0 0;
  min-width: 0;
  min-height: calc(44 * var(--page-unit));
  padding: 8px;
  border: 0;
  border-bottom: 1px solid rgb(247 245 245 / 20%);
  background: transparent;
  color: var(--white);
  font-family: var(--font-primary);
  font-size: max(10px, calc(12 * var(--page-unit)));
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
}
.project-gallery__title:hover,
.project-gallery__title:active,
.project-gallery__title:focus-visible { color: var(--interaction); }
.project-gallery__title[aria-selected="true"] {
  border-bottom-color: var(--interaction);
  color: var(--interaction);
}
.project-gallery__title:focus-visible {
  outline: 2px solid var(--interaction);
  outline-offset: -3px;
}

.project-gallery__status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.project-gallery__carousel {
  width: calc(1200 * var(--page-unit));
  max-width: 100%;
  min-height: calc(797 * var(--page-unit));
}

.project-gallery__track {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.project-gallery__track::-webkit-scrollbar { display: none; }

.project-slide {
  display: grid;
  grid-template-columns: calc(447 * var(--page-unit)) minmax(0, 1fr);
  align-items: center;
  gap: calc(62 * var(--page-unit));
  flex: 0 0 100%;
  min-width: 0;
  min-height: calc(797 * var(--page-unit));
  padding: calc(15 * var(--page-unit)) calc(10 * var(--page-unit));
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.project-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-inline: calc(32 * var(--page-unit));
  color: var(--white);
}

.project-copy { min-width: 0; }
.project-copy__title { display: none; }

.project-description h2 {
  max-width: calc(336 * var(--page-unit));
  margin: 0 0 calc(24 * var(--page-unit));
  font-size: calc(24 * var(--page-unit));
  line-height: normal;
  color: var(--white);
}

.project-description p {
  max-width: calc(336 * var(--page-unit));
  margin: 0;
  font-size: calc(16 * var(--page-unit));
  line-height: 1.65;
}
.project-description p:last-child { margin-bottom: 0; }
.project-description .project-number {
  color: #de0004;
  font-family: var(--font-primary);
  font-size: calc(48 * var(--page-unit));
  font-weight: 700;
  line-height: 1;
}
.project-description .project-description__stack {
  margin-bottom: calc(20 * var(--page-unit));
  color: #ff686b;
  font-size: calc(12 * var(--page-unit));
  line-height: 1.6;
}

.project-image {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: calc(721 * var(--page-unit));
  overflow: hidden;
  border-radius: calc(20 * var(--page-unit));
  background: #222;
}
.project-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.85;
}

.project-image--website img { object-position: center top; }
.project-image--block { background-color: #eee9e1; }
.project-image--block img { object-fit: contain; }

.case-study {
  grid-template-columns: calc(488 * var(--page-unit)) calc(600 * var(--page-unit));
  align-items: start;
  gap: 0;
  padding: calc(20 * var(--page-unit));
}

.case-study__summary {
  display: flex;
  flex-direction: column;
  gap: calc(25 * var(--page-unit));
  min-width: 0;
}

.case-study__number {
  margin: 0;
  color: var(--interaction);
  font-family: var(--font-primary);
  font-size: calc(48 * var(--page-unit));
  font-weight: 700;
  line-height: normal;
}

.case-study__heading h2 {
  margin: 0;
  font-size: calc(24 * var(--page-unit));
  line-height: normal;
}

.case-study__showcase {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  height: calc(623 * var(--page-unit));
}

.case-study__metadata {
  display: flex;
  align-items: flex-start;
  gap: calc(50 * var(--page-unit));
  margin-top: calc(12 * var(--page-unit));
  padding-inline: calc(11 * var(--page-unit));
}
.case-study__metadata dl {
  display: flex;
  gap: calc(50 * var(--page-unit));
  margin: 0;
}
.case-study__metadata dt {
  font-family: var(--font-primary);
  font-size: calc(16 * var(--page-unit));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.case-study__metadata dd {
  margin: calc(12 * var(--page-unit)) 0 0;
  font-size: calc(12 * var(--page-unit));
  line-height: 1.25;
  color: var(--interaction);
}

.case-study__external-icon { display: block; }

.case-study__previews { display: flex; width: calc(600 * var(--page-unit)); }
.case-study__previews img {
  display: block;
  width: calc(200 * var(--page-unit));
  height: calc(422 * var(--page-unit));
  object-fit: cover;
}

.case-study__cards {
  display: grid;
  gap: calc(10 * var(--page-unit));
}
.case-study-card {
  min-width: 0;
  min-height: calc(221 * var(--page-unit));
  padding: calc(10 * var(--page-unit)) calc(16 * var(--page-unit)) calc(16 * var(--page-unit));
  background: #222;
}
.case-study-card:first-child { min-height: calc(240 * var(--page-unit)); }
.case-study-card h3 {
  display: flex;
  align-items: center;
  min-height: calc(32 * var(--page-unit));
  margin: 0 0 calc(16 * var(--page-unit));
  border-bottom: 1px solid var(--white);
  color: var(--interaction);
  font-size: calc(24 * var(--page-unit));
  line-height: 1.1;
}
.case-study-card p {
  margin: 0;
  padding: calc(5 * var(--page-unit));
  font-size: calc(18 * var(--page-unit));
  line-height: 1.25;
  color: var(--white);
}

/* Figma 244:105: shared UI/UX project composition. */
.ui-case {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(41 * var(--page-unit));
  padding: 0;
}
.ui-case--capture { gap: 0; }
.ui-case__details {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(15 * var(--page-unit));
  width: calc(508 * var(--page-unit));
  height: calc(652 * var(--page-unit));
  padding: calc(20 * var(--page-unit)) 0 0 calc(20 * var(--page-unit));
}
.ui-case__heading {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--page-unit));
  width: 100%;
  height: calc(137 * var(--page-unit));
  padding-bottom: calc(24 * var(--page-unit));
}
.ui-case__heading hgroup { flex: none; margin: 0; }
.ui-case__number {
  margin: 0;
  color: var(--interaction);
  font-family: var(--font-primary);
  font-size: calc(48 * var(--page-unit));
  font-weight: 700;
  line-height: normal;
}
.ui-case__heading h2 { margin: 0; font-size: calc(24 * var(--page-unit)); line-height: normal; }
.ui-case--capture .ui-case__heading { height: calc(121 * var(--page-unit)); }
.ui-case__metadata {
  position: relative;
  flex: none;
  width: calc(274 * var(--page-unit));
  padding: calc(1 * var(--page-unit)) calc(11 * var(--page-unit));
}
.ui-case__metadata dl {
  display: grid;
  grid-template-columns: calc(98 * var(--page-unit)) calc(128 * var(--page-unit));
  margin: 0;
}
.ui-case__metadata dt {
  font-family: var(--font-primary);
  font-size: calc(16 * var(--page-unit));
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.02em;
}
.ui-case__metadata dd {
  margin: calc(12 * var(--page-unit)) 0 0 calc(3 * var(--page-unit));
  color: var(--interaction);
  font-size: calc(12 * var(--page-unit));
  font-weight: 500;
  line-height: normal;
}
.ui-case__metadata dl > div:first-child dd { font-weight: 600; }
.ui-case__external {
  position: absolute;
  top: 0;
  left: calc(237 * var(--page-unit));
}
.ui-case__external img { display: block; }
.ui-case__text-sections {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10 * var(--page-unit));
  padding-top: calc(10 * var(--page-unit));
}
.ui-case__text-section {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(16 * var(--page-unit));
  width: calc(488 * var(--page-unit));
  min-height: calc(221 * var(--page-unit));
  padding: calc(10 * var(--page-unit)) calc(16 * var(--page-unit)) calc(16 * var(--page-unit));
  border: 0;
  background: transparent;
}
.ui-case__text-section:first-child { min-height: calc(240 * var(--page-unit)); }
.ui-case--capture .ui-case__text-section { background: #222; }
.ui-case:not(.ui-case--capture) .ui-case__text-section { border: 0.5px solid rgb(247 245 245 / 50%); }
.ui-case__text-section h3 {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: calc(32 * var(--page-unit));
  margin: 0;
  border-bottom: 1px solid var(--white);
  color: var(--interaction);
  font-size: calc(24 * var(--page-unit));
  line-height: normal;
}
.ui-case__text { width: 100%; padding: calc(5 * var(--page-unit)); }
.ui-case__text p { margin: 0; color: var(--white); font-size: calc(18 * var(--page-unit)); line-height: 1.25; }
.ui-case__screens {
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  gap: calc(12 * var(--page-unit));
  width: calc(624 * var(--page-unit));
  height: calc(623 * var(--page-unit));
}
.ui-case__screens img {
  display: block;
  flex: none;
  width: calc(195 * var(--page-unit));
  height: calc(411 * var(--page-unit));
  border-radius: calc(14 * var(--page-unit));
  object-fit: cover;
}
.ui-case__screens img:last-child { width: calc(194 * var(--page-unit)); height: calc(409.34 * var(--page-unit)); }
.ui-case__screens--capture {
  width: calc(600 * var(--page-unit));
  gap: 0;
}
.ui-case__screens--capture img,
.ui-case__screens--capture img:last-child {
  width: calc(200 * var(--page-unit));
  height: calc(422 * var(--page-unit));
  border-radius: 0;
}
.ui-case__screens--website { height: calc(652 * var(--page-unit)); }
.ui-case__screens--wide img,
.ui-case__screens--wide img:last-child {
  width: calc(624 * var(--page-unit));
  height: calc(472 * var(--page-unit));
  border-radius: 0;
  object-fit: contain;
}

@media (max-width: 900px) {
  .portfolio-page--projects { --page-unit: 1px; align-items: start; }
  .portfolio-page--projects { padding: 50px 16px; }
  .project-gallery { height: auto; gap: 30px; padding-block: 0; border-left: 0; }
  .project-gallery .page-header {
    justify-content: center;
    width: 350px;
    max-width: 100%;
    height: 24px;
    margin: 0;
    padding-inline: 20px;
  }
  .project-gallery .page-header h1 { font-size: 20px; line-height: 1.2; }
  .project-gallery .page-back { left: 5px; }
  .project-menu-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    transform: translateY(-50%);
    cursor: pointer;
  }
  .project-menu-toggle:hover,
  .project-menu-toggle:active,
  .project-menu-toggle:focus-visible,
  .project-menu-toggle[aria-expanded="true"] { color: var(--interaction); }
  .project-menu-toggle:focus-visible { outline: 2px solid var(--interaction); outline-offset: 2px; }
  .project-gallery__titles {
    position: absolute;
    top: 42px;
    left: 50%;
    z-index: 3;
    flex-direction: column;
    width: min(350px, 100%);
    max-height: calc(100dvh - 124px);
    padding: 8px;
    border: 1px solid rgb(247 245 245 / 20%);
    border-radius: 12px;
    background: #222;
    box-shadow: 0 16px 36px rgb(0 0 0 / 45%);
    overflow-y: auto;
    transform: translateX(-50%);
  }
  .project-gallery__title {
    flex: none;
    width: 100%;
    min-height: 48px;
    padding: 12px;
    font-size: 14px;
    text-align: left;
  }
  .project-gallery__carousel {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .project-gallery__track { align-items: start; }
  .project-slide { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; gap: 20px; padding: 15px 10px; }
  .project-description { display: contents; }
  .project-heading { order: 0; padding-bottom: 24px; }
  .project-description .project-number { font-size: 48px; line-height: normal; }
  .project-description h2 { margin: 0; font-size: 24px; line-height: normal; }
  .project-description h2,
  .project-description p { max-width: none; }
  .project-image { order: 1; height: auto; aspect-ratio: 1; border: 1px solid var(--white); border-radius: 20px; }
  .project-copy { order: 2; margin-top: 20px; }
  .project-copy__title {
    display: block;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
  }
  .project-copy p { max-width: 336px; font-size: 16px; line-height: 1.65; }
  .project-copy p + p { margin-top: 26.4px; }
  .project-copy .project-description__stack { margin-bottom: 0; }
  .case-study { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 15px 10px; }
  .case-study__summary { display: contents; }
  .case-study__heading { order: 0; padding-bottom: 0; }
  .case-study__showcase { order: 1; width: 100%; height: auto; padding: 0; }
  .case-study__metadata { padding-inline: 0; }
  .case-study__previews { width: 100%; max-width: 600px; }
  .case-study__previews img { width: 33.333333%; height: auto; aspect-ratio: 200 / 422; }
  .case-study__cards { order: 2; grid-template-columns: 1fr; gap: 16px; width: 100%; }
  .case-study-card,
  .case-study-card:first-child { min-height: 0; }
  .case-study-card p { font-size: 16px; line-height: 1.5; }
  .ui-case { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 15px 10px; }
  .ui-case__details { display: contents; }
  .ui-case__heading { order: 0; height: auto; padding: 0; }
  .ui-case--capture .ui-case__heading { height: auto; }
  .ui-case__text-sections { order: 2; width: 100%; gap: 16px; padding-top: 0; }
  .ui-case__text-section,
  .ui-case__text-section:first-child { width: 100%; min-height: 0; }
  .ui-case__text p { font-size: 16px; line-height: 1.5; }
  .ui-case__screens {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: 1;
    align-items: end;
    width: 100%;
    max-width: 624px;
    height: auto;
    gap: 12px;
    justify-self: center;
  }
  .ui-case__screens img { width: 100%; height: auto; aspect-ratio: 195 / 411; }
  .ui-case__screens img:last-child { width: 100%; height: auto; aspect-ratio: 194 / 409.34; }
  .ui-case__screens--capture { gap: 0; }
  .ui-case__screens--capture img,
  .ui-case__screens--capture img:last-child { width: 100%; height: auto; aspect-ratio: 200 / 422; }
  .ui-case__screens--wide { display: block; }
  .ui-case__screens--wide img,
  .ui-case__screens--wide img:last-child { width: 100%; height: auto; aspect-ratio: 624 / 472; }

  .project-gallery--ui .project-menu-toggle,
  .project-gallery--ui .project-gallery__titles { display: none; }
  .project-gallery--ui .project-gallery__track {
    flex-direction: column;
    gap: 64px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .project-gallery--ui .project-slide {
    flex: 0 0 auto;
    width: 100%;
    scroll-snap-align: none;
  }
}

@media (max-width: 600px) {
  .case-study__cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery__track { scroll-behavior: auto; }
}