/*
 * McDowell Family Reunion 2026
 * about.css — about.html stylesheet
 */

:root {
  --ivory:   #FAF7F2;
  --cream:   #F2EDE4;
  --gold:    #C9A84C;
  --gold-lt: #E2C97E;
  --espresso:#2C1F0F;
  --brown:   #5C3D1E;
  --muted:   #8C7B6B;
  --rule:    rgba(201,168,76,0.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--ivory);
  color: var(--espresso);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  padding-top: 60px; /* clear fixed nav */
}

/* ─── NAV ─────────────────────────────────────────────── */
/* ════════════════════════════════════════════════
   SITE NAV  — works on all screen sizes
   ════════════════════════════════════════════════ */

/* ── SITE NAV ───────────────────────────────────────── */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9998;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2.5rem;
  background: rgba(44,31,15,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,168,76,0.25);
}
.site-nav .nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: #FAF7F2; text-decoration: none;
  flex-shrink: 0;
}
/* Desktop links */
.site-nav .nav-links {
  display: flex; gap: 2rem;
  list-style: none; margin: 0; padding: 0;
  align-items: center;
}
.site-nav .nav-links a {
  font-size: .8rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(250,247,242,.6);
  text-decoration: none; transition: color .2s;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active { color: #C9A84C; }
/* Logout / action link */
.nav-logout {
  font-size: .7rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(250,247,242,.45);
  background: none; border: 1px solid rgba(201,168,76,.25);
  padding: .35rem .9rem; cursor: pointer;
  text-decoration: none; transition: all .2s;
}
.nav-logout:hover { color: #C9A84C; border-color: #C9A84C; }
/* Burger button — hidden on desktop */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px; height: 18px;
  background: none; border: none;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 100%; height: 2px;
  background: rgba(250,247,242,.85);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Mobile — 768px and below */
@media screen and (max-width: 768px) {
  .site-nav { padding: 1rem 1.25rem; }
  /* Show burger */
  .nav-burger { display: -webkit-flex; display: flex; }
  /* Hide logout in nav bar — it's inside the open menu */
  .site-nav > .nav-logout { display: none; }
  .site-nav .nav-links { display: none; }
  /* Full-screen overlay menu */
  .site-nav .nav-links { display: none; } /* desktop links hidden on mobile */
  .site-nav .nav-links li { display: block; text-align: center; }
  .site-nav .nav-links a {
    font-size: 1rem; letter-spacing: .22em;
    color: rgba(250,247,242,.7);
    display: block; padding: .25rem 0;
  }
  .site-nav .nav-links a:hover,
  .site-nav .nav-links a.active { color: #C9A84C; }
  /* Logout inside the open menu */
  .site-nav .nav-links .nav-logout-mobile {
    display: block;
    margin-top: 1rem;
    font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(250,247,242,.35);
    text-decoration: none; border: 1px solid rgba(201,168,76,.2);
    padding: .5rem 1.5rem;
    transition: all .2s;
  }
  .site-nav .nav-links .nav-logout-mobile:hover { color: #C9A84C; border-color: #C9A84C; }
}

/* ─── HERO ────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 60px);
  display: flex; align-items: center; justify-content: center;
  background-color: #2C1F0F !important;
  background: var(--espresso) !important;
  overflow: hidden;
}
.hero-bg-pattern {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(201,168,76,.08) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(201,168,76,.04) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(201,168,76,.04) 80px);
}
.hero-ornament {
  position: absolute; width: min(520px, 90vw); height: min(520px, 90vw);
  border: 1px solid rgba(201,168,76,.18); border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.hero-ornament::before {
  content: ''; position: absolute; inset: 22px;
  border: 1px solid rgba(201,168,76,.1); border-radius: 50%;
}
.hero-content { position: relative; text-align: center; padding: 2rem; }
.hero-eyebrow { font-size: .95rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 300;
  line-height: 1.05; color: var(--ivory); margin-bottom: 1rem;
}
.hero-title em { font-style: italic; color: var(--gold-lt); }
.hero-rule { width: 80px; height: 1px; background: var(--gold); margin: 1.5rem auto; }
.hero-sub { font-size: .92rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,247,242,.5); }
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.hero-scroll span { font-size: 1.05rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(201,168,76,.6); }
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ─── LAYOUT ──────────────────────────────────────────── */
section { padding: 6rem 0; }
.container { max-width: 900px; margin: 0 auto; padding: 0 2rem; }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.section-label { font-size: 1.05rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem,4vw,3rem); font-weight: 400; line-height: 1.15; color: var(--espresso); margin-bottom: 1.5rem; }
.section-title em { font-style: italic; color: var(--brown); }
.ornament-line { width: 60px; height: 1px; background: var(--gold); margin-bottom: 2.5rem; }
.body-text { font-size: 1.05rem; line-height: 1.9; color: var(--brown); margin-bottom: 1.5rem; }
.body-text strong { font-weight: 600; color: var(--espresso); }

/* ─── PULL QUOTE ──────────────────────────────────────── */
.pull-quote {
  position: relative; margin: 4rem 0; padding: 3rem;
  border-left: 2px solid var(--gold); background: var(--cream);
}
.pull-quote::before {
  content: '\201C'; position: absolute; top: .5rem; left: 1.5rem;
  font-family: 'Cormorant Garamond', serif; font-size: 5rem;
  color: var(--gold); opacity: .4; line-height: 1;
}
.pull-quote p { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-style: italic; font-weight: 400; line-height: 1.55; color: var(--espresso); }
.pull-quote cite { display: block; margin-top: 1rem; font-family: 'Montserrat', sans-serif; font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-style: normal; }

/* ─── THREE PILLARS ───────────────────────────────────── */
.pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1px solid var(--rule); margin: 3rem 0; }
.pillar { padding: 2.5rem 2rem; border-right: 1px solid var(--rule); position: relative; }
.pillar:last-child { border-right: none; }
.pillar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-lt), var(--gold)); }
.pillar-icon { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; font-weight: 300; color: var(--gold); margin-bottom: .75rem; line-height: 1; }
.pillar-name { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--espresso); margin-bottom: .25rem; }
.pillar-origin { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brown); margin-bottom: .75rem; opacity: .75; }
.pillar-text { font-size: .95rem; line-height: 1.75; color: var(--brown); }

