/* ==================================================================
   Megascends Infotech LLP
   Côte d'Ivoire Cashew Processing Network
   ================================================================== */

:root{
  /* ── Côte d'Ivoire national colours ──
     Flag: orange #F77F00 · white #FFFFFF · green #009E60.
     The flag hues are used for fills and marks; the -deep variants are
     darkened purely so text on white clears WCAG AA (4.5:1). */
  --orange:      #F77F00;
  --orange-deep: #B85600;   /* 4.9:1 on white */
  --orange-soft: rgba(247,127,0,.12);
  --green:       #009E60;
  --green-deep:  #00693F;   /* 5.3:1 on white */
  --green-soft:  rgba(0,158,96,.11);
  --amber:       #F0B429;   /* "details pending" only — not a flag colour */

  /* surfaces — the flag's white band carries the page */
  --bg:        #FFFDFA;
  --surface:   #FFFFFF;
  --surface-2: #FBF6EE;
  --line:      rgba(27,33,39,.12);
  --line-soft: rgba(27,33,39,.07);

  /* type */
  --ink:   #1B2127;
  --ink-2: #4C5761;
  --muted: #8A949D;

  --shadow-s: 0 1px 2px rgba(27,33,39,.05), 0 2px 6px -2px rgba(27,33,39,.06);
  --shadow-m: 0 1px 2px rgba(27,33,39,.04), 0 14px 34px -16px rgba(27,33,39,.18);

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease:     cubic-bezier(.22,.7,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --panel-w: 34%;
  --pad: clamp(1.15rem, 3.4vw, 3.5rem);
  --head-h: 68px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 780px at 78% 10%, rgba(247,127,0,.10), transparent 60%),
    radial-gradient(900px 700px at 4% 88%, rgba(0,158,96,.10), transparent 62%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--orange-soft); }

/* ══════════════════ header ══════════════════ */

.site-head{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem);
  min-height:var(--head-h);
  padding:.8rem var(--pad);
  background:rgba(255,253,250,.86);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
  animation:dropIn .8s var(--ease-out) both;
}

.brand{
  display:flex; align-items:center; gap:.65rem;
  margin-right:auto; text-decoration:none; color:inherit; min-width:0;
}
/* the national flag, as the mark */
.brand-mark{
  width:34px; height:24px; flex:none; border-radius:3px;
  background:linear-gradient(90deg,
    var(--orange) 0 33.333%,
    #fff        33.333% 66.666%,
    var(--green) 66.666% 100%);
  box-shadow:0 0 0 1px var(--line-soft), 0 2px 8px -2px rgba(27,33,39,.28);
}
.brand-lockup{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand-name{
  font-family:var(--serif); font-size:clamp(1rem,2.6vw,1.22rem);
  font-weight:600; letter-spacing:.01em; white-space:nowrap;
}
.brand-sub{
  font-size:clamp(.54rem,1.5vw,.62rem); letter-spacing:.24em;
  text-transform:uppercase; color:var(--orange-deep); white-space:nowrap;
}

.site-nav{ display:flex; gap:clamp(1rem,2.2vw,2rem); }
.site-nav a{
  position:relative; color:var(--ink-2); text-decoration:none;
  font-size:.79rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; transition:color .3s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--orange); border-radius:2px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after,
.site-nav a.is-current::after{ transform:scaleX(1); transform-origin:left; }
.site-nav a.is-current{ color:var(--orange-deep); }

.cta{
  flex:none;
  padding:.56rem 1.2rem; border:0; border-radius:100px;
  background:var(--ink); color:#fff; text-decoration:none;
  font-size:.74rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; box-shadow:var(--shadow-s);
  transition:background .3s var(--ease), transform .3s var(--ease-out);
}
.cta:hover{ background:var(--orange-deep); transform:translateY(-1px); }

/* hamburger — hidden until the nav collapses */
.nav-toggle{
  display:none; flex:none;
  width:40px; height:40px; padding:9px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  cursor:pointer;
}
.nav-toggle span{
  display:block; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .32s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span + span{ margin-top:4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ══════════════════ stage ══════════════════ */

.stage{
  display:grid;
  grid-template-columns:var(--panel-w) 1fr;
  gap:clamp(1.25rem,2.6vw,3rem);
  align-items:start;
  padding:clamp(1.25rem,3.4vw,3.5rem) var(--pad) clamp(1rem,2.4vw,2.5rem);
}
/* DOM order is map → panel (best for small screens);
   on wide screens grid placement puts the panel back on the left. */
.panel   { grid-column:1; grid-row:1; }
.map-wrap{ grid-column:2; grid-row:1; }

/* ══════════════════ detail panel ══════════════════ */

.panel{ position:sticky; top:calc(var(--head-h) + 16px); }

.panel-inner{
  position:relative;
  min-height:clamp(420px, calc(100vh - 150px), 740px);
  max-height:calc(100vh - 116px);
  padding:clamp(1.25rem,1.9vw,1.9rem);
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow-m);
  overflow:hidden;
  animation:riseIn 1s .12s var(--ease-out) both;
}
/* accent hairline down the leading edge */
.panel-inner::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--orange) 0 33.333%, #E9E4DA 33.333% 66.666%, var(--green) 66.666% 100%);
  transform:scaleY(0); transform-origin:top;
  animation:growY 1.4s .5s var(--ease-out) forwards;
}
/* scroll affordance */
.panel-inner::after{
  content:""; position:absolute; left:3px; right:1px; bottom:0; height:46px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--surface) 86%);
}

