/* 
  Tahel Shilgi Portfolio Core Stylesheet
  Design System: Minimal, Editorial, Confident, Spacious, High-end.
*/

:root {
  --bg-color: #f3f1ed; /* Pale warm gray / off-white background */
  --text-color: #000000;
  
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  
  --header-padding-desktop: 48px;
  --header-padding-mobile: 24px;
  --footer-padding-desktop: 48px;
  --footer-padding-mobile: 24px;
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Links & Interactive Elements */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: 0.7;
}

/* -----------------------------------------
   Decorative Pink Script Graphic
   ----------------------------------------- */
.pink-script-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1; /* Sits behind the text content but above background color */
}

.pink-script {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform: scale(1.05); /* Slight enlargement to crop nicely */
  opacity: 0.95;
  filter: blur(var(--pink-blur, 0px));
  transition: filter 0.1s linear; /* soft micro-transition to keep scroll rendering fluid */
}

/* -----------------------------------------
   Hero Layout (100vh)
   ----------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--header-padding-desktop) 56px var(--footer-padding-desktop) 56px;
  z-index: 2; /* Sits above the pink script background layer */
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 48px 56px;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  z-index: 50; /* Float above all content and background layers */
}

.logo a {
  font-weight: 600;
}

.nav {
  display: flex;
  gap: 32px;
}

.nav-link {
  position: relative;
}

/* Subtle under-line animation for navigation links */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--text-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Hero Body Section */
.hero-body {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Central Serif Headline */
.headline {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 400;
  line-height: 1.05;
  text-align: left; /* Aligned left to keep starting positions locked */
  color: var(--text-color);
  max-width: 860px; /* Bounding box remains stable at maximum width to fit long words */
  width: 100%;
  user-select: none;
  z-index: 5;

  /* Center the second line 'creating with' mathematically in the viewport center */
  position: absolute;
  left: calc(50% - 5.5ch); /* Offset by half of the visual width of the second line */
  top: 50%;
  transform: translateY(-50%); /* Align vertical center only to keep horizontal locked */
}

.last-line {
  white-space: nowrap; /* Lock the rotating phrase on a single line */
}

/* Rotating word container styling */
.rotating-word {
  display: inline-block;
  font-style: italic;
  white-space: nowrap;
  position: relative;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: 0% 100%; /* Pivot transitions from bottom-left */
}

.rotating-word.fade-out {
  opacity: 0;
  transform: translateY(2px); /* Very subtle quiet visual shift */
}

.rotating-word.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Left Side Text Block (About Link) */
.left-block {
  position: absolute;
  left: 0;
  top: 52%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 180px;
  text-decoration: none;
  color: var(--text-color);
  z-index: 10;
}

.block-text {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.15em;
  font-weight: 500;
}

.arrow-icon {
  font-size: 16px;
  font-weight: 300;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.left-block:hover .arrow-icon {
  transform: translateX(8px);
}

/* Right Side Categories List */
.right-block {
  position: absolute;
  right: 0;
  top: 52%;
  transform: translateY(-50%);
  max-width: 220px;
  z-index: 10;
}

.categories-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.categories-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.categories-list .num {
  font-weight: 400;
  opacity: 0.4;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.categories-list .cat-label {
  position: relative;
}

.categories-list .cat-label::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--text-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.categories-list .cat-label:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Bottom Footer Row */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  z-index: 10;
}

.scroll-explore {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.scroll-text {
  font-size: 10px;
}

.scroll-arrow {
  font-size: 14px;
  animation: bounce 2s infinite ease-in-out;
}

.social-links {
  display: flex;
  gap: 28px;
}

/* Scroll Arrow bounce keyframes */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}


/* -----------------------------------------
   Sub-sections: Work & About (Placeholders)
   ----------------------------------------- */
.section {
  position: relative;
  min-height: 100vh;
  padding: 120px 80px;
  z-index: 3;
  background-color: transparent; /* Transparent to let the blurred fixed background show through */
  border-top: none; /* Continuous visual flow without dividing border lines */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Work Section Layout */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.project-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;

  /* Scroll-progress driven reveal initial state */
  opacity: 0;
  transform: translateY(56px);
  will-change: opacity, transform; /* GPU acceleration for liquid-smooth scrolling */
}

.project-image-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease;
}

.project-image-placeholder img,
.project-image-placeholder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-image-placeholder img.active,
.project-image-placeholder video.active {
  opacity: 1;
  z-index: 2;
}

/* Elegant clean sans-serif categories acting as captions under the placeholders */
.project-category-caption {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 11px; /* Matches exact navigation & UI typography scale */
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-color);
  display: flex;
  gap: 12px;
  align-items: center;
  transition: transform 0.4s ease;
}

.project-category-caption .num {
  opacity: 0.4;
  font-weight: 400;
}

