/* Ugandan Children Hope Initiative
   One stylesheet, no build step, no framework. A board member can edit a page
   in a text editor and see the result. Everything below is deliberate. */

:root {
  --ink:        #1f2933;
  --ink-soft:   #52606d;
  --ink-faint:  #7b8794;
  --paper:      #fdfcf8;
  --paper-warm: #f6f1e6;
  --rule:       #e3ddd0;

  /* Earth and sun. Ugandan flag black/yellow/red, pulled toward warmth
     rather than used at full saturation, so it reads as hopeful not loud. */
  --clay:       #a8442a;
  --clay-dark:  #8a3520;
  --sun:        #e0a12b;
  --leaf:       #3d6b4a;

  /* The Catholic register. UCHI is a Catholic work: a priest chooses the
     students and The Catholic Foundation of Ohio holds the fund. Marian blue
     carries that without a single piece of clip-art piety. Used for the faith
     band and quiet rules, never for the giving call, which stays clay so the
     donate path is never competing with anything else on the page. */
  --marian:     #22406b;
  --marian-dk:  #172d4c;

  --measure: 34rem;
  --wide: 62rem;
  --sp: 1rem;
}

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

html { -webkit-text-size-adjust: 100%; }

/* Type roles: serif for headings, sans for running text. The reverse of what
   this file did originally. Serif headings are the church register and they are
   what the reference sites use; a serif body at this size just reads heavy. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap { width: min(var(--wide), calc(100% - 2.5rem)); margin-inline: auto; }
.narrow { max-width: var(--measure); }

h1, h2, h3, .pull, .stat-num {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  font-weight: 700;
}
h1, h2, h3 { line-height: 1.18; text-wrap: balance; margin: 0 0 0.6rem; }
h1 { font-size: clamp(2.1rem, 6vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.55rem, 3.8vw, 2.2rem); margin-top: 0; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--clay-dark); }
a:hover { color: var(--clay); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 3px; }

/* ---------- header ---------- */
.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
}
.head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.9rem 0; flex-wrap: wrap;
}
.brand {
  font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink); line-height: 1.25;
}
.brand span { display: block; font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.nav { display: flex; gap: 1.35rem; align-items: center; flex-wrap: wrap; }
.nav a {
  text-decoration: none; color: var(--ink-soft); font-size: 0.9rem;
  font-weight: 600; padding: 0.25rem 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--sun); }
.nav a[aria-current="page"] { color: var(--clay-dark); border-bottom-color: var(--clay); }

/* ---------- buttons ---------- */
/* Pill buttons. Both reference sites use them and they read as a warmer, more
   contemporary invitation than a square edge on a page asking for money. */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  font-size: 1rem; padding: 0.78rem 1.6rem; border-radius: 999px;
  border: 2px solid var(--clay-dark); transition: background-color .15s, color .15s;
}
.btn-primary { background: var(--clay-dark); color: #fff; }
.btn-primary:hover { background: var(--clay); color: #fff; }
.btn-ghost { background: transparent; color: var(--clay-dark); }
.btn-ghost:hover { background: var(--clay-dark); color: #fff; }
.btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(2rem, 5vw, 3rem); }
.hero .eyebrow {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 700; color: var(--clay-dark);
  margin-bottom: 0.7rem;
}
.hero .lede { font-size: 1.22rem; color: var(--ink-soft); max-width: var(--measure); }

/* The line from the bulletin. It carries the whole argument, so it gets room. */
.pull {
  border-left: 4px solid var(--sun);
  padding: 0.2rem 0 0.2rem 1.15rem;
  margin: 1.8rem 0;
  font-size: 1.3rem; line-height: 1.4; color: var(--ink);
}

/* ---------- sections ---------- */
section { padding: clamp(2.2rem, 5vw, 3.4rem) 0; }
.band { background: var(--paper-warm); border-block: 1px solid var(--rule); }
.eyebrow {
  display: block; font-size: 0.72rem; letter-spacing: 0.15em;
  text-transform: uppercase; font-weight: 700; color: var(--clay-dark);
  margin-bottom: 0.5rem;
}

/* ---------- numbers ---------- */
.stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: 1.5rem; }
.stat-num { font-size: 2.1rem; font-weight: 700; color: var(--clay-dark); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.35rem; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.6rem; }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 1.3rem; }
.card h3 { margin-bottom: 0.4rem; }
.card p:last-child { margin-bottom: 0; }

/* ---------- give ---------- */
.ways { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1.6rem; }
.way { background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 1.5rem; }
.way--lead { border-color: var(--clay); border-width: 2px; }
.way h3 { color: var(--clay-dark); }
.way .tag {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; background: var(--sun);
  color: #4a3305; padding: 0.2rem 0.55rem; border-radius: 3px; margin-bottom: 0.6rem;
}
.addr {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9rem; line-height: 1.5; background: var(--paper-warm);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.85rem 1rem; margin: 0.8rem 0;
}
.memo { color: var(--clay-dark); font-weight: 700; }

