/* ==========================================================================
   Five Hearts — Loudoun County, Virginia
   Design system
   --------------------------------------------------------------------------
   Principles: pure white ground, rich black type, heritage red used sparingly.
   Editorial scale. Generous air. Hairlines instead of boxes. No icons.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour — the entire palette. Nothing else is permitted. */
  --white:      #ffffff;
  --black:      #0e0e0e;
  --ink-70:     #4a4a4a;
  --ink-50:     #767676;   /* AA on white at body sizes */
  --red:        #8b1e23;
  --red-deep:   #6f171b;
  --line:       #e3e0da;   /* warm hairline */
  --line-soft:  #efedE8;
  --veil:       rgba(14, 14, 14, 0.38);

  /* Placeholder tone shown until photography is installed. */
  --plate:      #e8e4dd;
  --plate-2:    #d8d2c8;

  /* Type */
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
           "Hoefler Text", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
           "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid editorial scale */
  --fs-hero:  clamp(3.25rem, 8.4vw, 6rem);      /* 52 → 96 */
  --fs-h1:    clamp(2.75rem, 6.4vw, 4.75rem);   /* 44 → 76 */
  --fs-h2:    clamp(2.35rem, 5vw, 4rem);        /* 38 → 64 */
  --fs-h3:    clamp(1.6rem, 2.6vw, 2.125rem);   /* 26 → 34 */
  --fs-lead:  clamp(1.3rem, 1.9vw, 1.75rem);    /* 21 → 28 */
  --fs-body:  clamp(1.125rem, 1.1vw, 1.3125rem);/* 18 → 21 */
  --fs-small: 0.9375rem;
  --fs-label: 0.6875rem;

  /* Rhythm */
  --gutter:   clamp(1.5rem, 6vw, 7.5rem);
  --measure:  62ch;
  --sect:     clamp(6rem, 14vh, 12.5rem);
  --sect-sm:  clamp(4rem, 9vh, 8rem);
  --max:      1560px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::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.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

/* Cormorant defaults to old-style figures, which turn "988" and "$10" into
   something closer to "9ß8" and "$Io". Numbers on this site are dates,
   amounts and crisis lines — they must be read correctly the first time. */
h1, h2, h3, h4,
.serif-lead, .pullquote, .statement, .row__num, .row__name,
.event__day, .cal__month, .urgent__num, .amount, .entry__name,
.wordmark, .overlay__link {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

p { margin: 0 0 1.35em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

::selection { background: var(--red); color: var(--white); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section     { padding-block: var(--sect); }
.section--sm { padding-block: var(--sect-sm); }
.section--tight-top { padding-top: var(--sect-sm); }

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

.measure { max-width: var(--measure); }
.measure-narrow { max-width: 46ch; }

/* Two-column editorial split: label rail + content */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}

@media (min-width: 900px) {
  .split { grid-template-columns: 4fr 8fr; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 7fr 5fr; }
}

/* --------------------------------------------------------------------------
   4. Type components
   -------------------------------------------------------------------------- */

.label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 0;
  line-height: 1.4;
}

.label--red { color: var(--red); }

.display  { font-size: var(--fs-hero); }
.title    { font-size: var(--fs-h1); }
.title-2  { font-size: var(--fs-h2); }
.title-3  { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.01em; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.002em;
}

.serif-lead {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: 1.35;
  font-weight: 300;
}

.muted { color: var(--ink-70); }
.quiet { color: var(--ink-50); }

.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.012em;
  max-width: 22ch;
}

/* Editorial link — hairline underline that draws itself */
.link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.5s var(--ease);
}
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.35em 2.6em;
  border: 1px solid var(--black);
  background: var(--black);
  color: var(--white);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.45s var(--ease),
              color 0.45s var(--ease),
              border-color 0.45s var(--ease);
}

.btn:hover { background: var(--red); border-color: var(--red); }