.project-category-caption .label {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-category-caption .arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.project-card:hover .project-image-placeholder {
  border-color: rgba(0, 0, 0, 0.2);
}

.project-card:hover .project-image-placeholder img,
.project-card:hover .project-image-placeholder video {
  transform: scale(1.03);
}

.project-card:hover .project-category-caption {
  transform: translateY(-1px); /* extremely subtle transition for high-end feel */
}

.project-card:hover .project-category-caption .arrow {
  transform: translate(3px, -3px); /* elegant text arrow shift on hover */
}

/* About Section Layout */
.about-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: 48px; /* Sizable gap to let the composition breathe */
}

/* Editorial Headline Composition */
.editorial-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.intro-phrase {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 32px);
  font-style: normal; /* Confidently regular, non-italic */
  font-weight: 400;
  color: var(--text-color); /* Solid black */
  line-height: 1.2;
  margin-bottom: 4px;
}

.hero-name {
  font-family: var(--font-serif);
  font-size: clamp(80px, 10vw, 144px); /* Giant focal anchor word */
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--text-color);
  margin: 0;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.finisher-phrase {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 48px); /* Slightly larger for stronger composition presence */
  font-style: italic; /* slanting finisher gesture */
  font-weight: 300;
  color: var(--text-color); /* Solid black */
  margin-bottom: 12px; /* Align slightly above baseline for editorial rhythm */
}

.bio-text {
  font-size: 14px; /* Refined editorial character scale */
  line-height: 1.7;
  opacity: 0.7;
  max-width: 420px; /* Narrower visual column shape */
  margin-left: 24%; /* Tucked inward to align with diagonal negative space */
  position: relative;
  overflow: visible;
  z-index: 20;
}

/* Right Column Visual (tahel.gif) */
.about-gif {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: -24px; /* Pull the visual slightly higher to vertically interlock with headline */
}

.about-gif img {
  width: 100%;
  max-width: 460px; /* Stronger portrait presence to balance left typography */
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.02);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Interactive magnetic repulsion glyph styling for About paragraph */
.bio-text .word {
  display: inline-block;
  white-space: nowrap;
}

.bio-text .glyph {
  display: inline-block;
  transition: transform 1.0s cubic-bezier(0.25, 1, 0.25, 1);
  will-change: transform;
}

/* Bottom Contact Call-to-Action (Aligned perfectly with tucked bio-text column) */
.about-contact {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 420px; /* Matches the exact tucked column width! */
  width: 100%;
  margin-left: 24%; /* Aligns perfectly under the bio-text left margin! */
}

.contact-prompt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0.4;
}

.about-contact-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-color);
}

.contact-link {
  position: relative;
  text-decoration: none;
  border-bottom: none;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

.contact-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--text-color);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.contact-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.contact-link:hover {
  border-bottom: none;
  opacity: 0.7;
}


/* -----------------------------------------
   Responsive Media Queries
   ----------------------------------------- */

/* Tablet Screens (under 1024px) */
@media (max-width: 1024px) {
  .hero {
    padding: 40px 40px 40px 40px;
  }
  
  .left-block {
    left: 0;
  }
  
  .right-block {
    right: 0;
  }
  
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  
  .about-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-gif {
    justify-content: flex-start;
    margin-top: 0; /* Reset desktop negative margins */
  }

  .bio-text {
    margin-left: 8%; /* Smaller tuck on tablet to optimize horizontal space */
  }

  .about-contact {
    margin-left: 8%; /* Align with bio-text on tablet */
    margin-top: 48px;
  }
}

/* Mobile & Small Tablets (under 768px) */
@media (max-width: 768px) {
  :root {
    --header-padding-desktop: 24px;
    --footer-padding-desktop: 24px;
  }

  .hero {
    height: auto;
    min-height: 100vh;
    padding: 88px 24px 32px 24px; /* reserved top padding for sticky header on mobile */
    justify-content: flex-start;
    gap: 60px;
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    background: transparent;
    z-index: 50;
    margin-bottom: 0;
  }

  .hero-body {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    gap: 48px;
    flex-grow: 1;
  }

  /* Center Large Serif Headline */
  .headline {
    position: static;
    transform: none;
    text-align: left;
    font-size: clamp(34px, 8vw, 56px);
    width: 100%;
    margin-bottom: 10px;
  }

  .last-line {
    white-space: normal; /* Allow wrapping on small mobile viewports to prevent overflow */
  }

  /* Stacked Side Blocks */
  .left-block, 
  .right-block {
    position: static;
    transform: none;
    max-width: 100%;
    width: 100%;
  }

  .left-block {
    order: 2;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 24px;
  }

  .right-block {
    order: 1;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 24px;
  }

  .categories-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 24px;
  }

  .categories-list li {
    font-size: 10px;
  }

  /* Bottom Footer Stack */
  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 32px;
  }

  .scroll-explore {
    order: 2;
  }

  .social-links {
    order: 1;
    width: 100%;
    justify-content: flex-start;
    gap: 32px;
  }

  /* Sub-sections styling on mobile */
  .section {
    padding: 80px 24px;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-bio {
    gap: 32px;
  }

  .intro-phrase {
    font-size: clamp(16px, 2.5vw, 24px);
  }

  .hero-name {
    font-size: clamp(48px, 9vw, 84px);
    gap: 8px;
    align-items: flex-end;
  }

  .finisher-phrase {
    font-size: clamp(22px, 4vw, 32px);
    margin-bottom: 4px;
  }

  .bio-text {
    margin-left: 4%; /* Smaller tuck on mobile for optimal reading space */
    max-width: 100%;
  }

  .about-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-gif img {
    max-width: 100%;
  }

  .about-contact {
    margin-top: 48px;
    gap: 16px;
    max-width: 100%;
    margin-left: 4%; /* Align with bio-text on mobile */
  }

  .about-contact-links {
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: flex-start; /* Align left when wrapped on mobile viewports */
  }
  
  /* Make decorative pink script less overpowering on mobile */
  .pink-script {
    opacity: 0.65;
    transform: scale(1.15) rotate(-5deg); /* Slight shift to ensure best composition on narrow aspect ratios */
  }
}

