/* ==========================================================================
   LACOBA, the Layibi Old Boys Association
   Design tokens: laterite rust and forest green with antique registry gold,
   set on warm paper. This is a placeholder palette, so swap in the exact
   logo hex values once the client supplies them.
   ========================================================================== */

:root{
  /* Brand colours, named after the physical things they resemble */
  --forest:        #163B2B;
  --forest-light:  #2F6E4E;
  --forest-dim:    #12301F90;
  --rust:          #9C4419;
  --rust-light:    #C2733A;
  --gold:          #C79A3E;
  --gold-soft:     #E1C381;
  --cream:         #F4EEE0;
  --paper:         #FFFCF6;
  --ink:           #201D1A;
  --ink-soft:      #4A443C;
  --line:          #E1D6BE;

  /* Typefaces: a classic serif for headings, a clean sans for body copy,
     and a monospace for small uppercase labels and eyebrow text */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --container: 1180px;
  --radius: 4px;
  --shadow-card: 0 1px 2px rgba(32,29,26,0.07), 0 8px 24px rgba(32,29,26,0.07);
}

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

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--forest);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.02em; }
h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.015em; }
h3{ font-size: 1.35rem; font-weight: 600; }
h4{ font-weight: 600; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
strong{ font-weight: 700; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.eyebrow{
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.82rem, 1.7vw, 1rem);
  color: var(--rust);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 1.1em;
  height: 1.1em;
  background-color: var(--gold);
  /* Four-point sparkle/compass mark: a cleaner, more distinctive stand-in
     for the shield used elsewhere in the crest and icon set, and one that
     stays crisp at this small a size. */
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJsMi4yIDcuOEwyMiAxMmwtNy44IDIuMkwxMiAyMmwtMi4yLTcuOEwyIDEybDcuOC0yLjJMMTIgMnoiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJsMi4yIDcuOEwyMiAxMmwtNy44IDIuMkwxMiAyMmwtMi4yLTcuOEwyIDEybDcuOC0yLjJMMTIgMnoiLz48L3N2Zz4=");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: inline-block;
  flex-shrink: 0;
}

/* Buttons: one shared shape, three colour treatments (primary, ghost, gold) */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--rust); color: var(--paper); }
.btn-primary:hover{ background: var(--rust-light); }
.btn-ghost{ background: transparent; color: var(--forest); border-color: var(--forest); }
.btn-ghost:hover{ background: var(--forest); color: var(--paper); }
.btn-gold{ background: var(--gold); color: var(--forest); }
.btn-gold:hover{ background: var(--gold-soft); }
.btn-block{ width: 100%; justify-content: center; }

/* ==========================================================================
   Header and nav, with a hover underline and an active gold tick
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,241,231,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 2vw, 24px);
  padding: clamp(14px, 2.1vw, 20px) clamp(16px, 3vw, 28px);
  max-width: var(--container);
  margin: 0 auto;
}
.brand{
  display: flex; align-items: center; gap: clamp(8px, 1.2vw, 12px);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--forest);
  min-width: 0;
  flex-shrink: 1;
}
.brand > span{ min-width: 0; }
.brand-mark{
  width: clamp(32px, 3vw, 38px); height: clamp(32px, 3vw, 38px);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 0 1.5px var(--gold-soft);
  display: grid; place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.brand-mark img{
  width: 100%; height: 100%;
  /* contain, not cover: the crest is a transparent PNG now, so this
     keeps the whole shield visible instead of cropping its edges */
  object-fit: contain;
  padding: 3px;
  border-radius: 50%;
}
/* The navbar crest specifically, sized up beyond the shared .brand-mark
   default (which the footer's version of the same brand block also uses,
   and should stay compact there) so it reads as a proper mark up top. */
.site-header .brand-mark{
  width: clamp(46px, 4.4vw, 64px); height: clamp(46px, 4.4vw, 64px);
  box-shadow: 0 0 0 2px var(--gold-soft), 0 2px 6px rgba(27,67,50,0.18);
}
.site-header .brand-mark img{ padding: 4px; }
.brand small{
  display: block; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}

