:root {
  --velvet-orchid: #570564;
  --soft-periwinkle: #8377d1;
  --periwinkle-tint: #a79cdc;
  --bone: #e9dfd3;
  --parchment: #f8f4ee;
  --shadow-grey: #1d1c1f;
  --body-text: #5c5652;

  /* Accessible shade of --soft-periwinkle (#8377d1) for small/body-size text on
     parchment backgrounds — #8377d1 measures 3.47:1 contrast (fails WCAG AA 4.5:1).
     Was #695db0 (5.05:1 on plain Parchment), but that fails at 4.36:1 wherever
     this text sits over the About Diana/About GBD backdrop's Periwinkle wash
     (.masthead-subtitle does, at normal viewport widths — confirmed by
     measuring where the wash's circle actually falls, not just assumed).
     Darkened to clear 4.5:1 against the wash too: 4.72:1 on the wash, 5.47:1
     on plain Parchment, 4.57:1 even against Bone (not currently used there,
     kept as a margin). */
  --periwinkle-shade: #6458a7;
}

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

html, body {
  height: 100%;
}

body {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--velvet-orchid);
  color: var(--parchment);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  justify-content: safe center;
  position: relative;
  overflow-x: hidden;
  padding: 3rem 1.5rem;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--velvet-orchid);
  overflow: hidden;
}

.backdrop::before {
  content: "";
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: rgba(131, 119, 209, 0.18);
  top: -20vmax;
  right: -25vmax;
}

.backdrop::after {
  content: "";
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  background: rgba(233, 223, 211, 0.06);
  bottom: -22vmax;
  left: -18vmax;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  width: 100%;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 1.625rem;
  margin-bottom: 3rem;
}

.logo {
  width: clamp(164px, 21.5vw, 250px);
  height: auto;
  color: var(--parchment);
}

.wordmark {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
  font-size: clamp(3.41rem, 9.75vw, 5.36rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--parchment);
}

.wordmark .by {
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-right: 0.25em;
  opacity: 0.85;
  vertical-align: text-top;
  position: relative;
  top: -0.05em;
}

.eyebrow {
  font-size: clamp(1.65rem, 3.75vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--periwinkle-tint);
  margin-bottom: 3rem;
}

.subhead-group {
  margin-bottom: 2.5rem;
  max-width: 560px;
}

.subhead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 400;
  color: var(--bone);
  opacity: 0.85;
}

.subhead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity 0.2s ease;
}

.subhead a:hover {
  opacity: 0.75;
}

.signup-prompt {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--periwinkle-tint);
  margin-bottom: 1.5rem;
}

.signup {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  max-width: 340px;
  flex-wrap: wrap;
  justify-content: center;
}

.signup input {
  flex: 1 1 180px;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 244, 238, 0.3);
  background: rgba(248, 244, 238, 0.08);
  color: var(--parchment);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.signup input:focus-visible {
  box-shadow: 0 0 0 3px rgba(167, 156, 220, 0.5);
}

.signup input::placeholder {
  color: rgba(248, 244, 238, 0.55);
}

.signup input:focus {
  border-color: var(--soft-periwinkle);
  background: rgba(248, 244, 238, 0.12);
}

.signup button {
  flex: 0 0 auto;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: none;
  background: var(--periwinkle-tint);
  color: var(--velvet-orchid);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.signup button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.signup-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: rgba(248, 244, 238, 0.6);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Utility: keeps a short phrase from splitting across a line break (e.g. the
   brand name "Gather By"). Pair with a manual <br> right before it to force
   which line it starts on. Only ever wraps 2-3 short words, so there's no
   overflow risk on narrow mobile widths — safe to leave on at all viewports. */
.keep-together {
  white-space: nowrap;
}

/* Skip-to-content link: hidden off-screen until keyboard-focused, then drops
   into view at the top-left corner so keyboard/screen-reader users can jump
   past the repeated nav on every page straight to <main id="main-content">. */
.skip-link {
  position: absolute;
  top: -999px;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--velvet-orchid);
  color: var(--parchment);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.skip-link:focus {
  top: 0;
}

.site-footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(248, 244, 238, 0.65);
}

/* Shared site nav — used on Approach, About, Schedule, Connect */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
}

.site-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  font-weight: 700;
  /* 20% larger than the previous 1.15rem single-line lockup. */
  font-size: 1.38rem;
  letter-spacing: 0.03em;
}

/* Nav brand now uses the stacked "GATHER / BY DESIGN" lockup (matching the
   brandbook's horizontal logo, brand-assets/GBD Horizontal Logo.jpg) instead
   of a single-line "Gather By Design". Kept as live text + CSS (not the JPG
   itself) so it still automatically recolors for nav-on-light/nav-on-dark
   instead of needing separate transparent light/dark exports of the lockup. */
