/* ==========================================================================
   Design tokens — lifted directly from visual-design-direction.html
   Colors: deep forest green / sand-gold / off-white (Torrey Pine, La Jolla cliffs)
   Type: Cormorant Garamond (serif, headlines) + Libre Franklin (sans, body/UI)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,500&family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root {
  --color-forest: #1F3D2E;
  --color-forest-dark: #16291F;
  --color-sand: #C9A66B;
  --color-sand-light: #E8DCC3;
  --color-white: #FFFFFF;
  --color-offwhite: #FAF8F4;
  --color-text: #1E2420;
  --color-text-muted: #6B6B60;
  --color-border: #DDD8CC;
  --header-height: 134px;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Libre Franklin', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background: var(--color-white);
  color: var(--color-text);
  margin: 0;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; color: var(--color-forest); margin: 0 0 0.5em; }
h1 { font-size: 48px; line-height: 1.15; }
h2 { font-size: 34px; }
h3 { font-size: 24px; }

a { color: inherit; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sand);
}
.homepage-hero-wrap {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height));
}
.homepage-identity {
  text-align: center;
  padding: 48px 40px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--color-forest-dark);
  color: #fff;
  flex-shrink: 0;
}
.homepage-identity p { color: rgba(255,255,255,0.8); margin-top: 20px; }
.homepage-identity h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 60px;
  margin: 0 0 20px;
  color: #fff;
}
.vision-actions { margin-top: 24px; position: relative; }
.vision-actions a + a { margin-left: 16px; }

/* Vision section — a single, fixed, CMS-editable photo, deliberately NOT part of the
   randomized hero_backgrounds pool. The JS in default.html only ever queries
   .hero-section/.section-banner by name, so this class is automatically invisible
   to it -- no exception logic needed anywhere. Background image is set inline,
   directly from page.vision_image, once, at build time. */
.vision-section {
  text-align: center;
  padding: 60px 40px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-size: cover;
  background-position: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vision-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
}
.vision-eyebrow {
  position: relative;
  margin-bottom: 24px;
}
.vision-quote {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1.4;
  color: var(--color-forest);
  white-space: pre-line;
}
.vision-quote::before { content: '\201C'; }
.vision-quote::after { content: '\201D'; }
.section-banner {
  text-align: center;
  padding: 50px 40px;
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)); /* JS sets the actual photo on load, see default.html */
  background-size: cover;
  background-position: center;
}
.homepage-identity .eyebrow {
  margin-bottom: 20px;
}
.section-banner h1 {
  font-family: var(--font-sans);
  font-size: 60px;
  margin: 0;
}

/* ===== Header / Nav ===== */
.site-header {
  background: var(--color-forest);
  color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 8px 36px;
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  box-sizing: border-box;
}
.site-header-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.site-header-utility {
  display: flex;
  gap: 20px;
  font-size: 12px;
}
.site-header-utility a {
  color: var(--color-white);
  opacity: 0.75;
  text-decoration: none;
}
.site-header-utility a:hover {
  opacity: 1;
}
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.site-logo img {
  height: 118px;
  width: auto;
  display: block;
}
.site-nav {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 14px;
}
.site-nav a {
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.92;
}
.nav-dropdown { position: relative; cursor: pointer; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 0;
  min-width: 160px;
  z-index: 10;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  color: var(--color-text);
  padding: 8px 16px;
  font-size: 13px;
}
.give-btn {
  background: var(--color-sand);
  color: var(--color-forest-dark) !important;
  padding: 8px 18px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 13px;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--color-forest-dark);
  color: rgba(255,255,255,0.7);
  padding: 30px 40px;
  font-size: 12px;
}
.site-footer .footer-top-row { display: flex; justify-content: space-between; }
.site-footer a { color: rgba(255,255,255,0.85); }
.footer-legal { margin-top: 16px; max-width: 700px; line-height: 1.6; color: rgba(255,255,255,0.55); }
.contact-details-row { display: flex; gap: 60px; margin: 30px 0; }
.contact-details-row .section-label { font-size: 13px; font-weight: 600; color: var(--color-sand); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }

/* ===== Shared components ===== */
.callout {
  background: var(--color-sand-light);
  border-left: 4px solid var(--color-sand);
  padding: 18px 22px;
  border-radius: 0 4px 4px 0;
  margin: 24px 0;
}
.btn-primary {
  display: inline-block;
  background: var(--color-forest);
  color: var(--color-white) !important;
  padding: 12px 28px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 3px;
  text-decoration: none;
}
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--color-forest) !important;
  border: 1px solid var(--color-forest);
  padding: 11px 27px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 3px;
  text-decoration: none;
}
.card {
  display: block;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 24px;
}

