/* Whyte Inktrap font-face (replace URL with your actual font file) */
/* ABC Diatype font-face (replace URL with your actual font file) */
@font-face {
  font-family: 'ABC Diatype';
  src: url('fonts/ABCDiatype-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Knopp Semibold';
  src: url('Knopp/Knopp-TRIALSemiBold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ABC Diatype Medium';
  src: url('ABC Diatype/ABCDiatype-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'ABC Diatype', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #000000;
  color: #ffffff;
}

@media (min-width: 1920px) {
  body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  body > * {
    max-width: 1873px;
    width: 100%;
  }
  
  /* Work page containers */
  .work-container {
    max-width: 1873px;
    margin: 0 0 16px 0;
  }
  
  .side-projects-container {
    max-width: 1873px;
    width: 100%;
  }
  
  .side-projects-grid {
    max-width: 1920px;
    width: calc(100% - 48px);
    margin: 0 24px 120px 24px;
  }
  
  /* Index page containers */
  .about-row {
    max-width: 1873px;
    width: calc(100% - 48px);
    margin: 0 24px 120px 24px;
  }
  
  .awareness-container {
    max-width: 1825px !important;
    width: calc(100% - 48px);
    margin: 8px 24px 8px 24px;
  }
}

/* Fix for browser widths past 1925px - constrain side project container */
@media (min-width: 1925px) {
  .side-projects-container {
    max-width: 1873px !important;
    width: 100% !important;
    margin: 0 auto !important;
  }
  
  .side-projects-grid {
    max-width: 1873px !important;
    width: calc(100% - 48px) !important;
    margin: 0 24px 120px 24px !important;
  }
  
  .side-project-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  .side-project-image img,
  .side-project-video {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  .work-container {
    width: 1825px !important;
    margin: 0 auto 8px auto !important;
  }
  
  .slideshow-container {
    max-width: 1366px !important;
    width: 100% !important;
    overflow: hidden;
  }
}

/* Light mode support */
body.dark-mode {
  background: #ffffff;
  color: #000000;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Whyte Inktrap', 'ABC Diatype', Arial, sans-serif;
}

.top-banner {
  background: #ffffff;
  color: #000000;
  padding: 8px 24px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 24px 8px 24px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(-100%);
  animation: slideInFromTop 1.2s cubic-bezier(0.86, 0, 0.07, 1) forwards;
}

.banner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  position: relative;
  overflow: hidden;
  animation: bannerContentReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0.4s forwards;
}

.banner-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  transform: translateY(100%);
  animation: bannerContentMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0.4s forwards;
  z-index: 1;
}

body.dark-mode .banner-content::before {
  background: #191919;
}

.banner-text {
  color: #000000;
  font-family: 'Knopp Semibold', 'Whyte Inktrap', 'ABC Diatype', Arial, sans-serif;
  font-size: 5rem;
  font-weight: normal;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0 8px;
  position: relative;
  z-index: 2;
  transform: translateY(100%);
  animation: bannerContentSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0.4s forwards;
}

.banner-text.left {
  text-align: left;
  flex: 0 0 auto;
}

.banner-text.center {
  text-align: center;
  flex: 0 0 auto;
}

.banner-text.right {
  text-align: right;
  flex: 0 0 auto;
}

.banner-line {
  flex: 1 1 0;
  height: 2px;
  min-width: 32px;
  max-width: none;
  background: #000000;
  border-radius: 1px;
  margin: 0 12px;
  transition: width 0.2s;
  position: relative;
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  animation: bannerLineReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0.4s forwards;
  /* Ensure banner lines are completely independent of top-banner animation */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

@keyframes bannerContentReveal {
  0% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}

@keyframes bannerContentMask {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes bannerContentSlide {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bannerLineReveal {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@media (max-width: 900px) {
  .banner-text {
    font-size: 3rem;
    padding: 0 6px;
  }
  .banner-line {
    margin: 0 8px;
    min-width: 32px;
    max-width: 160px;
    background: #000000;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
    animation: bannerLineReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0.4s forwards;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .top-banner {
    padding: 16px;
    margin: 24px 24px 8px 24px;
  }
  .banner-content {
    gap: 8px;
  }
}

@media (max-width: 700px) {
  .top-banner {
    max-width: calc(100vw - 12px);
    margin: 0px 0px 0px 0px;
    border-radius: 16px;
    align-items: center;
    gap: 0px;
    padding: 12px;
    border-radius: 16px;
    margin: 16px 16px 8px 16px;
  }
  main .awareness-container {
    max-width: calc(100vw - 32px);
    margin: 8px 16px 8px 16px !important;
  }
  .banner-content {
    gap: 0px;
  }
  .banner-line {
    min-width: 16px;
    max-width: 64px;
    height: 2px;
    margin: 0 4px;
    background: #000000;
    transform: scaleX(0);
    transform-origin: left;
    animation: bannerLineReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0.4s forwards;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .banner-text {
    font-size: 2rem;
    text-align: center;
    padding: 0 2px;
  }
}

.navigation {
  position: fixed;
  bottom: -8px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: fit-content;
  height: 58px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.071);
  border-radius: 9999px;
  z-index: 10;
  pointer-events: auto;
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
  overflow: visible;
}

.nav-backdrop {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 20%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) 40%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);
  z-index: 9;
  pointer-events: none;
}

/* Ensure non-active buttons maintain proper styling */
button.nav-button,
a.nav-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #000000; /* Explicit black background */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1), height 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.1s ease-out;
  padding: 0;
  position: relative;
  margin: 0 4px;
  flex-shrink: 0;
  opacity: 1 !important;
}

/* Hover state for buttons without .hover class */
button.nav-button:hover:not(.hover),
a.nav-button:hover:not(.hover) {
  background: #4F4E53 !important;
  z-index: 1003;
}

/* Buttons with .hover class should maintain their proper background */
.nav-button.hover {
  background: #4F4E53 !important;
  z-index: 1003;
}

button.nav-button:active,
a.nav-button:active {
  transform: scale(0.85);
  transition: transform 0.1s ease-out;
}

/* Hover state scaling for all buttons - Apple-style cascading effect */
.nav-button.hover {
  width: 63px; /* 1.5x the base size */
  height: 63px; /* 1.5x the base size */
}

.nav-button.sibling-close {
  width: 52.5px; /* 1.25x the base size */
  height: 52.5px; /* 1.25x the base size */
}

.nav-button.sibling-far {
  width: 48.3px; /* 1.15x the base size */
  height: 48.3px; /* 1.15x the base size */
}

.nav-button img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1); /* White icons on black background */
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-button.hover img {
  width: 33px; /* 1.5x the base icon size */
  height: 33px; /* 1.5x the base icon size */
}

.nav-button.sibling-close img {
  width: 27.5px; /* 1.25x the base icon size */
  height: 27.5px; /* 1.25x the base icon size */
}

.nav-button.sibling-far img {
  width: 25.3px; /* 1.15x the base icon size */
  height: 25.3px; /* 1.15x the base icon size */
}

/* Dark mode - white background with black icons */
body.dark-mode button.nav-button,
body.dark-mode a.nav-button {
  background: #ffffff; /* Explicit white background in dark mode */
}

body.dark-mode .nav-button img {
  filter: brightness(0) invert(0); /* Black icons on white background in dark mode */
}

/* Dark mode hover state for buttons without .hover class */
body.dark-mode button.nav-button:hover:not(.hover),
body.dark-mode a.nav-button:hover:not(.hover) {
  background: #BCBDC7 !important;
}

/* Dark mode buttons with .hover class should maintain their proper background */
body.dark-mode .nav-button.hover {
  background: #BCBDC7 !important;
  z-index: 1003;
}

body.dark-mode .nav-button:hover img {
  filter: brightness(0) invert(0);
}

body.dark-mode .nav-button.active {
  background: #000000;
  border: 2px solid #ffffff;
}

body.dark-mode .nav-button.active img {
  filter: brightness(0) invert(1) !important;
}

/* Prevent hover color change on active buttons in dark mode */
body.dark-mode .nav-button.active:hover {
  background: #000000 !important; /* Keep black background for active buttons in dark mode */
}

.nav-button[data-section="close"].sibling-far {
  width: 43.7px; /* 1.15x the base size */
  height: 43.7px; /* 1.15x the base size */
}

.nav-button[data-section="close"] img {
  width: 16px;
  height: 16px;
}

.nav-button[data-section="close"].hover img {
  width: 24px; /* 1.5x the base icon size */
  height: 24px; /* 1.5x the base icon size */
}

.nav-button[data-section="close"].sibling-close img {
  width: 20px; /* 1.25x the base icon size */
  height: 20px; /* 1.25x the base icon size */
}

.nav-button[data-section="close"].sibling-far img {
  width: 18.4px; /* 1.15x the base icon size */
  height: 18.4px; /* 1.15x the base icon size */
}

.nav-button[data-section="ideas"] {
  width: 60px;
  height: 60px;
}

.nav-button[data-section="ideas"].hover {
  width: 90px; /* 1.5x the base size */
  height: 90px; /* 1.5x the base size */
}

.nav-button[data-section="ideas"].sibling-close {
  width: 75px; /* 1.25x the base size */
  height: 75px; /* 1.25x the base size */
}

.nav-button[data-section="ideas"].sibling-far {
  width: 69px; /* 1.15x the base size */
  height: 69px; /* 1.15x the base size */
}

.nav-button[data-section="ideas"] img {
  width: 36px;
  height: 36px;
}

.nav-button[data-section="ideas"].hover img {
  width: 54px; /* 1.5x the base icon size */
  height: 54px; /* 1.5x the base icon size */
}

.nav-button[data-section="ideas"].sibling-close img {
  width: 45px; /* 1.25x the base icon size */
  height: 45px; /* 1.25x the base icon size */
}

.nav-button[data-section="ideas"].sibling-far img {
  width: 41.4px; /* 1.15x the base icon size */
  height: 41.4px; /* 1.15x the base icon size */
}

.nav-separator {
  width: 1px;
  height: 32px;
  background: #C1C1C1;
  margin: 0 4px;
  flex-shrink: 0;
  align-self: center;
}

/* Light mode separator color */
.nav-separator {
  background: #C1C1C1;
}

/* Tooltip styles */
.nav-button::before {
  content: attr(data-tooltip);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -80%);
  background: #4F4E53;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: var(--radii-2, 8px);
  font-size: var(--fontSizes-12, 12px);
  font-family: 'ABC Diatype', Arial, sans-serif;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1004;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04), 0px 1px 1px 0px rgba(0, 0, 0, 0.02);
  border: 1px solid var(--colors-grayA4, rgba(0, 0, 0, 0.071));
}

.nav-button:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -140%);
}

