/* ==========================================================================
   IGBO HERITAGE ATLAS — Design tokens
   Palette: Uli indigo (deep dye of Igbo body/wall art), Nzu ivory (chalk used
   in ritual and title-taking), Camwood ember (odo/ufie dye, warm accent),
   Palm gold (oil-palm, wealth and harvest), Cassava leaf (staple crop green).
   Type: Fraunces (display, carries manuscript/archival weight) + Work Sans
   (body, quiet and legible) + IBM Plex Mono (data — coordinates, stats, IDs).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #14201E;
  --ink-soft:   #1D2E2B;
  --ivory:      #F1ECDE;
  --ivory-dim:  #E6DFCB;
  --indigo:     #2A3A5C;
  --indigo-dim: #3D5079;
  --ember:      #AE4A32;
  --ember-soft: #C86A4F;
  --gold:       #C79A3E;
  --leaf:       #5B7A52;
  --ink-text:   #1B2422;
  --line:       rgba(27,36,34,0.14);

  --bg: var(--ivory);
  --bg-raised: #ffffff;
  --bg-sunken: var(--ivory-dim);
  --text: var(--ink-text);
  --text-dim: #55625E;
  --accent: var(--ember);
  --accent-text: #ffffff;
  --border: var(--line);
  --shadow: 0 12px 30px rgba(20,32,30,0.10);

  --display: 'Fraunces', serif;
  --body: 'Work Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;

  --container: 1180px;
  --site-nav-h: 80px;   /* height of the inherited Ụwa Mgbede site navbar above us */
  --nav-h: 68px;        /* height of the Atlas's own sub-navigation bar */
  --total-nav-h: calc(var(--site-nav-h) + var(--nav-h));
  --dur: 260ms;
  --ease: cubic-bezier(.22,.7,.3,1);
}

[data-theme="dark"]{
  --bg: var(--ink);
  --bg-raised: var(--ink-soft);
  --bg-sunken: #0F1917;
  --text: #EDE8D8;
  --text-dim: #A7B0AC;
  --accent: var(--ember-soft);
  --accent-text: #14201E;
  --border: rgba(241,236,222,0.12);
  --shadow: 0 12px 34px rgba(0,0,0,0.45);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--display); font-weight: 600; margin: 0 0 .4em; letter-spacing: -0.01em; color: var(--text); }
p{ margin: 0 0 1em; color: var(--text); }
.mono{ font-family: var(--mono); font-size: .82em; letter-spacing: .01em; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.visually-hidden{ position:absolute; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }

/* ---------- Atlas sub-nav ----------
   Sits directly beneath the inherited Ụwa Mgbede site navbar (which is
   position:fixed, ~80px tall — see --site-nav-h). This bar is what used to
   be the Atlas's top-level nav; it's now a second, sticky row rather than
   the page's only header. */
.atlas-subnav{
  position: sticky; top: var(--site-nav-h); z-index: 900;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.atlas-subnav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--display); font-weight:700; font-size:1.05rem; }
.brand .mark{ width:26px;height:26px; }
.brand .mark path{ stroke: var(--accent); }
.atlas-nav-links{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; font-size:.92rem; }
.atlas-nav-links a{ color: var(--text-dim); transition: color var(--dur); position:relative; }
.atlas-nav-links a:hover, .atlas-nav-links a.active{ color: var(--text); }
.atlas-nav-links a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-20px; height:2px; background:var(--accent); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:38px; height:38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background: var(--bg-raised);
  cursor:pointer; color: var(--text);
  transition: transform var(--dur) var(--ease), border-color var(--dur);
}
.icon-btn:hover{ border-color: var(--accent); transform: translateY(-1px); }
.icon-btn svg{ width:18px; height:18px; }

/* Clears the inherited site navbar (position:fixed, out of normal flow)
   so the Atlas sub-nav lands right beneath it instead of underneath it. */
