/* ==========================================================================
   Logansport Great Banquet — Design System
   ========================================================================== */

:root {
  /* Color palette */
  --color-wine-900: #5c1a28;
  --color-wine-700: #7b2536;
  --color-wine-600: #8f2c40;
  --color-wine-500: #a3384e;
  --color-gold-600: #b3862c;
  --color-gold-500: #c89b3c;
  --color-gold-300: #e3c580;
  --color-cream-100: #fbf7f0;
  --color-cream-200: #f5ede0;
  --color-cream-300: #ece0cc;
  --color-ink-900: #241f1a;
  --color-ink-700: #423a32;
  --color-ink-500: #6b6058;
  --color-ink-300: #a49a8f;
  --color-white: #ffffff;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --content-width: 1120px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(36, 31, 26, 0.08);
  --shadow-md: 0 8px 24px rgba(36, 31, 26, 0.10);
  --shadow-lg: 0 20px 48px rgba(36, 31, 26, 0.16);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink-900);
  background: var(--color-cream-100);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--color-wine-900);
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-4);
}

ul {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--color-wine-900);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--color-gold-500);
  color: var(--color-wine-900);
  box-shadow: var(--shadow-sm);
}

.btn-outline {
  background: transparent;
  border-color: rgba(251, 247, 240, 0.6);
  color: var(--color-white);
}

.btn-secondary {
  background: var(--color-wine-900);
  color: var(--color-cream-100);
}

/* ---- Announcement bar ---- */
.announcement {
  background: var(--color-ink-900);
  color: var(--color-cream-200);
  font-size: 0.9rem;
}

.announcement .container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

/* Mirrors the close button's footprint so the text column centers in
   the space actually available, instead of the full bar width — that
   way long announcements never run underneath the close button. */
.announcement-spacer {
  width: 1.6rem;
  flex-shrink: 0;
}

.announcement-text {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.announcement a {
  color: var(--color-gold-300);
  font-weight: 600;
  text-decoration: none;
}

.announcement-close {
  flex-shrink: 0;
  width: 1.6rem;
  background: none;
  border: none;
  color: var(--color-cream-300);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: var(--space-1);
}

.announcement[hidden] {
  display: none;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--color-cream-300);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--color-wine-600), var(--color-wine-900));
  color: var(--color-gold-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text .brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-wine-900);
}

.brand-text .brand-subtitle {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.nav-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink-900);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
}

.main-nav li {
  display: flex;
  align-items: center;
}

.main-nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink-700);
  padding: var(--space-2) var(--space-1);
  transition: color 0.15s ease;
  white-space: nowrap;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: var(--space-1);
  right: var(--space-1);
  bottom: 0;
  height: 2px;
  background: var(--color-gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}

.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
  color: var(--color-wine-700);
}

.nav-divider {
  width: 1px;
  height: 22px;
  background: var(--color-cream-300);
  margin-inline: var(--space-2);
  flex-shrink: 0;
}

.nav-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: transparent;
  color: var(--color-wine-900) !important;
  border: 1.5px solid var(--color-wine-900);
  padding: 0.42rem var(--space-4) !important;
  border-radius: 999px;
  font-size: 0.85rem;
}

.nav-lock svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.nav-lock::after {
  content: none !important;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  color: var(--color-cream-100);
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(200, 155, 60, 0.35), transparent 45%),
    radial-gradient(circle at 85% 0%, rgba(163, 56, 78, 0.5), transparent 55%),
    linear-gradient(160deg, var(--color-wine-900) 0%, #401320 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero .container {
  position: relative;
  padding-block: var(--space-24) var(--space-16);
  max-width: 760px;
}

.hero-compact .container {
  padding-block: var(--space-16) var(--space-12);
  max-width: 720px;
}

.hero-compact h1 {
  font-size: clamp(2rem, 4.2vw, 2.8rem);
}

.hero-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-gold-300);
  margin-bottom: var(--space-4);
}

