/* =============================================================================
   ABB:Ed — Website v1 — Site Stylesheet
   =============================================================================
   Author:  Sam Obisanya (Frontend Engineer)
   Date:    2026-06-16
   Build:   from Barbara_ABBEd_Website_v1_DesignSpec_2026-06-16.md
   Tokens:  ./design-tokens.css (v1.4, imported verbatim — companion to this file)

   --------------------------------------------------------------------------
   CONVENTION NOTE — this file follows the Brand Book v1.0 chrome conventions
   (Operations/Brand/Module2.4/Layer5/ABB-Ed_BrandBook_v1.0.html <style> block):
   every visual decision resolves to a var(--token). No hardcoded colours,
   sizes, or spacing that a token covers. Component class names (.cover,
   .section__eyebrow, .callout, .toc, table.spec) are reused as-is where they
   carry over. The site "eats its own dogfood" the same way the brand book does.

   QA GATE (Will): grep this file for raw hex / raw px on visual properties.
   The only raw px present are: (a) the @font-face / favicon plumbing, (b) the
   hero wordmark 80px literal — which is intentional and matches the Brand Book
   .cover__wordmark (the hero is the one documented 80px literal, not a token,
   because --type-size-hero is 5rem = 80px but the lockup math is specified in
   px in Module 2.2), (c) layout primitives (border widths via --rule-weight-*,
   nav height) and the mobile-nav z-index / transform plumbing. Each is
   commented at point of use.

   VOICE-REGISTER REMINDER: register names (Practical / Intellectual /
   Strategic / Personal) NEVER appear in this markup, classes, or copy. They
   are internal craft tools only (Pillars-and-Registers Reconciliation §3).
   ============================================================================= */

/* =============================================================================
   §A — FONT FACES (self-hosted IBM Plex, SIL OFL 1.1)
   See assets/fonts/README.md for which binaries to drop in. Until they are
   present, the system-ui fallback in --type-family-sans renders the site.
   ============================================================================= */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

/* =============================================================================
   §B — RESET + PAGE CANVAS (mirrors Brand Book chrome html/body)
   ============================================================================= */

* { box-sizing: border-box; }

html {
  /* Smooth in-page anchor scroll, but honour reduced-motion (set in §M). */
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-surface-page); /* warm paper — never pure white */
  color: var(--color-text-primary);      /* cool ink */
  font-family: var(--type-family-sans);
  font-weight: var(--type-weight-regular);
  font-size: var(--type-size-sm);
  line-height: var(--type-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The centred reading column — inherits the Brand Book's 1080px max-width
   compositional logic, with token-driven responsive padding. */
.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: var(--space-6A);
  padding-right: var(--space-6A);
}

@media (max-width: 640px) {
  .wrap {
    padding-left: var(--space-3A);
    padding-right: var(--space-3A);
  }
}

main { flex: 1 0 auto; }

/* Skip link — keyboard a11y; visually hidden until focused. */
.skip-link {
  position: absolute;
  left: var(--space-2A);
  top: -100%;
  z-index: 1000;
  background: var(--color-surface-panel);
  color: var(--color-text-accent);
  padding: var(--space-1A) var(--space-2A);
  border-radius: var(--radius-sm);
  font-weight: var(--type-weight-bold);
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-2A);
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
  outline-offset: var(--ui-focus-ring-offset);
}

/* =============================================================================
   §C — SHARED TYPE (mirrors Brand Book chrome; measure-capped)
   ============================================================================= */

p {
  font-size: var(--type-size-sm);
  line-height: var(--type-leading-body);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3A) 0;
  max-width: var(--measure-body);
}

p.lede {
  font-size: var(--type-size-md);
  line-height: var(--type-leading-snug);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4A);
  max-width: var(--measure-wide);
}

a { color: var(--color-link); }

strong { font-weight: var(--type-weight-bold); }
em { font-style: italic; }