/* -----------------------------------------
   Dynamic Work Overlay (SPA View System)
   ----------------------------------------- */
.work-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-color); /* Warm pale gray matching site exactly */
  z-index: 200; /* Float above navigation, header, and everything else */
  pointer-events: none;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.65s;
  display: flex;
  flex-direction: column;
}

.work-overlay.active {
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

/* Scrollable overlay content wrapper */
.overlay-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 120px 80px; /* Airy editorial padding */
  -webkit-overflow-scrolling: touch; /* Butter-smooth scrolling on mobile Safari */
}

/* Minimalist Overlay Header (Fixed in Top Right) */
.overlay-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 48px 56px;
  display: flex;
  justify-content: flex-end; /* Align all actions to the top right */
  gap: 28px; /* Elegant gap between BACK and CLOSE */
  background: transparent;
  z-index: 210; /* Float above overlay content scroll bar */
  pointer-events: none; /* Let clicks pass through except buttons */
}

.back-overlay-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-color);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  padding: 8px 12px;
  display: none; /* Hidden by default in flex layout to not take space on category index */
  opacity: 0;
}

.back-overlay-btn.visible {
  display: block; /* Show inside the flex layout when visible */
  opacity: 1;
}

.back-overlay-btn:hover {
  opacity: 0.6;
}

.close-overlay-btn {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-color);
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  padding: 8px 12px;
}

.close-overlay-btn:hover {
  opacity: 0.6;
}

/* -----------------------------------------
   Category Index Grid Styles (Refined)
   ----------------------------------------- */
.category-view {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.category-title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--text-color);
  margin-bottom: 56px; /* Precise spacing before list begins immediately */
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.category-index-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 80px;
  align-items: start;
  width: 100%;
}

.category-project-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.project-row {
  display: flex;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15); /* Solid dark/black divider, never pink */
  cursor: pointer;
  position: relative;
  transition: padding-left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-row:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.15); /* First row top divider border */
}

.project-row:hover {
  padding-left: 16px;
}

.project-num {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  opacity: 0.4;
  margin-right: 40px;
  width: 24px;
}

.project-row-main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 6px;
}

.project-row-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-color);
  transition: opacity 0.3s ease;
}

.project-row:hover .project-row-title {
  opacity: 0.7;
}

.project-row-keywords {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-color);
  opacity: 0.4;
}

.project-row-thumbnail {
  display: none;
}

.project-row-arrow {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-left: 24px;
}

.project-row:hover .project-row-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Right-side Sticky Preview Collage */
.category-preview-panel {
  position: sticky;
  top: 160px;
  width: 100%;
}

.preview-media-collage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
}

