/* Deacon Pete — Livingston Avenue
   The page is a note from Peter, not a landing page. Plainness is the point:
   churches of Christ have no instruments and no stained glass, and the design
   follows suit. No cards, no shadows, no ornament, nothing centred.
   System serif only — an elder opens this from a text message on cellular,
   and a webfont round-trip buys nothing a good serif stack doesn't already give. */

:root {
  --paper:      #f6f5f1;   /* warm neutral, biased green rather than cream */
  --ink:        #1b1e1c;
  --ink-muted:  #5c625e;
  --rule:       #dfddd6;
  --accent:     #2e4a42;   /* deep green-slate */
  --accent-ink: #f6f5f1;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --measure: 58ch;
  --step:    clamp(1.0625rem, 0.98rem + 0.42vw, 1.1875rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #131614;
    --ink:        #e9e7e2;
    --ink-muted:  #9aa19c;
    --rule:       #2b302d;
    --accent:     #86ab9e;
    --accent-ink: #10130f;
  }
}
:root[data-theme="dark"] {
  --paper: #131614; --ink: #e9e7e2; --ink-muted: #9aa19c;
  --rule: #2b302d; --accent: #86ab9e; --accent-ink: #10130f;
}
:root[data-theme="light"] {
  --paper: #f6f5f1; --ink: #1b1e1c; --ink-muted: #5c625e;
  --rule: #dfddd6; --accent: #2e4a42; --accent-ink: #f6f5f1;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--step);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.note {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.5rem) 1.375rem clamp(2.5rem, 2rem + 4vw, 4rem);
  min-height: 100svh;
}

/* letterhead ------------------------------------------------------------- */

.letterhead {
  display: flex;
  align-items: center;
  gap: 0.9375rem;
}

.letterhead img {
  width: 62px;
  height: 62px;
  border-radius: 3px;           /* squared, like a photo on letterhead — not an avatar bubble */
  object-fit: cover;
  flex-shrink: 0;
  filter: saturate(0.92);
}

.who { display: flex; flex-direction: column; gap: 0.125rem; }

.who strong {
  font-weight: 600;
  font-size: 1.0625em;
  letter-spacing: 0.005em;
}

.who span {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

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

/* the note --------------------------------------------------------------- */

.body { display: flex; flex-direction: column; gap: 1.05rem; }

.body p { margin: 0; text-wrap: pretty; }

.body p:first-child::first-letter { /* no drop cap — just a touch more presence */
  font-size: 1.02em;
}

.signature {
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 0;
}

/* the call ---------------------------------------------------------------- */

.call {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hint {
  font-family: var(--sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

/* the widget mounts here; give it room and let it size itself */
elevenlabs-convai { display: block; min-height: 84px; }

/* fallback shown only if the widget script fails to load */
.fallback {
  display: none;
  font-family: var(--sans);
  font-size: 0.875rem;
}
.fallback a { color: var(--accent); }
html.widget-failed .fallback { display: block; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}