/* =========================================================
   Douty Consulting - stylesheet
   Implements DESIGN.md ("Douty Ledger", Archival Institutional)
   Sections: fonts, tokens, reset, type, layout, header, hero,
   sections, rules, stats, cards, buttons, forms, footer, dark
   ========================================================= */

/* ---------- Fonts (self-hosted) ----------
   Source Serif 4 and Public Sans, both SIL Open Font License, served from
   assets/fonts/ rather than a third-party CDN - no external request, nothing
   for a font host to log, and DESIGN.md already specified self-hosting.

   These are VARIABLE files carrying a 400-600 weight range in one download,
   and Source Serif 4 keeps its optical-size axis, which the type scale relies
   on (font-optical-sizing is auto by default, so large display sizes get the
   drawn-for-display cut rather than a scaled-up text cut).

   latin-ext is a separate face per family: browsers fetch it only if the page
   actually uses those characters, so a typical visitor downloads ~145 KB, not
   the full 262 KB on disk.

   To update: re-fetch from the Google Fonts CSS2 API with a modern browser
   User-Agent, keep the latin and latin-ext blocks, and repoint src at these
   local paths. */

/* Public Sans - latin-ext */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../assets/fonts/public-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Public Sans - latin */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../assets/fonts/public-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Source Serif 4 - latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../assets/fonts/source-serif-4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Serif 4 - latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(../assets/fonts/source-serif-4-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Light palette (canonical tokens from DESIGN.md - "palette (2).txt" slate) */
  --surface: #f0f1f4;
  --neutral: #e7e9ee;
  --subtle: #d8dde5;
  --border: #cbd2db;
  --ink: #1b2029;
  --primary: #313e50;
  --primary-hover: #232e3d;
  --secondary: #455561;
  --error: #8a3a2a;

  /* Photographic plate (home hero). Mode-independent: the plate is always
     dark, so its copy is always near-white. Not part of the DESIGN.md
     token set - see DESIGN.md > Components > Hero plate. */
  --plate: #0d1117;
  --plate-ink: #f8fafd;
  --plate-lede: #d3dae5;
  --plate-meta: #a9b5c6;

  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1100px;
  --margin: 64px;
  --measure: 66ch;

  /* spacing scale: 4 8 16 24 48 96 */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 48px;
  --s-xxl: 96px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #161b22;
    --neutral: #212834;
    --subtle: #2e3746;
    --border: #313e50;
    --ink: #f2f5f9;          /* near-white, faint blue cast (15.8:1 on surface) */
    --primary: #c2cad6;      /* headings, links, button fill (10.5:1) */
    --primary-hover: #dde3eb;
    --secondary: #aeb7c4;    /* metadata (8.6:1) */
    --error: #e0937b;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: pretty;
}
.display {
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h2, .h-lg {
  font-size: clamp(1.6rem, 3.6vw, 2.06rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h3, .h-md {
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.h-sm { font-size: 1.125rem; line-height: 1.35; }

p { margin: 0 0 1rem; }
.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.19rem);
  line-height: 1.65;
  color: var(--secondary);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p { margin-bottom: 1.1rem; }
.prose > * + h2 { margin-top: 2.5rem; }
.prose > * + h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.1rem; margin: 0 0 1.1rem; }
.prose li { margin-bottom: 0.4rem; }

a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--primary-hover); }

strong { font-weight: 600; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  font-feature-settings: "case" 1;
  margin: 0 0 var(--s-md);
}
.eyebrow--mark { color: var(--primary); }

.meta {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--secondary);
}

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--margin);
}
@media (max-width: 768px) {
  :root { --margin: 24px; }
}

.skip-link {
  position: absolute;
  left: -999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--primary);
  color: var(--surface);
  padding: 0.6rem 1rem;
  z-index: 100;
}

/* Vertical only. `.section` is applied to the same element as `.wrap`, so a
   `padding` shorthand here would wipe out the wrap's side margins and run the
   text to the window edge. */
.section { padding-top: var(--s-xl); padding-bottom: var(--s-xl); }
.section--wide { padding-top: var(--s-xxl); padding-bottom: var(--s-xxl); }
.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-lg);
  margin-bottom: var(--s-xl);
  flex-wrap: wrap;
}
.section__head h2 { margin: 0; }
.section__head .eyebrow { margin: 0; white-space: nowrap; }