.nav-links{
  display: flex; align-items: center; gap: clamp(0px, 0.4vw, 6px);
  flex-shrink: 1;
  min-width: 0;
}
.nav-links a{
  position: relative;
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px clamp(7px, 1vw, 14px);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.nav-links a::after{
  content: "";
  position: absolute;
  left: clamp(7px, 1vw, 14px); right: clamp(7px, 1vw, 14px); bottom: 2px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover{ color: var(--forest); }
.nav-links a:hover::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--rust); font-weight: 600; }
.nav-links a.active::after{ transform: scaleX(1); background: var(--rust); }

.nav-actions{ display: flex; align-items: center; gap: clamp(6px, 1vw, 10px); flex-shrink: 0; }
.icon-btn{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--radius);
}
.nav-actions .btn{
  padding: clamp(9px, 1.2vw, 13px) clamp(12px, 1.8vw, 26px);
  font-size: clamp(0.7rem, 0.8vw, 0.82rem);
  white-space: nowrap;
}

.nav-toggle{
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span{
  width: 22px; height: 2px; background: var(--forest); display: block;
  transition: transform 0.3s ease, opacity 0.2s ease, background 0.2s ease;
}
/* Morphs the three bars into an X once the menu is open */
.nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity: 0; }
.nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.nav-toggle.active span{ background: var(--rust); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 20%, var(--gold-soft) 0%, transparent 45%),
    radial-gradient(circle at 5% 90%, var(--forest-light) 0%, transparent 40%);
  opacity: 0.25;
  pointer-events: none;
}
.hero-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1{ margin-bottom: 22px; }
.hero .lede{ font-size: 1.15rem; max-width: 46ch; }
.hero-cta{ display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.motto{
  margin-top: 34px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  color: var(--forest-light);
  font-size: 1.1rem;
}

.hero-visual{
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  background: linear-gradient(160deg, var(--forest) 0%, #0F2A1E 100%);
  overflow: hidden;
  display: flex; align-items: flex-end;
  box-shadow: var(--shadow-card);
}
.hero-visual .stripes{
  position: absolute; inset: 0; z-index: 0;
  background-image: repeating-linear-gradient(115deg, rgba(217,164,65,0.14) 0 2px, transparent 2px 34px);
}
.hero-visual .hero-photo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  display: none; /* shown once it loads successfully, see js/main.js */
}
/* Once a real photo is in place: hide the decorative stripes, show the
   photo, and add a scrim under the badge so the text stays readable
   against whatever the photo looks like there. */
.hero-visual.has-photo .stripes{ display: none; }
.hero-visual.has-photo .hero-photo{ display: block; }
.hero-visual.has-photo::after{
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,42,30,0) 45%, rgba(15,42,30,0.72) 100%);
  pointer-events: none;
}
.hero-visual .badge{
  position: relative; z-index: 2; margin: 26px;
  background: rgba(246,241,231,0.94);
  padding: 18px 20px;
  border-radius: var(--radius);
  width: calc(100% - 52px);
}
.hero-visual .badge .est{ font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--rust); text-transform: uppercase; }
.hero-visual .badge h3{ margin: 4px 0 0; color: var(--forest); }

/* Photo placeholder blocks: a clean, professional empty-state card until a
   real photo lands in /images with the matching filename (see main.js for
   the swap logic). The icon and caption make it obvious, right on the page,
   what photo is still needed there. */
.photo-slot{
  background: linear-gradient(165deg, var(--forest-light), var(--forest));
  border: 1px dashed rgba(244,238,224,0.3);
  border-radius: var(--radius);
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  min-height: 220px;
  overflow: hidden;
  text-align: center;
  padding: 24px;
}
.photo-slot::before{
  content: "";
  width: 34px; height: 34px;
  background-color: rgba(244,238,224,0.55);
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMi41IiB5PSI0LjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxNSIgcng9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42Ii8+PGNpcmNsZSBjeD0iOCIgY3k9IjkiIHI9IjEuNiIvPjxwYXRoIGQ9Ik00LjUgMTcgOSAxMS41bDMuMiAzLjhMMTYgMTFsMy41IDZINC41WiIvPjwvc3ZnPg==");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMi41IiB5PSI0LjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxNSIgcng9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42Ii8+PGNpcmNsZSBjeD0iOCIgY3k9IjkiIHI9IjEuNiIvPjxwYXRoIGQ9Ik00LjUgMTcgOSAxMS41bDMuMiAzLjhMMTYgMTFsMy41IDZINC41WiIvPjwvc3ZnPg==");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}
.photo-slot .cap{
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--cream);
  background: none;
  padding: 0;
  margin: 0;
  max-width: 90%;
  line-height: 1.5;
}
.photo-slot.missing .cap::before{
  content: "Photo needed: ";
  color: var(--gold-soft);
  font-weight: 600;
}
.photo-slot img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0; /* kept in layout (not display:none) so loading="lazy" can
                 still detect viewport intersection and actually fetch the
                 image; shown once it loads successfully, see js/main.js */
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
/* A gentle zoom on hover once a real photo is in place */
.photo-slot.has-photo:hover img{ transform: scale(1.05); }
.photo-slot.has-photo img{ opacity: 1; pointer-events: auto; }
.photo-slot.has-photo::before{ display: none; }
.photo-slot.has-photo{ background: var(--forest); border: none; }
.photo-slot.has-photo .cap{
  position: absolute; left: 0; bottom: 0; z-index: 1;
  text-align: left; max-width: calc(100% - 24px);
  background: rgba(20,33,25,0.55);
  padding: 8px 12px;
  margin: 12px;
  border-radius: 3px;
}

