/* ============================================================
   Women in World War II — Fortitude Research
   Static site stylesheet, v3 — ivory white, grid, modern editorial
   ============================================================ */

:root {
  /* Fortitude exact palette — hex codes from Erin's brand kit */
  --color-bg: #FFFFFF;             /* Pure white */
  --color-bg-soft: #FAFAFA;        /* Off-white (lightest) */
  --color-bg-light: #E4E4E4;       /* Light gray */
  --color-bg-dark: #1C1C1C;        /* Charcoal */
  --color-bg-banner: #000000;      /* Pure black */
  --color-text: #1C1C1C;           /* Body text = charcoal */
  --color-text-on-dark: #FFFFFF;
  --color-text-soft: #4a4a4a;
  --color-text-mute: #767676;
  --color-text-light: #B0B0B0;
  --color-rule: #E4E4E4;
  --color-rule-light: #ECECEC;
  --color-accent: #1C1C1C;

  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body: "Average Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui: "Almarai", "Average Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --max-content: 1240px;
  --max-prose: 720px;
  --max-wide: 920px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
a:hover, a:focus-visible { opacity: 0.6; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* ============================================================
   Site Navigation (mirrors Fortitude menu)
   ============================================================ */

.site-nav {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-rule);
  position: relative;
  z-index: 10;
}

/* Hub page: nav floats over the full-bleed banner */
body.hub .site-nav {
  background: transparent;
  border-bottom: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
body.hub .site-nav .nav-menu a:not(.contact-pill) { color: #ffffff; }
body.hub .site-nav .nav-menu a:not(.contact-pill):hover { opacity: 0.7; }
body.hub .site-nav .nav-toggle { color: #ffffff; }
body.hub .site-nav .nav-menu .contact-pill {
  border-color: #ffffff;
  color: #ffffff;
}
body.hub .site-nav .nav-menu .contact-pill:hover {
  background: #ffffff;
  color: var(--color-bg-banner);
}
/* Submenu panels stay light even when the parent nav is over dark */
body.hub .site-nav .has-submenu .submenu a { color: var(--color-text); }
body.hub .site-nav .has-submenu .submenu a:hover { opacity: 1; }

.site-nav-inner {
  max-width: none;
  margin: 0 auto;
  padding: 26px clamp(40px, 7vw, 170px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  border-bottom: none;
}
.site-logo:hover { border-bottom: none; opacity: 0.7; }
.site-logo img {
  max-height: 138px;
  width: auto;
}
.site-logo .text-mark {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  border-bottom: none;
  padding-bottom: 3px;
}
.nav-menu a:hover { opacity: 0.6; }
.nav-menu a.current { border-bottom: 1px solid currentColor; }

/* Align top-level nav items. The dropdown parents (The Work, About) are
   inline-flex, which builds a slightly taller box and floats them ~1px above
   the plain links. Match the plain links to the same box so every item sits on
   one line. */
.nav-menu > li > a:not(.contact-pill):not(.youtube-link) {
  display: inline-flex;
  align-items: center;
}

.nav-menu .youtube-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding-bottom: 0;
}
.nav-menu .youtube-link svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nav-menu .contact-pill {
  display: inline-block;
  padding: 16px 38px;
  border: 1px solid var(--color-text);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1;
  color: var(--color-text);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-menu .contact-pill:hover {
  background: var(--color-text);
  color: var(--color-bg);
  opacity: 1;
}

/* Dropdown submenus */
.nav-menu .has-submenu {
  position: relative;
}
.nav-menu .has-submenu .nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-menu .has-submenu .caret {
  font-size: 9px;
  position: relative;
  top: 1px;
  opacity: 0.7;
}
.nav-menu .has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: -16px;
  margin: 0;
  padding: 22px 0 14px;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  min-width: 220px;
  box-shadow: 0 12px 24px -16px rgba(0,0,0,0.18);
  z-index: 20;
}
.nav-menu .has-submenu:hover .submenu,
.nav-menu .has-submenu:focus-within .submenu,
.nav-menu .has-submenu.open .submenu {
  display: block;
}
.nav-menu .has-submenu .submenu li {
  padding: 0;
  border: none;
}
.nav-menu .has-submenu .submenu a {
  display: block;
  padding: 8px 22px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  border-bottom: none;
  padding-bottom: 8px;
  white-space: nowrap;
}
.nav-menu .has-submenu .submenu a:hover {
  opacity: 1;
  background: var(--color-bg-soft);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  padding: 8px 0;
}

@media (max-width: 880px) {
  .nav-menu { display: none; }
  .nav-toggle { display: block; }
  .site-logo img { max-height: 84px; }
  .nav-menu.open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 20px 40px 24px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-rule);
    z-index: 50;
  }
  .nav-menu.open li { width: 100%; padding: 8px 0; border-bottom: 1px solid var(--color-rule-light); }
  .nav-menu.open li:last-child { border-bottom: none; }

  .nav-menu.open .has-submenu .submenu {
    position: static;
    display: none;
    margin: 8px 0 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    min-width: 0;
  }
  .nav-menu.open .has-submenu.open .submenu { display: block; }
  .nav-menu.open .has-submenu .submenu li { padding: 0; border: none; }
  .nav-menu.open .has-submenu .submenu a {
    padding: 6px 0 6px 16px;
    font-size: 14px;
    color: var(--color-text-soft);
  }
  /* Hub nav links are white over the banner; when the mobile dropdown opens
     it has a light background, so force dark text inside the open menu. */
  body.hub .site-nav .nav-menu.open a:not(.contact-pill) { color: var(--color-text); }
  body.hub .site-nav .nav-menu.open .contact-pill {
    border-color: var(--color-text);
    color: var(--color-text);
  }
}

/* ============================================================
   Banner Hero (full-width archival photo with overlay)
   ============================================================ */

.banner-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-banner);
  overflow: hidden;
}

.banner-hero .banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.88;
  filter: grayscale(1) contrast(1.05);
}