.btn--ghost {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn--ghost:hover { background: var(--black); color: var(--white); }

.btn--light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.75);
}
.btn--light:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.btn--solid-light {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.btn--solid-light:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

.btn--wide { width: 100%; }
.btn--lg   { padding: 1.6em 3.2em; }

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

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   6. Photography plates
   -------------------------------------------------------------------------- */

/* Photographs are art direction, not content, so they are painted as
   backgrounds. A warm plate shows through before images are installed,
   so the layout never breaks. */
.plate {
  position: relative;
  background-color: var(--plate);
  background-image: linear-gradient(150deg, var(--plate) 0%, var(--plate-2) 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.plate--tall  { aspect-ratio: 3 / 4; }
.plate--book  { aspect-ratio: 4 / 5; }
.plate--wide  { aspect-ratio: 16 / 9; }
.plate--pano  { aspect-ratio: 21 / 9; }

@media (max-width: 700px) {
  .plate--pano { aspect-ratio: 4 / 3; }
}

.caption {
  margin-top: 1rem;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  padding: 1rem 1.5rem;
  font-size: var(--fs-small);
}
.skip:focus { left: 0; }

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: clamp(1.1rem, 2vw, 1.9rem);
  transition: background-color 0.5s var(--ease),
              border-color 0.5s var(--ease),
              padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.nav { display: none; }

@media (min-width: 1080px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 2.2vw, 2.6rem);
  }
}

.nav__link {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-block: 0.4em;
  white-space: nowrap;
  transition: color 0.35s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--red); }

.nav__link--accent { color: var(--red); }

/* Transparent over hero; solid once scrolled or on interior pages */
.header--over { color: var(--white); }
.header--over .label { color: rgba(255, 255, 255, 0.7); }

/* Heritage red has too little contrast against a photograph. Over the hero
   the accent link goes white with the rest and takes the red back once the
   bar turns solid. */
.header--over .nav__link--accent { color: var(--white); }
.header--over .nav__link,
.header--over .wordmark {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.header--solid {
  background: var(--white);
  color: var(--black);
  border-bottom-color: var(--line);
  padding-block: clamp(0.9rem, 1.4vw, 1.25rem);
}
.header--solid .nav__link--accent { color: var(--red); }

/* Menu toggle — two hairlines, no icon set */
.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

@media (min-width: 1080px) { .menu-toggle { display: none; } }

.menu-toggle span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
}

.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Full-screen overlay menu */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}

.overlay[data-open="true"] { opacity: 1; visibility: visible; }

.overlay__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vh, 1rem);
}

.overlay__link {
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 300;
  line-height: 1.1;
  text-decoration: none;
  transition: color 0.35s var(--ease);
}
.overlay__link:hover,
.overlay__link[aria-current="page"] { color: var(--red); }

.overlay__foot {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

body[data-locked="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
}

.hero__stage { position: absolute; inset: 0; background: var(--plate-2); }

.hero__frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 2s var(--ease), transform 9s linear;
}

.hero__frame[data-active="true"] {
  opacity: 1;
  transform: scale(1);
}

/* Two gradients, not one. The supplied photography includes bright midday
   skies, and a single bottom-up wash left the navigation sitting on white
   cloud. The first gradient protects the header, the second the headline. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(8, 8, 8, 0.58) 0%,
      rgba(8, 8, 8, 0.22) 14%,
      rgba(8, 8, 8, 0) 30%),
    linear-gradient(to top,
      rgba(8, 8, 8, 0.82) 0%,
      rgba(8, 8, 8, 0.62) 26%,
      rgba(8, 8, 8, 0.28) 55%,
      rgba(8, 8, 8, 0.08) 100%);
}

.hero__body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(3.5rem, 9vh, 8rem);
}

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.25rem, 2.4vw, 2rem);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.hero__sub {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.4;
  max-width: 30ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  color: rgba(255, 255, 255, 0.92);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__dots { display: flex; gap: 0.75rem; margin-left: auto; }

.hero__dot {
  width: 28px;
  height: 1px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}
.hero__dot[aria-selected="true"] { background: var(--white); }

/* Interior page header */
.pagehead {
  padding-top: clamp(9rem, 18vh, 15rem);
  padding-bottom: var(--sect-sm);
}

.pagehead__title { margin-top: 1.75rem; }
.pagehead__lead  { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

/* --------------------------------------------------------------------------
   9. Reveal on scroll
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal[data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. Editorial lists (the five hearts, numbered rows)
   -------------------------------------------------------------------------- */

.rows { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: baseline;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .row { grid-template-columns: 5rem 5fr 6fr; }
}

.row__num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  color: var(--red);
  line-height: 1;
}

.row__name {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.row__note {
  color: var(--ink-70);
  font-size: 1.0625rem;
  line-height: 1.6;
  grid-column: 2 / -1;
}

@media (min-width: 900px) {
  .row__note { grid-column: auto; max-width: 44ch; }
}

/* Statement block — one sentence, alone, with air */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4.2vw, 3.5rem);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 24ch;
}

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }

