:root {
  /* base palette (immutable color tokens) */
  --c-dark: #0a0a0a;
  --c-charcoal: #1a1816;
  --c-cream: #f4f0e8;
  --c-white: #fafaf7;
  --c-accent: #e0875a;
  --c-accent-hover: #f1a273;
  --c-accent-deep: #a55a2e;
  --c-accent-deep-hover: #c4683d;

  /* default scheme = dark (used by hero + close) */
  --bg: var(--c-dark);
  --bg-elev: #131313;
  --text: #f4f0e8;
  --muted: #8b8680;
  --accent: var(--c-accent);
  --accent-hover: var(--c-accent-hover);
  --on-accent: #0a0a0a;
  --hairline: rgba(244, 240, 232, 0.08);
  --hairline-strong: rgba(244, 240, 232, 0.18);
  --row-hover: rgba(244, 240, 232, 0.025);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --section-pad-y: 80px;
  --container-w: 1200px;
}

@media (min-width: 720px) {
  :root { --section-pad-y: 128px; }
}
@media (min-width: 1100px) {
  :root { --section-pad-y: 160px; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (min-width: 720px) {
  body { font-size: 17px; }
}

a { color: var(--accent); text-decoration: none; transition: color 180ms ease; }
a:hover { color: var(--accent-hover); }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
.container.narrow { max-width: 720px; }

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

/* Section color schemes.
   Each section overrides the cascading CSS variables for its own scheme,
   then sets an explicit background. The 96px gradient band at the top of
   each non-hero section creates a smooth transition from the previous
   section's color into this one's. */
.section-live {
  --bg: var(--c-cream);
  --bg-elev: #ece7dc;
  --text: #1a1816;
  --muted: #6e6862;
  --accent: var(--c-accent-deep);
  --accent-hover: var(--c-accent-deep-hover);
  --on-accent: #fafaf7;
  --hairline: rgba(26, 24, 22, 0.10);
  --hairline-strong: rgba(26, 24, 22, 0.22);
  --row-hover: rgba(26, 24, 22, 0.03);
  color: var(--text);
  background-color: var(--c-cream);
}
.section-record {
  --bg: var(--c-white);
  --bg-elev: #f0ebe0;
  --text: #1a1816;
  --muted: #6e6862;
  --accent: var(--c-accent-deep);
  --accent-hover: var(--c-accent-deep-hover);
  --on-accent: #fafaf7;
  --hairline: rgba(26, 24, 22, 0.08);
  --hairline-strong: rgba(26, 24, 22, 0.20);
  --row-hover: rgba(26, 24, 22, 0.025);
  color: var(--text);
  background-color: var(--c-white);
}
/* "Every call. Heard." — inverted from the white visual-chart section above
   so the audio surface reads as a different sensory mode. Subtle warm radial
   glow at the top suggests dusk/night, when this data is most uniquely
   ours (owls and nocturnal birds). */
.section-heard {
  --bg: var(--c-dark);
  --bg-elev: #131313;
  --text: #f4f0e8;
  --muted: #8b8680;
  --accent: var(--c-accent);
  --on-accent: #1a1816;
  --hairline: rgba(244, 240, 232, 0.10);
  --hairline-strong: rgba(244, 240, 232, 0.22);
  --row-hover: rgba(244, 240, 232, 0.03);
  color: var(--text);
  background-color: var(--c-dark);
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%,
                    rgba(232, 180, 90, 0.06) 0%,
                    transparent 70%);
  position: relative;
}
/* A 1px warm hairline along the top edge to give the inversion a clean
   "this is a different section" cut, since gradient bands aren't on the
   adjacent white section. */
.section-heard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(232, 180, 90, 0.4) 40%,
              rgba(232, 180, 90, 0.4) 60%,
              transparent 100%);
  pointer-events: none;
}

