/* ==========================================================================
   Global — base element styling, layout primitives, typography utilities.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed nav. */
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
}

body {
  background: var(--bg);
  color: var(--fg);
  /* Theme swap should feel instant, not like a slow cross-fade. */
  transition:
    background-color var(--d-fast) linear,
    color var(--d-fast) linear;
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

/* Locks scroll during the intro and while the mobile menu is open. */
body[data-scroll-locked] {
  overflow: hidden;
  touch-action: none;
}

/* --- Selection ---------------------------------------------------------- */
::selection {
  background: var(--accent);
  color: var(--btn-primary-fg);
}

/* --- Focus -------------------------------------------------------------- */
/* Visible for keyboard users, suppressed for mouse — but never removed. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Skip link ---------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--btn-primary-fg);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--d-fast) var(--ease-out-quart);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- Layout primitives -------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

/* Two adjacent sections each contributed a full --section-y, so the gap
   between them was DOUBLE the intended rhythm. Collapsing the second one's
   top padding halves it — one section-y between sections, exactly the
   spacing the scale describes. */
.section + .section {
  padding-top: 0;
}

/* …except around a section that paints its own background band. The collapse
   above is only safe when both neighbours sit on the page background, so their
   whitespace reads as one gap. A band breaks that on BOTH sides:

     - the band needs real padding INSIDE it, or its edge cuts its own content;
     - the section AFTER it cannot borrow that padding, because the band's
       bottom padding is trapped inside the band. Without this the next
       heading lands flush on the band's edge.

   Add any new banded section to both selectors. */
.section + .philosophy {
  padding-top: var(--section-y);
}

.philosophy + .section {
  padding-top: var(--section-y);
}

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

/* --- Typography utilities ----------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

.t-3xl {
  font-size: var(--t-3xl);
}
.t-4xl {
  font-size: var(--t-4xl);
}
.t-2xl {
  font-size: var(--t-2xl);
}
.t-xl {
  font-size: var(--t-xl);
}

.lead {
  font-size: var(--t-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  max-width: var(--maxw-text);
  font-weight: 300;
}

/* Small uppercase label — used for section eyebrows and meta. */
.label {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.label--accent {
  color: var(--accent-text);
}

/* Monospaced index numbers (01, 02 …). Tabular so they never jitter. */
.index {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* --- Section heading with rule ------------------------------------------ */
.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  margin-bottom: var(--s-8);
  border-top: var(--border-w) solid var(--rule-faint);
  padding-top: var(--s-4);
}

.section-head__rule {
  flex: 1;
  height: var(--border-w);
  background: var(--rule-faint);
}

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

/* Hidden until JS decides otherwise — prevents a flash of the wrong state. */
[hidden] {
  display: none !important;
}