/* ==========================================================================
   japowellfoundation.org
   Static rebuild. Palette and typeface taken from the original site's
   Elementor kit (post-10.css): primary #181818, text #333333,
   accent #6B6AB1, secondary #6AA0B1, Lato.
   Lato is self-hosted below — no third-party font CDN.
   ========================================================================== */

/* ── Fonts (self-hosted, latin subset) ───────────────────────────────────── */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/lato-900.woff2') format('woff2');
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --primary:   #181818;
  --text:      #333333;
  /* The original site's link colour was #6B6AB1. That clears AA on white
     (4.86:1) but lands at 4.48:1 on the tinted band — just under the 4.5
     threshold, and links do appear inside tinted bands. Darkened a shade to
     pass on both grounds (5.89:1 white / 5.44:1 tint). Same hue family. */
  --accent:    #605CA4;
  --secondary: #6AA0B1;   /* decorative only — too light for body text */
  --secondary-ink: #456F7C; /* darkened secondary, for small caps text (5.5:1) */
  --tint:      #F4F6F7;
  --rule:      #E2E7E9;
  --measure:   40rem;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--text);
  font-family: var(--font);
  font-size: 1.125rem;      /* 18px — generous, per the design brief */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover, a:focus { color: var(--primary); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.band { padding-block: 4rem; }

.band--tint {
  background: var(--tint);
  border-block: 1px solid var(--rule);
}

.band--intro { padding-top: 2.5rem; }

.band--figure { padding-block: 3rem; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  padding: 3rem 1.5rem 2.5rem;
  border-bottom: 1px solid var(--rule);
}

.lockup {
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin-inline: auto;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3 {
  color: var(--primary);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 1rem;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2.5rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  margin-top: 2.5rem;
}

/* the NASA Glenn / Hall of Fame line sits directly under the About heading */
h3.subhead {
  margin-top: -0.25rem;
  margin-bottom: 1.5rem;
  color: var(--secondary-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
  line-height: 1.4;
}

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; color: var(--primary); }

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--secondary-ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lede { margin-top: 1.75rem; }
.lede p { font-size: 1.2rem; }

.lede-sm { font-size: 1.05rem; }

.tagline {
  color: var(--primary);
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 1.75rem;
}

ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}
li { margin-bottom: 0.6rem; }
/* markers are rendered glyphs, so they answer to text contrast, not decoration */
li::marker { color: var(--secondary-ink); }

/* ── Buttons (outlined — deliberately understated) ───────────────────────── */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.btn {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
/* :focus-visible, not :focus — otherwise a clicked or tapped button stays
   inverted until something else takes focus */
.btn:hover, .btn:focus-visible {
  background: var(--accent);
  color: #FFFFFF;
}

/* ── Founders' signatures ────────────────────────────────────────────────── */
/* italic is typographic here, so it lives in CSS rather than an <em> that would
   make screen readers announce three names as stress emphasis */
.signature {
  margin: 0;
  font-size: 1.05rem;
  font-style: italic;
}
/* NOT .signature:first-of-type — :first-of-type matches by element type, not by
   class, so it asked for "the first <p> among its siblings, which also has
   .signature". The first <p> here is "We are the family…", so it matched nothing
   and the gap above the daughters' names never rendered. */
p:not(.signature) + .signature { margin-top: 1.5rem; }

/* ── Photographs ─────────────────────────────────────────────────────────── */
.photo {
  width: 100%;
  margin-inline: auto;
}

/* The recovered portrait is only 500px wide. Capping it at its native size
   keeps it sharp instead of upscaling a small scan across the column. */
.photo--portrait {
  max-width: 500px;
  margin-block: 2rem;
}

/* sits inside a text section rather than in its own band */
.photo--inset {
  margin-block: 2rem 0.5rem;
}

/* ── Contact ─────────────────────────────────────────────────────────────── */
/* <address> italicises by default; this is a postal/contact block, not a quote */
.contact { font-style: normal; }
.contact p { margin: 0 0 0.35rem; }

.contact-line {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0;
  overflow-wrap: anywhere;   /* the address is ~270px in a 280px box at 320px wide */
}

.footnote {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.55;
  color: #5A5A5A;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem;
  text-align: center;
}
.site-footer p {
  margin: 0;
  font-size: 0.9rem;
  color: #5A5A5A;
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .band { padding-block: 3rem; }
  .site-header { padding: 2rem 1.25rem 1.75rem; }
  .wrap { padding-inline: 1.25rem; }
  .lede p { font-size: 1.1rem; }
  .actions { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; text-align: center; }
}

/* ── Print (families print these pages) ──────────────────────────────────── */
@media print {
  body { font-size: 11pt; color: #000; }
  .band, .band--tint { background: none; border: none; padding-block: 1rem; }
  /* .btn must be named here: `a {color:#000}` is specificity (0,0,1) and loses
     to `.btn {color: var(--accent)}` at (0,1,0), so the buttons printed purple */
  .btn { border: none; padding: 0; font-weight: 400; color: #000; }
  a { color: #000; text-decoration: none; }
  .actions a::after { content: ' (' attr(href) ')'; font-size: 9pt; word-break: break-all; }
  .wrap { max-width: none; }
}