/* ---------- media ---------- */
.video { position: relative; padding-top: 56.25%; margin: 1.4rem 0; border-radius: 6px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
figure { margin: 0 0 1.4rem; }
img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
figcaption { font-size: 0.87rem; color: var(--ink-faint); margin-top: 0.5rem; }

/* ---------- update entries ---------- */
.entry { border-top: 1px solid var(--rule); padding: 1.6rem 0; }
.entry:first-of-type { border-top: none; padding-top: 0.6rem; }
.entry time { display: block; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.empty-note { background: var(--paper-warm); border: 1px dashed var(--rule); border-radius: 6px; padding: 1.4rem; color: var(--ink-soft); }

/* ---------- people ---------- */
.people { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.7rem; }
.people li { padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); }
.people li:last-child { border-bottom: none; }
.people strong { display: block; }
.people span { color: var(--ink-soft); font-size: 0.94rem; }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--rule); background: var(--paper-warm);
  padding: 2.2rem 0; margin-top: 2rem; font-size: 0.92rem; color: var(--ink-soft);
}
.foot-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.site-foot h3 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.site-foot a { color: var(--clay-dark); }
.fineprint { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 0.85rem; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Photographs, added 2026-09-09 when Fr. Adrian's pictures and the four
   student clips arrived. Until then every page was text only, which is why
   the site read as a document rather than as a ministry.
   ========================================================================== */

/* Full-bleed hero. The photograph is the argument; the words sit under it
   rather than on top of it, because text over a child's face is both harder
   to read and a worse thing to look at. */
.hero-photo {
  margin: 0;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
/* The crop is set from where the faces actually are, not by eye. In this
   photograph the faces span roughly 13% to 62% of the image height (the tallest
   girl's head is highest, the youngest child's chin is lowest). The visible
   window has to cover 8%-66% to leave headroom, which is 58% of the height, so
   the cap cannot go below about 36rem at desktop widths or somebody loses their
   face. If this photograph is ever replaced, re-measure before changing these
   two numbers. Below ~1000px the image is shorter than the cap and no crop
   happens at all. */
/* Height comes from an aspect ratio, never from vh. A vh cap silently tightens
   the crop on a short window and takes somebody's face off, which is exactly
   what happened on the first attempt.
   The ratio is derived, not chosen: faces span 13%-62% of this image's height,
   so the visible window must cover 8%-66%, which is 58% of it. The source is
   4:3, so the box must be at least 0.58 x 0.75 = 0.435 of its own width.
   16/7 gives 0.4375. Re-measure if the photograph is ever replaced. */
.hero-photo img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 0;
}
/* On a phone the whole photograph fits happily, so show all of it and crop
   nothing. 4/3 is the source ratio, so cover has nothing to cut. */
@media (max-width: 700px) {
  .hero-photo img { aspect-ratio: 4 / 3; }
}
.hero--stated { padding-top: clamp(1.8rem, 4vw, 2.6rem); }

/* The faith band. States plainly what UCHI is, once, in the Catholic register.
   Deep blue so it separates from the giving call without competing with it. */
.creed {
  background: var(--marian);
  color: #eef2f8;
  border-block: none;
}
.creed h2, .creed h3 { color: #fff; }
.creed .eyebrow { color: #a9c2e6; }
.creed a { color: #cfe0f7; }
.creed .lede { color: #dbe5f2; font-size: 1.2rem; }
.creed p:last-child { margin-bottom: 0; }

/* Scripture or a line from the bulletin. Restrained: one per page at most. */
.verse {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.45;
  font-style: italic;
  margin: 0 0 0.6rem;
}
.verse-src {
  display: block; font-style: normal; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #a9c2e6;
  margin-top: 0.7rem;
}

/* The four students. One card each, the child's own clip inside it.
   Clips are portrait phone video, so the frame is 9:16 and capped in height
   or a single card would run longer than the screen. */
.students {
  display: grid; gap: 1.6rem; margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.student {
  background: #fff; border: 1px solid var(--rule); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.student video {
  width: 100%; aspect-ratio: 9 / 16; max-height: 22rem;
  object-fit: cover; background: #1b1b1b; display: block;
}
.student-body { padding: 1rem 1.1rem 1.2rem; }
.student-body h3 { margin-bottom: 0.25rem; }
.student-body .meta {
  font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 0.5rem;
}
.student-body p { font-size: 0.96rem; margin-bottom: 0; color: var(--ink-soft); }

/* A photograph used inside the flow of a page rather than as a hero. */
.figure-wide img { width: 100%; border-radius: 10px; }

/* ---------- signup form ---------- */
.signup { display: grid; gap: 0.9rem; max-width: 26rem; margin-top: 1.2rem; }
.signup .field { display: flex; flex-direction: column; gap: 0.3rem; }
.signup label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.signup input {
  padding: 0.7rem 0.8rem; border: 1px solid var(--rule); border-radius: 6px;
  font: inherit; font-size: 1rem; background: #fff; color: var(--ink);
}
.signup input:focus-visible { border-color: var(--clay); }
.signup .btn { justify-self: start; cursor: pointer; }
.form-note { font-size: 0.87rem; color: var(--ink-soft); margin: 0; min-height: 1.2em; }
/* Honeypot. Off-screen rather than display:none, because some bots skip hidden inputs. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }