:root{
  --navy:#0b2b45; --navy2:#123a5c; --sea:#1f77b4; --sea-light:#e8f1f8;
  --ink:#12212e; --muted:#5b7183; --line:#dbe6ef; --card:#ffffff;
  --accent:#e07a3f; --ok:#1f9d76; --bg:#f4f8fb;
  --shadow:0 2px 14px rgba(11,43,69,.08);
  --radius:16px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sea); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px; margin:0 auto; padding:0 20px}

/* Header */
.top{position:sticky; top:0; z-index:1000; background:rgba(11,43,69,.96);
  backdrop-filter:blur(8px); color:#fff; border-bottom:1px solid rgba(255,255,255,.08)}
.top .wrap{display:flex; align-items:center; gap:14px; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(224,122,63,.25)}
.top nav{margin-left:auto; display:flex; gap:20px; font-size:.95rem}
.top nav a{color:#cfe0ee}
.top nav a:hover{color:#fff; text-decoration:none}

/* Hero */
.hero{position:relative; color:#fff; overflow:hidden;
  background:linear-gradient(160deg,#0b2b45 0%,#123a5c 55%,#1f5a86 100%)}
.hero::after{content:""; position:absolute; inset:0; opacity:.10;
  background:radial-gradient(circle at 80% 10%, #fff 0 1px, transparent 1px) 0 0/26px 26px}
.hero .wrap{position:relative; padding:64px 20px 54px}
.eyebrow{text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:#9fc4e0; font-weight:700}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem); margin:.25em 0 .1em; line-height:1.05}
.hero p.lead{font-size:1.14rem; color:#d7e6f2; max-width:640px; margin:.4em 0 0}
.hero .years{display:inline-block; margin-top:18px; padding:6px 14px; border:1px solid rgba(255,255,255,.28);
  border-radius:999px; font-size:.9rem; color:#eaf3fa}

/* Stat strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px}
.stat{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:16px 18px}
.stat .n{font-size:1.9rem; font-weight:800; line-height:1}
.stat .l{font-size:.82rem; color:#bcd6ea; margin-top:6px}
@media(max-width:720px){ .stats{grid-template-columns:repeat(2,1fr)} }

/* Sections */
section{padding:44px 0}
section h2{font-size:1.5rem; margin:0 0 6px}
section .sub{color:var(--muted); margin:0 0 22px}

/* Map */
#map{height:560px; border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid var(--line); background:#dfeaf2}
.map-tools{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; align-items:center}
.chip{border:1px solid var(--line); background:#fff; color:var(--navy);
  padding:6px 12px; border-radius:999px; font-size:.85rem; cursor:pointer; font-weight:600}
.chip:hover{border-color:var(--sea)}
.chip.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.map-legend{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px}
.lg{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--muted);
  cursor:pointer; user-select:none; padding:2px 4px; border-radius:6px}
.lg .sw{width:22px;height:4px;border-radius:2px}
.lg.off{opacity:.35}
.leaflet-popup-content{font-size:.9rem}
.pop-title{font-weight:700; color:var(--navy); margin-bottom:2px}
.pop-meta{color:var(--muted); font-size:.8rem}
.pop-row{display:flex; gap:14px; margin-top:6px}
.pop-row b{color:var(--ink)}

/* Season table / cards */
.grid-years{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.ycard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow)}
.ycard .yr{font-weight:800; font-size:1.15rem; color:var(--navy); display:flex; align-items:center; gap:8px}
.ycard .yr .sw{width:12px;height:12px;border-radius:3px}
.ycard .row{display:flex; justify-content:space-between; font-size:.86rem; margin-top:6px; color:var(--muted)}
.ycard .row b{color:var(--ink); font-weight:700}

table.log{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
table.log th,table.log td{padding:10px 12px; text-align:left; font-size:.9rem; border-bottom:1px solid var(--line)}
table.log th{background:var(--sea-light); color:var(--navy); font-weight:700; cursor:pointer; white-space:nowrap}
table.log tr:hover td{background:#f7fbfe}
table.log td.num,table.log th.num{text-align:right; font-variant-numeric:tabular-nums}

/* Sales callout */
.sell{background:linear-gradient(135deg,#0b2b45,#1f5a86); color:#fff; border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow)}
.sell h2{color:#fff}
.sell ul{margin:14px 0 0; padding-left:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px}
.sell li{padding-left:26px; position:relative; color:#e6f0f8}
.sell li::before{content:"⚓"; position:absolute; left:0; opacity:.8}
@media(max-width:640px){ .sell ul{grid-template-columns:1fr} }

.note{font-size:.82rem; color:var(--muted); background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--sea); padding:12px 14px; border-radius:8px}

footer{padding:30px 0 50px; color:var(--muted); font-size:.85rem; text-align:center}
.spinner{color:var(--muted); font-size:.9rem; padding:20px}