/* ============================================================
   SCI CHAPTER SITE — DESIGN SYSTEM
   ------------------------------------------------------------
   This file is chapter-agnostic. Colors and fonts are injected
   as custom properties by build.js from chapter.config.json.
   The fallbacks below only matter if that block is missing.
   ============================================================ */

:root {
  /* --- fallbacks (overridden by the inline block in <head>) ---
     SCI national palette: red (PMS 186), black, white. --*-rgb triples are
     emitted alongside every colour by build.js so translucent variants stay
     chapter-agnostic; the duplicates here keep the file usable on its own. */
  --ink: #15181b;              --ink-rgb: 21, 24, 27;
  --ink-soft: #4d5459;         --ink-soft-rgb: 77, 84, 89;
  --paper: #f5f4f2;            --paper-rgb: 245, 244, 242;
  --paper-warm: #eae8e4;       --paper-warm-rgb: 234, 232, 228;
  --white: #ffffff;            --white-rgb: 255, 255, 255;
  --primary: #23282c;          --primary-rgb: 35, 40, 44;
  --primary-dark: #111417;     --primary-dark-rgb: 17, 20, 23;
  --primary-soft: #3c4348;     --primary-soft-rgb: 60, 67, 72;
  --accent: #c8102e;           --accent-rgb: 200, 16, 46;
  --accent-light: #e8404f;     --accent-light-rgb: 232, 64, 79;
  --accent-dark: #a30d25;      --accent-dark-rgb: 163, 13, 37;
  --font-display: "Helvetica Neue", Arial, sans-serif;
  --font-body: system-ui, sans-serif;

  /* --- derived --- */
  --line: rgba(var(--ink-rgb), 0.14);
  --line-soft: rgba(var(--ink-rgb), 0.08);
  --line-light: rgba(255, 255, 255, 0.16);
  --line-light-soft: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(var(--primary-dark-rgb), 0.06), 0 6px 18px rgba(var(--primary-dark-rgb), 0.06);
  --shadow-md: 0 2px 6px rgba(var(--primary-dark-rgb), 0.08), 0 18px 44px rgba(var(--primary-dark-rgb), 0.12);
  --shadow-lg: 0 30px 80px rgba(var(--primary-dark-rgb), 0.22);

  --radius: 3px;
  --radius-lg: 5px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1240px;
  --maxw-narrow: 760px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  /* clip, not hidden — `hidden` on body/html turns it into a scroll
     container and breaks position:fixed and smooth scrolling */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.nav-open { overflow: hidden; }

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

/* The display face is a bold condensed grotesque, matched to the weight and
   proportions of the SCI national wordmark. `font-stretch` drives the variable
   width axis; without the variable font the family falls back to normal width
   and the layout still holds. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
}

/* Big headlines take the tightest width; small headings stay wider so they
   don't turn into slivers at 1.1rem. */
h1, h2 { font-stretch: 74%; }
h4, h5 { font-stretch: 88%; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--primary-dark);
  color: #fff;
  padding: 0.9rem 1.4rem;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* film grain over the whole page — barely there, but it kills flatness */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
  z-index: 900;
  mix-blend-mode: multiply;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */

.container {
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
}
.container-narrow { width: min(100% - (var(--gutter) * 2), var(--maxw-narrow)); margin-inline: auto; }

.section { padding: var(--section-y) 0; position: relative; }
.section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }

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

.section-dark {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.86);
  position: relative;
  isolation: isolate;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .eyebrow { color: var(--accent-light); }
.section-dark .eyebrow::before { background: var(--accent); }

/* topographic contour texture for dark bands */
.topo-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(120% 90% at 15% 0%, rgba(var(--primary-soft-rgb), 0.55), transparent 62%),
    radial-gradient(90% 80% at 100% 100%, rgba(var(--accent-rgb), 0.16), transparent 60%);
  z-index: -1;
}

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ============================================================
   TYPE SCALE
   ============================================================ */

.display-xl { font-size: clamp(2.9rem, 7.4vw, 5.6rem); font-weight: 700; }
.display-lg { font-size: clamp(2.35rem, 5.2vw, 4rem); }
.display-md { font-size: clamp(1.9rem, 3.4vw, 2.85rem); }
.display-sm { font-size: clamp(1.35rem, 2.1vw, 1.7rem); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex: none;
}

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}
.section-dark .lead { color: rgba(255, 255, 255, 0.76); }

.section-head { max-width: 720px; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 { margin-bottom: 0.45em; }

.muted { color: var(--ink-soft); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.78rem; }

.rule-diamond {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--accent);
}
.rule-diamond::before, .rule-diamond::after {
  content: "";
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: 0.35;
}
.rule-diamond span {
  width: 7px; height: 7px;
  background: currentColor;
  transform: rotate(45deg);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.7rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
              background-color 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease);
  isolation: isolate;
  text-align: center;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(0); }