.field-grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
  .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.field { display: flex; flex-direction: column; gap: 0.65rem; }
.field--full { grid-column: 1 / -1; }

.field > label {
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.field .req { color: var(--red); }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.65rem 0 0.85rem;
  font-size: 1.0625rem;
  font-weight: 300;
  transition: border-color 0.4s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.field textarea { resize: vertical; min-height: 6rem; line-height: 1.6; }

/* Spinner arrows sit badly against a hairline underline. */
.field input[type="number"] { -moz-appearance: textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field input[type="search"]::-webkit-search-decoration,
.field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%),
                    linear-gradient(135deg, var(--black) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--red);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 6px;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--red); }

.field__error {
  font-size: 0.8125rem;
  color: var(--red);
  letter-spacing: 0.02em;
  min-height: 1.2em;
}

/* Checkbox set — hairline chips, no rounded pills */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip { position: relative; }

.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: block;
  padding: 0.75em 1.35em;
  border: 1px solid var(--line);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-70);
  transition: all 0.35s var(--ease);
  user-select: none;
}

.chip input:checked + span {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.form__note {
  font-size: var(--fs-small);
  color: var(--ink-50);
  max-width: 52ch;
}

.form__status {
  font-size: var(--fs-small);
  line-height: 1.55;
  padding: 1.15rem 1.35rem;
  border-left: 2px solid var(--red);
  background: #fbfaf9;
  max-width: 58ch;
}

.form__status[hidden] { display: none; }
.form__status--ok { border-left-color: var(--black); }

/* --------------------------------------------------------------------------
   12. Resource directory
   -------------------------------------------------------------------------- */

/* Sits directly beneath the fixed header rather than sliding under it. */
.finder {
  position: sticky;
  top: 3.8rem;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding-block: 1.5rem;
}

.finder__row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

@media (min-width: 800px) {
  .finder__row { grid-template-columns: 2fr 1fr 1fr auto; gap: 2.5rem; }
  .finder { top: 4.1rem; }
}

.finder__search input { font-size: 1.25rem; }

.finder__count {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  white-space: nowrap;
  padding-bottom: 0.85rem;
}

.reset {
  background: none;
  border: 0;
  padding: 0 0 0.85rem;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  cursor: pointer;
  text-align: left;
}

.directory { border-top: 1px solid var(--line); }

.entry { border-bottom: 1px solid var(--line); }

.entry__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: start;
  width: 100%;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: opacity 0.35s var(--ease);
}

.entry__head:hover { opacity: 0.55; }

.entry__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.65rem;
}

.entry__cats {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  line-height: 1.6;
}

.entry__cats em { font-style: normal; color: var(--red); }

.entry__mark {
  width: 14px;
  height: 14px;
  position: relative;
  margin-top: 0.75rem;
  flex: none;
}
.entry__mark::before,
.entry__mark::after {
  content: "";
  position: absolute;
  background: var(--black);
  transition: transform 0.45s var(--ease);
}
.entry__mark::before { top: 50%; left: 0; width: 100%; height: 1px; }
.entry__mark::after  { left: 50%; top: 0; height: 100%; width: 1px; }
.entry__head[aria-expanded="true"] .entry__mark::after { transform: scaleY(0); }

.entry__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease);
}
.entry__panel[data-open="true"] { grid-template-rows: 1fr; }
.entry__panel > div { overflow: hidden; }

.entry__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .entry__inner { grid-template-columns: 7fr 5fr; }
}

.entry__desc { max-width: 56ch; color: var(--ink-70); }

.facts { display: grid; gap: 1.5rem; }

.fact { display: grid; gap: 0.35rem; }