.atlas-page-wrap{ padding-top: var(--site-nav-h); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px; border-radius: 999px;
  font-family: var(--body); font-weight:600; font-size:.92rem;
  cursor:pointer; border:1px solid transparent;
  transition: transform var(--dur) var(--ease), background var(--dur), box-shadow var(--dur);
}
.btn-primary{ background: var(--accent); color: var(--accent-text); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(174,74,50,.28); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ font-size:.85rem; color: var(--text-dim); display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding: 18px 0; }
.breadcrumb a{ color: var(--text-dim); }
.breadcrumb a:hover{ color: var(--accent); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .current{ color: var(--text); font-weight:600; }

/* ---------- Hero ---------- */
.hero{
  position: relative; overflow:hidden;
  padding: 92px 0 60px;
  background: radial-gradient(120% 140% at 80% -10%, color-mix(in srgb, var(--indigo) 18%, transparent), transparent 60%);
}
.hero-motif{ position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:0; }
.hero .container{ position:relative; z-index:1; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color: var(--accent); margin-bottom: 18px; }
.eyebrow::before{ content:''; width:20px;height:1px; background:var(--accent); display:inline-block; }
.hero h1{
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98; max-width: 14ch; font-weight:600;
}
.hero h1 em{ font-style: italic; color: var(--accent); font-weight: 500; }
.hero-sub{ max-width: 46ch; font-size: 1.08rem; color: var(--text-dim); margin: 22px 0 34px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom: 10px; }
.hero-search{
  margin-top: 34px; max-width: 520px;
  display:flex; align-items:center; gap:10px;
  background: var(--bg-raised); border:1px solid var(--border); border-radius: 999px;
  padding: 8px 8px 8px 20px; box-shadow: var(--shadow);
}
.hero-search input{ flex:1; border:0; background:transparent; font-family:var(--body); font-size:.95rem; color:var(--text); outline:none; }
.hero-search button{ border:0; background: var(--accent); color: var(--accent-text); width:38px;height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ---------- Stats ---------- */
.stats{ padding: 20px 0 76px; border-bottom: 1px solid var(--border); }
.stats-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 22px; }
.stat-card{ padding: 22px 6px 0; border-top:1px solid var(--border); }
.stat-num{ font-family: var(--display); font-size: 2.1rem; font-weight:600; color:var(--text); }
.stat-num .suffix{ color: var(--accent); }
.stat-label{ font-size:.82rem; color: var(--text-dim); margin-top:6px; }

/* ---------- Section shell ---------- */
section.block{ padding: 84px 0; }
section.block.tight{ padding: 56px 0; }
.block-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 20px; margin-bottom: 42px; }
.block-head h2{ font-size: clamp(1.8rem,3vw,2.6rem); max-width: 16ch; }
.block-head .desc{ max-width: 40ch; color: var(--text-dim); font-size:.95rem; }
.section-num{ font-family: var(--mono); color: var(--text-dim); font-size:.8rem; }

