/* Chris Hansen Memorial Fund — site styles */

:root {
  --navy:        #0F2A3D;
  --navy-light:  #163A52;
  --ink:         #18262F;
  --ink-soft:    #34444E;
  --muted:       #4B5D68;
  --paper:       #F4F6F5;
  --white:       #FFFFFF;
  --gold:        #E2B66B;
  --gold-dark:   #D4A451;
  --bronze:      #8A5A16;
  --link:        #0F3B57;
  --link-hover:  #0A2638;
  --pale:        #D9E4EA;
  --steel:       #6F8DA0;
  --steel-soft:  #9AAAB3;
  --ghost:       #B7C8D3;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --gutter: 24px;
  --section-y: 88px;
}

/* ---------- base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
}

img { max-width: 100%; display: block; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  z-index: 10;
}
.skip-link:focus { left: 0; }

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

/* ---------- shared pieces ---------- */

.eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}
.eyebrow--gold { color: var(--gold); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--gold {
  background: var(--gold);
  color: var(--navy);
}
.btn--gold:hover {
  background: var(--gold-dark);
  color: var(--navy);
}
.btn--ghost {
  color: var(--white);
  font-weight: 600;
  border: 1.5px solid var(--steel);
}
.btn--ghost:hover {
  color: var(--white);
  border-color: var(--pale);
  background: rgba(255, 255, 255, .06);
}
.btn--lg { padding: 16px 30px; font-size: 18px; }
.btn--sm { padding: 10px 18px; font-size: 15px; }

/* Photo slots. Replace the whole element with <img class="photo photo--portrait">
   once you have the picture — the aspect-ratio keeps the layout identical. */
.photo {
  min-width: 0;
  border-radius: 16px;
  border: 2px dashed var(--steel-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 15px;
}
.photo--on-navy {
  border-color: var(--steel);
  color: var(--ghost);
}
.photo--portrait { aspect-ratio: 4 / 5; max-height: 460px; }
.photo--landscape { aspect-ratio: 3 / 2; }
img.photo { border: 0; padding: 0; object-fit: cover; width: 100%; }

/* Copy still to be written. Delete this one rule before launch and the text
   simply reads as normal body copy. */
.placeholder {
  background: rgba(226, 182, 107, .18);
  box-shadow: inset 0 -1px 0 rgba(138, 90, 22, .45);
  border-radius: 3px;
  padding: 0 2px;
}

.section { padding: var(--section-y) 0; }
.section--white { background: var(--white); }
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2 { color: var(--white); }

.section__title {
  margin: 0 0 16px;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.15;
}
.section__intro {
  margin: 0 0 48px;
  font-size: 18px;
  max-width: 44rem;
  color: var(--ink-soft);
}

.link-lg {
  font-weight: 600;
  font-size: 17px;
}

/* two-column split used by several sections */
.split {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.split--center { align-items: center; }
.split__narrow { flex: 1 1 280px; min-width: 0; }
.split__wide   { flex: 2 1 480px; min-width: 0; }
.split__half   { flex: 1 1 400px; min-width: 0; }

/* ---------- header + hero ---------- */

.masthead {
  background: var(--navy);
  color: var(--white);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav__brand:hover { color: var(--white); }
.nav__brand svg { flex: none; }

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  font-size: 15px;
}
.nav__links a {
  color: var(--pale);
  text-decoration: none;
}
.nav__links a:hover { color: var(--white); }
.nav__links .btn--gold { color: var(--navy); }

.hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 88px;
}
.hero__copy { flex: 1 1 420px; min-width: 0; }
.hero__media { flex: 1 1 340px; min-width: 0; }

.hero h1 {
  margin: 0 0 20px;
  color: var(--white);
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
}
.hero__lede {
  margin: 0 0 32px;
  font-size: 19px;
  color: var(--pale);
  max-width: 34rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- remembering Chris ---------- */

.prose { font-size: 18px; }
.prose p { margin: 0 0 18px; }
.prose p:last-of-type { margin-bottom: 28px; }

.pull-quote {
  margin: 0;
  padding: 24px 28px;
  background: var(--white);
  border-radius: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.45;
  color: var(--navy);
}
.pull-quote footer {
  margin-top: 12px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 15px;
  color: var(--muted);
}

/* ---------- what your gift does ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.card {
  background: var(--paper);
  border-radius: 16px;
  padding: 28px;
}
.card h3 {
  margin: 16px 0 8px;
  font-family: var(--sans);
  font-size: 20px;
}
.card p { margin: 0; color: var(--ink-soft); }

/* ---------- give ---------- */

.give h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 5.5vw, 44px);
  line-height: 1.1;
}
.give__lede {
  margin: 0 0 32px;
  font-size: 18px;
  color: var(--pale);
}
.give__aside {
  flex: 1 1 300px;
  min-width: 0;
  align-self: start;
  background: var(--navy-light);
  border-radius: 16px;
  padding: 28px;
}
.give__aside h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 18px;
  color: var(--white);
}
.give__aside p {
  margin: 0 0 20px;
  color: var(--pale);
}
.give__aside p:last-child { margin-bottom: 0; }
.give__aside a { color: var(--gold); }
.give__aside a:hover { color: #F0D29C; }

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

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  :root { --section-y: 56px; --gutter: 20px; }

  .split { gap: 32px; }
  .hero { gap: 32px; padding-top: 36px; padding-bottom: 56px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .nav { gap: 14px; }
  .nav__links { gap: 16px; font-size: 14px; }
  .section__intro { margin-bottom: 32px; }
  .pull-quote { padding: 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .masthead,
  .section--navy { background: none; color: var(--ink); }
  .hero h1,
  .section--navy h2 { color: var(--navy); }
  .nav,
  .hero__actions,
  .photo:not(img) { display: none; }
  .placeholder { background: none; box-shadow: none; }
}