/* mws-site-kit v0.2.0 | base.css
   ==========================================================================
   Reset, layout container, typography and buttons.
   Depends on tokens.css. Load tokens.css FIRST.

   Nothing in here is per-client. If you are editing this file for one site,
   the change probably belongs in that site's own stylesheet instead.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-900);
  font:400 var(--step-0)/1.6 var(--font-body);
  overflow-x:hidden;              /* torn edges and entrance animations
                                     briefly overhang; without this they
                                     produce a horizontal scrollbar on
                                     mobile that nothing explains. */
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* Visible focus, on the accent colour so it is impossible to miss.
   :focus-visible rather than :focus so mouse users do not see rings on
   click, but keyboard users always do. Do not remove this. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* Skip link. Present on every page, visible only when focused. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink-950);color:var(--white);
  padding:.75rem 1.1rem;font:700 var(--step-0)/1 var(--font-body);
}
.skip:focus{left:0}

/* ---------- layout container ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem);
}

/* ---------- typography ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  /* The display face's weight, set by the font pairing - see
     css/fonts/<pairing>.css and tools/fetch-fonts.mjs.

     It is a token and not a constant because it is a property of the FACE,
     not of the design. Archivo Black ships at one heavy weight and is
     addressed as 400, so asking for 700 only triggers ugly synthetic
     bolding. Zilla Slab and Inter are multi-weight, and at 400 the same
     headings render limp. Hard-coding 400 here silently made every pairing
     but the first one look wrong.

     The 400 fallback keeps sites that predate the pairings rendering
     exactly as they did. */
  font-weight:var(--font-display-weight,400);
  letter-spacing:-.02em;
  line-height:.98;
  margin:0;
  text-transform:uppercase;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-.01em}

p{margin:0 0 1em;max-width:62ch}   /* 62ch is a readable measure. Long
                                      lines are the most common failure on
                                      a wide desktop marketing page. */

.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-700)}

/* Eyebrow: the small letterspaced label above a heading, with a rule.
   Used on nearly every section. */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  margin:0 0 var(--sp-3);
  font:600 var(--step--1)/1 var(--font-util);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand-500);
}
.eyebrow::before{
  content:'';
  width:clamp(26px,5vw,58px);height:2px;
  background:currentColor;opacity:.6;flex:none;
}

/* Dark sections. Add .on-dark to any band with a dark background and the
   text colours below adjust without per-section overrides. */
.on-dark{color:var(--brand-050)}
.on-dark .eyebrow{color:var(--brand-300)}
.on-dark .lede{color:var(--brand-200)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95em 1.5em;
  border-radius:3px;
  font:700 var(--step-0)/1 var(--font-body);
  letter-spacing:.01em;
  transition:transform .18s var(--ease-out),
             background .18s,
             box-shadow .18s var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Primary. The hard shadow is what makes it read as a physical button
   rather than a coloured rectangle - it deepens on hover. */
.btn--go{
  background:var(--accent);
  color:var(--ink-950);
  box-shadow:0 4px 0 var(--accent-dk);
}
.btn--go:hover{box-shadow:0 6px 0 var(--accent-dk)}

.btn--line{border:2px solid currentColor;padding:.85em 1.4em}
.btn--sm{padding:.65em 1.05em;font-size:var(--step--1)}

/* ==========================================================================
   REDUCED MOTION

   Global and non-negotiable. This ships in the kit as a default, not as a
   per-site decision. Every animation in patterns.js also checks the same
   media query in JS - CSS alone cannot stop a rAF loop.
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
}