.section-origins {
  --bg: var(--c-cream);
  --bg-elev: #ece7dc;
  --text: #1a1816;
  --muted: #6e6862;
  --accent: var(--c-accent-deep);
  --accent-hover: var(--c-accent-deep-hover);
  --on-accent: #fafaf7;
  --hairline: rgba(26, 24, 22, 0.10);
  --hairline-strong: rgba(26, 24, 22, 0.22);
  color: var(--text);
  background-color: var(--c-cream);
  text-align: center;
}
.section-close {
  background-color: var(--c-dark);
}

.section-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  font-size: clamp(40px, 6.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}

/* HERO */
.section-hero {
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
  background: #000;
}
/* On portrait mobile the bird+box is crowded against the left edge.
   Crop more from the right side of the source so the subject shifts
   ~40px rightward in the viewport. */
@media (max-width: 720px) {
  .hero-video {
    object-position: calc(50% - 40px) 50%;
  }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.05) 30%, rgba(10,10,10,0.35) 70%, rgba(10,10,10,0.92) 100%);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 1100px;
}
.hero-headline {
  font-family: var(--serif);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  margin: 0 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
}
.hero-logo {
  display: block;
  width: clamp(280px, 58vw, 760px);
  height: auto;
  max-width: 100%;
}
.hero-headline--main {
  font-size: clamp(54px, 12vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.038em;
}
.hero-headline--small {
  font-size: clamp(18px, 2.6vw, 28px);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 30;
  letter-spacing: -0.012em;
  color: rgba(244, 240, 232, 0.86);
}
.hero-buttons {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease;
  background: transparent;
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  padding: 13px 24px;
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  border-color: transparent;
  color: var(--text);
  padding: 13px 8px;
}
.btn-ghost:hover { color: var(--accent); }
.btn-ghost span { transition: transform 220ms ease; display: inline-block; }
.btn-ghost:hover span { transform: translateX(3px); }
.btn-outline {
  border-color: var(--hairline-strong);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-yt {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 500;
}
.btn-yt:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-1px); }
.btn-yt:active { transform: translateY(0); }

/* LIVE */
.embed-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.status-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px auto 0;
  max-width: 1200px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--muted);
  font-feature-settings: "ss01";
}
.status-text { color: var(--text); }
.status-strip.idle .status-text,
.status-strip.off  .status-text { color: var(--muted); }
.status-strip.live .status-text { color: var(--text); font-weight: 500; }
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
  flex-shrink: 0;
  position: relative;
}
.status-strip.live .status-dot {
  background: #2dd286;
  animation: pulse 1.8s ease-in-out infinite;
}
.status-strip.idle .status-dot { background: #d6d3cc; }
.status-strip.off  .status-dot { background: #4a4744; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 210, 134, 0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(45, 210, 134, 0); }
}
.caption {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--text);
  opacity: 0.86;
  max-width: 820px;
  margin: 64px auto 0;
  text-align: center;
}
.live-subscribe {
  margin: 28px auto 0;
  text-align: center;
}

/* RECORD */
.datestamp {
  margin: 0 0 36px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* FILTER BAR */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 56px;
  flex-wrap: wrap;
}
.filter-pills {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--row-hover);
  padding: 4px;
  border-radius: 999px;
}
.filter-btn {
  background: transparent;
  border: 0;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  white-space: nowrap;
}
.filter-btn:hover { color: var(--text); }
.filter-btn.is-active {
  background: var(--text);
  color: var(--bg);
}
.filter-spacer { flex: 1 1 0; }
.filter-day-wrap { position: relative; display: inline-flex; align-items: center; }
.filter-day-picker {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  padding: 8px 32px 8px 14px;
  border-radius: 999px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 180ms ease, color 180ms ease;
}
.filter-day-picker:hover { border-color: var(--accent); color: var(--accent); }
.filter-day-picker:focus-visible { border-color: var(--accent); }
.filter-day-wrap::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--muted);
  pointer-events: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* DATA ACTIONS — CSV/JSON download */
.data-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 80px;
}
.data-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.data-action:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.data-action__icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--row-hover);
  font-weight: 600;
}