.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: var(--space-4);
}

.hero p.lede {
  font-size: 1.15rem;
  color: var(--color-cream-200);
  max-width: 56ch;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---- Sections ---- */
.section {
  padding-block: var(--space-16);
}

.section-alt {
  background: var(--color-cream-200);
}

.section-header {
  max-width: 640px;
  margin-bottom: var(--space-8);
}

.section-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gold-600);
  margin-bottom: var(--space-2);
}

.section-header p {
  color: var(--color-ink-700);
  font-size: 1.05rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: center;
}

/* ---- Scripture callout ---- */
.scripture {
  background: linear-gradient(145deg, var(--color-wine-700), var(--color-wine-900));
  color: var(--color-cream-100);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.scripture blockquote {
  margin: 0 auto var(--space-4);
  max-width: 60ch;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-style: italic;
  line-height: 1.5;
}

.scripture cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-gold-300);
  letter-spacing: 0.03em;
}

/* ---- Article prose ---- */
.article {
  max-width: 740px;
  margin-inline: auto;
}

.article h2 {
  font-size: 1.6rem;
  margin-top: var(--space-12);
}

.article h2:first-child {
  margin-top: 0;
}

.article p {
  color: var(--color-ink-700);
  font-size: 1.05rem;
}

/* ---- Check list ---- */
.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.check-list li {
  position: relative;
  padding-left: 2.25rem;
  color: var(--color-ink-700);
  font-size: 1.02rem;
}

.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-gold-500);
  color: var(--color-wine-900);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-cream-300);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.weekend-card {
  border-top: 4px solid var(--color-gold-500);
}

.weekend-card .weekend-kind {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-wine-700);
  margin-bottom: var(--space-2);
}

.weekend-card h3 {
  margin-bottom: var(--space-1);
  font-size: 1.35rem;
}

.weekend-card .weekend-dates {
  color: var(--color-ink-500);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.weekend-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: 0.95rem;
  margin: 0;
}

.weekend-card dt {
  font-weight: 700;
  color: var(--color-ink-700);
}

.weekend-card dd {
  margin: 0;
  color: var(--color-ink-700);
}

.weekend-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-ink-500);
  padding: var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-ink-300);
}

/* ---- Person cards (Contact page) ---- */
.person-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.person-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-cream-200);
  color: var(--color-wine-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.person-card h3 {
  margin-bottom: 0.1rem;
  font-size: 1.02rem;
}

.person-role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gold-600);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.person-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.88rem;
}

.person-links a {
  color: var(--color-wine-700);
  text-decoration: none;
  word-break: break-word;
}

.person-links .none {
  color: var(--color-ink-300);
}

/* ---- Info strip (gathering + kairos) ---- */
.info-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.info-panel {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-cream-300);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.info-panel .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-cream-200);
  color: var(--color-wine-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-panel h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-1);
}

.info-panel p {
  color: var(--color-ink-700);
  margin-bottom: var(--space-1);
}

/* ---- Quick links ---- */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

.quick-link-card {
  display: block;
  text-decoration: none;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border: 1px solid var(--color-cream-300);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.quick-link-card .icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-200);
  color: var(--color-wine-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.quick-link-card h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-1);
  color: var(--color-wine-900);
}

.quick-link-card p {
  font-size: 0.9rem;
  color: var(--color-ink-500);
  margin-bottom: 0;
}

.quick-link-card.locked {
  background: var(--color-ink-900);
  border-color: var(--color-ink-900);
}

.quick-link-card.locked h3 {
  color: var(--color-white);
}

.quick-link-card.locked p {
  color: var(--color-cream-300);
}

.quick-link-card.locked .icon {
  background: rgba(251, 247, 240, 0.12);
  color: var(--color-gold-300);
}

