/* ==========================================================================
   HORNBILL SPA — BASE TYPOGRAPHY
   Extracted unchanged from Additional CSS. Depends on variables.css
   loading first (uses var(--ink), var(--oxide) etc.)
   ========================================================================== */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body, p, li, a, span, input, textarea, button{
  font-family:'Inter', sans-serif;
}

body{
  background: var(--stone);
  color: var(--text-on-light);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.6;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family:'Fraunces', serif;
  font-weight: 380;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--ink);
}

h1{ font-size: clamp(38px, 6vw, 92px); }
h2{ font-size: clamp(32px, 4vw, 46px); }
h3{ font-size: clamp(20px, 2vw, 28px); }

a{ color: inherit; text-decoration: none; }

.eyebrow{
  font-family:'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxide);
}

.rule{ width:40px; height:1px; background: var(--oxide); border:none; margin:22px 0; }
.rule-full{ width:100%; height:1px; background: var(--line); border:none; }

.wrap{ max-width: var(--max); margin:0 auto; padding: 0 64px; }
@media (max-width: 760px){ .wrap{ padding: 0 20px; } }

/* grain texture for dark sections */
.grain{position:relative;}
.grain::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;
}