@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#000000;
  --paper:#F2F4F7;
  --paper-dim:#E4E8EE;
  --trail:#3E7C59;
  --navy:#0F2A5C;
  --navy-accent:#1E4FA0;
  --slate:#333333;
  --line: rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.display{ font-family:'Bebas Neue', sans-serif; letter-spacing:0.02em; }
.mono{ font-family:'IBM Plex Mono', monospace; }

/* ---------- Header ---------- */
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 6vw;
  border-bottom:1px solid var(--line);
}
.logo{ font-family:'Bebas Neue', sans-serif; font-size:28px; letter-spacing:0.06em; text-decoration:none; color:var(--ink); }
.logo span{ color:var(--navy-accent); }
nav.clock{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--slate); letter-spacing:0.08em; text-transform:uppercase; }

/* ---------- Hero (index page only) ---------- */
.hero{ padding:8vh 6vw 6vh; border-bottom:1px solid var(--line); }
.hero-eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--navy-accent); margin-bottom:18px; }
.hero h1{ font-family:'Bebas Neue', sans-serif; font-size:clamp(48px, 9vw, 108px); line-height:0.92; margin:0 0 24px; letter-spacing:0.01em; color:var(--ink); }
.hero p{ max-width:520px; font-size:17px; line-height:1.6; color:var(--ink); margin:0; }

/* ---------- Station nav ---------- */
.stations{ display:flex; justify-content:center; border-bottom:1px solid var(--line); overflow-x:auto; background:var(--paper-dim); }
.station-btn{
  display:flex; align-items:baseline; gap:10px;
  padding:18px 6vw;
  border:none; border-left:1px solid var(--line);
  cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  white-space:nowrap;
  transition:background 0.15s ease, color 0.15s ease;
  background:none;
}
.station-btn:first-child{
  border-left: none;
}
.station-btn .code{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--navy-accent); font-weight:500; }
.station-btn:hover{ color:var(--navy); }
.station-btn.active{ background:var(--navy); color:#FFFFFF; }
.station-btn.active .code{ color:#FFFFFF; }

/* ---------- Panels ---------- */
.panel{ padding:6vh 6vw 10vh; }
.panel-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.panel-head h2{ font-family:'Bebas Neue', sans-serif; font-size:40px; margin:0; letter-spacing:0.02em; color:var(--ink); }
.panel-head .count{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--slate); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--paper); padding:26px; display:flex; flex-direction:column; gap:14px; min-height:200px; }
.card .tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--navy-accent); }
.card h3{ font-family:'Bebas Neue', sans-serif; font-size:26px; margin:0; letter-spacing:0.01em; color:var(--ink); }
.card p{ font-size:14px; line-height:1.55; color:var(--ink); margin:0; flex-grow:1; }
.card .meta{ display:flex; gap:16px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink); border-top:1px solid var(--line); padding-top:12px; }

/* ---------- Contact form ---------- */
.form-wrap{ max-width:560px; }
.field{ margin-bottom:20px; display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); }
.field input, .field select, .field textarea{
  font-family:'Inter',sans-serif; font-size:15px;
  padding:12px 14px;
  background:#FFFFFF;
  border:1px solid var(--line);
  color:var(--ink);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--navy); outline-offset:2px; }
.submit-btn{
  font-family:'Inter',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:14px 28px;
  background:var(--navy); color:#FFFFFF;
  border:none; cursor:pointer;
}
.submit-btn:hover{ background:var(--navy-accent); }
.form-note{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--slate); margin-top:14px; }

footer{ padding:26px 6vw; border-top:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink); text-align:center; letter-spacing:0.06em; }

@media (max-width:640px){
  .station-btn{ padding:16px 20px; }
  .panel{ padding:5vh 6vw 8vh; }
}