/* ═══════════════════════════════════════════════════════════════
   MASTER PLAN — portal pages (home, dataset, about)
   Same institutional-cartography language as the viewer: navy signage
   bar with tick-mark collar, condensed display type, hairlines,
   monochrome blue on paper white.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:#ffffff;
  --paper-2:#f7fafd;
  --paper-3:#eef4fa;
  --ink:#0e1c2b;
  --ink-2:#3d5266;
  --muted:#7488a0;

  --navy:#07182b;
  --navy-2:#0d2c4a;
  --blue-800:#0a4685;
  --blue-700:#0b57a4;
  --blue-600:#0e6bc4;
  --blue-500:#1a82e0;
  --blue-400:#4c9fea;
  --blue-300:#84bef2;
  --blue-100:#dcebfb;
  --blue-050:#eff6fd;

  --line:#d5e2ef;
  --line-2:#e8f0f8;
  --accent:#0e6bc4;

  --top-h:60px;

  --shadow-1:0 1px 2px rgba(9,42,76,.06), 0 2px 8px rgba(9,42,76,.05);
  --shadow-2:0 2px 6px rgba(9,42,76,.09), 0 12px 32px rgba(9,42,76,.13);

  --f-display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body:"IBM Plex Sans", -apple-system, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, monospace;

  --ease:cubic-bezier(.4,.16,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--f-body); font-size:13px; color:var(--ink);
  background:var(--paper-3);
  -webkit-font-smoothing:antialiased;
}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}

.micro{
  font-family:var(--f-body); font-size:9.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.mono{font-family:var(--f-mono); font-size:11.5px; font-variant-numeric:tabular-nums}

/* ══ TOOLBAR ═════════════════════════════════════════════════ */
.site-bar{
  position:sticky; top:0; z-index:800; height:var(--top-h);
  display:flex; align-items:center; gap:16px; padding:0 18px 0 14px;
  background:linear-gradient(100deg, var(--navy) 0%, var(--navy-2) 62%, #123f6b 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 14px rgba(6,24,43,.34);
}
.site-bar::after{ /* hairline rule + tick marks, like a map collar */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:repeating-linear-gradient(90deg, var(--blue-400) 0 1px, transparent 1px 14px) bottom/100% 3px no-repeat;
  opacity:.5;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:34px;height:34px;flex:none;display:block;color:var(--blue-300)}
.bm-hex{stroke:var(--blue-300);stroke-width:1.6;fill:rgba(132,190,242,.1)}
.bm-grid{stroke:rgba(132,190,242,.42);stroke-width:1}
.bm-dot{fill:#fff;stroke:none}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text b{
  font-family:var(--f-display); font-size:23px; font-weight:700;
  letter-spacing:.15em; color:#fff; line-height:1.05; white-space:nowrap;
}
.brand-text i{
  font-style:normal; margin-top:1px; font-size:9.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue-300);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.site-nav{margin-left:auto; display:flex; gap:4px}
.site-nav a{
  position:relative; padding:9px 13px 8px;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-200, #b7d8f8); border-radius:2px; transition:.16s var(--ease);
}
.site-nav a:hover{background:rgba(255,255,255,.1); color:#fff}
.site-nav a.is-active{color:#fff}
.site-nav a.is-active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background:var(--blue-400);
}

/* ══ HERO ════════════════════════════════════════════════════ */
.hero{
  position:relative; overflow:hidden;
  height:min(74vh, 640px); min-height:420px;
  background:var(--navy);
}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.6s var(--ease), transform 7.5s linear;
}
.hero-slide.is-on{opacity:1; transform:scale(1)}

/* dark veil so white signage stays readable on any photo */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,24,43,.62) 0%, rgba(7,24,43,.38) 42%, rgba(7,24,43,.72) 100%);
}
/* the survey-grid motif from the viewer's splash screen */
.hero-grid{
  position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:linear-gradient(rgba(132,190,242,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(132,190,242,.5) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at 50% 46%, #000 0%, transparent 74%);
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 0%, transparent 74%);
}

.hero-inner{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 20px;
}
.hero-micro{
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--blue-300);
  animation:riseIn .7s var(--ease) both .1s;
}
.hero-inner h1{
  margin:10px 0 0;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(46px, 9vw, 86px); line-height:1;
  letter-spacing:.22em; text-indent:.22em; color:#fff;
  text-shadow:0 2px 18px rgba(4,16,32,.45);
  animation:riseIn .7s var(--ease) both .22s;
}
.hero-sub{
  margin:12px 0 0; font-size:12.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#dcebfb;
  animation:riseIn .7s var(--ease) both .34s;
}
.hero-btn{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:30px; padding:13px 22px 12px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); background:#fff; border-radius:2px;
  box-shadow:0 6px 26px rgba(4,16,32,.4);
  transition:.2s var(--ease);
  animation:riseIn .7s var(--ease) both .46s;
}
.hero-btn svg{width:15px;height:15px;stroke-width:2.2;transition:transform .2s var(--ease)}
.hero-btn:hover{background:var(--blue-050); transform:translateY(-1px)}
.hero-btn:hover svg{transform:translateX(3px)}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero-dots{
  /* sits clear of the entry cards, which overlap the hero's bottom edge */
  position:absolute; left:0; right:0; bottom:76px; z-index:6;
  display:flex; justify-content:center; gap:9px;
}
.hero-dots .dot{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.85); background:transparent;
  transition:.25s var(--ease);
}
.hero-dots .dot.is-on{background:#fff; transform:scale(1.15)}

/* ══ ENTRY CARDS ═════════════════════════════════════════════ */
.cards-wrap{flex:1; padding:0 20px}
.cards{
  max-width:1060px; margin:-58px auto 0; position:relative; z-index:5;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  padding-bottom:44px;
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  border-top:3px solid var(--accent);
  box-shadow:var(--shadow-1);
  padding:20px 22px 18px;
  transition:.22s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-2);
  border-color:var(--blue-300); border-top-color:var(--blue-500);
}
.card-num{
  position:absolute; top:14px; right:16px;
  font-size:11px; color:var(--blue-300); letter-spacing:.1em;
}
.card-ico{
  width:38px; height:38px; margin-bottom:14px; padding:8px;
  color:var(--blue-700); background:var(--blue-050);
  border:1px solid var(--blue-100); border-radius:2px;
  transition:.22s var(--ease);
}
.card:hover .card-ico{color:#fff; background:var(--accent); border-color:var(--accent)}
.card h2{
  margin:4px 0 8px; font-family:var(--f-display); font-size:24px; font-weight:600;
  letter-spacing:.05em; color:var(--navy); line-height:1.05;
}
.card p{margin:0 0 16px; font-size:12px; line-height:1.65; color:var(--ink-2); flex:1}
.card-go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent);
}
.card-go svg{width:13px;height:13px;stroke-width:2.2;transition:transform .2s var(--ease)}
.card:hover .card-go svg{transform:translateX(3px)}