/* Dark mode support */
body.dark-mode {
  background: #ffffff;
  color: #000;
}

body.dark-mode .top-banner,
body.dark-mode .navigation,
body.dark-mode .about-col {
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
}

body.dark-mode .banner-text {
  color: #ffffff;
}

body.dark-mode .banner-line {
  background: #ffffff;
}

body.dark-mode .nav-button {
  background: #ffffff;
}

body.dark-mode .nav-button img {
  filter: brightness(0) invert(0);
}

body.dark-mode .nav-button:hover {
  background: #BCBDC7 !important;
}

body.dark-mode .nav-button:hover img {
  filter: brightness(0) invert(0);
}

body.dark-mode .nav-button.active {
  background: #000000;
  border: 2px solid #ffffff;
}

body.dark-mode .nav-button.active img {
  filter: brightness(0) invert(1) !important;
}

body.dark-mode .nav-button::before {
  background: #BCBDC7;
  color: #000000;
}

body.dark-mode .nav-separator {
  background: #535353;
}

body.dark-mode .about-col {
  background: #191919;
  color: #838383;
}

body.dark-mode .about-col a {
  color: #838383;
}

body.dark-mode .corner-clock {
  color: #000000;
}

body.dark-mode .corner-message {
  color: #000000;
}

body.dark-mode .nav-backdrop {
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0) 40%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.9) 15%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0) 100%);
}

body.dark-mode .about-col {
  background: #191919;
  color: #838383;
}

body.dark-mode .about-col a {
  color: #838383;
}

body.dark-mode .profile-image-container {
  background: #191919;
}

