/* Standalone homepage shell — width spec matches the site-wide bounded-frame
   convention established for /lit/ (--lit-clamp: 1130px, single frame element
   wrapping header+content+footer so every internal divider is scoped to
   content width, not full-bleed). Same 1130px value here, same principle,
   applied to the homepage's own header/footer instead of duplicating a
   second unrelated width system. */
:root{
  --home-clamp: 1130px;
  --home-text-width: 820px;  /* body-copy column width — header/footer now match this, not the full frame */
  --home-page-bg: #eceef1;
  --home-text: #222;
  --home-muted: #5a6772;
  --home-border: #d0d5db;
  --home-dark: #152536;
  --home-brand: #0d6efd;
}

body.home-page{
  margin: 0;
  background: var(--home-page-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--home-text);
}

.home-frame{
  max-width: var(--home-clamp);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 24px rgba(0,0,0,.05);
  padding-top: 14px; /* white space above the header — 7px, then another 7px added */
}

.home-inner{ max-width: var(--home-clamp); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* --- header/footer: constrained to the body-copy width, not the full frame ---
   (.citreg-wrap's own clamp lives in cr_fruit.css, the LimeSurvey theme file,
   which this standalone page never loads — so nothing upstream applies a
   max-width to it here at all. This rule is the only constraint it gets;
   margin:auto is required or the narrowed box stays left-anchored instead
   of centering — missed on the first pass, this is the fix). */
body.home-page .citreg-wrap{ max-width: var(--home-text-width); margin-left: auto; margin-right: auto; }

body.home-page footer.citreg-wrap{ text-align: right; }
body.home-page .citreg-footer-copy{
  font-size: .72rem;
  color: rgba(0,0,0,.6);
}

/* --- header: horizontal grid (logo | title | nav) ---
   The real site gets this from cr_fruit.css (flexbox) + Bootstrap utility
   classes (d-flex, flex-column, align-items-end, gap-2) in the markup —
   neither is loaded on this standalone page on purpose, so without this the
   header just stacks as plain block elements. Written here as plain CSS,
   no framework dependency, same visual result. */
body.home-page .citreg-header-row{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
body.home-page .citreg-header-logo{ flex: 0 0 auto; }
body.home-page .citreg-header-title{ flex: 1 1 auto; min-width: 180px; }
body.home-page .citreg-header-nav{ flex: 0 0 auto; margin-left: auto; }
body.home-page .citreg-nav-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Logo: sized to match the height of the title+tagline text block beside it
   (h2 line ~40px + tagline line ~18px + 2px margin-top ≈ 60px). Estimated
   from the CSS specs, not a measured render — flag if it needs nudging. */
body.home-page .citreg-logo-img{ height: 60px; width: auto; display: block; }

/* Tagline: slightly smaller than citreg.css's default clamp(16px,1.1vw,18px);
   only font-size is redeclared here, so color/margin-top still cascade from
   the original citreg.css rule unchanged (weight/color kept as requested). */
body.home-page .citreg-header-title .text-muted.small{ font-size: 14px; }

/* Home/Contact: plain text instead of link-blue+underline, smaller. */
body.home-page .citreg-nav-right a{
  text-decoration: none;
  color: var(--home-muted);
  font-size: .85rem;
}

/* --- copy typography --- */
.hp-copy{ max-width: var(--home-text-width); margin: 28px auto 8px; line-height: 1.6; }
/* All body paragraphs unified at 1.12rem (the lede's original size) — this
   also affects "Why it matters," not just the two you named; flagging that
   since it wasn't explicitly requested but follows from "same font size
   throughout." Say if that one should stay separate. */
.hp-copy p{ margin: 0 0 1rem; font-size: 1.12rem; }
.hp-copy__h3{ font-size: 1.1rem; font-weight: 700; color: var(--home-dark); margin: 1.6rem 0 .5rem; }
.hp-copy__ctas{ display:flex; gap:12px; flex-wrap:wrap; margin: 28px auto 40px; max-width: var(--home-text-width); }
.hp-copy__btn{ display:inline-block; padding:10px 18px; border-radius:5px; font-weight:600; text-decoration:none; font-size:.95rem; }
.hp-copy__btn--primary{ background: var(--home-brand); color:#fff; }
.hp-copy__btn--secondary{ background:#fff; color: var(--home-brand); border:1px solid var(--home-brand); }

/* --- Registry Entry / Literature Section gateway cards ---
   Images render uncropped at natural aspect ratio (no object-fit:cover);
   title/description/CTA sit outside and below the image cell, not
   overlaid. box-sizing:border-box on the image cell keeps its 1px border
   from pushing the rendered box past its column (same class of bug fixed
   below on .stats-band, at a much smaller scale here). */
.primary-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:var(--home-text-width); margin: 32px auto 0; align-items: start; }
@media (max-width: 780px){ .primary-row{ grid-template-columns:1fr; } }

.gateway-image-cell{ display:block; box-sizing:border-box; border:1px solid var(--home-border); border-radius:10px; overflow:hidden; background:#fff; }
.gateway-image-cell img{ display:block; width:100%; height:auto; }
.gateway-image-cell:hover{ border-color: var(--home-brand); }

.gateway-text{ margin-top: 10px; }
.gateway-text__title{ font-weight:700; color: var(--home-dark); font-size:1.15rem; margin-bottom:5px; }
.gateway-text__desc{ font-size:.9rem; color: var(--home-muted); line-height:1.45; margin-bottom:10px; }
.gateway-text__cta{ font-size:.9rem; font-weight:600; color: var(--home-brand); text-decoration:none; }

/* --- stats-band: illustrative survivor-count preview ---
   box-sizing:border-box is the fix, confirmed via the class-outline
   legend — default content-box meant max-width:820px only capped the
   content, with padding (40px) + border (2px) added on top, rendering
   ~42px wider than the intended column on both sides. */
.stats-band{ box-sizing:border-box; max-width:var(--home-text-width); margin: 32px auto 0; border:1px solid var(--home-border); border-radius:10px;
  background:#f9f9f9; padding:18px 20px; display:flex; gap:20px; align-items:center; }
@media (max-width:700px){ .stats-band{ flex-direction:column; } }
.stats-band img{ width: 400px; max-width:100%; border-radius:6px; flex-shrink:0; }
.stats-band__text{ font-size:.92rem; color: var(--home-muted); line-height:1.5; }
.stats-band__text strong{ color: var(--home-dark); display:block; font-size:1rem; margin-bottom:4px; }