/* ══ CONTENT PAGES (dataset / about) ═════════════════════════ */
.page-wrap{flex:1; padding:34px 20px 48px}
.page{max-width:860px; margin:0 auto}
.page-head{margin-bottom:22px}
.page-head h1{
  margin:4px 0 0; font-family:var(--f-display); font-size:40px; font-weight:600;
  letter-spacing:.06em; color:var(--navy); line-height:1;
}
.page-head p{margin:10px 0 0; font-size:12.5px; line-height:1.65; color:var(--ink-2); max-width:600px}

.sheet{
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  box-shadow:var(--shadow-1); overflow:hidden;
}
.sheet + .sheet{margin-top:14px}
.sheet-head{
  display:flex; align-items:center; gap:10px; padding:11px 16px;
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
.sheet-body{padding:16px}
.sheet-body p{margin:0 0 10px; font-size:12.5px; line-height:1.7; color:var(--ink-2)}
.sheet-body p:last-child{margin-bottom:0}

.data-table{width:100%; border-collapse:collapse}
.data-table th{
  text-align:left; white-space:nowrap; padding:9px 16px;
  background:var(--paper); border-bottom:1px solid var(--line);
  font-size:9.5px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted);
}
.data-table td{
  padding:9px 16px; border-bottom:1px solid var(--line-2);
  font-size:12px; color:var(--ink-2); vertical-align:middle;
}
.data-table tr:last-child td{border-bottom:0}
.data-table td:first-child{font-weight:500; color:var(--ink)}
.data-table .mono{font-size:11px; color:var(--muted)}
.dt-swatch{
  display:inline-block; width:11px; height:11px; border-radius:2px;
  margin-right:9px; vertical-align:-1px;
}
.dt-sub{
  display:block; margin-left:20px; margin-top:2px;
  font-family:var(--f-mono); font-size:9.5px; font-weight:400; color:var(--muted);
}
.kind-pill{
  display:inline-block; padding:2px 8px; border-radius:10px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em;
  color:var(--blue-800); background:var(--blue-050); border:1px solid var(--blue-100);
  text-transform:uppercase;
}
.note-line{margin-top:12px; font-size:11px; color:var(--muted)}

/* ══ FOOTER ══════════════════════════════════════════════════ */
.site-foot{
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  background:var(--paper); border-top:1px solid var(--line);
}
.site-foot .mono{color:var(--muted); font-size:10px}
.foot-sep{width:1px; height:12px; background:var(--line); flex:none}
.foot-grow{flex:1}

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width:900px){
  .cards{grid-template-columns:1fr; max-width:520px; margin-top:-44px}
}
@media (max-width:640px){
  .brand-text i{display:none}
  .brand-text b{font-size:19px}
  .site-nav a{padding:9px 8px 8px; letter-spacing:.1em}
  .hero{height:70vh}
  .hero-inner h1{letter-spacing:.14em; text-indent:.14em}
  .site-foot{flex-wrap:wrap; gap:8px}
  .foot-sep{display:none}
}