/* ============================================================
   Global spacing normalizer — consistent rhythm across pages
   Uses a 4px scale. Loaded after each page's own <style> so
   these baseline rules define the section rhythm, while
   deliberate per-element overrides can still win via cascade.
   ============================================================ */
:root{
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:96px;
  --sp-section-y:clamp(72px,8vw,112px);
  --sp-section-x:clamp(24px,5vw,72px);
  --sp-block:var(--sp-7);
  --sp-heading:var(--sp-5);
}

/* Section rhythm */
section{padding:var(--sp-section-y) var(--sp-section-x)}

/* Header spacing inside sections */
section > .section-tag,
section > .container > .section-tag,
section .section-tag{margin-bottom:var(--sp-4)}

section h1,section h2{margin-top:0}
section > h2,
section > .container > h2,
section .section-title{margin-bottom:var(--sp-heading)}

section > .section-sub,
section > .container > .section-sub,
section .section-sub{margin-bottom:var(--sp-block)}

/* Footer rhythm */
footer{padding:var(--sp-9) var(--sp-section-x) var(--sp-7)}

/* Common container widths — never wider than 1280 */
.container,.wrap,.inner{max-width:1280px;margin-left:auto;margin-right:auto;width:100%}

@media(max-width:820px){
  :root{
    --sp-section-y:64px;
    --sp-section-x:20px;
    --sp-block:32px;
    --sp-heading:18px;
  }
}