.banner-hero .banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.18) 0%,
    rgba(0,0,0,0.05) 30%,
    rgba(0,0,0,0.42) 55%,
    rgba(0,0,0,0.55) 100%
  );
}

.banner-hero .banner-content {
  position: absolute;
  z-index: 2;
  top: 55%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 40px;
  text-align: center;
  color: #fff;
}

.banner-hero h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 auto 28px;
  max-width: 1000px;
}

.banner-hero .tagline {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  color: #fff;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.3;
  margin: 0 auto;
  max-width: 720px;
  opacity: 0.95;
}

/* Placeholder treatment when no banner image present */
.banner-hero.no-image {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}
.banner-hero.no-image .banner-image { display: none; }
.banner-hero.no-image .banner-overlay { background: none; }

/* Mobile: the 16:9 banner is too short, so the headline collides with the
   floating logo. Give the hero more height and drop the content lower. */
@media (max-width: 880px) {
  .banner-hero { aspect-ratio: auto; min-height: 78vh; }
  .banner-hero .banner-content { top: 58%; padding-top: 96px; }
  .banner-hero h1 { font-size: clamp(40px, 11vw, 64px); }
}
@media (max-width: 480px) {
  .banner-hero { min-height: 74vh; }
  .banner-hero .banner-content { padding-top: 80px; }
}

/* ============================================================
   Hub Intro (below banner, above grid)
   ============================================================ */

.hub-intro {
  max-width: var(--max-wide);
  margin: 80px auto 64px;
  padding: 0 40px;
  text-align: center;
}

.hub-intro .intro-text {
  font-size: 20px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 auto 36px;
  max-width: var(--max-prose);
  text-align: left;
}

.cta-primary {
  display: inline-block;
  padding: 15px 28px;
  border: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
}
.cta-primary:hover, .cta-primary:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  opacity: 1;
}

.cta-secondary {
  display: inline-block;
  padding: 15px 28px;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border-bottom: 1px solid var(--color-text);
}
.cta-secondary:hover { background: var(--color-text); color: var(--color-bg); opacity: 1; }

/* ============================================================
   Hub Grid (crisp modern editorial grid)
   ============================================================ */

.hub-grid {
  max-width: var(--max-content);
  margin: 0 auto 96px;
  padding: 0 40px;
}

.hub-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-text);
  margin-bottom: 48px;
}
.hub-grid-header .label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text);
}
.hub-grid-header .count {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
}
@media (max-width: 820px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media (max-width: 540px) {
  .grid { grid-template-columns: 1fr; gap: 32px; }
}

.grid-item {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: none;
}
.grid-item:hover { opacity: 1; border-bottom: none; }

.grid-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-rule-light);
  margin-bottom: 16px;
  position: relative;
}
.grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.02);
  transition: transform 0.6s ease;
}
.grid-item:hover .grid-image img,
.grid-item:focus-visible .grid-image img {
  transform: scale(1.04);
}

.grid-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-mute);
}
.grid-meta .num { color: var(--color-text); }
.grid-meta .divider { color: var(--color-text-light); }

.grid-item h3 {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 6px;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.grid-item p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-soft);
  margin: 0;
}

/* ============================================================
   Bottom CTA Block (Contact / Work With Me)
   ============================================================ */

.cta-block {
  max-width: var(--max-wide);
  margin: 0 auto 96px;
  padding: 64px 40px;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  text-align: center;
}

.cta-block .eyebrow {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-bottom: 28px;
}
.cta-block h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.012em;
  margin-bottom: 36px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.cta-block .cta-note {
  max-width: 600px;
  margin: -8px auto 34px;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
}
.cta-block .buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Child Page
   ============================================================ */

.child-hero {
  max-width: var(--max-content);
  margin: 56px auto 32px;
  padding: 0 40px;
}

.back-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 32px;
  border-bottom: none;
}
.back-link:hover { color: var(--color-text); opacity: 1; }
.back-link .arrow-back { margin-right: 6px; }

.child-hero h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 40px;
  max-width: var(--max-wide);
  letter-spacing: -0.02em;
}

.child-hero-image {
  max-width: 560px;
  margin: 0 auto 14px;
  padding: 0 40px;
}
.child-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1);
}

.bio-link {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #8a8a8a;
  margin: 18px 0 0;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.bio-link a {
  color: #8a8a8a;
  border-bottom: 1px solid #d8d8d8;
}
.bio-link a:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}

.hub-further-reading {
  margin: 28px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: #d8d8d8;
  letter-spacing: 0.04em;
}
.hub-further-reading a {
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.hub-further-reading a:hover {
  border-bottom-color: #ffffff;
}

.further-reading {
  max-width: var(--max-wide);
  margin: 56px auto 0;
  padding: 40px 40px 0;
  border-top: 1px solid var(--color-rule);
}
.further-reading h3 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 18px;
}
.further-reading ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.further-reading li {
  margin: 0 0 10px;
}
.further-reading a {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  border-bottom: 1px solid #d8d8d8;
}
.further-reading a:hover {
  border-bottom-color: var(--color-text);
}
@media (max-width: 640px) {
  .further-reading { padding-left: 24px; padding-right: 24px; }
}

.research-credit {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #8a8a8a;
  text-align: center;
  max-width: 1100px;
  margin: 36px auto 0;
  padding: 0 40px;
}
.research-credit a {
  color: #8a8a8a;
  border-bottom: 1px solid #d8d8d8;
}
.research-credit a:hover {
  color: var(--color-text);
}

.image-caption {
  font-size: 14px;
  font-style: italic;
  color: var(--color-text-soft);
  max-width: 560px;
  margin: 0 auto 4px;
  padding: 0 40px;
  line-height: 1.5;
  text-align: center;
}
.image-credit {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-text-mute);
  max-width: 560px;
  margin: 0 auto 72px;
  padding: 0 40px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  text-align: center;
}

