/* ==========================================================================
   Nubuilt - reset, typography, layout primitives
   ========================================================================== */

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

* { margin: 0; }

/*
 * The hidden attribute is a browser default of display:none, which any author
 * rule with a display (a card set to flex, a grid item) silently beats. Scripts
 * that hide things by setting .hidden rely on this, so make it authoritative.
 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;          /* native. no scroll-hijacking library. */
  scroll-padding-top: calc(var(--header-h) + var(--space-m));
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  color: var(--grey);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

/* ---- Fonts --------------------------------------------------------------
   Self-hosted. See assets/fonts/README.md for the two files to drop in.
   Until then the stack falls back to the system geometric sans, which is
   close enough that layout does not shift when the real faces arrive.      */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/GeneralSans-Variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

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

/* ---- Headings ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--graphite);
  font-weight: var(--weight-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 { font-size: var(--step-6); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); }

/* The statement voice. Reserved for hero and section openers. */
.display {
  font-family: var(--font-display);
  font-size: var(--step-7);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-medium);
  color: var(--graphite);
  text-wrap: balance;
}

p { max-width: var(--measure); text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  line-height: var(--lh-snug);
  color: var(--grey);
  max-width: 46ch;
}

/* Structural label. Used where it encodes something - a place, a category,
   a stage - never as decoration. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stone-dark);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

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

.link {
  color: var(--blue-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

strong, b { font-weight: var(--weight-semi); color: var(--graphite); }

hr, .rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
}

::selection { background: var(--stone); color: var(--graphite); }

/* ---- Focus ---------------------------------------------------------------
   Visible, always. Keyboard users are not a minority to be styled away.    */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: calc(var(--z-header) + 10);
  padding: var(--space-2xs) var(--space-s);
  background: var(--graphite);
  color: var(--paper);
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out-arch);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Layout primitives -------------------------------------------------- */

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

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--space-m);
}

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

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

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

/* A single hairline rule in stone - the recurring structural device.
   It marks a boundary between ideas, which is information, not decoration. */
.divider {
  height: 1px;
  background: linear-gradient(90deg, var(--stone) 0%, var(--hairline) 100%);
  border: 0;
}

@media (max-width: 48rem) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}