.btn-dark { --btn-bg: var(--primary-dark); --btn-bd: var(--primary-dark); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--primary-dark); --btn-bd: #fff; }
.btn-light::after { background: rgba(var(--accent-rgb), 0.22); }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--primary-dark);
  --btn-bd: rgba(var(--ink-rgb), 0.28);
}
.btn-outline::after { background: var(--primary-dark); }
.btn-outline:hover { color: #fff; border-color: var(--primary-dark); }

.btn-outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.4);
}
.btn-outline-light::after { background: #fff; }
.btn-outline-light:hover { color: var(--primary-dark); border-color: #fff; }

.btn-sm { padding: 0.7rem 1.2rem; font-size: 0.72rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-dark);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: gap 0.35s var(--ease), border-color 0.35s var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.35s var(--ease); }
.link-arrow:hover { gap: 0.9em; border-bottom-color: currentColor; }
.section-dark .link-arrow { color: var(--accent-light); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal-scale.is-in { opacity: 1; transform: none; }

.d1 { transition-delay: 0.09s; }
.d2 { transition-delay: 0.18s; }
.d3 { transition-delay: 0.27s; }
.d4 { transition-delay: 0.36s; }
.d5 { transition-delay: 0.45s; }
.d6 { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   HEADER
   ============================================================ */

.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 700;
  min-height: 36px;
  padding: 0.45rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  background: #f4ead5;
  border-bottom: 1px solid rgba(21, 24, 27, 0.16);
  color: #2a2d29;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-align: center;
}
.demo-banner a { color: #8f4f05; border-bottom: 1px solid currentColor; }
.has-demo-banner .site-header { top: 37px; }

/* package context, demo only */
.demo-package {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: #2a2d29;
  color: #f4ead5;
}
.demo-package span { opacity: 0.66; }
.demo-compare { white-space: nowrap; }
.anchor-target { scroll-margin-top: 9rem; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease),
              border-color 0.45s var(--ease), padding 0.45s var(--ease);
  border-bottom: 1px solid transparent;
  padding: 0.55rem 0;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(var(--primary-dark-rgb), 0.75), rgba(var(--primary-dark-rgb), 0));
  opacity: 1;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck {
  background: rgba(var(--primary-dark-rgb), 0.97);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(var(--primary-dark-rgb), 0.25);
}
.site-header.is-stuck::before { opacity: 0; }

/* inner pages start with a solid bar */
.site-header.solid { background: var(--primary-dark); }
.site-header.solid::before { opacity: 0; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
  padding: 0.35rem 0;
}
.brand img, .brand svg { width: 46px; height: 46px; flex: none; transition: transform 0.5s var(--ease); }
.brand:hover img, .brand:hover svg { transform: rotate(-4deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-light);
  font-weight: 600;
  margin-top: 0.25rem;
}

.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); }
.site-nav a {
  position: relative;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding: 0.5rem 0;
  transition: color 0.3s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.site-nav a:hover { color: #fff; }
.site-nav a:hover::after, .site-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.site-nav a.is-active { color: #fff; }
.site-nav .btn { color: #fff; }
.site-nav .btn::after { background: rgba(0, 0, 0, 0.2); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: #fff;
  margin: 0;
  transition: transform 0.4s var(--ease), opacity 0.25s var(--ease);
}
/* Bar centres sit 6.5px apart (1.5px bar + 5px gap). The closed→X translate
   has to match that distance exactly or the two strokes miss each other. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  /* A backdrop-filter makes an element the containing block for its
     position:fixed descendants, which sized the off-canvas nav to the
     header instead of the viewport. The stuck background is already 97%
     opaque, so dropping the blur here costs nothing visually. */
  .site-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 380px);
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.35rem;
    padding: 5rem var(--pad) 3rem;
    background: var(--primary-dark);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.55s var(--ease-out), visibility 0s linear 0.55s;
    box-shadow: -30px 0 80px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform 0.55s var(--ease-out), visibility 0s linear 0s;
  }
  .site-nav a {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    width: 100%;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-nav a::after { display: none; }
  .site-nav .btn {
    margin-top: 1.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-family: var(--font-body);
    border-bottom: 0;
    width: 100%;
  }
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(var(--primary-dark-rgb), 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s var(--ease);
    z-index: 490;
  }
  .nav-scrim.is-on { opacity: 1; pointer-events: auto; }
}

/* ============================================================
   HERO (home)
   ============================================================ */

.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding: clamp(8rem, 16vh, 11rem) 0 clamp(7rem, 12vh, 9rem);
  background: var(--primary-dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Set per chapter via home.hero.focus in the config — a 16:9 hero photo gets
     cropped hard on a portrait phone, and the subject is rarely dead centre. */
  object-position: var(--hero-focus, center 60%);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@media (max-width: 700px) {
  .hero-media img { object-position: var(--hero-focus-mobile, center); }
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.4%, 0); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(var(--primary-dark-rgb), 0.9) 4%, rgba(var(--primary-dark-rgb), 0.74) 46%, rgba(var(--primary-dark-rgb), 0.3) 78%, rgba(var(--primary-dark-rgb), 0.46) 100%),
    linear-gradient(to top, rgba(var(--primary-dark-rgb), 0.92) 2%, rgba(var(--primary-dark-rgb), 0) 48%);
}

/* animated topo lines that draw themselves in */
.hero-topo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}
.hero-topo path {
  fill: none;
  /* neutral, not red — red stays reserved for real accents, and coloured
     contour lines over a dark photo just read as noise */
  stroke: #ffffff;
  stroke-width: 1;
  opacity: 0.22;
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: topoDraw 3.4s var(--ease-out) forwards;
}
.hero-topo path:nth-child(1) { animation-delay: 0.15s; }
.hero-topo path:nth-child(2) { animation-delay: 0.3s;  opacity: 0.24; }
.hero-topo path:nth-child(3) { animation-delay: 0.45s; opacity: 0.2; }
.hero-topo path:nth-child(4) { animation-delay: 0.6s;  opacity: 0.17; }
.hero-topo path:nth-child(5) { animation-delay: 0.75s; opacity: 0.14; }
.hero-topo path:nth-child(6) { animation-delay: 0.9s;  opacity: 0.11; }
@keyframes topoDraw { to { stroke-dashoffset: 0; } }