/* METHODS PANEL — always visible */
.methods-panel {
  border-top: 1px solid var(--hairline);
  padding: 32px 0 0;
  margin: 0;
}
.methods-eyebrow {
  margin: 0 0 24px;
}
.methods-body {
  max-width: none;
}
.methods-demo {
  margin: 0 0 32px;
  max-width: 720px;
}
.methods-demo__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--hairline-strong);
  background: #000;
}
.methods-demo__caption {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.5;
}
.methods-body p {
  font-family: var(--serif);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--text);
  opacity: 0.86;
  margin: 0 0 18px;
}
.methods-body p em {
  font-style: italic;
}
.chart-card { margin-bottom: 64px; }
.chart-wrap {
  position: relative;
  height: 420px;
  width: 100%;
  margin-bottom: 12px;
}
/* Canvas defaults to display:inline, which makes the parent compute its
   height from inline-box rules (baseline-aligned line boxes) instead of the
   canvas's CSS height. For tall canvases like the audio ridgeline (~700px)
   that means the parent only grows to ~540px (min-height), and the canvas
   visually overflows down into the next chart-card. display:block makes the
   parent grow to fit the canvas. */
.chart-wrap canvas { display: block; }
@media (max-width: 720px) {
  /* Chart-wrap is the visit chart's container (#record). 320px is too
     tight for the legend + chart on mobile: with 22 species, Chart.js
     hits its "legend ≤ 50% of plot area" cap and silently drops the
     trailing ~12 species from the legend (lines still render, but you
     can no longer match a line to a species). 520px gives the full
     legend room to wrap without making the chart unreadably short. */
  .chart-wrap { height: 520px; }
}
/* Audio chart is a stacked-ridgeline that needs vertical room scaled by
   the number of species (one row each). Let it grow past the fixed 420px
   the visual diel chart uses. The canvas's own CSS height (set in JS) is
   the source of truth. */
#heard .chart-wrap {
  height: auto;
  min-height: 540px;
}
@media (max-width: 720px) {
  #heard .chart-wrap { min-height: 460px; }
}
/* Disabled filter pills — until 7d/30d/All-time aggregates are generated
   the buttons exist but shouldn't look or behave clickable. */
[data-audio-filter][disabled] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.chart-subhead {
  color: var(--muted);
  font-size: 14px;
  margin: 12px 0 0;
}

/* TABLE */
.table-card {
  margin-bottom: 64px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.visit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 640px;
}
.visit-table th, .visit-table td {
  padding: 18px 16px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.visit-table thead tr { border-bottom: 1px solid var(--hairline-strong); }
.visit-table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 14px;
}
.visit-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.visit-table tbody tr { transition: background 180ms ease; }
.visit-table tbody tr:hover { background: var(--row-hover); }
/* Species thumbnail — one canonical image per species, the highest-confidence
   detection ever captured. Renders as a circular crop in the leftmost
   table column on desktop and as a hero image on each mobile card. */
.species-thumb-cell {
  width: 56px;
  padding-right: 0 !important;
}
.species-thumb {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  border: 1px solid var(--hairline-strong);
}
.species-thumb--empty {
  opacity: 0.25;
}

.species-cell { display: flex; align-items: baseline; gap: 12px; }

/* MOBILE: collapse the wide visit-table into stacked cards. Each row
   becomes a card with the species name as the heading and stat lines
   below it. The horizontal scroll on mobile was the worst of both
   worlds — half the data hidden off-screen, hard to tap through. */
