/* =====================================================================
   BriefGeo.us — visual system (prototype)
   Topographic-inspired palette: navy ink, teal water, warm paper.
   ===================================================================== */
:root{
  --ink:#1b2a41; --ink-soft:#33425a; --muted:#6b7891;
  --paper:#f7f5ef; --card:#ffffff; --line:#e4e0d6;
  --teal:#2a9d8f; --teal-dk:#1f7a6f; --accent:#e76f51;
  --shadow:0 1px 2px rgba(27,42,65,.06),0 6px 20px rgba(27,42,65,.07);
  --radius:14px; --maxw:1100px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-dk);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;color:var(--ink);margin:0 0 .4em}
h1{font-size:2rem;letter-spacing:-.02em}
.site-main{padding:28px 20px 56px}

/* Header */
.site-header{background:var(--ink);color:#fff;position:sticky;top:0;z-index:1000}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:60px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;font-size:1.15rem}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--teal);font-size:1.25rem;transform:translateY(1px)}
.brand-tld{color:var(--teal);font-weight:600}
.site-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.site-nav a{color:#d7dce6;font-size:.92rem}
.site-nav a:hover{color:#fff;text-decoration:none}
.nav-map{background:var(--teal);color:#fff !important;padding:7px 12px;border-radius:999px;font-weight:600}
.nav-map:hover{background:var(--teal-dk)}

/* Hero */
.hero{background:linear-gradient(135deg,#1b2a41,#22506b);color:#fff;border-radius:var(--radius);
  padding:46px 40px;margin-bottom:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero h1{color:#fff;font-size:2.5rem;max-width:18ch}
.hero p{color:#cfe3e6;font-size:1.15rem;max-width:52ch;margin:.2em 0 1.4em}
.hero .btn{margin-right:10px}
.btn{display:inline-block;background:var(--teal);color:#fff;padding:11px 20px;border-radius:999px;
  font-weight:600}
.btn:hover{background:var(--teal-dk);text-decoration:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff}

/* Section heads */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:34px 0 14px}
.section-head h2{font-size:1.4rem;margin:0}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--muted);font-weight:700}

/* Cards grid */
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:var(--shadow);display:block;color:inherit;transition:transform .12s ease}
.card:hover{transform:translateY(-2px);text-decoration:none}
.card .k-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.card h3{font-size:1.12rem;margin:.3em 0 .25em}
.card p{margin:0;color:var(--ink-soft);font-size:.94rem}
.card .count{color:var(--muted);font-size:.85rem;margin-top:8px}

.cat-card{border-left:5px solid var(--teal)}

/* Breadcrumb */
.crumb{color:var(--muted);font-size:.9rem;margin:0 0 12px}
.crumb a{color:var(--muted)}

/* Entry layout */
.entry-head h1{font-size:2.3rem;margin-bottom:.1em}
.entry-sub{color:var(--ink-soft);font-size:1.2rem;margin:.1em 0 0}
.entry-grid{display:grid;grid-template-columns:1fr 320px;gap:34px;margin-top:24px;align-items:start}
@media(max-width:860px){.entry-grid{grid-template-columns:1fr}}
.entry-body p{margin:0 0 1.05em;font-size:1.06rem}
.entry-hero-img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius);margin:6px 0 22px;box-shadow:var(--shadow)}
.img-placeholder{height:220px;border-radius:var(--radius);margin:6px 0 22px;
  display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px;
  font-size:.95rem;box-shadow:var(--shadow)}

/* Sidebar */
.side{position:sticky;top:80px;display:flex;flex-direction:column;gap:18px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.panel h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  margin:0;padding:13px 16px;border-bottom:1px solid var(--line);background:#fbfaf6}
.facts{list-style:none;margin:0;padding:4px 0}
.facts li{display:flex;justify-content:space-between;gap:14px;padding:8px 16px;font-size:.92rem;
  border-bottom:1px solid #f1eee6}
.facts li:last-child{border-bottom:0}
.facts .lab{color:var(--muted)}
.facts .val{text-align:right;font-weight:600}
.links{list-style:none;margin:0;padding:8px 16px}
.links li{padding:4px 0;font-size:.92rem}

/* Map containers */
.minimap{height:260px;border-radius:var(--radius);box-shadow:var(--shadow);z-index:0}
.map-page #map{position:absolute;inset:60px 0 0 0;z-index:0}
.map-legend{position:absolute;right:14px;top:74px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;z-index:500;font-size:.86rem;max-width:210px}
.map-legend h4{margin:0 0 6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.map-legend label{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer}
.swatch{width:12px;height:12px;border-radius:50%;display:inline-block;flex:none}

/* Related + tags */
.related-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.related-list a{display:flex;justify-content:space-between;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:10px 13px;color:inherit}
.related-list a:hover{text-decoration:none;border-color:var(--teal)}
.related-list .rel{color:var(--muted);font-size:.82rem}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.tag{background:#eef2f5;color:var(--ink-soft);border-radius:999px;padding:4px 11px;font-size:.82rem}

/* Ranking table */
.rank-toggle{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.rank-toggle a{font-size:.85rem;border:1px solid var(--line);background:#fff;padding:5px 11px;border-radius:999px;color:var(--ink-soft)}
.rank-toggle a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
table.rank{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.rank th,table.rank td{text-align:left;padding:10px 14px;border-bottom:1px solid #f1eee6;font-size:.94rem}
table.rank th{background:#fbfaf6;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
table.rank td.num{text-align:right;font-variant-numeric:tabular-nums}
table.rank tr:last-child td{border-bottom:0}

.site-footer{background:#fff;border-top:1px solid var(--line);padding:22px 0;color:var(--ink-soft);font-size:.92rem}
.foot-sep{margin:0 8px;color:var(--line)}
.foot-note{display:block;color:var(--muted);font-size:.84rem;margin-top:4px}
.notice{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:center;color:var(--ink-soft)}