.hero-content { position: relative; max-width: 810px; }
.hero .eyebrow { color: var(--accent-light); }
.hero h1 {
  font-size: clamp(3rem, 7.6vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin-bottom: 0.42em;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent-light);
  display: block;
}
.hero .lead { color: rgba(255, 255, 255, 0.8); max-width: 56ch; margin-bottom: 2rem; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  gap: 0.6rem;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  z-index: 3;
}
.scroll-cue i {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, var(--accent-light), transparent);
  animation: cueDrop 2.4s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* stat strip that straddles the hero edge */
.hero-stats {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--section-y) * -1 + 1rem);
}
.hero-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.stat {
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1rem, 2vw, 1.75rem);
  border-right: 1px solid var(--line-soft);
  position: relative;
}
.stat:last-child { border-right: 0; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.3vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  display: flex;
  align-items: baseline;
  gap: 0.02em;
}
.stat-value .suffix, .stat-value .prefix { color: var(--accent); }
.stat-label {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 22ch;
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */

.page-hero {
  position: relative;
  padding: clamp(9rem, 17vh, 12rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  background: var(--primary-dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* keeps the headline side readable over the photo */
    linear-gradient(100deg, rgba(var(--primary-dark-rgb), 0.94) 0%, rgba(var(--primary-dark-rgb), 0.72) 46%, rgba(var(--primary-dark-rgb), 0.42) 100%),
    radial-gradient(90% 130% at 12% 0%, rgba(var(--primary-soft-rgb), 0.85), transparent 60%),
    radial-gradient(70% 120% at 100% 100%, rgba(var(--accent-rgb), 0.2), transparent 62%);
}

/* Low-opacity photo behind the gradients and topo lines. Optional per page
   via <page>.hero.image in chapter.config.json. */
.page-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Group photos crop differently every time, so the vertical framing is
     per-page: set `hero.focus` in the chapter config to something like
     "center 18%". The mobile rule below keeps its own value on purpose,
     since the narrow hero shows a different slice of the same photo. */
  object-position: var(--hero-focus, center 42%);
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(100deg, transparent 6%, rgba(0, 0, 0, 0.55) 42%, #000 88%);
  mask-image: linear-gradient(100deg, transparent 6%, rgba(0, 0, 0, 0.55) 42%, #000 88%);
}
.page-hero-topo {
  position: absolute;
  right: -6%;
  bottom: -30%;
  width: min(62%, 720px);
  opacity: 0.16;
  z-index: -1;
}
.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  max-width: 17ch;
  text-wrap: balance;
}
.page-hero .lead { color: rgba(255, 255, 255, 0.78); }

.breadcrumbs {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 1.75rem;
}
.breadcrumbs a { color: rgba(255, 255, 255, 0.7); transition: color 0.3s; }
.breadcrumbs a:hover { color: var(--accent-light); }

/* ============================================================
   TICKER
   ============================================================ */

.ticker {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.9rem 0;
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: tickerRun 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-right: 1.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-item::after {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}
@keyframes tickerRun { to { transform: translateX(-50%); } }

/* ============================================================
   SPLIT (image + text)
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split.reverse .split-media { order: 2; }

.split-media { position: relative; }
.split-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* offset outline frame */
.split-media::before {
  content: "";
  position: absolute;
  inset: 20px 20px -20px -20px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  z-index: -1;
  opacity: 0.6;
}
.split.reverse .split-media::before { inset: 20px -20px -20px 20px; }

/* Group and crowd shots run edge to edge, so the 4:3 crop above lops off
   whoever is standing on the ends. This keeps the photo's own 3:2 frame. */
.split-media-wide img { aspect-ratio: 3 / 2; }

/* ============================================================
   AUCTION LOTS (banquet module)
   ============================================================ */

.lot {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.6rem 1.65rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.lot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Shared by the grid cards and the featured lot beside its photo, so a lot
   reads the same either way: number, title, then who gave it and what it is
   worth. Chapters list donor and value on every item, so both are required. */
.lot-number {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.lot-title {
  font-size: 1.18rem;
  line-height: 1.28;
  margin-bottom: 0.5rem;
}
.lot-feature .lot-title { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.lot-meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.85rem;
}
.lot-meta span { margin: 0 0.5rem; opacity: 0.5; }

/* The ticket platform disclaimer sits under the buttons that leave the site */
.ticket-note { margin-top: 1rem; max-width: 46ch; }

/* Only rendered when a chapter actually has a video to embed */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--line-soft);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.badge-float {
  position: absolute;
  right: -14px;
  bottom: -26px;
  background: var(--primary-dark);
  color: #fff;
  padding: 1.15rem 1.4rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
  min-width: 132px;
}
.split.reverse .badge-float { right: auto; left: -14px; }
.badge-float b {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-light);
}
.badge-float span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

/* ============================================================
   CARDS
   ============================================================ */

.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-out);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.card:hover::before { transform: scaleY(1); transform-origin: top; }
.card h3 { font-size: 1.28rem; margin-bottom: 0.5rem; }
.card p { color: var(--ink-soft); font-size: 0.94rem; }

.card-icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  margin-bottom: 1.35rem;
  color: var(--primary);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.card-icon svg { width: 22px; height: 22px; }
.card:hover .card-icon { background: var(--primary); color: var(--accent-light); border-color: var(--primary); }

.card-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.9rem;
}

/* ============================================================
   IMPACT BAND
   ============================================================ */

.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
}
.impact-cell {
  background: var(--primary-dark);
  padding: clamp(1.75rem, 3vw, 2.6rem) clamp(1.1rem, 2vw, 1.8rem);
}
.impact-value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1;
  color: #fff;
  display: flex;
  align-items: baseline;
}
.impact-value .prefix, .impact-value .suffix { color: var(--accent-light); }
.impact-label {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

/* ============================================================
   EVENTS
   ============================================================ */

.event-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.event-feature-media { position: relative; min-height: 380px; }
.event-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.event-feature-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--primary-dark-rgb), 0.7), rgba(var(--primary-dark-rgb), 0.05) 55%);
}
.event-flag {
  position: absolute;
  top: 1.25rem; left: 1.25rem;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border-radius: 2px;
}
.event-feature-body { padding: clamp(1.75rem, 3.4vw, 3rem); }
.event-feature-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: 0.7rem; }

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.event-meta li { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.event-meta svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

.event-details { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.event-details li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}
.event-details li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* countdown */
.countdown {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.countdown li {
  flex: 1;
  text-align: center;
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0.8rem 0.4rem;
  margin: 0;
}
.countdown b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.countdown span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* event card */
.event-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  height: 100%;
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.event-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-warm); }
.event-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.event-card:hover .event-card-media img { transform: scale(1.06); }

