:root {
  --evergreen: #123b35;
  --evergreen-deep: #092b28;
  --civic-blue: #24475a;
  --limestone: #f7f7f2;
  --paper: #fffefa;
  --saddle: #846044;
  --brass: #b89552;
  --ink: #171a19;
  --muted: #56615e;
  --line: #c8c7bd;
  --focus: #0b6aa2;
  --content: 72rem;
  --content-wide: 82rem;
  --space-section: clamp(1rem, 3vw, 5rem);
  --space-gutter: clamp(1.25rem, 4vw, 3rem);
  --font-display:
    "EB Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --font-headline: "Playfair Display", serif;
  --font-body: Inter, Candara, "Segoe UI", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 107px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--limestone);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

.content-width {
  width: min(calc(100% - (2 * var(--space-gutter))), var(--content));
  margin-inline: auto;
}

.content-width-wide {
  max-width: var(--content-wide);
}

/* HEADER */

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid rgb(18 59 53 / 14%);
  background: rgb(255 254 250 / 99%);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(13rem, 22rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  width: min(calc(100% - (2 * var(--space-gutter))), var(--content-wide));
  min-height: 6.4rem;
  margin-inline: auto;
}

.brand img {
  width: min(100%, 20rem);
  height: auto;
}

.site-nav {
  display: flex;
  gap: clamp(1.1rem, 3vw, 2.75rem);
  justify-content: flex-end;
  font-weight: 650;
}

.site-nav .site-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.site-nav .site-links a {
  padding-block: 1.85rem;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.35em;
  text-decoration-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

.site-nav .site-links a:hover,
.site-nav .site-links a:focus-visible {
  text-decoration-color: var(--brass);
}

/* Hide Checkbox & Hamburger on Desktop Screens */
.menu-toggle {
  display: none;
}

.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

.hamburger .bar {
  width: 25px;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.donate {
  display: inline-flex;
  order: 3;
  place-self: center center;
}

.donate button {
  padding: 5px 15px;
  border: none;
  color: #fff;
  background: var(--focus);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
}

.donate button:hover {
  background: var(--brass);
}

/* HERO */

#top {
  box-shadow:
    0 0 0 2rem var(--civic-blue),
    0 0 0 3rem var(--brass),
    0rem 0rem 4rem 4rem rgb(9 43 40 / 16%);
  margin-bottom: 3rem;
}

.hero {
  position: relative;
  min-height: clamp(35rem, 64vw, 49rem);
  overflow: hidden;
  background: var(--civic-blue);
}

.hero-media,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: 58% center;
}

.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: min(calc(100% - (2 * var(--space-gutter))), var(--content-wide));
  min-height: inherit;
  margin-inline: auto;
}

.hero-copy {
  text-align: center;
  padding: clamp(2rem, 2vw, 4.5rem);
  border-left: 0.5rem solid var(--brass);
  background: rgb(255 254 250 / 92%);
  box-shadow: 0 1.25rem 3rem rgb(9 43 40 / 16%);
  background-image: url("assets/images/noise.png");
}

.hero h1,
h2,
h3,
.hero-kicker,
.hero-deck {
  font-family: var(--font-headline);
}

