html { scroll-behavior: smooth; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-surface);
}

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  color: var(--color-heading);
  letter-spacing: var(--tracking-display);
}

.display  { font-size: var(--step-5); line-height: var(--lh-tight); font-weight: 700; }
h1        { font-size: var(--step-4); line-height: var(--lh-tight); font-weight: 700; }
h2        { font-size: var(--step-3); line-height: 1.1;  font-weight: 700; }
h3        { font-size: var(--step-2); line-height: var(--lh-snug); font-weight: 700; }
h4        { font-size: var(--step-1); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -.015em; }

.lead {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.text-muted { color: var(--color-muted); }
.text-slate { color: var(--color-slate); }

.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); transform-origin: left; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible { outline-color: var(--color-accent); }

.skip-link {
  position: absolute;
  left: var(--gutter); top: 0;
  transform: translateY(-140%);
  z-index: calc(var(--z-drawer) + 10);
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding: .7rem 1.15rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  font-family: var(--font-display);
  font-weight: 600;
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .62); }

.section-head { max-width: 62ch; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--space-s); }

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-m); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.on-dark { color: var(--color-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--color-on-dark); }

.bg-cream   { background: var(--color-background); }
.bg-primary { background: var(--color-primary); }
.bg-deep    { background: var(--color-secondary); }

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--solid { fill: currentColor; stroke: none; }

.sprite-host { position: absolute; width: 0; height: 0; overflow: hidden; }

.rule-gold {
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent));
  border-radius: var(--radius-pill);
}

.pg-span-10 { --pg-span: 10; }
.pg-span-8  { --pg-span: 8; }
.pg-span-6  { --pg-span: 6; }
.pg-span-4  { --pg-span: 4; }

[class*="pg-span-"] > .container {
  max-width: calc(var(--container) * var(--pg-span) / 12);
}
[class*="pg-span-"] > .container--wide {
  max-width: calc(var(--container-wide) * var(--pg-span) / 12);
}

@media (max-width: 899px) {
  [class*="pg-span-"] > .container { max-width: var(--container); }
  [class*="pg-span-"] > .container--wide { max-width: var(--container-wide); }
}

.pg-mt-none { padding-top: 0; }
.pg-mt-s  { padding-top: var(--space-m); }
.pg-mt-m  { padding-top: var(--space-xl); }
.pg-mt-l  { padding-top: var(--space-2xl); }
.pg-mt-xl { padding-top: var(--space-3xl); }

.pg-mb-none { padding-bottom: 0; }
.pg-mb-s  { padding-bottom: var(--space-m); }
.pg-mb-m  { padding-bottom: var(--space-xl); }
.pg-mb-l  { padding-bottom: var(--space-2xl); }
.pg-mb-xl { padding-bottom: var(--space-3xl); }

.block-spacer.pg-mt-none, .block-divider.pg-mt-none { margin-top: 0; }
.block-spacer.pg-mt-s,  .block-divider.pg-mt-s  { margin-top: var(--space-m); }
.block-spacer.pg-mt-m,  .block-divider.pg-mt-m  { margin-top: var(--space-xl); }
.block-spacer.pg-mt-l,  .block-divider.pg-mt-l  { margin-top: var(--space-2xl); }
.block-spacer.pg-mt-xl, .block-divider.pg-mt-xl { margin-top: var(--space-3xl); }