.child-body {
  max-width: var(--max-prose);
  margin: 0 auto 72px;
  padding: 0 40px;
}
.child-body p {
  font-size: 20px;
  line-height: 1.7;
  margin: 0 0 24px;
}

.bios-section-heading {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-text);
  max-width: var(--max-wide);
  margin: 72px auto 0;
  padding: 44px 40px 0;
  border-top: 1px solid var(--color-rule);
}
@media (max-width: 640px) {
  .bios-section-heading { font-size: 15px; padding-left: 24px; padding-right: 24px; letter-spacing: 0.16em; }
}

.bios-section {
  max-width: var(--max-wide);
  margin: 96px auto 80px;
  padding: 0 40px;
}
.bios-section .section-label { display: none; }

.bios-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 48px;
}
@media (max-width: 720px) {
  .bios-grid { grid-template-columns: 1fr; gap: 44px; }
}

.bio {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.bio h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 6px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.bio .years {
  font-family: var(--font-ui);
  font-style: normal;
  color: var(--color-text-mute);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.bio .role {
  font-size: 16px;
  color: var(--color-text-soft);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.4;
}
.bio p.bio-text {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.bio .source {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-text-mute);
  letter-spacing: 0.05em;
}
.bio .source a {
  color: var(--color-text-mute);
  border-bottom-color: var(--color-text-mute);
}
.bio .source a:hover { color: var(--color-text); }

/* ============================================================
   Footer (2-column: FORTITUDE + blurb / Contact)
   ============================================================ */

.site-footer {
  background: var(--color-bg-banner);
  color: var(--color-bg);
  margin-top: 0;
  padding: 80px 40px 80px;
}

.site-footer-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 64px;
  align-items: start;
  text-align: left;
}

.site-footer .footer-left { }

.site-footer .fortitude-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-bg);
  border-bottom: none;
  line-height: 1.1;
  margin-bottom: 28px;
}
.site-footer .fortitude-mark:hover { opacity: 0.7; border-bottom: none; }

.site-footer .footer-blurb {
  max-width: 620px;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-bg);
  opacity: 0.92;
  font-family: var(--font-body);
  font-style: normal;
}

.site-footer .footer-right {
  text-align: left;
}
.site-footer .contact-label {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  color: var(--color-bg);
  margin-bottom: 12px;
  line-height: 1.2;
}
.site-footer .contact-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-bg);
  border-bottom: 1px solid var(--color-bg);
  padding-bottom: 2px;
  line-height: 1.3;
  word-break: break-word;
}
.site-footer .contact-email:hover { opacity: 0.7; }

@media (max-width: 820px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 480px) {
  .site-logo img { max-height: 60px; }
}

@media (max-width: 640px) {
  .site-nav-inner, .hub-intro, .hub-grid, .cta-block, .child-hero, .child-hero-image, .image-caption, .image-credit, .child-body, .bios-section, .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }
  .banner-hero .banner-content { padding: 56px 24px 48px; }
  .cta-block .buttons { flex-direction: column; }
  .cta-block .buttons a { width: 100%; }
}

/* ============================================================
   Walking the Rainbow Trail — tour page additions
   (scoped, built on the existing Fortitude system)
   ============================================================ */

/* Eyebrow above the hero title */
.banner-hero .hero-eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.85;
  margin: 0 0 22px;
}

/* Lead section: one centered column of prose in her voice */
.lead {
  max-width: var(--max-prose);
  margin: 88px auto 16px;
  padding: 0 40px;
}
.lead .standfirst {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
}
.lead p {
  font-size: 20px;
  line-height: 1.7;
  margin: 0 0 24px;
}
.lead-figure {
  margin: 40px 0 8px;
}
.lead-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.lead-figure figcaption {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text-mute);
  letter-spacing: 0.02em;
  margin-top: 12px;
  line-height: 1.5;
}

/* Unified story blocks: the text sits full-width in the 960 content column so
   every block under the header shares one width and one left edge, with the
   photo(s) below. */
.story-block {
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 0 40px;
}
.story-block .story-prose {
  margin: 0 0 26px;
}
.story-block .story-prose p {
  font-size: 20px;
  line-height: 1.72;
  margin: 0;
}
/* a single photo beneath a story block, capped so portraits and landscapes
   read at a similar height, left-aligned with the text */
.story-figure { margin: 0; }
.story-figure img {
  width: auto;
  max-width: 100%;
  max-height: 540px;
  height: auto;
  display: block;
}
.story-figure figcaption,
.story-pair figcaption {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text-mute);
  letter-spacing: 0.02em;
  margin-top: 12px;
  line-height: 1.5;
}
/* the two Bud photos, sized to their exact shapes so both render at the same
   height with no crop (3:4 portrait beside 5:4 landscape) */
.story-pair {
  display: grid;
  grid-template-columns: 0.59fr 1fr;
  gap: 16px;
  align-items: start;
}
.story-pair figure { margin: 0; }
.story-pair figure img { width: 100%; height: auto; display: block; }
/* fine hairline divider between the blocks in the people section */
.soft-section hr.rule {
  max-width: 1000px;
  margin: 56px auto 0;
  border: 0;
  border-top: 1px solid var(--color-bg-light);
}
@media (max-width: 760px) {
  .story-block { padding: 0 24px; }
  .story-pair { grid-template-columns: 1fr; gap: 12px; }
  .soft-section hr.rule { max-width: none; margin: 40px 24px 0; }
}

/* Full-width people photo shown at its natural shape (no crop on faces),
   used to close the people section with the group at Dachau. */
.people-figure {
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 0 40px;
}
.people-figure img { width: 100%; height: auto; display: block; }
.people-figure figcaption {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text-mute);
  letter-spacing: 0.02em;
  margin-top: 12px;
  line-height: 1.5;
}

/* Section eyebrow + heading used across the page */
.section-head {
  max-width: var(--max-wide);
  margin: 96px auto 0;
  padding: 0 40px;
}
.section-head .eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin: 0 0 18px;
}
.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 820px;
}
.section-head .section-intro {
  font-size: 20px;
  line-height: 1.7;
  color: var(--color-text-soft);
  max-width: var(--max-prose);
  margin: 26px 0 0;
}