@media (max-width: 900px) {
  .navigation {
    height: 58px;
    padding: 8px;
  }
  
  .nav-button {
    width: 42px;
    height: 42px;
    margin: 0 4px;
  }
  
  .nav-separator {
    height: 38px;
  }
  
  .nav-button.hover {
    width: 63px; /* 1.5x the base size */
    height: 63px; /* 1.5x the base size */
  }
  
  .nav-button.sibling-close {
    width: 52.5px; /* 1.25x the base size */
    height: 52.5px; /* 1.25x the base size */
  }
  
  .nav-button.sibling-far {
    width: 48.3px; /* 1.15x the base size */
    height: 48.3px; /* 1.15x the base size */
  }
  
  .nav-button img {
    width: 22px;
    height: 22px;
  }
  
  .nav-button.hover img {
    width: 33px; /* 1.5x the base icon size */
    height: 33px; /* 1.5x the base icon size */
  }
  
  .nav-button.sibling-close img {
    width: 27.5px; /* 1.25x the base icon size */
    height: 27.5px; /* 1.25x the base icon size */
  }
  
  .nav-button.sibling-far img {
    width: 25.3px; /* 1.15x the base icon size */
    height: 25.3px; /* 1.15x the base icon size */
  }
  
  .nav-button[data-section="close"] {
    width: 38px;
    height: 38px;
  }
  
  .nav-button[data-section="close"].hover {
    width: 57px; /* 1.5x the base size */
    height: 57px; /* 1.5x the base size */
  }
  
  .nav-button[data-section="close"].sibling-close {
    width: 47.5px; /* 1.25x the base size */
    height: 47.5px; /* 1.25x the base size */
  }
  
  .nav-button[data-section="close"].sibling-far {
    width: 43.7px; /* 1.15x the base size */
    height: 43.7px; /* 1.15x the base size */
  }
  
  .nav-button[data-section="close"] img {
    width: 18px;
    height: 18px;
  }
  
  .nav-button[data-section="close"].hover img {
    width: 27px; /* 1.5x the base icon size */
    height: 27px; /* 1.5x the base icon size */
  }
  
  .nav-button[data-section="close"].sibling-close img {
    width: 22.5px; /* 1.25x the base icon size */
    height: 22.5px; /* 1.25x the base icon size */
  }
  
  .nav-button[data-section="close"].sibling-far img {
    width: 20.7px; /* 1.15x the base icon size */
    height: 20.7px; /* 1.15x the base icon size */
  }
  
  .nav-button[data-section="ideas"] {
    width: 50px;
    height: 50px;
  }
  
  .nav-button[data-section="ideas"].hover {
    width: 75px; /* 1.5x the base size */
    height: 75px; /* 1.5x the base size */
  }
  
  .nav-button[data-section="ideas"].sibling-close {
    width: 62.5px; /* 1.25x the base size */
    height: 62.5px; /* 1.25x the base size */
  }
  
  .nav-button[data-section="ideas"].sibling-far {
    width: 57.5px; /* 1.15x the base size */
    height: 57.5px; /* 1.15x the base size */
  }
  
  .nav-button[data-section="ideas"] img {
    width: 28px;
    height: 28px;
  }
  
  .nav-button[data-section="ideas"].hover img {
    width: 42px; /* 1.5x the base icon size */
    height: 42px; /* 1.5x the base icon size */
  }
  
  .nav-button[data-section="ideas"].sibling-close img {
    width: 35px; /* 1.25x the base icon size */
    height: 35px; /* 1.25x the base icon size */
  }
  
  .nav-button[data-section="ideas"].sibling-far img {
    width: 32.2px; /* 1.15x the base icon size */
    height: 32.2px; /* 1.15x the base icon size */
  }
  
  /* Active state scaling for 900px breakpoint */
  .nav-button.active.hover {
    width: 63px;
    height: 63px;
  }
  
  .nav-button.active.sibling-close {
    width: 52.5px;
    height: 52.5px;
  }
  
  .nav-button.active.sibling-far {
    width: 48.3px;
    height: 48.3px;
  }
  
  .nav-button.active.hover img {
    width: 33px;
    height: 33px;
  }
  
  .nav-button.active.sibling-close img {
    width: 27.5px;
    height: 27.5px;
  }
  
  .nav-button.active.sibling-far img {
    width: 25.3px;
    height: 25.3px;
  }
}

@media (max-width: 700px) {
  .navigation {
    height: 54px;
    padding: 6px;
    bottom: -8px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }
  
  .nav-button {
    width: 40px;
    height: 40px;
    margin: 0 3px;
  }
  
  .nav-separator {
    height: 36px;
  }
  
  /* Completely disable all hover scaling on mobile */
  .nav-button.hover,
  .nav-button.sibling-close,
  .nav-button.sibling-far {
    width: 40px !important; /* Force original size */
    height: 40px !important; /* Force original size */
  }
  
  .nav-button img {
    width: 20px;
    height: 20px;
  }
  
  /* Completely disable all icon scaling on mobile */
  .nav-button.hover img,
  .nav-button.sibling-close img,
  .nav-button.sibling-far img {
    width: 20px !important; /* Force original size */
    height: 20px !important; /* Force original size */
  }
  
  .nav-button[data-section="close"] {
    width: 36px;
    height: 36px;
  }
  
  /* Completely disable hover scaling for close button on mobile */
  .nav-button[data-section="close"].hover,
  .nav-button[data-section="close"].sibling-close,
  .nav-button[data-section="close"].sibling-far {
    width: 36px !important; /* Force original size */
    height: 36px !important; /* Force original size */
  }
  
  .nav-button[data-section="close"] img {
    width: 14px;
    height: 14px;
  }
  
  /* Completely disable icon scaling for close button on mobile */
  .nav-button[data-section="close"].hover img,
  .nav-button[data-section="close"].sibling-close img,
  .nav-button[data-section="close"].sibling-far img {
    width: 14px !important; /* Force original size */
    height: 14px !important; /* Force original size */
  }
  
  .nav-button[data-section="ideas"] {
    width: 56px;
    height: 56px;
  }
  
  /* Completely disable hover scaling for ideas button on mobile */
  .nav-button[data-section="ideas"].hover,
  .nav-button[data-section="ideas"].sibling-close,
  .nav-button[data-section="ideas"].sibling-far {
    width: 56px !important; /* Force original size */
    height: 56px !important; /* Force original size */
  }
  
  .nav-button[data-section="ideas"] img {
    width: 32px;
    height: 32px;
  }
  
  /* Completely disable icon scaling for ideas button on mobile */
  .nav-button[data-section="ideas"].hover img,
  .nav-button[data-section="ideas"].sibling-close img,
  .nav-button[data-section="ideas"].sibling-far img {
    width: 32px !important; /* Force original size */
    height: 32px !important; /* Force original size */
  }
  
  /* Completely disable active state scaling on mobile */
  .nav-button.active.hover,
  .nav-button.active.sibling-close,
  .nav-button.active.sibling-far {
    width: 40px !important; /* Force original size */
    height: 40px !important; /* Force original size */
  }
  
  .nav-button.active.hover img,
  .nav-button.active.sibling-close img,
  .nav-button.active.sibling-far img {
    width: 20px !important; /* Force original size */
    height: 20px !important; /* Force original size */
  }
}