.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  gap: var(--s-md);
}
.brand {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
.brand span { color: var(--secondary); font-weight: 400; }
.brand::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--primary);
  display: inline-block;
  align-self: center;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-lg);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
}
.nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--primary); }
.nav a[aria-current="page"] { border-bottom-color: var(--primary); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--s-sm) var(--margin) var(--s-lg);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 0.7rem 0; width: 100%; }
  .nav a[aria-current="page"] { border-bottom-color: transparent; color: var(--primary); }
}

/* ---------- Hero ---------- */
.hero { padding: var(--s-xxl) 0 var(--s-xl); }
/* .hero__inner is the same element as .wrap. Constrain the children, never
   this element - a max-width here re-centers the container and pulls the hero
   off the flush-left grid every other section aligns to. */
.hero .display { max-width: 900px; margin-bottom: var(--s-lg); }
.hero .lede { margin-bottom: var(--s-xl); }

/* ---------- Hero: photographic plate (home page) ----------
   A full-bleed image band below the masthead, treated like a plate in a
   catalogue rather than a decorative background. Two layers sit behind the
   copy: the photograph, desaturated toward the slate palette, and a scrim
   weighted to the left so the flush-left copy always sits on near-solid
   ground. Copy is forced to near-white in BOTH modes because the plate is
   always dark. Measured floor: 8.9:1 at the brightest point of the image. */
.hero--image {
  position: relative;
  isolation: isolate;
  background-color: var(--plate);
  border-bottom: 1px solid var(--border);
  padding: var(--s-xxl) 0;
}
/* Machinery only. Each plate supplies its own image, crop and grade through a
   `.hero--<subject>` modifier below. */
.hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Artemis I (home). Mirrored so the vehicle sits in the open right third and
   the dark sky falls under the copy - the composition the scrim needs. */
.hero--launch::before {
  background-image: url("../assets/hero-artemis-launch.jpg");
  background-position: center 46%;
  transform: scaleX(-1);
  filter: saturate(0.5) contrast(1.06);
}

/* Discover supercomputer (AI-First). Needs no mirroring - the dark rack
   already fills the left third. Cropped to the rack band so the lit ceiling
   and white floor fall outside the frame, and graded harder than the launch
   plate because the room's green and blue LEDs are the most saturated thing
   in the whole site. */
.hero--datacenter::before {
  background-image: url("../assets/hero-discover-datacenter.jpg");
  background-position: center 44%;
  filter: saturate(0.3) contrast(1.05) brightness(0.94);
}
/* Global Hawk (Dual-Use). Golden-hour ramp shot: the whole frame is mid-bright
   and strongly warm, which is the hardest case in the set. It takes the most
   aggressive grade of the three - warmth pulled almost out, brightness well
   down - so it sits in the same tonal family as the other two plates instead
   of glowing orange next to them. */
.hero--drone::before {
  background-image: url("../assets/hero-globalhawk.jpg");
  background-position: center 52%;
  filter: saturate(0.2) contrast(1.1) brightness(0.66);
}
/* Nothing in this frame is dark, so the scrim floor is the highest of the
   three: 0.5 at the right edge, 0.3 at its thinnest. */
.hero--drone::after {
  background:
    linear-gradient(90deg,
      rgba(13, 17, 23, 0.94) 0%,
      rgba(13, 17, 23, 0.9) 44%,
      rgba(13, 17, 23, 0.7) 60%,
      rgba(13, 17, 23, 0.54) 80%,
      rgba(13, 17, 23, 0.5) 100%),
    linear-gradient(180deg,
      rgba(13, 17, 23, 0.55) 0%,
      rgba(13, 17, 23, 0.3) 42%,
      rgba(13, 17, 23, 0.58) 100%);
}

/* This room has no genuinely dark quarter the way a night launch does - the lit
   ceiling and white floor sit just outside the crop and still bleed in. So the
   scrim carries a higher floor than the launch plate at both ends: 0.46 at the
   right edge instead of 0.30, and 0.24 at its thinnest instead of 0.08. */