/* Three pillars */
.pillars {
  max-width: var(--max-content);
  margin: 44px auto 0;
  padding: 0 40px;
}
.pillars .grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--color-text);
}
.pillar {
  padding: 36px 32px 40px 0;
  border-right: 1px solid var(--color-rule);
}
.pillar:last-child { border-right: none; padding-right: 0; }
.pillars .grid3 .pillar { padding-left: 32px; }
.pillars .grid3 .pillar:first-child { padding-left: 0; }
.pillar .num {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-text-mute);
  display: block;
  margin-bottom: 18px;
}
.pillar h3 {
  font-size: 23px;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.pillar p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0;
}
@media (max-width: 820px) {
  .pillars .grid3 { grid-template-columns: 1fr; }
  .pillar, .pillars .grid3 .pillar { border-right: none; border-bottom: 1px solid var(--color-rule); padding: 32px 0; }
  .pillar:last-child { border-bottom: none; }
}

/* The trail: vertical itinerary */
.trail {
  max-width: var(--max-wide);
  margin: 40px auto 0;
  padding: 0 40px;
}
.trail-stop {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  padding: 30px 0;
  border-top: 1px solid var(--color-rule);
}
.trail-stop:first-child { border-top: 1px solid var(--color-text); }
.trail-stop .place {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  padding-top: 6px;
}
.trail-stop h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.trail-stop p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-text-soft);
  margin: 0;
}
@media (max-width: 640px) {
  .trail-stop { grid-template-columns: 1fr; gap: 8px; }
  .trail-stop .place { padding-top: 0; }
}

/* Standalone pull-quote */
.pullquote {
  max-width: var(--max-wide);
  margin: 96px auto 0;
  padding: 56px 40px;
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  text-align: center;
}
.pullquote blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.7vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin: 0 auto 24px;
  max-width: 880px;
}
.pullquote .attribution {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-mute);
  line-height: 1.5;
}

/* Exclusivity band */
.exclusivity {
  max-width: var(--max-prose);
  margin: 96px auto 0;
  padding: 0 40px;
  text-align: center;
}
.exclusivity .eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin: 0 0 22px;
}
.exclusivity p {
  font-size: 21px;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 640px;
}

/* Image figure between sections */
.full-figure {
  max-width: var(--max-content);
  margin: 88px auto 0;
  padding: 0 40px;
}
.full-figure img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
}
.full-figure figcaption {
  font-size: 13.5px;
  font-style: italic;
  color: var(--color-text-soft);
  margin: 12px 0 0;
  line-height: 1.5;
  max-width: var(--max-prose);
}

/* ============================================================
   Revision 2 — color imagery, four blocks, softer page, node photos
   (later in the cascade, so these win over the rules above)
   ============================================================ */

/* Color, not grayscale, across this page */
.banner-hero .banner-image,
.full-figure img,
.trail-photo img { filter: none; opacity: 1; }

/* Photo hero: a real photograph under the title, dimmed enough to hold white text */
.banner-hero.photo-hero .banner-overlay {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.32) 0%,
    rgba(0,0,0,0.20) 34%,
    rgba(0,0,0,0.50) 70%,
    rgba(0,0,0,0.68) 100%);
}

/* Map hero: show the whole route, dimmed just enough for the title */
.banner-hero.map-hero .banner-image { object-position: center; }
.banner-hero.map-hero .banner-overlay {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.34) 0%,
    rgba(0,0,0,0.18) 34%,
    rgba(0,0,0,0.46) 70%,
    rgba(0,0,0,0.64) 100%);
}

/* Four blocks across */
.pillars .grid3 {
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-rule);
}
.pillar { padding: 34px 24px 38px 0; }
.pillars .grid3 .pillar { padding-left: 24px; }
.pillars .grid3 .pillar:first-child { padding-left: 0; }
.pillar h3 { font-size: 20px; }
.pillar .num { margin-bottom: 16px; }

@media (max-width: 980px) {
  .pillars .grid3 { grid-template-columns: 1fr 1fr; }
  .pillar, .pillars .grid3 .pillar {
    padding: 30px 22px;
    border-right: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
  }
  .pillars .grid3 .pillar:nth-child(2n) { border-right: none; }
  .pillars .grid3 .pillar:nth-last-child(-n+2) { border-bottom: none; }
  .pillars .grid3 .pillar:first-child { padding-left: 22px; }
}
@media (max-width: 560px) {
  .pillars .grid3 { grid-template-columns: 1fr; }
  .pillar, .pillars .grid3 .pillar {
    border-right: none;
    border-bottom: 1px solid var(--color-rule);
    padding: 28px 0;
  }
  .pillars .grid3 .pillar:first-child { padding-left: 0; }
  .pillars .grid3 .pillar:last-child { border-bottom: none; }
}

/* Trail nodes: photo beside text, alternating sides, no hard rules */
.trail-stop {
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
  border-top: none !important;
}
.trail-stop:first-child { border-top: none !important; }
.trail-stop:nth-child(even) .trail-photo { order: 2; }

