/* ==========================================================================
   J217 — faith + action
   One stylesheet. Minimal on purpose: white ground, thin rules, gold accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink and gold are sampled from the logo artwork, not picked by eye.
     Re-sample after any artwork change: python3 tools/derive-logo-assets.py */
  --ink: #121212;
  /* Neutral greys, no blue tint, because the brand ink is a pure neutral.
     Contrast on white: 10.4:1, 5.9:1, 4.6:1. Every one clears AA, including
     --ink-40, which carries real text (field hints, counts, footer credits). */
  --ink-80: #404040;
  --ink-60: #646464;
  --ink-40: #757575;

  /* ONE brand gold, in two renderings.
     --gold is the brand value, used for SHAPES only: the mark, rules, borders,
     focus rings. At 2.42:1 on white it fails WCAG AA at every text size, so it
     is never set as text.
     --gold-ink is that same gold darkened until it clears AA (5.08:1). It is
     the only gold that touches type. Not a second brand colour, a legibility
     rendering of the one above. */
  --gold: #cca04a;
  --gold-ink: #876a31;

  --paper: #ffffff;
  /* Retained only as the map's ground; the site itself is white throughout. */
  --wash: #faf9f7;
  --rule: #e7e5e0;

  /* Type scale. Six steps, deliberately. Anything that needs a size uses one
     of these; adding a seventh is how a scale turns back into fifteen ad hoc
     values. Body is 1.15rem (18.4px), sized up for an older readership.
       0.92  eyebrows, tags, micro-labels
       1.02  hints, credits, captions
       1.15  secondary body  (same as body: an older readership should not be
             reading most of a page one step below the base size)
       1.25  body = 20px
       1.45  lede
       1.60  h3 and listing titles                                        */

  --measure: 34rem;
  --shell: 68rem;

  --step: clamp(4.5rem, 9vw, 8rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-80);
  font-family: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.6rem; font-weight: 400; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--step); }

.section--tight { padding-block: calc(var(--step) * 0.62); }

.prose { max-width: var(--measure); }
.prose h2 + p { margin-top: 1.4rem; }
.prose h3 { margin-top: 2.4rem; margin-bottom: 0.5rem; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  z-index: 100;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* Eyebrow label above a heading. */
.eyebrow {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}

.lede {
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--ink-80);
}


.center { text-align: center; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand img { height: 2.1rem; width: auto; }
.brand__word { height: 0.92rem !important; }

.nav { display: flex; align-items: center; gap: 2rem; }

.nav a {
  color: var(--ink-80);
  text-decoration: none;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

/* `.nav a` (0,1,1) outranks `.btn` (0,1,0), which would leave the call to
   action rendering dark grey text on its near-black fill. Restate it here. */
.nav a.btn,
.nav a.btn:hover,
.nav a.btn[aria-current="page"] { color: #fff; border-bottom-color: transparent; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.55rem 0.85rem;
  font: inherit;
  font-size: 1.02rem;
  color: var(--ink);
  cursor: pointer;
}

@media (max-width: 46rem) {
  .nav__toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem 1.25rem 1.25rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
  .nav .btn { margin-top: 1rem; text-align: center; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.btn:hover { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; }

/* Outline variant. Public pages use solid black throughout; this survives only
   in the review queue, where Approve and Decline must not look identical. */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--gold); }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}
.center .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(4rem, 10vw, 7.5rem) var(--step);
  text-align: center;
}
.hero__mark { width: clamp(4.5rem, 11vw, 6.5rem); margin: 0 auto 2.5rem; }
.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero .lede { max-width: 42ch; margin: 1.6rem auto 0; }

/* --------------------------------------------------------------------------
   Scripture
   -------------------------------------------------------------------------- */
.scripture {
  text-align: center;
  padding-block: var(--step);
}