/* Section eyebrow — reused Brand Book component (.section__eyebrow). */
.section__eyebrow {
  font-size: var(--type-size-2xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--type-tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin: 0 0 var(--space-2A) 0;
}

/* Section title / deck — reused from Brand Book chrome. */
.section__title {
  font-size: var(--type-size-2xl);
  font-weight: var(--type-weight-bold);
  line-height: var(--type-leading-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3A) 0;
  max-width: var(--measure-prose);
}

.section__deck {
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-snug);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5A) 0;
  max-width: var(--measure-wide);
}

/* Vertical rhythm between page sections. */
.section {
  padding-top: var(--space-6A);
  padding-bottom: var(--space-6A);
}

/* =============================================================================
   §D — WORDMARK (live text, never an image)
   Three lockups per Brand Book §2. The colon is the native Plex Bold colon
   in a plain text node — no custom glyph, no image. At the Lockup 2 floor
   (<=16px) the +0.02em tracking floor-rule lands via .wordmark--floor.
   ============================================================================= */

.wordmark {
  font-family: var(--type-family-sans);
  font-weight: var(--type-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--type-leading-tight);
  letter-spacing: var(--type-tracking-tight); /* hero tightening; harmless at nav scale */
  white-space: nowrap;
}

/* Lockup 2 floor-rule: +20 units (+0.02em) at the 16px minimum (Brand Book §2
   colon treatment). Applied to the small footer/legal marks. */
.wordmark--floor { letter-spacing: var(--type-tracking-mono); } /* 0.01em base */

/* Lockup 1 hero — wordmark + long-form line. Lives only in the Home hero and
   the Field Notes recruiting-CTA portion (post-F-2 rule). */
.lockup1 { margin: 0; }

.lockup1__mark {
  display: block;
  font-family: var(--type-family-sans);
  font-weight: var(--type-weight-bold);
  /* 80px hero literal — matches Brand Book .cover__wordmark exactly; the lockup
     subordination math (Module 2.2) is specified in px, so this is intentional. */
  font-size: 80px;
  line-height: var(--type-leading-tight);
  letter-spacing: var(--type-tracking-tight);
  color: var(--color-text-primary);
}

.lockup1__longform {
  display: block;
  font-family: var(--type-family-sans);
  font-weight: var(--type-weight-regular);
  /* 0.65 x wordmark = 52px (Brand Book .cover__longform / §2 Lockup 1 table). */
  font-size: 52px;
  line-height: var(--type-leading-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-1A); /* ~1A vertical gap */
}

/* Lockup 1 responsive subordination — hold the 1.82x ratio by scaling both
   parts together via clamp(); below the truncation boundary we switch to the
   Lockup 2 substitution (the long-form line becomes a headline, marked up
   separately as .hero__headline-substitute and toggled by the breakpoint). */
@media (max-width: 720px) {
  .lockup1__mark     { font-size: clamp(2.75rem, 11vw, 3.75rem); }
  .lockup1__longform { font-size: clamp(1.85rem, 7.4vw, 2.44rem); }
}

/* Below the truncation boundary (~430px) "A Bit Better Every Day" would wrap
   and break the lockup. Substitute Lockup 2 standalone: hide the inline
   long-form line and recover the phrase as the hero headline beneath.
   (β-route substitution discipline — Brand Book §2 post-F-2; hard rule.) */
.hero__headline-substitute { display: none; }

@media (max-width: 430px) {
  .lockup1__longform        { display: none; }
  .hero__headline-substitute { display: block; }
}

/* =============================================================================
   §E — TOP NAV (persistent, every page)
   Layout: [wordmark -> Home]  ...  Home About FieldNotes  [Get Field Notes ->]
   The CTA NEVER collapses behind the hamburger (spec §1.2). On mobile the three
   text links go behind the hamburger; wordmark + CTA stay visible.
   ============================================================================= */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface-page);
  border-bottom: var(--rule-weight-hairline) solid var(--color-rule-firm);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3A);
  min-height: 64px; /* >=44px tap targets fit comfortably; layout primitive */
  padding-top: var(--space-1A);
  padding-bottom: var(--space-1A);
}

