/* ==========================================================================
   Liberated Prisoners, Inc. — "Restoration OS" visual system (v2050)
   Designed for: cinematic, high-craft, future-facing — and effortless for a
   senior to read and navigate (large type, huge targets, no hidden controls).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand */
  --gold:        #d8a94a;
  --gold-bright: #f0cd7c;
  --gold-pale:   #f7e6bb;
  --gold-deep:   #a97817;
  --cream:       #f4ecdd;
  --white:       #fffdf8;

  /* ground */
  --ink:      #06070b;
  --ink-2:    #0a0c12;
  --surface:  #101319;
  --surface-2:#151922;
  --muted:    #b9b0a0;

  /* lines + light */
  --hair:      rgba(216, 169, 74, 0.26);
  --hair-soft: rgba(244, 236, 221, 0.12);
  --glow:      rgba(216, 169, 74, 0.35);
  --ice:       #86b9d6;               /* used only in ambience + data marks */

  --shadow-1: 0 2px 10px rgba(0,0,0,.4);
  --shadow-2: 0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-3: 0 48px 120px -40px rgba(0,0,0,.95);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --page: 1220px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --speed: .5s;
}

/* Reader-controlled text size (persisted). Everything is in rem. */
html[data-textsize="large"]   { font-size: 112.5%; }
html[data-textsize="largest"] { font-size: 128%; }

/* Reader-controlled high contrast */
html[data-contrast="high"] {
  --ink: #000000;
  --ink-2: #000000;
  --surface: #0a0a0a;
  --surface-2: #101010;
  --cream: #ffffff;
  --muted: #e8e2d6;
  --gold: #ffcf6b;
  --gold-bright: #ffe4a3;
  --hair: rgba(255, 207, 107, .75);
  --hair-soft: rgba(255,255,255,.4);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 8.5rem; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.72;
  letter-spacing: .003em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--white);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.65rem, 6.2vw, 4.45rem); }
h2 { font-size: clamp(2rem, 3.9vw, 2.95rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.15em; max-width: 68ch; }

a { color: var(--gold-pale); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--white); }

strong { color: var(--white); }

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

::selection { background: var(--gold); color: #000; }

.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 4000;
  background: var(--gold); color: #000; font-weight: 700;
  padding: 1rem 1.5rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #000; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------- ambient layer */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5;
  will-change: transform;
}
.ambient .a1 {
  width: 46vw; height: 46vw; top: -12vw; right: -8vw;
  background: radial-gradient(circle, rgba(216,169,74,.5), transparent 66%);
  animation: drift1 26s var(--ease) infinite alternate;
}
.ambient .a2 {
  width: 40vw; height: 40vw; top: 42vh; left: -14vw;
  background: radial-gradient(circle, rgba(169,120,23,.42), transparent 68%);
  animation: drift2 32s var(--ease) infinite alternate;
}
.ambient .a3 {
  width: 34vw; height: 34vw; bottom: -10vw; right: 18vw;
  background: radial-gradient(circle, rgba(134,185,214,.16), transparent 70%);
  animation: drift3 38s var(--ease) infinite alternate;
}
.ambient::after {           /* fine film grain — reads as "printed", not cheap */
  content: ""; position: absolute; inset: 0; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
@keyframes drift1 { to { transform: translate3d(-7vw, 8vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(9vw, -7vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(-6vw, -6vh, 0) scale(1.2); } }

html[data-contrast="high"] .ambient { display: none; }

/* ------------------------------------------------------------- layout */
.shell { position: relative; z-index: 1; }

.wrap {
  width: min(var(--page), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.wrap-narrow { width: min(880px, 100% - (var(--gutter) * 2)); margin-inline: auto; }

section.band { padding-block: clamp(3.4rem, 6.4vw, 5.8rem); position: relative; }
section.band-tight { padding-block: clamp(2.4rem, 4.4vw, 3.8rem); }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--hair), transparent);
}

/* ---------------------------------------------------------- utility bar */
.utility {
  position: relative; z-index: 60;
  background: #000;
  border-bottom: 1px solid var(--hair-soft);
  font-size: .95rem;
}
.utility .wrap {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  align-items: center; justify-content: space-between;
  padding-block: .5rem;
}
.utility-contact { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; align-items: center; }
.utility-contact a, .utility-contact span {
  color: var(--cream); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 0; font-weight: 500;
}
.utility-contact a:hover { color: var(--gold-bright); text-decoration: underline; }
.utility-contact .tag {
  color: var(--gold); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
}

/* reader controls — visible, labelled, never hidden behind an icon */
.reader-tools { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.reader-tools .rt-label {
  color: var(--muted); font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
}
.rt-group { display: inline-flex; border: 1px solid var(--hair); border-radius: 999px; overflow: hidden; }
.rt-btn {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--cream); font-family: var(--font-body); font-weight: 600;
  padding: .45rem .85rem; min-height: 40px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.rt-btn + .rt-btn { border-left: 1px solid var(--hair); }
.rt-btn:hover { background: rgba(216,169,74,.16); }
.rt-btn[aria-pressed="true"], .rt-btn[aria-checked="true"] { background: var(--gold); color: #000; }
.rt-btn.s1 { font-size: .85rem; }
.rt-btn.s2 { font-size: 1.02rem; }
.rt-btn.s3 { font-size: 1.2rem; }

/* --------------------------------------------------------------- header */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 7, 11, .82);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--hair);
  box-shadow: 0 18px 44px -30px rgba(0,0,0,1);
}
html[data-contrast="high"] .masthead { background: #000; backdrop-filter: none; }

.masthead .wrap {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  padding-block: .7rem;
}

.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: 0 0 auto; }
/* Crisp flat mark — it needs presence, not the heavy bloom the glowing
   lockup carried. A soft halo keeps it sitting in the same light. */
.brand img { width: 92px; height: 58px; object-fit: contain; filter: drop-shadow(0 2px 12px rgba(216,169,74,.34)); }
.brand-text { display: grid; line-height: 1.12; }
.brand-text b {
  font-family: var(--font-display); color: var(--white);
  font-size: 1.12rem; letter-spacing: .01em; font-weight: 600; white-space: nowrap;
}
.brand-text span {
  color: var(--gold); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; font-weight: 700;
}

.mainnav { margin-left: auto; display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; justify-content: flex-end; }
.mainnav a {
  color: var(--cream); text-decoration: none; font-weight: 600; font-size: 1.02rem;
  padding: .8rem .82rem; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 48px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mainnav a:hover { background: rgba(216,169,74,.16); color: var(--white); }
.mainnav a[aria-current="page"] { color: #000; background: var(--gold); }

.btn-donate-nav {
  margin-left: .6rem;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #000 !important; font-weight: 800; border-radius: 999px;
  padding: .85rem 1.5rem !important; min-height: 52px;
  box-shadow: 0 12px 30px -12px var(--glow);
}
.btn-donate-nav:hover { background: linear-gradient(135deg, #fff0c8, var(--gold-bright)); }

.menu-btn {
  display: none; margin-left: auto;
  align-items: center; gap: .6rem;
  background: transparent; border: 1px solid var(--hair); color: var(--cream);
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  min-height: 54px; padding: 0 1.15rem; border-radius: 999px; cursor: pointer;
}
.menu-btn:hover { background: rgba(216,169,74,.16); }
.menu-btn .bars { display: grid; gap: 4px; }
.menu-btn .bars i { display: block; width: 20px; height: 2px; background: var(--gold); }

/* mobile drawer — full screen, giant rows */
.drawer {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(4,5,8,.97); backdrop-filter: blur(10px);
  overflow-y: auto; padding: 1.1rem var(--gutter) 3rem;
}
.drawer.is-open { display: block; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding-block: .4rem 1.2rem; }
.drawer-close {
  background: transparent; border: 1px solid var(--hair); color: var(--cream);
  border-radius: 999px; min-height: 54px; padding: 0 1.3rem; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
}
.drawer nav { display: grid; gap: .35rem; }
.drawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 66px; padding: 0 1.15rem;
  border: 1px solid var(--hair-soft); border-radius: var(--r-md);
  background: rgba(255,255,255,.03);
  color: var(--white); text-decoration: none; font-size: 1.22rem; font-weight: 600;
}
.drawer nav a[aria-current="page"] { border-color: var(--gold); background: rgba(216,169,74,.15); }
.drawer nav a::after { content: "›"; color: var(--gold); font-size: 1.7rem; line-height: 1; }
.drawer .drawer-cta { display: grid; gap: .7rem; margin-top: 1.3rem; }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 60px; padding: 0 1.9rem;
  font-family: var(--font-body); font-size: 1.08rem; font-weight: 700; letter-spacing: .01em;
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-gold {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: #100c02; box-shadow: 0 18px 40px -18px var(--glow), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover { color: #100c02; box-shadow: 0 22px 54px -18px var(--glow), inset 0 1px 0 rgba(255,255,255,.7); }

.btn-ghost {
  background: rgba(255,255,255,.04); color: var(--cream); border-color: var(--hair);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(216,169,74,.16); color: var(--white); border-color: var(--gold); }

.btn-block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }

/* -------------------------------------------------------------- eyebrows */
.eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--gold); font-size: .82rem; font-weight: 800;
  letter-spacing: .26em; text-transform: uppercase; margin: 0 0 1rem;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center::after {
  content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent);
}

.lede {
  font-size: clamp(1.16rem, 1.7vw, 1.4rem);
  line-height: 1.62; color: var(--cream); max-width: 62ch;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p { margin-inline: auto; }

/* ---------------------------------------------------------------- panels */
.panel {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(8px);
}
.panel::before {   /* gold hairline highlight along the top edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, var(--hair), transparent 45%, transparent 60%, rgba(216,169,74,.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.panel-solid { background: linear-gradient(160deg, var(--surface), var(--ink-2)); }
.panel-gold {
  background: linear-gradient(150deg, rgba(216,169,74,.16), rgba(216,169,74,.04));
  border-color: var(--hair);
}
html[data-contrast="high"] .panel { backdrop-filter: none; background: #0a0a0a; border-color: var(--hair); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; padding-block: clamp(3.2rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero-crest {
  width: clamp(200px, 25vw, 300px); margin-bottom: 1.5rem;
  filter: drop-shadow(0 10px 34px rgba(216,169,74,.34));
}
.hero h1 { margin-bottom: .5em; }
.hero h1 .shine {
  background: linear-gradient(100deg, var(--gold-pale) 0%, var(--gold-bright) 30%, #fff8e8 50%, var(--gold-bright) 70%, var(--gold-pale) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 220% 100%;
  animation: shine 9s linear infinite;
}
@keyframes shine { to { background-position: 220% 0; } }

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%; border-radius: var(--r-xl);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-3), 0 0 90px -30px var(--glow);
}
.hero-figure figcaption {
  position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%);
  background: rgba(6,7,11,.92); border: 1px solid var(--hair);
  border-radius: 999px; padding: .55rem 1.35rem;
  font-size: .88rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--gold); white-space: nowrap; backdrop-filter: blur(8px);
}

/* trust strip */
.trust {
  display: flex; flex-wrap: wrap; gap: .7rem 2.2rem; align-items: center;
  margin-top: 2.6rem; padding-top: 1.7rem; border-top: 1px solid var(--hair-soft);
}
.trust div { display: flex; align-items: center; gap: .65rem; color: var(--cream); font-weight: 500; }
.trust .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px rgba(216,169,74,.16); flex: 0 0 auto;
}

/* ------------------------------------------------------------ stat board */
.statboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat {
  position: relative; padding: 1.8rem 1.5rem; border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid var(--hair-soft); overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .75;
}
.stat b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.1rem, 3.6vw, 3rem); line-height: 1; color: var(--gold-pale);
  letter-spacing: -.02em; margin-bottom: .5rem;
}
.stat span { display: block; color: var(--cream); font-size: 1rem; line-height: 1.5; }
.stat small { display: block; color: var(--muted); font-size: .88rem; margin-top: .35rem; }

/* --------------------------------------------------------- program cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.four { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border: 1px solid var(--hair-soft);
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(216,169,74,.16), transparent 62%);
  transition: opacity .35s var(--ease); pointer-events: none;
}
.card:hover { transform: translateY(-5px); border-color: var(--hair); box-shadow: var(--shadow-2); }
.card:hover::after { opacity: 1; }
.card h3 { font-size: clamp(1.55rem, 2.35vw, 1.95rem); margin-bottom: .5em; }
.card p { color: var(--cream); font-size: 1.15rem; line-height: 1.62; }
.card .card-link {
  margin-top: auto; padding-top: 1rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.08rem;
  color: var(--gold-pale); font-weight: 700; text-decoration: none; min-height: 44px;
}
.card .card-link::after { content: "→"; transition: transform .2s var(--ease); }
.card:hover .card-link { color: var(--white); text-decoration: underline; }
.card:hover .card-link::after { transform: translateX(4px); }

.tag {
  display: inline-block; align-self: flex-start; margin-bottom: 1rem;
  font-size: .86rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); background: rgba(216,169,74,.12);
  border: 1px solid var(--hair); border-radius: 999px; padding: .42rem .9rem;
}
.tag-num {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--gold-pale); display: block; line-height: 1; margin-bottom: .6rem; font-weight: 600;
}

/* ------------------------------------------------------------- pathway */
.pathway { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.pathway::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  opacity: .5;
}
.step { position: relative; text-align: center; padding-top: 0; }
.step .node {
  width: 68px; height: 68px; margin: 0 auto 1.15rem; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: radial-gradient(circle at 35% 30%, #1c2029, #07080c);
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 8px rgba(6,7,11,1), 0 0 34px -6px var(--glow);
  font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-pale); font-weight: 600;
}
.step h3 { font-size: 1.18rem; margin-bottom: .35em; }
.step p { font-size: 1rem; color: var(--muted); margin: 0 auto; max-width: 26ch; }

/* --------------------------------------------------------- feature split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: start; }
.split.middle { align-items: center; }
.split.reverse > *:first-child { order: 2; }
.split-media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--hair); box-shadow: var(--shadow-2); }

/* -------------------------------------------------------------- quote */
.quote-band {
  position: relative; text-align: center; overflow: hidden;
  border-radius: var(--r-xl); padding: clamp(2.6rem, 6vw, 5rem) clamp(1.4rem, 5vw, 4rem);
  background:
    radial-gradient(140% 120% at 50% -20%, rgba(216,169,74,.22), transparent 62%),
    linear-gradient(180deg, var(--surface), var(--ink-2));
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-3);
}
/* The arc crest is a wide lockup, so it needs more width than the old
   square mark to read at the same optical size. */
