/* Loading screen */
.loading {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  background-color: #F3F3F3 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 999999 !important;
}

.loading.hide {
  display: none !important;
}

.flower {
  width: 80px;
  height: 80px;
  animation: slowSpin 2s ease-out infinite;
}

@keyframes slowSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(1200deg); }
}

.loading-text-container {
  margin-top: 48px;
}

/* Left sticky navigation */
.side-nav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 180px;
  padding: 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: transparent;
  z-index: 1000;
}

.side-nav a {
  display: block;
  color: var(--foreground-content-quaternary);
  text-decoration: none;
  margin-bottom: 16px;
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
  font-family: 'Helvetica', sans-serif;
  letter-spacing: normal;
}

/* Selected/active nav link (global) */
.side-nav .side-link.active,
.side-nav .side-link.active:visited {
  color: var(--foreground-content-primary);
}

@media (max-width: 752px) {
  .side-nav {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px;
  }

  /* stack nav above content at narrow widths */
  .side-nav {
    position: relative;
    width: 100%;
    height: auto;
    padding: 48px 48px 0 48px; /* add 48px top padding when stacked */
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 1000;
    margin-bottom: 24px; /* add vertical space between nav and content when stacked */
  }

  /* ensure nav's content area (excluding horizontal padding) matches project card width */
  .side-nav {
    margin-left: 0;
    margin-right: 0;
  }

  .side-nav a {
    text-align: center;
    display: inline-block;
    width: auto;
    margin-bottom: 0;
    margin-right: 0;
  }
}

/* Centered hook paragraph for homepage intro */
.intro.centered {
  width: 588px;
  max-width: 588px;
  margin: calc(300px - var(--body-top-padding) - var(--page-container-top-padding)) auto 16px;
  transform: translateX(-90px); /* visually center in viewport by offsetting the fixed 180px nav */
  text-align: center;
  color: var(--foreground-content-primary);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* When homepage centering is active, remove the calc margin and use small bottom spacing for the intro */
.homepage .intro.centered {
  margin: 0 auto 16px; /* keep small spacing below intro */
}

@media (max-width: 752px) {
  /* disable visual offset for centered hook paragraph when nav is stacked */
  .intro.centered {
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* Make intro and list fluid within viewport with comfortable gutters */
  .intro.centered {
    width: 100%;
    max-width: none;
    transform: none !important;
    margin-left: 0;
    margin-right: 0;
    margin-top: 48px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Make text left-aligned on small screens */
  .intro.centered {
    text-align: left;
  }

  /* Adjust text sizes for small screens */
  .intro.centered {
    font-size: inherit;
    line-height: inherit;
  }
}

/* Work section list under the intro paragraph */
.work-section.centered {
  width: 588px;
  max-width: 588px;
  margin: 68px auto 0; /* spacing from intro paragraph */
  transform: translateX(-90px);
  padding: 0 60px; /* 60px padding left and right compared to the paragraph above */
  box-sizing: border-box;
  text-align: left;
  color: var(--foreground-content-primary);
}

@media (max-width: 752px) {
  .work-section.centered {
    margin-top: 40px; /* increase space between intro and work section on mobile */
  }
}

.project-line {
  display: block;
}

/* Default spacing between lines: 16px */
.project-line + .project-line {
  margin-top: 16px;
}

/* Make the gap after the first line ("Work") 24px */
.project-line:first-child + .project-line {
  margin-top: 24px;
}

/* Color the 'Work' heading using the quaternary token */
.project-line:first-child {
  color: var(--foreground-content-quaternary);
}

@media (max-width: 752px) {
  /* also disable offset for work section on small screens */
  .work-section.centered {
    width: 100%;
    transform: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Slightly tighter paddings for the work section on small screens */
  .work-section.centered {
    padding: 0;
    margin-top: 24px; /* reduce gap from desktop 68px */
  }

  /* Maintain intra-list spacing but ensure legibility */
  .project-line + .project-line {
    margin-top: 12px;
  }

  /* Adjust text sizes for small screens */
  .project-line {
    font-size: inherit;
  }
}

/* Projects grid: fluid two-column maximum, no explicit min/max breakpoints */
.projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* keep columns from shrinking below 320px */
  gap: 32px 80px; /* row-gap column-gap */
  margin: 0 auto;
  justify-items: stretch;
  width: 100%;
  max-width: 960px; /* cap grid so it's visually centered within the content area */
  transform: translateX(-90px); /* shift left by half the 180px nav so grid is visually centered in viewport */
}

@media (max-width: 752px) {
  /* narrow: force single-column layout */
  .projects-list {
    grid-template-columns: 1fr;
    max-width: none;
    margin: 0;
    transform: none; /* remove desktop shift on small screens */
    overflow-x: auto; /* allow horizontal scroll when items exceed viewport */
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 1199px) {
  .projects-list {
    gap: 80px;
  }
}

/* Force stable two-column layout at and above 933px to avoid brief reflow glitches */
@media (min-width: 933px) {
  .projects-list {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 1200px; /* widen projects area for two-column layouts */
  }
  /* let project cards stretch to fill their grid columns in two-column layout */
  .projects-list .project-card {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 1200px) {
  .projects-list {
    gap: 80px;
  }
}

/* Thumbnail: 8px radius, no fill, light grey border */
.thumbnail {
  width: 100%;
  aspect-ratio: 1 / 1; /* always square */
  /* let replaced elements (img/gif) fill the square and crop rather than stretch */
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  background-color: var(--card-bg);
  border: none;
  border-radius: var(--number-4);
  box-shadow: none;
  transition: none;
}

/* Lock icon styling for project cards */
.project-lock-icon {
  display: inline;
  margin-right: 8px;
  vertical-align: middle;
}

/* Two-column layout for about page */
.about-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 68px;
  align-items: flex-start;
  margin: 0 auto;
  transform: translateX(-90px); /* visually center in viewport by offsetting the fixed 180px nav */
  max-width: 900px;
}

.about-image {
  flex: 0 0 calc(33.333% - 34px); /* 1/3 width minus half the gap */
  aspect-ratio: 0.86 / 1;
  background-color: var(--card-bg);
  border: none;
  border-radius: var(--number-4);
  max-width: 220px;
  min-width: 180px;
  object-fit: cover;
  object-position: center;
}

.about-content {
  flex: 1;
}

.about-bio-second {
  margin-top: var(--space-lg);
  margin-bottom: 80px;
}

.homepage .projects-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center the intro + list block */
}

@media (max-width: 752px) {
  .about-layout {
    flex-direction: column;
    gap: 24px;
    transform: none;
    margin: 0;
  }

  .about-image {
    flex: 0 0 auto;
    max-width: 220px;
    aspect-ratio: 0.86 / 1;
  }

  .about-content {
    flex: 0 0 auto;
  }

  /* Add 80px top margin to homepage content when nav stacks */
  .homepage .projects-section {
    margin-top: 80px;
  }
}