/* ============================================================
   FAMOUS REGISTRAR — BASE (reset, typography, utilities)
   ============================================================ */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--topbar-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--slate-700);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

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

img {
  height: auto;
}

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

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

a {
  color: var(--brand-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

ul,
ol {
  padding-left: 1.15em;
}

li + li {
  margin-top: 0.35em;
}

hr {
  border: 0;
  border-top: 1px solid var(--slate-200);
  margin: var(--sp-8) 0;
}

::selection {
  background: var(--brand-100);
  color: var(--brand-800);
}

/* ---------------- Focus visibility (WCAG 2.2) ------------ */
:focus-visible {
  /* brand-600 rather than brand-500. brand-500 measures 3.13:1 on white —
     technically enough for a focus ring under the 3:1 non-text rule, but a
     keyboard user's focus indicator is the one thing on the page that must
     never be hard to find, and 3.13:1 is a thin, low-contrast line against
     white. brand-600 measures 4.89:1 and still reads as the same green. */
  outline: 3px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: var(--z-toast);
  background: var(--ink-900);
  color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: top var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  top: var(--sp-4);
  color: var(--white);
  text-decoration: none;
}

/* ---------------- Headings ------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--ink-900);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}

h2 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
}

h3 {
  font-size: var(--fs-xl);
}

h4 {
  font-size: var(--fs-lg);
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: 650;
  color: var(--ink-800);
}

/* ---------------- Eyebrow / lead ------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--brand-600);
  margin-bottom: var(--sp-4);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-500);
}

.eyebrow--amber {
  color: var(--amber-600);
}

.eyebrow--amber::before {
  background: var(--amber-500);
}

.eyebrow--light {
  color: var(--brand-300);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--slate-600);
  max-width: 62ch;
}

.muted {
  color: var(--slate-500);
}

.small {
  font-size: var(--fs-sm);
}

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

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

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

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

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

.section--cloud {
  background: var(--cloud-100);
}

.section--ink {
  background: var(--ink-900);
  color: var(--slate-300);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
  color: var(--white);
}

/* ---------------- Section-flow primitives ------------------
   The 4th band beat. A very light emerald wash: enough to break the
   white/cloud alternation without introducing a new colour. It takes
   NO ambient glow — the tint is the treatment (see pages.css).

   Since the owner asked for more page texture, the wash also carries
   a faint CRT-style scan-line: one 1px emerald hairline every 16px at
   4.5% opacity (--scan-line). Static, pure CSS, no new request, and
   far too light to move text contrast on the band (measured: body ink
   on the tinted surface stays above 12:1).

   2026-10-16: the band gained a second texture layer, a faint
   blueprint grid — two crossing 1px emerald hairlines at a 48px
   pitch, held to 3% alpha so it reads as paper tooth rather than as
   a pattern, and so it never competes with copy sitting on top of
   it. The scan-line below is unchanged and still paints last
   (backgrounds stack bottom-up). No new pseudo-element was used:
   this band already owns its own ::before (see pages.css) and a
   second one would silently replace it. */
.section--wash {
  background-color: var(--brand-50);
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 47px,
      rgba(10, 129, 88, 0.03) 47px 48px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 47px,
      rgba(10, 129, 88, 0.03) 47px 48px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0 15px,
      var(--scan-line) 15px 16px
    );
}

/* A tinted band that reads as a CARD resting on the page: it is inset
   from the viewport edges and its corners are rounded, so the page
   background shows through as a gap around it. The gaps stay white —
   flat, no overlap, no negative margins. Nothing may be drawn in the
   gap except the page background itself.

   This replaced the old curved-edge primitive (`.section--arch-t/-b`
   + the `--arch` token): one broad arch per transition, which needed a
   carefully capped radius to avoid eating the previous band's content.
   The card inset removes that whole constraint — the band no longer
   reaches the previous band at all.

   Why `overflow: clip` and not `hidden`: the card is rounded, and a
   full-bleed child (the dot matrix, the band wallpaper) must not paint
   over the rounded corners. `clip` does that without creating a scroll
   container.

   Mobile: the inset drops to 8px with a 20px radius — the card read is
   kept, the horizontal cost is not. */
.section--card {
  margin-inline: 8px;
  border-radius: 20px;
  overflow: clip;
}

@media (min-width: 640px) {
  .section--card {
    margin-inline: 24px;
    border-radius: var(--r-2xl);
  }
}

/* A cluster that straddles the boundary between two bands. Used for the
   hero artifact, the receipt and key stats — the layered effect that
   stops two bands reading as two stacked boxes. */
.overlap {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--section-y) * -0.42);
}

.section-head {
  max-width: 64ch;
  margin-bottom: var(--sp-12);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .eyebrow {
  justify-content: center;
}

.section-head p {
  margin-top: var(--sp-4);
}

.section-head--center p {
  margin-inline: auto;
}

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

[hidden] {
  display: none !important;
}

/* ---------------- Print ---------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }
  body {
    color: #000;
  }
}
/* ================= TITLE LINE-BREAKING =====================
   `text-wrap: balance` evens out the desktop wrap so a heading never
   leaves one orphan word on its own line. On small screens the
   `.br-sm` breaks (hidden on desktop) let a title break at designed
   points instead of at whatever fits - the difference between a
   title that was placed and a title that just wrapped. */
h1,
h2 {
  text-wrap: balance;
}

.br-sm {
  display: none;
}

@media (max-width: 640px) {
  .br-sm {
    display: inline;
  }
}