.preview-item {
  position: absolute;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.03);
  background-color: rgba(0, 0, 0, 0.02);
  opacity: 0;
  transform: scale(0.97) translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.preview-item.loaded {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.preview-parallax-layer {
  width: 100%;
  height: 100%;
}

.preview-parallax-layer img,
.preview-parallax-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stack Layout A: Large center-left + bottom-right overlapping + top-left behind */
.stack-a .main-preview {
  width: 70%;
  height: 62%;
  left: 8%;
  top: 6%;
  z-index: 2;
  border: 3px solid var(--bg-color); /* Separates from background layers */
}
.stack-a .sub-preview-1 {
  width: 42%;
  height: 38%;
  right: 4%;
  bottom: 8%;
  z-index: 3;
  border: 4px solid var(--bg-color); /* Overlaps main preview in front */
}
.stack-a .sub-preview-2 {
  width: 34%;
  height: 30%;
  left: 0;
  bottom: 0;
  z-index: 1;
}

/* Stack Layout B: Tall Center-Right in front + Horizontal Shifted Behind + Tucked Lower-Left */
.stack-b .main-preview {
  width: 52%;
  height: 78%;
  left: 18%;
  top: 4%;
  z-index: 3;
  border: 4px solid var(--bg-color); /* Sits completely in front overlapping others */
}
.stack-b .sub-preview-1 {
  width: 58%;
  height: 45%;
  right: 0;
  top: 18%;
  z-index: 2;
  border: 3px solid var(--bg-color); /* Shifted behind main but in front of tucked */
}
.stack-b .sub-preview-2 {
  width: 36%;
  height: 34%;
  left: 2%;
  bottom: 4%;
  z-index: 1;
}

/* Stack Layout C: Horizontal in front + Vertical shifted right + Tucked Detail lower-left */
.stack-c .main-preview {
  width: 76%;
  height: 46%;
  left: 4%;
  top: 20%;
  z-index: 3;
  border: 4px solid var(--bg-color); /* Horizontal main layer in front */
}
.stack-c .sub-preview-1 {
  width: 44%;
  height: 56%;
  right: 2%;
  top: 6%;
  z-index: 2;
  border: 3px solid var(--bg-color); /* Vertical layer shifted right behind main */
}
.stack-c .sub-preview-2 {
  width: 34%;
  height: 32%;
  left: 0;
  bottom: 10%;
  z-index: 1;
}

/* Single Asset Layout Override (stretches to full box) */
.single-asset .main-preview {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  border: none !important;
  z-index: 10 !important;
}

/* Category Index exit transition */
.category-index-layout.leaving .category-title,
.category-index-layout.leaving .category-project-list {
  opacity: 0 !important;
  transform: translateY(-24px);
  transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1), transform 0.3s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

.category-index-layout.leaving .category-preview-panel {
  opacity: 0 !important;
  transform: translateY(24px);
  transition: opacity 0.3s cubic-bezier(0.77, 0, 0.175, 1), transform 0.3s cubic-bezier(0.77, 0, 0.175, 1) !important;
}

/* Tablet & Mobile Layout Shifts for Refined Category View */
@media (max-width: 1024px) {
  .category-index-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .category-preview-panel {
    position: relative;
    top: 0;
    margin-top: 24px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* -----------------------------------------
   Project Page Detail Styles
   ----------------------------------------- */
.project-view {
  max-width: 1100px; /* Spacious width for the two-column editorial design */
  margin: 0 auto; /* Standard centering before horizontal offset */
  width: 100%;
  opacity: 0;
  transform: translateY(48px) translateX(-120px); /* Pre-shifted left horizontally by 120px */
  clip-path: inset(12% 0 0 0);
  transition: opacity 0.75s cubic-bezier(0.77, 0, 0.175, 1),
              transform 0.75s cubic-bezier(0.77, 0, 0.175, 1),
              clip-path 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: opacity, transform, clip-path;
}

/* Project view container active entry state */
.project-view.is-entering {
  opacity: 1;
  transform: translateY(0) translateX(-120px); /* Pre-shifted left horizontally by 120px */
  clip-path: inset(0 0 0 0);
}

/* Project view container exit state */
.project-view.is-leaving {
  opacity: 0 !important;
  transform: translateY(32px) translateX(-120px) !important; /* Pre-shifted left horizontally by 120px */
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Staggered project page child elements styling */
.project-mobile-header,
.project-info,
.project-visuals {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.project-view.is-entering .project-mobile-header {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.project-view.is-entering .project-info {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}

.project-view.is-entering .project-visuals {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}

/* Redesigned Two-Column Editorial Layout */
.project-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(40px, 5vw, 80px);
  width: 100%;
  margin-top: 40px;
  align-items: start;
}

/* Mobile Header (Hidden on Desktop) */
.project-mobile-header {
  display: none;
}

/* Desktop Header */
.project-desktop-header {
  display: flex;
  flex-direction: column;
}

/* Sidebar Project Information */
.project-info {
  position: sticky;
  top: 120px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Project Visuals Column (Right Side) */
.project-visuals {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
}

/* Hero Media Styling (First Asset) */
.project-hero-media {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015);
  background-color: rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.project-hero-media img,
.project-hero-media video {
  width: 100%;
  height: auto;
  display: block;
}

/* Typography & Labels */
.project-meta-cat {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pink-color);
  margin-bottom: 8px;
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.project-meta-cat:hover {
  opacity: 0.8;
}

.project-page-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-color);
  margin-bottom: 12px;
}

.project-tags {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--text-color);
  opacity: 0.5;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.project-description {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-color);
  opacity: 0.8;
  white-space: pre-line;
}

/* Mobile-Only Description (Hidden on Desktop) */
.project-mobile-description {
  display: none;
}

/* Responsive 12-column Grid Gallery */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: start;
  width: 100%;
}

.project-media-item {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015);
  background-color: rgba(0, 0, 0, 0.02);
  overflow: hidden;
  display: block;
  margin: 0;
}

.project-media-item img,
.project-media-item video {
  width: 100%;
  height: auto;
  display: block;
}

/* Stately Staggered Desktop Spans */
@media (min-width: 769px) {
  .project-media-item:nth-child(1) {
    grid-column: span 7;
  }
  .project-media-item:nth-child(2) {
    grid-column: span 5;
  }
  .project-media-item:nth-child(3),
  .project-media-item:nth-child(4) {
    grid-column: span 6;
  }
  .project-media-item:nth-child(n+5) {
    grid-column: span 4;
  }
  
  /* Single-asset project pages take a generous, centered, and visually dominant layout */
  .project-gallery.single-asset-gallery {
    grid-template-columns: 1fr;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
  }
  .project-gallery.single-asset-gallery .project-media-item {
    grid-column: span 1;
    width: 100%;
  }
}

/* Tablet & Mobile Overrides for Overlay */
@media (max-width: 1024px) {
  .overlay-content {
    padding: 100px 40px;
  }
  .overlay-header {
    padding: 40px 40px;
  }
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* -----------------------------------------
   Bespoke Responsive Mobile & Tablet Overrides
   ----------------------------------------- */

/* Tablet Overrides (max-width: 1024px) */
@media (max-width: 1024px) {
  .hero-body {
    padding: 0;
  }
}

/* Mobile Overrides (max-width: 768px) */
@media (max-width: 768px) {
  /* 1. Header Navigation */
  .header {
    padding: 22px 20px !important;
    background-color: var(--bg-color); /* solid matching background for minimal frame */
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
  
  .nav {
    gap: 20px !important;
  }

  .nav-link {
    letter-spacing: 0.12em !important;
    font-size: 10px !important;
  }

  .logo a {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
  }

  /* 2. Centered Landing Hero */
  .hero {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: transparent !important; /* Transparent to let continuous background show through */
  }

  .hero-body {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    background-color: transparent !important;
  }

  .headline {
    order: 1 !important;
    text-align: left !important;
    font-size: clamp(46px, 13vw, 58px) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    margin-left: 20px !important; /* Close to left edge, flush with mobile content margin */
    margin-right: 20px !important;
    max-width: calc(100vw - 40px) !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    transform: none !important;
    position: absolute !important;
    left: 0 !important; /* Explicit left coordinate locks the vertical axis alignment with the footer */
    bottom: 110px !important; /* Positioned lower to lock vertically directly above the KEEP SCROLLING indicators */
    padding: 0 !important;
    box-sizing: border-box !important;
    letter-spacing: -0.03em !important;
    font-weight: 300 !important;
    z-index: 5 !important;
  }

  .last-line {
    display: inline !important;
    white-space: nowrap !important; /* Keeps "a love for [rotating word]" inline on the third line */
  }

  .rotating-word {
    display: inline !important; /* Keeps the rotating word inline */
  }

  /* Completely remove descriptor and category links from mobile landing flow */
  .left-block {
    display: none !important;
  }

  .right-block {
    display: none !important;
  }

  /* Continuous Pink Background on Mobile (matching Desktop) */
  .pink-script-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }
  
  .pink-script {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    pointer-events: none !important;
    transform: scale(1.25) rotate(-2deg) !important; /* Slightly smaller scale brings more corner scribbles into view while keeping it cropped */
    opacity: 0.75 !important;
  }

  /* Footer on mobile serves as left-aligned indicator block directly below hero text */
  .footer {
    position: absolute !important;
    bottom: 70px !important; /* Placed directly below the headline sentence */
    left: 0 !important;
    width: auto !important;
    margin: 0 !important;
    margin-left: 20px !important; /* Left-aligned locked to the same left margin */
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border-top: none !important;
    padding: 0 !important;
    z-index: 5 !important;
  }

  .social-links {
    display: none !important; /* Completely removed from hero to not compete with the cues */
  }

  .scroll-explore {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Left-aligned arrow */
    gap: 8px !important;
    text-decoration: none !important;
    color: var(--text-color) !important;
    opacity: 0.45 !important;
    margin-bottom: 0 !important;
  }

  .scroll-text {
    font-family: var(--font-sans) !important;
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
    font-weight: 500 !important;
  }

  .scroll-arrow {
    font-size: 11px !important;
    animation: bounce 2s infinite ease-in-out !important;
    margin-left: 2px !important;
  }

  /* 3. Work Section Cards */
  .work-section {
    padding: 64px 20px !important;
  }

  .project-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .project-category-caption {
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    padding: 8px 0 !important; /* Comfortable tap size */
  }

  /* 4. Category Index Overlay on Mobile */
  .overlay-header {
    padding: 20px 24px !important;
    background-color: var(--bg-color); /* solid minimal top bar */
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    height: auto;
  }

  .overlay-content {
    padding: 80px 20px 48px 20px !important;
  }

  .category-title {
    font-size: 38px !important; /* Clean serif title scale */
    margin-bottom: 32px !important;
    text-align: left;
  }

  .category-index-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .category-preview-panel {
    display: none !important; /* Hide collage on mobile */
  }

  .project-row {
    padding: 22px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; /* black/dark-gray, never pink */
    gap: 16px;
  }

  .project-num {
    margin-right: 12px !important;
    font-size: 10px !important;
    width: auto !important;
  }

  .project-row-title {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }

  .project-row-keywords {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }

  /* Show tiny visual thumbnail row on mobile */
  .project-row-thumbnail {
    display: block !important;
    width: 64px;
    height: 80px;
    border-radius: 2px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
  }

  .project-row-thumbnail img,
  .project-row-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .project-row-arrow {
    opacity: 0.3 !important; /* visible arrow by default */
    transform: none !important;
    margin-left: 8px !important;
    font-size: 12px !important;
  }

  /* 5. Project Detail Pages on Mobile */
  .project-view {
    padding: 0 4px !important;
    margin: 0 auto !important; /* Re-center on mobile screens */
    transform: none !important; /* Reset horizontal translation shifts on mobile viewports */
  }

  .project-view.is-entering {
    transform: none !important; /* Keep centered on mobile */
  }

  .project-view.is-leaving {
    transform: translateY(32px) !important; /* Standard mobile exit slide */
  }

  .project-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 16px !important;
  }

  .project-info {
    display: none !important;
  }

  .project-mobile-header {
    display: block !important;
    margin-bottom: 8px !important;
  }

  .project-desktop-header {
    display: none !important;
  }

  .project-mobile-description {
    display: block !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 36px !important;
    color: var(--text-color) !important;
    opacity: 0.8 !important;
    white-space: pre-line !important;
  }

  .project-page-title {
    font-size: clamp(24px, 5vw, 32px) !important; /* Clean scale, not overly huge */
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }

  .project-tags {
    margin-bottom: 16px !important;
  }

  .project-gallery {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .project-media-item {
    grid-column: span 1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  }

  /* 6. About Page Stack on Mobile */
  .about-section {
    padding: 64px 20px !important;
  }

  .about-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .editorial-headline {
    margin-bottom: 24px !important;
  }

  .intro-phrase {
    font-size: 18px !important;
  }

  .hero-name {
    font-size: clamp(48px, 9vw, 68px) !important;
    line-height: 0.9 !important;
    gap: 12px !important;
  }

  .finisher-phrase {
    font-size: 26px !important;
    margin-bottom: 2px !important;
  }

  .bio-text {
    margin-left: 0 !important; /* Reset tucked margin for readable full width */
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .about-gif {
    margin-top: 12px !important;
  }

  .about-gif img {
    max-width: 100% !important;
  }

  .about-contact {
    margin-left: 0 !important; /* Reset tucked margin */
    max-width: 100% !important;
    margin-top: 24px !important;
  }

  .about-contact-links {
    display: flex !important;
    flex-direction: column !important; /* Vertically stack for massive click surface */
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .contact-link {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    padding: 6px 0;
  }
}

/* 7. Hover/Pointer Coarse overrides (Disable hover animations on touch devices) */
@media (hover: none), (pointer: coarse) {
  .project-row:hover {
    padding-left: 0 !important; /* Disable slide on tap */
  }

  .project-row:hover .project-row-title {
    opacity: 1 !important;
  }

  .project-row:hover .project-row-arrow {
    transform: none !important;
  }

  .project-category-caption .arrow {
    transition: none !important;
  }

  .project-card:hover .project-category-caption .arrow {
    transform: none !important; /* Disable arrow shifts */
  }

  .project-card:hover .project-image-placeholder img,
  .project-card:hover .project-image-placeholder video {
    transform: none !important; /* Disable thumbnail scale on mobile */
  }

  .categories-list .cat-label::after,
  .contact-link::after {
    display: none !important; /* Disable underline lines on mobile */
  }
}

/* 8. Custom Gallery Layout for Past / Present / Future Project */
.past-present-future-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.ppf-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.ppf-strip-row .project-media-item {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

/* Row 1 Mockup Aspect Ratios */
.ppf-strip-row .ppf-item-1,
.ppf-strip-row .ppf-item-2,
.ppf-strip-row .ppf-item-3 {
  aspect-ratio: 3308 / 2205 !important;
}

/* Row 3 Poster Aspect Ratios */
.ppf-strip-row .ppf-item-5,
.ppf-strip-row .ppf-item-6,
.ppf-strip-row .ppf-item-7 {
  aspect-ratio: 3308 / 4678 !important;
}

.ppf-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ppf-full-row {
  width: 100% !important;
}

.ppf-full-row .project-media-item {
  width: 100% !important;
  box-sizing: border-box !important;
}

.ppf-full-row video,
.ppf-full-row img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .ppf-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .ppf-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .ppf-strip-row img,
  .ppf-strip-row video {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 9. Custom Gallery Layout for Dennis Rodman Project */
.dennis-rodman-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.dr-item-1 {
  width: 100% !important;
  aspect-ratio: 1920 / 1080 !important;
}

.dr-item-1 video {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.dr-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.dr-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

/* Aspect-ratio based proportional widths */
.dr-strip-row .dr-item-2 {
  flex: 1122 1122 0% !important;
  aspect-ratio: 1122 / 1402 !important;
}

.dr-strip-row .dr-item-3 {
  flex: 1080 1080 0% !important;
  aspect-ratio: 1080 / 1440 !important;
}

.dr-strip-row img,
.dr-strip-row video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .dr-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .dr-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .dr-strip-row img,
  .dr-strip-row video {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 10. Custom Gallery Layout for Followers Project */
.followers-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.fl-item-1 {
  width: 100% !important;
  aspect-ratio: 1448 / 1086 !important;
}

.fl-item-2 {
  width: 100% !important;
  aspect-ratio: 1122 / 1402 !important;
}

.fl-item-1 img,
.fl-item-2 img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 11. Custom Gallery Layout for Worlds Inflated Project */
.worlds-inflated-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.wi-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.wi-strip-row .project-media-item {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  aspect-ratio: 842 / 1191 !important;
}

.wi-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .wi-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .wi-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .wi-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 12. Custom Gallery Layout for Space Avatars Project */
.space-avatars-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.sa-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.sa-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

.sa-strip-row .sa-item-1 {
  flex: 5627 5627 0% !important;
  aspect-ratio: 2305 / 4096 !important;
}

.sa-strip-row .sa-item-2 {
  flex: 4834 4834 0% !important;
  aspect-ratio: 640 / 1324 !important;
}

.sa-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .sa-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .sa-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .sa-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 13. Custom Gallery Layout for Inuit Culture Project */
.inuit-culture-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.ic-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.ic-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

.ic-strip-row .ic-item-1 {
  flex: 7000 7000 0% !important;
  aspect-ratio: 2123 / 3033 !important;
}

.ic-strip-row .ic-item-2 {
  flex: 7073 7073 0% !important;
  aspect-ratio: 2136 / 3020 !important;
}

.ic-strip-row .ic-item-3 {
  flex: 7066 7066 0% !important;
  aspect-ratio: 2649 / 3749 !important;
}

.ic-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .ic-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .ic-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .ic-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 14. Custom Gallery Layout for Bialik House Project */
.bialik-house-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.bh-item-1 {
  width: 100% !important;
  aspect-ratio: 4961 / 3508 !important;
}

.bh-item-2 {
  width: 100% !important;
  aspect-ratio: 4961 / 3508 !important;
}

.bh-item-1 img,
.bh-item-2 img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 15. Custom Gallery Layout for Genres Project */
.genres-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.gn-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.gn-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

.gn-strip-row .gn-item-1,
.gn-strip-row .gn-item-2,
.gn-strip-row .gn-item-3 {
  flex: 1 1 0% !important;
  aspect-ratio: 1819 / 2598 !important;
}

.gn-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.gn-item-4 {
  width: 100% !important;
  aspect-ratio: 1448 / 1086 !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .gn-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .gn-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .gn-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 16. Custom Gallery Layout for Golden Craft Project */
.golden-craft-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.gc-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.gc-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
  aspect-ratio: 2481 / 3508 !important;
}

.gc-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .gc-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .gc-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .gc-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 17. Custom Gallery Layout for In Theory Project */
.in-theory-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.it-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.it-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

.it-strip-row .it-item-1 {
  flex: 6667 6667 0% !important;
  aspect-ratio: 1024 / 1536 !important;
}

.it-strip-row .it-item-2 {
  flex: 5624 5624 0% !important;
  aspect-ratio: 910 / 1618 !important;
}

.it-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.it-item-3 {
  width: 100% !important;
  aspect-ratio: 1080 / 1920 !important;
}

.it-item-3 video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .it-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .it-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .it-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 18. Custom Gallery Layout for Shape Language Project */
.shape-language-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.shape-language-layout .sl-item-1 {
  aspect-ratio: 2940 / 1760 !important;
}

.shape-language-layout .sl-item-2 {
  aspect-ratio: 3508 / 4961 !important;
}

.shape-language-layout .sl-item-3,
.shape-language-layout .sl-item-4,
.shape-language-layout .sl-item-5 {
  aspect-ratio: 1024 / 1536 !important;
}

.shape-language-layout .sl-item-6 {
  aspect-ratio: 2940 / 1912 !important;
}

/* 19. Custom Gallery Layout for Baan Project */
.baan-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.bn-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.bn-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
  aspect-ratio: 2378 / 1334 !important;
}

.bn-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.bn-item-single {
  width: 100% !important;
  aspect-ratio: 2378 / 1334 !important;
}

.bn-item-single img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .bn-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .bn-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .bn-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 20. Custom Gallery Layout for Chelnov Project */
.chelnov-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.ch-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.ch-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

.ch-strip-row img,
.ch-strip-row video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.ch-item-1 img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.ch-item-4 {
  flex: 7500 7500 0% !important;
  aspect-ratio: 3024 / 4032 !important;
}

.ch-item-2 {
  flex: 8076 8076 0% !important;
  aspect-ratio: 890 / 1102 !important;
}

.ch-item-6 {
  flex: 7999 7999 0% !important;
  aspect-ratio: 2258 / 2823 !important;
}

.ch-item-7 {
  flex: 5637 5637 0% !important;
  aspect-ratio: 1080 / 1916 !important;
}

.ch-item-3 {
  flex: 3615 3615 0% !important;
  aspect-ratio: 786 / 2174 !important;
}

.ch-item-1 {
  width: 100% !important;
  aspect-ratio: 1728 / 970 !important;
}

.ch-item-5 {
  flex: 7500 7500 0% !important;
  aspect-ratio: 3024 / 4032 !important;
}

.ch-item-8 {
  flex: 8000 8000 0% !important;
  aspect-ratio: 1290 / 1612 !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .ch-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .ch-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .ch-strip-row img,
  .ch-strip-row video {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 21. Custom Gallery Layout for FinalForm Project */
.finalform-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.finalform-layout .project-media-item[class^="ff-item-"],
.finalform-layout .project-media-item[class*=" ff-item-"] {
  aspect-ratio: 2298 / 1290 !important;
}

.finalform-layout .ff-item-13 {
  aspect-ratio: 1792 / 1004 !important;
}

/* 22. Custom Gallery Layout for Lines of Character Project */
.lines-of-character-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.lines-of-character-layout .lc-item-1,
.lines-of-character-layout .lc-item-2,
.lines-of-character-layout .lc-item-3 {
  aspect-ratio: 1 / 1 !important;
}

.lines-of-character-layout .lc-item-4 {
  aspect-ratio: 1135 / 1386 !important;
}

/* 23. Custom Gallery Layout for Seren Project */
.seren-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.sr-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.sr-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
  aspect-ratio: 1080 / 1920 !important;
}

.sr-strip-row img,
.sr-strip-row video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .sr-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .sr-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .sr-strip-row img,
  .sr-strip-row video {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 24. Custom Gallery Layout for Parachutes Project */
.parachutes-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.pr-strip-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 24px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.pr-strip-row .project-media-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.015) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
  flex: 1 1 0% !important;
}

.pr-strip-row img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.pr-item-5,
.pr-item-6,
.pr-item-1,
.pr-item-2 {
  aspect-ratio: 1 / 1 !important;
}

.pr-item-4 {
  aspect-ratio: 1200 / 777 !important;
}

.pr-item-3 {
  aspect-ratio: 3508 / 2481 !important;
}

/* Responsive overrides for smaller viewports */
@media (max-width: 768px) {
  .pr-strip-row {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .pr-strip-row .project-media-item {
    width: 100% !important;
    flex: none !important;
    aspect-ratio: auto !important;
  }
  
  .pr-strip-row img {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 25. Custom Gallery Layout for Night Light Run Project */
.night-light-run-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(20px, 2.2vw, 36px) !important;
  width: 100% !important;
}

.night-light-run-layout .nl-item-1 {
  aspect-ratio: 1660 / 1080 !important;
}

.night-light-run-layout .nl-item-2 {
  aspect-ratio: 1376 / 1080 !important;
}

.night-light-run-layout video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* 26. Custom Full-Width Gallery Layout Items for Inuit Culture */
.inuit-culture-layout .ic-item-full-1 {
  width: 100% !important;
  aspect-ratio: 2123 / 3033 !important;
}

.inuit-culture-layout .ic-item-full-2 {
  width: 100% !important;
  aspect-ratio: 2136 / 3020 !important;
}

.inuit-culture-layout .ic-item-full-3 {
  width: 100% !important;
  aspect-ratio: 2649 / 3749 !important;
}

.inuit-culture-layout .ic-item-full-1 img,
.inuit-culture-layout .ic-item-full-2 img,
.inuit-culture-layout .ic-item-full-3 img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 27. Custom Full-Width Gallery Layout Items for Worlds Inflated */
.worlds-inflated-layout .wi-item-full-1,
.worlds-inflated-layout .wi-item-full-2,
.worlds-inflated-layout .wi-item-full-3 {
  width: 100% !important;
  aspect-ratio: 842 / 1191 !important;
}

.worlds-inflated-layout .wi-item-full-1 img,
.worlds-inflated-layout .wi-item-full-2 img,
.worlds-inflated-layout .wi-item-full-3 img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Hide duplicate full-width rows on mobile for Inuit Culture and Worlds Inflated */
@media (max-width: 768px) {
  .inuit-culture-layout .ppf-full-row,
  .worlds-inflated-layout .ppf-full-row {
    display: none !important;
  }
}