* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --ink:#1c1a17; --ink2:#615c52; --ink3:#9a958b;
  --line:rgba(0,0,0,0.11); --line2:rgba(0,0,0,0.06);
  --surface:rgba(255,255,255,0.55);
}
body{ color:var(--ink); font-family:"Public Sans",-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.page{ min-height:100vh; }
.wrap{ max-width:840px; margin:0 auto; padding:64px 28px 80px; }

/* typography / header */
.eyebrow{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--ink3); }
.masthead h1{ font-size:34px; line-height:1.08; font-weight:700; letter-spacing:-.018em; margin:10px 0 18px; }
.lede{ max-width:62ch; }
.lede p{ font-size:16.5px; line-height:1.66; color:var(--ink2); margin:0 0 14px; text-wrap:pretty; }
.lede p b{ color:var(--ink); font-weight:600; }
.lede p a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.lede p.lede-break{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }

.freshness{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:22px; padding-top:16px;
  border-top:1px solid var(--line2); font-size:13px; color:var(--ink2); }
.fresh-dot{ width:8px; height:8px; border-radius:50%; background:#4a9d5b;
  animation:pulse 2.4s ease-out infinite; flex:none; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(74,157,91,.45)} 70%{box-shadow:0 0 0 7px rgba(74,157,91,0)} 100%{box-shadow:0 0 0 0 rgba(74,157,91,0)} }
.fresh-sep{ color:var(--ink3); }
.fresh-time{ color:var(--ink3); }

/* sections */
.section{ margin-top:54px; padding-top:34px; border-top:1px solid var(--line); }
.sec-head h2{ font-size:22px; font-weight:650; letter-spacing:-.012em; margin:6px 0 10px; }
.sec-intro{ font-size:15.5px; line-height:1.6; color:var(--ink2); max-width:60ch; margin:0; text-wrap:pretty; }

/* stat cards */
.statrow{ display:grid; gap:12px; margin-top:24px; }
.statrow-3{ grid-template-columns:repeat(3,1fr); }
.statcard{ background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:16px 18px; }
.statcard-label{ font-size:12px; color:var(--ink3); font-weight:500; }
.statcard-value{ font-weight:700; letter-spacing:-.02em; margin-top:8px; line-height:1; font-variant-numeric:tabular-nums; }
.statcard-unit{ font-size:.5em; font-weight:600; margin-left:2px; color:inherit; }

/* legend */
.legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:12.5px; color:var(--ink2); }
.legend-item{ display:inline-flex; align-items:center; gap:7px; }
.legend-dot{ width:10px; height:10px; border-radius:50%; }

/* chart blocks */
.chartblock{ margin-top:26px; }
.block-cap{ font-size:13px; line-height:1.55; color:var(--ink2); margin-bottom:12px; max-width:64ch; text-wrap:pretty; }
.block-cap b{ color:var(--ink); font-weight:600; }

/* heatmap */
.hm-htick{ text-align:center; color:var(--ink3); font-variant-numeric:tabular-nums; }
.hm-dlabel{ color:var(--ink2); font-weight:500; padding-right:6px; text-align:right; }
.hm-cell{ border-radius:2px; }
.hm-cell:hover{ outline:1.6px solid var(--ink); outline-offset:-1px; cursor:crosshair; }
.hm-now{ outline:1.6px solid var(--ink); outline-offset:-1px; }
.daycurve{ display:block; }

/* map */
.delft-map{ height:380px; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.delft-map .leaflet-container{ font:inherit; background:#e8e6e0; }
.heat-map{ height:420px; }

/* permit-cap monitoring */
.caps{ margin-top:24px; }
.cap-row{ display:grid; grid-template-columns:150px 1fr 150px; align-items:center; gap:16px;
  padding:14px 4px; border-bottom:1px solid var(--line2); }
.cap-name{ display:flex; align-items:center; gap:8px; font-size:14px; }
.cap-bar{ position:relative; height:12px; background:rgba(0,0,0,0.06); border-radius:6px; }
.cap-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; }
.cap-cap{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); }       /* the permit line */
.cap-max{ position:absolute; top:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:#fff; border:1.5px solid var(--ink2); }                        /* observed max */
.cap-stat{ text-align:right; font-variant-numeric:tabular-nums; }
.cap-now{ font-size:20px; font-weight:700; }
.cap-now.cap-over{ color:#c0392b; }
.cap-permit{ font-size:14px; color:var(--ink3); }
.cap-sub{ font-size:11.5px; color:var(--ink2); margin-top:2px; }
.cap-sub b{ color:var(--ink); font-weight:600; }
.cap-foot{ font-size:12px; color:var(--ink3); margin-top:12px; }

/* idle leaderboard */
.idle-list{ margin-top:22px; border-top:1px solid var(--line); }
.idle-head{ display:flex; justify-content:space-between; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3); padding:10px 4px 8px; }
.idle-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 4px;
  border-bottom:1px solid var(--line2); }
.idle-op{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; }
.idle-badge{ font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:600;
  color:var(--ink2); background:rgba(0,0,0,0.05); border-radius:5px; padding:2px 7px; }
.idle-dur{ font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink);
  text-decoration:none; }
.idle-dur:hover{ text-decoration:underline; text-underline-offset:2px; }

@media (max-width:680px){
  .cap-row{ grid-template-columns:110px 1fr; grid-template-areas:"name stat" "bar bar"; gap:8px 12px; }
  .cap-name{ grid-area:name; } .cap-stat{ grid-area:stat; } .cap-bar{ grid-area:bar; }
  .heat-map{ height:340px; }
}

/* methodology + footer */
.methode{ margin-top:56px; padding-top:30px; border-top:1px solid var(--ink); }
.methode h3{ font-size:15px; font-weight:650; margin:0 0 14px; }
.methode p{ font-size:14px; line-height:1.62; color:var(--ink2); margin:0 0 12px; max-width:64ch; text-wrap:pretty; }
.methode a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.foot{ margin-top:40px; padding-top:18px; border-top:1px solid var(--line2); font-size:12.5px; color:var(--ink3); }

/* loading shimmer */
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.65}}
.skel{background:#b5b0a8;border-radius:4px;animation:breathe 1.8s ease-in-out infinite;display:inline-block;vertical-align:middle}
.skel-block{background:#b5b0a8;border-radius:8px;animation:breathe 1.8s ease-in-out infinite;width:100%;display:block}

@media (max-width:680px){
  .wrap{ padding:44px 18px 64px; }
  .statrow-3{ grid-template-columns:1fr; }
  .masthead h1{ font-size:28px; }
  .delft-map{ height:300px; }
}