.site-nav-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.site-nav-wordmark-line {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-footer-brand span {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-nav-brand .by,
.site-footer-brand .by {
  font-size: 0.65em;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.site-nav-logo {
  /* 20% larger than the previous 32px (brandbook's 32px is a minimum for the
     monogram-alone mark, not a ceiling). */
  width: 38.4px;
  height: auto;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  list-style: none;
}

.site-nav-links a {
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  /* Was 0.08em, footer nav links (.site-footer-links a) were 0.06em — two
     independently-picked values for the same kind of element (an uppercase
     nav label). Both now share this one value: wider than the brand book's
     2% Label/Button spec on purpose (buttons aren't uppercase; all-caps text
     conventionally needs extra room to avoid feeling cramped), but at least
     consistent with each other now instead of two arbitrary numbers. */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.site-nav-links a:hover {
  opacity: 0.7;
}

/* Full opacity (not dimmed) so the active-page link keeps the same text
   color contrast as every other nav link — dimming it via opacity dropped
   velvet-orchid-on-parchment to ~3.58:1, below the 4.5:1 AA minimum for this
   12.8px label. The underline carries the "you are here" indicator instead. */
.site-nav-links a.is-active {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.site-nav-cta {
  padding: 0.55rem 1.35rem;
  border-radius: 999px;
  font-weight: 700 !important;
}

body.nav-on-dark .site-nav-brand,
body.nav-on-dark .site-nav-links a {
  color: var(--parchment);
}

/* Header is a direct child of <body> (not nested inside .approach-hero) so it
   keeps a real "banner" landmark role for assistive tech. On index.html
   the page background itself is parchment (light) and only the hero band
   below is purple, so the header needs its own purple backdrop to visually
   continue that band. On connect.html the whole page is already purple, so
   this is a harmless no-op there. */
body.nav-on-dark > .site-nav {
  background: var(--velvet-orchid);
}

body.nav-on-dark .site-nav-cta {
  background: var(--parchment);
  color: var(--velvet-orchid) !important;
}

body.nav-on-light .site-nav-brand,
body.nav-on-light .site-nav-links a {
  color: var(--velvet-orchid);
}

body.nav-on-light .site-nav-cta {
  background: var(--velvet-orchid);
  color: var(--parchment) !important;
}

@media (max-width: 640px) {
  .site-nav {
    justify-content: center;
    text-align: center;
  }

  .site-nav-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
    gap: 1rem;
  }
}

/* Shared rich footer — brand mark + copyright + nav links */

.site-footer-full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem clamp(1.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(29, 28, 31, 0.1);
  color: inherit;
}

.site-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  color: inherit;
  letter-spacing: 0.03em;
}

.site-footer-logo {
  /* Brandbook minimum for the monogram-alone mark is 32px; matches .site-nav-logo. */
  width: 32px;
  height: auto;
}

.site-footer-copy {
  font-size: 0.75rem;
  /* 0.6 dropped shadow-grey-on-parchment (light-theme footers) to ~4.34:1,
     just under the 4.5:1 AA minimum for this 12px text. 0.7 clears it on
     every footer variant (light and dark) without changing the de-emphasized
     look. */
  opacity: 0.7;
}

.site-footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.site-footer-links a {
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  /* Matches .site-nav-links a's tracking now (see its comment) — this value
     was already 0.06em; the header nav was the one that moved to meet it. */
  letter-spacing: 0.06em;
  color: inherit;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.site-footer-links a:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  .site-footer-full {
    justify-content: center;
    text-align: center;
  }
}

/* Shared buttons — used sitewide */

.btn {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  /* Matched to the brandbook's Label/Button tracking spec (+2%) — was 3%. */
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-light {
  background: var(--parchment);
  color: var(--velvet-orchid);
}

.btn-dark {
  background: var(--velvet-orchid);
  color: var(--parchment);
}

/* Material Symbols (Rounded) — shared icon base.
   Usage: <span class="material-symbols-rounded" aria-hidden="true">icon_name</span>
   Fill/weight/grade are locked per brand spec; set font-size + the opsz axis
   per usage context so the icon renders crisp at its actual display size. */

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

@media (max-width: 480px) {
  body {
    padding: 2rem 1.25rem;
  }

  .logo-lockup {
    gap: 0.975rem;
    margin-bottom: 1.75rem;
  }

  .logo {
    width: clamp(73px, 23.4vw, 109px);
  }

  .wordmark {
    font-size: clamp(1.76rem, 10.4vw, 2.41rem);
  }

  .eyebrow {
    font-size: clamp(1rem, 5.5vw, 1.3rem);
    margin-bottom: 1.75rem;
  }

  .subhead-group {
    margin-bottom: 1.5rem;
  }

  .signup-prompt {
    margin-bottom: 1.25rem;
  }

  .signup {
    flex-direction: column;
  }
  .signup input {
    flex: 0 0 auto;
    width: 100%;
  }
  .signup button {
    width: 100%;
  }
}