.quote-band .emblem { width: clamp(170px, 22vw, 280px); margin: 0 auto 1.6rem; opacity: .95; }
.quote-band blockquote {
  margin: 0 auto; max-width: 22ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.85rem, 4.4vw, 3.1rem); line-height: 1.16; color: var(--white);
  letter-spacing: -.02em;
}
.quote-band cite {
  display: block; margin-top: 1.6rem; font-style: normal;
  color: var(--gold); letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; font-weight: 700;
}
.scripture {
  text-align: center; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.72rem); line-height: 1.5; color: var(--gold-pale);
  max-width: 46ch; margin: 0 auto;
}
.scripture .ref {
  display: block; margin-top: .9rem; font-style: normal; font-family: var(--font-body);
  font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}

/* ------------------------------------------------------------- gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery button {
  position: relative; padding: 0; border: 1px solid var(--hair-soft); cursor: pointer;
  border-radius: var(--r-lg); overflow: hidden; background: var(--surface);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.gallery button.wide { grid-column: span 2; }
/* This gallery holds one wide tile (2 cols) plus one standard tile. On the
   default 4-column grid that left an empty fourth column, pushing the whole
   block visually left. Three columns fills the row exactly. */
.gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.gallery button:hover { transform: translateY(-4px); border-color: var(--gold); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery button.contain img { object-fit: contain; background: #08090c; padding: .5rem; }
.gallery .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.1rem .95rem;
  background: linear-gradient(180deg, transparent, rgba(3,4,6,.94));
  color: var(--white); font-weight: 700; font-size: 1.02rem; text-align: left;
  font-family: var(--font-body);
}

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  gap: 1rem; padding: 1.5rem; background: rgba(3,4,6,.96); backdrop-filter: blur(8px);
  grid-template-rows: 1fr auto auto;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1100px, 94vw);
  /* Leave room for the caption and controls, but let tall/square images fill
     far more of the screen than the old 68vh cap allowed. */
  max-height: min(78vh, 900px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r-md); border: 1px solid var(--hair);
}
.lightbox p { color: var(--cream); text-align: center; max-width: 60ch; margin: 0; }
.lightbox .lb-controls { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }

/* --------------------------------------------------------------- table */
.table-wrap { overflow-x: auto; border: 1px solid var(--hair-soft); border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th, td { text-align: left; padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--hair-soft); font-size: 1.02rem; }
thead th {
  background: rgba(216,169,74,.1); color: var(--gold-pale);
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgba(255,255,255,.03); }

/* ---------------------------------------------------------------- lists */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.checks li { position: relative; padding-left: 2.3rem; font-size: 1.05rem; }
.checks li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(216,169,74,.16); border: 1px solid var(--hair);
  color: var(--gold-bright); font-size: .9rem; font-weight: 700;
}
.numbered { list-style: none; counter-reset: n; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.numbered li { counter-increment: n; position: relative; padding-left: 3.4rem; font-size: 1.05rem; }
.numbered li::before {
  content: counter(n); position: absolute; left: 0; top: -2px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold); color: var(--gold-pale);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
}

/* -------------------------------------------------------------- people */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.person {
  display: grid; grid-template-columns: 190px 1fr; gap: 1.5rem; align-items: start;
  padding: clamp(1.3rem, 2vw, 1.8rem); border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border: 1px solid var(--hair-soft);
}
.person img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md);
  border: 1px solid var(--hair); box-shadow: var(--shadow-1);
}
.person .role {
  color: var(--gold); font-size: .78rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .45rem;
}
.person h3 { margin-bottom: .5rem; }
.person p { font-size: 1.01rem; color: var(--cream); }