.fact__key {
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.fact__val { font-size: 1.0625rem; line-height: 1.55; }
.fact__val a { text-decoration: none; border-bottom: 1px solid var(--line); }
.fact__val a:hover { border-bottom-color: var(--red); color: var(--red); }

.urgent {
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: 1.25rem;
}

.urgent__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.urgent__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.urgent__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.urgent__num {
  font-family: var(--serif);
  font-size: 1.35rem;
  white-space: nowrap;
}
.urgent__num a { text-decoration: none; }
.urgent__num a:hover { color: var(--red); }

.empty {
  padding: clamp(4rem, 10vh, 8rem) 0;
  text-align: center;
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   13. Events
   -------------------------------------------------------------------------- */

.event {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

@media (min-width: 900px) {
  .event { grid-template-columns: 8rem 6fr 4fr auto; align-items: center; }
}

.event__date { display: grid; gap: 0.15rem; }

.event__day {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 3.25rem);
  line-height: 0.95;
}

.event__mon {
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.event__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  font-weight: 300;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.event__desc { font-size: 1.0625rem; color: var(--ink-70); max-width: 44ch; margin: 0; }

.event__where { font-size: 1.0625rem; color: var(--ink-70); }
.event__where span { display: block; }
.event__time { color: var(--black); }

.event__full {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* Calendar */
.cal { display: grid; gap: 1.5rem; }

.cal__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.cal__month { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.125rem); font-weight: 300; }

.cal__nav { display: flex; gap: 0.5rem; }

.cal__btn {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.35s var(--ease);
}
.cal__btn:hover { border-color: var(--black); background: var(--black); color: var(--white); }
.cal__btn[disabled] { opacity: 0.25; pointer-events: none; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.cal__dow {
  background: var(--white);
  padding: 0.9rem 0.5rem;
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.cal__cell {
  background: var(--white);
  min-height: clamp(4.5rem, 8vw, 7rem);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9375rem;
}

.cal__cell--void { background: #fcfbfa; }
.cal__cell--today .cal__num { color: var(--red); }

.cal__num { color: var(--ink-50); font-variant-numeric: tabular-nums; }

.cal__pip {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid var(--red);
  padding: 0.15rem 0 0.15rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.cal__pip:hover { color: var(--red); }

@media (max-width: 700px) {
  .cal__cell { min-height: 3.5rem; padding: 0.4rem; }
  .cal__pip { font-size: 0; border-left-width: 3px; padding: 0.35rem 0; }
  .cal__pip::before { content: ""; }
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.modal[data-open="true"] { opacity: 1; visibility: visible; }

.modal__veil { position: absolute; inset: 0; background: var(--veil); border: 0; padding: 0; cursor: pointer; }

.modal__card {
  position: relative;
  background: var(--white);
  width: min(38rem, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: clamp(2rem, 5vw, 3.5rem);
}

.modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ink-50);
  transition: color 0.3s var(--ease);
}
.modal__close:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   14. Third-party embeds — Donorbox giving, SavvyCal booking
   --------------------------------------------------------------------------
   Both render inside their own frame, so this stylesheet cannot reach their
   interiors. Set the accent to #8B1E23 and pick the lightest available style
   in each provider's own settings. All this does is reserve the space and
   frame it quietly, so the page does not jump while they load.
   -------------------------------------------------------------------------- */

.embed {
  width: 100%;
  min-height: 34rem;
  max-width: 40rem;
}

/* SavvyCal lays out two panes side by side and clips itself below roughly
   60rem, so the booking embed is given the full content width rather than
   a column. */
.embed--tall {
  min-height: 46rem;
  max-width: none;
  margin-top: clamp(3rem, 6vw, 5rem);
}

@media (max-width: 700px) {
  .embed { min-height: 30rem; }
  .embed--tall { min-height: 40rem; }
}

.embed iframe { width: 100%; border: 0; display: block; }

.embed__fallback {
  font-size: var(--fs-small);
  color: var(--ink-50);
  padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   15. Newsletter & footer
   -------------------------------------------------------------------------- */

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

.footer__plate {
  min-height: clamp(20rem, 42vh, 34rem);
  display: flex;
  align-items: flex-end;
  color: var(--white);
  position: relative;
}

.footer__plate .hero__scrim { position: absolute; inset: 0; }

.footer__plate-body {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(2.5rem, 6vh, 4.5rem);
}

.footer__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(3.5rem, 7vh, 6rem);
}

@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 5fr 3fr 3fr 3fr; }
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.footer__list a {
  text-decoration: none;
  font-size: 1.0625rem;
  color: var(--ink-70);
  transition: color 0.35s var(--ease);
}
.footer__list a:hover { color: var(--red); }

.footer__bar {
  border-top: 1px solid var(--line);
  padding-block: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.footer__bar a { text-decoration: none; }
.footer__bar a:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   16. Utilities
   -------------------------------------------------------------------------- */

.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;
}

.stack-sm > * + * { margin-top: 1rem; }
.stack   > * + * { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.stack-lg > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }

.mt-label { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }

@media print {
  .header, .overlay, .footer__plate, .btn { display: none !important; }
  body { font-size: 12pt; }
}