/* Ohel Gershon — palette taken from the existing tent mark */
:root {
  --navy: #0F4C75;
  --navy-deep: #0A3A5C;
  --navy-900: #092F49;
  --blue: #2E86C1;          /* decoration only, never small text */
  --blue-text: #1A6394;     /* AA-safe accent for labels on light backgrounds */
  --blue-light: #5DADE2;    /* decoration only */
  --blue-on-navy: #8FCBEC; /* AA-safe accent for labels on navy */
  --blue-pale: #BBD7EA;
  --stone: #F6F2EA;
  --stone-2: #EDE6D9;
  --ink: #17202A;
  --ink-soft: #46586B;
  --white: #FFFFFF;
  --focus: #C8811C;

  --wrap: 1120px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(9,47,73,.08), 0 8px 28px rgba(9,47,73,.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font: 400 clamp(1.02rem, .96rem + .3vw, 1.15rem)/1.65 ui-serif, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .eyebrow, .btn, .brand, nav a {
  font-family: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.08; letter-spacing: -.02em; margin: .2em 0 .35em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -.015em; margin: .1em 0 .6em; max-width: 22ch; }
h3 { font-size: 1.16rem; line-height: 1.3; margin: 0 0 .4em; }

p { margin: 0 0 1.1em; }
a { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, 68ch); }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-text); margin: 0 0 .5em;
}

.lead { font-size: 1.14em; color: var(--ink-soft); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .8rem 1.1rem;
}
.skip:focus { left: .5rem; top: .5rem; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  background: rgba(246,242,234,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stone-2);
}
/* min-width:0 on every flex item in this row is load bearing. Without it the brand
   and the Menu button refuse to shrink below their content width, which makes the
   whole document wider than a phone viewport and pushes body copy off screen. */