.hero h1 {
  margin: 0;
  color: var(--evergreen);
  font-size: clamp(3.6rem, 8vw, 6.6rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.hero-kicker {
  margin: 1.1rem 0 0;
  color: var(--saddle);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 650;
  line-height: 1.1;
}

.hero-deck {
  margin: 1.6rem 0 0;
  color: var(--evergreen);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
}

/* SECTION */

.section {
  padding-block: var(--space-section);
}

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

.section h2 {
  margin: 1rem 0 clamp(2.5rem, 2vw, 4rem);
  color: var(--civic-blue);
  font-weight: 500;
  font-size: clamp(2.6rem, 4vw, 2.7rem);
  line-height: 1em;
}

.section h2::after {
  display: block;
  width: 100%;
  height: 0.2rem;
  margin-top: 1.35rem;
  background: var(--brass);
  content: "";
}

/* LETTER */

.section-letter {
  background: #ecece5;
}

.letter {
  position: relative;
  margin: 0;
  padding: clamp(1rem, 6vw, 7rem);
  border: 1px solid #d8d2c2;
  background: var(--paper);
  box-shadow: 0 1rem 3rem rgb(58 49 38 / 8%);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.28rem);
  line-height: 1.6;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
}

.letter p {
  margin: 0 auto 1.35em;
}

.letter-principles {
  color: var(--saddle);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
}

.letter-signature {
  display: flex;
  justify-content: flex-end;
  margin: 1.25rem auto 0;
}

.letter-signature img {
  width: clamp(10rem, 30vw, 16rem);
  transform: rotate(-3deg);
}

/* PHOTO */

.section-documentary {
  background: var(--paper);
}

.documentary-figure {
  margin: 0;
}

.documentary-figure picture {
  display: block;
  padding: clamp(0.35rem, 1vw, 0.65rem);
  background: var(--brass);
}

.documentary-figure img {
  width: 100%;
  max-height: 48rem;
  object-fit: cover;
}

.documentary-figure figcaption {
  margin: 0.5rem auto 0;
  color: var(--civic-blue);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1rem;
}

/* ABOUT */

.section-about {
  background: var(--limestone);
  content-visibility: auto;
  contain-intrinsic-size: 60rem;
}

.record-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(3rem, 7vw, 5rem);
}

.about-narrative p {
  max-width: 57ch;
  margin: 0 0 1.6rem;
  font-size: 1rem;
}

.service-record {
  padding-left: clamp(3rem, 7vw, 5rem);
  border-left: 1px solid var(--line);
}

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

.service-list li em {
  font-size: 15px;
}

.service-list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 1rem;
  line-height: 1.5;
}

.service-list li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--brass);
  content: "";
}

.service-list strong {
  color: var(--evergreen);
  font-weight: 600;
}

/* PRIORITIES */

.section-priorities {
  background: var(--paper);
  content-visibility: auto;
  contain-intrinsic-size: 70rem;
}

.priority-list {
  display: grid;
  gap: 0;
  margin: auto;
  padding: 0;
  list-style: none;
  max-width: 55rem;
}

.priority {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2.3rem, 5vw, 3rem);
  row-gap: 0;
}

.priority:first-child {
  padding-block-start: 0;
}

.priority:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.priority-icon svg {
  width: 4.5rem;
  height: 4.5rem;
  color: var(--saddle);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.priority h3 {
  margin: 0 0 1rem;
  color: var(--evergreen);
  font-size: clamp(1.45rem, 2.5vw, 1.8rem);
  line-height: 1.25;
}

.priority .priority-header {
  display: flex;
  align-items: center;
}

.priority .priority-solution {
  margin-block: clamp(0.8rem, 2vw, 1rem);
  color: var(--saddle);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-family: var(--font-body);
  font-weight: 500;
}

.priority-text {
  grid-column: 2;
}

.priority p {
  margin: 0;
  font-size: 1.04rem;
}

#priorities-title {
  max-width: 55rem;
  margin: auto auto clamp(2.5rem, 2vw, 4rem);
}

/* SUPPORTERS */

.section-supporters {
  background: #e9ece7;
  content-visibility: auto;
  contain-intrinsic-size: 110rem;
}

.supporter-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.5rem);
}

.supporter-gallery figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: #d6dbd5;
}

.supporter-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* FOOTER */

.site-footer {
  padding-block: 1.5rem;
  color: #fff;
  background: var(--evergreen-deep);
}

.footer-grid {
  display: grid;
  grid-template: "logo flags social" 1fr "logo disclosure disclosure" / 1fr auto auto;
  gap: 10px;
}

.footer-brand {
  background: gray;
  border-radius: 6px;
  place-self: start;
  grid-area: logo;
}

.footer-brand img {
  width: min(100%, 20rem);
  height: auto;
}

.footer-civic {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  place-self: end end;
  grid-area: flags;
}