.date-chip {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  background: var(--primary-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  text-align: center;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.date-chip b { display: block; font-family: var(--font-display); font-size: 1.5rem; }
.date-chip span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--accent-light);
  font-weight: 700;
}

.event-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.event-card-body h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.event-card-body p { font-size: 0.9rem; color: var(--ink-soft); }
.event-card-foot {
  margin-top: auto;
  padding-top: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line-soft);
}
.event-price { font-size: 0.8rem; font-weight: 600; color: var(--primary); }

.tag {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  padding: 0.3rem 0.6rem;
  border-radius: 2px;
  margin-bottom: 0.9rem;
}

/* filter tabs */
.filters {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}
.filters button {
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.65rem 1.3rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}
.filters button:hover { color: var(--primary); }
.filters button.is-active { background: var(--primary-dark); color: #fff; }

.empty-note {
  padding: 3rem;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
}

/* ============================================================
   TIERS (membership + sponsorship)
   ============================================================ */

.tier {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 2.6vw, 2.3rem);
  position: relative;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.tier.is-featured {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.82);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow-lg);
}
.tier.is-featured h3, .tier.is-featured .tier-price { color: #fff; }
.tier.is-featured .tier-price small { color: rgba(255, 255, 255, 0.6); }
.tier.is-featured .tier-list li { color: rgba(255, 255, 255, 0.8); }
.tier.is-featured .tier-list li::before { color: var(--accent-light); }

.tier-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 2px;
  white-space: nowrap;
}
.tier h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
.tier-blurb { font-size: 0.88rem; color: var(--ink-soft); min-height: 2.6em; }
.tier.is-featured .tier-blurb { color: rgba(255, 255, 255, 0.68); }
.tier-price {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--primary);
  margin: 1.1rem 0 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.tier-price small {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tier-list { list-style: none; padding: 0; margin: 0 0 1.8rem; }
.tier-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
  line-height: 1.5;
}
.tier-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}
.tier .btn { margin-top: auto; }

