/* ============================================================
   BASE / RESET
   Global element defaults shared by every page in the project.
============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* Reserve space for the sticky navbar so any anchor jump (#home,
     #services, #projects...) lands its target's top right below the
     navbar instead of partially hidden underneath it. */
  scroll-padding-top:var(--nav-h);
}

body{
  font-family: var(--font-body);
  background:var(--color-ink);
  color:var(--color-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* No padding-top here — the navbar is back in normal document flow
     (position:sticky, see navbar.css) and already reserves its own
     space at the top, so nothing extra is needed and there's no
     black strip: Hero's own height already subtracts var(--nav-h). */
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
ul{ list-style:none; }

/* Defensive safety net: nothing with intrinsic pixel dimensions
   (a photo, an inline SVG someone forgets to size, a video without
   its own explicit width rule) can ever force horizontal overflow on
   a narrow viewport. Every image/video in this codebase that needs
   full-bleed sizing already sets its own explicit width:100% (Hero
   videos, card media, etc.) — max-width:100% is redundant, harmless
   overlap with those, not a conflict, since it only ever caps size
   downward, never up. */
img, video, svg{ max-width:100%; }

/* Keyboard-only "Skip to content" link: visually hidden until it
   receives focus (first Tab stop on the page), then drops into view
   above everything so keyboard/screen-reader users can bypass the
   navbar and jump straight to <main>. Purely an accessibility aid —
   invisible to mouse/touch users, no effect on layout or visuals. */
.skip-link{
  position:absolute;
  top:-48px;
  left:12px;
  z-index:1000;
  background:#2F241B;
  color:#F4EEE4;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  padding:12px 20px;
  border-radius:8px;
  transition:top 0.25s ease;
}
.skip-link:focus{
  top:12px;
}

/* ============================================================
   .reveal-lite — shared mobile/tablet entrance utility
   ----------------------------------------------------------
   Used below 1024px in place of GSAP/ScrollTrigger reveals (About,
   Contact — see their JS). One class added up front, one class added
   once via IntersectionObserver, pure CSS transition doing the actual
   animating on the browser's own compositor thread — no JS runs
   during the scroll itself, and nothing here is tied to scroll
   position. Desktop (>=1024px) never sees this class at all; its
   sections use the richer GSAP timelines instead.
============================================================ */
@media (max-width:1023px){
  .reveal-lite{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal-lite.is-visible{
    opacity:1;
    transform:translateY(0);
  }
}
@media (prefers-reduced-motion:reduce){
  .reveal-lite{ transition-duration:0.01ms; opacity:1; transform:none; }
}