.trail-photo img,
.trail-photo .ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.trail-photo .ph {
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-mute);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px;
  line-height: 1.5;
}
.trail-text .place {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-mute);
  margin-bottom: 12px;
}
@media (max-width: 720px) {
  .trail-stop { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
  .trail-stop:nth-child(even) .trail-photo { order: 0; }
}

/* Soften the page: lighter hairlines on the feature bands */
.pullquote { border-color: var(--color-rule); }

/* Caption sits comfortably under color figures */
.full-figure figcaption { color: var(--color-text-mute); }

/* ============================================================
   Revision 3 — color gallery, video, featured testimonial
   ============================================================ */

/* Color "return, now" gallery */
.gallery-strip { max-width: var(--max-content); margin: 44px auto 0; padding: 0 40px; }
.gallery-strip .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery-strip figure { margin: 0; }
.gallery-strip img,
.gallery-strip .ph {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
}
.gallery-strip .ph {
  background: var(--color-bg-light);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--color-text-mute);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 16px; line-height: 1.5;
}
.gallery-strip figcaption {
  font-family: var(--font-ui); font-size: 12px; color: var(--color-text-mute);
  letter-spacing: 0.02em; margin-top: 10px; line-height: 1.45;
}
@media (max-width: 720px) {
  .gallery-strip .g3 { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* Video: "Erin's One-Hit Wonder" */
.video-section { max-width: var(--max-wide); margin: 44px auto 0; padding: 0 40px; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.video-embed { position: relative; aspect-ratio: 16 / 9; background: var(--color-bg-dark); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #cfcfcf;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 20px; line-height: 1.6;
}
.video-caption { font-family: var(--font-ui); font-size: 12px; color: var(--color-text-mute); margin-top: 12px; line-height: 1.5; }
@media (max-width: 720px) { .video-grid { grid-template-columns: 1fr; gap: 20px; } }

/* Featured testimonial: photo + long-ish quote */
.testimonial-feature {
  max-width: var(--max-content); margin: 96px auto 0; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.testimonial-feature .t-photo img,
.testimonial-feature .t-photo .ph {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
}
.testimonial-feature .t-photo .ph {
  background: var(--color-bg-light);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--color-text-mute);
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 20px; line-height: 1.5;
}
.testimonial-feature .t-photo figcaption {
  font-family: var(--font-ui); font-size: 12px; color: var(--color-text-mute);
  letter-spacing: 0.02em; margin-top: 10px; line-height: 1.45;
}
.testimonial-feature .t-eyebrow {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-mute);
  margin: 0 0 20px;
}
.testimonial-feature blockquote {
  font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.5; letter-spacing: -0.005em; margin: 0 0 22px;
}
.testimonial-feature .t-attr {
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; color: var(--color-text-mute); line-height: 1.5;
}
.testimonial-feature .t-attr .t-sub {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--color-text-light);
}
@media (max-width: 760px) {
  .testimonial-feature { grid-template-columns: 1fr; gap: 28px; }
}

/* Testimonial as quote / photo / quote, the photo sandwiched between two passages */
.testimonial-feature.three-col {
  grid-template-columns: 1fr 1.06fr 1fr;
  gap: 40px;
  align-items: center;
}
.testimonial-feature.three-col blockquote { font-size: 16.5px; line-height: 1.55; }
.testimonial-feature.three-col .t-eyebrow { margin-bottom: 16px; }
@media (max-width: 760px) {
  .testimonial-feature.three-col { grid-template-columns: 1fr; gap: 26px; }
}

/* ============================================================
   Revision 4 — hero loop video, four clips, investment level
   ============================================================ */

/* Hero background loop (poster = the color map fallback) */
.banner-hero .banner-image { z-index: 0; }
.banner-hero .banner-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 1;
}
.banner-hero .banner-overlay { z-index: 2; }
.banner-hero .banner-content { z-index: 3; }

/* What's involved — premium detail rows */
.involves { max-width: var(--max-wide); margin: 44px auto 0; padding: 0 40px; }
.involves .row {
  display: grid; grid-template-columns: 230px 1fr; gap: 32px;
  padding: 26px 0; border-top: 1px solid var(--color-rule);
}
.involves .row:first-child { border-top: 1px solid var(--color-text); }
.involves .row .k {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-mute);
  padding-top: 4px;
}
.involves .row .v { font-size: 18px; line-height: 1.62; color: var(--color-text); margin: 0; }
@media (max-width: 640px) {
  .involves .row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
}

/* ============================================================
   Revision 5 — wider reading measure, full-bleed photo bands,
   larger inline figures (wins the cascade; ends the thin-column-
   in-white look and brings the banner rhythm of the other pages)
   ============================================================ */

/* --- Wider, more confident reading measure --- */
.lead {
  max-width: 820px;
  margin-top: 80px;
}
.lead .standfirst { font-size: clamp(26px, 3.2vw, 36px); }
.lead p { font-size: 21px; line-height: 1.72; }

.section-head { max-width: 980px; }
.section-head h2 { max-width: 880px; }
.section-head .section-intro { max-width: 760px; font-size: 21px; }

.exclusivity { max-width: 760px; }
.exclusivity p { max-width: 700px; }

/* --- Full-bleed photo band (text laid over a cover image) --- */
.feature-band {
  position: relative;
  width: 100%;
  margin: 104px 0 0;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #161310;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.feature-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.46) 0%,
    rgba(0,0,0,0.34) 50%,
    rgba(0,0,0,0.56) 100%);
}
.feature-band .band-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding: 80px 40px;
  text-align: center;
  color: #fff;
}
.feature-band .eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 20px;
}
.feature-band h2 {
  color: #fff;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
}
.feature-band .band-intro {
  font-size: 20px;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  max-width: 640px;
  margin: 24px auto 0;
}

/* Statement band: a long opening sentence carried as an editorial H2,
   sized to read as a paragraph-headline rather than a giant short title */
.feature-band.statement-band { margin-top: 0; min-height: 66vh; }
.feature-band.statement-band .band-inner { max-width: 1040px; }
.feature-band.statement-band h2 {
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  font-weight: 400;
}
@media (max-width: 720px) {
  .feature-band.statement-band { min-height: 60vh; }
  .feature-band.statement-band h2 { font-size: clamp(22px, 6vw, 30px); line-height: 1.35; }
}

/* --- Promote the Dachau anniversary figure to edge-to-edge --- */
.full-figure.full-bleed {
  max-width: none;
  margin: 104px 0 0;
  padding: 0;
}
.full-figure.full-bleed img {
  aspect-ratio: 21 / 9;
  width: 100%;
}
.full-figure.full-bleed figcaption {
  max-width: var(--max-prose);
  margin: 16px auto 0;
  padding: 0 40px;
  text-align: center;
}