.site-nav__brand {
  font-family: var(--type-family-sans);
  font-weight: var(--type-weight-bold);
  font-size: var(--type-size-lg);
  letter-spacing: var(--type-tracking-normal);
  color: var(--color-text-primary);
  text-decoration: none;
  margin-right: auto; /* push links + CTA to the right */
  white-space: nowrap;
}
.site-nav__brand:hover { color: var(--color-text-accent); }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-3A);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  padding: var(--space-1A) var(--space-half-A);
  border-radius: var(--radius-sm);
}
.site-nav__link:hover { color: var(--color-text-accent); }
.site-nav__link[aria-current="page"] {
  color: var(--color-text-accent);
  font-weight: var(--type-weight-bold);
}

/* The accent-filled CTA button — reachable in one tap from anywhere. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-half-A);
  min-height: 44px; /* tap target floor */
  padding: var(--space-1A) var(--space-2A);
  font-family: var(--type-family-sans);
  font-size: var(--type-size-sm);
  font-weight: var(--type-weight-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-text-inverted);
  transition: background-color 120ms ease;
}
.btn:hover { background: var(--state-pressed); }
.btn:active { background: var(--state-accent-700); }

.btn--ghost {
  background: transparent;
  color: var(--color-text-accent);
  border: var(--rule-weight-hairline) solid var(--ui-boundary);
}
.btn--ghost:hover {
  background: var(--state-hover-bg);
  color: var(--color-text-accent);
}

/* Shared visible focus on every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.site-nav__brand:focus-visible {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
  outline-offset: var(--ui-focus-ring-offset);
}

.site-nav__cta { flex: 0 0 auto; } /* CTA never collapses */

/* Hamburger toggle — hidden on desktop, shown on mobile. */
.site-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: var(--rule-weight-hairline) solid var(--ui-boundary);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}
.site-nav__toggle svg { display: block; }

@media (max-width: 760px) {
  /* Links collapse behind the hamburger; wordmark + CTA + toggle stay. */
  .site-nav__toggle { display: inline-flex; order: 3; }
  .site-nav__cta    { order: 2; }

  .site-nav__links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Collapsed by default; toggled open via [data-open]. */
    display: none;
    padding: var(--space-1A) 0 var(--space-2A);
    border-top: var(--rule-weight-hairline) solid var(--color-rule-soft);
    margin-top: var(--space-1A);
  }
  .site-nav__inner { flex-wrap: wrap; }
  .site-nav__links[data-open="true"] { display: flex; }
  .site-nav__link {
    padding: var(--space-2A) var(--space-1A);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* =============================================================================
   §F — HERO (Home + Field Notes masthead)
   ============================================================================= */

.hero { padding-top: var(--space-8A); padding-bottom: var(--space-6A); }

.hero__headline,
.hero__headline-substitute {
  font-size: var(--type-size-3xl);
  font-weight: var(--type-weight-bold);
  line-height: var(--type-leading-tight);
  color: var(--color-text-primary);
  margin: var(--space-4A) 0 var(--space-2A) 0;
  max-width: var(--measure-prose);
}

.hero__deck {
  font-size: var(--type-size-md);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-snug);
  color: var(--color-text-secondary);
  max-width: var(--measure-wide);
  margin-bottom: var(--space-4A);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3A);
}

