/* ============================================================
   BASE — reset + global element defaults + shared utilities.
   Utilities here (.container, .eyebrow, .section-head) are used
   by multiple components, so they live in base, not in a
   single component file.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

h1,h2,h3,h4{
  font-family:var(--ff-display);
  margin:0;
  color:var(--ink);
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
button{font:inherit; cursor:pointer;}
ul{margin:0; padding:0; list-style:none;}

/* layout utility */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* small-caps label utility, used above every section heading */
.eyebrow{
  font-family:var(--ff-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--orange-600);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:18px; height:2px;
  background:var(--orange-600);
  display:inline-block;
  border-radius:2px;
}

/* heading + intro paragraph pattern, used by every major section */
.section-head{max-width:640px; margin-bottom:44px;}
.section-head h2{font-size:clamp(28px,3.6vw,40px); margin-top:12px; line-height:1.12;}
.section-head p{margin-top:14px; color:var(--ink-soft); font-size:16.5px; line-height:1.6;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}