/* --- Closing call as a full-bleed dark band --- */
.cta-block.cta-band {
  position: relative;
  max-width: none;
  margin: 104px 0 0;
  padding: clamp(88px, 13vh, 148px) 40px;
  border: none;
  overflow: hidden;
  background-color: #161310;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.cta-block.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.50) 0%,
    rgba(0,0,0,0.40) 50%,
    rgba(0,0,0,0.62) 100%);
}
.cta-block.cta-band > * { position: relative; z-index: 2; }
.cta-block.cta-band .eyebrow { color: rgba(255,255,255,0.8); }
.cta-block.cta-band h2 { color: #fff; }
.cta-block.cta-band .cta-primary {
  border-color: #fff;
  color: #fff;
}
.cta-block.cta-band .cta-primary:hover,
.cta-block.cta-band .cta-primary:focus-visible {
  background: #fff;
  color: var(--color-bg-banner);
}
.cta-block.cta-band .cta-secondary {
  border-color: rgba(255,255,255,0.65);
  color: #fff;
}
.cta-block.cta-band .cta-secondary:hover,
.cta-block.cta-band .cta-secondary:focus-visible {
  background: #fff;
  color: var(--color-bg-banner);
}

/* --- Larger inline trail-node figures --- */
.trail { max-width: var(--max-content); }
.trail-stop {
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  padding: 56px 0;
}
.trail-photo img,
.trail-photo .ph { aspect-ratio: 3 / 2; }
.trail-text h3 { font-size: 27px; }
.trail-text p { font-size: 18px; }

/* --- Trail-node photos render strictly black and white (period register) --- */
.trail-photo img { filter: grayscale(1) contrast(1.03); }

/* --- Hero: a touch more black over the photograph, and the title block de-lumped --- */
.banner-hero.photo-hero .banner-overlay {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.54) 0%,
    rgba(0,0,0,0.42) 34%,
    rgba(0,0,0,0.62) 70%,
    rgba(0,0,0,0.80) 100%);
}
.banner-hero .hero-eyebrow { margin-bottom: 34px; }
.banner-hero h1 { margin-bottom: 38px; }
.banner-hero .tagline { margin-top: 0; max-width: 760px; }
/* The emotional close of the hero: a single emphasized word */
.banner-hero .hero-yours {
  font-family: var(--font-display);
  font-size: clamp(34px, 5.5vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 16px 0 0;
  color: #fff;
}
/* Small caption line along the bottom of the hero photo */
.banner-hero .hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 3;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
}

/* --- Statement band sits over the Niedersteinbach photo; split into two lines --- */
.feature-band.statement-band { background-position: center 46%; }
.feature-band.statement-band .band-inner h2 + h2 { margin-top: 0.7em; }

/* --- Small credit line inside a banner --- */
.feature-band .band-credit {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  margin: 18px 0 0;
}

/* --- Dark banner: image barely there under a heavy overlay, so a heading stands out --- */
.feature-band.band-dark { min-height: 46vh; background-position: center; }
.feature-band.band-dark::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.74) 50%,
    rgba(0,0,0,0.85) 100%);
}

/* --- Left-text banner variant: figure on the right, words on the darkened left --- */
.feature-band.band-left { justify-content: flex-start; background-position: center right; }
.feature-band.band-left::after {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.74) 0%,
    rgba(0,0,0,0.58) 34%,
    rgba(0,0,0,0.22) 62%,
    rgba(0,0,0,0.06) 100%);
}
.feature-band.band-left .band-inner {
  text-align: left;
  margin: 0;
  max-width: 620px;
  padding-left: max(40px, 7vw);
  padding-right: 24px;
}
.feature-band.band-left h2 { font-size: clamp(27px, 3.3vw, 44px); }
@media (max-width: 720px) {
  .feature-band.band-left::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.62));
  }
  .feature-band.band-left .band-inner { padding-left: 24px; }
}

/* --- Contained figure for the veteran-at-the-grave photo: show the whole frame,
       no aggressive crop across the faces --- */
.full-figure.grave-figure {
  max-width: var(--max-wide);
  margin: 80px auto 0;
  padding: 0 40px;
}
.full-figure.grave-figure img { aspect-ratio: auto; width: 100%; height: auto; filter: none; }
.full-figure.grave-figure figcaption {
  text-align: center;
  max-width: var(--max-prose);
  margin: 14px auto 0;
}

/* ============================================================
   Revision 7 — one uniform content column, and the faded trail map
   ============================================================ */

/* Every text/content block shares the same width and left edge */
.lead,
.section-head,
.pillars,
.trail,
.gallery-strip,
.testimonial-feature,
.involves,
.exclusivity,
.pullquote,
.further-reading,
.full-figure.grave-figure {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.section-head .section-intro { max-width: none; }

/* "From Alsace to Austria" sits over the Rainbow Trail map, faded full width */
.trail-map-section, .map-bg { position: relative; overflow: hidden; }
.trail-map-section::before, .map-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://images.squarespace-cdn.com/content/v1/679e458e165fe905fbae6c0e/3859fa30-5d42-4bba-b5a5-caa60b088ca9/Rainbow+Trail+map+42nd+Infantry+Division+WWII+Dachau+Wurzburg+Nordwind.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.4);
  transform-origin: center;
  opacity: 0.12;
  filter: blur(2px) grayscale(0.3);
  pointer-events: none;
}
.trail-map-section > *, .map-bg > * { position: relative; z-index: 1; }
/* breathing room below the opening text before the banner that follows */
.map-bg { padding-bottom: 48px; }

/* Banners: smaller, more readable headline size, with generous line spacing */
.feature-band h2 { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.45; }
.feature-band.band-left h2, .feature-band.band-right h2 { font-size: clamp(23px, 2.6vw, 34px); line-height: 1.45; }

