/* ---------- tokens ---------- */
:root{
  --bg:#faf6ef; --bg2:#f3ece0; --ink:#2b2520; --muted:#6b6157; --line:#e3d9c8;
  --warm:#e8a33d; --homeland:#b5341a; --secondary:#e8a33d;
  --d0:#cfe8f3; --d1:#86c5e0; --d2:#3b8fc4;          /* diaspora cool ramp */
  --maxw:1100px; --textw:46rem;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem}
.section{padding:6.5rem 0}
.section .wrap > p{max-width:var(--textw)}
.eyebrow{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--warm); font-weight:600; margin:0 0 1rem;
}
h2{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.8rem,4vw,2.8rem);
  line-height:1.1; letter-spacing:-.01em; margin:2.6rem 0 1rem; max-width:var(--textw);
}
.section h2:first-of-type{margin-top:0}
p{margin:0 0 1.15rem}
strong{font-weight:600}
.lead{font-size:1.22rem; color:#43392f}

/* ---------- hero ---------- */
.hero{
  min-height:100svh; display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(120% 80% at 50% -10%, #fff7e9 0%, transparent 60%),
    linear-gradient(180deg,#f7efe1 0%, var(--bg) 70%);
  border-bottom:1px solid var(--line);
}
.hero__inner{padding:2rem 1.5rem; max-width:42rem}
.hero__kicker{font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem}
.hero__title{
  font-family:var(--serif); font-weight:900; font-size:clamp(3.5rem,13vw,8rem);
  line-height:.92; letter-spacing:-.02em; margin:0; color:var(--ink);
}
.hero__say{font-size:.95rem; letter-spacing:.04em; color:var(--muted); margin:.5rem 0 0}
.hero__sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,4vw,2rem); color:var(--homeland); margin:.4rem 0 1.6rem;
}
.hero__lede{font-size:1.15rem; color:var(--muted); margin:0 auto; max-width:32rem}
.hero__scroll{
  display:inline-grid; place-items:center; margin-top:2.5rem;
  width:2.6rem; height:2.6rem; border:1px solid var(--line); border-radius:50%;
  color:var(--muted); text-decoration:none; font-size:1.1rem; transition:.2s;
}
.hero__scroll:hover{background:#fff; color:var(--ink); transform:translateY(3px)}

/* ---------- the word / chain ---------- */
.section--word{background:linear-gradient(180deg,var(--bg) 0%, #fbf8f1 100%)}
.chain{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
  margin:2rem 0 2.4rem; padding:1.4rem; background:#fffdf8;
  border:1px solid var(--line); border-radius:14px;
}
.chain__step{display:flex; flex-direction:column; min-width:0}
.chain__word{font-family:var(--serif); font-size:1.35rem; font-weight:600}
.chain__lang{font-size:.78rem; color:var(--muted)}
.chain__arrow{color:var(--warm); font-size:1.3rem; font-weight:600}

/* ---------- map ---------- */
.section--map{background:#1f1b17; color:#f3ece0; padding-bottom:5rem}
.section--map .eyebrow{color:var(--warm)}
.section--map h2{color:#fff}
.section--map .lead{color:#d8cdbd}
.map{max-width:var(--maxw); margin:2.5rem auto 1.5rem; padding:0 1rem; position:relative}
.map__controls{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:1rem}
.map__controls button{
  font:inherit; font-size:.9rem; padding:.45rem .9rem; border-radius:999px; cursor:pointer;
  background:#2c2620; color:#e7ddcd; border:1px solid #4a4036; transition:.15s;
}
.map__controls button:hover{background:#37302a}
.map__controls button.is-active{background:var(--warm); color:#241a0a; border-color:var(--warm); font-weight:600}
.map__hint{font-size:.85rem; color:#b8ad9c}
.map__title{font-family:var(--serif); color:#fff; font-size:1.05rem}
.map__nav-overlay{position:absolute; top:10px; left:10px; width:172px; z-index:5;
  border:1px solid #5a4f42; border-radius:8px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.45)}
.map__nav-overlay svg{width:100%; height:auto; display:block; background:#16130f}
.navland{fill:#2b2620; stroke:#16130f; stroke-width:.4px}
.navland.pick{fill:#52666f; cursor:pointer}
.navland.pick:hover{fill:#6a8693}
.navland.active{fill:var(--warm); cursor:pointer}
.map__stage{
  position:relative; width:100%; aspect-ratio:3/2; min-height:320px;
  background:#16130f; border:1px solid #3a322a; border-radius:14px; overflow:hidden;
}
.map__stage svg{width:100%; height:100%; display:block}
.map__loading{position:absolute; inset:0; display:grid; place-items:center; color:#8a7f70; margin:0}
.land{stroke:#16130f; stroke-width:.4px}
.land.has-data{cursor:pointer}
.land.has-data:hover{stroke:#fff; stroke-width:.8px}
.county{stroke:#16130f; stroke-width:.4px; cursor:pointer}
.county:hover{stroke:#fff; stroke-width:.8px}
.city{fill:#fff; fill-opacity:.9; stroke:#16130f; stroke-width:.8px; paint-order:stroke}
.map__legend{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; max-width:var(--maxw); margin:0 auto; padding:0 1rem; font-size:.82rem; color:#c9bdab}
.map__legend .key{display:flex; align-items:center; gap:.4rem}
.map__legend .sw{width:14px; height:14px; border-radius:3px; display:inline-block}
.map__tooltip{
  position:fixed; pointer-events:none; z-index:10; background:#fffdf8; color:#2b2520;
  border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; font-size:.85rem;
  box-shadow:0 6px 22px rgba(0,0,0,.25); max-width:15rem;
}
.map__tooltip b{font-family:var(--serif)}
.tip__var{color:#6b6157; font-size:.82em}
.tip__hint{color:#6b6157; font-size:.85em}
.map__note{color:#b8ad9c !important; font-size:.9rem; margin-top:1.5rem; max-width:var(--textw)}
.county-panel{position:absolute; top:.8rem; right:.8rem; z-index:4; display:none;
  background:rgba(31,27,23,.92); border:1px solid #4a4036; border-radius:10px;
  padding:.7rem .9rem; max-width:13rem; font-size:.8rem; color:#e7ddcd}

/* ---------- story ---------- */
.section--story{background:linear-gradient(180deg,#fbf8f1 0%, var(--bg) 100%)}
.section--story h2{font-size:clamp(1.5rem,3.2vw,2.1rem); margin-top:3rem}
.section--story h2:first-of-type{margin-top:1rem}

/* ---------- connect / invitation ---------- */
.section--connect{background:#1f1b17; color:#f3ece0}
.section--connect h2{color:#fff}
.section--connect .lead{color:#d8cdbd}
.invite__reach{margin-top:1.9rem; margin-bottom:.7rem; font-weight:600}
.eml{display:flex; align-items:center; line-height:0}
.eml img{height:1.55rem; width:auto; display:block}
.invite__type{font-size:.82rem; color:#b8ad9c; margin-top:.6rem}
.invite__fine{font-size:.9rem; color:#c9bdab; margin-top:1.2rem}

/* ---------- footer ---------- */
.foot{background:var(--bg2); color:var(--muted); padding:3.5rem 0}
.foot p{max-width:var(--textw); font-size:.92rem}
.foot__title{font-family:var(--serif); color:var(--ink); font-size:1.1rem; margin-bottom:.6rem}
.foot__sig{color:var(--homeland); font-weight:600; margin-top:1.4rem; margin-bottom:0}

/* ---------- side dot nav + back-to-top ---------- */
.dotnav{position:fixed; right:1.6rem; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:1rem; align-items:flex-end}
.dotnav a{display:flex; align-items:center; gap:.55rem; text-decoration:none}
.dotnav a::after{content:""; flex:none; width:11px; height:11px; border-radius:50%;
  border:1.6px solid #8a7d68; background:transparent; transition:.2s}
.dotnav a:hover::after{border-color:var(--warm)}
.dotnav a.is-active::after{background:var(--warm); border-color:var(--warm); transform:scale(1.2)}
.dotnav .lbl{order:-1; font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  white-space:nowrap; color:#f5efe4; background:rgba(43,37,32,.9); padding:.22rem .5rem; border-radius:6px;
  opacity:0; transform:translateX(6px); transition:.2s; pointer-events:none}
.dotnav a:hover .lbl{opacity:1; transform:translateX(0)}
.dotnav__arrow{background:none; border:0; padding:0; cursor:pointer; color:#8a7d68; width:14px; height:11px;
  display:flex; align-items:center; justify-content:center; transition:.2s}
.dotnav__arrow svg{width:12px; height:10px; display:block}
.dotnav__arrow:hover:not(:disabled){color:var(--warm)}
.dotnav__arrow:disabled{opacity:.3; cursor:default}
.to-top{display:flex; align-items:center; justify-content:center; width:2.8rem; height:2.8rem;
  margin:0 auto 2.4rem; border-radius:50%; border:1px solid var(--line); color:var(--muted);
  text-decoration:none; font-size:1.25rem; transition:.2s}
.to-top:hover{background:#fff; color:var(--ink); transform:translateY(-3px)}
.dotnav a:focus-visible .lbl{opacity:1; transform:translateX(0)}
.dotnav a:focus-visible::after{border-color:var(--warm); outline:2px solid var(--warm); outline-offset:3px}
.dotnav__arrow:focus-visible{outline:2px solid var(--warm); outline-offset:3px; border-radius:3px}
.to-top:focus-visible, .hero__scroll:focus-visible, .map__controls button:focus-visible{outline:2px solid var(--warm); outline-offset:3px}
.navland:focus-visible, .land:focus-visible{outline:none; stroke:#fff; stroke-width:1.3px}

@media (max-width:640px){
  body{font-size:17px}
  .dotnav{right:.4rem; gap:.7rem}
  .dotnav .lbl{display:none}
  .section{padding:4.5rem 0}
  .wrap{padding:0 1.2rem}
  .chain{padding:1.1rem}
  .chain__arrow{transform:rotate(90deg)}
  .map{padding:0 .4rem}
  .map__nav-overlay{width:118px; top:6px; left:6px}
  .map__hint{font-size:.78rem}
  .map__stage{aspect-ratio:1/1; min-height:300px}
  .county-panel{top:.5rem; right:.5rem; max-width:9.5rem; font-size:.72rem; padding:.5rem .6rem}
  .map__legend{font-size:.74rem; gap:.3rem .8rem}
  .map__tooltip{max-width:12rem; font-size:.8rem}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important}
}
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}