/* --------------------------------------------------------------- forms */
.field { display: grid; gap: .5rem; margin-bottom: 1.3rem; }
.field label { font-weight: 700; color: var(--white); font-size: 1.05rem; }
.field .hint { color: var(--muted); font-size: .95rem; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.08rem; color: var(--white);
  background: rgba(0,0,0,.45); border: 1px solid var(--hair);
  border-radius: var(--r-sm); padding: .95rem 1.05rem; min-height: 58px;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--gold-bright); outline-offset: 2px; border-color: var(--gold);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.form-status { color: var(--gold-pale); font-weight: 600; min-height: 1.5em; }

/* --------------------------------------------------------------- CTA */
.cta {
  text-align: center; border-radius: var(--r-xl); position: relative; overflow: hidden;
  padding: clamp(2.6rem, 6vw, 4.6rem) clamp(1.4rem, 5vw, 3.5rem);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(216,169,74,.24), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--ink-2));
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-3);
}
.cta h2 { max-width: 20ch; margin-inline: auto; }
.cta p { margin-inline: auto; }
.cta .actions { justify-content: center; }

/* ------------------------------------------------------------- footer */
.site-footer {
  position: relative; z-index: 1; margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--hair); background: linear-gradient(180deg, var(--ink-2), #000);
  padding-block: clamp(3rem, 5vw, 4.5rem) 1.5rem;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.4rem; }
.site-footer h4 {
  color: var(--gold); font-family: var(--font-body); font-size: .82rem;
  letter-spacing: .2em; text-transform: uppercase; font-weight: 800; margin-bottom: 1.1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.footer-links a {
  color: var(--cream); text-decoration: none; display: inline-flex; align-items: center;
  min-height: 46px; font-size: 1.04rem;
}
.footer-links a:hover { color: var(--gold-bright); text-decoration: underline; }
.footer-brand img { width: 170px; margin-bottom: 1.1rem; }
.footer-brand p { color: var(--muted); }
.footer-contact a { display: block; color: var(--white); font-size: 1.12rem; font-weight: 600; min-height: 46px; }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.5rem; border-top: 1px solid var(--hair-soft);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  color: var(--muted); font-size: .95rem;
}

/* --------------------------------------------------- mobile action bar */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: none;
  gap: .6rem; padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(4,5,8,.96); border-top: 1px solid var(--hair); backdrop-filter: blur(12px);
}
.actionbar .btn { flex: 1; min-height: 58px; padding: 0 1rem; font-size: 1.05rem; }

