:root{
  --paper:#f3ede1;
  --paper-2:#eae2d2;
  --paper-3:#e0d6c2;
  --ink:#1c211d;
  --ink-2:#3d453e;
  --ink-3:#6b7269;
  --line:#cfc4ad;
  --ochre:#b5561f;
  --ochre-soft:#c2703a;
  --river:#2f5d6b;
  --dark:#191f1c;

  --c-homeland:#3d6b4c;
  --c-contact:#5a7d8c;
  --c-dispossession:#a33b2a;
  --c-war:#6a4470;
  --c-migration:#b5561f;
  --c-allotment:#8a7448;
  --c-contemporary:#1b7a68;
  --c-return:#1b7a68;
  --c-other:#6b7269;

  --f-disp:"Fraunces",Georgia,serif;
  --f-body:"Inter Tight",system-ui,-apple-system,sans-serif;
  --r:10px;
  --sh:0 1px 2px rgba(28,33,29,.06),0 8px 28px -12px rgba(28,33,29,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--ochre);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--f-disp);font-weight:500;letter-spacing:-.015em;line-height:1.08;margin:0}
em{font-style:italic}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:12px clamp(16px,4vw,44px);
  background:rgba(243,237,225,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.brand .logo{display:block;height:52px;width:auto;flex:none;transition:opacity .2s ease}
.brand:hover .logo{opacity:.78}
.brand-rule{width:1px;align-self:stretch;margin:5px 0;background:var(--line);flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{font-family:var(--f-disp);font-weight:600;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap}
.brand-txt i{display:flex;align-items:center;gap:5px;font-style:normal;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.brand-txt i .arw{color:var(--ochre);font-size:13px;letter-spacing:0;line-height:1;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.brand:hover .arw{transform:translateX(3px)}
@media (max-width:860px){.brand{gap:11px}.brand .logo{height:42px}.brand-txt b{font-size:14px}.brand-txt i{font-size:10px}}
@media (max-width:560px){.brand .logo{height:36px}.brand-rule,.brand-txt{display:none}}
.topnav{display:flex;gap:26px}
.topnav a{color:var(--ink-2);text-decoration:none;font-size:13.5px;letter-spacing:.02em}
.topnav a:hover{color:var(--ochre)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,116px) clamp(16px,4vw,44px) clamp(48px,7vw,88px)}
.hero-wash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 480px at 12% -10%, rgba(47,93,107,.16), transparent 62%),
    radial-gradient(760px 420px at 92% 8%, rgba(181,86,31,.14), transparent 60%);
}
.hero-inner{position:relative;max-width:940px}
.eyebrow{margin:0 0 20px;font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ochre);font-weight:500}
.hero h1{font-size:clamp(26px,6.2vw,78px);font-weight:400}
.hero h1 .l1{display:block;white-space:nowrap}
.hero h1 em{display:block;color:var(--river)}
.lede{margin:26px 0 0;max-width:66ch;font-size:clamp(16px,1.55vw,18.5px);color:var(--ink-2)}
.lede em{color:var(--ink);font-style:italic}
.stats{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,52px);margin:40px 0 34px;padding-top:0}
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--f-disp);font-size:clamp(26px,3.2vw,38px);font-weight:400;line-height:1;color:var(--ochre)}
.stat span{margin-top:7px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:12px 26px;border-radius:100px;font-size:14px;letter-spacing:.03em;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--ochre);transform:translateY(-1px)}

/* ---------- section heads ---------- */
section{padding:clamp(48px,6vw,84px) clamp(16px,4vw,44px)}
.section-head{max-width:760px;margin-bottom:30px}
.section-head h2{font-size:clamp(27px,3.6vw,44px);font-weight:400}
.section-head p{margin:14px 0 0;color:var(--ink-2);font-size:15.5px}
.section-head.light h2,.section-head.light p{color:inherit}

/* ---------- atlas controls ---------- */
.atlas{padding-top:clamp(40px,5vw,68px)}
.controls{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.filters{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);
  padding:6px 13px;border-radius:100px;font:inherit;font-size:13px;
  transition:all .16s ease;
}
.chip i{width:8px;height:8px;border-radius:50%;display:block}
.chip:hover{border-color:var(--ink-3)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.search{display:flex;align-items:center;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:6px 14px}
.search svg{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:1.8;flex:none}
.search input{border:0;background:none;outline:none;font:inherit;font-size:13.5px;color:var(--ink);width:210px}
.toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--ochre);width:15px;height:15px}

/* ---------- timeline ---------- */
.timeline{margin-bottom:18px;padding:14px 18px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r)}
.tl-label{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tl-label b{color:var(--ochre);font-weight:600}
#year{width:100%;margin:10px 0 4px;accent-color:var(--ochre)}
.tl-ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);letter-spacing:.05em}

/* ---------- map layout ---------- */
.mapwrap{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:stretch}
.list{
  height:640px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper-2);padding:8px;scrollbar-width:thin;
}
.li{
  width:100%;text-align:left;display:block;background:none;border:0;border-radius:8px;
  padding:11px 12px 11px 14px;cursor:pointer;font:inherit;color:var(--ink);
  border-left:3px solid transparent;transition:background .14s ease;
}
.li:hover{background:var(--paper-3)}
.li.is-active{background:var(--paper-3);border-left-color:var(--ochre)}
.li h4{margin:0;font-family:var(--f-disp);font-weight:500;font-size:14.5px;line-height:1.25}
.li p{margin:3px 0 0;font-size:11.5px;color:var(--ink-3);letter-spacing:.02em}
.li .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px}
.list-empty{padding:24px 14px;color:var(--ink-3);font-size:13.5px}

