@view-transition {
  navigation: auto;
}

/* --- Global Variables & Reset --- */
:root {
  --bg-color: #000;
  --headline-color: #FFDCBD;
  --text-color: #F4ECE4;
  --font-family: 'Plus Jakarta Sans', sans-serif;
  accent-color: var(--headline-color);
  font-size: 23px; 
  line-height: 1.3em;
}

body {
  margin: 0;
  box-sizing: border-box;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  overflow-x: hidden;
  
  display: grid;
  grid-template-rows: auto 1fr auto; /* Stacks Hero, Content, Footer */
  justify-items: center;
  min-height: 100vh;
  gap: 160px; /* Large spacing between major sections */
}

/* --- Hero Section --- */
header {
  position: relative;
  width: 100%;
  min-height: 60vh;
  
  h1 {
    margin: 0;
    font-size: 3.4em;
    font-weight: 600; /* Semibold */
    color: var(--headline-color);
    line-height: 1.1;
    z-index: 2; /* Keeps text above the image */
    position: relative;
    padding-inline-start: 30vh;
    padding-block-start: 20vh;
  }
  
  img {
    position: absolute;
    left: 30vh;
    top: -8vh;
    height: 800px;
    z-index: 1;
    pointer-events: none; /* Prevents the image from blocking text selection */
  }
}

main {
  display: grid;
  gap: 0px;
  max-width: 700px;
  z-index: 2;
}

section {
  margin-trim: block;
  padding: 1em; /* fallback for browsers lh without support */
  padding: 1lh;
  
  h2 {
    font-weight: 600; /* Semibold */
    font-size: 1.5em;
  }
  
  h3 {
    font-weight: 600;
    font-size: 1.2em;
  }
  
  p {
    margin-block: 1lh;
    font-weight: 400; /* Regular */
    text-wrap: pretty;
  }
}

.carousel {
  max-width: 700px;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  
  li {
    list-style-type: none;
    scroll-snap-align: center;
    
    flex: 0 0 60vw;
    
    img {
      max-height: 400px;
    }
    
    figure {
      width: fit-content;
    }
    
    figcaption {
      font-size: 0.8em;
      opacity: 0.7;
      text-align: center;
    }
  }
}

/* --- Footer --- */
a {
  color: var(--text-color);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

a:hover {  
  opacity: 1;
}

footer {
  display: grid;
  grid-template-columns: repeat(3, auto);
  padding-bottom: 4vh;
  width: 700px;
  align-content: center;
  justify-content: space-evenly;
  
  a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.8em;
  }
  
  a:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.12em;
  }
}

body.secondary-page {
  grid-template-rows: 1fr auto; 
  
  p {
    font-size: 18px; 
  }
  
  padding-top: 5vh; 
}

/* --- Basic Responsive Adjustments --- */
@media (max-width: 1024px) {
  header {
    min-height: 40vh; 
  }
  
  header h1 {
    /* Shrinks the massive 30vh gap so text isn't pushed off-screen on tablets */
    padding-inline-start: 10vw; 
    padding-block-start: 15vh;
  }
  
  header img {
    top: 0;
    left: 10vw; 
  }
  
  footer {
    /* Prevents the 700px fixed width from breaking the layout on smaller screens */
    width: 100%; 
  }
}

@media (max-width: 768px) {
  :root {
    /* MAGIC TRICK: Because you used 'em' for your fonts, lowering the root 
    font-size here instantly scales down ALL typography perfectly on mobile! */
    font-size: 18px; 
  }
  
  body { 
    gap: 80px; 
  }
  
  header { 
    /* Allows the container to wrap tightly around the stacked text and image */
    min-height: auto; 
    display: flex;
    flex-direction: column;
  }
  
  header h1 { 
    /* Removes the desktop positioning so it sits cleanly on the left */
    padding: 0; 
    font-size: 3em; 
  }
  
  header img { 
    /* Puts the image back into the normal document flow */
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto; /* Lets the height scale naturally with the width */
    margin-top: 2lh; 
  }
  
  footer { 
    grid-template-columns: 1fr; /* Stacks the links vertically */
    gap: 2rem; 
    text-align: center; 
  }
}