/* BASE.CSS — reset, typography, buttons.
   Shared across all sites. No hardcoded colors/fonts — everything via var(--). */

:root { --max: 1100px; --gap: 20px }

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:var(--sz-body); line-height:1.65; -webkit-font-smoothing:antialiased }
a { text-decoration:none; color:inherit }
ul { list-style:none }
button { font-family:inherit; cursor:pointer; background:none; border:none }
body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(-45deg,transparent 0,transparent 80px,var(--grain) 80px,var(--grain) 81px) }
nav,main,footer { position:relative; z-index:1 }

/* layout helpers */
.w { max-width:var(--max); margin:0 auto; padding:0 var(--sp-h) }
.section { padding:var(--sp-v) 0 }
.section-tinted { background:var(--bg2) }

/* typography */
.eyebrow { display:block; font-family:var(--f-ui); font-size:var(--sz-xs); font-weight:600; letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--accent) }
.underrule { width:48px; height:1px; background:var(--rule); margin:var(--sp-rule) 0 }
.underrule-c { margin-left:auto; margin-right:auto }
.t-hero   { font-family:var(--f-head); font-size:var(--sz-hero); font-weight:400; color:var(--ink); line-height:1.08; letter-spacing:var(--ls-head) }
.t-h2     { font-family:var(--f-head); font-size:var(--sz-h2);   font-weight:400; color:var(--ink); line-height:1.2;  letter-spacing:var(--ls-head) }
.t-body   { font-family:var(--f-body); font-size:var(--sz-body);  font-weight:300; color:var(--ink2); line-height:1.72 }
.t-sm     { font-family:var(--f-body); font-size:var(--sz-sm);   font-weight:300; color:var(--ink2); line-height:1.65 }
.t-sm-i   { font-family:var(--f-body); font-size:var(--sz-sm);   font-weight:300; font-style:italic; color:var(--ink3); line-height:1.6 }
.t-mono   { font-family:var(--f-mono); font-size:var(--sz-mono); letter-spacing:var(--ls-mono) }

/* buttons */
.btn { display:inline-block; font-family:var(--f-ui); font-size:var(--sz-btn); font-weight:600; letter-spacing:var(--ls-btn); text-transform:uppercase; padding:var(--sp-btn) var(--sp-btn-h); border:1px solid transparent; cursor:pointer; white-space:nowrap; text-align:center; transition:opacity .18s,border-color .18s,color .18s,background .18s }
.btn-solid  { background:var(--accent); color:var(--bg);  border-color:var(--accent) }
.btn-solid:hover { opacity:.82 }
.btn-soft   { background:transparent; color:var(--ink3); border-color:var(--card-border) }
.btn-soft:hover { border-color:var(--rule); color:var(--accent) }
.btn-outline { background:transparent; color:var(--accent); border-color:var(--rule) }
.btn-outline:hover { background:var(--accent-wash) }
.btn-link   { font-family:var(--f-ui); font-size:var(--sz-btn); font-weight:600; letter-spacing:var(--ls-btn); text-transform:uppercase; color:var(--accent); cursor:pointer; transition:opacity .18s }
.btn-link:hover { opacity:.65 }

body { overflow-x: hidden; }