@media (max-width: 720px) {
  .table-card { overflow-x: visible; margin-bottom: 48px; }
  .visit-table {
    min-width: 0;
    width: 100%;
    display: block;
    font-size: 14px;
  }
  .visit-table thead { display: none; }
  .visit-table tbody, .visit-table tbody tr { display: block; }
  .visit-table tbody tr {
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline);
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    row-gap: 4px;
  }
  .visit-table tbody tr:last-child { border-bottom: none; }
  .visit-table tbody tr:hover { background: transparent; }
  .visit-table td.species-thumb-cell {
    grid-column: 1;
    grid-row: 1 / span 6;
    padding: 0;
    width: 56px;
  }
  .visit-table .species-thumb {
    width: 56px;
    height: 56px;
  }
  .visit-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: none;
    white-space: normal;
    gap: 16px;
    grid-column: 2;
  }
  .visit-table td:nth-child(2) {
    display: block;
    padding-bottom: 6px;
  }
  .visit-table td.num {
    text-align: right;
    font-size: 13px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }
  .visit-table td.num::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .visit-table .species-cell {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
  }
  .visit-table .species-name {
    font-size: 16px;
  }
}
.species-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}
.species-name { font-weight: 500; letter-spacing: -0.005em; }
.species-name-link {
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease, border-color 180ms ease;
  position: relative;
}
.species-name-link::after {
  content: " ↗";
  font-size: 0.78em;
  vertical-align: 0.2em;
  margin-left: 2px;
  opacity: 0;
  color: var(--accent);
  transition: opacity 180ms ease, transform 180ms ease;
  display: inline-block;
}
.species-name-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.species-name-link:hover::after { opacity: 0.85; transform: translate(1px, -1px); }
.species-sci {
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0;
}

.origin-prose {
  text-align: left;
  max-width: 660px;
  margin: 0 auto;
}
.origin-prose p {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 28px;
}
.origin-prose .origin-lede {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.45;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.014em;
  font-weight: 400;
  margin-bottom: 40px;
}
.origin-prose em {
  font-style: italic;
}
.origin-prose .origin-emph {
  font-style: italic;
  font-variation-settings: "opsz" 30;
}
.origin-note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--text);
  max-width: 680px;
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 48px;
}
.origin-byline {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin: 64px 0 0;
  letter-spacing: 0;
}

/* CLOSE */
.section-close { text-align: center; }
.section-close .btn-yt { margin: 8px 0 56px; }
.email-prompt { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.email-form {
  margin: 0 auto;
  max-width: 420px;
}
.email-field {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 8px 0;
  transition: border-color 220ms ease;
}
.email-field:focus-within { border-bottom-color: var(--accent); }
.email-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  letter-spacing: -0.005em;
  -webkit-text-fill-color: var(--text);
}
.email-form input[type="email"]::placeholder { color: var(--muted); }
.email-form input[type="email"]:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--bg) inset;
  caret-color: var(--text);
}
.email-submit {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}
.email-submit:hover { color: var(--accent); }
.email-submit:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.email-field:focus-within .email-submit { color: var(--accent); }
.form-error {
  color: var(--muted);
  font-size: 13px;
  margin: 12px 0 0;
}
.form-success {
  color: var(--text);
  font-size: 16px;
  margin: 12px 0 24px;
}
.contact-line {
  margin: 80px 0 64px;
  color: var(--muted);
  font-size: 14px;
}
.hairline {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0 0 32px;
}
.site-footer p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0;
  letter-spacing: -0.005em;
}

/* FADE-IN */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
}
.fade-in.is-visible { opacity: 1; transform: none; }
.fade-in.is-visible > * { animation: rise 900ms var(--ease-out) both; }
.fade-in.is-visible > *:nth-child(1) { animation-delay: 60ms; }
.fade-in.is-visible > *:nth-child(2) { animation-delay: 140ms; }
.fade-in.is-visible > *:nth-child(3) { animation-delay: 220ms; }
.fade-in.is-visible > *:nth-child(4) { animation-delay: 300ms; }
.fade-in.is-visible > *:nth-child(5) { animation-delay: 380ms; }
.fade-in.is-visible > *:nth-child(6) { animation-delay: 460ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Focus rings — visible only for keyboard users */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline-offset: 4px;
  border-radius: 999px;
}
.email-field:focus-within {
  outline: 0;
}
.email-form input[type="email"]:focus-visible {
  outline: 0;
}

/* Selection */
::selection { background: var(--accent); color: #0a0a0a; }

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .status-strip.live .status-dot { animation: none; }
  html { scroll-behavior: auto; }
}