/* CURRENT v1.0 — base reset & typography */

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--c-sheet);
  color: var(--c-silicon);
  font-family: var(--f-text);
  font-size: var(--fs-t2);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img{ max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-silicon);
}

p{ margin: 0; }

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

ul{ margin: 0; padding: 0; list-style: none; }

button{ font-family: inherit; }

/* visible keyboard focus, everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--c-current);
  outline-offset: 2px;
  border-radius: var(--radius);
}

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

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link{
  position: absolute;
  left: var(--sp-2);
  top: -48px;
  background: var(--c-silicon);
  color: var(--c-sheet);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: var(--fs-m1);
  z-index: 200;
  transition: top var(--dur-base) var(--ease);
}
.skip-link:focus{ top: var(--sp-2); }

/* eyebrow / title-block mono label, used across components */
.eyebrow{
  font-family: var(--f-mono);
  font-size: var(--fs-m1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-copper);
}
.eyebrow--on-dark{ color: var(--c-copper-lt); }

.mono{ font-family: var(--f-mono); }

.section{
  padding-block: var(--sp-7);
  border-top: 1px solid var(--c-hairline);
}
.section--anode{ background: var(--c-anode); }
.section--silicon{ background: var(--c-silicon); color: var(--c-sheet); border-top: none; }
.section--silicon h1, .section--silicon h2, .section--silicon h3{ color: var(--c-sheet); }

@media (max-width: 720px){
  .section{ padding-block: var(--sp-5); }
}