main { max-width: 1000px; width: 100%; margin: 0 auto; padding: 0 30px 80px; flex: 1 0 auto; }

/* ===== People sub-nav (Fellows/Staff/Board) ===== */
.subnav {
  display: flex;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 30px;
  font-size: 14px;
  position: sticky;
  top: var(--header-height);
  z-index: 99;
  background: var(--color-white);
}
.subnav a { color: var(--color-text-muted); text-decoration: none; padding-bottom: 8px; }
.subnav a.active { color: var(--color-forest); font-weight: 600; border-bottom: 2px solid var(--color-forest); }

.breadcrumb { font-size: 12px; color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-text-muted); }

.tier-section { margin-bottom: 40px; }
.tier-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  border: none;
}

/* Distinguished Fellows — larger, higher visual weight (F6) */
.distinguished-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.distinguished-card {
  display: flex; gap: 18px; text-decoration: none; color: inherit;
  border-width: 2px; border-color: var(--color-forest);
}
.distinguished-card .avatar-lg { width: 90px; height: 90px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.distinguished-card h3 { margin-bottom: 4px; }

/* Resident/Senior Resident/Non-Resident — smaller, denser */
.resident-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.resident-card { text-decoration: none; color: inherit; text-align: center; }
.resident-card .avatar-sm { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.resident-card h4 { margin-bottom: 2px; font-size: 16px; }

/* Executive Leadership / Board */
.exec-row, .board-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.exec-card, .board-card { text-decoration: none; color: inherit; text-align: center; }
.exec-card .avatar-md, .board-card .avatar-md { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
.exec-card h4, .board-card h4 { margin-bottom: 2px; font-size: 16px; }

/* Staff grid */
.staff-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.staff-card { text-decoration: none; color: inherit; text-align: center; }
.staff-card .avatar-sm { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.staff-card h4 { margin-bottom: 2px; font-size: 15px; }

.fellow-title { color: var(--color-text-muted); font-size: 13px; margin: 0 0 8px; }
.member-title { color: var(--color-text-muted); font-size: 13px; font-weight: 600; margin: 0 0 8px; }

/* Individual bio pages */
.bio-header { display: flex; gap: 24px; margin: 20px 0 30px; }
.avatar-xl { width: 120px; height: 120px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.tier-chip {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--color-forest); color: var(--color-white); padding: 3px 10px; border-radius: 10px; margin-bottom: 8px;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tag-chip, .related-link-chip {
  display: inline-block; border: 1px solid var(--color-border); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; color: var(--color-text-muted); text-decoration: none;
}
a.tag-chip:hover, .related-link-chip:hover { border-color: var(--color-forest); color: var(--color-forest); }

.bio-body { max-width: 700px; margin-bottom: 30px; }
.section-label {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted);
  border: none; margin-bottom: 12px;
}
.credentials-box ul { margin: 0; padding-left: 20px; font-size: 14px; }
.credentials-box li { margin-bottom: 6px; }
.related-box { margin-bottom: 20px; }
.pub-mini { padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.pub-venue { color: var(--color-text-muted); font-style: italic; font-size: 13px; }

/* ===== Membership ===== */
.membership-tier { margin: 40px 0; padding-top: 20px; border-top: 1px solid var(--color-border); }
.membership-tier:first-of-type { border-top: none; padding-top: 0; }

/* Accordion — native <details>/<summary>, no custom JS needed */
.tier-accordion {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 16px;
}
.tier-accordion summary {
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 600;
  color: var(--color-forest);
  list-style: none;
  position: relative;
}
.tier-accordion summary::-webkit-details-marker { display: none; }
.tier-accordion summary::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--color-sand);
}
.tier-accordion[open] summary::after { content: '\2212'; }
.tier-accordion-content { padding: 0 24px 24px; }
.tier-eligibility { font-size: 13px; font-weight: 600; color: var(--color-sand); text-transform: uppercase; letter-spacing: 0.05em; }
.privileges-list { max-width: 650px; margin: 16px 0; padding-left: 20px; }
.privileges-list li { margin-bottom: 10px; }
.rich-text-block { max-width: 700px; }
.rich-text-block ul { max-width: 650px; margin: 16px 0; padding-left: 20px; }
.rich-text-block ul li { margin-bottom: 10px; }
.fine-print { font-size: 11px; color: var(--color-text-muted); margin-top: 50px; max-width: 650px; }
.page-search {
  width: 100%; max-width: 400px; padding: 10px 16px; margin: 20px 0 30px;
  border: 1px solid var(--color-border); border-radius: 4px; font-family: inherit; font-size: 15px;
}
.page-search:focus { outline: none; border-color: var(--color-sand); }
.pagination-controls { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.pagination-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
#directory-page-indicator { font-size: 14px; color: var(--color-text-muted); }
.member-since { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.givebutter-embed-container { max-width: 600px; margin: 40px 0; display: flex; justify-content: center; }
.contact-embed-container { margin: 40px 0; }
.contact-embed-container iframe { max-width: 100%; }
.placeholder-note {
  background: var(--color-sand-light); border-left: 3px solid var(--color-sand);
  padding: 10px 16px; font-size: 13px; color: var(--color-text-muted); font-style: italic; max-width: 650px;
}
.notify-section { margin-top: 50px; padding: 30px; background: var(--color-offwhite); }

/* ===== Programs ===== */
.page-intro { color: var(--color-text-muted); max-width: 600px; margin-bottom: 30px; }
.programs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.program-card { text-decoration: none; }
.program-card h3 { margin-bottom: 10px; }
.program-card p { color: var(--color-text-muted); font-size: 14px; margin-top: 10px; }

.program-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 20px; }
.program-body { max-width: 620px; }
.program-sidebar .sidebar-box, .program-sidebar .substack-link-box { margin-bottom: 20px; }
.fellow-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-decoration: none; color: inherit; font-size: 14px; }
.avatar-tiny { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.org-logo { max-width: 100%; max-height: 60px; object-fit: contain; margin: 8px 0; display: block; }
.directory-cross-link { text-align: right; font-size: 14px; margin: -8px 0 16px; }
.board-cross-link { text-align: right; font-size: 14px; margin-top: 24px; }
.substack-link-box { text-align: center; background: var(--color-offwhite); }
.substack-link-box p { font-size: 13px; margin-bottom: 12px; }

/* ===== About arc ===== */
.about-tracker { margin-bottom: 30px; }
.about-body { max-width: 700px; }
.page-intro { color: var(--color-text-muted); font-size: 17px; margin-bottom: 24px; font-family: var(--font-serif); font-style: italic; }
.history-intro { color: var(--color-text); font-size: 17px; margin-bottom: 24px; font-family: var(--font-sans); font-weight: 700; }
.continue-block { margin-top: 40px; }
.continue-block a + a { margin-left: 16px; }

.timeline { max-width: 700px; margin-bottom: 30px; }
.timeline-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.timeline-date { font-weight: 600; color: var(--color-forest); font-family: var(--font-serif); }
.timeline-desc { margin: 0; color: var(--color-text); }
.timeline-closer { max-width: 700px; margin-top: 24px; color: var(--color-text-muted); font-style: italic; }

/* ===== Research ===== */
.featured-research { margin: 30px 0; }
.featured-card { display: block; text-decoration: none; color: inherit; border-width: 2px; border-color: var(--color-forest); padding: 30px; }
.featured-card h2 { margin-bottom: 12px; }
.featured-card p { color: var(--color-text-muted); }

.calls-section, .past-research-section { margin: 40px 0; }
.calls-grid, .research-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.call-card, .research-card { text-decoration: none; color: inherit; }
.call-card h3, .research-card h3 { margin: 8px 0 8px; font-size: 18px; }
.call-deadline { font-size: 13px; color: var(--color-sand); font-weight: 600; margin-bottom: 8px; }
.call-card p, .research-card p { color: var(--color-text-muted); font-size: 14px; }

.call-subtitle { color: var(--color-text-muted); font-size: 15px; margin-top: -10px; }
.call-meta-row { display: flex; gap: 30px; margin: 20px 0; font-size: 14px; padding: 16px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.call-topics ul { margin: 10px 0 0; padding-left: 20px; }
.call-body, .research-body { max-width: 700px; margin: 24px 0; }
.research-date, .research-authors { color: var(--color-text-muted); font-size: 14px; margin-bottom: 8px; }

.type-filter { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.type-filter .filter-chip {
  border: 1px solid var(--color-border); border-radius: 20px; background: none;
  padding: 6px 16px; font-size: 13px; font-family: var(--font-sans); color: var(--color-text-muted); cursor: pointer;
}
.type-filter .filter-chip.active { background: var(--color-forest); color: var(--color-white); border-color: var(--color-forest); }

.card-title-link { text-decoration: none; color: inherit; display: block; }
.card-title-link h2, .card-title-link h3 { margin: 8px 0 6px; }
.card-title-link:hover h2, .card-title-link:hover h3 { color: var(--color-forest); }
.card-authors { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; }
.card-authors a { color: var(--color-text-muted); text-decoration: underline; }
.card-authors a:hover { color: var(--color-forest); }

/* ===== Home credibility strip ===== */
.demo-credibility-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.demo-credibility-strip .card { text-decoration: none; color: inherit; }
.demo-credibility-strip .card h3 { font-size: 18px; margin: 8px 0 8px; }
.demo-credibility-strip .card p { font-size: 14px; color: var(--color-text-muted); margin: 0; }
.demo-credibility-strip .card:hover { border-color: var(--color-forest); }
.demo-credibility-strip .learn-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-forest);
}

/* ===== Events ===== */
.event-tab { color: var(--color-text-muted); text-decoration: none; padding-bottom: 8px; }
.event-tab.active { color: var(--color-forest); font-weight: 600; border-bottom: 2px solid var(--color-forest); }
.events-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.event-card { text-decoration: none; color: inherit; }
.event-thumb { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; margin-bottom: 12px; }
.event-card h3 { font-size: 17px; margin: 6px 0 10px; }

.event-meta { color: var(--color-text-muted); font-size: 14px; margin-bottom: 20px; }
.event-gallery {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin: 20px 0;
  scroll-snap-type: x mandatory;
}
.gallery-image {
  height: 320px;
  border-radius: 4px;
  cursor: pointer;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.gallery-caption { font-size: 12px; color: var(--color-text-muted); font-style: italic; margin-bottom: 30px; }
.event-body { max-width: 700px; }

/* ===== Mobile header, subnav & grids =====
   Placed at the end of the file on purpose. CSS resolves equal-specificity rules by
   source order, not just by whether they're inside a media query — a mobile-only rule
   declared BEFORE the desktop rule it's meant to override will still lose to it. Keeping
   every mobile override down here guarantees it wins against anything above it, present
   or future, without needing !important or higher-specificity selectors. */
@media (max-width: 860px) {
  :root {
    --header-height: 96px; /* collapsed height, menu closed — .subnav's sticky offset depends on this */
  }
  .site-header {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: auto;
    padding: 14px 20px;
  }
  .site-logo img {
    height: 64px;
  }
  .nav-toggle {
    display: flex;
  }
  .site-header-right {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    order: 3;
    padding-top: 16px;
  }
  .site-header-right.is-open {
    display: flex;
  }
  .site-header-utility {
    order: 1;
    gap: 18px;
    margin-bottom: 14px;
  }
  .site-nav {
    order: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .site-nav a {
    display: block;
    width: 100%;
    padding: 10px 0;
  }
  .nav-dropdown {
    width: 100%;
  }
  .nav-dropdown > span {
    display: block;
    padding: 10px 0;
  }
  .nav-dropdown-menu {
    display: none;
    position: static;
    border: none;
    background: none;
    padding: 0 0 0 16px;
    min-width: 0;
  }
  .nav-dropdown.is-open .nav-dropdown-menu {
    display: block;
  }
  .nav-dropdown-menu a {
    color: var(--color-white);
    opacity: 0.85;
    padding: 8px 0;
  }
  .give-btn {
    display: inline-block;
    margin-top: 10px;
    text-align: center;
  }

  /* Subnav: one scrollable row, no wrapping into uneven columns */
  .subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 18px;
  }
  .subnav::-webkit-scrollbar {
    display: none;
  }
  .subnav a {
    flex-shrink: 0;
  }

  /* Applying the confirmed fix everywhere else on the site with this same pattern:
     Staff/Board grids, Staff's own 4-column grid, Programs/Research/CFP/Events
     listings, the homepage Featured strip, and the History timeline. */
  .distinguished-row,
  .resident-row,
  .program-layout,
  .exec-row,
  .board-row,
  .staff-row,
  .programs-grid,
  .calls-grid,
  .research-grid,
  .events-grid,
  .demo-credibility-strip,
  .timeline-entry {
    grid-template-columns: 1fr;
  }

  /* Long single-word page titles (e.g. "Opportunities") have no natural break point,
     so they can overflow the screen at the hero's desktop font size. Shrinking the
     size and reducing side padding gives long words room; overflow-wrap is a safety
     net for anything still too wide to fit even one letter's worth. */
  .homepage-identity,
  .vision-section,
  .section-banner {
    padding-left: 20px;
    padding-right: 20px;
  }
  .homepage-identity h1,
  .section-banner h1 {
    font-size: 36px;
    overflow-wrap: break-word;
  }
  .vision-quote {
    font-size: 24px;
  }

  /* Vision-section/continue-block buttons: on desktop these sit side by side, so a + a only
     needed a left margin. Below this width they wrap onto their own lines instead --
     with no vertical gap defined, they end up touching. Stacking them explicitly,
     full-width and centered, fixes both the touching and the mismatched-width look
     when two differently-sized buttons stack on separate lines. */
  .vision-actions a,
  .continue-block a {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: center;
  }
  .vision-actions a + a,
  .continue-block a + a {
    margin-left: auto;
    margin-top: 12px;
  }
}