/* ─── TIMELINE ────────────────────────────────────────── */
.timeline { position: relative; padding: 2rem 0; }
.timeline::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold) 10%, var(--gold) 90%, transparent);
  transform: translateX(-50%);
}
.tl-item { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 2.5rem; align-items: start; margin-bottom: 4rem; }
.tl-item:nth-child(odd) .tl-content  { grid-column: 1; text-align: right; }
.tl-item:nth-child(odd) .tl-dot      { grid-column: 2; }
.tl-item:nth-child(odd) .tl-empty    { grid-column: 3; }
.tl-item:nth-child(even) .tl-empty   { grid-column: 1; }
.tl-item:nth-child(even) .tl-dot     { grid-column: 2; }
.tl-item:nth-child(even) .tl-content { grid-column: 3; text-align: left; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--gold); margin-top: .35rem; flex-shrink: 0; position: relative; }
.tl-dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); }
.tl-year { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 600; color: var(--gold); line-height: 1; margin-bottom: .4rem; }
.tl-place { font-size: 1.05rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.tl-family { display: inline-block; font-size: 1rem; letter-spacing: .15em; text-transform: uppercase; padding: .2rem .6rem; border: 1px solid var(--rule); color: var(--gold); background: var(--cream); margin-bottom: .5rem; }
.tl-text { font-size: 1rem; line-height: 1.7; color: var(--brown); }
.tl-text strong { color: var(--espresso); font-weight: 600; }

/* ─── LINEAGE DEEP-DIVES ──────────────────────────────── */
.lineage-section { background: var(--cream); }
.lineage-block { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; padding: 3.5rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.lineage-block:last-child { border-bottom: none; }
.lineage-left { position: sticky; top: 6rem; }
.lineage-surname { font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; font-weight: 600; line-height: 1; color: var(--espresso); margin-bottom: .4rem; }
.lineage-badge { font-size: 1rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ivory); background: var(--gold); padding: .25rem .75rem; display: inline-block; margin-bottom: .75rem; }
.lineage-span { font-size: 1.05rem; color: var(--muted); line-height: 1.8; }
.lineage-span strong { color: var(--brown); font-weight: 500; }

.ancestor-row { display: flex; flex-direction: column; gap: .15rem; margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: var(--ivory); border-left: 3px solid var(--gold); }
.ancestor-name { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600; color: var(--espresso); }
.ancestor-dates { font-size: 1rem; color: var(--muted); letter-spacing: .08em; }
.ancestor-note { font-size: .95rem; color: var(--brown); line-height: 1.6; margin-top: .2rem; }

.children-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.child-pill { font-size: .95rem; letter-spacing: .07em; padding: .25rem .75rem; border: 1px solid var(--rule); color: var(--brown); background: var(--ivory); }

/* ─── MIGRATION ───────────────────────────────────────── */
.migration-section { background: var(--espresso); color: var(--ivory); }
.migration-section .section-title { color: var(--ivory); }
.migration-section .section-title em { color: var(--gold-lt); }
.migration-section .body-text { color: rgba(250,247,242,.7); }
.migration-section .body-text strong { color: var(--ivory); }
.migration-path { display: flex; align-items: flex-start; margin: 3rem 0; flex-wrap: wrap; }
.migration-stop { display: flex; align-items: flex-start; }
.stop-box { text-align: center; min-width: 130px; padding: 0 .5rem; }
.stop-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); margin: 0 auto .6rem; }
.stop-dot.large { width: 18px; height: 18px; box-shadow: 0 0 0 4px rgba(201,168,76,.2); }
.stop-era { font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .2rem; }
.stop-place { font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 600; color: var(--ivory); line-height: 1.2; }
.stop-state { font-size: .95rem; color: rgba(250,247,242,.45); letter-spacing: .1em; text-transform: uppercase; margin-top: .15rem; }
.migration-arrow { color: var(--gold); font-size: 1.2rem; opacity: .5; align-self: flex-start; padding-top: .2rem; }

