/* Called to Office — guide page layout, extends site.css tokens */
.guide-hero {
  background: var(--ink);
  color: var(--parchment);
  border-bottom: 4px double var(--brass);
}
.guide-hero-inner {
  width: min(880px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 64px);
}
.breadcrumb { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--brass-soft); margin: 0 0 24px; }
.breadcrumb a { color: var(--brass-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--parchment); }
.guide-hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin-bottom: 22px;
  color: var(--parchment);
}
.guide-hero .lede { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: oklch(0.91 0.02 90); max-width: 60ch; margin: 0; }

.guide-body { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(48px, 7vw, 88px) 0; }
.guide-body h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin: 48px 0 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.guide-body h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.guide-body h3 { font-size: 1.05rem; color: var(--brick); margin: 28px 0 6px; }
.guide-body p { color: var(--ink-soft); margin: 0 0 18px; }
.guide-body ul, .guide-body ol { color: var(--ink-soft); margin: 0 0 20px; padding-left: 24px; }
.guide-body li { margin-bottom: 8px; }
.guide-body strong { color: var(--ink); }

.pull {
  border-left: 4px solid var(--brass);
  background: var(--surface);
  padding: 20px 24px;
  margin: 28px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}
.fact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  padding: 22px 24px;
  margin: 28px 0;
}
.fact-card h3 { color: var(--green); margin-top: 0; }
.fact-card p:last-child { margin-bottom: 0; }

.next-steps {
  background: var(--ink);
  color: var(--parchment);
}
.next-steps-inner { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(48px, 7vw, 80px) 0; }
.next-steps h2 { color: var(--parchment); border: none; padding: 0; margin: 0 0 24px; }
.next-steps p { color: oklch(0.91 0.02 90); }
.next-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

.guide-callout { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.03em; color: var(--brass-soft); border-top: 1px solid oklch(0.33 0.006 80); padding-top: 18px; margin-top: 28px; }

/* session list — Faith & the City */
.session-list { list-style: none; padding: 0; margin: 32px 0; counter-reset: session; }
.session-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  counter-increment: session;
}
.session-list li::before {
  content: counter(session, upper-roman);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.5rem;
  color: var(--brass);
  line-height: 1;
  padding-top: 2px;
}
.session-list h3 { margin: 0 0 6px; color: var(--ink); }
.session-list p { margin: 0; }

.guide-body .lede-block { font-size: 1.15rem; color: var(--ink); margin-bottom: 28px; }

/* board / about */
.board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 28px 0; }
.board-member { background: var(--surface); padding: 24px; }
.board-member .name { font-family: var(--display); font-weight: 700; font-stretch: 85%; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem; color: var(--ink); margin: 0 0 4px; }
.board-member .role { font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brick); margin: 0; }
.board-placeholder { background: var(--surface); border: 1px dashed var(--brass); padding: 24px; margin: 28px 0; font-style: italic; color: var(--ink-soft); }

/* ===== Find My Districts — lookup page ===== */
.lookup-form { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.lookup-form input[type="search"] {
  font-family: var(--serif); font-size: 1.05rem; padding: 14px 16px;
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); flex: 1; min-width: min(360px, 100%);
}
.lookup-form .button { border-width: 1.5px; }
.lookup-hint { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-soft); margin: 0 0 10px; }
.lookup-hint button { background: none; border: none; color: var(--green); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }
.lookup-status { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); min-height: 1.2em; margin: 6px 0; }

.result { border: 2px solid var(--ink); background: var(--surface); margin-top: 24px; display: none; }
.result.show { display: block; }
.result-head { background: var(--ink); color: var(--parchment); padding: 18px 24px; }
.result-head .you-live { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass-soft); margin: 0 0 4px; }
.result-head h3 { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 0; color: var(--parchment); }
.result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); }
.result-cell { background: var(--surface); padding: 18px 22px; }
.result-cell .label { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); margin: 0 0 5px; }
.result-cell .value { font-size: 1.05rem; color: var(--ink); margin: 0; }
.result-cell .value.muted { color: var(--ink-soft); font-style: italic; font-size: 0.95rem; }
.coverage-badge { display: inline-block; font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; margin-top: 6px; }
.coverage-badge.sourced { background: oklch(0.43 0.07 155 / 0.14); color: var(--green); }
.coverage-badge.pending { background: oklch(0.62 0.10 82 / 0.18); color: var(--brick-dark); }
.result-actions { padding: 20px 24px; border-top: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; }
.result-actions a { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); text-decoration: none; border-bottom: 1.5px solid var(--brass); padding-bottom: 2px; }
.result-actions a:hover { color: var(--brick-dark); }
.result-note { padding: 0 24px 20px; }
.result-note p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }

/* map on the Find page */
.map-wrap { border-bottom: 1px solid var(--line); }
#map { height: 360px; width: 100%; background: oklch(0.92 0.01 90); }
.map-status { padding: 11px 24px; margin: 0; color: var(--ink-soft); background: var(--surface); border-top: 1px solid var(--line); }
.maplibregl-ctrl-attrib { font-family: var(--mono); font-size: 0.62rem; }