/* ============================================================
   SPLIT BARS (dues allocation)
   ============================================================ */

.splits { list-style: none; padding: 0; margin: 0; }
.splits li { margin-bottom: 1.4rem; }
.split-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.split-head b { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent); }
.split-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  overflow: hidden;
}
.split-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-light));
  border-radius: 99px;
  transition: width 1.4s var(--ease-out);
}

/* ============================================================
   TIMELINE
   ============================================================ */

.timeline { position: relative; padding-left: 2.6rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent), var(--line));
}
.timeline-item { position: relative; padding-bottom: 2.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.6rem;
  top: 0.45rem;
  width: 15px; height: 15px;
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 50%;
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-dark);
  display: block;
  margin-bottom: 0.3rem;
}
.timeline-item h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.timeline-item p { color: var(--ink-soft); font-size: 0.94rem; }

/* ============================================================
   PEOPLE
   ============================================================ */

.person {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.75rem;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.person:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.person-avatar {
  width: 62px; height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--accent-light);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: 0.02em;
}
.person h3 { font-size: 1.2rem; margin-bottom: 0.15rem; }
/* board roster: names and titles only. The full profile treatment lives in
   the board module, which is a premium-tier content section. */
.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 44rem;
  border-top: 1px solid var(--line-soft);
}
.roster-row {
  display: block;
  padding: 0.95rem 0.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.roster-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.roster-name { font-weight: 700; letter-spacing: -0.005em; }
.roster-role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  text-align: right;
  white-space: nowrap;
}
.roster-bio { margin: 0.55rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.roster-row .person-mail { margin-top: 0.55rem; }
@media (max-width: 30rem) {
  .roster-heading { flex-direction: column; gap: 0.25rem; }
  .roster-role { text-align: left; }
}

.person-role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 0.9rem;
}
.person p { font-size: 0.9rem; color: var(--ink-soft); }
.person a.person-mail {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--primary);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s, color 0.3s;
}
.person a.person-mail:hover { color: var(--accent-dark); border-color: var(--accent); }

/* Photo profile cards. Chapter Site Plus board module only.
   ships the names-and-titles roster above, so the full-bleed portrait is
   the visible difference between the two tiers. */
.person-card { overflow: hidden; }
.person-card .person-shot {
  display: block;
  width: calc(100% + 3.5rem);
  max-width: none;              /* beat the global img{max-width:100%} */
  margin: -1.75rem -1.75rem 1.3rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
  background: var(--line-soft);
  border-radius: var(--radius) var(--radius) 0 0;
  transition: transform 0.6s var(--ease);
}
.person-card:hover .person-shot { transform: scale(1.03); }
.person-card p { line-height: 1.62; }
.person-card h3 { margin-top: 0.1rem; }

@media (max-width: 640px) {
  .person-card .person-shot { aspect-ratio: 3 / 2; object-position: center 20%; }
}


/* ============================================================
   QUOTE
   ============================================================ */