.hero--datacenter::after {
  background:
    linear-gradient(90deg,
      rgba(13, 17, 23, 0.95) 0%,
      rgba(13, 17, 23, 0.92) 44%,
      rgba(13, 17, 23, 0.7) 58%,
      rgba(13, 17, 23, 0.5) 80%,
      rgba(13, 17, 23, 0.46) 100%),
    linear-gradient(180deg,
      rgba(13, 17, 23, 0.6) 0%,
      rgba(13, 17, 23, 0.24) 40%,
      rgba(13, 17, 23, 0.55) 100%);
}
.hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(13, 17, 23, 0.95) 0%,
      rgba(13, 17, 23, 0.93) 44%,
      rgba(13, 17, 23, 0.66) 58%,
      rgba(13, 17, 23, 0.34) 80%,
      rgba(13, 17, 23, 0.3) 100%),
    linear-gradient(180deg,
      rgba(13, 17, 23, 0.5) 0%,
      rgba(13, 17, 23, 0.08) 36%,
      rgba(13, 17, 23, 0.55) 100%);
}

/* Copy is held short so the scrim can open before the vehicle. */
.hero--image .display { max-width: 660px; }
.hero--image .lede { max-width: 54ch; }

.hero--image .display { color: var(--plate-ink); }
.hero--image .lede { color: var(--plate-lede); }
.hero--image .eyebrow { color: var(--plate-meta); }

.hero--image .btn--primary {
  background: var(--plate-ink);
  color: var(--plate);
  border-color: var(--plate-ink);
}
.hero--image .btn--primary:hover { background: #fdfeff; color: var(--plate); }
.hero--image .btn--secondary {
  background: rgba(240, 244, 250, 0.1);
  color: var(--plate-ink);
  border-color: rgba(240, 244, 250, 0.42);
}
.hero--image .btn--secondary:hover {
  background: rgba(240, 244, 250, 0.2);
  color: var(--plate-ink);
}
.hero--image a:focus-visible {
  outline: 2px solid var(--plate-ink);
  outline-offset: 3px;
}

/* Plate caption. NASA imagery is public domain; credit is courtesy, not
   obligation - delete this element and rule if it is not wanted. */
.hero__credit {
  position: absolute;
  right: var(--margin);
  bottom: var(--s-md);
  margin: 0;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 244, 250, 0.62);
}

/* Narrow screens: copy runs the full width, so there is no room to open the
   scrim horizontally. Instead the plate gets a dedicated reveal band below the
   buttons - the scrim stays near-solid behind the copy and opens at the foot. */
@media (max-width: 720px) {
  .hero--image { padding-bottom: 240px; }
  .hero--launch::before { background-position: 62% center; }
  .hero--datacenter::before { background-position: 38% center; }
  .hero--drone::before { background-position: 52% center; }
  .hero--image::after {
    background: linear-gradient(180deg,
      rgba(13, 17, 23, 0.95) 0%,
      rgba(13, 17, 23, 0.93) 62%,
      rgba(13, 17, 23, 0.55) 79%,
      rgba(13, 17, 23, 0.3) 91%,
      rgba(13, 17, 23, 0.5) 100%);
  }
  /* The foot of the plate is the open reveal band here, so the caption moves
     to the head of it, where the scrim is near-solid (3.0:1 -> 15:1). */
  .hero__credit {
    top: var(--s-md);
    bottom: auto;
  }
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border-radius: 2px;
  border: 1px solid transparent;
}
.btn--primary { background: var(--primary); color: var(--surface); }
.btn--primary:hover { background: var(--primary-hover); color: var(--surface); }
.btn--secondary {
  background: var(--neutral);
  color: var(--primary);
  border-color: var(--border);
}
.btn--secondary:hover { color: var(--primary-hover); background: var(--neutral); }

.text-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-lg);
}
.stat { border-top: 1px solid var(--primary); padding-top: var(--s-md); }
.stat__num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.stat__label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: var(--s-sm);
}
@media (max-width: 680px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-md) var(--s-lg); }
}

/* ---------- Practice / index list ---------- */
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list > li { border-top: 1px solid var(--border); padding: var(--s-lg) 0; }
.index-list > li:last-child { border-bottom: 1px solid var(--border); }
.index-list h3 { margin-bottom: 0.35rem; }
.index-list .item-index {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.index-list p { color: var(--secondary); max-width: var(--measure); margin-bottom: 0.6rem; }

/* generic two-column grid for framework pieces */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xl) var(--s-lg); }
.grid-2 h3 { margin-bottom: 0.35rem; }
.grid-2 p { color: var(--secondary); margin-bottom: 0; }
.grid-2 .piece-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; gap: var(--s-xl); } }

/* ---------- Card ---------- */
.card {
  background: var(--neutral);
  padding: var(--s-lg);
}
.card--object { border-radius: 3px; }