.awareness-container {
  position: relative;
  width: 100%;
  max-width: calc(100vw - 48px);
  height: 500px;
  margin: 8px 24px 8px 24px;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  background: #A2FF3E;
  cursor: crosshair;
  opacity: 0;
  transform: translateY(50px);
  animation: slideInFromBottom 1.2s cubic-bezier(0.86, 0, 0.07, 1) 0.3s forwards;
}

@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.awareness-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.awareness-arrow {
  transition: none;
}

.awareness-arrow-path {
  fill: #000000;
  transform-origin: center;
}

body.dark-mode .awareness-container {
  background: #DB5B01;
}

body.dark-mode .awareness-arrow-path {
  fill: #ffffff;
} 

.about-row {
  display: flex;
  gap: 8px;
  margin: 0 24px 120px 24px;
  max-width: none;
  width: auto;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFromBottom 1.2s cubic-bezier(0.86, 0, 0.07, 1) 0.6s forwards;
  align-items: stretch;
}

@media (min-width: 1400px) {
  .about-row {
    height: 200px;
  }
}

.profile-image-container {
  background: #ffffff;
  border-radius: 16px;
  padding: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFromBottom 1.2s cubic-bezier(0.86, 0, 0.07, 1) 0.6s forwards;
  overflow: hidden;
  width: 280px;
}

