/* ============================================================
   Monumental Honor — design prototype
   System: "the archive" — paper, ink, medal-ribbon blue
   Type:  Anton (display) · Barlow Condensed (labels)
          Libre Caslon Text (narrative) · Courier Prime (records)
   ============================================================ */

:root {
  --paper:       #F4EFE3;
  --paper-card:  #FBF8EE;
  --ink:         #17150F;
  --ink-soft:    #57523F;
  --ribbon:      #8FB3DC;   /* the Medal's ribbon blue */
  --ribbon-wash: #DEE9F4;
  --blue-deep:   #24487A;   /* ribbon blue, deepened for text/UI */
  --rule:        #D9D2BC;
  --rule-dark:   #B8B098;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Libre Caslon Text", Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* ---------- type utilities ---------- */

.display {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: 0.005em;
}

.label {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
}

.mono {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

.eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: var(--blue-deep);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-dark);
}

/* ---------- ribbon band ---------- */

.ribbon-band {
  background: var(--ribbon);
  color: #fff;
  text-align: center;
  font-size: 9px;
  letter-spacing: 1.6em;
  padding: 4px 0 3px 1.6em;
  user-select: none;
  line-height: 1;
}

/* ---------- header ---------- */

header.site {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.site-logo img { height: 30px; width: auto; }
nav.primary { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
nav.primary a {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
}
nav.primary a:hover { color: var(--blue-deep); }

.btn {
  display: inline-block;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.62rem 1.5rem;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.btn.solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- layout ---------- */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
section.block { padding: 5.5rem 0; }
section.block + section.block { border-top: 1px solid var(--rule); }

.stars-divider {
  text-align: center;
  color: var(--blue-deep);
  letter-spacing: 1.2em;
  padding-left: 1.2em;
  font-size: 0.8rem;
}

/* ---------- hero ---------- */

.hero { padding: 6rem 0 5.5rem; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: center;
}
.hero h1 {
  font-size: clamp(3rem, 7vw, 5.8rem);
  margin: 0.6rem 0 1.6rem;
}
.hero h1 .blue { color: var(--blue-deep); }
.hero .lede {
  font-size: 1.18rem;
  max-width: 34em;
  margin-bottom: 2.2rem;
  color: var(--ink-soft);
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

.figure { position: relative; }
.figure img { border: 1px solid var(--ink); width: 100%; }
.figure figcaption {
  font-family: "Courier Prime", monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  padding-top: 0.55rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* No known likeness. Mifflin gets a deliberate typographic panel rather than a
   grey placeholder, sized to sit where a portrait would. */
.figure .no-photo {
  border: 1px solid var(--ink);
  background: var(--blue-deep);
  color: var(--ribbon-wash);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  text-align: center;
  padding: 2rem;
}
.figure .no-photo .star { font-size: 3.5rem; color: var(--ribbon); line-height: 1; }
.figure .no-photo p {
  font-family: "Courier Prime", monospace;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
}

/* ---------- the nine ---------- */

.section-head { max-width: 46em; margin-bottom: 3rem; }
.section-head h1,
.section-head h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 1.5rem; }
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }
.section-head p + p { margin-top: 0.9rem; }

.nine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.recipient-card {
  background: var(--paper-card);
  border: 1px solid var(--ink);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.recipient-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 4px 4px 0 var(--blue-deep);
  color: var(--ink);
}
.recipient-card .portrait {
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: var(--ribbon-wash);
}
.recipient-card .portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.recipient-card .meta { padding: 0.9rem 1rem 1rem; }
.recipient-card .num {
  font-family: "Courier Prime", monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 0.25rem;
}
.recipient-card h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.28rem;
  line-height: 1.1;
}
.recipient-card .conflict {
  font-family: "Courier Prime", monospace;
  font-size: 0.78rem;
  color: var(--blue-deep);
  margin-top: 0.3rem;
}

/* Mifflin — no photograph survives */
.recipient-card .portrait.no-photo {
  background: var(--blue-deep);
  color: var(--ribbon-wash);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 1.5rem;
}
.recipient-card .portrait.no-photo .star { font-size: 3rem; color: var(--ribbon); }
.recipient-card .portrait.no-photo p {
  font-family: "Courier Prime", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ---------- mission pillars ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.pillar { border-top: 3px solid var(--ink); padding-top: 1.3rem; }
.pillar .num { color: var(--blue-deep); }
.pillar h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0.4rem 0 0.8rem;
  letter-spacing: 0.01em;
}
.pillar p { font-size: 0.98rem; color: var(--ink-soft); }

/* ---------- monument ---------- */

.monument { background: var(--ribbon-wash); }
.monument-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 4rem;
  align-items: center;
}
.monument h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.2rem; }
.monument p { color: var(--ink-soft); margin-bottom: 2rem; }
.stamp {
  display: inline-block;
  font-family: "Courier Prime", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border: 1.5px solid var(--blue-deep);
  padding: 0.35rem 0.7rem;
  background: rgba(255,255,255,0.5);
}