/* ==========================================================================
   Ledger stat band, the signature element, styled like a school register
   ========================================================================== */
.ledger{
  background: var(--forest);
  color: var(--cream);
  padding: 30px 0;
}
.ledger-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ledger-item{
  padding: 0 24px;
  border-left: 1px solid rgba(246,241,231,0.18);
}
.ledger-item:first-child{ border-left: none; }
.ledger-item .num{
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold-soft);
  display: block;
}
.ledger-item .label{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(246,241,231,0.72);
}

/* ==========================================================================
   Sections / cards / entries
   ========================================================================== */
section{ padding: 84px 0; }
.section-head{ max-width: 640px; margin-bottom: 50px; }
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }

.cornerstones{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cornerstone-card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cornerstone-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.cornerstone-card .mark{
  font-family: var(--font-mono); color: var(--rust); font-size: 0.75rem;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; display: block;
}

/* Registry entries: used for the activities log, numbered like alumni cohort entries */
.registry{ border-top: 1px solid var(--line); }
.entry{
  display: grid;
  grid-template-columns: 90px 1.1fr 1.4fr;
  gap: 28px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.entry .tag{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--rust);
  letter-spacing: 0.06em;
  padding-top: 4px;
}
.entry h3{ margin-bottom: 10px; }
.entry .meta{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--forest-light);
  display: inline-block;
  margin-bottom: 12px;
  background: #E9E2CE;
  padding: 4px 10px;
  border-radius: 3px;
}
.entry .photo-slot{
  aspect-ratio: 1 / 1;
  min-height: 320px;
  max-width: 520px;
  margin-left: auto;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(22,59,43,0.16);
}

/* Cards grid (partnerships, sponsorship tiers) */
.cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.card{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-card); }
.card .num{ font-family: var(--font-mono); color: var(--gold); font-size: 0.8rem; }

/* Donate tiers */
.tier{
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; background: var(--paper);
  cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  /* Without this, a grid track won't shrink below the tier's min-content
     width, so 4 tiers can force the grid (and the 480px-wide form-panel
     around it) wider than the page. min-width: 0 lets the track, and this
     tier, actually respect the column width the grid gives it. */
  min-width: 0;
}
.tier:hover{ transform: translateY(-3px); }
.tier.selected{ border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); }
.tier .amt{
  font-family: var(--font-display); font-size: 2rem; color: var(--forest);
  white-space: nowrap;
}

/* Shared form styling, reused across the login, donate, and contact pages */
.form-panel{
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px; max-width: 480px; margin: 0 auto;
  /* Belt-and-braces: nothing inside a form panel (long select text, the
     Turnstile iframe, an unbroken email address) should be able to push
     the panel itself wider than its container. */
  width: 100%; overflow: hidden;
}
.field{ margin-bottom: 18px; }
.field label{
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 8px;
}
.field input, .field select, .field textarea{
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--cream); font-family: var(--font-body);
  font-size: 0.95rem; color: var(--ink); transition: border-color 0.2s ease;
}
/* Only ever resize vertically, so a dragged message box can't stretch
   past the edge of the form and throw the layout off */