.quote { text-align: center; max-width: 880px; margin-inline: auto; }
.quote-mark {
  display: block;
  width: 46px;
  height: 3px;
  background: var(--accent);
  margin: 0 auto 1.75rem;
  font-size: 0;
}
.quote blockquote {
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-stretch: 88%;
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.22;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.quote cite {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.quote cite span { display: block; margin-top: 0.4rem; font-weight: 500; letter-spacing: 0.1em; opacity: 0.6; }

/* ============================================================
   SPONSOR WALL
   ============================================================ */

.logo-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.logo-cell {
  background: var(--white);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  position: relative;
  transition: background-color 0.4s var(--ease);
}
.logo-cell img {
  max-height: 58px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.5s var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.logo-cell:hover { background: var(--paper-warm); }
.logo-cell:hover img { filter: none; opacity: 1; transform: scale(1.04); }
.logo-cell .logo-tier {
  position: absolute;
  top: 0.65rem; right: 0.75rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  opacity: 0.55;
}

/* ============================================================
   ACCORDION
   ============================================================ */

.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.5rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}
.acc-trigger:hover { color: var(--accent-dark); }
.acc-icon {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.acc-icon::before { width: 11px; height: 1.5px; }
.acc-icon::after { width: 1.5px; height: 11px; }
.acc-trigger[aria-expanded="true"] .acc-icon { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(90deg); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { opacity: 0; }
.acc-panel {
  overflow: hidden;
  height: 0;
  transition: height 0.45s var(--ease-out);
}
.acc-panel-inner { padding: 0 0 1.6rem; max-width: 68ch; color: var(--ink-soft); }

/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--primary);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 130% at 85% 20%, rgba(var(--accent-rgb), 0.28), transparent 62%),
    radial-gradient(80% 120% at 0% 100%, rgba(var(--primary-dark-rgb), 0.85), transparent 60%);
}
.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.75rem, 4vw, 4rem);
  flex-wrap: wrap;
}
.cta-inner h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); max-width: 18ch; margin-bottom: 0.35em; }
.cta-inner p { color: rgba(255, 255, 255, 0.76); max-width: 50ch; }

/* ============================================================
   FORMS
   ============================================================ */

.form-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233d4744' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 1rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* inline newsletter */
.subscribe { display: flex; gap: 0.6rem; flex-wrap: wrap; max-width: 520px; }
.subscribe input {
  flex: 1 1 240px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  transition: border-color 0.3s, background-color 0.3s;
}
.subscribe input::placeholder { color: rgba(255, 255, 255, 0.45); }
.subscribe input:focus {
  outline: none;
  border-color: var(--accent-light);
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================================
   INFO LIST (contact details)
   ============================================================ */

.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}
.info-list li:first-child { padding-top: 0; }
.info-icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-dark);
}
.info-icon svg { width: 17px; height: 17px; }
.info-list b {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}
.info-list a { border-bottom: 1px solid var(--line); transition: color 0.3s, border-color 0.3s; }
.info-list a:hover { color: var(--accent-dark); border-color: var(--accent); }

.social-row { display: flex; gap: 0.6rem; }
.social-row a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.social-row a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); }
.social-row svg { width: 17px; height: 17px; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.66);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 2rem;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-light-soft);
}
.footer-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; color: #fff; }
.footer-brand img { width: 52px; height: 52px; }
.footer-brand b { font-family: var(--font-display); font-size: 1.1rem; display: block; line-height: 1.2; }
.footer-brand span {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 0.7rem; }
.footer-col a { transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--accent-light); }

.footer-bottom {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.42);
}
.footer-bottom a:hover { color: var(--accent-light); }

.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--primary-dark);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background-color 0.3s;
  z-index: 400;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--accent); }
