/*
 * base.css -- resets, typography, layout primitives.
 * Part 2 of the load order in docs/DESIGN_SYSTEM.md ("File architecture /
 * load order"): loads after tokens.css (assets/css/tokens.css /
 * includes/theme.php's inline <style id="theme-tokens"> tag), before
 * components.css and any templates/*.css. Every rule here references
 * tokens.css variables (var(--...)); none redeclare a color/shadow/layout
 * value directly. Extracted verbatim from docs/reference-homepage.html.
 */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
}

/* Noise texture overlay -- applied once, globally, here. Never re-add per-section. */
body:before{
  content:"";
  position:fixed;inset:0;pointer-events:none;z-index:999;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(calc(100% - 48px),var(--max));margin-inline:auto}
.serif{font-family:Georgia,"Times New Roman",serif}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;font-weight:850;letter-spacing:.17em;text-transform:uppercase;
}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--copper)}
.eyebrow.light{color:#dbe3ef}
.eyebrow.light:before{background:var(--signal)}

.btn{
  min-height:44px;padding:0 17px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:12px;font-weight:780;transition:.18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:5px 5px 0 var(--ink)}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.blue{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.btn.blue:hover{box-shadow:5px 5px 0 var(--cobalt-2)}
.btn.light{border-color:#fff;color:#fff}
.btn.light:hover{box-shadow:5px 5px 0 rgba(255,255,255,.4)}
.arrow{font-size:16px;line-height:1}

/* Display heading typography (docs/DESIGN_SYSTEM.md "Typography"): Georgia
   serif, weight 500, very tight tracking/line-height -- the single most
   identifying brand signature. Applies wherever h1 is used, not just the
   homepage hero. */
h1{
  margin:18px 0 23px;
  font-family:Georgia,serif;font-weight:500;
  font-size:clamp(58px,6.7vw,102px);line-height:.91;letter-spacing:-.065em;
}
h1 em{font-style:italic;color:var(--signal)}

/* Generic section rhythm + 2-column section header, reused by every
   template (docs/DESIGN_SYSTEM.md "Spacing / grid"). */
section{padding:108px 0;border-bottom:1px solid var(--line)}
.section-head{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:end;margin-bottom:50px;
}
.section-head h2{
  font-family:Georgia,serif;font-weight:500;
  font-size:clamp(46px,5.4vw,78px);line-height:.98;letter-spacing:-.055em;
  margin:17px 0 0;
}
.section-head p{font-size:15px;line-height:1.72;color:var(--ink-2);margin:0;max-width:690px}

/* Responsive breakpoints (docs/DESIGN_SYSTEM.md "Responsive breakpoints"):
   1200 -> 980 -> 720 -> 470. Only the base-owned selectors' rules live here;
   component-owned selectors at the same breakpoints live in components.css. */
@media(max-width:980px){
  .section-head{grid-template-columns:1fr;gap:25px}
}
@media(max-width:720px){
  .container{width:min(calc(100% - 24px),var(--max))}
  h1{font-size:57px}
  section{padding:78px 0}
}
@media(max-width:470px){
  h1{font-size:49px}
}