/* =========================================================
   GATEWAY PATRIOTS
   Three sections. Brick + parchment + ink palette.
   The Gateway Arch as the recurring graphic identity.
   ========================================================= */

:root{
  --ink:        #14181f;
  --ink-2:      #20262f;
  --paper:      #f4ecdf;
  --paper-2:    #ece2ce;
  --paper-3:    #e2d5b9;
  --brick:      #9b3024;
  --brick-2:    #c2452f;
  --brick-deep: #7a1f17;
  --brass:      #b58836;
  --brass-2:    #d6a64a;
  --muted:      #6c6760;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior: smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 4vw, 48px);
  background: rgba(244,236,223,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(20,24,31,.12);
}
.nav__brand{
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.nav__mark{
  width: 28px; height: 32px;
  display: inline-flex;
  color: var(--brick);
  filter: drop-shadow(1.5px 1.5px 0 var(--ink));
}
.nav__mark svg{ fill: currentColor; width: 100%; height: 100%; }
.nav__name{
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  letter-spacing: .005em;
}
.nav__cta{
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  padding: 10px 18px;
  border: 1.5px solid var(--brick-deep);
  background: var(--brick);
  transition: background-color .2s ease, border-color .2s ease;
}
.nav__cta:hover{ background: var(--brick-deep); border-color: var(--brick-deep); }

/* =========================================================
   HERO — parchment + the Arch
   ========================================================= */
.hero{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 15%, rgba(181,136,54,.10), transparent 55%),
    radial-gradient(ellipse at 15% 90%, rgba(155,48,36,.10), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  padding: clamp(70px, 10vw, 130px) clamp(20px, 4vw, 48px) clamp(90px, 12vw, 170px);
}
.hero::before{
  /* faint horizontal rule texture, like ledger paper */
  content:"";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 44px,
    rgba(20,24,31,.04) 44px 45px
  );
  pointer-events: none;
}

.hero__arch{
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(820px, 95vw);
  aspect-ratio: 1 / 1;
  color: var(--brick);
  opacity: .15;
  pointer-events: none;
}
.hero__arch svg{ width:100%; height:100%; fill: currentColor; }

.hero__inner{
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.hero__kicker{
  display: inline-block;
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brick);
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--brick);
  margin-bottom: 36px;
}
.hero__title{
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 32px;
}
.hero__title em{
  font-style: italic;
  color: var(--brick);
}
.hero__sub{
  font-family: "Public Sans", sans-serif;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 44px;
}

.cta{
  display: inline-flex; align-items: center; gap: .5em;
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  background: var(--brick);
  padding: 18px 28px;
  border: 1.5px solid var(--brick-deep);
  box-shadow: 4px 4px 0 var(--ink);
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.cta:hover{
  background: var(--brick-2);
  transform: translateY(-1px);
  box-shadow: 6px 6px 0 var(--ink);
}

/* =========================================================
   STAND — bold italic statement on parchment
   ========================================================= */
.stand{
  background: var(--paper-2);
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
.stand__inner{
  max-width: 920px;
  margin: 0 auto;
}
.stand__lede{
  font-family: "DM Serif Display", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
  max-width: 22ch;
}
.stand__lede strong{
  font-style: normal;
  font-weight: 400;
  color: var(--brick);
}

/* =========================================================
   DONATE — dark climax with the address big
   ========================================================= */
.donate{
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 48px);
  border-top: 6px solid var(--brick);
}
.donate::before{
  /* a small arch silhouette echoing the hero, far right */
  content:"";
  position: absolute; right: -80px; bottom: -40px;
  width: 420px; height: 420px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' preserveAspectRatio='xMidYMax meet'><path fill='%23c2452f' d='M 80 800 L 80 780 Q 400 -700 720 780 L 720 800 L 660 800 L 660 792 Q 400 -625 140 792 L 140 800 Z'/></svg>");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: .14;
  pointer-events: none;
}
.donate__inner{
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.donate__label{
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-2);
  margin-bottom: 24px;
}
.donate__addr{
  font-family: "DM Serif Display", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.15;
  color: var(--paper);
  margin: 0 0 32px;
}
.donate__fine{
  font-family: "Public Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244,236,223,.7);
  max-width: 50ch;
  margin: 0;
}
.donate__fine strong{ color: var(--paper); font-weight: 600; }

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  background: var(--paper);
  padding: 36px clamp(20px, 4vw, 48px) 48px;
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between; align-items: baseline;
  max-width: 1200px;
  margin: 0 auto;
}
.foot p{
  font-family: "Public Sans", sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}
.foot__copy{ font-size: 12px; letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .cta{ transition: none; }
}