.field textarea{ resize: vertical; max-width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none; border-color: var(--rust);
}
.form-msg{ font-family: var(--font-mono); font-size: 0.78rem; margin-top: 14px; min-height: 1.2em; }
.form-msg.ok{ color: var(--forest); }
.form-msg.err{ color: var(--rust); }
.form-switch{ text-align: center; margin-top: 18px; font-size: 0.88rem; }
.form-switch a{ color: var(--rust); text-decoration: underline; }

/* Footer: dark forest band with the site links and closing credit line */
.site-footer{ background: #14211C; color: var(--cream); padding: 60px 0 30px; }
.footer-grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h4{ color: var(--gold-soft); font-size: 1rem; }
.footer-grid a, .footer-grid p{ color: rgba(246,241,231,0.7); font-size: 0.92rem; }
.footer-grid li{ margin-bottom: 8px; }
.footer-grid a:hover{ color: var(--gold-soft); }

/* Hides the icon sprite's <symbol> definitions without hiding what they're
   reused into elsewhere via <use> (display:none would hide those too in Safari) */
.svg-sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

/* Row of round social-icon buttons in the footer's Connect column */
.social-row{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.social-row li{ margin-bottom: 0; }
.social-row a{
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(244,238,224,0.25);
  color: rgba(246,241,231,0.75);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.social-row a:hover{ border-color: var(--gold-soft); color: var(--gold-soft); }
.social-icon{ width: 17px; height: 17px; fill: none; }

/* Small inline glyphs next to plain text, e.g. the location/school lines on the Contact page */
.icon-inline{ width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 6px; color: var(--rust); }

/* Screen-reader-only text: kept in the accessibility tree, invisible on screen.
   Used to label icon-only buttons (like the social row above) with real words. */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.footer-bottom{
  border-top: 1px solid rgba(246,241,231,0.15);
  margin-top: 46px; padding-top: 22px;
  font-family: var(--font-mono); font-size: 0.72rem; color: rgba(246,241,231,0.55);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}

/* Utility ------------------------------------------------------------------ */
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.center{ text-align: center; }
.mt-lg{ margin-top: 60px; }
[data-animate]{ opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-animate].in{ opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Nav: once the viewport is narrower than the container, trim the brand
   subtitle first, since it's the single biggest chunk of unnecessary width. */
@media (max-width: 1180px){
  .brand small{ display: none; }
}

/* Nav: below this, the buttons drop their "Member" label so Login + Donate
   stay compact next to the link row. */
@media (max-width: 960px){
  .nav-actions .btn-ghost span.label{ display: none; }
  .nav-actions .btn-ghost{ padding-left: clamp(10px, 1.6vw, 16px); padding-right: clamp(10px, 1.6vw, 16px); }
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ aspect-ratio: 16/9; }
  .hero-visual .stripes{ background-image: repeating-linear-gradient(115deg, rgba(217,164,65,0.14) 0 2px, transparent 2px 22px); }
  .cornerstones{ grid-template-columns: 1fr; }
  .ledger-row{ grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .ledger-item:nth-child(3){ border-left: none; }
  .entry{ grid-template-columns: 1fr; gap: 14px; }
  .entry .photo-slot{ order: -1; max-width: 400px; margin: 0 auto; }
  .two-col{ grid-template-columns: 1fr; gap: 30px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 840px){
  .nav{ justify-content: flex-start; }
  .brand{ margin-right: auto; }
  .nav-toggle{ display: flex; }
  /* Menu panel: stays in the layout at all times, but animates its own
     height and fade so opening/closing feels like a slide rather than a
     hard cut */
  .nav-links{
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex;
    background: var(--paper);
    flex-direction: column; align-items: stretch;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-card);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
  }
  .nav-links.open{
    max-height: 480px;
    opacity: 1;
    padding: 10px 20px 20px;
    pointer-events: auto;
  }
  .nav-links a{ font-size: 0.82rem; padding: 13px 6px; border-bottom: 1px solid var(--line); }
  .nav-links a::after{ display: none; }
  /* Each link fades and slides in with a slight stagger once the menu opens */
  .nav-links li{
    opacity: 0; transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav-links.open li{ opacity: 1; transform: translateY(0); }
  .nav-links.open li:nth-child(1){ transition-delay: 0.04s; }
  .nav-links.open li:nth-child(2){ transition-delay: 0.08s; }
  .nav-links.open li:nth-child(3){ transition-delay: 0.12s; }
  .nav-links.open li:nth-child(4){ transition-delay: 0.16s; }
  .nav-links.open li:nth-child(5){ transition-delay: 0.20s; }
  .nav-links.open li:nth-child(6){ transition-delay: 0.24s; }
  .nav-actions .btn-ghost span.label{ display: none; }
  section{ padding: 56px 0; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; }
}

@media (max-width: 400px){
  .nav-actions .btn{ padding: 9px 12px; font-size: 0.68rem; }
  .site-header .brand-mark{ width: 40px; height: 40px; }
}

@media (max-width: 480px){
  .ledger-row{ grid-template-columns: 1fr; }
  .ledger-item{ border-left: none; border-top: 1px solid rgba(246,241,231,0.18); padding-top: 16px; }
  .ledger-item:first-child{ border-top: none; }
  .form-panel{ padding: 24px 18px; }
}

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

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--rust); outline-offset: 2px;
}

/* ==========================================================================
   Accessibility / new components
   ========================================================================== */
.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--forest); color: var(--cream);
  padding: 12px 20px; z-index: 1000;
  font-family: var(--font-mono); font-size: 0.8rem;
  border-radius: 0 0 4px 0;
}
.skip-link:focus{ left: 0; }

.password-field{ position: relative; }
.password-field input{ padding-right: 64px; }
.pw-toggle{
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  color: var(--rust); padding: 6px 10px;
}

.to-top{
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--forest); color: var(--cream);
  border: none; cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
  box-shadow: var(--shadow-card);
}
.to-top.visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top:hover{ background: var(--rust); }

