/* ─────────────────────────────────────────────────────────────────────────────
   main.css — Shrestha Dutta · shresthadutta.com
   Layer order declared once; specificity flows down the list.
   conventions.md §3 · brand.md tokens only · refs spec §0
   ───────────────────────────────────────────────────────────────────────────── */

/* 1. Declare layer order — later layers always win */
@layer reset, tokens, base, layout, components, sections, utilities;

/* 2. Imports — must follow @layer declarations, precede all other rules */
@import "tokens.css"  layer(tokens);
@import "base.css"    layer(base);
@import "layout.css"  layer(layout);

/* Components (all M0 utilities) */
@import "components/header.css"   layer(components);
@import "components/reveal.css"   layer(components);
@import "components/clip.css"     layer(components);
@import "components/parallax.css" layer(components);
@import "components/video.css"    layer(components);
@import "components/cta.css"      layer(components);
@import "components/section.css"  layer(components);
@import "components/progress.css" layer(components);

/* Sections (built one per milestone, M1–M7) */
@import "sections/hero.css"     layer(sections);
@import "sections/universe.css" layer(sections);
@import "sections/maker.css"    layer(sections);
@import "sections/voyager.css"  layer(sections);
@import "sections/soul.css"     layer(sections);
@import "sections/signal.css"      layer(sections);
@import "sections/invitation.css"  layer(sections);

/* 3. Reset — inline block; layer declared first above, so specificity is lowest */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
  }

  body { min-block-size: 100dvh; }

  img, video, svg, picture, canvas {
    display: block;
    max-inline-size: 100%;
  }

  input, button, textarea, select { font: inherit; }

  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

  ul[role="list"],
  ol[role="list"] { list-style: none; }

  :target { scroll-margin-block-start: 5ex; }
}