
:root{
  --navy:#0b2f55;
  --navy-2:#123f6d;
  --blue:#b9dff3;
  --blue-2:#dceff8;
  --tile:#6bb6d2;
  --ivory:#fffaf0;
  --paper:#f7f2e8;
  --ink:#152638;
  --muted:#637181;
  --gold:#b7924d;
  --line:#c6dbe6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1.72;
}
a{color:inherit}
.topbar{
  position:sticky;top:0;z-index:30;
  min-height:62px;padding:11px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:rgba(255,250,240,.94);
  border-bottom:1px solid rgba(11,47,85,.12);
  backdrop-filter:blur(12px)
}
.brand{display:flex;gap:9px;align-items:center;text-decoration:none;color:var(--navy)}
.brand-mark{font-size:18px;color:var(--gold)}
.brand strong{display:block;font-size:14px;letter-spacing:.025em}
.brand small{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:#6c7884}
.top-cta{
  text-decoration:none;
  font-family:Arial,sans-serif;font-size:11px;font-weight:800;
  padding:9px 12px;border-radius:999px;
  background:var(--navy);color:#fff
}

/* hero */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100svh - 62px);
  background:linear-gradient(180deg,var(--blue-2),var(--ivory));
  padding:24px 18px 50px
}
.hero-pattern,.open-question:before,.timeline-section:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;
  background-image:
    linear-gradient(45deg,transparent 47%,var(--navy) 48%,var(--navy) 52%,transparent 53%),
    linear-gradient(-45deg,transparent 47%,var(--navy) 48%,var(--navy) 52%,transparent 53%);
  background-size:32px 32px
}
.arch-shell{
  position:relative;z-index:1;
  max-width:520px;margin:0 auto 28px;
  padding:8px;
  background:var(--navy);
  border-radius:220px 220px 22px 22px;
  box-shadow:0 20px 45px rgba(11,47,85,.18)
}
.arch-window{
  min-height:46svh;padding:9px;
  border:2px solid var(--gold);
  border-radius:210px 210px 16px 16px;
  background:var(--blue)
}
.arch-inner{
  min-height:43svh;
  display:grid;place-items:center;
  border-radius:200px 200px 10px 10px;
  background:
    radial-gradient(circle at 50% 24%,rgba(255,255,255,.85),transparent 20%),
    linear-gradient(160deg,#d8edf7 0%,#99cfe5 45%,#194c78 100%);
  color:#fff;text-align:center;padding:25px
}
.photo-label{
  max-width:210px;
  font-family:Arial,sans-serif;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.35)
}
.hero-copy{position:relative;z-index:1;max-width:790px;margin:auto;text-align:center}
.kicker,.chapter-label{
  margin:0 0 11px;
  font-family:Arial,sans-serif;font-size:10px;font-weight:850;letter-spacing:.19em;
  text-transform:uppercase;color:var(--navy-2)
}
.kicker{color:#527b9b}
h1,h2,h3{margin-top:0;color:var(--navy)}
h1{
  margin-bottom:16px;
  font-size:clamp(36px,10vw,68px);line-height:1.03;letter-spacing:-.035em
}
h1 span{color:var(--navy-2)}
h1 em{font-size:.48em;color:var(--gold);white-space:nowrap}
.hero-deck{
  max-width:650px;margin:0 auto 24px;
  color:#485e70;font-size:17px;line-height:1.6
}
.primary-button,.secondary-button{
  display:inline-block;text-decoration:none;
  padding:12px 17px;border-radius:999px;
  font-family:Arial,sans-serif;font-size:12px;font-weight:800
}
.primary-button{background:var(--navy);color:#fff}
.secondary-button{background:var(--ivory);color:var(--navy)}

/* narrative chapters */
.chapter{
  max-width:1040px;margin:auto;padding:72px 20px;
  display:grid;grid-template-columns:42px 1fr;gap:18px
}
.chapter-number{
  color:var(--gold);
  font-family:Arial,sans-serif;font-size:11px;font-weight:850;letter-spacing:.12em;
  border-top:2px solid var(--gold);padding-top:7px
}
.chapter-body{max-width:820px}
.chapter h2,.timeline-heading h2,.open-question h2,.method-section h2,.sources-section h2,.contribute-section h2{
  font-size:clamp(34px,8vw,58px);line-height:1.08;letter-spacing:-.025em;margin-bottom:22px
}
.lead{
  font-size:20px;line-height:1.65;color:#2a4559
}
.chapter p{font-size:16px}
.footnote{
  text-decoration:none;
  color:var(--navy);
  font-family:Arial,sans-serif;font-size:.65em;font-weight:900;
  vertical-align:super;margin-left:2px
}
.footnote.light{color:#d7eaf5}
.map-line{
  margin:35px 0 5px;display:flex;align-items:center;gap:9px;
  font-family:Arial,sans-serif;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  color:#567086
}
.map-line i{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),var(--tile))}
blockquote{
  margin:34px 0 0;padding:26px 22px 24px 28px;
  border-left:4px solid var(--gold);
  background:linear-gradient(90deg,#edf7fb,var(--ivory));
  font-style:italic
}
blockquote p{font-size:19px!important;margin:0;color:#314b60}

/* mother */
.mother-chapter{
  max-width:none;
  background:
    linear-gradient(rgba(255,250,240,.94),rgba(255,250,240,.94)),
    repeating-linear-gradient(45deg,var(--blue) 0 1px,transparent 1px 16px);
}
.mother-chapter>.chapter-number,.mother-chapter>.chapter-body{max-width:820px}
.mother-chapter{grid-template-columns:42px minmax(0,820px);justify-content:center}

/* timeline */
.timeline-section{
  position:relative;overflow:hidden;
  background:var(--navy);color:#eaf5fb;
  padding:76px 20px
}
.timeline-section:before{opacity:.035;background-size:40px 40px}
.timeline-heading,.timeline{position:relative;z-index:1;max-width:860px;margin:auto}
.timeline-heading h2{color:#fff}
.timeline-heading>p:last-child{max-width:690px;color:#bed4e2}
.chapter-label.pale{color:#8ed0e7}
.timeline{margin-top:50px;padding-left:27px;border-left:1px solid rgba(185,223,243,.42)}
.timeline-entry{position:relative;padding:0 0 48px 27px}
.timeline-entry:last-child{padding-bottom:0}
.timeline-dot{
  position:absolute;left:-34px;top:2px;
  width:13px;height:13px;border-radius:50%;
  background:var(--blue);border:3px solid var(--navy);box-shadow:0 0 0 1px var(--gold)
}
.timeline-place{
  margin:0 0 6px;
  font-family:Arial,sans-serif;font-size:9px;font-weight:850;letter-spacing:.18em;
  color:#8ed0e7;text-transform:uppercase
}
.timeline-entry h3{color:#fff;font-size:24px;margin-bottom:8px}
.timeline-entry p{margin:0;color:#d1e1ea;font-size:15px}

/* household */
.household-flow{margin-top:35px;border-top:1px solid var(--line)}
.person-line{
  padding:21px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:90px 1fr;gap:4px 14px;align-items:start
}
.person-line .relation{
  grid-row:1/3;
  font-family:Arial,sans-serif;font-size:9px;font-weight:850;letter-spacing:.16em;text-transform:uppercase;
  color:#7891a4;padding-top:5px
}
.person-line strong{font-size:20px;color:var(--navy)}
.person-line p{margin:0;color:#5d6b78;font-size:14px}
.person-line.unknown strong{font-style:italic;color:#446a84}
.quiet-question{
  margin-top:35px!important;padding-top:24px;
  border-top:2px solid var(--gold);
  font-style:italic;color:#435c6e
}

/* open question */
.open-question{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0b2f55,#174f7d);
  color:#fff;padding:70px 20px
}
.open-question:before{opacity:.05}
.open-question-inner{position:relative;z-index:1;max-width:800px;margin:auto;text-align:center}
.open-question h2{color:#fff}
.open-question p{max-width:650px;margin:0 auto 25px;color:#d2e6f1}
.motif{display:block;color:var(--gold);font-size:28px;margin-bottom:10px}

/* legacy */
.legacy-chapter{padding-bottom:85px}

/* method */
.method-section{
  background:#d9edf7;
  padding:72px 20px;border-top:1px solid #b9d7e5;border-bottom:1px solid #b9d7e5
}
.method-inner{max-width:900px;margin:auto}
.method-section h2{max-width:760px}
.method-section>div>p{max-width:760px;color:#425b6c}
dl{margin:34px 0 0}
dl>div{padding:18px 0;border-top:1px solid rgba(11,47,85,.17)}
dt{
  color:var(--navy);font-family:Arial,sans-serif;font-size:11px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase
}
dd{margin:5px 0 0;color:#465d6d;font-size:14px}

/* sources */
.sources-section{max-width:1000px;margin:auto;padding:75px 20px}
.sources{padding-left:22px}
.sources li{padding:18px 0 22px 8px;border-bottom:1px solid var(--line)}
.sources strong{color:var(--navy);font-size:16px}
.sources p{margin:5px 0 7px;color:#5a6976;font-size:14px}
.sources a{
  font-family:Arial,sans-serif;font-size:11px;font-weight:800;color:var(--navy-2)
}
.priority-lead{
  margin-top:38px;padding:25px;
  border:1px dashed #83abc0;border-radius:18px;background:#eef7fb
}
.priority-lead span{
  font-family:Arial,sans-serif;font-size:9px;font-weight:900;letter-spacing:.15em;color:#8a6c33
}
.priority-lead h3{font-size:24px;margin:7px 0}
.priority-lead p{margin-bottom:0;color:#4d6272}

/* contribute */
.contribute-section{
  position:relative;background:var(--navy);color:#fff;padding:75px 20px
}
.contribute-inner{max-width:800px;margin:auto}
.contribute-section h2{color:#fff}
.contribute-inner>p{color:#d2e3ec}
.contribute-icons{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:28px 0
}
.contribute-icons span{
  text-align:center;padding:10px;border:1px solid rgba(185,223,243,.25);border-radius:999px;
  font-family:Arial,sans-serif;font-size:10px;font-weight:800;color:#d8edf7
}
form{display:grid;gap:17px;margin-top:30px}
form>label,legend{
  font-family:Arial,sans-serif;font-size:12px;font-weight:800;color:#ecf7fb
}
form small{font-weight:400;color:#9fc4d8}
input,textarea{
  width:100%;display:block;margin-top:6px;padding:12px 13px;
  border:1px solid rgba(185,223,243,.36);border-radius:11px;
  background:#f9fcfd;color:#173048;font:14px Arial,sans-serif
}
fieldset{border:1px solid rgba(185,223,243,.32);border-radius:14px;padding:14px}
.choice{
  display:flex;gap:8px;align-items:flex-start;
  margin:9px 0;font:12px Arial,sans-serif;color:#d9eaf2
}
.choice input{width:auto;margin:2px 0 0}
button{
  border:0;border-radius:999px;padding:14px 18px;
  background:var(--blue);color:var(--navy);
  font:900 12px Arial,sans-serif;cursor:pointer
}
.bot-field{
  position:absolute!important;width:1px!important;height:1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important
}

/* footer */
footer{
  padding:34px 20px 42px;background:#071f39;color:#cfe4ee;text-align:center;
  display:grid;gap:4px
}
.footer-mark{color:var(--gold);font-size:20px}
footer strong{font-size:14px}
footer span{font:10px Arial,sans-serif;letter-spacing:.1em;color:#86a9bd;text-transform:uppercase}

@media(min-width:760px){
  .topbar{padding:12px 5vw}
  .hero{
    min-height:84vh;
    display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;
    padding:50px 6vw
  }
  .arch-shell{margin:0;max-width:480px;width:100%}
  .arch-window{min-height:650px}
  .arch-inner{min-height:625px}
  .hero-copy{text-align:left;margin:0;padding-left:6vw}
  .hero-deck{margin-left:0}
  .chapter{padding:95px 6vw;grid-template-columns:55px minmax(0,820px);justify-content:center;gap:26px}
  .mother-chapter{grid-template-columns:55px minmax(0,820px)}
  .chapter-number{font-size:12px}
  .timeline-section,.open-question,.method-section,.sources-section,.contribute-section{padding-top:95px;padding-bottom:95px}
  .person-line{grid-template-columns:125px 1fr}
  .contribute-icons{grid-template-columns:repeat(4,1fr)}
}