.site-header > * { min-width: 0; }
.brand {
  display: flex; align-items: center; gap: .6rem; min-width: 0;
  text-decoration: none; color: var(--navy); margin-right: auto;
}
.brand img { flex: none; }
.brand span { min-width: 0; }
.brand strong { display: block; font-size: 1rem; letter-spacing: -.01em; }
.brand small {
  display: block; font-size: .74rem; color: var(--ink-soft); letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-toggle { flex: none; }

.site-header nav { display: flex; gap: .35rem; align-items: center; }
.site-header nav a {
  text-decoration: none; color: var(--navy);
  font-size: .88rem; font-weight: 600;
  padding: .5rem .7rem; border-radius: 6px;
}
.site-header nav a:hover { background: var(--stone-2); }
.site-header nav a.cta { background: var(--navy); color: #fff; }
.site-header nav a.cta:hover { background: var(--navy-deep); }

.nav-toggle { display: none; }

@media (max-width: 800px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--navy); color: #fff; border: 0;
    font-size: .85rem; font-weight: 600;
    padding: .55rem .85rem; border-radius: 6px; cursor: pointer;
  }
  .nav-toggle .bar {
    width: 16px; height: 2px; background: #fff;
    box-shadow: 0 5px 0 #fff, 0 -5px 0 #fff;
  }
  .site-header nav {
    display: none;
    position: absolute; inset: 100% .8rem auto .8rem;
    flex-direction: column; align-items: stretch;
    background: #fff; padding: .5rem;
    border: 1px solid var(--stone-2); border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: .75rem .8rem; }
}

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
  background: var(--navy);
  color: #fff;
}
.hero-media { position: relative; min-height: 60vh; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--navy) 99%);
}
.hero-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
.hero-body .eyebrow { color: var(--blue-on-navy); }
.hero-body .lead { color: #D9E7F1; }
.hero h1 { color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }

.btn {
  display: inline-block; text-decoration: none;
  font-size: .95rem; font-weight: 600;
  padding: .8rem 1.4rem; border-radius: 8px;
  border: 2px solid transparent;
}
.btn-primary { background: #fff; color: var(--navy); }
.btn-primary:hover { background: var(--blue-pale); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-secondary { background: var(--navy); color: #fff; }
.btn-secondary:hover { background: var(--navy-deep); }

.band .btn-primary { background: var(--navy); color: #fff; }
.band .btn-primary:hover { background: var(--navy-deep); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-media { min-height: 46vh; }
  .hero-media::after { background: linear-gradient(180deg, transparent 45%, var(--navy) 99%); }
}

/* ---------- bands ---------- */
.band { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.band.alt { background: var(--stone-2); }

.pull {
  font-size: 1.3em; line-height: 1.4; color: var(--navy);
  border-left: 4px solid var(--blue); padding-left: 1.1rem; margin: 1.6em 0;
}

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 2rem; }
.cols h3 { color: var(--navy); }
@media (max-width: 700px) { .cols { grid-template-columns: 1fr; } }

/* ---------- status ---------- */
.status-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin: 2rem 0;
}
.card {
  background: #fff; border-radius: var(--radius);
  padding: 1.3rem 1.3rem 1.4rem; box-shadow: var(--shadow);
  border-top: 4px solid var(--blue);
}
.card.not-yet { border-top-color: #B9A47C; background: #FBF8F1; }
.tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-text); margin: 0 0 .5em;
}
.card.not-yet .tag { color: #6F5A30; }
.card p:last-child { margin-bottom: 0; }

.figure { margin: 2.4rem 0 0; }
.figure img { border-radius: var(--radius); box-shadow: var(--shadow); max-height: 62vh; width: auto; }
.figure.wide img { max-height: 70vh; }
figcaption { font-size: .87rem; color: var(--ink-soft); margin-top: .6rem; font-style: italic; }

/* ---------- founder ---------- */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.2rem; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.haskamos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.haskamos img { border-radius: 6px; box-shadow: var(--shadow); background: #fff; }
.haskamos figcaption { font-style: normal; font-size: .82rem; }
@media (max-width: 520px) { .haskamos { grid-template-columns: 1fr; } }

/* ---------- stages ---------- */
.stages { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0; }
.stage {
  background: #fff; border-radius: var(--radius); padding: 1.6rem;
  box-shadow: var(--shadow); border-top: 4px solid var(--navy);
}
.stage.later { border-top-color: #B9A47C; background: #FBF8F1; }
.stage.later .tag { color: #6F5A30; }
.stage h3 { color: var(--navy); font-size: 1.3rem; }
@media (max-width: 760px) { .stages { grid-template-columns: 1fr; } }

.note {
  background: #FBF8F1; border: 1px solid #E2D6BC; border-left: 4px solid #B9A47C;
  border-radius: 6px; padding: 1rem 1.2rem; font-size: .95rem; color: #5C4F38;
}

/* ---------- support ---------- */
.support { background: var(--navy); color: #fff; }
.support h2, .support .eyebrow { color: #fff; }
.support .eyebrow { color: var(--blue-on-navy); }

.give-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 820px) { .give-grid { grid-template-columns: 1fr; } }

.give {
  background: #fff; color: var(--ink);
  border-radius: var(--radius); padding: 1.7rem;
}
.give h3 { color: var(--navy); font-size: 1.35rem; }
.give-note {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--blue-text); text-transform: uppercase; margin-bottom: 1em;
}
.important {
  background: var(--stone); border-left: 4px solid var(--blue);
  padding: .8rem 1rem; border-radius: 4px; font-size: .95rem;
}
.give .btn { margin-top: .4rem; }
.give details { margin-top: 1.2rem; font-size: .93rem; }
.give summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.give address { font-style: normal; margin-top: .7rem; line-height: 1.7; color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.contact-list a {
  display: inline-block; background: #fff; border: 1px solid var(--stone-2);
  border-radius: 8px; padding: .8rem 1.1rem; text-decoration: none;
  font-weight: 600; box-shadow: var(--shadow);
}
.contact-list a:hover { border-color: var(--blue); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: #C9DCE9; padding: 3rem 0 3.5rem; }
.site-footer .wrap { display: grid; gap: .5rem; justify-items: start; }
.site-footer strong { color: #fff; }
.site-footer .small { font-size: .84rem; line-height: 1.6; max-width: 70ch; color: #9FBACC; }
.site-footer a { color: #C9DCE9; }

/* ---------- dark theme ----------
   Applied when the visitor's system asks for dark, or when they choose it.
   An explicit choice always wins over the system preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #4E9BD1;
    --navy-deep: #6BAEDD;
    --navy-900: #E8F1F8;
    --blue-text: #7FC0EA;
    --blue-on-navy: #9FD0F0;
    --stone: #0E1620;
    --stone-2: #1B2734;
    --ink: #E6EDF3;
    --ink-soft: #A8BACB;
    --white: #16202B;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  --navy: #4E9BD1;
  --navy-deep: #6BAEDD;
  --navy-900: #E8F1F8;
  --blue-text: #7FC0EA;
  --blue-on-navy: #9FD0F0;
  --stone: #0E1620;
  --stone-2: #1B2734;
  --ink: #E6EDF3;
  --ink-soft: #A8BACB;
  --white: #16202B;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.45);
}

/* pieces that carry their own colour and must follow the theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: var(--stone); color: var(--ink); }
  :root:not([data-theme="light"]) .site-header { background: rgba(14,22,32,.94); border-bottom-color: var(--stone-2); }
  :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .place,
  :root:not([data-theme="light"]) .form-card, :root:not([data-theme="light"]) .month,
  :root:not([data-theme="light"]) .need, :root:not([data-theme="light"]) .how,
  :root:not([data-theme="light"]) .daily a { background: var(--white); border-color: var(--stone-2); }
  :root:not([data-theme="light"]) .band.alt { background: #131E29; }
  :root:not([data-theme="light"]) .site-header nav a.cta { background: var(--navy); color: #08131C; }
  :root:not([data-theme="light"]) .btn-primary { background: var(--navy); color: #08131C; }
  :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) textarea { background: #101A24; color: var(--ink); }
}
:root[data-theme="dark"] body { background: var(--stone); color: var(--ink); }
:root[data-theme="dark"] .site-header { background: rgba(14,22,32,.94); border-bottom-color: var(--stone-2); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .place,
:root[data-theme="dark"] .form-card, :root[data-theme="dark"] .month,
:root[data-theme="dark"] .need, :root[data-theme="dark"] .how,
:root[data-theme="dark"] .daily a { background: var(--white); border-color: var(--stone-2); }
:root[data-theme="dark"] .band.alt { background: #131E29; }
:root[data-theme="dark"] .site-header nav a.cta { background: var(--navy); color: #08131C; }
:root[data-theme="dark"] .btn-primary { background: var(--navy); color: #08131C; }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea { background: #101A24; color: var(--ink); }

/* the toggle itself */
.theme-toggle {
  position: fixed; top: .6rem; right: 6.6rem; z-index: 66;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(246,242,234,.92); border: 1px solid var(--stone-2); color: var(--navy);
}
:root[data-theme="dark"] .theme-toggle { background: rgba(27,39,52,.92); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle { background: rgba(27,39,52,.92); } }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .moon { display: block; }
}
@media (max-width: 700px) {
  .theme-toggle { top: auto; bottom: calc(.9rem + env(safe-area-inset-bottom)); right: 6.2rem; }
}

/* dark: sections that paint themselves navy need a dark surface, not the lightened token */
:root[data-theme="dark"] .hero-simple,
:root[data-theme="dark"] .hero { background: #0A1620; }
:root[data-theme="dark"] .hero-simple h1,
:root[data-theme="dark"] .hero h1 { color: var(--ink); }
:root[data-theme="dark"] .site-footer { background: #0A1620; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-simple,
  :root:not([data-theme="light"]) .hero { background: #0A1620; }
  :root:not([data-theme="light"]) .hero-simple h1,
  :root:not([data-theme="light"]) .hero h1 { color: var(--ink); }
  :root:not([data-theme="light"]) .site-footer { background: #0A1620; }
}
/* toggle sits clear of the nav */
.theme-toggle { right: auto; left: .8rem; top: auto; bottom: 3.6rem; }
@media (max-width: 700px) { .theme-toggle { left: .8rem; bottom: calc(3.4rem + env(safe-area-inset-bottom)); right: auto; } }

/* ---------- dark mode, second pass ----------
   Every surface that paints itself white must be listed, or its text disappears.
   Buttons keep a solid navy face in both themes so the brand never washes out. */
:root[data-theme="dark"] .stage,
:root[data-theme="dark"] .tiers,
:root[data-theme="dark"] .tier,
:root[data-theme="dark"] .give,
:root[data-theme="dark"] .quote,
:root[data-theme="dark"] .note,
:root[data-theme="dark"] .email,
:root[data-theme="dark"] .lines,
:root[data-theme="dark"] .intro,
:root[data-theme="dark"] .card.not-yet,
:root[data-theme="dark"] .site-header nav,
:root[data-theme="dark"] .plaque-panel {
  background: #16202B; border-color: #26364a; color: var(--ink);
}
:root[data-theme="dark"] .card.not-yet { border-top-color: #8A7A5A; }
:root[data-theme="dark"] .stage p,
:root[data-theme="dark"] .give p,
:root[data-theme="dark"] .card p,
:root[data-theme="dark"] .tiers-head p,
:root[data-theme="dark"] .note,
:root[data-theme="dark"] .intro p { color: var(--ink); }
:root[data-theme="dark"] .tier b { color: var(--ink); }
:root[data-theme="dark"] .tier span,
:root[data-theme="dark"] .tier-note { color: var(--ink-soft); }
:root[data-theme="dark"] .tier { border-color: #2C3E52; }
:root[data-theme="dark"] .tier:hover { background: #1D2A38; border-color: var(--navy); }
:root[data-theme="dark"] .figure figcaption,
:root[data-theme="dark"] .cap { color: var(--ink-soft); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage,
  :root:not([data-theme="light"]) .tiers,
  :root:not([data-theme="light"]) .tier,
  :root:not([data-theme="light"]) .give,
  :root:not([data-theme="light"]) .quote,
  :root:not([data-theme="light"]) .note,
  :root:not([data-theme="light"]) .intro,
  :root:not([data-theme="light"]) .card.not-yet,
  :root:not([data-theme="light"]) .site-header nav,
  :root:not([data-theme="light"]) .plaque-panel {
    background: #16202B; border-color: #26364a; color: var(--ink);
  }
  :root:not([data-theme="light"]) .stage p,
  :root:not([data-theme="light"]) .give p,
  :root:not([data-theme="light"]) .card p,
  :root:not([data-theme="light"]) .tiers-head p,
  :root:not([data-theme="light"]) .intro p { color: var(--ink); }
  :root:not([data-theme="light"]) .tier b { color: var(--ink); }
  :root:not([data-theme="light"]) .tier span,
  :root:not([data-theme="light"]) .tier-note { color: var(--ink-soft); }
  :root:not([data-theme="light"]) .tier { border-color: #2C3E52; }
  :root:not([data-theme="light"]) .figure figcaption,
  :root:not([data-theme="light"]) .cap { color: var(--ink-soft); }
}

/* Buttons: one brand navy, white text, in every theme. No washed-out blue. */
.btn-primary, .band .btn-primary, .btn-secondary,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .band .btn-primary,
:root[data-theme="dark"] .btn-secondary {
  background: #0F4C75 !important; color: #FFFFFF !important; border-color: #0F4C75 !important;
}
.btn-primary:hover, .band .btn-primary:hover, .btn-secondary:hover {
  background: #0A3A5C !important;
}
.hero .btn-primary, .hero-simple .btn-primary { background: #FFFFFF !important; color: #0F4C75 !important; }
.site-header nav a.cta,
:root[data-theme="dark"] .site-header nav a.cta {
  background: #0F4C75 !important; color: #FFFFFF !important;
}

/* Fewer colours: the not-yet card uses the same surface as the rest, only its label differs. */
.card.not-yet { background: #fff; border-top-color: #C2AD8B; }
:root[data-theme="dark"] .card.not-yet { background: #16202B; }

/* The floating plaque placeholder is removed entirely. */
.plaque { display: none !important; }

/* Portrait photographs in a two-column row must be capped, or they dominate the page. */
.cols .figure img { max-height: 34rem; width: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 10px; }
.figure img { border-radius: 10px; }
@media (max-width: 700px) { .cols .figure img { max-height: 22rem; } }