/*
Theme Name: the.BUR Console
Theme URI: https://thebur.site
Author: the.BUR
Author URI: https://thebur.site
Description: the.BUR — Bountiful Urbanism Relationships. A classic WordPress theme porting the thebur1 "console" design system: navy shell, amber edge-ticks, stacked tabbed panels, paper readout body. DM Serif Display / Inter / JetBrains Mono. Maps are articles categorised "Map" whose body embeds a Leaflet iframe; the tactical console dashboard drives the homepage panel 04.
Version: 2.2.32
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thebur-console
Tags: one-column, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   the.BUR — CONSOLE DESIGN SYSTEM
   Palette + type pulled from the stylescape (navy / amber / paper),
   structure inspired by the bridge-console wireframe (rounded frame,
   edge ticks, stacked read-out panels with tab labels).
   ========================================================= */

:root{
  --navy:        #14213D;
  --navy-deep:   #0A1526;
  --navy-soft:   #1D2E52;
  --amber:       #FCA311;
  --amber-deep:  #E08F00;
  --paper:       #F3EFE6;
  --surface:     #FFFFFF;
  --ink:         #12141A;
  --muted:       #5B5F6B;
  --line:        #DCD5C6;
  --line-dark:   rgba(255,255,255,.14);

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Space Mono', monospace;

  --frame-radius: 34px;
  --panel-gap: 3px;
  --rail-w: 96px;
  --max: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding: 10px;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
figure{ margin:0; }
blockquote{ margin:0; }

/* ---------- the outer console shell ---------- */
.shell{
  position:relative;
  width:100%;
  max-width: 1520px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: var(--frame-radius);
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.shell.is-depth .readout{ box-shadow: 0 0 0 1px rgba(255,255,255,.04); }

/* edge tick strip — decorative conduit marks, top of console */
.ticks{
  height: 14px;
  background:
    repeating-linear-gradient(90deg,
      var(--amber) 0 3px, transparent 3px 22px);
  opacity:.85;
  margin: 0 46px;
}
.ticks.ticks-end{ margin: 0 46px; opacity:.35; }

/* ---------- topbar ---------- */
.topbar{
  padding: 18px 34px 22px;
  position: relative;
}
.topbar-inner{
  display:flex; align-items:center; gap:28px;
}
.brand{
  font-family: var(--font-display);
  font-size: 26px;
  color:#fff;
  letter-spacing:.01em;
  flex-shrink:0;
  line-height:1;
}
.brand span{ color: var(--amber); }
.brand-logo img{ max-height:34px; width:auto; }

.pill-nav{
  display:flex; gap:8px; flex:1;
}
.pill-nav ul{ display:flex; gap:8px; flex:1; }
.pill-nav li{ list-style:none; }
.pill-nav a{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing:.06em;
  color:#B9C0D6;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--line-dark);
  transition: all .18s;
  white-space:nowrap;
  display:inline-block;
}
.pill-nav a:hover{ color:#fff; border-color: var(--amber); }
.pill-nav a.active,
.pill-nav .current-menu-item > a{ background: var(--amber); color: var(--navy); border-color: var(--amber); font-weight:700; }

.coords{
  font-family: var(--font-mono);
  font-size: 11px;
  color:#7C86A6;
  letter-spacing:.06em;
  text-align:right;
  flex-shrink:0;
}
.coords .lbl{ color: var(--amber); }
.coords.is-detached{ display:none !important; }
.coords .ur-live{
  color: #FCA311;
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.coords .ur-live .divider{ color:#5D6684; }
#urTemp{ color:#F3EFE6; }

/* clickable station readout — "STATION" asks the browser for the visitor's
   location (once), then the city / coords / clock / temperature re-target */
.coords .station-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:none; padding:0; margin:0;
  font:inherit; color:inherit; letter-spacing:inherit; text-align:right;
  cursor:pointer; flex-shrink:1; min-width:0;
  transition:color .18s;
}
.coords .station-btn:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px; border-radius:3px;
}
.coords .station-btn:hover{ color:#fff; }
.coords .station-btn:hover .lbl{ color:var(--amber); }

/* status dot — muted while idle, amber pulse while locating / live.
   the pulse is decorative (an illusion): we ask for location once and
   never track continuously */
.coords .dot{
  width:7px; height:7px; border-radius:50%;
  background:#5D6684;
  flex-shrink:0;
}
.coords .dot.locating{
  background:var(--amber);
  animation:bur-pulse .9s ease-out infinite;
}
.coords .dot.active{
  background:var(--amber);
  animation:bur-pulse 1.8s ease-out infinite;
}
@keyframes bur-pulse{
  0%   { box-shadow:0 0 0 0 rgba(252,163,17,.55); }
  70%  { box-shadow:0 0 0 9px rgba(252,163,17,0); }
  100% { box-shadow:0 0 0 0 rgba(252,163,17,0); }
}

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.burger span{ width:22px; height:2px; background:#fff; display:block; }
.burger[aria-expanded="true"] span{ background: var(--amber); }

/* ---------- mobile / tablet navigation ---------- */
.mobile-nav{
  display:none;
  background: var(--navy-deep);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  padding: 6px 22px 16px;
}
.mobile-nav a{
  display:block;
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing:.08em;
  text-transform:uppercase;
  color:#C7CCDC;
  padding: 14px 8px;
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav a:last-child{ border-bottom:none; }
.mobile-nav li{ list-style:none; }
.mobile-nav a:hover{ color:#fff; }
.mobile-nav a.active,
.mobile-nav .current-menu-item > a{ color: var(--amber); }

/* ---------- the light "readout" body that sits inside the frame ---------- */
.readout{
  background: var(--paper);
  border-radius: 26px 26px 0 0;
  overflow:hidden;
}

/* stacked panel = one HUD "section" with a left tab label, like the wireframe */
.panel{
  display:grid;
  grid-template-columns: var(--rail-w) 1fr;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  max-width: 100%;
}
.panel:last-of-type{ border-bottom:none; }
.readout .panel + .panel{ border-top:none; }

.panel-tab{
  background: var(--navy-deep);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top: 28px;
  border-right: 1px solid var(--line-dark);
  gap: 14px;
}
.panel-tab .tab-num{
  background: var(--amber);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight:700;
  font-size: 11px;
  border-radius:50%;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.panel-tab .tab-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.1em;
  color: var(--amber);
}

.panel-body{ padding: 44px 40px 52px; }

.section-lbl{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing:.14em;
  color: var(--amber-deep);
  margin-bottom: 10px;
  display:block;
}

/* ---------- generic content helpers ---------- */
.wrap{ max-width: var(--max); margin:0 auto; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); color: var(--navy); }
.muted{ color: var(--muted); }
.page-title{ margin-bottom:16px; }
.screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute !important; word-wrap:normal !important; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--navy); color:#fff;
  font-family: var(--font-mono); font-size:13px; letter-spacing:.04em;
  padding: 12px 22px; border-radius: 100px;
  transition: background .2s, transform .2s;
  border:1px solid var(--navy);
}
.btn:hover{ background: var(--amber); color: var(--navy); border-color:var(--amber); }
.btn-ghost{
  background:transparent; color:var(--navy); border:1px solid var(--line);
}
.btn-ghost:hover{ background: var(--navy); color:#fff; border-color:var(--navy); }
.btn-pad{ margin-top: 26px; }

/* corner brackets — HUD framing device used sparingly on hero media */
.bracket{ position:relative; }
.bracket::before,
.bracket::after{
  content:""; position:absolute; width:22px; height:22px;
  border: 2px solid var(--amber);
  z-index:2; pointer-events:none;
}
.bracket::before{ top:-2px; left:-2px; border-right:none; border-bottom:none; }
.bracket::after{ bottom:-2px; right:-2px; border-left:none; border-top:none; }

/* ---------- cards (articles / maps) ---------- */
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,33,61,.16); border-color: var(--amber); }
.card.hidden{ display:none; }
.thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#e9e5da; display:block; }
.thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.card:hover .thumb img{ transform: scale(1.05); }
.thumb .tag{
  position:absolute; top:10px; left:10px;
  background: var(--navy); color: var(--amber);
  font-family: var(--font-mono); font-size:10px; letter-spacing:.08em;
  padding: 5px 10px; border-radius: 3px;
  z-index:2;
}
.card-body{ padding:18px; flex:1; display:flex; flex-direction:column; }
.card-date{ font-family: var(--font-mono); font-size:11px; color: var(--muted); letter-spacing:.05em; }
.card-body h3{ font-size:19px; line-height:1.28; margin: 8px 0 8px; overflow-wrap:break-word; word-break:break-word; }
.card-body h3 a:hover{ color: var(--amber-deep); }
.card-excerpt{ font-size:13.5px; color: var(--muted); flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; }
.card-more{ font-family: var(--font-mono); font-size:12px; color: var(--navy); margin-top:14px; font-weight:600; display:inline-block; }
.card-more:hover{ color: var(--amber-deep); }

/* ---------- filters ---------- */
.filters{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom: 20px; }
.filters input{
  flex:1; min-width:220px; padding:12px 18px; border:1px solid var(--line); border-radius:4px;
  font-size:14px; font-family: var(--font-body); outline:none; background:#fff;
}
.filters input:focus{ border-color: var(--amber); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  padding: 8px 14px; border:1px solid var(--navy); border-radius:4px; cursor:pointer;
  font-family: var(--font-mono); font-size:11px; letter-spacing:.04em;
  background:#fff; color: var(--navy); transition: all .15s;
}
.chip.active, .chip:hover{ background: var(--navy); color:#fff; }
.count{ font-family: var(--font-mono); font-size:12px; color: var(--muted); margin-bottom:14px; }
#empty{ text-align:center; color: var(--muted); padding:60px; display:none; }

/* ---------- pager ---------- */
.pager-nums{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:36px; }
.pager-nums .page-numbers,
.pager-nums a{
  background:#fff; border:1px solid var(--line); color: var(--navy);
  padding:9px 16px; border-radius:4px; font-family: var(--font-mono); font-size:13px; font-weight:600;
}
.pager-nums .page-numbers.current,
.pager-nums a.active{ background: var(--navy); color:#fff; border-color: var(--navy); }
.pager-nums a:hover{ background: var(--amber); color: var(--navy); border-color: var(--amber); }

/* ---------- dashboard readouts ---------- */
.stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat{
  background:#fff; border:1px solid var(--line); border-radius:4px; padding:20px;
  border-left: 3px solid var(--amber);
}
.stat .n{ font-family: var(--font-display); font-size:34px; color: var(--navy); line-height:1; }
.stat .l{ font-family: var(--font-mono); font-size:11px; color: var(--muted); letter-spacing:.06em; margin-top:8px; }

.dash-grid{ display:grid; grid-template-columns: 1.3fr 1fr; gap:22px; }
.dash-card{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:22px 24px; }
.dash-card h4{ font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; color: var(--muted); text-transform:uppercase; margin-bottom:18px; }

.bars{ display:flex; align-items:flex-end; gap:18px; height:150px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; gap:8px; }
.bar{ width:100%; min-height:4px; background: var(--navy); border-radius:3px 3px 0 0; position:relative; }
.bar .val{ position:absolute; top:-20px; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--navy); }
.bar-col:nth-child(2) .bar{ background: var(--amber); }
.bar-yr{ font-family: var(--font-mono); font-size:11px; color: var(--muted); }

.donut-wrap{ display:flex; align-items:center; gap:22px; }
.donut{ width:130px; height:130px; border-radius:50%; flex-shrink:0; }
.legend{ display:flex; flex-direction:column; gap:9px; }
.legend li{ display:flex; align-items:center; gap:9px; font-size:13px; color: var(--ink); }
.legend .sw{ width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.legend .lc{ font-family: var(--font-mono); font-size:11px; color: var(--muted); margin-left:auto; }

/* =========================================================
   HOMEPAGE — hero panel + feature + map teaser
   ========================================================= */
.hero-panel{
  display: block;
  position:relative;
  padding: 70px 40px 66px;
  overflow:hidden;
  color:#fff;
  background-color: var(--navy);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.hero-panel .section-lbl{ color: var(--amber); }
.hero-panel h1{
  font-size: 44px; line-height:1.14; max-width: 680px;
  color:#fff; white-space:normal;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  overflow-wrap: break-word;
  word-break: break-word;
}
.hero-panel p{
  color: rgba(243,239,230,.92); max-width: 560px; margin-top:16px;
  font-size:16px; line-height:1.75;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  overflow-wrap: break-word;
  word-break: break-word;
}

.feature{ display:grid; grid-template-columns: 1fr 1.2fr; gap:40px; align-items:center; }
.feature-media{ aspect-ratio:1/1; width:100%; max-width:400px; overflow:hidden; border-radius:4px; order:2; justify-self:end; }
.feature-media img{ width:100%; height:100%; object-fit:cover; }
.feature-copy{ order:1; }
.feature-copy .card-date{ margin-bottom:12px; }
.feature-copy h2{ font-size:32px; line-height:1.2; margin-bottom:14px; }
.feature-copy p{ color: var(--muted); font-size:15.5px; margin-bottom:22px; }

.map-teaser{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-bottom:26px; }
.map-preview{ aspect-ratio: 1/1; border-radius:4px; overflow:hidden; position:relative; background:#e9e5da; display:block; }
.map-preview img{ width:100%; height:100%; object-fit:cover; }
.map-preview .cap{ position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(20,33,61,.85)); color:#fff; padding:24px 14px 12px; font-family: var(--font-mono); font-size:12px; }

/* =========================================================
   ARTICLE (single) — long-form read view
   ========================================================= */
.progress{ position:fixed; top:0; left:0; height:3px; background: var(--amber); z-index:300; width:0; }
.article-shell{ padding: 44px 40px 60px; min-width:0; max-width:100%; box-sizing:border-box; overflow-x:clip; }
.article-inner{ max-width: 720px; margin: 0 auto; min-width:0; width:100%; box-sizing:border-box; }
.article-wide{ max-width: 960px; width:100%; }
.crumbs{ font-family: var(--font-mono); font-size:11px; color: var(--muted); letter-spacing:.08em; margin-bottom:18px; overflow-wrap:break-word; word-break:break-word; }
.crumbs a:hover{ color: var(--navy); }
.title{ font-size:42px; line-height:1.14; color: var(--navy); margin-bottom:18px; transition:font-size .12s ease; overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
.meta{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-family: var(--font-mono); font-size:12.5px; color: var(--muted); padding-bottom:26px; border-bottom:1px solid var(--line); min-width:0; }
.meta .sep{ color: var(--amber-deep); }
.byline{ display:inline-flex; align-items:center; gap:9px; min-width:0; }
.avatar{ width:30px; height:30px; border-radius:4px; background: var(--amber); color: var(--navy); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:13px; font-family:var(--font-body); flex-shrink:0; }

.article-head{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:start; min-width:0; }
.article-head-copy{ min-width:0; }
.article-head-copy .title{ margin-bottom:18px; }

.hero-media{ width:220px; aspect-ratio:1/1; flex-shrink:0; border-radius:6px; overflow:hidden; border:1px solid var(--line); max-width:100%; }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-caption{ font-size:12.5px; color: var(--muted); font-style:italic; margin:10px 0 0; }

.lead{ font-size:19px; line-height:1.7; color: var(--navy); margin: 30px 0 26px; border-left:3px solid var(--amber); padding-left:20px; overflow-wrap:break-word; word-break:break-word; }
.article-body p{ font-size:16px; margin-bottom:22px; color:#1a1a1a; overflow-wrap:break-word; word-break:break-word; }

.block{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:26px; margin-bottom:24px; }
.block h2{ font-size:23px; color: var(--navy); margin-bottom:4px; display:flex; align-items:center; gap:12px; }
.block h2 .num{ background: var(--amber); color: var(--navy); border-radius:4px; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:15px; flex-shrink:0; }
.block p{ font-size:15px; color:#2a2a2a; margin-top:12px; }

.gallery,
.wp-block-gallery{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin: 34px 0; list-style:none; }
.gallery figure,
.wp-block-gallery figure.wp-block-image{ border-radius:4px; overflow:hidden; border:1px solid var(--line); margin:0; width:100%; height:100%; }
.gallery img,
.wp-block-gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; height:100%; max-width:none; }
.gallery figcaption,
.wp-block-gallery figcaption{ font-family:var(--font-mono); font-size:11px; color: var(--muted); padding:8px 10px; background:#fff; }
/* Gutenberg sets column count via a class like .columns-3 — honor it instead of the fixed 2-col default */
.wp-block-gallery.columns-1{ grid-template-columns: 1fr; }
.wp-block-gallery.columns-3{ grid-template-columns: repeat(3,1fr); }
.wp-block-gallery.columns-4{ grid-template-columns: repeat(4,1fr); }
.wp-block-gallery.columns-5{ grid-template-columns: repeat(5,1fr); }
.wp-block-gallery.columns-6{ grid-template-columns: repeat(6,1fr); }

.quote{ margin:34px 0; padding:32px; background: var(--navy); color:#fff; border-radius:4px; }
.quote blockquote{ font-family: var(--font-display); font-size:24px; line-height:1.4; text-align:center; }
.quote blockquote .hl{ color: var(--amber); }
.quote blockquote::before{ content:"\201C"; display:block; font-size:52px; color: var(--amber); line-height:.6; margin-bottom:14px; }

.tags{ display:flex; gap:9px; flex-wrap:wrap; margin: 34px 0 18px; }
.tags .tag2{ background:#fff; border:1px solid var(--line); padding:7px 14px; border-radius:4px; font-family:var(--font-mono); font-size:11.5px; color: var(--muted); display:inline-block; }
.tags .tag2:hover{ border-color: var(--amber); color: var(--navy); }

.share{ display:flex; align-items:center; gap:12px; margin:0 0 8px; }
.share span{ font-family:var(--font-mono); font-size:11.5px; color: var(--muted); letter-spacing:.06em; text-transform:uppercase; }
.share-btn{ background: var(--navy); color:#fff; padding:9px 16px; border-radius:4px; font-family:var(--font-mono); font-size:12px; display:inline-block; }
.share-btn:hover{ background: var(--amber); color: var(--navy); }

.author{ display:flex; gap:18px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:4px; padding:24px; margin-top:34px; }
.author .avatar{ width:56px; height:56px; font-size:22px; }
.author h4{ font-size:18px; margin-bottom:4px; color: var(--navy); }
.author p{ font-size:13.5px; color: var(--muted); }

.related{ max-width:960px; margin:44px auto 0; padding: 0 0 6px; }
.related h2{ font-size:24px; margin-bottom:22px; text-align:left; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.rc{ background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; display:flex; flex-direction:column; height:100%; }
.rc:hover{ border-color: var(--amber); }
.rc-thumb{ display:block; width:100%; aspect-ratio:1 / 1; overflow:hidden; background:#e9e5da; flex:0 0 auto; }
.rc-thumb img{ display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.rc .body{ padding:14px; display:flex; flex-direction:column; flex:1; }
.rc .date{ font-family:var(--font-mono); font-size:10.5px; color: var(--muted); }
.rc h3{
  font-size:15px; line-height:1.28; margin-top:6px; color: var(--navy);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

.pager2{ max-width:960px; margin:38px auto 0; display:flex; justify-content:space-between; gap:16px; }
.pager2 a{ flex:1; background:#fff; border:1px solid var(--line); border-radius:4px; padding:16px 18px; }
.pager2 a:hover{ border-color: var(--amber); }
.pager2 .dir{ font-family:var(--font-mono); font-size:10.5px; color: var(--amber-deep); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.pager2 .t{ font-size:15px; line-height:1.3; margin-top:4px; color: var(--navy); }
.pager2 .next{ text-align:right; }

/* ---------- map-article embed (standardised iframe) ---------- */
.map-embed{
  margin: 30px 0 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.map-embed iframe{
  width: 100% !important;
  max-width: 100% !important;
  height: 520px;
  border: none;
  display: block;
}
.map-embed .embed-cap{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  padding: 8px 10px;
  background:#fff;
  border-top: 1px solid var(--line);
}

/* ---------- entry content (block editor) ---------- */
.article-body,
.entry-content{ min-width:0; max-width:100%; overflow-wrap:break-word; word-break:break-word; }
.article-body > *,
.entry-content > *{ max-width: 720px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
.article-body .alignwide,
.article-body .alignfull,
.entry-content .alignwide,
.entry-content .alignfull{ max-width: 100%; }
.article-body .alignleft,
.entry-content .alignleft{ float:left; margin:0 22px 16px 0; }
.article-body .alignright,
.entry-content .alignright{ float:right; margin:0 0 16px 22px; }
.article-body h1,.article-body h2,.article-body h3,
.entry-content h1,.entry-content h2,.entry-content h3{ margin: 30px 0 14px; line-height:1.25; overflow-wrap:break-word; word-break:break-word; }
.article-body h2,.entry-content h2{ font-size:28px; }
.article-body h3,.entry-content h3{ font-size:22px; }
.article-body a,.entry-content a{ color: var(--navy); border-bottom:1px solid var(--line); }
.article-body a:hover,.entry-content a:hover{ color: var(--amber-deep); border-color: var(--amber); }
.article-body ul, .article-body ol,
.entry-content ul, .entry-content ol{ margin:0 0 22px 22px; }
.article-body li,.entry-content li{ margin-bottom:8px; }
.article-body ul,.entry-content ul{ list-style:disc; }
.article-body blockquote,
.entry-content blockquote{ border-left:3px solid var(--amber); background:#fff; padding:20px 24px; border-radius:0 4px 4px 0; margin:0 0 26px; font-family:var(--font-display); font-size:19px; color: var(--navy); }
.article-body img, .article-body figure img,
.entry-content img, .entry-content figure img{ cursor:default; max-width:100% !important; height:auto; }
.article-body figure,.entry-content figure{ margin:0 0 26px; max-width:100%; }
.article-body figcaption,.entry-content figcaption{ font-family:var(--font-mono); font-size:11px; color: var(--muted); padding:8px 4px 0; }
.article-body .wp-block-quote::before,.entry-content .wp-block-quote::before{ display:none; }
.article-body pre,
.entry-content pre{ background: var(--navy-deep); color:#fff; padding:18px; border-radius:4px; font-family:var(--font-mono); font-size:12.5px; overflow-x:auto; max-width:100%; box-sizing:border-box; }
.article-body code,
.entry-content code{ font-family:var(--font-mono); font-size:.9em; background:#efe9db; padding:2px 6px; border-radius:3px; overflow-wrap:break-word; word-break:break-word; }
.article-body table,
.entry-content table{ width:100%; max-width:100%; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:20px 0; border-collapse:collapse; }
.article-body .wp-block-embed iframe,
.article-body iframe,
.entry-content .wp-block-embed iframe,
.entry-content iframe{ max-width:100% !important; box-sizing:border-box; }

/* =========================================================
   MAPS archive (page-maps.php / category maps)
   ========================================================= */
.maps-wrap{ padding: 48px 40px 60px; }
.maps-note{ text-align:center; margin-top:36px; font-size:13.5px; color: var(--muted); }
.maps-note a{ color: var(--navy); font-weight:600; }
.maps-note a:hover{ color: var(--amber-deep); }
.maps-footer{ text-align:center; margin-top:28px; }

.maps-search{ display:flex; align-items:center; gap:12px; margin: 0 0 30px; padding: 12px 16px;
              background:#fff; border:2px solid var(--navy); border-left:4px solid var(--amber);
              max-width:520px; }
.maps-search .s-ico{ font-family:var(--font-mono); color:var(--amber-deep); font-size:16px; line-height:1; }
.maps-search input{ flex:1; border:none; outline:none; background:transparent;
                    font-family:var(--font-mono); font-size:13px; color:var(--navy); letter-spacing:.04em; }
.maps-search input::placeholder{ color: var(--muted); }
.maps-search .s-clear{ background:none; border:none; cursor:pointer; color:var(--muted); font-weight:700; font-size:15px; }
.maps-search .s-clear:hover{ color:var(--navy); }
.maps-res{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:.08em;
           margin:-18px 0 24px; text-transform:uppercase; }

/* =========================================================
   ARTICLES archive
   ========================================================= */
.articles-wrap{ padding: 48px 40px 60px; }
.lead-under{ max-width:640px; margin-bottom:30px; font-size:15.5px; line-height:1.8; }

/* =========================================================
   ABOUT page
   ========================================================= */
.about-wrap, .page-wrap{ padding: 48px 56px 60px; width:100%; max-width:1120px; margin:0 auto; box-sizing:border-box; }
.about-section{ margin-bottom: 48px; }
.about-section h2{ font-size:28px; margin-bottom:16px; }
.about-section p{ font-size:15.5px; color: var(--muted); line-height:1.8; margin-bottom:12px; }

.lead-card{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:4px; padding:24px 26px 4px; margin-bottom:24px; }

.what-list li{ padding:10px 0 10px 26px; position:relative; font-size:15px; color:var(--muted); border-bottom:1px solid var(--line); }
.what-list li::before{ content:"â–¸"; position:absolute; left:0; color: var(--amber-deep); }

.about-me-grid{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
.about-photo{ border-radius:4px; overflow:hidden; border:1px solid var(--line); }
.about-photo img{ width:100%; height:auto; display:block; }
.about-photo figcaption{ font-family: var(--font-mono); font-size:11px; text-align:center; color:var(--muted); padding:10px; background:#fff; border-top:1px solid var(--line); }

.books{ display:grid; grid-template-columns:1fr; gap:14px; }
.book{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:20px 22px; }
.book h3{ font-size:19px; margin-bottom:4px; }
.book .by{ font-family: var(--font-mono); font-size:11px; color: var(--amber-deep); margin-bottom:10px; letter-spacing:.05em; text-transform:uppercase; }
.book blockquote{ border-left:2px solid var(--amber); padding-left:14px; margin:10px 0; font-size:13.5px; color:var(--muted); font-style:italic; line-height:1.7; }
.book p{ font-size:13.5px; color:var(--muted); line-height:1.7; }

.books-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
               background:none; border:none; padding:0; cursor:pointer; font:inherit; color:var(--navy);
               border-bottom:1px solid var(--line); padding-bottom:12px; }
.books-toggle h2{ font-size:26px; }
.books-toggle:hover{ color: var(--amber-deep); }
.books-toggle .chev{ font-family: var(--font-mono); color: var(--amber-deep); font-size:15px;
                     transition: transform .25s ease; }
.books-toggle[aria-expanded="true"] .chev{ transform: rotate(90deg); }
.books-body{ overflow:hidden; transition: max-height .35s ease; max-height:0; }
.books-body.open{ max-height:5000px; }

.contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.contact-card{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:20px; }
.contact-card .lbl{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px; }
.contact-card .val{ font-size:15px; font-weight:600; color: var(--navy); }
.contact-card a.val:hover{ color: var(--amber-deep); }

/* =========================================================
   EXPLORER (site clusters + cambodian records)
   ========================================================= */
.explorer-wrap{ padding: 48px 40px 60px; }
.cluster-row{ display:grid; grid-template-columns: 1.3fr 1fr; gap:22px; margin: 34px 0 40px; }
.ex-card{ background:#fff; border:1px solid var(--line); border-radius:4px; padding:22px 24px; }
.ex-card h4{ font-family: var(--font-mono); font-size:11px; letter-spacing:.08em; color: var(--muted); text-transform:uppercase; margin-bottom:16px; }
.ex-card .stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.ex-card .mini .n{ font-family: var(--font-display); font-size:26px; color: var(--navy); line-height:1; }
.ex-card .mini .l{ font-family: var(--font-mono); font-size:10px; color: var(--muted); letter-spacing:.05em; text-transform:uppercase; margin-top:6px; }

.tag-pill{ display:inline-block; font-family: var(--font-mono); font-size:10.5px; letter-spacing:.04em;
           padding:3px 9px; border-radius:2px; color: var(--navy); margin:0 6px 8px 0; background: #F3E6C8; }
.tag-pill[data-type="blog"]{ background:#E7EDF7; }
.tag-pill[data-type="video"]{ background: var(--paper); }
.tag-pill[data-type="data"]{ background:#E3F0E6; }
.tag-pill[data-type="org"]{ background:#F8E2DA; }
.tag-pill[data-type="law"]{ background:#F3E6C8; }
.tag-pill[data-type="policy"]{ background:#E6F0F5; }

.ex-card .loc{ font-family: var(--font-mono); font-size:11px; color: var(--muted); margin-bottom:14px; }
.ex-card .loc strong{ color: var(--navy); }

.ex-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.ex-grid .card{ cursor:pointer; }
.ex-grid .card .thumb{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
                       background: var(--navy); color: var(--amber); font-family: var(--font-display); font-size:44px; position:relative; }
.ex-grid .card .thumb img{ position:absolute; inset:0; margin:auto; width:72%; height:72%;
                           object-fit:contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.ex-grid .card .thumb.v{ background: #0A1526; }
.ex-grid .card .thumb.d{ background: var(--navy-deep); }
.ex-grid .card .thumb.o{ background: #1D2E52; }
.ex-grid .card .thumb.l{ background: #1E3A5F; }
.ex-grid .card .thumb.p{ background: #24506E; }

/* Modal */
.ex-modal{ position:fixed; inset:0; background:rgba(10,21,38,.94); z-index:900;
           display:none; align-items:center; justify-content:center; padding:20px; }
.ex-modal.open{ display:flex; }
.ex-modal-box{ background:var(--paper); max-width:640px; width:100%; max-height:85vh; overflow-y:auto;
               border:2px solid var(--navy); border-left:4px solid var(--amber); padding:30px; position:relative; }
.ex-modal-box .ex-close{ position:absolute; top:14px; right:16px; background:var(--navy); color:var(--amber);
                         border:none; width:34px; height:34px; font-size:16px; cursor:pointer; font-family:var(--font-mono); }
.ex-modal-box .m-type{ font-family: var(--font-mono); font-size:11px; letter-spacing:.1em; color: var(--amber-deep); text-transform:uppercase; margin-bottom:8px; }
.ex-modal-box h2{ font-size:26px; color: var(--navy); margin-bottom:6px; }
.ex-modal-box .m-loc{ font-family: var(--font-mono); font-size:12px; color: var(--muted); margin-bottom:16px; }
.ex-modal-box .m-topics{ margin-bottom:16px; }
.ex-modal-box .m-blurb{ font-size:15px; line-height:1.75; color:#1a1a1a; }
.ex-modal-box .m-btn{ display:inline-block; margin-top:20px; background: var(--navy); color:#fff;
                      padding:11px 22px; text-decoration:none; font-size:13px; font-weight:600; }
.ex-modal-box .m-btn:hover{ background: var(--amber); color: var(--navy); }

/* =========================================================
   TACTICAL CARTOGRAPHY — DASHBOARD CONSOLE
   ========================================================= */
.tactical{
  --t-black:#0A1526;       /* navy-deep */
  --t-orange:#FCA311;      /* amber */
  --t-salmon:#7C86A6;      /* steel blue */
  --t-purple:#8892AC;      /* soft steel */
  --t-grid:#DCD5C6;        /* line */
  --t-grid-strong:#14213D; /* navy line */
  --t-red:#E08F00;         /* amber-deep (danger) */
  --t-grey:#5B5F6B;        /* muted */
  --t-field:#FFFFFF;       /* surface */
  --t-white:#F3EFE6;      /* paper text (on navy) */
  --t-mono:"JetBrains Mono","Space Mono",monospace;
  background: var(--navy);
  color: var(--t-white);
  font-family: var(--font-body);
  letter-spacing:.01em;
}
.tactical .t-title{ font-family:var(--font-display); font-weight:900; letter-spacing:.01em; }

/* rail layout: sidebar loader + stage */
.tic-tac{
  display:grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0;
  min-height: 560px;
  border: 2px solid var(--navy);
  border-top: none;
  border-radius: 24px 26px 24px 0;
  overflow:hidden;
  box-shadow: 0 26px 60px rgba(10,21,38,.38);
}
.tic-rail{
  grid-column: 1;
  grid-row: 2;
  z-index: 900;
  background: var(--navy);
  border-right: 2px solid var(--navy);
  padding: 0 14px 20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color: var(--amber) var(--navy);
}

/* Dashboard view: the layers rail (and its left slot) hides while the map
   pane is hidden, so the dashboard canvas spans the full console width.
   Because the stage is always full-width and the map is sized from
   left:250px → right:0, the map container keeps its exact box geometry
   across MAP/DASHBOARD toggles at every breakpoint — Leaflet never
   invalidates, never refetches tiles. */
.is-dash .tic-rail{ display:none; }
.is-dash .tic-stage{ border-left:none; border-top-left-radius:0; }
.tic-rail .rail-head{
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--t-mono); font-size:10px; letter-spacing:.16em;
  color: var(--amber);
  background: rgba(252,163,17,.08);
  border:1px solid var(--line-dark); border-left:3px solid var(--amber);
  padding:7px 10px; border-radius:6px;
  text-transform:uppercase;
}
.tic-rail .rail-head .orb{ width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(252,163,17,.25); }

/* layer data-loader blocks */
.layer{
  border:1px solid var(--line-dark);
  background: var(--navy-deep);
  cursor:pointer;
  border-radius:8px;
  transition: border-color .18s, transform .18s;
  user-select:none;
}
.layer:hover{ border-color: var(--amber); transform: translateX(3px); }
.layer.active{ border-color: var(--amber); background: rgba(252,163,17,.12); }
.layer .layer-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; gap:8px; }
.layer .layer-num{ font-family:var(--t-mono); font-size:10px; color: #9FA9C6; }
.layer .layer-name{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#C7CCDC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layer .layer-src{ font-size:9px; color: #A7B0CC; padding:0 10px 8px; line-height:1.6; }
.layer .layer-tag{ font-size:8px; padding:2px 6px; border-radius:2px; color:#000; }
.tag-geo{ background: var(--t-orange); }
.tag-tif{ background: var(--amber-deep); }
.layer .switch{ width:26px; height:14px; border-radius:7px; background:var(--line-dark); position:relative; flex-shrink:0; transition:background .18s; }
.layer.active .switch{ background: var(--amber); }
.layer .switch::after{ content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:#fff; transition:left .18s; }
.layer.active .switch::after{ left:14px; }

.rail-status{ font-size:9px; color: #9FA9C6; line-height:1.6; margin-top:auto; border-top:2px solid var(--line-dark); padding-top:10px; }
.rail-status b{ color: var(--amber); font-weight:700; }

/* memory portal — local import / export / purge */
.rail-mod{ border:1px solid var(--line-dark); background:var(--navy-deep); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; box-shadow:0 8px 18px rgba(10,21,38,.3); }
.rail-mod-head{ font-size:9px; letter-spacing:.16em; color: var(--amber); text-transform:uppercase; border-bottom:1px dashed var(--line-dark); padding-bottom:7px; }
.tbtn{
  display:flex; align-items:center; gap:8px;
  font-family:var(--t-mono); font-size:10px; letter-spacing:.06em;
  color: #C7CCDC; background:var(--navy-deep); border:1px solid var(--line-dark);
  padding:8px 9px; cursor:pointer; text-align:left; border-radius:6px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.tbtn:hover:not(:disabled){ border-color: var(--amber); background: rgba(252,163,17,.1); box-shadow:0 4px 12px rgba(252,163,17,.14); }
.tbtn:disabled{ opacity:.4; cursor:not-allowed; }
.tbtn-geo span{ color: var(--amber); text-transform:uppercase; }
.tbtn-exp{ flex:1; justify-content:center; }
.tbtn-danger{ border-color: var(--amber-deep); color: var(--amber); justify-content:center; }
.tbtn-danger:hover:not(:disabled){ background: rgba(224,143,0,.12); border-color: var(--amber); }
.tfile{
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--t-mono); font-size:10px; color: #C7CCDC;
  border:1px dashed var(--line-dark); border-radius:6px; padding:8px 9px; cursor:pointer;
}
.tfile span{ color: var(--t-purple); text-transform:uppercase; }
.tfile input{ font-size:9px; color: var(--t-purple); }
.tbtn-row{ display:flex; gap:7px; }
.rail-mod-note{ font-size:8px; color: #9FA9C6; line-height:1.5; }

/* ---------- backend-driven layer tree ---------- */
.layers-tree{
  border:1px solid var(--line-dark);
  background:var(--navy-deep);
  border-radius:8px;
  padding:6px;
  max-height:250px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color: var(--amber) var(--navy);
}
.layers-tree::-webkit-scrollbar{ width:6px; }
.layers-tree::-webkit-scrollbar-thumb{ background:var(--amber); border-radius:3px; }
.layers-tree::-webkit-scrollbar-track{ background:var(--navy); }

/* tree quick-search */
.tree-search{
  display:flex; align-items:center; gap:7px;
  border:1px solid var(--line-dark); border-radius:6px;
  background:var(--navy-deep); padding:6px 9px; cursor:text;
  transition:border-color .15s, box-shadow .15s;
}
.tree-search:focus-within{ border-color:var(--amber); box-shadow:0 0 0 2px rgba(252,163,17,.2); }
.tree-search .ts-ico{ font-size:12px; color:var(--amber); line-height:1; }
.tree-search input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:#F3EFE6; font-family:var(--t-mono); font-size:10px; letter-spacing:.06em;
}
.tree-search input::placeholder{ color:#6F7A9C; }
.tleaf.filter-off{ display:none !important; }
.tfolder.filter-off{ display:none !important; }
.tree-loading, .tfolder-empty{
  font-family:var(--t-mono); font-size:9px; color:#9FA9C6;
  letter-spacing:.12em; padding:12px 10px; text-align:center;
}

.tfolder{ display:flex; flex-direction:column; gap:2px; }
.tfolder-h{
  display:flex; align-items:center; gap:7px; width:100%;
  background:transparent; border:none; cursor:pointer;
  padding:7px 6px; color:#C7CCDC; font-size:10px; letter-spacing:.1em;
  text-align:left; text-transform:uppercase;
  transition:color .15s, background .15s;
}
.tfolder-h:hover{ color:#fff; background:rgba(252,163,17,.10); border-radius:4px; }
.tfolder-h .caret{
  font-size:10px; font-weight:700; color:var(--amber);
  width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(252,163,17,.16); border:1px solid rgba(252,163,17,.3); border-radius:4px;
  transition:transform .18s, background .18s; flex-shrink:0;
}
.tfolder-h:hover .caret{ background:var(--amber); color:var(--navy); }
.tfolder-h .dir-count{
  margin-left:auto; font-family:var(--t-mono); font-size:8px;
  color:var(--amber); background:rgba(252,163,17,.12);
  border-radius:7px; padding:1px 6px;
}
.tfolder.open .caret{ transform:rotate(90deg); }
.tfolder-b{ display:none; padding-left:14px; border-left:1px solid var(--line-dark); margin-left:8px; }
.tfolder.open > .tfolder-b{ display:flex; flex-direction:column; gap:2px; padding-top:2px; padding-bottom:4px; }

/* a single layer leaf */
.tleaf{
  display:flex; align-items:center; gap:7px;
  padding:7px 8px; border-radius:4px; cursor:pointer;
  font-size:10.5px; letter-spacing:.04em; color:#C9D1E7;
  border:1px solid transparent; user-select:none;
  transition:border-color .15s, background .15s, color .15s;
}
.tleaf:hover{ background:rgba(252,163,17,.10); color:#fff; }
.tleaf.on{ border-color:var(--amber); background:rgba(252,163,17,.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(252,163,17,.25); }
.tleaf .swatch{ width:10px; height:10px; border-radius:2px; flex-shrink:0; border:1px solid rgba(255,255,255,.35); }
.tleaf-name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tleaf .leaf-tag{
  font-family:var(--t-mono); font-size:7px; letter-spacing:.06em;
  padding:1px 5px; border-radius:7px; color:#000; flex-shrink:0;
}
.tleaf .tag-sql{ background:#8FAEFF; }
.tleaf .tag-geo{ background:var(--t-orange); }
.tleaf .tag-url{ background:var(--t-purple); color:#fff; }
.tleaf .switch{
  width:24px; height:12px; border-radius:6px; background:var(--line-dark);
  position:relative; flex-shrink:0; transition:background .18s;
}
.tleaf .switch::after{
  content:""; position:absolute; top:2px; left:2px; width:8px; height:8px;
  border-radius:50%; background:#fff; transition:left .18s;
}
.tleaf .switch.on{ background:var(--amber); }
.tleaf .switch.on::after{ left:14px; }
.tleaf.loading .tleaf-name::after{ content:"…"; color:var(--amber); }
.tleaf.err{ border-color:rgba(224,143,0,.6); }
.leaf-err{ display:block; width:100%; font-size:8px; color:#E0B35A; margin:0 0 4px; line-height:1.4; }
.tleaf.sketch{ border-style:dashed; }

/* base-map thumbnail switcher (collapsed until toggled open — tiles only
   load while the BASE MAP tab is open, saving bandwidth) */
.base-head{ margin-top:2px; }
.rail-head.base-head{
  cursor:pointer;
  background: rgba(252,163,17,.06);
  appearance:none; -webkit-appearance:none;
  width:100%; text-align:left;
  font-family:var(--t-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
.rail-head.base-head:hover{ border-color: var(--amber); background: rgba(252,163,17,.12); }
.rail-head.base-head .caret{ margin-left:auto; font-size:10px; color:var(--amber); transition:transform .18s; }
.rail-head.base-head[aria-expanded="true"] .caret{ transform: rotate(90deg); }
.base-body{ overflow:hidden; }
.base-body.collapsed{ display:none; }
.base-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:2px 0; }
.bthumb{
  position:relative; aspect-ratio:1/1; cursor:pointer; padding:0;
  background:var(--navy-deep); border:2px solid rgba(255,255,255,.22);
  border-radius:8px; overflow:hidden; transition:border-color .18s, transform .18s;
  text-align:left; appearance:none; -webkit-appearance:none;
}
.bthumb:hover{ transform:translateY(-2px); border-color:var(--amber); box-shadow:0 0 0 2px rgba(252,163,17,.18) inset; }
.bthumb.active{ border-color:var(--amber); box-shadow:0 0 0 2px rgba(252,163,17,.25) inset; }
.bthumb-grid{ position:absolute; inset:0; overflow:hidden; }
.bthumb-grid img{ position:absolute; display:block; max-width:none; }
.bthumb-name{
  position:absolute; right:0; bottom:0; left:0;
  background:rgba(10,21,38,.72); color:#F3EFE6;
  font-family:var(--t-mono); font-size:7px; letter-spacing:.08em;
  padding:2px 5px; text-transform:uppercase; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.bthumb.active .bthumb-name{ color:var(--amber); }

/* stage — full-width canvas; the rail overlays its left cell */
.tic-stage{
  grid-column: 1 / -1;
  grid-row: 2;
  background: #14213D;
  position:relative;
  min-height:560px;
  border-left: 2px solid var(--line-dark);
  border-top-left-radius: 24px;
}

/* toggle: MAP / DASHBOARD */
.tic-toggle{
  grid-column: 1 / -1;
  grid-row: 1;
  display:flex; gap:0; align-items:stretch;
  background: var(--navy);
  border-bottom: 2px solid var(--navy);
}
.tic-toggle button{
  flex:1;
  background:transparent; border:none; color: #B9C0D6;
  font-family:var(--t-mono); font-size:11px; letter-spacing:.16em;
  padding:13px 14px; cursor:pointer; text-transform:uppercase;
  border-bottom:3px solid transparent;
  transition:color .15s, border-color .15s, background .15s;
}
.tic-toggle button + button{ border-left:1px solid var(--amber); }
.tic-toggle button:hover{ color:#fff; }
.tic-toggle button.active{ color: var(--amber); border-bottom-color: var(--amber); background: rgba(252,163,17,.1); }

.tic-view{ display:none; }
.tic-view.active{ display:block; }

/* MAP pane — same fixed box as the old 250px-rail layout (its geometry
   never depends on the rail, so toggling views never reloads tiles) */
.tic-map{ position:absolute; top:0; bottom:0; left:250px; right:0; min-height:520px; background: #14213D; border-radius:0; }
.tic-map .leaflet-tile-pane{ filter: saturate(.92) contrast(1.0); }
.tic-map .leaflet-container{ background: #14213D; font-family: var(--t-mono); }
.tic-map .leaflet-control-attribution{ font-family:var(--t-mono); font-size:8px; background:rgba(20,33,61,.8); color:#B9C0D6; }
.tic-map .leaflet-control-attribution a{ color: var(--amber); }
.tic-map .leaflet-bar a{ background:var(--navy); color: var(--amber); border:1px solid rgba(252,163,17,.4); }
.tic-map .leaflet-bar a:hover{ background: var(--amber); color: var(--navy); }
.tic-map .leaflet-bar{ border:none; box-shadow:none; }
.tic-map .leaflet-bar a{ border-radius:4px; }
.tic-map .leaflet-control{ box-shadow:none; }
.tic-map .leaflet-control-zoom{ border:none; display:flex; flex-direction:column; gap:4px; border-radius:8px; }
.tic-map .leaflet-control-zoom a{ border:1px solid rgba(252,163,17,.4); font-size:18px; font-weight:700; }
.tic-map .leaflet-control-zoom a + a{ border-top:1px solid rgba(252,163,17,.4); margin-top:0; }

/* Leaflet.Draw — console chrome */
.tic-map .leaflet-draw-toolbar{
  border-radius:8px; border:1px solid rgba(252,163,17,.4);
  background:var(--navy); box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.tic-map .leaflet-draw-toolbar a{
  background-color:var(--navy); color:var(--amber);
  border-bottom:1px solid var(--line-dark); border-radius:0;
  position:relative;
}
.tic-map .leaflet-draw-toolbar a svg{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:17px; height:17px; pointer-events:none;
}
.tic-map .leaflet-draw-toolbar a:hover{ background-color:var(--navy-deep); filter:brightness(1.15); }
.tic-map .leaflet-draw-toolbar a.leaflet-disabled{ background-color:#223152; opacity:.45; }
.tic-map .leaflet-draw-toolbar .leaflet-draw-actions a{
  background:var(--navy); color:#F3EFE6; border:1px solid var(--amber);
  font-family:var(--t-mono); font-size:9px; letter-spacing:.06em; border-radius:3px;
}
.tic-map .leaflet-draw-toolbar .leaflet-draw-actions a:hover{ background:var(--amber); color:var(--navy); }
.tic-map .leaflet-draw.draw-polyline .leaflet-draw-draw-polyline,
.tic-map .leaflet-draw.draw-polygon .leaflet-draw-draw-polygon,
.tic-map .leaflet-draw.draw-rectangle .leaflet-draw-draw-rectangle,
.tic-map .leaflet-draw.draw-circle .leaflet-draw-draw-circle,
.tic-map .leaflet-draw.draw-marker .leaflet-draw-draw-marker{
  background-color:var(--navy-deep);
  box-shadow:inset 0 0 0 2px var(--amber);
}
.tic-map .leaflet-marker-icon.leaflet-editing-icon{ border-radius:4px; }

/* locate control (geolocation) */
.tic-map .leaflet-control.bur-locate{
  width:32px; height:32px; margin-top:6px;
  background:var(--navy); color:var(--amber);
  border:1px solid rgba(252,163,17,.4); border-radius:4px;
  cursor:pointer; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:background .15s, color .15s, border-color .15s;
}
.tic-map .leaflet-control.bur-locate:hover{ background:var(--amber); color:var(--navy); }

/* console popup */
.tic-map .leaflet-popup-content-wrapper{
  background: var(--navy-deep); color:#F3EFE6;
  border:1px solid rgba(252,163,17,.75); border-radius:8px;
  font-family:var(--t-mono); font-size:11px; letter-spacing:.03em;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.tic-map .leaflet-popup-content{ margin:11px 15px; line-height:1.5; }
.tic-map .leaflet-popup-tip{
  background:var(--navy-deep);
  box-shadow:0 0 0 1px rgba(252,163,17,.75);
}
.tic-map a.leaflet-popup-close-button{
  color:var(--amber); font-family:var(--t-mono); font-size:16px; padding:5px 7px 0 0;
}
.tic-map a.leaflet-popup-close-button:hover{ color:#fff; }

/* amber console marker (divIcon pin) */
.bur-marker-icon{ background:transparent; border:none; }
.bur-marker-icon i{
  position:absolute; left:3px; top:3px; width:20px; height:20px;
  background:var(--amber); border:2px solid var(--navy);
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:0 3px 8px rgba(0,0,0,.45);
}
.bur-marker-icon i::after{
  content:""; position:absolute; left:50%; top:50%; width:6px; height:6px;
  background:var(--navy-deep); border-radius:50%;
  transform:translate(-50%,-50%);
}

.map-legend{
  position:absolute; right:10px; bottom:24px; z-index:800;
  background: rgba(20,33,61,.72);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  backdrop-filter: blur(9px) saturate(1.1);
  border:1px solid rgba(252,163,17,.35);
  padding:10px 12px; font-size:9px; color: #F3EFE6;
  min-width:172px; max-width:230px; max-height:46%;
  overflow:auto; border-radius:10px;
  box-shadow:0 10px 26px rgba(10,21,38,.55);
  display:none;
}
.map-legend h5{ font-size:9px; letter-spacing:.14em; color:var(--amber); margin-bottom:7px; text-transform:uppercase; }
.map-legend ul{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.map-legend li{ display:flex; align-items:center; gap:8px; font-size:9px; }
.map-legend .sw{ width:14px; height:4px; border-radius:2px; flex-shrink:0; }

.map-readout{
  position:absolute; left:262px; top:10px; z-index:800;
  background:rgba(20,33,61,.9); border:1px solid var(--line-dark);
  border-radius:8px; box-shadow:0 8px 18px rgba(10,21,38,.35);
  padding:9px 11px; font-size:9px; color:#A7B0CC; letter-spacing:.08em;
  max-width:230px; line-height:1.6;
}
.map-readout b{ color: #F3EFE6; }

/* DASHBOARD pane — scrolls inside the map canvas if content grows */
.tic-dash{
  padding:20px 22px 24px;
  max-height:560px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color: var(--amber) var(--navy);
}
.tic-dash::-webkit-scrollbar{ width:8px; }
.tic-dash::-webkit-scrollbar-thumb{ background:var(--amber); border-radius:4px; }
.tic-dash::-webkit-scrollbar-track{ background:var(--navy); }
.tic-dash .dash-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.tic-dash .dash-headline{ font-size:17px; letter-spacing:.02em; color:#F3EFE6; }
.tic-dash .dash-headline span{ color: var(--amber); }
.tic-dash .dash-refresh{ font-size:9px; color: #9FA9C6; letter-spacing:.12em; font-family:var(--t-mono); }

/* tactical stat tiles */
.tic-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-bottom:18px; }
.tic-stat{ border:1px solid var(--line-dark); padding:13px 14px; position:relative; background:var(--navy-deep); border-radius:8px; box-shadow:0 8px 16px rgba(10,21,38,.28); }
.tic-stat::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background: var(--amber); border-radius:8px 8px 0 0; }
.tic-stat .t-n{ font-family:var(--font-display); font-weight:900; font-size:30px; color:#F3EFE6; line-height:1; }
.tic-stat .t-n small{ font-size:13px; color: var(--amber); }
.tic-stat .t-l{ font-size:9px; color:#A7B0CC; letter-spacing:.14em; margin-top:7px; text-transform:uppercase; font-family:var(--t-mono); }
.tic-stat .t-code{ position:absolute; top:9px; right:10px; font-size:8px; color:#8A94B5; font-family:var(--t-mono); }

/* tactical charts */
.tic-charts{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }
.tic-card{ border:1px solid var(--line-dark); background:var(--navy-deep); border-radius:8px; padding:16px 18px; box-shadow:0 8px 16px rgba(10,21,38,.28); }
.tic-card h4{ font-size:10px; letter-spacing:.16em; color: var(--amber); text-transform:uppercase; margin-bottom:14px; font-family:var(--t-mono); }

/* bars */
.tic-bars{ display:flex; align-items:flex-end; gap:14px; height:150px; }
.tic-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; }
.tic-bar-col .bar{ width:100%; background:#1D2E52; position:relative; min-height:3px; border-radius:2px 2px 0 0; transition:height .6s; }
.tic-bar-col .bar > span{ position:absolute; top:-18px; left:0; right:0; text-align:center; font-size:10px; color: var(--amber); font-family:var(--t-mono); }
.tic-bar-col:nth-child(2) .bar{ background: var(--amber); }
.tic-bar-col .bar-yr{ font-size:9px; color:#A7B0CC; letter-spacing:.1em; font-family:var(--t-mono); }

/* open API row + donut */
.tic-api-line{ border:1px dashed #1D2E52; padding:10px 12px; margin-bottom:12px; font-size:9px; color:#A7B0CC; line-height:1.7; font-family:var(--t-mono); }
.tic-api-line b{ color: var(--amber); }
.donut-wrap{ display:flex; align-items:center; gap:18px; }
.donut{ width:120px; height:120px; border-radius:50%; flex-shrink:0; }
.tic-legend{ list-style:none; display:flex; flex-direction:column; gap:7px; flex:1; }
.tic-legend li{ display:flex; align-items:center; gap:8px; font-size:10px; color:#C7CCDC; }
.tic-legend .sw{ width:10px; height:10px; flex-shrink:0; border-radius:2px; }
.tic-legend .lc{ font-family:var(--t-mono); color: var(--amber); margin-left:auto; }

/* tags readout card */
.tic-tags{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.tic-tags li{ display:flex; align-items:center; gap:8px; font-size:11px; color:#C7CCDC; }
.tic-tags .sw{ width:10px; height:10px; flex-shrink:0; border-radius:2px; background:var(--amber); }
.tic-tags .lc{ font-family:var(--t-mono); color: var(--amber); margin-left:auto; }

/* Facts & Figures — Data & analytics, filterable by city */
.tic-facts{ margin-top:22px; }
.tic-facts-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.tic-facts-head .t-title{ font-size:10px; letter-spacing:.16em; color:#A7B0CC; text-transform:uppercase; font-family:var(--t-mono); }
.tic-facts-head .t-title span{ color: var(--amber); }
.tic-fact-filter{ display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:.12em; color:#8A94B5; font-family:var(--t-mono); text-transform:uppercase; }
.tic-fact-filter select{ background:var(--navy-deep); color:#F3EFE6; border:1px solid var(--line-dark); border-radius:6px; padding:6px 10px; font-family:var(--t-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; outline:none; cursor:pointer; }
.tic-fact-filter select:focus{ border-color: var(--amber); }
.tic-fact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.tic-fact{ border:1px solid var(--line-dark); background:var(--navy-deep); border-radius:8px; padding:13px 14px 12px; box-shadow:0 8px 16px rgba(10,21,38,.28); display:flex; flex-direction:column; gap:4px; }
.tic-fact .f-k{ font-size:8px; letter-spacing:.14em; color:#8A94B5; font-family:var(--t-mono); text-transform:uppercase; }
.tic-fact .f-n{ font-family:var(--font-display); font-weight:900; font-size:25px; color:#F3EFE6; line-height:1; }
.tic-fact .f-n .f-u{ font-size:11px; color: var(--amber); }
.tic-fact .f-l{ font-size:10px; color:#C7CCDC; line-height:1.5; }
.tic-fact .f-s{ margin-top:auto; padding-top:6px; font-size:8px; color:#7C86A6; letter-spacing:.06em; font-family:var(--t-mono); border-top:1px dashed #1D2E52; }
.tic-facts-src{ margin-top:10px; font-size:8px; letter-spacing:.1em; color:#8A94B5; font-family:var(--t-mono); text-transform:uppercase; }
.tic-facts-src a{ color: var(--amber); text-decoration:none; }
.tic-facts-src a:hover{ text-decoration: underline; }

/* =========================================================
   INDICATOR DASHBOARD — themes → indicator → year
   data-driven from BUR_DASH (facts & figures desk)
   ========================================================= */
.dash-ind-empty{
  padding:34px 18px; text-align:center; font-size:9px; letter-spacing:.2em;
  color:#8A94B5; font-family:var(--t-mono); text-transform:uppercase;
  border:1px dashed var(--line-dark); border-radius:8px;
}
.dash-ind-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.dash-ind-head .t-title{ font-size:10px; letter-spacing:.16em; color:#A7B0CC; text-transform:uppercase; font-family:var(--t-mono); }
.dash-ind-head .t-title span{ color: var(--amber); }
.dash-ind-lead{ font-size:9px; letter-spacing:.1em; color:#8A94B5; font-family:var(--t-mono); text-transform:uppercase; }

/* theme chips */
.dash-themas{ display:flex; flex-wrap:wrap; gap:8px; }
.dash-theme-chip{
  border:1px solid var(--line-dark); background:var(--navy-deep); color:#C7CCDC;
  border-radius:999px; padding:6px 14px; cursor:pointer;
  font-family:var(--t-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  transition:background .15s, color .15s, border-color .15s;
}
.dash-theme-chip:hover{ border-color: var(--amber); color: var(--amber); }
.dash-theme-chip.is-active{ background: var(--amber); color:#14213D; border-color: var(--amber); font-weight:700; }

/* traced-city toggles */
.dash-city-pills{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin: 0 0 14px; }
.dash-city-lbl{ font-family:var(--t-mono); font-size:9px; letter-spacing:.16em; color:#8A94B5; text-transform:uppercase; margin-right:2px; }
.dash-city-pill{
  border:1px solid var(--line-dark); background:var(--navy-deep); color:#C7CCDC;
  border-radius:999px; padding:6px 14px; cursor:pointer;
  font-family:var(--t-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.dash-city-pill:hover{ border-color: var(--amber); color: var(--amber); box-shadow:0 0 0 2px rgba(252,163,17,.12) inset; }
.dash-city-pill.is-active{ background: var(--amber); color:#14213D; border-color: var(--amber); font-weight:700; }

/* indicator + year picks */
.dash-picks{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.dash-picks label{ display:flex; flex-direction:column; gap:5px; font-size:9px; letter-spacing:.14em; color:#8A94B5; font-family:var(--t-mono); text-transform:uppercase; }
.dash-picks select{
  background:var(--navy-deep); color:#F3EFE6; border:1px solid var(--line-dark);
  border-radius:6px; padding:7px 10px; font-family:var(--t-mono); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; outline:none; cursor:pointer;
  max-width:260px;
}
.dash-picks select:focus{ border-color: var(--amber); }

/* the four-pane grid */
.dash-ind-grid{ margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* chart picker on the desk decides which panes show (cards: 1 bars · 2 line · 3 table) */
.dash-ind-grid[data-chart="bars"] .tic-card:nth-child(2),
.dash-ind-grid[data-chart="bars"] .tic-card:nth-child(3),
.dash-ind-grid[data-chart="line"] .tic-card:nth-child(1),
.dash-ind-grid[data-chart="line"] .tic-card:nth-child(3),
.dash-ind-grid[data-chart="bars-table"] .tic-card:nth-child(2),
.dash-ind-grid[data-chart="line-table"] .tic-card:nth-child(1){ display:none; }

/* ranked bar chart across cities */
.dash-bars{ display:flex; align-items:flex-end; gap:10px; height:176px; padding-top:20px; }
.dash-bar-col{ flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; cursor:pointer; }
.dash-bar-track{ flex:1; width:100%; display:flex; align-items:flex-end; }
.dash-bar{ position:relative; width:100%; background:#1D2E52; min-height:4px; border-radius:3px 3px 0 0; transition:height .5s, background .15s; }
.dash-bar-col:hover .dash-bar{ background:#2C4178; }
.dash-bar.is-city{ background: var(--amber); }
.dash-bar-v{ position:absolute; top:-17px; left:0; right:0; text-align:center; font-size:9px; color: var(--amber); font-family:var(--t-mono); }
.dash-bar-name{
  font-size:8px; letter-spacing:.08em; color:#A7B0CC; font-family:var(--t-mono);
  text-transform:uppercase; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dash-bar-col.is-city .dash-bar-name{ color:#F3EFE6; }
.dash-bars-hint{ margin-top:10px; font-size:8px; letter-spacing:.08em; color:#7C86A6; font-family:var(--t-mono); text-transform:uppercase; }

/* time line across years (SVG) */
.dash-line-wrap{ position:relative; }
.dash-line svg{ width:100%; height:158px; display:block; overflow:visible; }
.dash-line .dg{ stroke:#1D2E52; stroke-width:1; }
.dash-line .dl{ fill:none; stroke: var(--amber); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.dash-line .dp{ fill: var(--navy-deep); stroke: var(--amber); stroke-width:2; }
.dash-line .dvy{ fill:#A7B0CC; font-family:var(--t-mono); font-size:9px; }
.dash-line .dvx{ fill:#8A94B5; font-family:var(--t-mono); font-size:8.5px; letter-spacing:.04em; }

/* city × year matrix */
.dash-table-wrap{ overflow-x:auto; }
.dash-table{ width:100%; border-collapse:collapse; }
.dash-table th, .dash-table td{ text-align:right; padding:7px 9px; border-bottom:1px solid var(--line-dark); font-family:var(--t-mono); font-size:11px; color:#D5DAE8; }
.dash-table th{ color:#8A94B5; font-size:9px; letter-spacing:.08em; text-transform:uppercase; text-align:center; }
.dash-table td.ci{ text-align:left; color:#F3EFE6; letter-spacing:.04em; text-transform:uppercase; font-size:9px; }
.dash-table tr.is-city td{ background:rgba(252,163,17,.08); }
.dash-table tr.is-city td.hi{ color: var(--amber); font-weight:700; }
.dash-table td.hi{ color: var(--amber); }
.dash-table .na{ color:#555F7E; }
.dash-src{ margin-top:10px; font-size:8px; letter-spacing:.08em; color:#8A94B5; font-family:var(--t-mono); text-transform:uppercase; }
.dash-src b{ color:#C7CCDC; }

/* commentary fact cards — their own section between Facts & figures and System readouts */
.dash-facts-empty{ font-size:9px; letter-spacing:.1em; color:#7C86A6; font-family:var(--t-mono); text-transform:uppercase; }
.dash-facts-sec{ margin-top:26px; border-top:1px dashed var(--line-dark); padding-top:14px; }
.dash-facts-sec .dash-city-pills{ margin:10px 0 12px; }
.dash-facts-sec .tic-fact-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }

/* system readouts — relegate WP charts below the indicators */
.dash-sys{ margin-top:26px; border-top:1px dashed var(--line-dark); padding-top:20px; }

@media (max-width:760px){
  .dash-ind-grid{ grid-template-columns:1fr; }
  .dash-facts-sec .tic-fact-grid{ grid-template-columns:1fr; }
  .tic-stats{ grid-template-columns:repeat(2,1fr); }
}

.tic-foot{ display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line-dark); font-size:9px; color:#9FA9C6; letter-spacing:.12em; font-family:var(--t-mono); }
.tic-foot .dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(252,163,17,.2); animation:tic-blink 1.2s infinite; }
@keyframes tic-blink{ 0%,100%{opacity:1} 50%{opacity:.3} }

/* =========================================================
   FOOTER
   ========================================================= */
.readout-footer{
  background: var(--navy-deep); color:#fff;
  padding: 44px 40px 26px;
}
.foot-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; margin-bottom:30px; }
.foot-brand p{ color:#8892AC; font-size:13px; margin-top:6px; font-family: var(--font-mono); }
.foot-col h4{ font-family: var(--font-mono); font-size:11px; color:#7C86A6; letter-spacing:.1em; margin-bottom:12px; text-transform:uppercase; }
.foot-col a{ display:block; color:#C7CCDC; font-size:14px; margin-bottom:8px; }
.foot-col a:hover{ color: var(--amber); }
.foot-bottom{ border-top:1px solid var(--line-dark); padding-top:18px; font-size:12px; color:#5D6684; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-family: var(--font-mono); }

/* comments */
.comments-area{ max-width:720px; margin:40px auto 0; }
.comments-area h2{ font-size:24px; margin-bottom:18px; }

/* 404 */
.error404-wrap{ text-align:center; max-width:620px; margin:0 auto; }
.error404-wrap .code{ font-family:var(--font-mono); font-size:72px; color: var(--amber-deep); line-height:1; }

/* search form */
.search-form{ display:flex; gap:10px; max-width:560px; margin:20px 0; }
.search-form .search-field{ flex:1; padding:12px 18px; border:1px solid var(--line); border-radius:4px; font-family:var(--font-mono); font-size:13px; outline:none; background:#fff; }
.search-form .search-field:focus{ border-color: var(--amber); }
.search-form .search-submit{ background: var(--navy); color:#fff; border:none; border-radius:4px; padding:0 20px; cursor:pointer; font-family:var(--font-mono); font-size:12px; }
.search-form .search-submit:hover{ background: var(--amber); color: var(--navy); }

/* =========================================================
   RESPONSIVE — staggered breakpoints (900 / 768 / 640 / 560 / 480 / 380)
   ========================================================= */
@media (max-width: 900px){
  .grid{ grid-template-columns: repeat(2,1fr); }
  #mapGrid{ grid-template-columns: repeat(2,1fr); gap:14px; }
  .dash-grid{ grid-template-columns:1fr; }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  .pill-nav{ display:none; }
  .burger{ display:flex; }
  .topbar-inner{ gap:16px; flex-wrap:wrap; }
  .coords{
    order:3; flex:1 0 100%; min-width:0;
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding-top:10px; border-top:1px solid var(--line-dark);
    font-size:10px; letter-spacing:.04em; text-align:center;
    flex-wrap:nowrap; white-space:nowrap; overflow:hidden;
  }
  .coords .station-btn{ min-width:0; flex-wrap:nowrap; white-space:nowrap; }
  .coords .ur-live{ flex-shrink:0; }
  #urStation{
    display:inline-block; max-width:34vw; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
  }
  .topbar.open ~ .mobile-nav{ display:block; }
  .panel{ grid-template-columns: 1fr; }
  .panel-tab{ flex-direction:row; justify-content:flex-start; padding: 14px 20px; border-right:none; border-bottom:1px solid var(--line-dark); gap:10px; }
  .panel-tab .tab-text{ writing-mode: horizontal-tb; transform:none; }

  .feature{ grid-template-columns:1fr; }
  .feature-media{ max-width:320px; margin:0 auto; justify-self:center; }
  .map-teaser{ grid-template-columns:repeat(2,1fr); }
  .map-preview{ max-width:320px; margin:0 auto; width:100%; }
  .hero-panel h1{ font-size:32px; white-space:normal; }
  .hero-media{ display:none !important; }

  .tic-tac{ grid-template-columns:1fr; }
  .tic-rail{ width:min(78vw, 250px); justify-self:start; }
  .tic-map{ left:0; }
  .tic-map .leaflet-top.leaflet-left{ left:auto; right:10px; }
  .tic-map .leaflet-draw-toolbar > a{
    width:30px; height:30px; margin:0;
  }
  .tic-map .leaflet-draw-toolbar > a svg{ width:15px; height:15px; }
  .tic-map .leaflet-draw-toolbar .leaflet-draw-actions a{
    width:auto; height:auto; margin:0;
  }
  .tic-stage{ border-left:none; border-top-left-radius:0; }
  .tic-stats{ grid-template-columns:repeat(2,1fr); }
  .tic-charts{ grid-template-columns:1fr; }

  .ex-grid{ grid-template-columns:1fr 1fr; }
  .cluster-row{ grid-template-columns:1fr; }

  .title{ font-size:30px; }
  .related-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .rc-thumb{ aspect-ratio:4 / 3; }
  .rc{ min-width:0; }
  .gallery{ grid-template-columns:1fr; }
  .gallery img{ height:auto; aspect-ratio:1/1; }
  .map-embed iframe{ height:420px; }

  .articles-wrap, .maps-wrap, .explorer-wrap{ padding:32px 22px 44px; }
}

@media (max-width: 768px){
  .article-head{ grid-template-columns:1fr; gap:18px; }
  .hero-media{ width:100%; aspect-ratio:16/10; max-height:300px; }
  .contact-grid{ grid-template-columns:1fr; }
  .about-me-grid{ grid-template-columns:1fr; }
  .pager2{ flex-direction:column; gap:12px; }
  .pager2 .next{ text-align:left; }
}

@media (max-width: 640px){
  .tic-tac{ grid-template-rows: auto auto 1fr; }
  .tic-rail{ grid-column:1; grid-row:2; width:auto; justify-self:stretch; border-right:none; border-bottom:2px solid var(--navy); }
  .tic-stage{ grid-column:1 / -1; grid-row:3; }
  .tic-map{ left:0; }
  .map-readout{ left:10px; }
  .grid{ grid-template-columns: repeat(2,1fr); gap:14px; }
  .card{ min-width:0; }
  .card-body{ padding:12px; min-width:0; }
  .card-body h3{ font-size:14.5px; line-height:1.3; margin:6px 0 6px; overflow-wrap:break-word; word-break:break-word; }
  .card-date{ font-size:9.5px; }
  .card-excerpt{ font-size:12px; -webkit-line-clamp:2; }
  .card-more{ font-size:11px; margin-top:8px; }
  #more-articles .grid{ grid-template-columns:repeat(2,1fr); }
  .feature-media{ max-width:220px; }
  .map-preview{ max-width:220px; }
  .map-preview .cap{ font-size:10.5px; padding:18px 10px 10px; }
  .panel-body{ padding: 28px 22px 36px; }
  .topbar{ padding:16px 20px 18px; }
  .topbar-inner{ gap:10px; }
  .brand{ font-size:22px; }

  .coords{ gap:5px; padding-top:8px; font-size:9px; letter-spacing:.02em; flex-wrap:nowrap; }
  .coords .station-btn{ gap:4px; flex-wrap:nowrap; justify-content:center; }
  .coords .ur-live{ white-space:nowrap; }
  .coords .station-label,
  .coords .station-label + .divider,
  .coords .lbl{ display:none; }
  #urStation{ max-width:44vw; margin-left:4px; }
  .tic-map .leaflet-draw-toolbar > a{ width:28px; height:28px; }
  .ticks{ margin:0 20px; }
  .ticks.ticks-end{ margin:0 20px; }
  .readout-footer{ padding: 36px 22px 22px; }
  .foot-top{ flex-direction:column; align-items:flex-start; gap:28px; }
  .foot-col{ order:-1; } /* Index nav first (left) on mobile; brand below */
  .stat-row{ grid-template-columns: 1fr 1fr; }

  .article-shell{ padding: 28px 18px 40px; }
  .about-wrap, .page-wrap{ padding: 28px 18px 36px; }
  .title{ font-size:24px; line-height:1.2; }
  .lead{ font-size:15px; line-height:1.6; padding-left:12px; margin:18px 0 16px; }
  .crumbs{ font-size:10px; margin-bottom:12px; }
  .meta{ gap:6px 10px; font-size:11px; padding-bottom:16px; }
  .avatar{ width:24px; height:24px; font-size:11px; }

  .quote{ margin:22px 0; padding:18px 16px; }
  .quote blockquote{ font-size:18px; line-height:1.35; }
  .block{ padding:18px 16px; margin-bottom:18px; }
  .block h2{ font-size:18px; }

  .maps-search{ flex-wrap:wrap; padding:10px 14px; gap:8px; }
  .maps-search input{ min-width:0; flex-basis:100%; order:3; }
  .lead-under{ font-size:14px; line-height:1.7; }
  .book{ padding:16px 18px; }
  .book h3{ font-size:16.5px; }

  .map-embed iframe{ height:280px; }
}

@media (max-width: 560px){
  .tic-stats{ grid-template-columns:1fr 1fr; }
  .map-embed iframe{ height:260px; }
  .title{ font-size:22px; }
  .related-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .rc .body{ padding:10px; }
  .rc h3{ font-size:12px; }
  .ex-grid{ grid-template-columns:1fr; }
  .ex-card .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .ex-card .mini .n{ font-size:22px; }
}

@media (max-width: 480px){
  body{ padding:0; }
  .shell{ border-radius:0; box-shadow:none; }
  .topbar{ padding:14px 14px 16px; }
  .ticks, .ticks.ticks-end{ margin:0 14px; }
  .panel-tab{ padding:10px 14px; }
  .panel-body{ padding:22px 14px 28px; }
  .article-shell{ padding:20px 14px 34px; }
  .about-wrap, .page-wrap, .articles-wrap, .maps-wrap, .explorer-wrap{ padding:20px 14px 34px; }
  .title{ font-size:20px; line-height:1.24; margin-bottom:12px; }
  .lead{ font-size:14px; padding-left:10px; margin:14px 0 14px; }
  .meta{ font-size:10.5px; gap:4px 8px; padding-bottom:12px; }
  .hero-panel{ padding:48px 16px 42px; }
  .hero-panel h1{ font-size:25px; }
  .hero-panel p{ font-size:14px; line-height:1.6; }
  .grid{ gap:10px; }
  .card-body{ padding:10px; }
  .card-body h3{ font-size:13px; line-height:1.28; }
  .card-date{ font-size:9px; }
  .card-excerpt{ font-size:11.5px; }
  .map-embed iframe{ height:220px; }
}

@media (max-width: 380px){
  .grid{ grid-template-columns: 1fr; }
}

/* Article archive — search + category filter, matching Maps archive controls. */
.article-search { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.article-search input { min-width:0; }
.article-search select {
  border:1px solid var(--line); border-radius:6px; outline:0;
  background:#FBF9F4; color:var(--navy);
  font:600 12px var(--font-mono); letter-spacing:.03em;
  padding:9px 34px 9px 12px; max-width:240px; cursor:pointer;
  box-shadow:0 1px 0 rgba(20,33,61,.06);
}
.article-search select:focus {
  border-color:var(--amber);
  box-shadow:0 0 0 2px rgba(252,163,17,.25), 0 1px 0 rgba(20,33,61,.06);
}
@media (max-width: 640px) {
  .article-search select { width:100%; max-width:none; margin-top:2px; }
}

/* Landing page — Map Space highlights: three tiles on desktop, keep the
   four-tile (2x2) layout on tablet and mobile. */
@media (min-width: 901px){
  #home-maps .article-card:nth-child(n+4){ display:none; }
}

/* Privacy Policy — built-in Location data section. */
.privacy-location{ margin-top:42px; padding-top:22px; border-top:1px solid var(--line); }
.privacy-location h2{ font-size:22px; }
.privacy-location .privacy-location-note{ color:var(--muted); font-size:13px; }
.privacy-cookie-open{
	display:inline-block; margin-top:4px; padding:0; border:none; background:none;
	color:var(--amber-deep); cursor:pointer;
	font:600 12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
	text-decoration:underline; text-decoration-color:var(--line-dark); text-underline-offset:3px;
}
.privacy-cookie-open:hover{ color:var(--amber); }

/* Cookie consent banner — vanilla-cookieconsent v3.1.0 themed to the
   console design system (navy / amber / paper / sharp corners). */
.cc_div{
	--cc-font-family: var(--font-body);
	--cc-font-size: 14px;
	--cc-bg: var(--surface);
	--cc-primary-color: var(--ink);
	--cc-secondary-color: var(--muted);
	--cc-btn-primary-bg: var(--navy);
	--cc-btn-primary-border-color: var(--navy);
	--cc-btn-primary-color: var(--surface);
	--cc-btn-primary-hover-bg: var(--navy-deep);
	--cc-btn-primary-hover-border-color: var(--navy-deep);
	--cc-btn-primary-hover-color: var(--surface);
	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-border-color: var(--line);
	--cc-btn-secondary-color: var(--ink);
	--cc-btn-secondary-hover-bg: var(--paper);
	--cc-btn-secondary-hover-border-color: var(--amber);
	--cc-btn-secondary-hover-color: var(--ink);
	--cc-link-color: var(--amber-deep);
	--cc-cookie-category-block-bg: var(--paper);
	--cc-cookie-category-block-border: var(--line);
	--cc-cookie-category-block-hover-bg: rgba(252,163,17,.08);
	--cc-cookie-category-block-hover-border: var(--amber);
	--cc-cookie-category-expanded-block-bg: var(--paper);
	--cc-cookie-category-expanded-block-hover-bg: var(--paper);
	--cc-section-category-border: var(--line);
	--cc-separator-border-color: var(--line);
	--cc-footer-bg: var(--paper);
	--cc-footer-border-color: var(--line);
	--cc-footer-color: var(--muted);
	--cc-overlay-bg: rgba(10,21,38,.55);
	--cc-modal-border-radius: 0;
	--cc-btn-border-radius: 0;
	--cc-toggle-on-bg: var(--amber);
	--cc-toggle-on-knob-bg: var(--navy-deep);
	--cc-toggle-off-bg: #E3DED2;
	--cc-toggle-off-knob-bg: var(--surface);
	--cc-toggle-readonly-bg: #C9C4B8;
	--cc-toggle-readonly-knob-bg: var(--surface);
	--cc-toggle-disabled-icon-color: var(--surface);
	--cc-toggle-enabled-icon-color: var(--navy-deep);
	--cc-z-index: 2147483647;
}
.cc_div .cc_consent-modal h2,
.cc_div .cc_preferences-modal h2{
	font-family: var(--font-display);
	font-weight:400;
	letter-spacing:.01em;
}
.cc_div .cc_btn{ box-shadow:0 1px 0 rgba(20,33,61,.1); }
.cc_div .cc_btn:hover{ box-shadow:0 2px 10px rgba(10,21,38,.2); }
.cc_div .cc_link:hover{ color:var(--amber); }
.cc_div .cc_cookie-category-block{ border-radius:0; }
.cc_div .cc_btn:focus, .cc_div .cc_link:focus{
	box-shadow:0 0 0 2px rgba(252,163,17,.4);
	outline:none;
}
.cc_div .cc_consent-modal{ max-width:560px; }
@media (max-width:640px){ .cc_div .cc_consent-modal{ max-width:100%; } }

/* Final mobile/tablet overrides for single article and map views. */
@media screen and (max-width: 900px) {
  #home-articles .article-card > .thumb,
  #home-maps .article-card > .thumb { display:block !important; }
  #home-articles .article-card > .thumb img,
  #home-maps .article-card > .thumb img { display:block !important; width:100%; height:100%; object-fit:cover; }
  .article-shell .hero-media { display:none !important; }
  .article-shell .related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(6px,2vw,12px); }
  .article-shell .related-grid .rc { min-width:0; }
  .article-shell .related-grid .rc-thumb { aspect-ratio:4 / 3; }
  .article-shell .related-grid .rc .body { padding:clamp(6px,2vw,10px); }
  .article-shell .related-grid .rc h3 { font-size:clamp(10px,2.7vw,15px); overflow-wrap:anywhere; }
}