/* ===========================================================================
   The Heart of 66 -- "vintage road poster"

   The ad is a printed keepsake: deep oxblood on a blush ground, a vignette
   at the edges, and the ribbon heart as the mark. This site tells a story,
   so the body copy is a serif and the measure is generous. Quieter and older
   than Love Tucumcari, which shares the same red family.

   Oxblood #8c0000   the headline red
   Blush   #f0dcd6   the paper
   Brick   #c1705b   rules and accents
   =========================================================================== */

:root {
  --font: "Lora", Georgia, "Times New Roman", serif;
  --font-head: "Bevan", Georgia, serif;

  --ink: #2b1614;
  --ink-soft: #6b4b45;
  --line: #e0c8c0;
  --bg: #f6ebe7;
  --bg-soft: #eeddd7;

  --radius: 3px;
  --head-weight: 400;          /* Bevan is a single-weight display face */
  --head-spacing: .01em;

  --hero-ink: var(--ink);
  --footer-bg: #2b1614;
  --logo-height: 52px;
}

body { font-size: 17px; }

h1, h2, h3, h4 { color: var(--brand); }

/* ---- Header ------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.brand-name {
  font-family: var(--font-head); color: var(--brand);
  text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem;
}
.site-nav a { text-transform: uppercase; letter-spacing: .1em; font-size: .76rem; font-weight: 600; }

/* ---- Hero: blush paper with a vignette and the ribbon heart -------------- */
.hero {
  --hero-bg: radial-gradient(ellipse at 50% 34%, #faf1ee 0%, #f0dcd6 45%, #dcc0b8 100%);
  padding: 76px 20px 84px;
  border-bottom: 10px solid #1a0e0d;
}
/* Printed-edge vignette, as on the ad. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 120px 40px rgba(43, 22, 20, .22);
  pointer-events: none;
}
.hero h1 {
  text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  line-height: .95;
  margin-bottom: .25em;
}
/* The thin rules that flank "THE ——— OF ———" in the ad. */
.hero .lede {
  display: flex; align-items: center; gap: 16px;
  text-transform: uppercase; letter-spacing: .18em;
  font-size: .82rem; font-weight: 600; font-family: var(--font);
  color: var(--ink-soft);
  max-width: 40ch;
}
.hero .lede::before, .hero .lede::after {
  content: ""; flex: 1; height: 1px; background: var(--brand); opacity: .45;
}
.hero .cta-row { margin-top: 34px; }

/* The ribbon heart, sitting low and pale behind the hero copy. */
.hero::after {
  content: "";
  position: absolute; right: 4%; bottom: -14%;
  width: min(380px, 42vw); aspect-ratio: 900 / 748;
  background: url("/assets/img/heart.png") center / contain no-repeat;
  opacity: .16;
  pointer-events: none;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  text-transform: uppercase; letter-spacing: .11em;
  font-size: .8rem; font-weight: 600; padding: 14px 30px;
}
.btn-ghost { color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- Cards: like plates in a book --------------------------------------- */
.card {
  background: #fbf4f1;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(43,22,20,.06);
}
.card h2 {
  font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em;
  border-bottom: 1px solid var(--line); padding-bottom: .4em;
}

.section-title { border-bottom-color: var(--accent); }

.band {
  background: #1a0e0d; color: #f0dcd6; border-top: 0;
}
.band h2 { color: #fff; }
.band .btn { background: var(--brand); border-color: var(--brand); color: #fff; }
.band .btn:hover { background: #fff; border-color: #fff; color: var(--brand); }

.prose { font-size: 1.03rem; }
.prose blockquote { border-left-color: var(--accent); font-family: var(--font); }
.prose h2 { margin-top: 1.6em; }

.site-footer { color: rgba(240,220,214,.8); }
.footer-name { font-family: var(--font-head); text-transform: uppercase; color: #fff; }
.site-footer a { color: var(--accent); }

/* ---- Concept drawing + fundraising ---------------------------------------- */
.art-intro { display: grid; gap: 34px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .art-intro { grid-template-columns: 1.2fr .8fr; } }
.art-figure { margin: 0; text-align: center; }
.art-figure img {
  display: inline-block; width: min(360px, 80vw); height: auto;
  filter: drop-shadow(0 10px 24px rgba(43, 22, 20, .25));
}
.art-figure figcaption {
  font-size: .82rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .14em; margin-top: 10px;
}