/* Section layouts. Ordered as they appear: home, then about. */

/* ==================================================== STATUS HERO (home) === */

/* The photo sits under a wash heavy enough that every word stays legible.
   Never lighten this to "show off" the picture. */
.status-hero {
  background-image:
    linear-gradient(rgba(14, 36, 24, 0.82), rgba(14, 36, 24, 0.9)),
    url('../assets/images/lake-afton-sm.webp');
  background-size: cover;
  background-position: 50% 55%;
}
@media (min-width: 901px) {
  .status-hero {
    background-image:
      linear-gradient(rgba(14, 36, 24, 0.82), rgba(14, 36, 24, 0.9)),
      url('../assets/images/lake-afton.webp');
  }
}

.status-hero .shell {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 72px;
  align-items: center;
  padding-top: 84px;
  padding-bottom: 90px;
}

.status-eyebrow { margin-bottom: 26px; }

.status-headline {
  margin: 0;
  font-size: clamp(58px, 7.2vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.005em;
}
/* The status word is a word, not a coloured dot — colour is the second signal
   here, never the only one. */
.status-headline em { font-style: italic; }
.is-up   .status-headline em { color: var(--gold); }
.is-down .status-headline em { color: var(--terracotta); }
.is-unknown .status-headline em { color: var(--cream-80); }

.status-sub {
  margin: 34px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 25px;
  line-height: 1.4;
  max-width: 30ch;
  color: var(--cream-90);
}
.is-down .status-sub    { color: var(--terracotta-light); max-width: 32ch; }
.is-unknown .status-sub { color: var(--cream-80); max-width: 34ch; }

.status-verified {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 44px;
}
.status-verified dt {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-60);
}
.status-verified dd {
  margin: 5px 0 0;
  font-size: 17px;
  font-weight: 600;
}

.hero-photo { justify-self: center; }
.hero-photo .arch-frame {
  width: min(380px, 34vw);
  aspect-ratio: 380 / 520;
}
/* A deliberate tight crop onto the candles — the frame is the subject, the
   room around them is not. */
.hero-photo img {
  object-position: 80% 44%;
  transform: scale(1.85);
  transform-origin: 80% 44%;
}

/* ======================================================== ALERTS (home) === */

.alerts .shell {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px;
}

/* ========================================== WHAT IS AN ERUV (home) ======== */

.explainer .shell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 72px;
  align-items: start;
}
.explainer-body { max-width: 760px; }
.explainer h2 { margin-bottom: 24px; line-height: 1.1; }
.explainer h2 em { font-style: italic; }
.explainer-more { margin: 26px 0 0; }

/* ============================================================ MAP (home) === */

.map-section .shell { padding-bottom: 96px; }

.map-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.map-head .eyebrow { margin-bottom: 14px; }
.map-head h2 { margin: 0; }
.map-head .btn { white-space: nowrap; }

.map-well { border: 1px solid var(--gold); padding: 12px; }
#eruv-map {
  height: 500px;
  background: var(--map-well);
}
/* MapLibre's chrome — controls and attribution — ships light and rounded.
   Square it off and put it in the site's palette so the map's furniture reads
   as part of the frame rather than as a third-party widget. */
.maplibregl-map { font-family: var(--sans); }
.maplibregl-ctrl-group {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--rule-parch);
  background: var(--parchment);
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--rule-parch); }
.maplibregl-ctrl-group button { border-radius: 0; }
.maplibregl-ctrl-attrib {
  background: rgba(242, 236, 219, 0.82) !important;
  font-size: 11px;
}
.maplibregl-ctrl-attrib a { color: var(--body-parch); }

.map-caption {
  margin: 14px 0 0;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--cream-70);
}

/* ================================================== MEMBERSHIP (home) ===== */

.membership .shell {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 88px;
  align-items: start;
  padding-top: 92px;
  padding-bottom: 96px;
}

.membership-intro { position: sticky; top: 40px; }
.membership-intro h2 { font-size: 46px; margin-bottom: 20px; }
.membership-intro .prose-lead { margin-bottom: 28px; }
.membership-fine {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule-parch-25);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1.7;
  color: var(--body-parch);
}

/* A ruled ledger, not a card grid. The card layout was rejected as generic —
   don't reintroduce it. */
.tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 40px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--rule-parch);
  text-decoration: none;
  color: var(--ink);
  width: 100%;
  text-align: left;
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.tier:hover, .tier:focus-visible {
  background: var(--row-hover);
  color: var(--ink);
  text-decoration: none;
}
.tier-name, .tier-amount {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
}
.tier-amount { text-align: right; white-space: nowrap; }
.tier-unit {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted-parch);
}
.tier-blurb {
  margin: 0;
  max-width: 52ch;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.045em;
  line-height: 1.7;
  color: var(--body-parch);
}
.tier-choose {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-dark);
  text-align: right;
  white-space: nowrap;
}

.tier-custom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 40px;
  align-items: baseline;
  padding: 26px 0 0;
  border-top: 1px solid var(--rule-parch);
}

/* The $ and the digits share one underline and sit tight together. This
   alignment was iterated on with the client; check it before changing it. */
.amount-entry {
  display: flex;
  align-items: baseline;
  gap: 3px;
  justify-self: end;
  border-bottom: 1px solid var(--ink);
  padding-right: 4px;
}
.amount-entry .currency,
.amount-entry input {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink);
}
.amount-entry input {
  border: none;
  background: transparent;
  width: 4ch;
  min-width: 0;
  padding: 0 0 3px;
  text-align: left;
}

.tier-custom-detail {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 24px;
}

.membership-submit { margin-top: 40px; }

/* ================================================================ ABOUT === */

.about-hero .shell {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
  padding-top: 84px;
  padding-bottom: 72px;
}
.about-hero .eyebrow { margin-bottom: 24px; }
.about-hero h1 {
  margin: 0;
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: 1.02;
}
.about-hero h1 em { font-style: italic; color: var(--gold); }
.about-sub {
  margin: 30px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.45;
  max-width: 34ch;
  color: var(--cream-90);
}
.about-photo { justify-self: center; }
.about-photo .arch-frame {
  width: min(340px, 30vw);
  aspect-ratio: 340 / 460;
}
.about-photo img { object-position: 50% 30%; }

.split h2 { margin: 0; line-height: 1.08; }
.split .eyebrow { margin-bottom: 14px; }

/* The closing callout: a gold frame with an arch notched into its top edge. */
.callout {
  border: 1px solid var(--gold);
  padding: 64px 56px;
  text-align: center;
  position: relative;
}
/* The wrapper carries the page ground so it masks the frame line behind it. */
.callout-notch {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--forest);
  padding: 0 24px;
}
.callout .eyebrow { margin-bottom: 18px; }
.callout h2 {
  margin: 0 auto 26px;
  max-width: 18ch;
  line-height: 1.1;
}
.callout-body { max-width: 720px; margin: 0 auto; }
.pull-quote {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 21px;
  line-height: 1.7;
  color: var(--gold);
  text-wrap: pretty;
}
.callout .btn {
  margin-top: 36px;
  padding: 14px 38px;
  letter-spacing: 0.24em;
}

/* Parchment body sections run 88px rather than the 96px of the forest ones —
   the lighter ground reads as roomier at the same measure. */
.section-tight { padding-top: 88px; padding-bottom: 88px; }