/* ============================================================================
   CHRISTINE MICHELE EVENTS — SHARED BASE
   Prepared 2026-08-01 · single-page concept build.

   What lives here (identical across both concepts, so the comparison is honest):
     · a light reset
     · the SPACING scale (8px base) + wrap + fluid page padding
     · the MOTION tokens + the reduced-motion collapse
     · a few structural helpers used by both concepts

   What DOES NOT live here — on purpose:
     · colour + type. The two concepts are TESTING different palettes and
       typefaces, so each concept declares its own :root colour + font tokens
       inline. base.css must stay palette-neutral.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:where(button,a){cursor:pointer}

/* body copy never leaves a word stranded; headings balance */
p,li{text-wrap:pretty}
h1,h2,h3,h4,.lede{text-wrap:balance}

/* ---- SPACING + LAYOUT tokens (shared) ---------------------------------- */
:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:128px; --s12:160px;

  --wrap: 1280px;
  --wrap-narrow: 940px;
  --pad-x: 22px;

  /* motion — every value used by both concepts references these */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
  --t-fast: 160ms; --t-mid: 300ms; --t-slow: 620ms;
}
@media (min-width:640px){ :root{ --pad-x:40px; } }
@media (min-width:1024px){ :root{ --pad-x:64px; } }
@media (min-width:1440px){ :root{ --pad-x:80px; } }

/* ---- structural helpers ------------------------------------------------ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.u-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* skip link, shared shape (colour set per concept) */
.skip{position:absolute;left:16px;top:-48px;z-index:200;padding:10px 16px;
  transition:top var(--t-fast) var(--ease)}
.skip:focus{top:16px}

/* ---- scroll-reveal (one job: mark a section entering the register) -----
   Elements opt in with [data-reveal]; page.js adds .is-in when they enter the
   viewport ONCE. Transform + opacity only. Fallback = visible if JS/off. */
[data-reveal]{opacity:1}
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-slow) var(--ease-soft), transform var(--t-slow) var(--ease-soft)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal][data-reveal="up-sm"]{transform:translateY(10px)}

/* media parallax frames clip; page.js translates the inner media on scroll */
.pxframe{overflow:hidden;position:relative}
.pxframe > img,.pxframe > .ph__fill{will-change:transform}

/* ---- REDUCED MOTION: collapse everything, show revealed content -------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .pxframe > img,.pxframe > .ph__fill{transform:none !important}
}