/* pull statement */
.statement {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.statement--wide { max-width: 40ch; }

/* callout block */
.callout {
  background: var(--subtle);
  padding: var(--s-md);
  border-left: 2px solid var(--primary);
  max-width: var(--measure);
  color: var(--ink);
}
.callout p:last-child { margin-bottom: 0; }

/* chip */
.chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--subtle);
  color: var(--ink);
  padding: 4px 8px;
}

/* deliverable list */
.deliverables { list-style: none; margin: 0; padding: 0; }
.deliverables li {
  border-top: 1px solid var(--border);
  padding: var(--s-md) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--s-lg);
  flex-wrap: wrap;
}
.deliverables li:last-child { border-bottom: 1px solid var(--border); }
.deliverables .d-name { font-weight: 600; }
.deliverables .d-note { color: var(--secondary); font-size: 0.9375rem; }

/* checklist */
.checklist { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.checklist li {
  border-top: 1px solid var(--border);
  padding: var(--s-md) 0 var(--s-md) 1.6rem;
  position: relative;
  color: var(--secondary);
}
.checklist li:last-child { border-bottom: 1px solid var(--border); }
.checklist li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--primary);
}

/* ---------- CTA band ---------- */
.cta { border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary); padding: var(--s-xxl) 0; }
.cta__inner { max-width: 640px; }
.cta h2 { margin-bottom: var(--s-md); }
.cta p { color: var(--secondary); max-width: 52ch; }
.cta .actions { margin-top: var(--s-lg); }

/* ---------- Person / about ---------- */
.person {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-xl);
  align-items: start;
}
.person img { width: 100%; border-radius: 0; filter: saturate(0.85); }
.person .meta { margin-top: var(--s-sm); }
@media (max-width: 640px) {
  .person { grid-template-columns: 1fr; gap: var(--s-lg); }
  .person img { max-width: 200px; }
}

.career { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.career li { border-top: 1px solid var(--border); padding: var(--s-md) 0; }
.career li:last-child { border-bottom: 1px solid var(--border); }
.career .c-head { font-weight: 600; }
.career .c-body { color: var(--secondary); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); max-width: 640px; }
.form-field { display: flex; flex-direction: column; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.6rem 0.7rem;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
  border-width: 2px;
}
.form-note { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--secondary); }
/* Status starts neutral - it is also used for "Sending..." - and only takes a
   colour once there is an outcome. Never colour alone: the text always says
   what happened. */
[data-form-status]:empty { display: none; }
[data-form-status].is-ok { color: var(--primary); font-weight: 600; }
[data-form-status].is-error { color: var(--error); font-weight: 600; }
.form-field input:disabled,
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- Booking chooser ----------
   Injected by js/main.js, so it exists on every page without duplicated
   markup. Follows the overlay rule in DESIGN.md: no shadow, distinguished
   from the page by a 1px rule and a plain (unblurred) backdrop tint. */
.booking {
  width: min(400px, calc(100vw - 2 * var(--s-lg)));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
}
.booking::backdrop { background: rgba(13, 17, 23, 0.64); }
.booking__inner { padding: var(--s-lg); }
.booking__inner .eyebrow { margin-bottom: var(--s-sm); }
.booking h2 { margin-bottom: var(--s-xs); }
.booking__note {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--secondary);
  margin-bottom: var(--s-lg);
}

.booking__options { list-style: none; margin: 0 0 var(--s-lg); padding: 0; }
.booking__options li { border-top: 1px solid var(--border); }
.booking__options li:last-child { border-bottom: 1px solid var(--border); }
.booking__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  padding: var(--s-md) var(--s-xs);
  text-decoration: none;
  color: var(--ink);
}
.booking__option:hover { background: var(--neutral); }
.booking__option:hover .booking__name { color: var(--primary); }
.booking__name { font-weight: 600; }
.booking__meta {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--secondary);
  white-space: nowrap;
}

.booking__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
}
.booking__close {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}
.booking__close:hover { color: var(--primary); }
.booking__alt {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.booking__alt:hover { color: var(--primary); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--s-xxl);
  padding: var(--s-lg) 0 var(--s-xl);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: var(--s-md);
  flex-wrap: wrap;
}
.site-footer,
.site-footer a {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--secondary);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--primary); }
.site-footer nav { display: flex; gap: var(--s-md); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}