/* ---------- Map ---------- */
.map-shell{
  position: relative; border-radius: var(--radius-l); overflow:hidden;
  background: linear-gradient(160deg, var(--indigo) 0%, var(--ink) 100%);
  padding: 8px; box-shadow: var(--shadow);
}
[data-theme="dark"] .map-shell{ background: linear-gradient(160deg, #1B2A44 0%, #0F1917 100%); }
.map-inner{ position:relative; border-radius: calc(var(--radius-l) - 8px); overflow:hidden; }
#igbo-map{ width:100%; height:auto; display:block; }
.state-node{ cursor:pointer; transition: transform var(--dur) var(--ease); transform-origin:center; }
.state-node rect, .state-node path{ transition: fill var(--dur), stroke var(--dur), filter var(--dur); }
.state-node:hover{ transform: translateY(-3px); }
.state-node .node-fill{ fill: rgba(241,236,222,0.08); stroke: rgba(241,236,222,0.35); stroke-width: 1; }
.state-node:hover .node-fill{ fill: rgba(199,154,62,0.22); stroke: var(--gold); }
.state-node.majority .node-fill{ stroke: rgba(199,154,62,0.55); }
.state-node text{ fill: #F1ECDE; font-family: var(--body); font-weight:600; }
.map-river{ fill:none; stroke: rgba(120,170,220,0.35); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.map-legend{ display:flex; gap:22px; margin-top:16px; font-size:.82rem; color: var(--text-dim); flex-wrap:wrap; }
.map-legend .dot{ width:9px;height:9px;border-radius:50%; display:inline-block; margin-right:6px; }
.dot.majority{ background: var(--gold); }
.dot.minority{ background: var(--indigo-dim); }
.map-tooltip{
  position:absolute; pointer-events:none; z-index:5;
  background: var(--bg-raised); color: var(--text); border:1px solid var(--border);
  border-radius: var(--radius-s); padding: 10px 14px; font-size:.82rem;
  box-shadow: var(--shadow); opacity:0; transform: translateY(4px);
  transition: opacity var(--dur), transform var(--dur); min-width: 170px;
}
.map-tooltip.show{ opacity:1; transform: translateY(0); }
.map-tooltip .t-name{ font-family: var(--display); font-weight:600; margin-bottom:4px; display:block; }
.map-tooltip .t-row{ display:flex; justify-content:space-between; gap:10px; color: var(--text-dim); }

/* ---------- Cards ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap: 18px; }
.card{
  background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-m);
  padding: 22px; transition: transform var(--dur) var(--ease), box-shadow var(--dur);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.card .eyebrow{ margin-bottom:10px; }
.card h3{ font-size:1.15rem; margin-bottom:8px; }
.card p{ font-size:.88rem; color: var(--text-dim); margin-bottom: 14px; }
.card .meta{ display:flex; justify-content:space-between; font-size:.78rem; color: var(--text-dim); font-family: var(--mono); }

/* ---------- Search overlay ---------- */
.search-overlay{
  position: fixed; inset:0; z-index: 1100; background: rgba(20,32,30,0.55);
  display:none; align-items:flex-start; justify-content:center; padding: 10vh 20px;
  backdrop-filter: blur(3px);
}
.search-overlay.open{ display:flex; }
.search-panel{
  width: 100%; max-width: 640px; background: var(--bg-raised); border-radius: var(--radius-l);
  box-shadow: 0 30px 80px rgba(0,0,0,.35); border:1px solid var(--border); overflow:hidden;
}
.search-panel .field{ display:flex; align-items:center; gap:12px; padding: 20px 22px; border-bottom:1px solid var(--border); }
.search-panel input{ flex:1; border:0; background:transparent; font-size:1.05rem; font-family: var(--body); color: var(--text); outline:none; }
.search-results{ max-height: 50vh; overflow-y:auto; padding: 8px; }
.result-row{ display:flex; justify-content:space-between; gap:12px; padding: 12px 14px; border-radius: var(--radius-s); cursor:pointer; }
.result-row:hover{ background: var(--bg-sunken); }
.result-row .rtype{ font-family: var(--mono); font-size:.7rem; color: var(--accent); text-transform:uppercase; }
.result-empty{ padding: 30px 20px; text-align:center; color: var(--text-dim); font-size:.9rem; }

/* ---------- Footer ---------- */
/* Footer is inherited from the main site (css/global.css handles
   footer, hr, .socials, and the per-platform icon colors) — nothing
   Atlas-specific to style here. */

/* ---------- Alphabet index ---------- */
.alpha-jump{ position:sticky; top: calc(var(--total-nav-h) + 1px); z-index: 40; background: var(--bg); padding: 14px 0; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:6px; }
.alpha-jump a{ width:28px;height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-family: var(--mono); font-size:.78rem; color: var(--text-dim); }
.alpha-jump a:hover{ background: var(--accent); color: var(--accent-text); }
.alpha-group{ padding: 34px 0; border-bottom: 1px solid var(--border); }
.alpha-group h2{ font-size: 2rem; color: var(--accent); }
.town-list{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 10px; }
.town-list a{ padding: 10px 4px; border-bottom: 1px solid var(--border); font-size:.94rem; }
.town-list a:hover{ color: var(--accent); }

/* ---------- State / Town page layout ---------- */
.page-hero{ padding: 40px 0 30px; border-bottom: 1px solid var(--border); }
.page-hero .kicker{ font-family: var(--mono); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; color: var(--accent); }
.page-hero h1{ font-size: clamp(2.2rem,5vw,3.6rem); }
.page-layout{ display:grid; grid-template-columns: 220px 1fr 260px; gap: 40px; align-items:start; padding: 40px 0 100px; }
.subnav{ position: sticky; top: calc(var(--total-nav-h) + 20px); display:flex; flex-direction:column; gap:2px; }
.subnav a{ padding: 8px 12px; border-radius: var(--radius-s); font-size:.88rem; color: var(--text-dim); border-left: 2px solid transparent; }
.subnav a:hover{ color: var(--text); }
.subnav a.active{ color: var(--accent); border-left-color: var(--accent); background: var(--bg-sunken); }
.content-col > section{ margin-bottom: 56px; scroll-margin-top: calc(var(--total-nav-h) + 20px); }
.content-col h2{ font-size:1.5rem; border-bottom:1px solid var(--border); padding-bottom: 14px; margin-bottom: 18px; }
.sidebar{ position: sticky; top: calc(var(--total-nav-h) + 20px); display:flex; flex-direction:column; gap: 22px; }
.info-card{ background: var(--bg-raised); border:1px solid var(--border); border-radius: var(--radius-m); padding: 20px; }
.info-card h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color: var(--text-dim); margin-bottom:14px; }
.info-row{ display:flex; justify-content:space-between; font-size:.85rem; padding: 7px 0; border-bottom: 1px dashed var(--border); }
.info-row:last-child{ border-bottom:0; }
.info-row .v{ font-family: var(--mono); color: var(--text); text-align:right; }

/* ---------- Timeline ---------- */
.timeline{ position:relative; padding-left: 30px; }
.timeline::before{ content:''; position:absolute; left:6px; top:4px; bottom:4px; width:2px; background: var(--border); }
.tl-item{ position:relative; padding-bottom: 30px; opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tl-item.in{ opacity:1; transform:none; }
.tl-item::before{ content:''; position:absolute; left:-30px; top:4px; width:11px;height:11px; border-radius:50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 2px var(--border); }
.tl-year{ font-family: var(--mono); color: var(--accent); font-weight:600; margin-right: 10px; }

/* ---------- Gallery ---------- */
.masonry{ columns: 3 220px; column-gap: 14px; }
.masonry .tile{ break-inside: avoid; margin-bottom: 14px; border-radius: var(--radius-m); overflow:hidden; background: var(--bg-sunken); border:1px solid var(--border); }
.masonry .tile .ph{ width:100%; aspect-ratio: 4/3; display:flex; align-items:center; justify-content:center; color: var(--text-dim); font-family: var(--mono); font-size:.72rem; background: linear-gradient(135deg, var(--bg-sunken), var(--bg-raised)); }

/* ---------- Tags / pills ---------- */
.pill{ display:inline-flex; align-items:center; padding: 5px 12px; border-radius:999px; background: var(--bg-sunken); border:1px solid var(--border); font-size:.78rem; margin: 0 8px 8px 0; }

/* ---------- Related towns ---------- */
.related-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 14px; }

/* ---------- Article page ---------- */
.article-body{ max-width: 70ch; }
.article-body h2{ font-family:var(--display); font-size:1.35rem; margin-top: 34px; border:none; padding:0; }
.article-meta{ display:flex; gap:16px; color: var(--text-dim); font-size:.82rem; font-family: var(--mono); margin-bottom: 30px; }

/* ---------- Dialect ---------- */
.phrase-row{ display:flex; justify-content:space-between; align-items:center; padding: 12px 0; border-bottom: 1px dashed var(--border); gap: 14px; }
.phrase-row button{ width:32px;height:32px; border-radius:50%; border:1px solid var(--border); background:var(--bg-sunken); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .stats-grid{ grid-template-columns: repeat(3,1fr); }
  .page-layout{ grid-template-columns: 1fr; }
  .subnav{ position: static; flex-direction:row; overflow-x:auto; padding-bottom: 8px; }
  .sidebar{ position: static; }
  .atlas-nav-links{ display:none; }
  .masonry{ columns: 2 180px; }
}
@media (max-width: 560px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .hero{ padding: 60px 0 40px; }
  .masonry{ columns: 1; }
}