/* ==========================================================================
   W2JKT — "On Watch"  ·  shared design system
   Emergency-comms blue + safety orange, elevated with instrument-grade craft.
   Day-watch (light) is primary; Night-watch (dark) is the console theme.
   ========================================================================== */

:root{
  /* brand, kept from the existing site */
  --brand:#1A5490; --brand-2:#2C7CC1; --cq:#FF6B35; --cq-deep:#E8551F;
  /* neutrals — cool paper, slate ink (day watch) */
  --bg:#EEF3F8; --surface:#FFFFFF; --surface-2:#F3F7FB; --raise:#FFFFFF;
  --line:#D6E1EC; --line-soft:#E4ECF4;
  --ink:#0E2233; --ink-2:#38546B; --dim:#6B8296;
  /* status lamps (accessible on light) */
  --ok:#1E9E52; --warn:#C67E10; --fault:#D6382C; --idle:#8AA0B2;
  /* effects */
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 18px 40px -26px rgba(13,40,66,.42);
  --shadow-sm:0 10px 24px -18px rgba(13,40,66,.4);
  --radius:16px; --radius-sm:11px;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1160px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0A1420; --surface:#101E2C; --surface-2:#152838; --raise:#17293B;
    --line:#22384D; --line-soft:#1B2E40;
    --ink:#E9F1F9; --ink-2:#B0C6DA; --dim:#7590A8;
    --brand:#3B9BE0; --brand-2:#63B6EE; --cq:#FF7A47; --cq-deep:#FF6B35;
    --ok:#35C759; --warn:#FFB020; --fault:#FF5247; --idle:#6B8093;
    --shadow:0 1px 0 rgba(255,255,255,.03), 0 22px 46px -28px rgba(0,0,0,.75);
    --shadow-sm:0 14px 30px -22px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"]{
  --bg:#EEF3F8; --surface:#FFFFFF; --surface-2:#F3F7FB; --raise:#FFFFFF;
  --line:#D6E1EC; --line-soft:#E4ECF4; --ink:#0E2233; --ink-2:#38546B; --dim:#6B8296;
  --brand:#1A5490; --brand-2:#2C7CC1; --cq:#FF6B35; --cq-deep:#E8551F;
  --ok:#1E9E52; --warn:#C67E10; --fault:#D6382C; --idle:#8AA0B2;
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 18px 40px -26px rgba(13,40,66,.42);
  --shadow-sm:0 10px 24px -18px rgba(13,40,66,.4);
}
:root[data-theme="dark"]{
  --bg:#0A1420; --surface:#101E2C; --surface-2:#152838; --raise:#17293B;
  --line:#22384D; --line-soft:#1B2E40; --ink:#E9F1F9; --ink-2:#B0C6DA; --dim:#7590A8;
  --brand:#3B9BE0; --brand-2:#63B6EE; --cq:#FF7A47; --cq-deep:#FF6B35;
  --ok:#35C759; --warn:#FFB020; --fault:#FF5247; --idle:#6B8093;
  --shadow:0 1px 0 rgba(255,255,255,.03), 0 22px 46px -28px rgba(0,0,0,.75);
  --shadow-sm:0 14px 30px -22px rgba(0,0,0,.7);
}

*{margin:0;padding:0;box-sizing:border-box}
/* --fs (set by the nav text-size control) scales the root font size, so rem-based
   content text grows/shrinks while px-based chrome + layout keep their framing. */
html{scroll-behavior:smooth;font-size:calc(100% * var(--fs, 1))}
body{
  font-family:var(--sans);color:var(--ink);line-height:1.62;
  background:
    radial-gradient(1100px 460px at 88% -180px, color-mix(in srgb,var(--brand) 12%,transparent), transparent 70%),
    radial-gradient(760px 360px at -8% 8%, color-mix(in srgb,var(--cq) 8%,transparent), transparent 66%),
    var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---- type utilities ---------------------------------------------------- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font:700 11px/1 var(--sans);letter-spacing:.19em;text-transform:uppercase;color:var(--brand-2)}
h1,h2,h3{text-wrap:balance;letter-spacing:-.01em;line-height:1.12;color:var(--ink)}
.call{font-family:var(--mono);font-weight:700;letter-spacing:.14em}
.call em{font-style:normal;color:var(--cq)}