/* ---------- impact ledger ---------- */

.ledger { border-top: 2px solid var(--ink); }
.ledger-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule-dark);
}
.ledger-row .value {
  font-family: "Anton", sans-serif;
  font-size: 2.4rem;
  text-transform: uppercase;
  color: var(--blue-deep);
  line-height: 1;
}
.ledger-row .desc { font-size: 1rem; color: var(--ink-soft); }

/* ---------- help doors ---------- */

.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.door {
  border: 1px solid var(--ink);
  background: var(--paper-card);
  padding: 2rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.door h3 {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.4rem;
}
.door p { font-size: 0.95rem; color: var(--ink-soft); flex: 1; }
.door .btn { align-self: flex-start; }

/* ---------- trust ---------- */

.trust {
  text-align: center;
  color: var(--ink-soft);
}
.trust .partners {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.9rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
  margin: 1.4rem 0;
}

/* ---------- footer ---------- */

footer.site {
  background: var(--ink);
  color: var(--paper);
  margin-top: 0;
  border-top: 6px solid var(--blue-deep);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 2.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #3A362A;
}
.footer-grid img { height: 26px; width: auto; margin-bottom: 1.2rem; }
footer.site .label { color: var(--ribbon); margin-bottom: 0.9rem; display: block; }
footer.site p, footer.site a { font-size: 0.92rem; color: #CFC9B4; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: #fff; }
footer.site ul { list-style: none; }
footer.site li { margin-bottom: 0.45rem; }
.newsletter-form { display: flex; margin-top: 0.6rem; }
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: 1px solid #57523F;
  border-right: none;
  color: var(--paper);
  padding: 0.55rem 0.8rem;
  font-family: "Courier Prime", monospace;
  font-size: 0.85rem;
}
.newsletter-form button {
  background: var(--blue-deep);
  color: #fff;
  border: 1px solid var(--blue-deep);
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0 1.2rem;
  cursor: pointer;
}
.footer-legal {
  padding-top: 1.8rem;
  font-family: "Courier Prime", monospace;
  font-size: 0.75rem;
  color: #8A8471;
  line-height: 1.7;
}

/* ============================================================
   Recipient page
   ============================================================ */

.recip-header { padding: 4.5rem 0 4rem; }
.recip-breadcrumb {
  font-family: "Courier Prime", monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}
.recip-breadcrumb a { color: var(--blue-deep); }
.recip-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 4.5rem;
  align-items: start;
}
.recip-header h1 { font-size: clamp(2.8rem, 6vw, 5rem); margin: 0.5rem 0 1rem; }
.recip-rank {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 30em;
  line-height: 1.45;
  margin-bottom: 0.4rem;
}
.recip-action {
  font-family: "Courier Prime", monospace;
  font-size: 0.9rem;
  color: var(--blue-deep);
  margin-bottom: 2.4rem;
}

.vitals { border-top: 2px solid var(--ink); margin-top: 2.4rem; }
.vitals-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule-dark);
  font-family: "Courier Prime", monospace;
  font-size: 0.85rem;
}
.vitals-row dt { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }

.recip-body { max-width: 44em; padding-bottom: 2rem; }
.recip-body h2 { font-size: 2rem; margin: 3.2rem 0 1.2rem; }
.recip-body p { margin-bottom: 1.3rem; }
.recip-body .eyebrow + p::first-letter {
  font-family: "Anton", sans-serif;
  font-size: 3.6em;
  float: left;
  line-height: 0.85;
  padding: 0.04em 0.12em 0 0;
  color: var(--blue-deep);
}

/* citation document */
.citation {
  background: var(--paper-card);
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  padding: 3rem 3.2rem 2.6rem;
  margin: 3.5rem 0;
}
.citation .cite-head {
  text-align: center;
  margin-bottom: 2rem;
}
.citation .cite-head .stars { color: var(--blue-deep); letter-spacing: 0.9em; padding-left: 0.9em; font-size: 0.75rem; display: block; margin-bottom: 0.9rem; }
.citation .cite-head h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 1.05rem;
}
.citation blockquote {
  font-family: "Courier Prime", monospace;
  font-size: 1rem;
  line-height: 1.9;
}
.citation .cite-attrib {
  font-family: "Courier Prime", monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 1.8rem;
  text-align: right;
}

