* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Instrument Serif", serif;
  background-color: var(--us-bg-canvas);
  color: var(--us-fg-default);
  margin-bottom: 100px;
}

.main-container {
  display: flex;
  flex-direction: column;
  gap: var(--us-spacing-224);
  padding: var(--us-spacing-48-xl) var(--us-spacing-48-xl) 0;
  max-width: 1200px;
  margin: 0 auto;
}

.info-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--us-spacing-32);
}

.header-content {
  max-width: 424px;
  display: flex;
  flex-direction: column;
  gap: var(--us-spacing-8-s);
  will-change: opacity;
}

h1 {
  font-size: var(--us-sizing-48-xl);
  line-height: var(--us-line-height-heading-1);
  font-weight: var(--us-font-weight-regular);
}

.subtitle {
  font-size: var(--us-font-size-heading-1);
  line-height: var(--us-line-height-heading-1);
  color: var(--us-fg-subtext);
}

.info-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--us-spacing-24-l);
  max-width: var(--us-sizing-320);
  will-change: opacity;
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: var(--us-spacing-4-xs);
}

.info-block h2 {
  font-size: var(--us-font-size-heading-3);
  line-height: var(--us-line-height-heading-3);
  font-weight: var(--us-font-weight-regular);
  color: var(--us-fg-subtext);
}

.info-block p {
  font-size: var(--us-font-size-heading-3);
  line-height: var(--us-line-height-heading-3);
}

.info-block a {
  font-size: var(--us-font-size-heading-3);
  line-height: var(--us-line-height-heading-3);
  color: var(--us-fg-default);
  text-decoration: none;
}

.info-block a:hover {
  text-decoration: underline;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--us-spacing-24-l);
}

.project-card {
  display: flex;
  gap: var(--us-spacing-12);
  white-space: normal;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.project-card:hover {
  cursor: crosshair;
}

.project-card:hover .project-title-secondary {
  text-decoration: none;
}

.project-card:hover .project-title {
  text-decoration: underline;
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  will-change: opacity;
}

.project-title {
  font-size: var(--us-font-size-heading-3);
  line-height: var(--us-line-height-heading-3);
  font-weight: var(--us-font-weight-regular);
}

.project-title-secondary {
  font-size: var(--us-font-size-heading-3);
  line-height: var(--us-line-height-heading-3);
  font-weight: var(--us-font-weight-regular);
  color: var(--us-fg-subtext);
}

.project-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  will-change: max-height, padding;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

/* --- Exit Animation Styles --- */

.fade-in-transition {
    transition: opacity 700ms ease-in-out;
}

.fade-in {
    opacity: 1 !important;
    z-index: 0; /* Bring it slightly forward, but still behind absolute elements if needed */
}

.fade-out-transition {
    transition: opacity 300ms ease-in-out;
    will-change: opacity; /* Hint for optimization */
}

.fade-out {
    opacity: 0 !important;
}

/* Add definitions for shrink-height animation used in JS */
.shrink-height-transition {
    transition: max-height 500ms cubic-bezier(0.4, 0, 0.2, 1); /* Use SHRINK_DURATION from JS */
    will-change: max-height; /* Hint for optimization */
    overflow: hidden; /* Prevent content overflow during shrink */
}

.shrink-height {
    max-height: 0 !important;
}

/* Add definitions for the new slide-up animation */
.slide-up-transition {
    transition: max-height 800ms cubic-bezier(0.4, 0, 0.2, 1), 
                padding-top 800ms cubic-bezier(0.4, 0, 0.2, 1), 
                padding-bottom 800ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height, padding;
    overflow: hidden;
}

.slide-up {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Apply base will-change to elements that might animate */
.header-content,
.info-blocks,
.project-header {
    will-change: opacity;
}

#canvasContainer {
  position: fixed; /* Ensure it stays put */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Keep behind content initially */
  opacity: 0; /* Start hidden */
  will-change: opacity; /* Optimization hint */
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); /* Optional: slight upward movement */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header-content,
.info-blocks,
.projects-grid {
  opacity: 0; /* Start hidden */
  animation: fadeIn 0.5s ease-out forwards; /* Apply animation */
}

.header-content {
  animation-delay: 0s;
}

.info-blocks {
  animation-delay: 0.2s;
}

.projects-grid {
  animation-delay: 0.4s;
}

/* Form Styles */
.embeddable-buttondown-form {
  display: flex;
  flex-direction: column;
  gap: var(--us-spacing-8-s);
  margin-top: var(--us-spacing-12); /* Add some space above the form */
}

.embeddable-buttondown-form label {
  font-family: var(--us-font-family-default);
  font-size: var(--us-font-size-label);
  line-height: var(--us-line-height-label);
  font-weight: var(--us-font-weight-regular);
  color: var(--us-fg-subtext);
}

.form-input-group {
  display: flex;
  gap: var(--us-spacing-8-s);
}

.embeddable-buttondown-form input[type="email"] {
  font-family: "Instrument Serif", serif;
  font-size: var(--us-font-size-heading-3);
  line-height: var(--us-line-height-heading-3);
  font-weight: var(--us-font-weight-regular);

  color: var(--us-fg-default);
  background-color: var(--us-bg-lowest);
  border: 1px solid var(--us-border-soft);
  padding: var(--us-spacing-12) var(--us-spacing-16-m);
  border-radius: var(--us-radii-micro-small);
  flex-grow: 1; /* Allow email input to take available space */
}

.embeddable-buttondown-form input[type="email"]::placeholder {
  color: var(--us-fg-subtext);
  opacity: 0.7;
}

.embeddable-buttondown-form input[type="email"]:focus {
  outline: none;
  border-color: var(--us-accent-high);
}

.embeddable-buttondown-form input[type="submit"] {
  font-family: "Instrument Serif", serif;
  font-size: var(--us-font-size-heading-3);
  line-height: var(--us-line-height-heading-3);
  font-weight: var(--us-font-weight-regular);

  color: var(--us-fg-default);
  background-color: var(--us-bg-high);
  border: none;
  padding: var(--us-spacing-12) var(--us-spacing-24-l);
  border-radius: var(--us-radii-micro-small);
  cursor: pointer;
}

.embeddable-buttondown-form input[type="submit"]:hover {
  background-color: var(--us-bg-low); /* Darken on hover - or choose another token */
}

@media (max-width: 768px) {
  .info-section {
    flex-direction: column;
  }

  .info-block {
    width: 100%;
  }

  .projects-grid {
    display: block;
  }
}