/* ---- lamp (shared status light) --------------------------------------- */
.lamp{--c:var(--idle);width:10px;height:10px;border-radius:50%;flex:0 0 auto;display:inline-block;
  background:radial-gradient(circle at 34% 30%, color-mix(in srgb,#fff 55%,var(--c)), var(--c) 62%);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent),
             0 0 10px 1px color-mix(in srgb,var(--c) 55%,transparent)}
.lamp.ok{--c:var(--ok)} .lamp.warn{--c:var(--warn)} .lamp.fault{--c:var(--fault)} .lamp.idle{--c:var(--idle)}
.lamp.tx{animation:tx 2.6s ease-in-out infinite}
@keyframes tx{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent),0 0 8px 1px color-mix(in srgb,var(--c) 45%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 20%,transparent),0 0 15px 3px color-mix(in srgb,var(--c) 70%,transparent)}}
@media (prefers-reduced-motion:reduce){.lamp,[class*="reveal"]{animation:none!important}}

/* ---- header / nav ------------------------------------------------------ */
header.site{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line)}
header.site nav{max-width:var(--wrap);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .cs{font-family:var(--mono);font-weight:700;font-size:17px;letter-spacing:.16em;color:var(--ink)}
.brand .cs b{color:var(--cq);font-weight:700}
.onair{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface-2);
  font:700 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.links{margin-left:auto;display:flex;align-items:center;gap:5px}
.links a{color:var(--ink-2);text-decoration:none;font-size:13.5px;font-weight:600;
  padding:8px 11px;border-radius:9px;letter-spacing:.01em}
.links a:hover{color:var(--ink);background:var(--surface-2)}
.links a[aria-current]{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.tbtn{background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);width:34px;height:34px;
  border-radius:9px;cursor:pointer;font-size:14px;display:grid;place-items:center}
.tbtn:hover{border-color:var(--brand);color:var(--ink)}
/* text-size control (A- / A / A+) injected into the nav by site.js */
.fs-ctrl{display:inline-flex;align-items:stretch;height:34px;border:1px solid var(--line);
  border-radius:9px;overflow:hidden;background:var(--surface-2)}
.fs-btn{background:none;border:0;border-left:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  min-width:30px;padding:0 9px;font-weight:800;line-height:1;display:inline-flex;align-items:center;
  justify-content:center;font-family:var(--sans)}
.fs-btn:first-child{border-left:0}
.fs-btn:hover{color:var(--ink);background:color-mix(in srgb,var(--brand) 12%,transparent)}
/* the selected size is emphasized with a solid brand fill so the current mode is obvious */
.fs-btn.active{color:#fff;background:var(--brand)}
.fs-btn.active:hover{color:#fff;background:var(--brand)}
.fs-btn[data-fs="1"]{font-size:11px} .fs-btn[data-fs="1.2"]{font-size:14px} .fs-btn[data-fs="1.4"]{font-size:18px}
.burger{display:none;background:none;border:0;flex-direction:column;gap:4px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);border-radius:2px}
@media(max-width:860px){
  .links{position:fixed;inset:56px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:8px;transform:translateY(-140%);
    transition:transform .25s;box-shadow:var(--shadow)}
  .links.open{transform:none}
  .links a{padding:13px 14px;border-radius:10px}
  .burger{display:flex;margin-left:auto}
  .onair .txt{display:none}
}

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:11px;
  font:700 14px/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid transparent;letter-spacing:.01em}
.btn-cq{background:linear-gradient(180deg,var(--cq),var(--cq-deep));color:#fff;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--cq) 70%,transparent)}
.btn-cq:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ---- section scaffolding ---------------------------------------------- */
section{padding:76px 0}
.sec-head{display:flex;flex-direction:column;gap:10px;margin-bottom:34px;max-width:640px}
.sec-head.center{margin-inline:auto;text-align:center;align-items:center}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800}
.sec-head p{color:var(--ink-2);font-size:1.02rem}
.rail{display:flex;align-items:center;gap:12px}
.rail .line{height:1px;flex:1;background:linear-gradient(90deg,var(--brand),transparent)}

/* ---- generic card ------------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:840px){.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g-2,.g-3{grid-template-columns:1fr}}

/* ---- footer ------------------------------------------------------------ */
footer.site{border-top:1px solid var(--line);margin-top:20px;background:var(--surface)}
footer.site .in{max-width:var(--wrap);margin:0 auto;padding:34px 22px;display:flex;
  align-items:center;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:13px}
footer.site .sign{font-family:var(--mono);letter-spacing:.14em;color:var(--ink-2);margin-left:auto}

/* reveal-on-scroll (progressive; visible by default if JS/observer absent) */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}