/* legacy block */
.legacy { background: var(--ribbon-wash); border-top: 1px solid var(--rule); }
.legacy .wrap { max-width: 900px; }
.legacy h2 { font-size: 2rem; margin-bottom: 1.2rem; }
.legacy p { color: var(--ink-soft); margin-bottom: 1.2rem; }

/* prev / next */
.pager { display: grid; grid-template-columns: 1fr 1fr; }
.pager a {
  padding: 2.2rem 2rem;
  text-decoration: none;
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.pager a:hover { background: var(--paper-card); }
.pager a + a { border-left: 1px solid var(--rule); text-align: right; }
.pager .dir {
  font-family: "Courier Prime", monospace;
  font-size: 0.75rem;
  color: var(--blue-deep);
  display: block;
  margin-bottom: 0.4rem;
}
.pager .name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.3rem;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-grid, .monument-grid, .recip-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .nine-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars, .doors { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  nav.primary { display: none; }
}
@media (max-width: 560px) {
  .nine-grid { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .footer-grid { grid-template-columns: 1fr; }
  /* The 170px label column leaves too little room for the value, and a long
     unbroken token (an email address, a grave reference) pushes the page wide. */
  .vitals-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Long unbroken strings in a record row wrap instead of forcing a scrollbar. */
.vitals-row dd { overflow-wrap: anywhere; }

/* ---------- monument concept studies ---------- */

.render-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
}

/* Two-up variant of the three-column pillar grid. */
.pillars.two-up { grid-template-columns: repeat(2, 1fr); }

/* ---------- press list ---------- */

.press-list { list-style: none; }
.press-list li {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.press-list .outlet {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- timeline ---------- */

.timeline-year { margin-top: 3.5rem; }
.year-label {
  font-size: 3rem;
  color: var(--ribbon);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}
.timeline { list-style: none; }
.timeline li {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.tl-date {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.35rem;
}
.tl-body h4 { font-family: "Barlow Condensed", sans-serif; font-size: 1.35rem; margin-bottom: 0.4rem; }
.tl-body p { color: var(--ink-soft); max-width: 46em; }

@media (max-width: 800px) {
  .render-grid,
  .pillars.two-up { grid-template-columns: 1fr; }
  .press-list li,
  .timeline li { grid-template-columns: 1fr; gap: 0.4rem; }
  .year-label { font-size: 2.2rem; }
}

/* ---------- team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3.5rem;
}
.team-member {
  border-top: 2px solid var(--ink);
  padding-top: 1.1rem;
}
.team-member h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.5rem;
  line-height: 1.1;
}
.team-member .role {
  color: var(--blue-deep);
  font-size: 0.8rem;
  margin: 0.3rem 0 0.9rem;
}
.team-member p:last-child { color: var(--ink-soft); font-size: 0.97rem; }

@media (max-width: 800px) {
  .team-grid { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ---------- scholarships ---------- */

.group-note { color: var(--ink-soft); max-width: 46em; margin-bottom: 2.5rem; }

.award { max-width: 52em; padding: 2.2rem 0; border-top: 2px solid var(--ink); }
.award + .award { margin-top: 0.5rem; }
.award h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.85rem;
  line-height: 1.05;
}
.award-line { color: var(--blue-deep); margin: 0.45rem 0 1.2rem; }
.award p { margin-bottom: 0.9rem; }
.award .vitals { margin-top: 1.8rem; }
.award-asks { margin: 0 0 1rem 1.2rem; color: var(--ink-soft); }
.award-asks li { margin-bottom: 0.3rem; }

/* Pilot and planned awards sit quieter than the ones taking applications. */
.award-quiet { border-top-color: var(--rule-dark); }
.award-quiet h2 { color: var(--ink-soft); font-size: 1.5rem; }

.values-list { font-size: 1.05rem; color: var(--blue-deep); margin-top: 1rem; }


/* ---------- mobile menu ---------- */

.nav-toggle {
  display: none;                    /* desktop shows the full nav instead */
  margin-left: auto;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  border: 2px solid var(--ink);
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
  color: var(--ink);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars span {
  display: block;
  height: 2px;
  background: var(--ink);
  margin: 3px 0;
}
.nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span { background: var(--paper); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-inner { flex-wrap: wrap; row-gap: 0.9rem; }
  /* Opened by the toggle: a full-width stack under the masthead. */
  .nav-open nav.primary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border-top: 2px solid var(--ink);
    padding-top: 0.5rem;
  }
  .nav-open nav.primary a {
    padding: 0.85rem 0.2rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav-open nav.primary a:last-child { border-bottom: none; }
  .nav-open nav.primary .btn.solid {
    margin-top: 0.9rem;
    text-align: center;
    padding: 0.75rem 1.5rem;
  }
}

/* ---------- designer credit ---------- */

.site-credit {
  background: #fff;
  color: #000;
  text-align: center;
  padding: 1.4rem 2rem;
}
.site-credit p { color: #000; font-size: 0.82rem; }
.site-credit a { color: #000; text-decoration: underline; text-underline-offset: 3px; }
.site-credit a:hover { color: var(--blue-deep); }

/* ---------- homepage: no hairline between sections ---------- */

body.home section.block + section.block { border-top: none; }

/* Partner names are links where we hold a URL; keep them looking like the rest of the strip. */
.trust .partners a { color: var(--ink); text-decoration: none; }
.trust .partners a:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- arriving at the newsletter ----------
   Three calls to action across the site link to #newsletter: the "Stay Informed"
   door on the home page, and buttons on /monument/ and /programs/wreaths/. All
   three drop the reader into the fourth column of a four-column footer with
   nothing to say why they are there.

   These rules mark the block on arrival; the script in base.njk puts the cursor
   in the field. Together the jump explains itself, which a bare anchor did not. */

#newsletter { scroll-margin-top: 3rem; }

#newsletter:target .label { color: #fff; }

#newsletter:target .newsletter-form input {
  border-color: var(--ribbon);
  background: rgba(143, 179, 220, 0.09);
}

.newsletter-form input:focus-visible {
  outline: 2px solid var(--ribbon);
  outline-offset: 2px;
  border-color: var(--ribbon);
}

/* A single slow pulse, so the eye lands in the right place without the footer
   turning into an advertisement. Suppressed for anyone who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  #newsletter:target .newsletter-form { animation: newsletter-arrive 1.8s ease-out 1; }
  @keyframes newsletter-arrive {
    0%   { box-shadow: 0 0 0 0 rgba(143, 179, 220, 0); }
    20%  { box-shadow: 0 0 0 4px rgba(143, 179, 220, 0.42); }
    100% { box-shadow: 0 0 0 0 rgba(143, 179, 220, 0); }
  }
}

/* ============================================================
   Legacy Lives Here — the November 20 gala at The Valentine
   ============================================================ */

.gala-hero { padding-bottom: 4.5rem; }
.gala-hero-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 4rem;
  align-items: start;
}
/* Anton paints its capitals 0.041em below the top of the h1's line box. Pulling
   the heading up by exactly that puts the top of LEGACY on the same line as the
   rule above the date block opposite. Measured off rendered pixels at 1440px and
   1000px, which agreed, rather than off the font's own ascent metrics, which do
   not describe where Chrome puts the line box. In em so it holds at every step
   of the clamp instead of only at one viewport width. */
.gala-hero h1 { font-size: clamp(3rem, 7.5vw, 6rem); margin: -0.041em 0 0.6rem; }

/* "Honoring River City's Valor" is part of the event title rather than a claim
   the page is making, so it sits in Caslon italic under the display line and
   does not compete with it. */
.gala-subtitle {
  font-family: "Libre Caslon Text", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--blue-deep);
  line-height: 1.25;
  margin-bottom: 1.6rem;
}

/* The vitals block is the flyer's date/time/place motif. Its top rule sits flush
   with the top of the column, which is what the h1 opposite is pulled up to meet.
   The 2.4rem the recipient pages give .vitals would break that. */
.gala-vitals { margin-top: 0; }
.gala-vitals .vitals-row { grid-template-columns: 5.5rem 1fr; gap: 1rem; }
.gala-vitals dd { font-weight: 700; line-height: 1.5; }

/* ---------- guests ---------- */

.gala-guests { background: var(--paper-card); }
.gala-guest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.5rem;
}
/* Portrait beside the name rather than above it, and capped at 190px.
   guest-barnum.jpg is 276x388, the same file the brand book flags as below the
   800px floor for print. Run it full-column and it upscales roughly 2x, which
   the duotone treatment does not survive. At 190px it renders at native size
   and the card reads as a record entry, which is the motif anyway. */
.gala-guest-head {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 1.8rem;
  align-items: end;
  margin-bottom: 1.5rem;
}
.gala-guest img {
  border: 1px solid var(--ink);
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
}
.gala-guest h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-bottom: 0.35rem; }
.gala-guest .gala-credit { color: var(--blue-deep); }
.gala-guest p { color: var(--ink-soft); }

/* The stars close the two guest bios and open the "also joining us" list, so
   they need real air above them or they read as part of whichever bio happens
   to run longest. */
.gala-guests .stars-divider { margin-top: 4rem; }
.gala-joining-head { display: block; text-align: center; color: var(--ink-soft); margin: 1.4rem 0 1.6rem; }
.gala-joining {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}
.gala-joining h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.gala-joining p { color: var(--ink-soft); }

/* ---------- tickets ---------- */

/* Givebutter renders the checkout in an iframe and resizes it as the buyer
   moves through the steps. Never give this a fixed height, and do not try to
   style what is inside it: the iframe is cross-origin and its appearance is
   dashboard configuration. */
.gala-widget {
  height: auto;
  max-width: 40rem;
  border: 1px solid var(--ink);
  background: var(--paper-card);
  padding: 1.2rem;
}
.gala-widget-fallback {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.gala-presale {
  border: 2px solid var(--ink);
  background: var(--paper-card);
  padding: 2.2rem 2rem;
  max-width: 44rem;
}
.gala-presale .stamp { margin-bottom: 1.2rem; }
.gala-presale p { color: var(--ink-soft); margin-bottom: 1.6rem; }

.gala-tax { margin-top: 1.6rem; color: var(--ink-soft); max-width: 44rem; }

/* ---------- sponsorship ---------- */

.gala-sponsor { background: var(--blue-deep); color: var(--paper); }
.gala-sponsor-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.gala-sponsor h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: #fff; margin-bottom: 1.1rem; }
.gala-sponsor p { color: var(--ribbon-wash); }
.gala-sponsor-contact { border-left: 1px solid rgba(244, 239, 227, 0.35); padding-left: 2.2rem; }
.gala-sponsor-contact .label { color: var(--ribbon); display: block; margin-bottom: 0.7rem; }
.gala-sponsor-contact p { color: var(--paper); line-height: 1.9; }
.gala-sponsor-contact a { color: #fff; }
.gala-sponsor-contact a:hover { color: var(--ribbon); }

/* ---------- gala responsive ---------- */

@media (max-width: 900px) {
  .gala-hero-grid,
  .gala-guest-grid,
  .gala-sponsor-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .gala-sponsor-contact { border-left: none; border-top: 1px solid rgba(244, 239, 227, 0.35); padding-left: 0; padding-top: 1.6rem; }
  /* One portrait per row on a phone would push the second guest below the
     fold twice over, so they stay side by side and lose the cropping. */
  .gala-guest-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (max-width: 600px) {
  .gala-guest-grid { grid-template-columns: 1fr; }
  .gala-guest-head { grid-template-columns: 160px 1fr; gap: 1.3rem; }
  .gala-joining { grid-template-columns: 1fr; gap: 1.5rem; }
  .gala-vitals .vitals-row { grid-template-columns: 4.5rem 1fr; gap: 0.8rem; font-size: 0.8rem; }
  .gala-presale { padding: 1.6rem 1.3rem; }
  .gala-widget { padding: 0.8rem; }
}

/* ---------- homepage gala announcement ---------- */

.gala-strip { background: var(--blue-deep); color: var(--paper); padding: 3.2rem 0; }
.gala-strip-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.gala-strip .label { color: var(--ribbon); margin-bottom: 0.5rem; }
.gala-strip h2 { font-size: clamp(1.9rem, 4vw, 3rem); color: #fff; margin-bottom: 0.6rem; }
.gala-strip p { color: var(--ribbon-wash); max-width: 40em; }
.gala-strip .btn.solid {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--blue-deep);
  flex: none;
}
.gala-strip .btn.solid:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* Under ~520px the column beside the portrait is too narrow for a name set in
   Anton: "Col. Harvey \"Barney\" Barnum, Jr." breaks over three lines and the
   credit under it over three more. Stack the head instead and let the name run
   the full width. */
@media (max-width: 520px) {
  .gala-guest-head { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
  .gala-guest-head img { max-width: 200px; }
}