/* Story rows: photograph far left, the story to the right */
.story-row {
  max-width: 960px;
  margin: 56px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.story-row .story-photo { margin: 0; }
.story-row .story-photo img { width: 100%; height: auto; display: block; }
.story-row .story-photo figcaption {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text-mute);
  letter-spacing: 0.02em;
  margin-top: 12px;
  line-height: 1.5;
}
.story-row .story-text p { font-size: 20px; line-height: 1.72; margin: 0; }
/* alternate the photo side so three rows do not read as a single column */
.story-row.reverse .story-photo { order: 2; }
@media (max-width: 760px) {
  .story-row, .story-row.reverse { grid-template-columns: 1fr; gap: 20px; }
  .story-row.reverse .story-photo { order: 0; }
}

/* Writing grid: linked story tiles */
.writing-grid {
  max-width: 960px;
  margin: 44px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
}
.writing-grid .wcard { display: block; text-decoration: none; color: inherit; border-bottom: none; }
.writing-grid .wcard:hover, .writing-grid .wcard:focus-visible { opacity: 1; border-bottom: none; }
.writing-grid .wcard-img {
  display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-light);
}
.writing-grid .wcard-img img {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease;
}
.writing-grid .wcard:hover .wcard-img img,
.writing-grid .wcard:focus-visible .wcard-img img { transform: scale(1.04); }
.writing-grid .wcard-title {
  display: block; margin-top: 11px;
  font-family: var(--font-display); font-size: 16px; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--color-text);
}
.writing-grid .wcard:hover .wcard-title { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .writing-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .writing-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Revision 8 — standalone testimonial, hero buttons, zoomed portrait,
   and tighter white gaps around the bands
   ============================================================ */

/* Tom's testimonial: a standalone quote on a soft ground */
.testimonial-quote {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) 56px;
  background: var(--color-bg-soft);
  text-align: center;
}
.testimonial-quote .t-eyebrow {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--color-text-mute); margin: 0 0 26px;
}
.testimonial-quote blockquote {
  font-family: var(--font-display); font-size: clamp(19px, 2.05vw, 25px); line-height: 1.5;
  letter-spacing: -0.005em; margin: 0 auto 26px; max-width: 800px;
}
.testimonial-quote .t-attr { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; color: var(--color-text-mute); line-height: 1.5; }
.testimonial-quote .t-attr .t-sub {
  display: block; margin-top: 7px; font-size: 11.5px; font-style: italic;
  color: var(--color-text-light); letter-spacing: 0.02em; line-height: 1.5;
}
@media (max-width: 640px) { .testimonial-quote { padding: 44px 24px; } }

/* Hero buttons, same as the bottom CTA, styled for the dark hero */
.banner-hero .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.banner-hero .hero-buttons .cta-primary,
.banner-hero .hero-buttons .cta-secondary { border-color: #fff; color: #fff; background: transparent; }
.banner-hero .hero-buttons .cta-primary:hover,
.banner-hero .hero-buttons .cta-secondary:hover,
.banner-hero .hero-buttons .cta-primary:focus-visible,
.banner-hero .hero-buttons .cta-secondary:focus-visible { background: #fff; color: var(--color-bg-banner); opacity: 1; }
@media (max-width: 480px) { .banner-hero .hero-buttons { flex-direction: column; } }

/* ============================================================
   Split bands. The photo gets its own half as a real image at a near-square
   shape, so it shows almost its whole frame (faces AND the grave inscription
   survive). Text sits on a solid dark panel on the other half. This replaces
   the full-bleed background banners that were cropping heads.
   ============================================================ */
.split-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 104px;
  background: var(--color-bg-banner);
}
.split-band .split-media {
  position: relative;
  min-height: 60vh;
}
.split-band .split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.split-band .split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 72px);
  color: #fff;
}
.split-band .eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin: 0 0 20px;
}
.split-band h2 {
  font-family: var(--font-display);
  font-size: clamp(23px, 2.2vw, 34px);
  line-height: 1.45;
  margin: 0;
  color: #fff;
}
.split-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.55;
  margin: 0;
  color: #fff;
}
.split-band .band-credit {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  margin: 18px 0 0;
}
/* which half the photo sits on */
.split-band.split-left .split-media { order: 2; }
.split-band.split-left .split-text  { order: 1; }
.split-band.split-right .split-media { order: 1; }
.split-band.split-right .split-text  { order: 2; }
/* per-photo focal point: keep heads on the grave shot, keep the group's faces */
.split-band.split-left .split-media img  { object-position: center 38%; }
.split-band.split-right .split-media img { object-position: center 52%; }
@media (max-width: 760px) {
  .split-band { grid-template-columns: 1fr; margin-top: 64px; }
  .split-band .split-media { order: 0; min-height: 56vh; }
  .split-band .split-text  { order: 0; padding: 48px 28px; }
}

/* Right-flipped image banner (image left, text right) */
.feature-band.band-right { justify-content: flex-end; }
.feature-band.band-right::after {
  background: linear-gradient(270deg,
    rgba(0,0,0,0.74) 0%,
    rgba(0,0,0,0.58) 34%,
    rgba(0,0,0,0.22) 62%,
    rgba(0,0,0,0.06) 100%);
}
.feature-band.band-right .band-inner {
  text-align: left;
  margin: 0;
  max-width: 620px;
  padding-right: max(40px, 7vw);
  padding-left: 24px;
}
@media (max-width: 720px) {
  .feature-band.band-right::after { background: linear-gradient(180deg, rgba(0,0,0,0.40), rgba(0,0,0,0.62)); }
  .feature-band.band-right .band-inner { padding-right: 24px; }
}

