/* =====================================================================
   SYSTEM — tokens, resets and primitives shared by every area.

   Loaded before every other component stylesheet. Area-specific rules
   belong in that area's own file (see .claude/design-language.md §10).
   ===================================================================== */

:root {
  --paper: #EDE4D7;
  --ink: #14181C;
  --line: #D7CEC1;
  --maroon: #7A0019;
  --gold: #FFCC33;
  --void: #0A0C0D;
  --void-line: rgba(255, 255, 255, 0.10);
  --void-edge: rgba(255, 255, 255, 0.20);

  /* The shell's one timing. Everything animates at this speed so the
     site moves as a single mechanism. */
  --t: 240ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The top bar's height, needed by anything that offsets beneath it. */
  --bar-h: 5rem;
}

@media (min-width: 640px) {
  :root { --bar-h: 6rem; }
}

/* ---------------------------------------------------------------------
   TYPE FLOOR

   Nothing on this site renders below 15px (design-language §3). The
   previous revision was full of 11px mono markings and it read as
   fine print on an instrument nobody could actually read.

   These are backstops, not a substitute for setting sizes properly in
   the markup — but they catch any utility that slips under the floor.
   --------------------------------------------------------------------- */
body {
  font-size: 1.1875rem;   /* 19px */
  line-height: 1.6;
}

.text-xs,
.text-\[0\.6875rem\],
.text-\[0\.75rem\],
.text-\[0\.8125rem\] {
  font-size: 0.9375rem !important;   /* 15px floor */
}

small {
  font-size: 0.9375rem;
}

/* The old 0.18em "instrument marking" tracking is retired — at a
   readable size it just pulls words apart. */
.tracking-marking {
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------
   The ampersand

   Fraunces ships a highly ornamental ampersand. At display sizes it
   stops reading as "and" and starts reading as a symbol — "ChemE R&D"
   came out looking like "ChemE R⊗D".

   This maps U+0026 ALONE onto a plain serif, leaving every other
   glyph in Fraunces. Nothing is downloaded: the sources are local
   system faces, and if none resolve the browser falls back to
   Fraunces, which is merely the old behaviour.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Ampersand";
  src: local("Georgia"), local("Times New Roman"), local("DejaVu Serif"), local("Liberation Serif");
  unicode-range: U+0026;
}

/* ---------------------------------------------------------------------
   No shadows. Anywhere.

   Depth on this site comes from hairlines and value, never from blur
   (design-language §2). This is a guard rail: Tailwind's CDN build
   ships shadow utilities and it is easy to reach for one by reflex.
   --------------------------------------------------------------------- */
* { box-shadow: none !important; }

/* ---------------------------------------------------------------------
   Focus

   Visible, square, and the same shape on both grounds. Focus rings are
   part of the instrument look rather than an accessibility tax.
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 1px solid var(--maroon);
  outline-offset: 2px;
  border-radius: 0;
}

/* The footer is the only dark ground left, so it is the only place
   the maroon ring would disappear. */
.bg-void :focus-visible,
footer.bg-void :focus-visible {
  outline-color: var(--gold);
}

/* Don't show a ring for a mouse click on a label-as-button. */
label[role="button"]:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--maroon);
  color: #fff;
}

/* ---------------------------------------------------------------------
   Scroll lock

   Used by both overlays. Padding compensates for the scrollbar so the
   page behind does not jump sideways when it locks.
   --------------------------------------------------------------------- */
html.overlay-open,
html:has(.nav-open-state:checked) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ---------------------------------------------------------------------
   NO SIDEWAYS SCROLL

   A backstop, not a licence to overflow. Everything is laid out to fit
   from 345px up; below that a few pixels still escape and this clips
   them rather than letting the page rock sideways.

   `clip`, NOT `hidden`. overflow:hidden turns the element into a
   scroll container, which silently breaks position:sticky — and the
   hero's scroll reveal depends on it. overflow:clip does not.
   --------------------------------------------------------------------- */
body {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------
   SECTION DIVIDERS

   A hairline between consecutive top-level sections, so the eye can
   tell where one ends and the next begins while scrolling.

   This is the kind of rule §2 allows — it separates two things that
   would otherwise run together — as opposed to the decorative measure
   rules and registration marks that were deleted.

   It lands on the boundary itself, so it inherits the section's own
   py-28 / lg:py-40 rhythm and needs no spacing of its own. The footer
   is outside <main>, so its dark ground is untouched.
   --------------------------------------------------------------------- */
main > section + section {
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------------
   Anchors

   Every in-page target has to clear the fixed bar, otherwise a jump to
   #gen1 lands with the heading underneath it.
   --------------------------------------------------------------------- */
[id] { scroll-margin-top: calc(var(--bar-h) + 2rem); }

html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------------
   Skip link
   --------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 1.0625rem;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------------------------------------------------------------------
   Reduced motion

   Honoured properly: transitions collapse and any marquee stops dead
   rather than merely slowing down.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}