/* ===== Tokens (fallbacks if not already defined globally) ===== */
:root{
  --primary-blue: #3396D3;
  --light-cream: #FFF7E3;
  --warm-beige: #FAE8C8;
  --ink: #0E2233;
  --ink-70: rgba(14,34,51,.7);
}

/* The main layout already defines .container; we reuse it */
/* Section spacing */
.section{
  padding: 4.5rem 0;
  background: #fff;
}
.section--alt{
  background: var(--light-cream);
}

/* Headings centered at the top */
.section__title{
  margin: 0 auto 2rem;
  text-align: center;
  font-family: var(--font-serif, "Merriweather", Georgia, serif);
  font-weight: 900;
  color: var(--primary-blue);
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem);
  letter-spacing: .2px;
  max-width: 28ch;
}
.kicker{
  margin: 0 0 .75rem;
  font-family: var(--font-ui, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 800;
  color: var(--primary-blue);
  font-size: clamp(1.25rem, .9rem + .8vw, 1.5rem);
}

/* Paragraphs */
.prose p,
.card p{
  color: var(--ink);
  line-height: 1.7;
  margin: 0 0 1rem;
  font-size: 1.05rem;
}
.prose p:last-child{ margin-bottom: 0; }
.lead{
  color: var(--ink-70);
  font-size: 1.1rem;
}
.center{ text-align: center; }
.max-700{ max-width: 700px; margin-inline: auto; }

/* Lists */
.list{
  margin: .75rem 0 0;
  padding-left: 1.2rem;
}
.list li{ margin: .5rem 0; }

/* Cards */
.card{
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.09);
  border-color: #e2e2e2;
}
.card--beige{
  background: var(--warm-beige);
  border-color: rgba(0,0,0,.05);
}

/* Small meta text */
.small{
  color: var(--ink-70);
  font-size: .975rem;
}

/* Quotes */
.quote{ font-style: italic; }
.attrib{
  margin: .25rem 0 0;
  color: var(--primary-blue);
  font-weight: 700;
}

/* Responsive grids */
.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 960px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .grid-3{ grid-template-columns: 1fr; }
}

/* Make anchor jumps respect the sticky header */
:root{ --anchor-offset: 120px; }
section[id]{ scroll-margin-top: var(--anchor-offset); }

/* Sticky-for-first-scroll helpers */
:root{ --header-h: 0px; }

.site-header{
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

/* While within the cutoff: pin the whole header */
.site-header.sticky-active{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* tiny nudge when scrolling a bit (optional) */
.site-header.sticky-active.hide{
  transform: translateY(-6px);
}

/* prevent layout jump when header becomes fixed */
body.header-fixed{
  padding-top: var(--header-h);
}

/* Avoid double sticky when header is fixed */
.site-header.sticky-active .navband{
  position: static; /* overrides .navband { position: sticky } while fixed */
}