.text-link {
  font-size: var(--type-size-sm);
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.text-link:hover { color: var(--state-pressed); }

/* Field Notes masthead: section identity set under the wordmark. */
.masthead__section {
  display: block;
  font-family: var(--type-family-sans);
  font-weight: var(--type-weight-bold);
  font-size: var(--type-size-2xl);
  line-height: var(--type-leading-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-1A);
}

/* =============================================================================
   §G — SECTION HEADINGS within page body
   ============================================================================= */

h2.block__title {
  font-size: var(--type-size-2xl);
  font-weight: var(--type-weight-bold);
  line-height: var(--type-leading-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3A) 0;
  max-width: var(--measure-prose);
}

h3 {
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-bold);
  line-height: var(--type-leading-snug);
  color: var(--color-text-primary);
  margin: var(--space-4A) 0 var(--space-2A) 0;
  max-width: var(--measure-prose);
}

.prose { max-width: var(--measure-body); }
.prose p { max-width: var(--measure-body); }

/* =============================================================================
   §H — PILLAR CARDS (Home §C) — 2x2 grid desktop, single column mobile
   ============================================================================= */

.pillar-intro {
  font-size: var(--type-size-md);
  color: var(--color-text-secondary);
  max-width: var(--measure-wide);
  margin-bottom: var(--space-4A);
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3A);
  max-width: var(--measure-body);
}

@media (max-width: 640px) {
  .pillar-grid { grid-template-columns: 1fr; }
}

.pillar-card {
  background: var(--color-surface-panel); /* elevation tier 2 */
  border: var(--rule-weight-hairline) solid var(--ui-boundary);
  border-radius: var(--radius-md);
  padding: var(--space-3A);
}

.pillar-card__name {
  font-size: var(--type-size-lg);
  font-weight: var(--type-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1A) 0;
}

.pillar-card__gloss {
  font-size: var(--type-size-sm);
  line-height: var(--type-leading-body);
  color: var(--color-text-primary);
  max-width: var(--measure-prose);
  margin: 0;
}

/* =============================================================================
   §I — CALLOUT (reused Brand Book .callout — accent left-border)
   Used for the About/Proof proof blocks.
   ============================================================================= */

.callout {
  background: var(--color-surface-panel);
  border-left: 3px solid var(--color-accent); /* matches Brand Book .callout */
  padding: var(--space-3A) var(--space-4A);
  margin: var(--space-3A) 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: var(--measure-wide);
}
.callout__label {
  font-size: var(--type-size-2xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--type-tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin: 0 0 var(--space-1A) 0;
}
.callout p:last-child { margin-bottom: 0; }

/* =============================================================================
   §J — SIGN-UP (Buttondown form) — 3 placements: band, page-primary, footer
   One email field + one submit button. Styled to tokens, not Buttondown's
   default form CSS. Calm in-place confirmation (no redirect).
   ============================================================================= */

/* Full-width-ish accent-adjacent band (Home §D, About close). */
.signup-band {
  background: var(--color-surface-panel);
  border-top: var(--rule-weight-hairline) solid var(--color-rule-firm);
  border-bottom: var(--rule-weight-hairline) solid var(--color-rule-firm);
  padding-top: var(--space-6A);
  padding-bottom: var(--space-6A);
}

.signup__pitch {
  font-size: var(--type-size-md);
  color: var(--color-text-primary);
  max-width: var(--measure-wide);
  margin-bottom: var(--space-3A);
}
.signup__pitch strong { color: var(--color-text-primary); }

.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5A);
  align-items: flex-start;
  max-width: var(--measure-prose);
}

.signup-form__field {
  flex: 1 1 16rem;
  min-width: 0;
}

.signup-form label.signup-form__label {
  display: block;
  font-size: var(--type-size-2xs);
  letter-spacing: var(--type-tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-half-A);
}

.signup-form input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: var(--space-1A) var(--space-1-5A);
  font-family: var(--type-family-sans);
  font-size: var(--type-size-sm);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  border: var(--rule-weight-hairline) solid var(--ui-boundary);
  border-radius: var(--radius-sm);
}
.signup-form input[type="email"]::placeholder {
  color: var(--color-text-secondary);
}
.signup-form input[type="email"]:focus-visible {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
  outline-offset: var(--ui-focus-ring-offset);
  border-color: var(--color-accent);
}

