/* ============================================
   CINDY CAO PORTFOLIO - Main Stylesheet
   ============================================ */


/* ── PP Neue York ── */
@font-face {
  font-family: 'PP Neue York';
  src: url('Assets/fonts/PPNeueYork-NormalLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'PP Neue York';
  src: url('Assets/fonts/PPNeueYork-NormalLightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'PP Neue York';
  src: url('Assets/fonts/PPNeueYork-NormalMedium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'PP Neue York';
  src: url('Assets/fonts/PPNeueYork-NormalMediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'PP Neue York';
  src: url('Assets/fonts/PPNeueYork-NormalExtrabold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'PP Neue York';
  src: url('Assets/fonts/PPNeueYork-NormalExtraboldItalic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-y;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'PP Neue York', Georgia, serif;
  background: #fdf8f3;
  color: #000000;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

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


/* ============================================
   Page Layout — Sticky Split
   ============================================ */
.page-layout {
  display: grid;
  grid-template-columns: 420fr 1020fr;
  height: 100vh;
  overflow: hidden;
  max-width: 100vw;
}

/* LEFT: sticky sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: #f7e6d2;
  box-shadow: 4px 4px 5.4px 0.5px #904e72;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
}

/* RIGHT: scrollable content */
.main-content {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2.5rem;
  background: #fdf8f3;
  touch-action: pan-y;
}

.main-content::-webkit-scrollbar { display: none; }
.main-content { scrollbar-width: none; }


/* ============================================
   Sidebar Video
   ============================================ */
.sidebar-video-wrap {
  flex: 0 0 auto;
  padding: 20px 10% 20px;
  display: flex;
  align-items: stretch;
}

.sidebar-video {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  flex: 1;
}

.sidebar-video video {
  width: 100%;
  height: auto;
  display: block;
}


/* Camera overlay */
.cam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px;
  pointer-events: none;
}

.cam-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cam-battery {
  width: 22px;
  height: 12px;
  border: 1.5px solid #fff;
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 2px;
}

.cam-battery::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 6px;
  background: #fff;
  border-radius: 0 1px 1px 0;
}

.cam-battery-bar {
  width: 70%;
  height: 100%;
  background: #fff;
  border-radius: 1px;
}

.cam-rec {
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.05em;
  font-family: 'PP Neue York', monospace;
}

.cam-dot {
  color: #ff3b30;
}

.cam-corners {
  position: absolute;
  inset: 28% 20%;
}

.cam-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: #fff;
  border-style: solid;
  opacity: 0.9;
}

.cam-tl { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; }
.cam-tr { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; }
.cam-bl { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; }
.cam-br { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; }

.cam-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cam-spec {
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.04em;
  font-family: 'PP Neue York', monospace;
}


/* ============================================
   Sidebar Bio
   ============================================ */
.sidebar-bio {
  padding: 0px 10% 16px;
  flex-shrink: 0;
}

.bio-text {
  font-weight: 500;
  line-height: 1.4;
  color: #6a7151;
  margin-bottom: 0.75rem;
}

/* Tagline */
.bio-tagline {
  text-align: center;
}

.bio-tagline p {
  font-weight: 500;
  line-height: 1.4;
  color: #291d6d;
}

.tagline-gold, .tagline-pink, .tagline-green { color: #291d6d; }
.tagline-line { color: #291d6d; }

.bio-contact {
  margin-top: 1.25rem;
}

.bio-contact-line {
  font-size: clamp(8px, calc(5.6px + 0.51vw), 13px);
  font-weight: 500;
  line-height: 1.6;
  color: #6a7151;
}

.bio-contact-line a {
  color: #6a7151;
  text-decoration: none;
}

.highlight-pink  { color: #d64080; }
.highlight-orange { color: #e07050; }
.highlight-teal  { color: #2a9d8f; }


/* ============================================
   Main Header — right panel
   ============================================ */
.site-title-link {
  text-decoration: none;
  color: inherit;
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fdf8f3;
  padding: 0.75rem 0 0.5rem;
  margin-bottom: 0;
  text-align: center;
}

.site-title {
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6a7151;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 0.15rem;
}

.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 0;
}

.main-nav-link {
  font-size: 12px;
  font-weight: 500;
  color: #914E72;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}

.main-nav-link:hover {
  color: #6a7151;
}


/* ============================================
   Project Cards — large image + caption
   ============================================ */
.projects {
  display: flex;
  flex-direction: column;
  gap: 7rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.project-link {
  display: block;
  width: 92%;
  margin: 0 auto;
  text-decoration: none;
}

.project-link--sm {
  width: 72%;
}

/* Oysters hover image swap */
.oysters-hover {
  position: relative;
}
.oysters-img-default,
.oysters-img-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.oysters-img-hover {
  opacity: 0;
}
.oysters-hover:hover .oysters-img-default {
  opacity: 0;
}
.oysters-hover:hover .oysters-img-hover {
  opacity: 1;
}

.project-image {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  transition: opacity 0.25s;
}

.project-image img,
.project-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-link:hover .project-image,
.project-link:hover .kb-collage,
.project-link:hover .ummi-collage,
.project-link:hover .duo-images {
  opacity: 0.88;
}

/* Branded Materials revolving slideshow */
/* 5 slides, each visible for 1.4s, total cycle = 7s */
.branded-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: branded-fade 7s infinite;
}

@keyframes branded-fade {
  0%      { opacity: 0; }
  5%      { opacity: 1; }
  20%     { opacity: 1; }
  25%     { opacity: 0; }
  100%    { opacity: 0; }
}

.project-caption {
  text-align: center;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Kate Barton collage card */
.project-card--kb .kb-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  background: transparent;
  overflow: visible;
}

.kb-photo {
  position: absolute;
  width: 28%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  will-change: transform;
}

/* Top-left: KB1 */
.kb-photo--1 {
  top: 4%;
  left: 4%;
  transform: rotate(-7deg) translateY(0px);
  z-index: 2;
}

/* Top-right: KB2 */
.kb-photo--2 {
  top: 3%;
  right: 3%;
  transform: rotate(5deg) translateY(0px);
  z-index: 2;
}

/* Bottom-left: KB3 */
.kb-photo--3 {
  bottom: 4%;
  left: 9%;
  transform: rotate(-4deg) translateY(0px);
  z-index: 3;
}

/* Bottom-right: KB4 */
.kb-photo--4 {
  bottom: 3%;
  right: 7%;
  transform: rotate(7deg) translateY(0px);
  z-index: 3;
}

/* Emblem centered over the collage */
.kb-emblem-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.kb-emblem-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* 3D tube container */
.tube-3d-container {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 4px;
  overflow: hidden;
  background: #fdf8f3;
}
.tube-3d-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Duo image layout — overlapping angled cards */
.project-card--duo { gap: 1rem; }

.duo-images {
  position: relative;
  width: 100%;
  aspect-ratio: 5/3;
  margin-bottom: clamp(1.5rem, 12%, 6rem);
  overflow: visible;
}

.duo-img {
  position: absolute;
  width: 48%;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.16);
  will-change: transform, opacity;
}

.duo-img--left {
  left: 4%;
  top: 5%;
  transform: rotate(-4deg);
  z-index: 1;
}

.duo-img--right {
  right: 4%;
  top: 12%;
  transform: rotate(3deg);
  z-index: 2;
}

.caption-desc {
  font-size: 17px;
  font-weight: 700;
  color: #914E72;
  line-height: 1.5;
}

.caption-year {
  font-size: 13px;
  font-weight: 500;
  color: #697150;
  margin-top: 2px;
}


/* ============================================
   UMMI MSG Collage
   ============================================ */
.ummi-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 658/461;
  overflow: visible;
  background: transparent;
}

.ummi-item {
  position: absolute;
  border-radius: 8px;
  will-change: transform;
}

/* Photo: inner (portrait, left of tube) */
.ummi-photo-inner {
  left: 23.25%;
  top: 10.63%;
  width: 13.03%;
  aspect-ratio: 85.76/128.6;
  transform: rotate(10.48deg);
  z-index: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Photo: outer (landscape, right of tube) */
.ummi-photo-outer {
  left: 64.74%;
  top: 39.05%;
  width: 21.43%;
  aspect-ratio: 141/101;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Illustration drawing (bottom right) */
.ummi-drawing {
  left: 57.90%;
  top: 54.66%;
  width: 14.74%;
  aspect-ratio: 97/135;
  transform: rotate(-13.14deg);
  z-index: 6;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Keychain GIFs — natural aspect ratio, no stretching */
.ummi-keychain-1 {
  left: 2%;
  top: 38%;
  width: 33.75%;
  height: auto;
  transform: rotate(6.9deg);
  z-index: 3;
  border-radius: 0;
}

.ummi-keychain-2 {
  left: 43%;
  top: -18%;
  width: 37.5%;
  height: auto;
  transform: rotate(70deg);
  z-index: 3;
  border-radius: 0;
}

/* Stickers (shared hover logic) */
.ummi-sticker {
  position: absolute;
  cursor: pointer;
  z-index: 4;
}

.ummi-sticker img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.35s ease;
}

.ummi-sticker .sticker-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.ummi-sticker:hover .sticker-default {
  opacity: 0;
}

.ummi-sticker:hover .sticker-hover {
  opacity: 1;
}

/* "Yes I season my food" circle sticker */
.ummi-sticker--season {
  left: 23.86%;
  top: 47.29%;
  width: 14.47%;
  transform: rotate(13.14deg);
}

/* "Taste More" circle sticker */
.ummi-sticker--tm {
  left: 65.35%;
  top: 16.27%;
  width: 13.68%;
}

/* Condiments sticker (top left) */
.ummi-sticker--condiments {
  left: 6.08%;
  top: 27.96%;
  width: 17.02%;
  z-index: 5;
  transform: rotate(-18.9deg);
}

/* Spinning tube — center stage, big */
.ummi-collage .tube-3d-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  aspect-ratio: 3/4;
  z-index: 20;
  background: transparent;
}

/* ============================================
   Archives
   ============================================ */
.archives-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 1rem 0 1.5rem;
}
.archives-divider::before,
.archives-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.15);
}
.archives-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  font-weight: 300;
  white-space: nowrap;
}
/* Archive groups — scattered collage layout */
.archives-groups {
  display: flex;
  flex-direction: column;
  gap: 6rem;
  margin-bottom: 4rem;
}

.archive-group {
  width: 100%;
}

.archive-scatter {
  position: relative;
  width: 80%;
  margin: 0 auto;
  aspect-ratio: 5/3.2;
}

.archive-img {
  position: absolute;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.archive-img:hover {
  transform: scale(1.03);
  z-index: 5;
}

/* The Colour Red — 4-image scatter */
.a-img--1 {
  width: 42%;
  top: -8%;
  left: 8%;
  transform: rotate(-3deg);
  z-index: 2;
}

.a-img--2 {
  width: 37%;
  top: -5%;
  right: 8%;
  transform: rotate(2deg);
  z-index: 1;
}

.a-img--3 {
  width: 35%;
  bottom: 2%;
  left: 18%;
  transform: rotate(1.5deg);
  z-index: 3;
}

.a-img--4 {
  width: 39%;
  bottom: -2%;
  right: 10%;
  transform: rotate(-2deg);
  z-index: 2;
}

/* Single archive image */
.archive-group--single {
  display: flex;
  justify-content: center;
}

.archive-single-img {
  position: relative;
  width: 55%;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: rotate(-1.5deg);
  transition: transform 0.3s ease;
}

.archive-single-img:hover {
  transform: rotate(-1.5deg) scale(1.03);
  z-index: 5;
}

/* Cards group: absolute positioned to match Figma layout */
.archive-group--cards {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 2159/1457;
}


.archive-pair-img {
  position: absolute;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.archive-pair--1 {
  width: 36.25%;
  left: 16%;
  top: 14%;
  transform: rotate(2.46deg);
  z-index: 2;
}

.archive-pair--2 {
  width: 37.1%;
  left: 13.8%;
  top: 45%;
  transform: rotate(-2.63deg);
  z-index: 1;
}

.archive-pair-img:hover {
  z-index: 5;
  transform: scale(1.03);
}

.fan-card {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.fan-card--1 {
  width: 15.1%;
  left: 52%;
  top: 14%;
  transform: rotate(-16deg);
  z-index: 1;
}

.fan-card--2 {
  width: 15.1%;
  left: 54.1%;
  top: 16.6%;
  transform: rotate(-12.09deg);
  z-index: 2;
}

.fan-card--3 {
  width: 15.1%;
  left: 55.5%;
  top: 17.6%;
  transform: rotate(-3.4deg);
  z-index: 3;
}

.fan-card--4 {
  width: 15.1%;
  left: 55.9%;
  top: 17.6%;
  transform: rotate(7.02deg);
  z-index: 4;
}

.fan-card:hover,
.fan-card-flip:hover {
  z-index: 10;
}

/* Card 4 flip animation */
.fan-card-flip {
  overflow: visible;
  background: none;
  box-shadow: none;
  perspective: 800px;
}

.fan-card-flip-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.fan-card-face {
  width: 100%;
  display: block;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backface-visibility: hidden;
}

.fan-card-front {
  position: relative;
}

.fan-card-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}

.archive-group--cards:hover .fan-card-flip-inner {
  transform: rotateY(180deg);
}


/* ── Lightbox ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-overlay img {
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.lightbox-overlay.is-open img {
  transform: scale(1);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  padding: 3rem 0 2rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid #914E72;
}

.footer-label { font-size: 11px; color: #914E72; margin-bottom: 4px; }

.footer-email { font-size: 16px; color: #e07050; transition: color 0.2s; }
.footer-email:hover { color: #d64080; }

.footer-links { display: flex; gap: 18px; }
.footer-links a { font-size: 12px; color: #914E72; transition: color 0.2s; }
.footer-links a:hover { color: #6a7151; }


/* ============================================
   Project Page
   ============================================ */
.project-header { padding: 2rem 0 3rem; border-bottom: 1px solid rgba(0,0,0,0.1); }
.project-meta { font-size: 10px; letter-spacing: 0.15em; color: #999; text-transform: uppercase; margin: 0 0 12px; }
.project-page-title { font-size: 34px; font-weight: 500; color: #000; margin: 0 0 14px; letter-spacing: -0.02em; line-height: 1.15; }
.project-question { font-size: 18px; color: #555; margin: 0; line-height: 1.5; max-width: 580px; }
.project-hero { margin: 2.5rem 0; }
.project-hero img { width: 100%; border-radius: 10px; }
.project-text { max-width: 600px; margin: 0 auto; padding: 2rem 0; }
.text-label { font-size: 10px; letter-spacing: 0.15em; color: #999; text-transform: uppercase; margin: 0 0 14px; }
.text-body { font-size: 16px; line-height: 1.7; color: #000; margin: 0 0 1.5rem; }
.text-body:last-child { margin-bottom: 0; }
.project-images { margin: 2rem 0; }
.image-full img { width: 100%; border-radius: 10px; }
.image-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.image-grid-2 img { width: 100%; border-radius: 8px; }
.image-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.image-grid-3 img { width: 100%; border-radius: 8px; }
.project-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4rem 0 2rem; padding-top: 2rem; border-top: 1px solid #000; }
.project-nav-link { padding: 1.25rem; background: rgba(0,0,0,0.04); border-radius: 10px; transition: background 0.2s; }
.project-nav-link:hover { background: rgba(0,0,0,0.08); }
.project-nav-next { text-align: right; }
.nav-direction { font-size: 10px; letter-spacing: 0.12em; color: #999; text-transform: uppercase; margin: 0 0 6px; }
.nav-title { font-size: 15px; font-weight: 500; color: #000; margin: 0; }


/* ============================================
   Responsive — fluid scaling, no jumps
   ============================================ */

/* Bio text: 13px at 1440px → 8px at 320px */
.bio-text {
  font-size: clamp(8px, calc(5.6px + 0.51vw), 13px);
}
.bio-tagline p {
  font-size: clamp(8px, calc(5.6px + 0.51vw), 13px);
}

/* Site title: 48px at 1440px → 18px at 320px */
.site-title {
  font-size: clamp(18px, calc(12px + 2.5vw), 48px);
}

/* Nav links: 14px at 1440px → 9px at 320px */
.main-nav-link {
  font-size: clamp(9px, calc(7.5px + 0.45vw), 14px);
}

/* Project title: 20px at 1440px → 12px at 320px */
.project-title {
  font-size: clamp(12px, calc(9.5px + 0.73vw), 20px);
  color: #914E72;
}

/* Project tags/year/desc */
.project-tags, .project-year {
  font-size: clamp(8px, calc(6.5px + 0.35vw), 11px);
}

.project-desc {
  font-size: clamp(10px, calc(8.5px + 0.45vw), 14px);
}

@media (max-width: 640px) {
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* ============================================
   Mobile — hide sidebar, full-width content
   ============================================ */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .main-content {
    height: 100vh;
    width: 100%;
  }

  .projects {
    gap: 0.75rem;
  }

  .project-link {
    width: 100%;
  }

  .project-link--sm {
    width: 90%;
  }

  .site-title {
    font-size: 28px;
  }

  .main-nav-link {
    font-size: 15px;
  }

  .project-card--ummi .project-caption {
    margin-top: -4rem;
  }

  .project-card--duo .project-caption {
    margin-top: -4rem;
  }

  /* Images 150% taller on mobile */
  .project-image {
    aspect-ratio: 4 / 4.5;
  }

  .project-card--kb .kb-collage {
    aspect-ratio: 4 / 4.5;
  }

  .kb-photo {
    width: 40%;
  }

  .kb-photo--1 {
    top: 8%;
    left: 8%;
    transform: rotate(-5deg);
  }

  .kb-photo--2 {
    top: 6%;
    right: 8%;
    transform: rotate(4deg);
  }

  .kb-photo--3 {
    bottom: 6%;
    left: 10%;
    transform: rotate(-3deg);
  }

  .kb-photo--4 {
    bottom: 5%;
    right: 8%;
    transform: rotate(5deg);
  }

  .duo-images {
    aspect-ratio: 5 / 4.5;
  }

  .ummi-collage {
    aspect-ratio: 658 / 691.5;
  }

  .ummi-collage .tube-3d-container {
    width: 60%;
    top: 40%;
  }

  .caption-desc {
    font-size: 13px;
  }

  .caption-year {
    font-size: 10px;
  }

  .project-card + .project-card {
    border-top: 1px solid #914E72;
    padding-top: 0.75rem;
  }

  .archives-groups {
    gap: 2rem;
    margin-bottom: 1rem;
  }

  .archives-divider::before,
  .archives-divider::after {
    background: #914E72;
  }

  .archives-divider {
    margin: 0.5rem 0 1rem;
  }
}