/* ---- CTA band ---- */
.cta-band {
  background: linear-gradient(145deg, var(--color-gold-500), var(--color-gold-600));
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.cta-band h2 {
  color: var(--color-wine-900);
  margin-bottom: var(--space-2);
}

.cta-band p {
  color: var(--color-wine-900);
  margin-bottom: 0;
  opacity: 0.85;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--color-ink-900);
  color: var(--color-cream-300);
  padding-block: var(--space-16) var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-brand .brand-title {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.footer-brand p {
  color: var(--color-ink-300);
  font-size: 0.9rem;
  max-width: 40ch;
}

.footer-col h4 {
  color: var(--color-white);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin-bottom: var(--space-4);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  color: var(--color-cream-300);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-bottom {
  border-top: 1px solid rgba(251, 247, 240, 0.12);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-ink-300);
}

.footer-bottom a {
  color: var(--color-ink-300);
  text-decoration: underline;
}

/* ---- Hover effects ----
   Scoped to devices with a real pointer that can actually hover (mice,
   trackpads). Touch screens don't get a "hover" — they get a tap that
   Safari/Chrome then treat as a stuck hover state until something else
   is tapped, which is why links or buttons could appear highlighted
   after being tapped on a phone. Gating all :hover rules behind this
   media query prevents that everywhere on the site. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }

  .btn-primary:hover {
    background: var(--color-gold-300);
    box-shadow: var(--shadow-md);
  }

  .btn-outline:hover {
    background: rgba(251, 247, 240, 0.12);
    border-color: var(--color-white);
  }

  .btn-secondary:hover {
    background: var(--color-wine-700);
  }

  .announcement a:hover {
    text-decoration: underline;
  }

  .announcement-close:hover {
    color: var(--color-white);
  }

  .main-nav a:hover {
    color: var(--color-wine-700);
  }

  .main-nav a:hover::after {
    transform: scaleX(1);
  }

  .nav-lock:hover {
    background: var(--color-wine-900);
    color: var(--color-cream-100) !important;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }

  .person-links a:hover {
    text-decoration: underline;
  }

  .quick-link-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-gold-500);
  }

  .footer-col a:hover {
    color: var(--color-gold-300);
    text-decoration: underline;
  }

  .resource-list a.resource-link:hover {
    background: var(--color-wine-900);
    color: var(--color-cream-100);
  }
}

/* ---- Community Area ---- */
.form-banner {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
  font-size: 0.92rem;
  max-width: 420px;
  margin-inline: auto;
}

.form-banner-error {
  background: #fbeaee;
  color: var(--color-wine-600);
  border: 1px solid #f0c4cf;
}

.form-banner-success {
  background: #e5f3e9;
  color: #2f6a45;
  border: 1px solid #bfe3ca;
}

.community-auth {
  max-width: 420px;
  margin-inline: auto;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-cream-300);
}

.community-auth .field {
  margin-bottom: var(--space-4);
}

.community-auth label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: var(--color-ink-700);
}

.community-auth input[type="password"] {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-cream-300);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-ink-900);
}

.community-auth input:focus {
  outline: 2px solid var(--color-gold-500);
  outline-offset: 1px;
}

.community-auth .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

.notice-panel {
  background: linear-gradient(145deg, var(--color-gold-500), var(--color-gold-600));
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  max-width: 800px;
  margin: 0 auto var(--space-12);
}

.notice-panel .icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(92, 26, 40, 0.14);
  color: var(--color-wine-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notice-panel h3 {
  color: var(--color-wine-900);
  margin-bottom: var(--space-1);
}

.notice-panel p {
  color: var(--color-wine-900);
  opacity: 0.88;
  margin-bottom: 0;
}

.resource-card h3 {
  font-size: 1.15rem;
}

.resource-group-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold-600);
  font-weight: 700;
  margin: var(--space-5) 0 var(--space-2);
}

.resource-group-title:first-of-type {
  margin-top: 0;
}

.resource-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
}

