/* Base element defaults + shared utility classes.
   Consumers get these for free by linking styles.css. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--m-red);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--white)}
strong{color:var(--text-heading);font-weight:600}
::selection{background:var(--m-red);color:var(--white)}

/* GRAIN + VIGNETTE — fixed, above everything, always on */
.ld-grain::before{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;background-image:var(--grain-image);opacity:var(--grain-opacity);mix-blend-mode:overlay}
.ld-grain::after{content:"";position:fixed;inset:0;z-index:998;pointer-events:none;background:var(--vignette)}

/* TYPE SCALE */
h1,h2,h3,.display{font-family:var(--font-display);font-variation-settings:'wdth' var(--wdth-display);font-weight:900;text-transform:uppercase;color:var(--text-heading);letter-spacing:var(--track-display);line-height:var(--lh-display)}
.t-hero{font-size:var(--size-hero)}
.t-h1{font-size:var(--size-h1)}
.t-h2{font-size:var(--size-h2)}
.t-h3{font-size:var(--size-h3);font-variation-settings:'wdth' var(--wdth-tight)}
.t-body-lg{font-size:var(--size-body-lg);line-height:var(--lh-body-lg);font-weight:400}
.t-body{font-size:var(--size-body)}
.t-mono{font-family:var(--font-mono);font-size:var(--size-mono);letter-spacing:var(--track-mono);text-transform:uppercase}
.t-mono-sm{font-family:var(--font-mono);font-size:var(--size-mono-sm);letter-spacing:var(--track-mono-sm);text-transform:uppercase}

/* SIGNATURE TREATMENTS */
.t-outline{color:transparent;-webkit-text-stroke:var(--outline-stroke) var(--outline-color)}
.t-outline-red{color:transparent;-webkit-text-stroke:var(--outline-stroke) var(--m-red)}
.t-lastred{color:var(--m-red)}

/* SCROLL REVEAL — add .reveal, JS adds .in */
.reveal{opacity:0;transform:translateY(var(--reveal-offset));transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}