.to-top svg { width: 17px; height: 17px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .split, .event-feature { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .split-media::before { display: none; }
  .badge-float { right: 12px; bottom: -20px; }
  .split.reverse .badge-float { left: auto; right: 12px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats { margin-top: 0; }
  .hero-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
  .event-feature-media { min-height: 260px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  :root { --section-y: clamp(3.5rem, 12vw, 4.5rem); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: 8.5rem; }
  .hero-stats-inner { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .stat:last-child { border-bottom: 0; }
  .impact-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .countdown { flex-wrap: wrap; }
  .countdown li { flex: 1 1 40%; }
  .timeline { padding-left: 2rem; }
  .timeline-item::before { left: -2rem; }
  .brand img, .brand svg { width: 40px; height: 40px; }
  .brand-name { font-size: 0.92rem; }
  .demo-banner {
    min-height: 70px;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 0.3rem 0.65rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.65rem;
  }
  .demo-banner > span:first-child { grid-column: 1 / -1; }
  .demo-package { font-size: 0.66rem; }
  .demo-banner-cta { display: none; }
  .has-demo-banner .site-header { top: 70px; }
  .has-demo-banner .hero { padding-top: 12.5rem; }
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .site-header, .demo-banner, .to-top, .scroll-cue, .ticker, .cta-band, .nav-scrim { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .section { padding: 1.5rem 0; }
  .reveal, .reveal-scale { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7em; }
}

/* ============================================================
   PAGE COMPONENTS (added after the core system)
   ============================================================ */

.stats-wrap { background: var(--paper); }
.hero-stats { margin-top: -5.5rem; }

.center-cta { text-align: center; margin-top: 2.25rem; }

/* --- numbered steps --- */
.step { position: relative; padding-top: 0.5rem; }
.step-num {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  position: relative;
}
.step-num::after {
  content: "";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  width: calc(100vw);
  max-width: 999px;
  height: 1px;
  background: linear-gradient(to right, var(--line), transparent);
}
.grid-3 > .step:last-child .step-num::after { display: none; }
.step h3 { font-size: 1.3rem; }

/* --- check list --- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding: 0.95rem 0 0.95rem 2.4rem;
  border-bottom: 1px solid var(--line-light-soft);
  font-size: 1rem;
  margin: 0;
}
.check-list li:last-child { border-bottom: 0; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25rem;
  width: 9px; height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}

/* --- contact layout --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.panel {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
}
.panel h2, .panel h3 { margin-bottom: 1.25rem; }
.panel-dark {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: rgba(255, 255, 255, 0.72);
}
.officer-list { list-style: none; padding: 0; margin: 0; }
.officer-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  margin: 0;
}
.officer-list li:last-child { border-bottom: 0; }
.officer-list span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 0.25rem;
}
.officer-list b { display: block; color: #fff; font-family: var(--font-display); font-size: 1.05rem; }
.officer-list a { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); transition: color 0.3s; }
.officer-list a:hover { color: var(--accent-light); }

/* --- mini hero (thank you / 404) --- */
.mini-hero {
  position: relative;
  padding: clamp(9rem, 20vh, 13rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--primary-dark);
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.mini-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 110% at 50% 0%, rgba(var(--primary-soft-rgb), 0.9), transparent 65%),
    radial-gradient(50% 90% at 50% 110%, rgba(var(--accent-rgb), 0.22), transparent 60%);
}
.mini-hero .lead { color: rgba(255, 255, 255, 0.78); max-width: 54ch; }
.mini-mark {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent-light);
  animation: markPop 0.7s var(--ease-out) both;
}
.mini-mark svg { width: 30px; height: 30px; }
@keyframes markPop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* card used as a link (404 grid) */
a.card { display: block; }
a.card h3 { color: var(--ink); }

/* past events read back a step */
.event-card.is-past .event-card-media img { filter: grayscale(0.55); }
.event-card.is-past:hover .event-card-media img { filter: none; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .hero-stats { margin-top: 0; }
  .step-num::after { display: none; }
}

@media (max-width: 1000px) { .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* flex/grid display values beat the UA stylesheet's [hidden] rule */
[hidden] { display: none !important; }

/* ============================================================
   SCI BRAND TUNING
   Condensed display face + red/black/white palette. Loaded last so
   it wins over the base component rules above.
   ============================================================ */

/* Condensed type reads smaller at the same px, so the scale steps up a notch. */
.display-xl { font-size: clamp(3.1rem, 8vw, 6rem); }
.display-lg { font-size: clamp(2.5rem, 5.6vw, 4.4rem); text-transform: uppercase; }
.display-md { font-size: clamp(2rem, 3.7vw, 3.1rem); }
.display-sm { font-size: clamp(1.4rem, 2.3vw, 1.85rem); }

/* Numerals: tabular so counters and countdowns don't jitter, and a touch
   wider than the headline width for legibility. */
.stat-value, .impact-value, .tier-price, .countdown b, .date-chip b,
.badge-float b, .split-head b, .timeline-year, .person-avatar,
.card-num, .step-num, .footer-brand b {
  font-stretch: 84%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.stat-value, .impact-value, .tier-price { font-weight: 800; }

/* Header/footer lockups echo the national wordmark: heavy condensed caps
   over a letterspaced descriptor line. */
.footer-brand b {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Section headings stay sentence case — only the short, punchy ones go caps. */
.timeline-year, .card-num { text-transform: uppercase; }

/* Card and tier headings: condensed but not shouting. */
.card h3, .tier h3, .event-card-body h3, .person h3, .timeline-item h3,
.step h3, .acc-trigger { font-stretch: 84%; font-weight: 700; }

.acc-trigger { letter-spacing: -0.005em; }

/* Mobile drawer links pick up the same condensed caps treatment. */
@media (max-width: 960px) {
  .site-nav a {
    text-transform: uppercase;
    font-weight: 800;
    font-stretch: 80%;
    letter-spacing: 0.01em;
  }
}

/* Red is the graphic accent, not a background wash — a thin rule under the
   sticky header ties the whole page back to the national mark. */
.site-header.is-stuck { border-bottom-color: var(--accent); }

/* The ticker is the one full-bleed red moment on the page — a direct nod to
   the national mark, sitting between two neutral bands. */
.ticker { background: var(--accent); border-block-color: rgba(0, 0, 0, 0.18); color: #fff; }
.ticker-item::after { background: #fff; opacity: 0.7; }

/* Over photography the red eyebrow sits on unpredictable luminance — white
   holds up on any hero image, and the rule before it keeps the red accent. */
.hero .eyebrow { color: rgba(255, 255, 255, 0.88); }

/* Conversion CTA in the demo banner */
.demo-banner .demo-banner-cta {
  font-weight: 700;
  border-bottom-width: 2px;
}
.demo-banner .demo-banner-cta:hover { color: #6d3c04; }

/* Align tier prices across cards when the grid is multi-column */
@media (min-width: 641px) {
  .tier-blurb { min-height: 8.4em; }
}

/* Narrow screens: text spans full width, so fade the hero photo up from the
   bottom instead of in from the left and keep it fainter. */
@media (max-width: 720px) {
  .page-hero-media {
    opacity: 0.3;
    object-position: center 45%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, rgba(0, 0, 0, 0.45) 48%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 4%, rgba(0, 0, 0, 0.45) 48%, #000 100%);
  }
}

/* ============================================================
   PINE TREE ONE-OFF OVERRIDE (owner decision, Maria Caito, 2026-10-08)
   Chapter request: "Make our logo larger in the header."
   Everything above this block is an unmodified copy of the template's
   src/assets/css/style.css (git blob abe756debc14c22eaf581623dfda898fa2cbccb8, template commit 9cd0b99).
   Because this file replaces the shared stylesheet for Pine Tree only,
   template stylesheet updates do NOT reach Pine Tree automatically.
   See chapters/pine-tree/OVERRIDES.md for how to re-sync.
   ============================================================ */
/* 2026-10-19 revision request: larger logo at the top and bottom. The header
   logo shrinks once the page scrolls so the fixed header doesn't cover content. */
.brand img, .brand svg { width: 110px; height: 110px; transition: transform 0.5s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease); }
.site-header.is-stuck .brand img, .site-header.is-stuck .brand svg { width: 76px; height: 76px; }
.footer-brand img { width: 120px; height: 120px; }
/* Room under the taller header so the page's first line clears the logo. */
@media (min-width: 641px) {
  .hero { padding-top: clamp(10.5rem, 18vh, 12rem); }
  .page-hero { padding-top: clamp(11rem, 19vh, 13rem); }
}
@media (max-width: 640px) {
  .brand img, .brand svg { width: 88px; height: 88px; }
  .site-header.is-stuck .brand img, .site-header.is-stuck .brand svg { width: 64px; height: 64px; }
  .hero { padding-top: 9.75rem; }
  .page-hero { padding-top: 10rem; }
  .footer-brand img { width: 96px; height: 96px; }
}
/* Phones: inner-page header photos are widened canvases with the photo on the
   right (see CREDITS.md), so frame the photo itself instead of the template's
   fixed center slice, and show it a little stronger than the 0.3 default. */
@media (max-width: 720px) {
  .page-hero-media { opacity: 0.5; }
  .page-hero-media[src$="photo-events.jpg"]  { object-position: 86% center; }
  .page-hero-media[src$="photo-about.jpg"]   { object-position: 92% center; }
  .page-hero-media[src$="photo-contact.jpg"] { object-position: 95% center; }
}
/* Home header text lines up with the logo (left edge of the page grid) instead
   of sitting in a centered 810px column, so the headline clears the moose. */
.hero .container.hero-content { max-width: none; }
.hero .hero-content > * { max-width: 810px; }
.hero .hero-content > .lead { max-width: 56ch; }
/* 2026-10-19: the four goals are numbered 01-04 in chapter.config.json (prefix).
   Hide the template's count-up number, which stays at 0 for visitors whose device
   has Reduce Motion on. */
.impact-value [data-count] { display: none; }
/* 2026-10-19: the Fall Gathering flyer is the event image. The image file is the flyer
   centered on a wide canvas of its own background color, so the template's cover crop
   only trims background. Drop the dark fade over the feature image so the flyer's date
   stays readable, and give the feature image more height on phones so the flyer isn't tiny. */
.event-feature-media:has(img[src$="event-fall-gathering.jpg"])::after { display: none; }
/* 2026-10-21: any featured event image, below 900px wide, gets a 4:3 frame instead of the
   template's 260px-tall strip, which cut the top and bottom off (e.g. the Big Buck antlers). */
@media (max-width: 900px) {
  .event-feature-media { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .event-feature-media:has(img[src$="event-fall-gathering.jpg"]) { aspect-ratio: 4 / 5; }
}
/* 2026-10-20: with only one event on the calendar, the event list repeats the event
   already shown in the large feature above it. Hide the list section (home "Coming up
   at the chapter" and the Events page calendar) whenever it holds exactly one event.
   With two or more events the lists show as normal. */
section:has(> .container > .grid > .event-card:only-child) { display: none; }
/* 2026-10-26: the goals section has no note line; hide the template's empty note so it
   doesn't leave extra space under the four goals. */
.impact-grid ~ p.small:empty { display: none; }