/* Yardley–Lower Makefield Community Eruv — tokens, base, chrome.
   Every value here is taken verbatim from the design handoff. Use the token,
   not the hex. */

:root {
  /* Ground */
  --forest:        #0e2418;  /* page background, dark sections */
  --ink:           #14241a;  /* text and buttons on parchment */
  --map-well:      #162f1f;  /* map container before tiles load */
  --parchment:     #f2ecdb;  /* alternating light section */

  /* Type */
  --cream:         #f2ead3;  /* primary text on forest */
  --body-parch:    #43432f;  /* secondary body text on parchment */
  --muted-parch:   #6b6a52;  /* the "/ mo" unit label */

  /* Accent */
  --gold:          #c9a25c;
  --gold-hover:    #dfc084;
  --gold-dark:     #8a6a2e;  /* eyebrow on parchment — the contrast-safe gold */

  /* Status */
  --terracotta:       #c96a4a;  /* "down." in the headline */
  --terracotta-light: #dfa48c;  /* down-status body copy */
  --green-line:       #1d5c3a;  /* map polygon */
  --green-confirm:    #2c5237;  /* alert-subscribed confirmation */

  /* Alphas, used verbatim in the design */
  --rule:          rgba(201, 162, 92, 0.35);  /* gold hairline on dark */
  --row-hover:     rgba(201, 162, 92, 0.14);  /* ledger row wash */
  --cream-92:      rgba(242, 234, 211, 0.92); /* body copy on forest */
  --cream-90:      rgba(242, 234, 211, 0.9);  /* status sub-line */
  --cream-80:      rgba(242, 234, 211, 0.8);  /* nav links, footer credit */
  --cream-70:      rgba(242, 234, 211, 0.7);  /* footer text, map caption */
  --cream-60:      rgba(242, 234, 211, 0.6);  /* "Last verified" label */
  --rule-parch:    rgba(20, 36, 26, 0.3);     /* ledger rules on parchment */
  --rule-parch-25: rgba(20, 36, 26, 0.25);    /* sticky-column bottom rule */
  --placeholder:   rgba(20, 36, 26, 0.45);    /* input placeholder */

  /* Type families. Orpheus Pro carries the headlines, Forma DJR the body —
     the pairing is the identity; see CLAUDE.md before substituting. */
  --serif: 'orpheuspro', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:  'forma-djr-display', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --shell: 1240px;   /* content column */
  --gutter: 40px;
}

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

html, body { margin: 0; padding: 0; background: var(--forest); }

body {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

/* No border radius anywhere except the arch motif and pill tops, and no box
   shadows at all — separation is 1px hairline rules only. Don't add either. */

img { max-width: 100%; }

a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gold);
}
a:hover { color: var(--gold-hover); text-decoration-color: var(--gold-hover); }

/* Chrome, buttons and ledger rows opt out of the underline explicitly. Body
   copy keeps it: the client will add links to prose later, and an undefined
   link renders browser-default blue. */
.no-underline, .no-underline:hover { text-decoration: none; }

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

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: static; width: auto; height: auto;
  margin: 0; padding: 12px var(--gutter); clip: auto;
  background: var(--gold); color: var(--forest);
}

/* ---------------------------------------------------------------- type ---- */

.eyebrow {
  display: block;
  margin: 0 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.on-parchment .eyebrow { color: var(--gold-dark); }

h1, h2 { font-family: var(--serif); font-weight: 700; }

h2 {
  margin: 0 0 16px;
  font-size: 44px;
  line-height: 1.06;
  text-wrap: balance;
}

/* Body copy sits at 17.5px/500 with 0.045em tracking and 1.8 leading. This was
   tuned for readability on a phone in daylight — do not tighten it. */
.prose {
  margin: 0;
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1.8;
  color: var(--cream-92);
  text-wrap: pretty;
}
.prose + .prose { margin-top: 22px; }
.on-parchment .prose { color: var(--ink); }

.prose strong { font-weight: 700; color: var(--cream); }
.on-parchment .prose strong { color: var(--ink); }

/* Slightly tighter leading where the block is an intro rather than an argument. */
.prose-lead { line-height: 1.75; color: var(--body-parch); }

.link-caps {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.on-parchment .link-caps { color: var(--ink); text-decoration-color: var(--gold-dark); }

/* ------------------------------------------------------------- sections ---- */

.section { padding-top: 96px; padding-bottom: 96px; }

.on-parchment {
  background: var(--parchment);
  color: var(--ink);
}
.on-parchment .prose-lead { color: var(--body-parch); }

/* Eyebrow + h2 in the narrow left column, prose in the wider right. */
.split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 72px;
  align-items: start;
}

/* ---------------------------------------------------------------- arch ----
   The site's one piece of iconography. An eruv is a boundary made of doorways,
   so a doorway outline recurs at several scales. Always an outline, never
   filled, and always open at the bottom. */

.arch {
  display: inline-block;
  border: 1.5px solid var(--gold);
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}
.arch-sm     { width: 26px; height: 34px; border-radius: 13px 13px 0 0; }  /* wordmark */
.arch-notch  { width: 24px; height: 30px; border-radius: 12px 12px 0 0; }  /* frame notch */
.arch-marker { width: 92px; height: 128px; border-radius: 46px 46px 0 0; margin-top: 8px; }

/* Photo frame: a 1px gold arch with 12px padding, the image inset inside its
   own arch-clipped box. Photos appear either in one of these or as a faded
   background wash — never as a plain rectangular block. */
.arch-frame {
  border: 1px solid var(--gold);
  border-radius: 999px 999px 0 0;
  padding: 12px;
}
.arch-frame > .arch-frame-inner {
  width: 100%;
  height: 100%;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
}
.arch-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------- buttons ---- */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }

/* Gold outline inverts to a gold fill with dark text. */
.btn-outline {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
  padding: 12px 26px;
  font-size: 13px;
  letter-spacing: 0.2em;
}
.btn-outline:hover { background: var(--gold); color: var(--forest); }

/* Solid dark turns gold, keeping dark text. */
.btn-solid {
  background: var(--ink);
  color: var(--parchment);
  padding: 16px 44px;
  font-size: 12.5px;
  letter-spacing: 0.24em;
}
.btn-solid:hover { background: var(--gold); color: var(--ink); }

.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }

/* -------------------------------------------------------------- header ---- */

.site-header { border-bottom: 1px solid var(--rule); }

.site-header .shell {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }
.wordmark-text {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--cream);
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}
.site-nav a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-80);
}
.site-nav a:hover { color: var(--gold-hover); text-decoration: none; }
.site-nav a[aria-current='page'] { color: var(--gold); }

.header-donate {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.header-donate:hover { background: var(--gold); color: var(--forest); text-decoration: none; }

/* The four nav items are short enough to wrap to a second line, so there is no
   hamburger and no menu JS on this site. */
.menu-toggle { display: none; }

/* -------------------------------------------------------------- footer ---- */

.site-footer { border-top: 1px solid var(--rule); }

.site-footer .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
  flex-wrap: wrap;
  padding-top: 26px;
  padding-bottom: 26px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cream-70);
}
.site-footer em { font-style: italic; }
.site-footer a { color: var(--cream-80); }

.narrow { max-width: 760px; }