.view{
  position:absolute; inset:clamp(1.25rem,1.9vw,1.9rem);
  opacity:0; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .28s var(--ease), transform .38s var(--ease-out);
  overflow-y:auto; overscroll-behavior:contain;
  padding-right:.6rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(247,127,0,.35) transparent;
}
.view.is-on{ opacity:1; transform:none; pointer-events:auto; }
.view::-webkit-scrollbar{ width:5px; }
.view::-webkit-scrollbar-track{ background:transparent; }
.view::-webkit-scrollbar-thumb{ background:rgba(247,127,0,.35); border-radius:5px; }

/* ── idle state ── */

.view-idle{ display:flex; flex-direction:column; }

.eyebrow{
  margin:0 0 .9rem; font-size:.68rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--orange-deep);
}

.display{
  margin:0 0 1rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.85rem,3.1vw,2.85rem); line-height:1.08;
  letter-spacing:-.018em;
}
.display em{ font-style:italic; font-weight:600; color:var(--green); }

.lede{
  margin:0 0 1.5rem; max-width:46ch;
  color:var(--ink-2); font-size:.92rem; line-height:1.66;
}

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.75rem; margin:0;
  padding:1.1rem 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.stat dd{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem,2.5vw,2.2rem); line-height:1;
  color:var(--orange-deep); font-variant-numeric:tabular-nums;
}
.stat dt{
  margin-top:.4rem; font-size:.64rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
}

.hint{
  display:flex; align-items:center; gap:.55rem;
  margin:auto 0 0; padding-top:1.4rem;
  font-size:.77rem; color:var(--muted);
}
.hint-dot{
  width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none;
  animation:blip 2.4s var(--ease) infinite;
}
.hint-touch{ display:none; }

/* ── detail state ── */

.d-back{
  margin:0 0 .9rem; padding:.42rem .9rem;
  background:var(--surface-2); border:1px solid var(--line-soft); border-radius:100px;
  color:var(--ink-2); font-family:var(--sans);
  font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; transition:background .3s, color .3s;
}
.d-back:hover{ background:var(--orange-soft); color:var(--orange-deep); }

.d-region{
  margin:0 0 .35rem; font-size:.68rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green-deep);
}
.d-city{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1.05; letter-spacing:-.015em;
}
.d-count{
  margin:.55rem 0 .95rem; padding-bottom:.85rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.81rem; color:var(--ink-2);
}
.d-count b{ color:var(--orange-deep); font-weight:600; }