/* Black quote banner: full quote split on either side of a centered photo */
.quote-band {
  width: 100%;
  margin: 56px 0 0;
  padding: clamp(48px, 7vw, 84px) 40px;
  background: var(--color-bg-banner);
  color: #fff;
}
.quote-band .qb-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.34fr 1fr;
  gap: 48px;
  align-items: center;
}
.quote-band .qb-photo { margin: 0; }
.quote-band .qb-photo img { width: 100%; height: auto; display: block; }
.quote-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.45vw, 20px);
  line-height: 1.62;
  margin: 0;
  color: #fff;
}
.quote-band .qb-eyebrow {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 16px;
}
.quote-band .qb-attr {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7); margin: 18px 0 0; line-height: 1.5;
}
@media (max-width: 820px) {
  /* Stack to one column. The quote is one sentence split into two halves
     around the photo, so keep the two text halves nearly touching (they read
     as continuous prose) and give the photo its own breathing room above. */
  .quote-band .qb-inner { grid-template-columns: 1fr; gap: 6px; align-items: start; }
  .quote-band .qb-photo { order: -1; max-width: 520px; margin: 0 auto 24px; }
  .quote-band .qb-inner .qb-text + .qb-text blockquote { text-indent: 0; }
}

/* Moderate, even breathing room around full-bleed bands (not flush, not huge) */
.feature-band { margin-top: 56px; }
.cta-block.cta-band { margin-top: 56px; }
.full-figure.full-bleed { margin-top: 56px; }
.section-head { margin-top: 64px; }
.lead { margin-top: 52px; }

/* Quote carried in a left-text image banner (Tom and Gary, same format) */
.feature-band.band-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: #fff;
  margin: 0 0 18px;
}

/* Soft tint behind the three "why walk it with me" vignettes */
.soft-section { background: var(--color-bg-soft); padding: 8px 0 76px; }
.soft-section > .section-head:first-child { margin-top: 56px; }

/* ============================================================
   Revision 9 — one uniform content width, photo/opacity, spacing
   ============================================================ */

/* A single content width for everything except the full-bleed banners */
.lead,
.section-head,
.pillars,
.trail,
.involves,
.writing-grid,
.story-row,
.full-figure.grave-figure {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.section-head h2 { max-width: none; }

/* the Alsace node keeps this one image in colour */
.trail-photo img.node-color { filter: none; }

/* Hero: drop the title block so it clears Tom's face, and a touch more black */
.banner-hero .banner-content { top: 62%; }
.banner-hero.photo-hero .banner-overlay {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.60) 0%,
    rgba(0,0,0,0.48) 34%,
    rgba(0,0,0,0.66) 70%,
    rgba(0,0,0,0.86) 100%);
}

/* Closing CTA band: more black over the forest */
.cta-block.cta-band::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.64) 0%,
    rgba(0,0,0,0.54) 50%,
    rgba(0,0,0,0.76) 100%);
}

/* Faint hairline between the three vignettes */
.soft-section .story-row + .story-row {
  border-top: 1px solid rgba(28,28,28,0.09);
  padding-top: 68px;
}

/* No white stripe between a faded-map section and the band that follows it */
.map-bg + .feature-band,
.map-bg + .cta-block { margin-top: 0; }

/* Research credit reads as part of the dark footer, no white strip between */
.research-credit {
  background: var(--color-bg-banner);
  color: rgba(255,255,255,0.5);
  max-width: none;
  margin: 0;
  padding: 40px 40px 0;
}
.research-credit a { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.3); }
.research-credit a:hover { color: #fff; }

/* --- Larger color gallery strip --- */
.gallery-strip .g3 { gap: 28px; }

@media (max-width: 720px) {
  .feature-band { min-height: 48vh; }
  .feature-band .band-inner { padding: 60px 24px; }
  .trail-stop { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  .full-figure.full-bleed img { aspect-ratio: 4 / 3; }
}

/* The "Why walk it with me" intro: same size as the body below it, set in bold */
.section-head .section-intro.intro-bold {
  font-size: 20px;
  line-height: 1.72;
  font-weight: 700;
  color: var(--color-text);
  max-width: none;
}
/* Opening lead line, set in bold */
.lead p.lead-bold {
  font-weight: 700;
  color: var(--color-text);
}
/* On-the-ground field video(s). One centered for now; becomes a row when more land. */
.field-videos {
  max-width: 1080px;
  margin: 36px auto 0;
  padding: 0 40px;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.field-clip {
  margin: 0;
}
@media (max-width: 760px) {
  .field-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* FAQ block, plain and authoritative, marked up as FAQPage data for rich results */
.faq {
  max-width: 1080px;
  margin: 36px auto 0;
  padding: 0 40px;
}
.faq-item {
  border-top: 1px solid var(--color-bg-light);
}
.faq-item:first-child { border-top: 0; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--color-text);
  padding: 26px 48px 26px 0;
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-text-mute); }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-text-mute);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  font-size: 18px;
  line-height: 1.72;
  color: var(--color-text-soft);
  margin: 0 0 28px;
  max-width: 880px;
}
@media (max-width: 760px) {
  .faq { padding: 0 24px; }
}
.field-clip figcaption {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.6vw, 19px);
  font-style: italic;
  color: var(--color-text-soft);
  margin-top: 14px;
  line-height: 1.5;
  text-align: center;
}

/* The Rainbow Trail map, shown full-width above the four pillars */
.trail-map-figure {
  max-width: 1080px;
  margin: 72px auto 0;
  padding: 0 40px;
}
.trail-map-figure img {
  width: 100%;
  height: auto;
  display: block;
}
.trail-map-figure figcaption {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text-mute);
  letter-spacing: 0.02em;
  margin-top: 12px;
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   Mobile hero, final: flow layout so the eyebrow, headline, tagline,
   "Yours.", all three buttons, AND the caption stack in order and stay
   visible with no overlap. Placed last so it wins over the desktop
   absolute-centering rules above. The background photo and overlay are
   absolute (inset 0), so the hero simply grows to fit the content.
   ============================================================ */
@media (max-width: 880px) {
  .banner-hero {
    aspect-ratio: auto;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .banner-hero .banner-content {
    position: relative;
    top: auto;
    transform: none;
    padding: 104px 24px 26px;
  }
  .banner-hero .hero-caption {
    display: block;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 22px 0 0;
    padding: 0 24px 34px;
  }
}
@media (max-width: 480px) {
  .banner-hero .banner-content { padding-top: 92px; }
}