/* OPTIMIZED CSS: Constraints & Reservations */

/* FIX 1: Negotiate the Scrollbar Space */
html {
  scrollbar-gutter: stable; /* has downside of browser-width bar not stretching to edges */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: #2563eb;
  color: white;
  padding: 0 20px;
  z-index: 10;

  nav {
    display: flex;
    gap: 1rem;
  }
  
  a {
    color: white;
  }
}

main {
  padding-top: 80px;
  max-width: 600px;
  margin: 0 auto;
}

section {
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  padding: 1rem;

  /* FIX 2: Containment */
  /* "Dear Browser: Nothing inside here affects layout outside here." */
  contain: layout;
}

/* FIX 3: Scroll Margin */
/* Redefines the scroll target to sit BELOW the header */
:target {
  scroll-margin-top: 80px;
}

/* FIX 4: Image Reservations */
img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve space BEFORE the image loads */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: #f0f0f0; /* Visual placeholder */
}

#lateContent {
  display: none;
}

/* Skeleton Styles for stability */
.skeleton-wrapper {
  animation: pulse 1.5s infinite;
}
.skeleton-text {
  height: 1lh;
  background: #eee;
  width: 80%;
  margin-bottom: 1rem;
}
.skeleton-box {
  aspect-ratio: 3 / 2;
  background: #eee;
}

@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

#lateScrollbar {
  height: 101vh;
  display: none;
}