.co-list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.co-list > .co:last-child{ margin-bottom:2rem; }

.co{
  padding:.7rem .85rem;
  border:1px solid var(--line-soft); border-radius:11px;
  background:var(--surface-2);
  opacity:0; transform:translateX(-10px);
  animation:slideIn .45s var(--ease-out) forwards;
  transition:border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
.co:hover{ border-color:rgba(247,127,0,.45); background:#fff; box-shadow:var(--shadow-s); }
.co.is-featured{ border-color:rgba(247,127,0,.5); background:rgba(247,127,0,.07); }

.co-name{
  display:flex; align-items:center; gap:.45rem; flex-wrap:wrap;
  font-size:.875rem; font-weight:600; margin-bottom:.2rem;
}
.co-name .num{
  color:var(--muted); font-size:.72rem; font-weight:500; font-variant-numeric:tabular-nums;
}

.tag{
  padding:.1rem .45rem; border-radius:100px;
  font-size:.6rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.tag-featured{ color:#fff; background:var(--orange); }
.tag-pending { color:var(--ink); background:rgba(240,180,41,.28); }
.tag-multi   { color:#fff; background:var(--green); }

.co-rows{ display:grid; gap:.1rem; margin-top:.3rem; }
.co-row{ display:flex; gap:.55rem; font-size:.755rem; line-height:1.45; }
.co-row .k{
  flex:none; width:3.6rem; padding-top:.12rem;
  color:var(--muted); font-size:.63rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
}
.co-row .v{ color:var(--ink-2); word-break:break-word; min-width:0; }
.co-row a{
  color:var(--green-deep); text-decoration:none;
  border-bottom:1px solid rgba(0,158,96,.28);
  transition:color .25s, border-color .25s;
}
.co-row a:hover{ color:var(--orange-deep); border-bottom-color:var(--orange); }

.co-note{
  margin:.45rem 0 0; padding-top:.42rem; border-top:1px dashed var(--line-soft);
  font-size:.71rem; color:var(--muted); font-style:italic;
}

/* ══════════════════ map ══════════════════ */

.map-wrap{ position:relative; min-width:0; animation:riseIn 1s .2s var(--ease-out) both; }

.map-meta{
  display:flex; align-items:center; gap:.85rem; margin-bottom:.6rem;
  font-size:.65rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.map-meta .rule{ flex:1; height:1px; background:var(--line-soft); }

.civ-map{
  display:block; width:100%; height:auto;
  max-height:min(78vh, 780px);
  overflow:visible;
  touch-action:manipulation;
}

.land{ fill:url(#landFill); }
.land-tex{ fill:url(#dots); opacity:.9; }

/* ── administrative districts ── */

.region{
  fill:none;
  stroke:rgba(27,33,39,.22);
  stroke-width:.9;
  stroke-linejoin:round;
  pointer-events:none;          /* purely cartographic — markers own the hover */
  transition:fill .35s var(--ease), stroke .35s var(--ease);
}
.region.is-lit{
  fill:rgba(247,127,0,.14);
  stroke:var(--orange);
  stroke-width:1.8;
}
.region-lbl{
  fill:var(--orange-deep); font-family:var(--sans); font-weight:600;
  letter-spacing:.14em; pointer-events:none;
  paint-order:stroke; stroke:rgba(255,255,255,.9); stroke-width:4; stroke-linejoin:round;
  opacity:0; transition:opacity .3s var(--ease);
}
.region-lbl.is-on{ opacity:.95; }

.outline{
  fill:none; stroke:url(#strokeGrad); stroke-width:2.6;
  stroke-linejoin:round; stroke-linecap:round;
  filter:url(#softGlow);
}

/* leader line from pin to panel */
.leader{
  stroke:var(--orange); stroke-width:1.4; stroke-dasharray:4 5;
  opacity:0; transition:opacity .3s var(--ease);
}
.leader.is-on{ opacity:.7; }
.leader-cap{ fill:var(--orange); opacity:0; transition:opacity .3s var(--ease); }
.leader-cap.is-on{ opacity:1; }

/* ── markers ── */

.marker{ cursor:pointer; }
.marker .hit{ fill:transparent; }
.marker:focus{ outline:none; }
.marker:focus-visible .halo{ stroke:var(--ink); stroke-width:2.4; }

/* transform-box:fill-box is REQUIRED — without it transform-origin:center
   resolves against the SVG viewport, not the shape, and scaled circles
   drift away from their marker. */
.marker .ring,
.marker .halo,
.marker .core{ transform-box:fill-box; transform-origin:center; }

.marker .ring{ fill:none; stroke:var(--orange); stroke-width:1.8; opacity:0; }
.marker .halo{
  fill:rgba(255,255,255,.85); stroke:var(--orange); stroke-width:1.6;
  transition:transform .4s var(--ease-out), fill .35s, stroke .35s;
}
.marker .core{
  fill:var(--orange);
  transition:transform .4s var(--ease-out), fill .35s;
}
.marker .cnt{
  fill:#fff; font-family:var(--sans); font-weight:600;
  text-anchor:middle; dominant-baseline:central; pointer-events:none;
}
.marker .lbl{
  fill:var(--ink-2); font-family:var(--sans); font-weight:500;
  letter-spacing:.07em; pointer-events:none; paint-order:stroke;
  stroke:rgba(251,248,242,.95); stroke-width:3.5; stroke-linejoin:round;
  opacity:.75; transition:opacity .3s var(--ease), fill .3s;
}

.marker.is-pending .halo{ stroke:var(--amber); }
.marker.is-pending .core{ fill:var(--amber); }
.marker.is-multi   .halo{ stroke:var(--green); }

/* entrance — popIn animates transform ONLY, so the dimming rule below
   (a plain declaration) is still free to drive opacity. */
.marker{
  opacity:0; transform:scale(.2);
  transform-origin:center; transform-box:fill-box;
  transition:opacity .35s var(--ease);
}
.marker.is-in{ opacity:1; animation:popIn .62s var(--ease-out) forwards; }
.marker.is-in .ring{ animation:pulse 3.4s var(--ease-out) infinite; }

/* hover / active */
.civ-map.has-active .marker.is-in{ opacity:.3; }
.civ-map.has-active .marker.is-in.is-active{ opacity:1; }
.civ-map.has-active .marker:not(.is-active) .lbl{ opacity:0; }
.civ-map.has-active .land{ opacity:.9; transition:opacity .35s var(--ease); }

.marker.is-active .core{ transform:scale(1.3); }
.marker.is-active .halo{ transform:scale(1.55); fill:#fff; }
.marker.is-active .lbl{ opacity:1; fill:var(--ink); }
.marker.is-active .ring{ animation:none; opacity:0; }
.marker.is-pinned .core{ stroke:#fff; stroke-width:2; }

.legend{
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:.9rem;
  font-size:.7rem; color:var(--muted);
}
.lg{ display:flex; align-items:center; gap:.42rem; }
.sw{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.sw-a{ background:var(--orange); }
.sw-b{ background:var(--amber); }
.sw-c{ background:#fff; border:2px solid var(--green); }
.sw-d{ width:14px; height:0; border-radius:0; border-top:1px dashed rgba(27,33,39,.45); }

/* ══════════════════ brand line ══════════════════ */

.brandline{
  text-align:center;
  padding:clamp(3rem,7vw,6.5rem) var(--pad) clamp(2.5rem,5vw,4.5rem);
  border-top:1px solid var(--line-soft);
}
.brandline-rule{
  display:block; width:2px; height:clamp(1.8rem,4.5vw,3.4rem);
  margin:0 auto clamp(1.4rem,3vw,2.2rem); border-radius:2px;
  background:linear-gradient(180deg, var(--orange), #E9E4DA, var(--green));
  transform:scaleY(0); transform-origin:top;
}
.brandline.is-in .brandline-rule{ animation:growY 1s var(--ease-out) forwards; }

.brandline-name{
  margin:0 auto; max-width:16ch;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.1rem,8.5vw,6.5rem); line-height:1.02;
  letter-spacing:-.02em;
  background:linear-gradient(100deg, var(--green-deep) 6%, var(--green) 32%, var(--orange) 74%, var(--orange-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; transform:translateY(24px);
  overflow-wrap:break-word;
}
.brandline-name em{ font-style:italic; font-weight:300; }
.brandline.is-in .brandline-name{ animation:riseIn 1.2s .18s var(--ease-out) forwards; }

.brandline-sub{
  margin:clamp(.9rem,2vw,1.5rem) 0 0;
  font-size:clamp(.63rem,1.7vw,.75rem); font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
  opacity:0;
}
.brandline.is-in .brandline-sub{ animation:fadeIn 1s .55s var(--ease-out) forwards; }

/* ══════════════════ directory ══════════════════ */

.directory{ padding:clamp(1.75rem,4.5vw,4rem) var(--pad); }

.dir-head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.dir-head h3{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,3.4vw,2rem); letter-spacing:-.015em;
}
.dir-head p{
  margin:0; font-size:.72rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}

.dir-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-soft); border-radius:14px;
  background:var(--surface); box-shadow:var(--shadow-s);
}
.dir-table{ width:100%; border-collapse:collapse; font-size:.82rem; min-width:800px; }
.dir-table th{
  position:sticky; top:0; z-index:1;
  padding:.8rem 1rem; text-align:left; white-space:nowrap;
  background:var(--surface-2);
  font-size:.64rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line-soft);
}
.dir-table td{
  padding:.7rem 1rem; border-bottom:1px solid var(--line-soft);
  color:var(--ink-2); vertical-align:top;
}
.dir-table tbody tr{ transition:background .22s var(--ease); cursor:pointer; }
.dir-table tbody tr:hover{ background:rgba(247,127,0,.07); }
.dir-table tbody tr:last-child td{ border-bottom:0; }
.dir-table .c-num{ color:var(--muted); font-variant-numeric:tabular-nums; width:3.2rem; }
.dir-table .c-name{ color:var(--ink); font-weight:600; white-space:nowrap; }
.dir-table tr.r-featured .c-name{ color:var(--orange-deep); }
.dir-table tr.r-pending td{ color:var(--muted); font-style:italic; }
.dir-table a{ color:var(--green-deep); text-decoration:none; border-bottom:1px solid rgba(0,158,96,.25); }
.dir-table a:hover{ color:var(--orange-deep); border-bottom-color:var(--orange); }

/* ══════════════════ footer ══════════════════ */

.site-foot{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.6rem var(--pad) calc(2.5rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);
  font-size:.73rem; color:var(--muted);
}
.site-foot span:first-child{ font-weight:600; color:var(--ink-2); }

/* ══════════════════ keyframes ══════════════════ */

@keyframes dropIn { from{ opacity:0; transform:translateY(-14px); } to{ opacity:1; transform:none; } }
@keyframes riseIn { from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn { to{ opacity:1; } }
@keyframes growY  { to{ transform:scaleY(1); } }
@keyframes spin   { to{ transform:rotate(360deg); } }
@keyframes slideIn{ to{ opacity:1; transform:none; } }

@keyframes popIn{
  0%   { transform:scale(.2); }
  62%  { transform:scale(1.18); }
  100% { transform:scale(1); }
}
@keyframes pulse{
  0%   { opacity:.6; transform:scale(1); }
  70%  { opacity:0;  transform:scale(2.5); }
  100% { opacity:0;  transform:scale(2.5); }
}
@keyframes blip{
  0%,100%{ opacity:1;   box-shadow:0 0 0 0 rgba(247,127,0,.45); }
  50%    { opacity:.45; box-shadow:0 0 0 6px rgba(247,127,0,0); }
}
@keyframes drawOutline{ to{ stroke-dashoffset:0; } }

/* ══════════════════ responsive ══════════════════
   1100+  two columns, panel left
   1099–  single column, map first then panel
   760–   compact type, directory becomes cards
   ─────────────────────────────────────────────── */

@media (max-width: 1280px){
  :root{ --panel-w: 38%; }
}

@media (max-width: 1099px){
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    padding:.5rem var(--pad) 1rem;
    background:var(--surface);
    border-bottom:1px solid var(--line-soft);
    box-shadow:var(--shadow-m);
    transform-origin:top;
    display:none;
  }
  .site-nav.is-open{ display:flex; animation:dropIn .32s var(--ease-out) both; }
  .site-nav a{ padding:.8rem 0; border-bottom:1px solid var(--line-soft); font-size:.85rem; }
  .site-nav a::after{ display:none; }
  .nav-toggle{ display:block; }

  .stage{ grid-template-columns:1fr; }
  .panel   { grid-column:1; grid-row:2; position:static; }
  .map-wrap{ grid-column:1; grid-row:1; }

  .panel-inner{
    min-height:0; max-height:none;
    padding:1.25rem;
  }
  .panel-inner::after{ display:none; }
  /* in the stacked layout the panel grows with its content instead of
     scrolling inside a fixed box */
  .view{ position:static; inset:auto; overflow:visible; padding-right:0; }
  .view:not(.is-on){ display:none; }
  .view.is-on{ animation:riseIn .42s var(--ease-out) both; }
  .co-list > .co:last-child{ margin-bottom:0; }
  .hint{ padding-top:1.1rem; }

  .civ-map{ max-height:min(62vh, 620px); }
  .leader, .leader-cap{ display:none; }   /* nothing to point at when stacked */
}

@media (hover: none){
  .hint-desktop{ display:none; }
  .hint-touch  { display:inline; }
}

@media (max-width: 760px){
  :root{ --head-h: 60px; }

  .cta{ display:none; }
  .map-meta{ font-size:.6rem; letter-spacing:.14em; }
  .civ-map{ max-height:min(56vh, 480px); }
  .marker .lbl{ display:none; }          /* far too dense at this width */
  .legend{ font-size:.66rem; gap:.4rem 1rem; }

  .display{ font-size:clamp(1.6rem,7.4vw,2.2rem); }
  .lede{ font-size:.86rem; }
  .stats{ gap:.5rem; padding:.9rem 0; }
  .stat dd{ font-size:1.55rem; }
  .stat dt{ font-size:.58rem; letter-spacing:.1em; }

  .co-row{ font-size:.79rem; }
  .co-row .k{ width:3.3rem; }

  /* directory: table → stacked cards */
  .dir-scroll{ border:0; background:none; box-shadow:none; overflow:visible; }
  .dir-table{ min-width:0; }
  .dir-table thead{ display:none; }
  .dir-table tbody, .dir-table tr, .dir-table td{ display:block; width:100%; }
  .dir-table tr{
    margin-bottom:.6rem; padding:.85rem 1rem;
    border:1px solid var(--line-soft); border-radius:12px;
    background:var(--surface); box-shadow:var(--shadow-s);
  }
  .dir-table td{
    display:flex; gap:.7rem; padding:.16rem 0; border:0;
    font-size:.8rem;
  }
  .dir-table td::before{
    content:attr(data-l); flex:none; width:4.8rem; padding-top:.1rem;
    color:var(--muted); font-size:.62rem; font-weight:500;
    letter-spacing:.09em; text-transform:uppercase;
  }
  .dir-table .c-num{ display:none; }
  .dir-table .c-name{ white-space:normal; font-size:.95rem; margin-bottom:.35rem; }
  .dir-table .c-name::before{ display:none; }
}

@media (max-width: 400px){
  .brand-sub{ display:none; }
  .site-foot{ flex-direction:column; gap:.4rem; }
}

/* ══════════════════ reduced motion ══════════════════ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .marker{ opacity:1; transform:none; }
  .brandline-name,.brandline-sub{ opacity:1; transform:none; }
  .brandline-rule{ transform:scaleY(1); }
  .panel-inner::before{ transform:scaleY(1); }
  .outline{ stroke-dashoffset:0 !important; }
}