.signup-form__submit { flex: 0 0 auto; align-self: stretch; }
.signup-form .btn { min-height: 44px; }

.signup__microcopy {
  font-size: var(--type-size-2xs);
  line-height: var(--type-leading-loose);
  color: var(--color-text-secondary);
  margin-top: var(--space-1-5A);
  max-width: var(--measure-wide);
}
.signup__microcopy a { color: var(--color-link); }

/* Calm confirmation state — swapped in by JS on submit (or shown if the
   provider returns to the page). No celebration, just a quiet end. */
.signup__confirm {
  display: none;
  background: var(--color-surface-panel);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-3A) var(--space-4A);
  max-width: var(--measure-wide);
}
.signup__confirm p { margin: 0; }
.signup__confirm .signoff {
  display: block;
  margin-top: var(--space-1A);
  color: var(--color-text-secondary);
}

/* When confirmed: hide the form, reveal the confirmation. */
.signup[data-state="confirmed"] .signup-form,
.signup[data-state="confirmed"] .signup__pitch,
.signup[data-state="confirmed"] .signup__microcopy { display: none; }
.signup[data-state="confirmed"] .signup__confirm { display: block; }

/* Field Notes page: the sign-up given its fullest treatment. */
.signup--primary {
  background: var(--color-surface-panel);
  border: var(--rule-weight-hairline) solid var(--ui-boundary);
  border-radius: var(--radius-md);
  padding: var(--space-4A);
  max-width: var(--measure-wide);
}

/* =============================================================================
   §K — FOOTER (persistent, every page)
   ============================================================================= */

.site-footer {
  flex-shrink: 0;
  margin-top: var(--space-8A);
  background: var(--color-surface-page);
  border-top: var(--rule-weight-hairline) solid var(--color-rule-firm);
  padding-top: var(--space-6A);
  padding-bottom: var(--space-6A);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-6A);
  align-items: start;
}
@media (max-width: 720px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--space-4A); }
}

/* Footer brand: Lockup 2 wordmark + long-form sign-off line (small). */
.site-footer__wordmark {
  font-family: var(--type-family-sans);
  font-weight: var(--type-weight-bold);
  font-size: var(--type-size-xl);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: var(--type-tracking-normal);
}
.site-footer__longform {
  font-size: var(--type-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-half-A) 0 0 0;
}

.site-footer__signup-label {
  font-size: var(--type-size-2xs);
  font-weight: var(--type-weight-bold);
  letter-spacing: var(--type-tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-accent);
  margin: 0 0 var(--space-1A) 0;
}

/* Legal strip — Lockup 3 (ABB:Ed Ltd) + Privacy link. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2A);
  margin-top: var(--space-5A);
  padding-top: var(--space-2A);
  border-top: var(--rule-weight-hairline) solid var(--color-rule-soft);
  font-size: var(--type-size-2xs);
  color: var(--color-text-secondary);
}
.site-footer__legal a { color: var(--color-link); }
.site-footer__legal .sep { color: var(--color-rule-firm); }

.lockup3 {
  font-family: var(--type-family-sans);
  color: var(--color-text-secondary);
}
.lockup3 .lockup3__mark { font-weight: var(--type-weight-bold); }
.lockup3 .lockup3__ltd  { font-weight: var(--type-weight-regular); }

/* =============================================================================
   §L — PRIVACY PAGE (legal-admin register, quiet, loose leading)
   ============================================================================= */

.legal { padding-top: var(--space-6A); }
.legal h2 { margin-bottom: var(--space-3A); }
.legal h3 { font-size: var(--type-size-md); }
.legal p, .legal li {
  line-height: var(--type-leading-loose);
  max-width: var(--measure-body);
}
.legal ul { padding-left: var(--space-4A); }
.legal li { margin-bottom: var(--space-1A); }

/* =============================================================================
   §M — MOTION PREFERENCE
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Forced-colors override lives in design-tokens.css §K — do not duplicate. */