.site-footer .flag {
  height: 2.25rem;
  border: 1px solid rgb(255 255 255 / 65%);
}

.site-footer .footer-disclosure {
  display: flex;
  place-self: end end;
  grid-area: disclosure;
}

.site-footer .footer-disclosure p {
  margin: 0.2rem 0;
  font-size: 0.8rem;
  line-height: 1.5;
  border: 1px solid white;
  padding: 10px;
}

.site-footer .social-links {
  display: flex;
  place-self: end start;
  grid-area: social;
  gap: 8px;
}

.site-footer .social-links a:hover {
  color: #fff;
  background: var(--brass);
  fill: white;
}

.site-footer .social-links a {
  fill: var(--brass);
  width: 32px;
  height: 32px;
  background: var(--limestone);
  padding: 5px;
  border-radius: 5px;
}

.instagram-mark {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.13rem solid currentColor;
  border-radius: 0.3rem;
}

.instagram-mark::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border: 0.12rem solid currentColor;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.instagram-mark::after {
  position: absolute;
  top: 0.18rem;
  right: 0.18rem;
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.site-nav .nav-links li:not(:last-child)::after {
  content: "";
  border-right: 1px solid black;
  margin-left: 20px;
}
.site-nav .nav-links {
  display: flex;
  flex-wrap: wrap;
  row-gap: 5px;
  column-gap: 20px;
  justify-content: flex-end;
}
.site-nav .nav-links .site-links {
  padding: 0;
  margin: 0;
  place-items: center;
}
.site-nav .nav-links .social-links {
  display: flex;
  place-self: end start;
  gap: 6px;
}
.site-nav .nav-links .social-links a {
  background: var(--civic-blue);
  fill: var(--limestone);
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 5px;
}
.site-nav .nav-links .social-links a:hover {
  background: var(--focus);
  fill: white;
}

@media (width >= 771px) {
  .priority .priority-header {
    margin: 0;
  }
}

/*
 * 
 * 
 * 
 * MOBILE
 *
 *
 * 
 */

@media (width <= 770px) {
  html {
    scroll-padding-top: 102.4px;
  }

  /* HEADER */

  #top {
    box-shadow: none;
    margin-bottom: 0;
  }

  .header-inner {
    grid-template-columns: minmax(13rem, 16rem) 1fr;
  }

  .hamburger {
    display: flex; /* Make hamburger bar visible */
  }

  /* Transform Menu Links into an Off-screen or Hidden Dropdown */
  .site-nav .nav-links {
    position: absolute;
    flex-direction: column;
    flex-wrap: unset;
    top: 100%; /* Sits directly below the navbar */
    left: 0;
    margin: 0;
    width: 100%;
    background-color: var(--civic-blue);
    padding: 0.5em;
    justify-content: flex-end;
    gap: 1em;

    /* Hide the menu initially via scale / opacity / height */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      max-height 0.4s ease,
      opacity 0.3s ease;
  }

  .site-nav .nav-links a {
    color: whitesmoke;
  }

  .site-nav .nav-links .site-links {
    order: 1;
    flex-direction: column;
    gap: 34px;
  }

  .site-nav .nav-links .social-links {
    order: 3;
    margin: auto;
    gap: 10px;
  }

  .site-nav .nav-links .social-links a {
    background: var(--limestone);
    fill: var(--civic-blue);
    width: 32px;
    height: 32px;
    padding: 5px;
    border-radius: 5px;
  }
  .site-nav .nav-links .social-links a:hover {
    background: var(--focus);
    fill: white;
  }
  .site-nav .nav-links li:not(:last-child)::after {
    content: unset;
    border-right: unset;
    margin-left: unset;
  }
  .site-nav .nav-links li:last-child::after {
    content: "";
    height: 1px;
    display: block;
    background: var(--brass);
    margin: 16px 0 8px;
  }

  .donate {
    order: 2;
    gap: 10px;
  }

  .donate button {
    padding: 7px 52px;
  }

  /* =======================================================
     The CSS "Checkbox Hack" Trigger Rules
     ======================================================= */

  /* 1. Expand the Nav Links Menu when checkbox is checked */
  .menu-toggle:checked ~ .nav-links {
    max-height: 900px; /* Large enough height value to clear content */
    opacity: 0.95;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
  }

  /* 2. Animate Hamburger Bars into an "X" close icon */
  .menu-toggle:checked ~ .hamburger .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle:checked ~ .hamburger .bar:nth-child(2) {
    opacity: 0; /* Hide middle line */
  }

  .menu-toggle:checked ~ .hamburger .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /*   HERO */

  .hero {
    min-height: 0;
    border-bottom: 0.6rem solid var(--brass);
    padding-bottom: 20px;
    overflow: visible;
  }

  .hero-inner {
    min-height: unset;
    width: 100%;
    justify-content: center;
  }

  .hero-media,
  .hero-media img {
    position: static;
  }

  .hero-copy {
    width: 100%;
    text-align: center;
    padding: clamp(2rem, 2vw, 4.5rem);
    border-left: 0;
    border-bottom: none;
  }

  .hero h1 {
    font-size: clamp(3rem, 14vw, 4rem);
  }

  .hero-kicker {
    font-size: clamp(1.3rem, 6vw, 2.4rem);
  }

  .hero-deck {
    font-size: clamp(1.1rem, 4vw, 1.8rem);
  }

  /*   SECTION HEADERS */

  h2,
  h3 {
    text-wrap: balance;
  }

  .section h2 {
    max-width: 100%;
    line-height: 1;
    letter-spacing: -0.01em;
    font-weight: 600;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
  }

  .section h2::after {
    width: 100%;
  }

  /*   LETTER */

  .letter {
    line-height: 1.4;
  }

  .letter p {
    margin: 0 auto 0.8em;
  }

  /*   ABOUT */

  .record-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .service-record {
    padding-top: 2rem;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .about-narrative p {
    max-width: 100%;
    margin: 0 0 1rem;
    font-size: 1em;
  }

  .about-narrative p:last-child {
    margin: 0 0 2rem;
  }

  /*   PRIORITIES */

  .priority p.solution {
    margin-top: 1em;
  }

  .priority p.solution::before {
    margin-top: 1em;
  }

  /*   SUPPORTERS */

  .section-supporters {
    overflow: hidden;
  }

  .supporter-gallery {
    display: flex;
    width: calc(100% + var(--space-gutter));
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 0 1.25rem;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--brass) transparent;
  }

  .supporter-gallery figure {
    flex: 0 0 min(82vw, 28rem);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.8);
  }

  /*   FOOTER */

  .footer-grid {
    display: grid;
    grid-template: "logo logo" "flags social" "disclosure disclosure";
    gap: 20px;
  }

  .footer-brand {
    background: gray;
    border-radius: 6px;
    place-self: center;
    grid-area: logo;
  }

  .site-footer .footer-disclosure {
    display: flex;
    place-self: center;
    grid-area: disclosure;
  }

  .footer-civic {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    justify-content: flex-end;
    place-self: center end;
    grid-area: flags;
  }

  .site-footer .social-links {
    display: flex;
    place-self: center start;
    grid-area: social;
    gap: 10px;
  }
}

/*@media (max-width: 47.5rem) {
  .section-supporters {
    overflow: hidden;
  }

  .supporter-gallery {
    display: flex;
    width: calc(100% + var(--space-gutter));
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0 0 1.25rem;
    scroll-padding-inline: 0;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--brass) transparent;
  }

  .supporter-gallery figure {
    flex: 0 0 min(82vw, 28rem);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}*/

/*@media (max-width: 35rem) {
  .header-inner {
    grid-template-columns: 1fr;
  }

  .brand,
  .button-primary {
    justify-self: left;
  }

  .button-primary {
    grid-row: 2;
  }

  .site-nav {
    grid-row: 3;
    overflow-x: auto;
  }

  .priority {
    grid-template-columns: 1fr;
  }

  .priority-icon {
    width: 3.25rem;
    height: 3.25rem;
  }
}*/

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