.scripture blockquote {
  margin: 0 auto;
  max-width: 34ch;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Floor lowered from 1.7rem so the longest line, "if it is not accompanied
     by action," still fits one line on a 375px phone. Above that the deliberate
     line breaks would re-wrap and the cadence would be lost. */
  font-size: clamp(1.35rem, 4.2vw, 2.6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.32;
  color: var(--ink);
}

/* Verses that set their own line breaks. Quotes without spans wrap normally. */
.scripture blockquote span {
  display: block;
  text-wrap: nowrap;
}

.scripture cite {
  display: block;
  margin-top: 1.8rem;
  font-family: "Jost", sans-serif;
  font-size: 0.92rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* --------------------------------------------------------------------------
   Columns
   -------------------------------------------------------------------------- */
.cols {
  display: grid;
  gap: 3rem 3.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.col h3 { margin-bottom: 0.7rem; }
.col p { color: var(--ink-60); font-size: 1.15rem; }

/* Numbered steps. */
.steps { counter-reset: step; }
.steps .col::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.split {
  display: grid;
  gap: 3rem 4.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: start;
}
@media (max-width: 46rem) {
  .split { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Activities
   -------------------------------------------------------------------------- */
/* The board appears both full width and inside a narrow homepage column, so it
   sizes against its container rather than the viewport. A viewport breakpoint
   would leave the homepage column stuck in the three-column layout. */
#activities { container-type: inline-size; }

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Rows alternate against the band they sit on, so every boundary is a change
   of tone. That replaces the hairline rules rather than adding to them: with
   both, the list reads as ruled paper instead of distinct entries. */
/* No stripe, no rule. Separation is whitespace and the weight of the date
   column, which is the whole point of an all-white treatment. */
.activity {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 0 2.5rem;
  align-items: baseline;
  padding: 2.6rem 0;
}


/* Date over time in the wide layout, side by side when the row stacks. Two
   real elements rather than a <br>, so the layout can change without the
   text running together. */
.activity__when {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
  white-space: nowrap;
}

.activity__title { font-size: 1.6rem; font-weight: 400; color: var(--ink); margin: 0; }
.activity__meta { font-size: 1.15rem; color: var(--ink-60); margin: 0.4rem 0 0; }
.activity__summary { font-size: 1.15rem; color: var(--ink-60); margin: 0.8rem 0 0; max-width: 46ch; }

.activity__go {
  font-size: 1.02rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 46rem) {
  .activity__go { margin-top: 0.9rem; }
}

.tag {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
  border: 1px solid var(--rule);
  padding: 0.25rem 0.6rem;
  margin-left: 0.6rem;
  vertical-align: 0.15em;
  /* Wraps as a whole unit to the next line instead of splitting a two-word
     category across lines and stretching the row. */
  white-space: nowrap;
}

/* Narrow-container overrides. These MUST come after the base .activity__* and
   .tag rules above, otherwise equal specificity means the base rules win. */
@container (max-width: 38rem) {
  .activity { grid-template-columns: 1fr; gap: 0.4rem; }
  .activity__when { flex-direction: row; gap: 0.55rem; }
  .activity__go { margin-top: 0.9rem; justify-self: start; }

  /* A nowrap tag is wider than a phone. Drop it onto its own line rather than
     letting "FOOD OR CLOTHING DRIVE" push the whole page sideways. */
  .activity__title .tag {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0.6rem 0 0;
    white-space: normal;
  }
}

/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
  @media (max-width: 46rem) {
    .activity { grid-template-columns: 1fr; gap: 0.4rem; }
    .activity__when { flex-direction: row; gap: 0.55rem; }
    .activity__go { margin-top: 0.9rem; }
    .activity__title .tag { display: block; width: fit-content; margin: 0.6rem 0 0; white-space: normal; }
  }
}

/* Empty and loading states. These carry real weight on a new site, so they get
   the same care as a populated list rather than a grey "nothing here" bar. */
.state {
  text-align: center;
  padding: 4.5rem 1.5rem;
  border: 1px solid var(--rule);
}
.state h3 { margin-bottom: 0.8rem; }
.state p { color: var(--ink-60); max-width: 40ch; margin-inline: auto; }
.state .btn-row { justify-content: center; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: flex-end;
  margin-bottom: 2.5rem;
}
.filters .field { margin: 0; min-width: 11rem; flex: 1 1 11rem; }
.filters > p { margin: 0 0 0 auto; }

@media (max-width: 34rem) {
  /* Stacked, full width, with the count on its own line rather than wedged
     against a select. */
  .filters { display: grid; grid-template-columns: 1fr; }
  .filters > p { margin: 0; }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form { max-width: 40rem; }

.fieldset {
  border: 0;
  padding: 0.6rem 0 0;
  margin: 0 0 3.2rem;
}
.fieldset legend {
  padding: 0 1rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.field { margin-bottom: 1.6rem; }

.field label {
  display: block;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.field .hint { display: block; font-size: 1.02rem; color: var(--ink-40); margin-top: 0.35rem; }
.req { color: var(--gold-ink); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-40); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 147, 55, 0.16);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: #a8322b; }

.field .error {
  display: none;
  font-size: 1.02rem;
  color: #a8322b;
  margin-top: 0.4rem;
}
.field[data-invalid="true"] .error { display: block; }

.pair {
  display: grid;
  gap: 0 1.2rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 34rem) {
  .pair { grid-template-columns: 1fr; }
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}
.check input { width: 1.05rem; height: 1.05rem; margin-top: 0.25rem; accent-color: var(--gold-ink); }
.check label { font-size: 1.15rem; color: var(--ink-60); margin: 0; }

/* Bot trap. Never shown, never announced. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 2px solid var(--gold);
  font-size: 1.15rem;
  color: var(--ink-80);
  margin-bottom: 2.5rem;
}

/* Lead sentence on its own line, so the promise reads as a heading and the
   detail underneath does not have to compete with it mid-line. */
.notice strong {
  display: block;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.form-status { margin-top: 1.5rem; font-size: 1.15rem; }
.form-status[data-tone="error"] { color: #a8322b; }
.form-status[data-tone="ok"] { color: var(--gold-ink); }

/* --------------------------------------------------------------------------
   Logo explainer
   -------------------------------------------------------------------------- */
.anatomy {
  display: grid;
  gap: 3rem 4rem;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
}
@media (max-width: 46rem) {
  .anatomy { grid-template-columns: 1fr; }
}

/* Explicitly white rather than inheriting, so the mark stays on white even if
   this block ever moves into a wash band. The logo is drawn for white. */
.anatomy__art {
  background: var(--paper);
  padding: clamp(2rem, 6vw, 4rem);
  display: grid;
  place-items: center;
}
.anatomy__art img { width: min(100%, 16rem); }

.legend { list-style: none; margin: 0; padding: 0; }
.legend li {
  padding: 1.4rem 0;
}
.legend li:first-child { padding-top: 0; }
.legend strong { display: block; color: var(--ink); font-weight: 500; margin-bottom: 0.3rem; }
.legend p { color: var(--ink-60); font-size: 1.15rem; margin: 0; }


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block: 4rem 3rem;
  font-size: 1.15rem;
  color: var(--ink-60);
}

.footer__top {
  display: grid;
  gap: 2.5rem 3rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  margin-bottom: 3.5rem;
}
@media (max-width: 46rem) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

.footer__brand img { width: 3.4rem; margin-bottom: 1.2rem; }
.footer__brand p { max-width: 30ch; font-size: 1.15rem; }

.footer h4 {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.6rem; }
.footer a { color: var(--ink-60); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }

.footer__base {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  padding-top: 1rem;
  font-size: 1.02rem;
  color: var(--ink-40);
}
.footer__base p { margin: 0; max-width: 68ch; }


/* --------------------------------------------------------------------------
   Butterfly Effect Digital credit
   Lifted from the Heritage build, restyled for a light ground. The signature
   is 10.5px, so it needs the 4.5:1 small-text bar: the agency purple #9B50F5
   sits at 4.32:1 on white, nudged to #964EEE (4.54:1) to clear it.
   -------------------------------------------------------------------------- */
.bfly-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.bfly-fly {
  display: block;
  height: 22px;
  width: auto;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.bfly-lockup:hover .bfly-fly { transform: translateY(-1px) scale(1.06); }

/* Visually hidden, but read out as the real name. */
.bfly-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bfly-sig {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-40);
  transition: color 0.25s var(--ease);
}
.bfly-lockup:hover .bfly-sig { color: var(--ink-80); }

.bfly-sig .e { color: #964eee; }

/* The "t" in digital, drawn as a cross. */
.bfly-sig .cross {
  display: inline-block;
  width: 0.687em;
  height: 0.7em;
  vertical-align: baseline;
}
.bfly-sig .cross svg { display: block; width: 100%; height: 100%; }

.bfly-sig .tm {
  font-size: 0.75em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.12em;
  opacity: 0.7;
}
.bfly-sig .sep { margin: 0 0.7em; opacity: 0.45; }

/* Statement of belief list on the About page. */
.creed { list-style: none; margin: 1.6rem 0; padding: 0; }
.creed li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.7rem;
  color: var(--ink-60);
  font-size: 1.15rem;
}
.creed li:last-child { border-bottom: 0; }
.creed li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4em;
  width: 0.7rem;
  height: 1px;
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   Triangle map
   Schematic, not a tile map: no external hosts, and listings are located by
   town rather than street address, so town-level is the honest precision.
   -------------------------------------------------------------------------- */
.board-map { margin-bottom: 3rem; }
.board-map svg { display: block; width: 100%; height: auto; max-height: 30rem; }

.map-dot {
  fill: var(--gold);
  transition: fill 0.2s var(--ease), r 0.2s var(--ease);
}
.map-town[data-active="false"] .map-dot { fill: none; stroke: var(--rule); stroke-width: 1.5; }

.map-label {
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 0.06em;
  fill: var(--ink-60);
}
.map-town[data-active="false"] .map-label { fill: var(--ink-40); font-size: 12.5px; }

.map-town[data-active="true"] { cursor: pointer; }
.map-town[data-active="true"]:hover .map-dot,
.map-town[data-active="true"]:focus-visible .map-dot { fill: var(--gold-ink); }
.map-town[data-active="true"]:hover .map-label,
.map-town[data-active="true"]:focus-visible .map-label { fill: var(--ink); }
.map-town[data-selected="true"] .map-dot { fill: var(--ink); }
.map-town[data-selected="true"] .map-label { fill: var(--ink); }

.map-town:focus { outline: none; }
.map-town:focus-visible .map-dot { stroke: var(--ink); stroke-width: 2; }

.map-note {
  margin: 0.6rem 0 0;
  font-size: 1.02rem;
  color: var(--ink-40);
}

.activity__dist {
  color: var(--gold-ink);
  white-space: nowrap;
}

@media (max-width: 46rem) {
  /* Labels get illegible on a phone at this density, so the map becomes a
     quiet overview and the selects stay the primary control. */
  .map-label { font-size: 19px; }
  .map-town[data-active="false"] .map-label { display: none; }
}

/* Ongoing listings have words in the date column instead of a date, so they
   need to wrap where a date never would. */
.activity__when[data-kind="ongoing"] .activity__date,
.activity__when[data-kind="range"] .activity__date {
  white-space: normal;
  line-height: 1.35;
}
.activity__when[data-kind="ongoing"] { color: var(--ink-60); }

/* "We filled this in from last time" strip on the submission form. */
.recall {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  margin: 0 0 1.8rem;
  padding: 0.1rem 0 0.1rem 1rem;
  border-left: 2px solid var(--gold);
  font-size: 1.15rem;
  color: var(--ink-60);
}
.recall button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.recall button:hover { color: var(--ink); }

/* A second lede paragraph, set closer than a normal paragraph gap so the two
   still read as one thought rather than two separate statements. A <br> would
   force the break mid-line on a phone, where the first sentence already wraps. */
.lede--after { margin-top: 0.9rem; }
.hero .lede--after { max-width: 42ch; margin-inline: auto; }

/* The Raleigh / Durham / Chapel Hill triangle the region is named for. Sits
   behind the towns and carries almost no weight: it is orientation, not data. */
.map-triangle {
  fill: var(--gold);
  fill-opacity: 0.05;
  stroke: var(--gold);
  stroke-opacity: 0.45;
  stroke-width: 1.25;
  stroke-linejoin: round;
}

/* The tagline from the logo lockup. Set the way the artwork sets it: lowercase,
   letterspaced, gold. --gold-ink rather than the brand gold because this is
   type, and #CCA04A is 2.42:1 on white. */
.footer__brand .tagline {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  letter-spacing: 0.22em;
  color: var(--gold-ink);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   Nothing here hides anything on its own. reveal.js adds [data-reveal-pending]
   only once it has confirmed it can remove it again, so a script failure means
   a fully visible page rather than a blank one.
   -------------------------------------------------------------------------- */
[data-reveal-active] main > section[data-reveal-pending] {
  opacity: 0;
  transform: translateY(10px);
}
[data-reveal-active] main > section {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal-active] main > section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   Finish
   Small things that separate "clean" from "considered". None of them announce
   themselves; they are noticed only by their absence.
   -------------------------------------------------------------------------- */

/* Selection in the brand gold rather than the browser's default blue. */
::selection {
  background: rgba(204, 160, 74, 0.22);
  color: var(--ink);
}

/* Display type tightens as it grows, the way metal type was cut. Without this,
   large headings look loose and small ones look cramped at the same tracking. */
h1 { letter-spacing: -0.022em; }
h2 { letter-spacing: -0.018em; }
h3 { letter-spacing: -0.008em; }

/* Links: the underline sits further off the baseline and thins out, so it
   reads as a considered rule rather than a browser default. */
a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}
.prose a, .legend a, p a { text-decoration-color: rgba(135, 106, 49, 0.4); }
.prose a:hover, .legend a:hover, p a:hover { text-decoration-color: var(--ink); }

/* Buttons settle rather than snap. */
.btn { transition: background 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease); }
.btn:active { transform: translateY(1px); }

/* The eyebrow is the smallest thing on the page and carries the most tracking,
   which is what makes it read as a label instead of just small text. */
.eyebrow { letter-spacing: 0.24em; }

/* Optical alignment: a centred block of text with a lede under it reads better
   when the lede is narrower than the heading above it. */
.hero h1 { max-width: 17ch; }

/* Give the mark room. It is the only image most pages have. */
.hero__mark { width: clamp(5rem, 12vw, 7.25rem); margin-bottom: 3rem; }

/* Prose measure: 66 characters is the readable maximum, and the split layout
   was letting some columns run past it. */
.prose p, .legend p, .creed li { max-width: 66ch; }

/* Two-line lockup, matching the Firefly Medaka footer: the name on its own
   line, the strapline and year beneath it. The separator that joined them on
   one line is hidden rather than removed, so the markup stays identical to the
   other sites. */
.bfly-name,
.bfly-meta { display: block; }
.bfly-name { white-space: nowrap; }
.bfly-meta { margin-top: 3px; }
.bfly-sig > .sep { display: none; }