/* max-width/overflow guard the form panel in case the Turnstile iframe
   (fixed-width unless data-size="flexible" is set, see the HTML) ever
   renders wider than a narrow phone screen can fit. */
.cf-turnstile{ margin: 4px 0; max-width: 100%; overflow: hidden; }

/* Utility classes (kept out of inline style="" attributes for a stricter CSP) */
.pt-0{ padding-top: 0; }
.pt-10{ padding-top: 10px; }
.pt-20{ padding-top: 20px; }
.pb-20{ padding-bottom: 20px; }
.pb-40{ padding-bottom: 40px; }
.mt-md{ margin-top: 26px; }
.mx-auto{ margin-left: auto; margin-right: auto; }
.measure-mx{ margin-left: auto; margin-right: auto; }
.italic{ font-style: italic; }
.link-rust{ color: var(--rust); }
.underline{ text-decoration: underline; }
.eyebrow-center{ justify-content: center; }
.h1-14{ max-width: 14ch; }
.h1-16{ max-width: 16ch; }
.h1-18{ max-width: 18ch; }
.ph-43{ aspect-ratio: 4/3; }
.section-paper{ background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-forest{ background: var(--forest); color: var(--cream); padding: 64px 0; }
.section-forest h2{ color: var(--cream); }
.section-forest .eyebrow{ color: var(--gold-soft); }
.footer-brand{ color: var(--cream); margin-bottom: 14px; }
/* minmax(0, 1fr), not plain 1fr: a bare 1fr still has an implicit min-width
   of "auto" (the content's min-content size), so 4 tiers full of padding
   could still force this grid past the form-panel's edge. The 0 floor is
   what actually lets the tracks shrink to fit the 480px-wide form-panel. */
.tiers-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tiers-grid .tier{ padding: 14px 6px; }
.tiers-grid .tier .amt{ font-size: 1.3rem; }
.icon-btn.active{ color: var(--rust); border-color: var(--rust); }
.center-cta{ justify-content: center; }

@media (max-width: 560px){
  .tiers-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tiers-grid .tier{ padding: 20px 10px; }
  .tiers-grid .tier .amt{ font-size: 1.6rem; }
  /* The hero photo/stripes box is shorter on phones (16/9, set above at
     900px) so the badge has less room to sit in. Shrink its padding and
     heading size to match, and thicken the scrim so the badge stays
     readable against a real photo even with less gradient height to work with. */
  .hero-visual{ aspect-ratio: 4/3; }
  .hero-visual .badge{ margin: 16px; padding: 14px 16px; }
  .hero-visual .badge h3{ font-size: 1.1rem; }
  .hero-visual.has-photo::after{ background: linear-gradient(180deg, rgba(15,42,30,0) 30%, rgba(15,42,30,0.78) 100%); }
}