.mapcol{position:relative}
#map{height:640px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--paper-3)}
#map canvas{filter:saturate(.62) sepia(.2) contrast(1.03)}
.resetview{position:absolute;top:12px;left:52px;z-index:4;background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:5px 13px;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;box-shadow:0 1px 4px rgba(28,33,29,.12)}
.resetview:hover{background:var(--paper-2);color:var(--ochre)}
.mapnote{margin-top:8px;font-size:11px;color:var(--ink-3);line-height:1.5}
.mapnote a{color:var(--ink-3)}

/* markers */
.mk{width:15px;height:15px;border-radius:50%;border:2px solid var(--paper);cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.34);transition:transform .16s ease}
.mk:hover{transform:scale(1.42)}
.mk.is-sel{transform:scale(1.55);box-shadow:0 0 0 5px rgba(181,86,31,.32),0 1px 6px rgba(0,0,0,.4)}
.maplibregl-popup-content{font-family:var(--f-body);font-size:12.5px;padding:7px 11px;border-radius:6px}

/* detail panel */
.panel{
  position:absolute;top:12px;right:12px;width:min(400px,calc(100% - 24px));max-height:calc(100% - 24px);
  overflow-y:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:20px 22px 22px;z-index:5;
  animation:slidein .26s cubic-bezier(.16,1,.3,1);
}
@keyframes slidein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.panel .close{position:absolute;top:12px;right:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:50%;width:28px;height:28px;cursor:pointer;color:var(--ink-2);font-size:15px;line-height:1;display:grid;place-items:center}
.panel .close:hover{background:var(--paper-3)}
.panel .kicker{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.panel .kicker i{width:8px;height:8px;border-radius:50%}
.panel h3{margin:9px 40px 0 0;font-size:22px;font-weight:500;line-height:1.16}
.panel .mohname{margin:6px 0 0;font-style:italic;color:var(--river);font-size:13.5px}
.panel .dates{margin:10px 0 0;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ochre);font-weight:500}
.panel p.body{margin:14px 0 0;font-size:14.5px;color:var(--ink-2)}
.panel .sig{margin-top:14px;padding:12px 14px;background:var(--paper-2);border-left:2px solid var(--ochre);border-radius:0 6px 6px 0;font-size:13.5px;color:var(--ink-2)}
.panel .sig b{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px;font-weight:600}
.panel .srcs{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.panel .srcs b{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;font-weight:600}
.panel .srcs a{display:block;font-size:12.5px;margin-bottom:5px;line-height:1.45}
.panel .flag{margin-top:12px;font-size:12.5px;color:var(--c-dispossession);background:rgba(163,59,42,.07);padding:9px 12px;border-radius:6px}

/* ---------- journey ---------- */
.journey{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 21px;cursor:pointer;transition:border-color .18s ease,transform .18s ease;position:relative}
.step:hover{border-color:var(--ochre);transform:translateY(-2px)}
.step.is-branch{background:repeating-linear-gradient(135deg,var(--paper) 0 10px,var(--paper-2) 10px 20px);border-style:dashed}
.step.is-branch .n{color:var(--c-allotment)}
.step .n{font-family:var(--f-disp);font-size:12px;letter-spacing:.14em;color:var(--ochre)}
.step h4{margin:8px 0 0;font-family:var(--f-disp);font-weight:500;font-size:17.5px;line-height:1.2}
.step .yr{margin:6px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.step p{margin:10px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* ---------- exhibition ---------- */
.ex-meta{color:#a9b0a5;font-size:14.5px;max-width:70ch}
.ex-meta b{color:#e8e1d3;font-weight:500}
.pull{margin:0 0 34px;padding:26px 0 26px 26px;border-left:2px solid var(--ochre-soft);max-width:74ch}
.pull p{margin:0;font-family:var(--f-disp);font-size:clamp(17px,2.1vw,23px);font-weight:300;line-height:1.44;color:#f0eade}
.pull cite{display:block;margin-top:14px;font-style:normal;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:#8f9689}
.ex-intro{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;max-width:1180px;margin-bottom:40px}
.ex-intro p{margin:0;font-size:15px;color:#c2c8bd}
.ex-intro b{color:#f0eade;font-weight:500}
.ex-intro .caveat{font-size:13.5px;color:#8f9689;border-top:1px solid #333a35;padding-top:16px}

.artists{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}

/* ---------- notes ---------- */
.notegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.note{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:20px 21px}
.note h3{font-size:17px;font-weight:500;color:var(--ochre)}
.note p{margin:10px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.58}
.colophon{margin:26px 0 0;max-width:78ch;font-size:13px;color:var(--ink-3);line-height:1.6}

.foot{padding:26px clamp(16px,4vw,44px) 44px;border-top:1px solid var(--line)}
.foot p{margin:0;font-size:12.5px;color:var(--ink-3);max-width:74ch}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .ex-intro{grid-template-columns:1fr;gap:20px}
}
@media (max-width:860px){
  .topnav{display:none}
  .mapwrap{grid-template-columns:1fr}
  .list{height:300px;order:2}
  #map{height:460px}
  .panel{position:fixed;inset:auto 10px 10px 10px;width:auto;max-height:64vh;top:auto}
  .search input{width:150px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}