/* ==========================================================================
   BASE — fonts, reset, element defaults, layout utilities
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable) ---------- */
/* Headings: Clash Grotesk (Fontshare, ITF Free Font License) */
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Everything else: Inter Display (SIL OFL). Built from InterVariable with the
   optical size fixed at "Display" (opsz 32) and trimmed to Latin characters. */
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("../fonts/InterDisplay-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

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

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* ---------- Element defaults ---------- */
body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-m);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: inherit;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

strong {
  font-weight: var(--weight-bold);
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* ---------- Utilities ---------- */
.container {
  width: min(100% - (var(--container-gutter) * 2), var(--container-max));
  margin-inline: auto;
}

/* 12-column layout grid. Children pick their columns with grid-column. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

/* Faint vertical guide lines behind a section, aligned to the grid:
   one at the start of every 2nd column plus the container's right edge.
   Line spacing = (container + gap) / bands, so each line lands exactly
   on a column edge. Add the class to the <section>. */
.grid-lines {
  position: relative;
  isolation: isolate;
}

.grid-lines::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  right: 0;
  z-index: -1;
  width: min(100% - (var(--container-gutter) * 2), var(--container-max));
  margin-inline: auto;
  background-image:
    linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(var(--grid-line-color), var(--grid-line-color));
  background-size:
    calc((100% + var(--grid-gap)) / var(--grid-line-bands)) 100%,
    1px 100%;
  background-position: 0 0, 100% 0;
  background-repeat: repeat-x, no-repeat;
  pointer-events: none;
}

/* Same lines on dark backgrounds (About) */
.grid-lines--on-dark {
  --grid-line-color: var(--on-dark-line-soft);
}

@media (max-width: 767px) {
  :root {
    --grid-line-bands: 4;   /* one line every 3 columns on phones */
  }
}

.section-pad {
  padding-block: var(--space-xl);
}

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

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Inline SVG icons from the sprite at the top of each page.
   UI icons come from the Solar "line duotone" set and carry their own
   stroke width (1.5) and 50% opacity on the secondary stroke. */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}