.profile-image-container.animated {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.about-col {
  background: #ffffff;
  color: #8B8B8B;
  border-radius: 16px;
  padding: 8px 24px 8px 24px;
  flex: 1 1 0;
  font-family: 'ABC Diatype Medium', 'ABC Diatype', Arial, sans-serif;
  font-size: 20px;
  line-height: 1.25;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.about-col a {
  color: #8B8B8B;
  text-decoration: underline;
}
@media (max-width: 900px) {
  .about-row {
    gap: 8px;
    margin: 0 24px;
    max-width: none;
    width: auto;
    align-items: stretch;
  }
  .profile-image-container {
    display: none;
  }
  .about-col {
    padding: 8px 16px;
    font-size: 18px;
    border-radius: 16px;
  }
}
@media (max-width: 700px) {
  .about-row {
    flex-direction: column;
    gap: 8px;
    margin: 8px 16px 120px 16px;
    max-width: none;
    width: auto;
    align-items: center;
  }
  .profile-image-container {
    display: none;
  }
  .about-col {
    max-width: 100%;
    padding: 4px 16px 4px 16px;
    font-size: 16px;
    border-radius: 16px;
  }
} 

.corner-clock {
  position: fixed;
  left: 24px;
  bottom: 24px;
  background: none;
  color: #ffffff;
  font-family: 'ABC Diatype Thin', 'ABC Diatype', 'Menlo', 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  padding: 0;
  border-radius: 0;
  z-index: 1000;
  box-shadow: none;
  letter-spacing: 0.02em;
  user-select: none;
} 

.corner-message {
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: none;
  color: #ffffff;
  font-family: 'ABC Diatype Thin', 'ABC Diatype', 'Menlo', 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  padding: 0;
  border-radius: 0;
  z-index: 1000;
  box-shadow: none;
  user-select: none;
} 

@media (max-width: 700px) {
  .corner-clock,
  .corner-message {
    display: none !important;
  }
} 

/* Work Page Styles */
.work-title {
  font-family: 'Knopp Semibold', 'ABC Diatype', Arial, sans-serif;
  font-size: 5rem;
  color: #ffffff;
  margin: 0 0 24px 0;
  padding-top: 24px;
  font-weight: normal;
  letter-spacing: 0.01em;
  text-align: center;
}

.work-title-container {
  position: relative;
  overflow: hidden;
  animation: workTitleReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
}

.work-title-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  transform: translateY(100%);
  animation: workTitleMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  z-index: 1;
}

body.dark-mode .work-title-container::before {
  background: #ffffff;
}

.work-title-reveal {
  position: relative;
  z-index: 2;
  transform: translateY(100%);
  animation: workTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
}

@keyframes workTitleReveal {
  0% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}

@keyframes workTitleMask {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes workTitleSlide {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.work-container {
  max-width: none;
  margin: 0 24px 8px 24px; /* Changed from 16px to 8px bottom margin */
  padding: 0;
  box-sizing: border-box;
  width: calc(100vw - 48px);
}

.work-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  align-items: center;
  width: 100%;
}

/* Progressive scroll animation for work projects */
.work-project {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  animation: none; /* Remove initial animation */
  max-width: none;
}

/* First 2 projects are pre-loaded and visible */
.work-project:nth-child(1),
.work-project:nth-child(2) {
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFromBottom 1.2s cubic-bezier(0.86, 0, 0.07, 1) 0.6s forwards;
}

/* Progressive scroll animation starts from 3rd project onwards */
.work-project:nth-child(n+3) {
  opacity: 0;
  transform: translateY(30px);
  animation: none;
}

.work-project.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  animation: none;
  transition: opacity 0.8s cubic-bezier(0.86, 0, 0.07, 1), transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

/* Override for first 2 projects - they should always be visible */
.work-project:nth-child(1).scroll-animate,
.work-project:nth-child(2).scroll-animate {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

.work-project.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

.work-project:hover {
  transform: none;
  box-shadow: none;
}

.work-project:last-child {
  margin-bottom: 0; /* Remove extra margin to fix spacing above Side Projects */
}

.project-header {
  margin: 24px 0 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  max-width: 675px;
  width: 100%;
}

.project-title {
  font-family: 'ABC Diatype', Arial, sans-serif;
  font-size: 32px;
  color: #969696;
  margin: 0;
  font-weight: normal;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.project-line-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.project-line {
  flex: 1;
  height: 2px;
  background: #969696;
  border-radius: 1px;
  min-width: 32px;
}

.project-date {
  font-family: 'ABC Diatype', Arial, sans-serif;
  font-size: 32px;
  color: #969696;
  white-space: nowrap;
  flex-shrink: 0;
}

.project-copy {
  background: #ffffff;
  color: #8B8B8B;
  border-radius: 16px;
  padding: 32px 24px 32px 24px;
  font-family: 'ABC Diatype Medium', 'ABC Diatype', Arial, sans-serif;
  font-size: 20px;
  line-height: 1.25;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  width: 100%;
  flex: 1;
  min-height: 0;
}

@media (max-width: 1440px) {
  .project-copy {
    padding: 28px 24px 28px 24px;
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  .project-copy {
    padding: 24px 16px;
    border-radius: 16px;
    font-size: 16px !important;
  }
}

@media (max-width: 700px) {
  .project-copy {
    max-width: 100%;
    padding: 16px 16px;
    border-radius: 16px;
    font-size: 16px !important;
  }
}

.project-copy p {
  margin: 0 0 16px 0;
}

.project-copy p:last-child {
  margin-bottom: 0;
  margin-top: auto;
}

/* Light mode support for work page (when body.dark-mode is applied) */
body.dark-mode .work-title {
  color: #000000;
}

body.dark-mode .work-project {
  background: transparent;
  box-shadow: none;
}

body.dark-mode .work-project:hover {
  box-shadow: none;
}

body.dark-mode .project-title {
  color: #565656;
}

body.dark-mode .project-line {
  background: #565656;
}

body.dark-mode .project-date {
  color: #565656;
}

body.dark-mode .project-image {
  background: #1a1a1a;
}

body.dark-mode .project-placeholder {
  color: #cccccc;
}

body.dark-mode .project-copy {
  color: #000000;
}

/* Side Projects Styles */
.side-projects-title {
  font-family: 'Knopp Semibold', 'ABC Diatype', Arial, sans-serif;
  font-size: 5rem;
  color: #ffffff;
  margin: 0 0 24px 0;
  font-weight: normal;
  letter-spacing: 0.01em;
  text-align: center;
}

.side-projects-title-container {
  position: relative;
  overflow: hidden;
  animation: sideProjectsTitleReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
}

.side-projects-title-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000;
  transform: translateY(100%);
  animation: sideProjectsTitleMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  z-index: 1;
}

body.dark-mode .side-projects-title-container::before {
  background: #ffffff;
}

.side-projects-title-reveal {
  position: relative;
  z-index: 2;
  transform: translateY(100%);
  animation: sideProjectsTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
}

@keyframes sideProjectsTitleReveal {
  0% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}

@keyframes sideProjectsTitleMask {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes sideProjectsTitleSlide {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Side Projects Container - Full Bleed */
.side-projects-container {
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Override top-banner margin for Side Projects section */
.side-projects-container .top-banner {
  margin: 0 24px 8px 24px !important; /* Force override with !important */
}

/* Side Projects Styles - now using banner structure for titles */
.side-projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 24px 120px 24px;
  width: calc(100% - 48px);
}

/* Progressive scroll animation for side projects */
.side-project {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: 0;
  transform: translateY(30px);
  animation: none; /* Remove initial animation */
}

.side-project.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  animation: none;
  transition: opacity 0.8s cubic-bezier(0.86, 0, 0.07, 1), transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.side-project.scroll-animate.animate {
  opacity: 1;
  transform: translateY(0);
}

.side-project:hover {
  transform: none;
  box-shadow: none;
}

.side-project-image {
  width: 100%;
  height: 0;
  padding-bottom: 63.8%; /* Same aspect ratio as slideshows (2110:1346) */
  background: #f5f5f5;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}

.side-project-image img,
.side-project-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.side-project-placeholder {
  color: #8B8B8B;
  font-family: 'ABC Diatype', Arial, sans-serif;
  font-size: 18px;
  text-align: center;
}

.side-project-copy {
  background: #ffffff;
  color: #8B8B8B;
  border-radius: 16px;
  padding: 32px 24px 32px 24px; /* Match project-copy padding */
  font-family: 'ABC Diatype Medium', 'ABC Diatype', Arial, sans-serif;
  font-size: 20px; /* Match project-copy font size */
  line-height: 1.25; /* Match project-copy line height */
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.side-project-copy p {
  margin: 0 0 8px 0;
}

.side-project-copy p:last-child {
  margin-bottom: 0;
}

/* Light mode support for side projects */
body.dark-mode .side-projects-title {
  color: #000000;
}

body.dark-mode .side-project-image {
  background: #1a1a1a;
}

body.dark-mode .side-project-placeholder {
  color: #cccccc;
}

body.dark-mode .side-project-copy {
  color: #000000;
} 

/* Responsive design for work page */
@media (max-width: 900px) {
  .work-title {
    font-size: 3rem;
    margin: 0 0 16px 0;
    text-align: center;
    /* Preserve animation properties */
    position: relative;
    z-index: 2;
    transform: translateY(100%);
    animation: workTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .work-title-container {
    position: relative;
    overflow: hidden;
    animation: workTitleReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .work-title-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    transform: translateY(100%);
    animation: workTitleMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
    z-index: 1;
  }
  
  body.dark-mode .work-title-container::before {
    background: #ffffff;
  }
  
  .work-title-reveal {
    position: relative;
    z-index: 2;
    transform: translateY(100%);
    animation: workTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .side-projects-title {
    font-size: 3rem;
    margin: 0 0 8px 0;
    text-align: center;
  }
  
  .side-projects-title-container {
    position: relative;
    overflow: hidden;
    animation: sideProjectsTitleReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .side-projects-title-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    transform: translateY(100%);
    animation: sideProjectsTitleMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
    z-index: 1;
  }
  
  body.dark-mode .side-projects-title-container::before {
    background: #ffffff;
  }
  
  .side-projects-title-reveal {
    position: relative;
    z-index: 2;
    transform: translateY(100%);
    animation: sideProjectsTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .work-container {
    max-width: calc(100vw - 24px);
    margin: 0 auto 16px auto;
    padding: 0 12px;
  }
  
  .work-grid {
    gap: 32px;
    margin-top: 16px;
  }
  
  .side-projects-grid {
    gap: 32px;
  }
  
  .work-project {
    padding: 0;
  }
  
  .work-project:last-child {
    margin-bottom: 200px;
  }
  
  .project-title {
    font-size: 20px;
  }
  
  .project-date {
    font-size: 20px;
  }
  
  .slideshow-container {
    max-width: 100%;
  }
  
  .side-project-image {
    width: calc(100vw - 32px);
    height: 200px;
  }
  
  .project-copy {
    font-size: 16px; /* Changed from 15px to 16px */
    text-align: left;
  }
  
  .side-project-copy {
    font-size: 16px; /* Changed from 15px to 16px */
    text-align: left;
  }
}

@media (max-width: 700px) {
  .work-title {
    font-size: 2rem;
    margin: 0 0 12px 0;
    text-align: left;
    /* Preserve animation properties */
    position: relative;
    z-index: 2;
    transform: translateY(100%);
    animation: workTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .work-title-container {
    position: relative;
    overflow: hidden;
    animation: workTitleReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .work-title-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    transform: translateY(100%);
    animation: workTitleMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
    z-index: 1;
  }
  
  body.dark-mode .work-title-container::before {
    background: #ffffff;
  }
  
  .work-title-reveal {
    position: relative;
    z-index: 2;
    transform: translateY(100%);
    animation: workTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .side-projects-title {
    font-size: 1.8rem;
    margin: 0 0 12px 0;
    text-align: left;
  }
  
  .side-projects-title-container {
    position: relative;
    overflow: hidden;
    animation: sideProjectsTitleReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .side-projects-title-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    transform: translateY(100%);
    animation: sideProjectsTitleMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
    z-index: 1;
  }
  
  body.dark-mode .side-projects-title-container::before {
    background: #ffffff;
  }
  
  .side-projects-title-reveal {
    position: relative;
    z-index: 2;
    transform: translateY(100%);
    animation: sideProjectsTitleSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  }
  
  .work-container {
    max-width: none;
    margin: 0 auto 8px auto;
    padding: 0 8px;
  }
  
  .work-grid {
    gap: 24px;
    margin-top: 12px;
  }
  
  .side-projects-grid {
    gap: 24px;
  }
  
  .work-project {
    padding: 0;
  }
  
  .work-project:last-child {
    margin-bottom: 50px;
  }
  
  .project-title {
    font-size: 20px;
  }
  
  .project-line-container {
    gap: 8px;
  }
  
  .project-line {
    min-width: 8px;
  }
  
  .project-date {
    font-size: 20px;
  }
  
  .project-copy {
    font-size: 16px; /* Changed from 15px to 16px */
    text-align: left;
  }
  
  .side-project-copy {
    font-size: 16px; /* Changed from 15px to 16px */
    text-align: left;
  }
  
  .slideshow-container {
    max-width: 100%;
  }
  
  .side-project-image {
    width: calc(100vw - 32px);
    height: 200px;
  }
} 

/* Slideshow Styles */
.slideshow-container {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 2110 / 1346;
  background: #1a1a1a;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.slideshow-slide.active {
  opacity: 1;
}

.slide-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}

.slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #000000;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.2s ease;
  z-index: 10;
}

.slideshow-nav img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(0);
  transition: all 0.2s ease;
}

.slideshow-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.slideshow-nav:hover img {
  filter: brightness(0) invert(0);
}

/* White arrows for dark slides */
.slideshow-nav.white-arrows img {
  filter: brightness(0) invert(1);
}

.slideshow-nav.white-arrows:hover img {
  filter: brightness(0) invert(1);
}

.slideshow-nav.prev {
  left: 20px;
}

.slideshow-nav.next {
  right: 20px;
}

/* Dark mode support for slideshow */
body.dark-mode .slideshow-container {
  background: #f5f5f5;
}

body.dark-mode .slide-image {
  filter: brightness(0.9) contrast(1.1);
}

/* Responsive design for slideshow */
@media (max-width: 900px) {
  .slideshow-nav {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }
  
  .slideshow-nav img {
    width: 22px;
    height: 22px;
  }
  
  .slideshow-nav.prev {
    left: 16px;
  }
  
  .slideshow-nav.next {
    right: 16px;
  }
}

@media (max-width: 700px) {
  .slideshow-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .slideshow-nav img {
    width: 20px;
    height: 20px;
  }
  
  .slideshow-nav.prev {
    left: 12px;
  }
  
  .slideshow-nav.next {
    right: 12px;
  }
}

/* Project Row Layout - Two Column Structure */
.project-row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: none;
  align-items: stretch;
  margin: 0;
}

.project-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-width: 500px;
}

.project-visual {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}

/* Update existing project styles for the new layout */
.project-header {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.project-copy {
  margin: 0;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

/* Responsive design for project row */
@media (max-width: 900px) {
  .project-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .project-visual {
    order: -1; /* Move slideshow to top */
  }
  
  .project-content {
    order: 1;
    max-width: none; /* Full width on tablet */
  }
  
  .project-title-container {
    padding: 24px 16px;
    font-size: 18px;
    border-radius: 16px;
    max-width: none; /* Full width on tablet */
  }
  
  .project-title-container .project-title {
    font-size: 20px;
  }
  
  .project-title-container .project-date {
    font-size: 20px;
  }
  
  .project-copy {
    padding: 24px 16px;
    font-size: 16px !important; /* Changed from 8px to 16px */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
    max-width: none; /* Full width on tablet */
  }
  
  .slideshow-nav {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }
  
  .slideshow-nav img {
    width: 22px;
    height: 22px;
  }
  
  .slideshow-nav.prev {
    left: 16px;
  }
  
  .slideshow-nav.next {
    right: 16px;
  }
}

@media (max-width: 700px) {
  .project-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .project-visual {
    order: -1; /* Move slideshow to top */
  }
  
  .project-content {
    order: 1;
    max-width: none; /* Full width on mobile */
  }
  
  .project-title-container {
    max-width: 100%;
    padding: 16px 16px;
    font-size: 16px;
    border-radius: 16px;
  }
  
  .project-title-container .project-title {
    font-size: 20px;
  }
  
  .project-title-container .project-date {
    font-size: 20px;
  }
  
  .project-copy {
    max-width: 100%;
    padding: 16px 16px;
    font-size: 16px !important; /* Changed from 8px to 16px */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
  }
  
  .slideshow-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .slideshow-nav img {
    width: 20px;
    height: 20px;
  }
  
  .slideshow-nav.prev {
    left: 12px;
  }
  
  .slideshow-nav.next {
    right: 12px;
  }
}

/* Project Title Container - styled like about-col */
.project-title-container {
  background: #A1FF3E;
  color: #000000;
  border-radius: 16px;
  padding: 32px 24px 32px 24px;
  font-family: 'ABC Diatype Medium', 'ABC Diatype', Arial, sans-serif;
  font-size: 20px;
  line-height: 1.25;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 0;
  gap: 4px;
}

.project-title-container .project-title {
  color: #000000;
  font-size: 32px;
  margin: 0;
  font-weight: normal;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.project-title-container .project-date {
  color: #000000;
  font-size: 32px;
  margin: 0;
  font-weight: normal;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0.8;
}

/* Dark mode support for project title container */
body.dark-mode .project-title-container {
  background: #DB5B02;
  color: #ffffff;
}

body.dark-mode .project-title-container .project-title {
  color: #ffffff;
}

body.dark-mode .project-title-container .project-date {
  color: #ffffff;
}

/* Dark mode support for project copy */
body.dark-mode .project-copy {
  background: #191919;
  color: #838383;
}

body.dark-mode .project-copy p {
  color: #838383;
}

/* Responsive design for project title container */
@media (max-width: 900px) {
  .project-title-container {
    padding: 24px 16px;
    font-size: 18px;
    border-radius: 16px;
  }
  
  .project-title-container .project-title {
    font-size: 20px;
  }
  
  .project-title-container .project-date {
    font-size: 20px;
  }
  
  .project-copy {
    padding: 24px 16px;
    font-size: 16px !important; /* Changed from 8px to 16px */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
    max-width: none; /* Full width on tablet */
  }
  
  .side-project-copy {
    padding: 24px 16px; /* Match project-copy padding */
    font-size: 16px !important; /* Changed from 8px to 16px */
    text-align: left;
  }
}

@media (max-width: 700px) {
  .project-title-container {
    max-width: 100%;
    padding: 16px 16px;
    font-size: 16px;
    border-radius: 16px;
  }
  
  .project-title-container .project-title {
    font-size: 20px;
  }
  
  .project-title-container .project-date {
    font-size: 20px;
  }
  
  .project-copy {
    max-width: 100%;
    padding: 16px 16px;
    font-size: 16px !important; /* Changed from 8px to 16px */
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
  }
  
  .side-project-copy {
    padding: 16px 16px; /* Match project-copy padding */
    font-size: 16px !important; /* Changed from 8px to 16px */
    text-align: left;
  }
}

/* Updated responsive styles for work container to match index.html full width approach */
@media (max-width: 900px) {
  .work-container {
    max-width: calc(100vw - 48px);
    margin: 0 24px 8px 24px; /* Consistent 8px bottom margin */
    padding: 0;
    width: calc(100vw - 48px);
  }
  
  .side-project-image {
    width: 100% !important; /* Override conflicting width */
    height: 200px;
  }
}

@media (max-width: 700px) {
  .work-container {
    max-width: calc(100vw - 32px);
    margin: 0 16px 8px 16px; /* Consistent 8px bottom margin */
    padding: 0;
    width: calc(100vw - 32px);
  }
  
  .side-project-image {
    width: 100% !important; /* Override conflicting width */
    height: 200px;
  }
}

/* Updated responsive spacing to match index.html */
@media (max-width: 900px) {
  .work-grid {
    gap: 8px;
    margin-top: 8px;
  }
  
  .side-projects-grid {
    gap: 8px;
  }
  
  .work-project:last-child {
    margin-bottom: 0; /* Remove extra margin */
  }
}

@media (max-width: 700px) {
  .work-grid {
    gap: 8px;
    margin-top: 8px;
  }
  
  .side-projects-grid {
    gap: 8px;
  }
  
  .work-project:last-child {
    margin-bottom: 0; /* Remove extra margin */
  }
}

/* Force 8px margin-top override for all screen sizes */
.work-grid {
  margin-top: 8px !important;
}

/* Additional override for tablet responsive section */
@media (max-width: 900px) {
  .work-grid {
    margin-top: 8px !important;
  }
}

/* Work page banner content - same animation as index but starts immediately */
.work-banner {
  animation: bannerContentReveal 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  justify-content: flex-start;
}

.work-banner::before {
  animation: bannerContentMask 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
}

.work-banner .banner-text {
  color: #000000;
  animation: bannerContentSlide 1.6s cubic-bezier(0.86, 0, 0.07, 1) 0s forwards;
  text-align: left;
}

body.dark-mode .work-banner .banner-text {
  color: #ffffff;
}

/* Project Tags */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.project-tag {
  background: #E5E5E5;
  color: #4A4A4A;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: 'ABC Diatype', Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.01em;
  white-space: nowrap;
  display: inline-block;
  line-height: 1.2;
}

/* Dark mode support for project tags */
body.dark-mode .project-tag {
  background: #4A4A4A;
  color: #E5E5E5;
}

/* Responsive design for project tags */
@media (max-width: 900px) {
  .project-tag {
    font-size: 13px;
    padding: 5px 10px;
  }
}

@media (max-width: 700px) {
  .project-tag {
    font-size: 12px;
    padding: 4px 8px;
  }
}

/* Responsive design for side projects container */
@media (max-width: 900px) {
  .side-projects-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 24px 120px 24px !important; /* Force consistent margins */
    gap: 8px;
    width: calc(100% - 48px);
  }
  
  .side-projects-container .top-banner {
    margin: 0 24px 8px 24px !important; /* Keep consistent spacing on tablet */
  }
}

@media (max-width: 700px) {
  .side-projects-grid {
    grid-template-columns: 1fr;
    margin: 0 16px 120px 16px !important; /* Force consistent margins */
    gap: 8px;
    width: calc(100% - 32px);
  }
  
  .side-projects-container .top-banner {
    margin: 0 16px 8px 16px !important; /* Adjust horizontal margins for mobile */
  }
}

/* Dark mode support for side projects */
body.dark-mode .side-project-image {
  background: #1a1a1a;
}

body.dark-mode .side-project-placeholder {
  color: #cccccc;
}

body.dark-mode .side-project-copy {
  background: #191919;
  color: #838383;
}

/* Responsive design for 1440px width */
@media (min-width: 901px) and (max-width: 1440px) {
  .project-copy p {
    font-size: 18px;
  }
  
  .project-title-container .project-title {
    font-size: 28px;
  }
  
  .project-title-container .project-date {
    font-size: 28px;
  }
  
  .project-title-container {
    padding: 28px 24px 28px 24px;
  }
  
  .project-copy {
    padding: 28px 24px 28px 24px;
    font-size: 18px;
  }
  
  .side-project-copy {
    padding: 28px 24px 28px 24px; /* Match project-copy padding */
    font-size: 18px;
  }
}

/* Responsive design for 1100px width - start stacking project visual above content */
@media (max-width: 1100px) {
  .project-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .project-visual {
    order: -1; /* Move slideshow to top */
  }
  
  .project-content {
    order: 1;
    max-width: none; /* Full width */
  }
}

.side-project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

.side-project-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

@media (max-width: 900px) {
  .side-project-image {
    width: 100%;
    height: 0;
    padding-bottom: 63.8%; /* Maintain same aspect ratio as slideshows (2110:1346) */
    background: #f5f5f5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
  }
  
  .side-project-image img,
  .side-project-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
  }
}

@media (max-width: 700px) {
  .side-project-image {
    width: 100%;
    height: 0;
    padding-bottom: 63.8%; /* Maintain same aspect ratio as slideshows (2110:1346) */
    background: #f5f5f5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
    position: relative;
  }
  
  .side-project-image img,
  .side-project-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
  }
}

/* Force override for project-copy font sizes on tablet and mobile */
@media (max-width: 900px) {
  .project-copy {
    font-size: 16px !important;
  }
}

@media (max-width: 700px) {
  .project-copy {
    font-size: 16px !important;
  }
}

/* Global link styles - open in new tab and match body text color */
/* Note: CSS target property doesn't work for opening in new tabs. 
   JavaScript is required to add target="_blank" to all links. */
a[href] {
  color: inherit;
  text-decoration: underline;
}

a[href]:hover {
  color: inherit;
  opacity: 0.8;
}

/* Override specific link colors to match body text */
.about-col a {
  color: inherit;
}

body.dark-mode .about-col a {
  color: inherit;
}

/* Ensure all links inherit the text color from their parent */
.project-copy a,
.side-project-copy a,
.about-col a,
p a {
  color: inherit;
  text-decoration: underline;
}

body.dark-mode .project-copy a,
body.dark-mode .side-project-copy a,
body.dark-mode .about-col a,
body.dark-mode p a {
  color: inherit;
  text-decoration: underline;
}

/* Prevent hover color change on active buttons */
.nav-button.active:hover {
  background: #ffffff !important; /* Keep white background for active buttons */
}

/* Dark mode - prevent hover color change on active buttons */
body.dark-mode .nav-button.active:hover {
  background: #000000 !important; /* Keep black background for active buttons in dark mode */
}

/* Active button states */
.nav-button.active {
  background: #ffffff;
  border: 2px solid #000000;
  z-index: 1003;
}

.nav-button.active.hover {
  width: 63px;
  height: 63px;
}

.nav-button.active.sibling-close {
  width: 52.5px;
  height: 52.5px;
}

.nav-button.active.sibling-far {
  width: 48.3px;
  height: 48.3px;
}

.nav-button.active img {
  filter: brightness(0) invert(0);
}

.nav-button.active.hover img {
  width: 33px;
  height: 33px;
}

.nav-button.active.sibling-close img {
  width: 27.5px;
  height: 27.5px;
}

.nav-button.active.sibling-far img {
  width: 25.3px;
  height: 25.3px;
}

body.dark-mode .nav-button img {
  filter: brightness(0) invert(0);
}

/* Dark mode hover state for buttons without .hover class and not active */
body.dark-mode button.nav-button:hover:not(.hover):not(.active),
body.dark-mode a.nav-button:hover:not(.hover):not(.active) {
  background: #BCBDC7 !important;
}

body.dark-mode .nav-button:hover img {
  filter: brightness(0) invert(0);
}

/* Override the conflicting general hover rule */
body.dark-mode .nav-button.hover:hover {
  /* Keep white background for hover class in dark mode */
}

body.dark-mode .nav-button.active:hover {
  background: #000000 !important; /* Keep black background for active buttons in dark mode */
}

/* Light mode overrides for consistency */
.nav-button.hover:hover {
  /* Keep black background for hover class in light mode */
}

.nav-button.active:hover {
  background: #ffffff !important; /* Keep white background for active buttons in light mode */
}

/* Active button states - these must override all other states */
.nav-button.active {
  background: #ffffff !important; /* Force white background for active buttons */
  border: 2px solid #000000;
  z-index: 1003;
}

/* Active buttons with hover class should maintain active colors */
.nav-button.active.hover {
  background: #ffffff !important; /* Force white background for active buttons with hover */
  width: 63px;
  height: 63px;
}

.nav-button.active.sibling-close {
  background: #ffffff !important; /* Force white background for active buttons */
  width: 52.5px;
  height: 52.5px;
}

.nav-button.active.sibling-far {
  background: #ffffff !important; /* Force white background for active buttons */
  width: 48.3px;
  height: 48.3px;
}

.nav-button.active img {
  filter: brightness(0) invert(0) !important; /* Force black icons for active buttons */
}

.nav-button.active.hover img {
  width: 33px;
  height: 33px;
  filter: brightness(0) invert(0) !important; /* Force black icons for active buttons */
}

.nav-button.active.sibling-close img {
  width: 27.5px;
  height: 27.5px;
  filter: brightness(0) invert(0) !important; /* Force black icons for active buttons */
}

.nav-button.active.sibling-far img {
  width: 25.3px;
  height: 25.3px;
  filter: brightness(0) invert(0) !important; /* Force black icons for active buttons */
}

/* Dark mode active button states */
body.dark-mode .nav-button.active {
  background: #000000 !important; /* Force black background for active buttons in dark mode */
  border: 2px solid #ffffff;
}

body.dark-mode .nav-button.active.hover {
  background: #000000 !important; /* Force black background for active buttons with hover in dark mode */
}

body.dark-mode .nav-button.active.sibling-close {
  background: #000000 !important; /* Force black background for active buttons in dark mode */
}

body.dark-mode .nav-button.active.sibling-far {
  background: #000000 !important; /* Force black background for active buttons in dark mode */
}

body.dark-mode .nav-button.active img {
  filter: brightness(0) invert(1) !important; /* Force white icons for active buttons in dark mode */
}

body.dark-mode .nav-button.active.hover img {
  filter: brightness(0) invert(1) !important; /* Force white icons for active buttons in dark mode */
}

body.dark-mode .nav-button.active.sibling-close img {
  filter: brightness(0) invert(1) !important; /* Force white icons for active buttons in dark mode */
}

body.dark-mode .nav-button.active.sibling-far img {
  filter: brightness(0) invert(1) !important; /* Force white icons for active buttons in dark mode */
}

/* Also fix any slideshow that might be in project-visual containers */
.project-visual .slideshow-container {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden;
}

.project-visual .slideshow-slide {
  max-width: 100% !important;
  overflow: hidden;
}

.project-visual .slide-image,
.project-visual .slide-video {
  max-width: 100% !important;
  width: 100% !important;
  height: 100%;
  object-fit: contain;
}