/* Site-wide layout primitives */
.container { width: var(--container); margin-inline: auto; }
.section { padding: clamp(48px, 10vw, 120px) 0; }
.section-header { margin-bottom: clamp(20px, 3vw, 40px); }

/* Sticky header offset */
.no-js body { padding-top: 0; }
body { padding-top: var(--header-h); }

/* Anchor offset so targets don't sit under the sticky header */
.section, .hero { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Global page progress bar */
.pageProgress{
  position: fixed;
  left: 50%; bottom: 10px; transform: translateX(-50%);
  width: min(260px, 48vw); height: 2px; border-radius: 2px;
  background: rgba(0,0,0,.08);
  background: color-mix(in oklab, var(--fg) 20%, transparent);
  z-index: 999;
  overflow: hidden;
}
.pageProgress span{
  display: block; height: 100%;
  width: calc(var(--pageProg, 0) * 100%);
  background: currentColor; opacity: .85;
  transition: width 120ms linear;
}
/* Hide page progress during horizontal chapter to avoid duplicate progress UI */
.in-chapter .pageProgress,
.in-transition .pageProgress{ opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease); }

/* Reduce off-screen work (Chrome/Safari/Edge) */
#portfolio, .portStage{
  content-visibility: auto;
  contain-intrinsic-size: 1200px 2400px;
}
/* If JS is active, avoid content-visibility during measurements */
html.js #portfolio,
html.js .portStage{
  content-visibility: visible;
  contain-intrinsic-size: auto;
}