/* ─── CTA ─────────────────────────────────────────────── */
.reunion-section { background: var(--gold); }
.reunion-section .section-label { color: var(--espresso); }
.reunion-section .section-title { color: var(--espresso); }
.reunion-section .ornament-line { background: var(--espresso); }
.reunion-section .body-text { color: rgba(44,31,15,.75); }
.reunion-cta { display: inline-block; margin-top: 1rem; padding: .85rem 2.5rem; background: var(--espresso); color: var(--ivory); font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .2s; }
.reunion-cta:hover { background: var(--brown); }

/* ─── FOOTER ──────────────────────────────────────────── */
footer { background: var(--espresso); color: rgba(250,247,242,.4); text-align: center; padding: 2.5rem; font-size: .95rem; letter-spacing: .15em; text-transform: uppercase; }
footer a { color: var(--gold); text-decoration: none; }

/* ─── ANIMATIONS ──────────────────────────────────────── */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 860px) {
  .hero-ornament { width: 280px; height: 280px; }
  nav { padding: 1rem 1.5rem; }

  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--rule); }
  .pillar:last-child { border-bottom: none; }
  .timeline::before { left: 1.5rem; }
  .tl-item { grid-template-columns: 3rem 1fr; gap: 0 1rem; }
  .tl-item:nth-child(odd) .tl-content,
  .tl-item:nth-child(even) .tl-content { grid-column: 2; text-align: left; }
  .tl-item:nth-child(odd) .tl-dot,
  .tl-item:nth-child(even) .tl-dot { grid-column: 1; }
  .tl-empty { display: none; }
  .lineage-block { grid-template-columns: 1fr; gap: 1.5rem; }
  .lineage-left { position: static; }
  .migration-arrow { display: none; }
}
  
/* ── NAV OVERLAY (body-level, not inside nav) ────────── */
#navOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  background: rgba(44,31,15,.97);
  z-index: 9999;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2rem;
  list-style: none; margin: 0; padding: 0;
}
#navOverlay.is-open {
  display: -webkit-flex;
  display: flex;
}
#navOverlay li { display: block; text-align: center; }
#navOverlay a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(250,247,242,.7);
  text-decoration: none; display: block;
  padding: .4rem 0; transition: color .2s;
}
#navOverlay a:hover,
#navOverlay a.active { color: #C9A84C; }
#navOverlay .nav-logout-mobile {
  margin-top: .5rem;
  font-size: .75rem; letter-spacing: .2em;
  color: rgba(250,247,242,.35) !important;
  border: 1px solid rgba(201,168,76,.2);
  padding: .5rem 1.5rem !important; transition: all .2s;
}
#navOverlay .nav-logout-mobile:hover {
  color: #C9A84C !important; border-color: #C9A84C;
}