:root {
  /* Palette */
  --bg: #f4ede2;         /* warm parchment */
  --bg-deep: #ebe1d1;
  --paper: #faf6ee;
  --ink: #1a1410;
  --ink-soft: #3a2f24;
  --ink-mute: #6b5d4c;
  --rule: rgba(26,20,16,0.12);
  --accent: #b53a1e;     /* Homelands coral-red */
  --accent-deep: #8a2a13;
  --accent-soft: #e07a5a;
  --amber: #c89030;
  --green: #4a7a4c;

  /* Dark map field */
  --night: #161210;
  --night-2: #0f0c0a;
  --night-line: rgba(224,122,90,0.10);

  /* Layout */
  --max: 1240px;
  --read: 640px;
  --wide: 880px;
}

/* === RESET + BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 17px; }
body { background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif;
       line-height: 1.7; overflow-x: hidden; }
img { max-width: 100%; display: block; }

/* === TOP NAV === */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
       display: flex; justify-content: space-between; align-items: center;
       padding: 0.85rem 1.4rem; background: rgba(22,18,16,0.0);
       transition: background .4s, backdrop-filter .4s; }
.nav.solid { background: rgba(22,18,16,0.92); backdrop-filter: blur(8px); }
.nav-brand { font-family: 'Fraunces', serif; font-weight: 600; color: #fff;
             font-size: .95rem; letter-spacing: .02em; text-decoration: none;
             opacity: 1; transition: opacity .3s; }
.nav-brand:hover { opacity: .78; }
.nav-brand span { color: var(--accent-soft); }
.nav-links { display: flex; gap: 1.3rem; }
.nav-links a { color: rgba(255,255,255,.62); text-decoration: none; font-size: .78rem;
               letter-spacing: .04em; text-transform: uppercase; transition: color .3s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* === HERO (dark, live map behind) === */
.hero { min-height: 100vh; display: flex; align-items: flex-end;
        position: relative; padding: 4rem 1.5rem 5rem; overflow: hidden;
        background: radial-gradient(120% 90% at 30% 10%, #241b16 0%, var(--night) 45%, var(--night-2) 100%); }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.hero::after { content:''; position:absolute; inset:0; z-index: 1; pointer-events: none;
               background: linear-gradient(to top, rgba(10,8,6,.82) 0%, rgba(10,8,6,.25) 55%, rgba(10,8,6,.45) 100%); }
.hero-inner { position: relative; z-index: 2; max-width: 820px; color: #fff; }
.hero-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .76rem; letter-spacing: .22em;
                text-transform: uppercase; color: var(--accent-soft); }
.hero h1 { font-family: 'Fraunces', serif; font-size: clamp(2.5rem, 6.4vw, 5.2rem);
           font-weight: 600; line-height: 1.05; margin: .8rem 0 1.1rem; letter-spacing: -0.01em; }
.hero h1 em { font-style: italic; color: var(--accent-soft); }
.hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 560px; }
.hero-meta { margin-top: 1.6rem; font-family: 'JetBrains Mono', monospace; font-size: .8rem;
             color: rgba(255,255,255,.55); letter-spacing: .03em; }
.scroll-cue { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 2;
              font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .2em;
              text-transform: uppercase; color: rgba(255,255,255,.5); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(6px);} }

/* === EXPERIMENT NOTE === */
.experiment-note { background: var(--bg-deep); border-top: 3px solid var(--accent); padding: 2rem 1.5rem; }
.experiment-inner { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: start; }
.experiment-text strong { font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .14em;
                          text-transform: uppercase; color: var(--accent); display: block; margin-bottom: .6rem; }
.experiment-text p { font-size: .95rem; color: var(--ink-soft); }

/* === SECTION INTRO / PROSE === */
.prose { max-width: var(--read); margin: 0 auto; padding: 6rem 1.5rem; }
.prose .kicker { font-family: 'JetBrains Mono', monospace; font-size: .74rem; letter-spacing: .16em;
                 text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.prose h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 4.4vw, 3rem);
            line-height: 1.15; margin-bottom: 1.2rem; }