.resource-list a.resource-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--color-cream-200);
  color: var(--color-wine-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.resource-list a.resource-link svg {
  flex-shrink: 0;
}

.resource-list .resource-pending {
  display: block;
  padding: 0.65rem 0.9rem;
  color: var(--color-ink-300);
  font-size: 0.9rem;
  font-style: italic;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .info-strip {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Collapse to the hamburger menu well before the nav has any chance to
   crowd or wrap — 8 links plus the Community Area badge need more room
   than a typical 13"–14" laptop window provides. */
@media (max-width: 1020px) {
  .nav-toggle {
    display: block;
  }

  /* The old approach capped the dropdown at "90% of the viewport
     height" (90vh, then 90dvh) and just hoped that was less than the
     space actually left below the header. It wasn't always: a flat
     percentage of the *whole* screen has no idea how tall the header
     sitting above the dropdown is, so on some screens 90% of the full
     viewport was taller than what was actually free underneath the
     header — pushing the last item (the Community Area pill) partly
     below the visible screen, where its bottom edge got sliced off by
     the edge of the viewport itself, not by any overflow/clipping rule
     in this stylesheet.

     Fixing that for good means the dropdown's height has to be defined
     as "whatever's left after the header," not as a guessed slice of
     the whole screen. Giving the header a known, fixed height here lets
     the dropdown's max-height subtract that exact number via calc(), so
     the dropdown can never reach further than the true bottom of the
     visible viewport, however tall or short the header actually is. */
  .site-header .container {
    min-height: 88px;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-cream-100);
    border-bottom: 1px solid var(--color-cream-300);
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .main-nav.open {
    /* vh fallback for browsers without dvh support, superseded below. */
    max-height: calc(100vh - 88px);
    /* dvh tracks the real, currently-visible viewport on iOS Safari
       (excluding the address bar/toolbar), and env(safe-area-inset-bottom)
       additionally reserves room for the home-indicator bar on devices
       that have one, so the dropdown's floor never lands underneath it
       either. 88px matches the header's min-height above. */
    max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Setting only overflow-y forces overflow-x to compute as "auto"
       too (per spec), which was silently clipping the right edge of
       anything butting up against the container width — including the
       Community Area pill's rounded border. Pin it to hidden so only
       vertical scrolling is ever possible. */
    overflow-x: hidden;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* Extra bottom padding folds in the home-indicator safe area too,
       so the last item never sits flush against it. */
    padding: var(--space-4) var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }

  .main-nav li {
    width: 100%;
  }

  .main-nav a {
    display: block;
    padding: var(--space-3) var(--space-1);
    width: 100%;
    border-bottom: 1px solid var(--color-cream-300);
  }

  .main-nav a::after {
    display: none;
  }

  /* Same specificity issue as nav-lock below: ".main-nav li" (a class
     + an element) beats plain ".nav-divider", so its width:100% and
     display:flex were winning over this — leaving the divider's
     height and background color stretched full-width instead of
     hidden. Qualifying the selector settles it. */
  .main-nav li.nav-divider {
    display: none;
  }

  /* The floating pill (border-radius: 999px, sized to its own content,
     sitting near the bottom of a scrolling container) is the one shape
     that kept getting reported as clipped, through several different
     supposed causes and fixes. Rather than continue tuning the space
     around that shape, this removes the shape itself on mobile: instead
     of an outlined oval floating below the list, it's a plain filled
     full-width row, laid out exactly like every other row in the list
     (no absolute-positioned edges, no border, no border-radius corner
     for a clipping container to catch). There's nothing left for a
     viewport/overflow edge case to cut into.
     ".main-nav a" (one class + one element) outranks the plain
     ".nav-lock" class on specificity, which is why this needs to repeat
     the class the same way. */
  .main-nav a.nav-lock {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-1) !important;
    background: var(--color-wine-900);
    color: var(--color-cream-100) !important;
    border: none !important;
    border-radius: var(--radius-sm);
  }
}

@media (max-width: 760px) {
  .hero .container {
    padding-block: var(--space-16) var(--space-12);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .cta-band {
    flex-direction: column;
    align-items: flex-start;
  }
}