/* ------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important; transition: none !important;
}
html[data-motion="off"] .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .mainnav a { padding: .8rem .6rem; font-size: .98rem; }
  .brand-text b { font-size: 1rem; }
}
/* When the reader enlarges text, switch to the big Menu button earlier so the
   navigation never overflows the screen. */
@media (max-width: 1320px) {
  html[data-textsize="large"] .mainnav { display: none; }
  html[data-textsize="large"] .menu-btn { display: inline-flex; }
}
@media (max-width: 1700px) {
  html[data-textsize="largest"] .mainnav { display: none; }
  html[data-textsize="largest"] .menu-btn { display: inline-flex; }
}

@media (max-width: 1040px) {
  .mainnav { display: none; }
  .menu-btn { display: inline-flex; }
  .statboard { grid-template-columns: repeat(2, 1fr); }
  .cards, .cards.four { grid-template-columns: repeat(2, 1fr); }
  .pathway { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .pathway::before { display: none; }
  .people { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .split, .split.reverse > *:first-child { grid-template-columns: 1fr; order: 0; }
  .gallery, .gallery.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .gallery button.wide { grid-column: span 2; }
  .actionbar { display: flex; }
  body { padding-bottom: 5.4rem; }
  .utility .wrap { justify-content: center; text-align: center; }
  .utility-contact { justify-content: center; }
}
@media (max-width: 620px) {
  .statboard, .cards, .cards.two, .cards.four, .pathway { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .person img { max-width: 220px; }
  .footer-grid { grid-template-columns: 1fr; }
  .gallery, .gallery.cols-3 { grid-template-columns: 1fr; }
  .gallery button.wide { grid-column: span 1; }
  .btn { width: 100%; }
  .actionbar .btn { width: auto; }
}

@media print {
  .ambient, .masthead, .utility, .actionbar, .drawer { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---- Florida Solicitation of Contributions disclosure (donate page) ---- */
.state-disclosure {
  max-width: 68ch;
  margin-inline: auto;
  margin-block: 40px 0;
  padding-top: 26px;
  border-top: 1px solid rgba(216, 169, 74, 0.28);
  text-align: center;
  display: flow-root;
}
.state-disclosure__id {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 auto 10px;
}
.state-disclosure__body {
  max-width: 60ch;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.75;
  letter-spacing: 0.03em;
  margin: 0 auto;
  text-wrap: balance;
}
.state-disclosure__body a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.state-disclosure__body a:hover { color: var(--gold-bright); }

/* ---------------- Ways to Give ---------------- */
.give-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.give-card {
  background: linear-gradient(180deg, var(--surface-2), var(--ink-2));
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.give-card--primary {
  border-color: rgba(216, 169, 74, .5);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(216,169,74,.18), transparent 62%),
    linear-gradient(180deg, var(--surface-2), var(--ink-2));
}
.give-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.give-card h2 {
  font-size: 1.32rem; margin: 0;
  color: var(--white); font-family: var(--font-display); letter-spacing: normal;
}
.give-card p { color: var(--muted); font-size: .98rem; line-height: 1.65; margin: 0 0 16px; max-width: none; }
.give-card p strong { color: var(--cream); }
.give-card .btn-block { margin-top: auto; }
.give-badge, .give-tag {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.give-badge { background: var(--gold); color: #1a1206; }
.give-tag { border: 1px solid var(--hair); color: var(--gold); }
.give-handle {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--hair);
  border-radius: var(--r-md, 12px);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.give-handle__label {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; width: 100%;
}
.give-handle__value {
  color: var(--gold-bright); font-weight: 600; font-size: 1rem;
  word-break: break-word; flex: 1 1 auto; user-select: all;
  white-space: pre-line;   /* lets a postal address keep its line breaks */
  line-height: 1.5;
}
/* Postal address block — sized to be read and copied off the screen by
   someone writing an envelope by hand. */
.mail-address {
  display: block; font-style: normal;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.1rem;
  color: var(--gold-bright);
  font-size: 1.22rem; font-weight: 600; line-height: 1.62;
  letter-spacing: .01em;
  user-select: all;
}

.give-copy {
  border: 1px solid var(--hair); background: transparent; color: var(--gold);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font-family: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  min-height: 40px; flex: 0 0 auto;
}
.give-copy:hover { border-color: var(--gold); color: var(--gold-bright); }
.give-copy.is-copied { background: var(--gold); color: #1a1206; border-color: var(--gold); }
.give-card--unset .give-handle__value { color: var(--muted); font-weight: 400; font-style: italic; }
.give-card--unset { opacity: .72; }
.give-note { font-size: .82rem !important; color: var(--muted); margin: 10px 0 0 !important; }
.give-assure {
  margin-top: 34px; padding: 22px 24px;
  border: 1px solid var(--hair); border-radius: var(--r-xl);
  background: rgba(0,0,0,.28); text-align: center;
}
.give-assure p { color: var(--muted); margin: 0; font-size: .95rem; max-width: 70ch; margin-inline: auto; }
.give-assure strong { color: var(--cream); }
@media (max-width: 620px) {
  .give-methods { grid-template-columns: 1fr; }
  .give-card { padding: 24px 20px; }
}
/* The [hidden] attribute must beat component display rules. Without this an
   .btn keeps its display:flex and a hidden payment button still renders —
   a dead link on a donation page. */
[hidden] { display: none !important; }

/* Tetragrammaton in the masthead lockup, matching its place in the full logo. */
.brand-text .brand-heb {
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.1;
  letter-spacing: .08em;
  color: var(--gold, #d8a94a);
  margin-top: .1rem;
  justify-self: start;   /* dir="rtl" would otherwise flush it right */
  text-align: left;
}

/* The hero/quote emblems now carry the full portrait lockup, so cap their
   height instead of only their width or they dominate the section. */
.hero-crest { width: auto; max-width: min(300px, 60vw); max-height: 300px; }
.quote-band .emblem { width: auto; max-width: min(260px, 55vw); max-height: 280px; }


/* Hero with no side art: single column, centred. Mirrors .section-head.center. */
.hero-grid.hero-centered {
  grid-template-columns: 1fr;
  text-align: center;
}
.hero-grid.hero-centered .eyebrow { justify-content: center; }
.hero-grid.hero-centered .actions { justify-content: center; }
.hero-grid.hero-centered h1 { margin-inline: auto; max-width: 18ch; }
/* Copy in here is max-width capped, so it needs auto margins as well as
   text-align, or the box stays left and only its text centres. */
.hero-grid.hero-centered p { margin-inline: auto; }


/* ---------------------------------------------------------------------------
   Display options (reader controls)
   The text-size / contrast / motion controls used to sit open across the top
   of every page. They are now collapsed behind one labelled toggle so the
   utility bar stays quiet. The saved preferences are applied to <html> on load
   regardless of whether this panel is open, so nothing depends on it.
--------------------------------------------------------------------------- */
.reader-shell {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rt-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;            /* keep the senior-friendly target size */
  padding: .4rem .95rem;
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.rt-toggle:hover { background: rgba(216,169,74,.16); border-color: var(--gold); }
.rt-toggle[aria-expanded="true"] { background: var(--gold); border-color: var(--gold); color: #000; }
.rt-toggle-aa { font-size: 1.05rem; font-weight: 800; line-height: 1; }

/* When open the controls sit on their own line so they never crush the bar. */
.reader-shell .reader-tools { flex-basis: 100%; justify-content: flex-end; padding-block: .35rem; }

@media (max-width: 860px) {
  .reader-shell { justify-content: center; }
  .reader-shell .reader-tools { justify-content: center; }
}

/* Display options now live in the footer, not the top bar — a visitor should
   meet the mission first, not a settings panel. Left-aligned with the footer
   grid and above the copyright line, where accessibility controls are
   conventionally looked for. */
.footer-tools {
  margin-top: 2.4rem;
  display: flex;
  justify-content: flex-start;
}
.footer-tools .reader-shell { justify-content: flex-start; }
.footer-tools .reader-shell .reader-tools { justify-content: flex-start; }

@media (max-width: 860px) {
  .footer-tools,
  .footer-tools .reader-shell,
  .footer-tools .reader-shell .reader-tools { justify-content: center; }
}