.prose p { font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.prose p strong { color: var(--ink); }

.why-band { background: var(--ink); color: #f4ede2; }
.why-band .prose .kicker { color: var(--accent-soft); }
.why-band .prose h2 { color: #fff; }
.why-band .prose p { color: rgba(244,237,226,.82); }
.why-band .prose p strong { color: #fff; }
.why-stats { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.2rem; padding-top: 2rem;
             border-top: 1px solid rgba(244,237,226,.18); }
.why-stat .n { font-family: 'Fraunces', serif; font-size: clamp(1.8rem,4vw,2.6rem); color: var(--accent-soft); display:block; }
.why-stat .l { font-size: .82rem; color: rgba(244,237,226,.6); max-width: 200px; }

/* === MAP SCROLLY (dark) === */
.map-scrolly-section { background: var(--night); color: #fff; position: relative; }
.map-scrolly-section .section-head { max-width: var(--max); margin: 0 auto; padding: 5rem 1.5rem 0; }
.map-scrolly-section .section-head .kicker { font-family:'JetBrains Mono',monospace; font-size:.74rem;
            letter-spacing:.16em; text-transform:uppercase; color: var(--accent-soft); margin-bottom:.8rem; }
.map-scrolly-section .section-head h2 { font-family:'Fraunces',serif; font-weight:600;
            font-size: clamp(2rem,5vw,3.4rem); line-height:1.1; max-width: 760px; }
.map-scrolly-section .section-head p { color: rgba(255,255,255,.72); max-width: 620px; margin-top: 1rem; }

.map-scrolly { display: grid; grid-template-columns: 1.45fr 1fr; gap: 2.5rem;
               max-width: var(--max); margin: 0 auto; padding: 1rem 1.5rem 3rem; }
.map-sticky { position: sticky; top: 0; height: 100vh; min-width: 0;
              display: flex; flex-direction: column; align-items: center; justify-content: center; }
.map-wrap { width: 100%; position: relative; min-width: 0; }
#mapCanvas { width: 100%; max-width: 100%; height: auto; display: block; }
.map-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center;
              margin-top: .6rem; font-family: 'JetBrains Mono', monospace; font-size: .7rem;
              color: rgba(255,255,255,.6); }
.map-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.dotk { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-out { background: var(--accent-soft); }
.dot-in  { background: var(--amber); }
.dot-hub { background: #fff; box-shadow: 0 0 6px #fff; }

.map-steps { padding: 18vh 0 22vh; display: flex; flex-direction: column; gap: 46vh; min-width: 0; }
.map-step { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
            border-left: 3px solid var(--accent-soft); border-radius: 8px; padding: 1.6rem 1.7rem;
            max-width: 400px; transition: border-color .4s, background .4s; }
.map-step .mtag { font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.14em;
            text-transform:uppercase; color: var(--accent-soft); display:block; margin-bottom:.55rem; }
.map-step h3 { font-family:'Fraunces',serif; font-weight:600; font-size:1.35rem; line-height:1.2;
            margin-bottom:.6rem; color:#fff; }
.map-step p { font-size:.95rem; color: rgba(255,255,255,.76); }
.map-step .names { margin-top: .9rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.map-step .names span { font-size:.74rem; padding:.22rem .55rem; border-radius:20px;
            background: rgba(224,122,90,.16); color:#f7d9cd; border:1px solid rgba(224,122,90,.3); }

/* === DOT MATRIX SCROLLY (alumni) === */
.scrolly-section { background: var(--bg-deep); }
.scrolly { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
           max-width: var(--max); margin: 0 auto; padding: 4rem 1.5rem; }
.scrolly-sticky { position: sticky; top: 0; height: 100vh; min-width: 0;
                  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scrolly-steps { min-width: 0; }
#dotCanvas { width: 100%; max-width: 600px; height: auto; }
.canvas-legend { font-family: 'JetBrains Mono', monospace; font-size: .78rem; color: var(--ink-mute); margin-top: .8rem; }
.scrolly-steps { padding: 40vh 0; display: flex; flex-direction: column; gap: 50vh; }
.scrolly-step { background: var(--paper); border-radius: 8px; padding: 2rem;
                box-shadow: 0 2px 12px rgba(0,0,0,.06); max-width: 360px; }
.scrolly-step strong { color: var(--accent-deep); }

/* === KEY FINDING === */
.finding { padding: 8rem 1.5rem; border-top: 1px solid var(--rule); }
.finding-inner { max-width: var(--read); margin: 0 auto; }
.finding-num { font-family: 'JetBrains Mono', monospace; font-size: .75rem; letter-spacing: .15em;
               color: var(--ink-mute); text-transform: uppercase; }
.finding-title { font-family: 'Fraunces', serif; font-weight: 600;
                 font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.13; margin: .5rem 0 1.2rem; }
.finding-lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 580px; }
.finding-lede strong { color: var(--ink); }
.finding-stat { margin-top: 2.4rem; display: flex; align-items: baseline; gap: .8rem; }
.finding-stat-num { font-family: 'Fraunces', serif; font-size: clamp(2.6rem, 5vw, 3.8rem);
                    color: var(--accent); font-weight: 700; }
.finding-stat-label { font-size: .9rem; color: var(--ink-mute); max-width: 240px; }
.finding-tier { background: var(--paper); border-left: 4px solid var(--accent); }
.finding-step { background: var(--bg-deep); border-left: 4px solid var(--amber); }

/* === PULL QUOTE BREAK === */
.quote-break { background: var(--accent-deep); color: #fff; padding: 7rem 1.5rem;
               background-image: linear-gradient(135deg, var(--accent-deep), #6e2010); }
.quote-break blockquote { font-family: 'Fraunces', serif; font-style: italic;
               font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.3; max-width: var(--wide);
               margin: 0 auto; }
.quote-break cite { display: block; font-size: .85rem; font-style: normal; margin-top: 1.4rem;
               color: rgba(255,255,255,.7); font-family: 'JetBrains Mono', monospace; letter-spacing: .04em; }

/* === COMPARATORS GRID === */
.comparators { padding: 6rem 1.5rem; }
.comparators-inner { max-width: var(--max); margin: 0 auto; }
.comparators .kicker { font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.16em;
            text-transform:uppercase; color:var(--accent); margin-bottom:.8rem; }
.comparators h2 { font-family:'Fraunces',serif; font-weight:600; font-size: clamp(1.9rem,4.4vw,3rem);
            line-height:1.15; max-width: 720px; margin-bottom: 2.4rem; }
.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.comp-card { background: var(--paper); border-radius: 10px; padding: 2rem 1.8rem;
             border-top: 3px solid var(--accent); }
.comp-card .place { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em;
             text-transform:uppercase; color: var(--accent); }
.comp-card h3 { font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; margin:.4rem 0 .7rem; }
.comp-card p { font-size:.93rem; color: var(--ink-soft); }
.comp-card .figure { font-family:'Fraunces',serif; color:var(--accent-deep); font-weight:700;
             font-size:1.5rem; margin-top:.8rem; }
.comp-card.amber { border-top-color: var(--amber); }
.comp-card.amber .place, .comp-card.amber .figure { color: var(--amber); }
.comp-card.green { border-top-color: var(--green); }
.comp-card.green .place, .comp-card.green .figure { color: var(--green); }

/* === UNLOCK PILLARS === */
.unlock { background: var(--ink); color: #f4ede2; padding: 6rem 1.5rem; }
.unlock-inner { max-width: var(--max); margin: 0 auto; }
.unlock .kicker { font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.16em;
            text-transform:uppercase; color: var(--accent-soft); margin-bottom:.8rem; }
.unlock h2 { font-family:'Fraunces',serif; font-weight:600; font-size: clamp(1.9rem,4.4vw,3rem);
            line-height:1.15; max-width: 720px; margin-bottom: 2.6rem; color:#fff; }
.unlock-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.unlock-card { flex: 0 1 calc(33.333% - 1rem); min-width: 260px; max-width: 360px;
               border: 1px solid rgba(244,237,226,.16); border-radius: 10px; padding: 2rem 1.8rem;
               background: rgba(255,255,255,.03); }
.unlock-card .ic { font-size: 1.6rem; margin-bottom: .8rem; display:block; }
.unlock-card h3 { font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; margin-bottom:.6rem; color:#fff; }
.unlock-card p { font-size:.92rem; color: rgba(244,237,226,.74); }

/* === RECOMMENDATIONS (next steps) === */
.recs { padding: 6rem 1.5rem; }
.recs-inner { max-width: var(--wide); margin: 0 auto; }
.recs .kicker { font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.16em;
            text-transform:uppercase; color:var(--accent); margin-bottom:.8rem; }
.recs h2 { font-family:'Fraunces',serif; font-weight:600; font-size: clamp(1.9rem,4.4vw,3rem);
            line-height:1.15; margin-bottom: 2.4rem; }
.recs-list { list-style: none; counter-reset: r; }
.recs-list li { counter-increment: r; display: grid; grid-template-columns: 56px 1fr; gap: 1.4rem;
            padding: 1.5rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.recs-list li::before { content: counter(r,decimal-leading-zero); font-family:'JetBrains Mono',monospace;
            font-size:.95rem; color: var(--accent); padding-top: .2rem; }
.recs-list h3 { font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; margin-bottom:.35rem; }
.recs-list p { font-size:.96rem; color: var(--ink-soft); }

/* === ABOUT === */
.about { background: var(--bg-deep); padding: 6rem 1.5rem; }
.about-inner { max-width: var(--wide); margin: 0 auto; display:grid; grid-template-columns: 1fr; gap:1.2rem; }
.about .kicker { font-family:'JetBrains Mono',monospace; font-size:.74rem; letter-spacing:.16em;
            text-transform:uppercase; color:var(--accent); }
.about h2 { font-family:'Fraunces',serif; font-weight:600; font-size: clamp(1.7rem,4vw,2.6rem); }
.about p { font-size:1.05rem; color: var(--ink-soft); }
.about p strong { color: var(--ink); }

/* === BIBLIOGRAPHY === */
#bibliography { padding: 5rem 1.5rem; border-top: 2px solid var(--rule); background: var(--bg-deep); }
#bibliography h2 { font-family:'Fraunces',serif; font-weight:600; font-size:1.7rem; max-width: var(--wide);
            margin: 0 auto 1.6rem; }
.bib-group { max-width: var(--wide); margin: 0 auto 1rem; }
.bib-group summary { font-weight: 600; cursor: pointer; padding: .6rem 0; border-bottom: 1px solid var(--rule);
            font-family: 'Inter', sans-serif; }
.bib-list { padding: 1rem 0 1rem 1.5rem; }
.bib-list li { font-size: .86rem; color: var(--ink-soft); margin-bottom: .6rem; line-height: 1.6; }
.bib-list a { color: var(--accent-deep); word-break: break-word; }

/* === FOOTER === */
.site-footer { background: var(--ink); color: rgba(244,237,226,.6); padding: 3rem 1.5rem; text-align:center; }
.site-footer .brand { font-family:'Fraunces',serif; color:#fff; font-size:1.1rem; margin-bottom:.5rem; }
.site-footer .brand span { color: var(--accent-soft); }
.site-footer p { font-size:.8rem; max-width: 560px; margin: .3rem auto; }

/* === HERO MARTLETS === */
.hero-martlets { margin-bottom: .8rem; }

/* === REVEAL ANIMATION === */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* === RESPONSIVE === */
@media (max-width: 880px) {
  .comp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .scrolly, .map-scrolly { grid-template-columns: 1fr; }
  .scrolly-sticky, .map-sticky { position: relative; top: auto; height: auto; padding: 1rem 0; }
  .map-steps, .scrolly-steps { padding: 2rem 0; gap: 2rem; }
  .map-step, .scrolly-step { max-width: none; }
  .why-stats { gap: 1.5rem; }
  .unlock-card { flex: 0 1 100%; max-width: none; }
}

/* ---------- PDF download card ---------- */
.pdf-card{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-decoration:none;color:inherit;
  background:transparent;border:none;border-radius:0;padding:0;
  transition:transform .25s ease}
.pdf-card:hover{transform:translateY(-4px)}
.pdf-card img{width:170px;height:auto;border-radius:4px;flex:0 0 auto;
  box-shadow:0 14px 34px -12px rgba(26,20,16,.35);border:1px solid var(--rule)}
.pdf-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.08em;color:var(--accent);font-weight:600}
@media (max-width:768px){
  .experiment-inner{grid-template-columns:1fr;gap:1.5rem}
  .pdf-card{align-items:flex-start}
  .pdf-card img{width:150px}
}