/* ============================================================================
   OTAMA — shared site stylesheet
   otama.vk1hf.com/assets/site.css

   COLOUR SCHEME: "Winter Dress"
   Taken from Royal Australian Navy winter dress: a jacket so dark it reads as
   black until light catches it, a white shirt, and gold — braid, buttons, and
   the submariner's dolphins. The navy and the gold below were sampled from a
   photograph of RAN submariners in winter dress rather than picked by eye.

   Everything on the site consumes the tokens in :root. No page names a colour
   directly. To reskin the whole site, change only the token blocks here — the
   alternates at the bottom of this file are offered on /colors/.
   ========================================================================= */

:root,
[data-scheme="winter-dress"]{
  /* ---- surfaces: the jacket ---- */
  --bg:#05090d;          /* page background — near-black, blue cast   */
  --bg-raised:#0d151e;   /* cards, panels                              */
  --line:#1e2c3b;        /* rules, borders                             */

  /* ---- text: the shirt ---- */
  --ink:#e9eef3;
  --ink-dim:#9aa9b7;
  --steel:#76838f;
  --ink-faint:#3a4754;

  /* ---- accent: the braid ---- */
  --accent:#c9a227;      /* links, eyebrows, markers                   */
  --accent-deep:#8a6f1b; /* rest state, hovers                         */
  --bright:#ffd863;      /* brilliant gold — wordmark, highlights      */
  --bright-rgb:255,216,99;
  --flash:#8c1d27;       /* the crown's red on the dolphins badge      */
  --flash-rgb:140,29,39;
  --scarlet:#c1121f;     /* distinction cloth — the wordmark's red edge */
  /* The wordmark gold is sampled from the dolphins badge itself (body tone
     #c1a247) rather than from --bright, which ran too yellow beside it. */
  --mark:#cfa93c;
  --mark-rgb:207,169,60;

  --bg-rgb:5,9,13;
  --accent-rgb:201,162,39;

  /* ---- status ---- */
  --ok:#1f7a45;   --warn:#a06a10;  --bad:#8c1d27;  --idle:#4a5560;
  --ok-fg:#5cbf86; --warn-fg:#e0a53c; --bad-fg:#e2726d;
  --cool-fg:#6fb6e8; --info:#b189e8;

  /* ---- type ---- */
  --font-body:Georgia,"Iowan Old Style",Palatino,"Times New Roman",serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-disp:system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-stencil:"Saira Stencil One","Stardos Stencil",Impact,system-ui,sans-serif;
}

/* Rig for red — a submarine control room at night, so night vision survives
   a look at the screen. */
[data-scheme="rig-for-red"]{
  --bg:#0a0506; --bg-raised:#170b0d; --line:#3a1a1e;
  --ink:#f0dcd9; --ink-dim:#c08f8a; --steel:#9a6d69; --ink-faint:#5a3236;
  --accent:#e5484d; --accent-deep:#a62a2f; --bright:#ff7b7b;
  --bright-rgb:255,123,123; --flash:#ffd863; --flash-rgb:255,216,99;
  --scarlet:#7a0a12; --mark:#ff7b7b; --mark-rgb:255,123,123;
  --bg-rgb:10,5,6; --accent-rgb:229,72,77;
  --ok:#1f7a45; --warn:#a06a10; --bad:#8c1d27; --idle:#4a4042;
  --ok-fg:#5cbf86; --warn-fg:#e0a53c; --bad-fg:#ff9a94;
  --cool-fg:#d98f8a; --info:#e0a53c;
}

/* Periscope depth — the colour of daylight seen from underneath it. */
[data-scheme="periscope"]{
  --bg:#03120f; --bg-raised:#0a201c; --line:#1b3b34;
  --ink:#dcefe9; --ink-dim:#8fb3aa; --steel:#6f9189; --ink-faint:#33514a;
  --accent:#3fbfa0; --accent-deep:#237f69; --bright:#6fe8c8;
  --bright-rgb:111,232,200; --flash:#ffd863; --flash-rgb:255,216,99;
  --scarlet:#c1121f; --mark:#6fe8c8; --mark-rgb:111,232,200;
  --bg-rgb:3,18,15; --accent-rgb:63,191,160;
  --ok:#1f7a45; --warn:#a06a10; --bad:#8c1d27; --idle:#41524e;
  --ok-fg:#5cbf86; --warn-fg:#e0a53c; --bad-fg:#e2726d;
  --cool-fg:#5fc9d8; --info:#9fd48a;
}

/* Harbour day — alongside, in daylight. The only light scheme. */
[data-scheme="harbour-day"]{
  --bg:#eef1f4; --bg-raised:#ffffff; --line:#c8d2dc;
  --ink:#131c26; --ink-dim:#46586a; --steel:#5d7285; --ink-faint:#9aa9b7;
  --accent:#8a6f1b; --accent-deep:#63500f; --bright:#1b3350; --bright-rgb:27,51,80;
  --flash:#8c1d27; --flash-rgb:140,29,39; --scarlet:#c1121f;
  --mark:#1b3350; --mark-rgb:27,51,80;
  --bg-rgb:238,241,244; --accent-rgb:138,111,27;
  --ok:#1f7a45; --warn:#8a5c0a; --bad:#8c1d27; --idle:#8c99a5;
  --ok-fg:#186b37; --warn-fg:#8a5c0a; --bad-fg:#8c1d27;
  --cool-fg:#1e5f92; --info:#5d3a9b;
}

/* ---------------------------------------------------------------- base --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:1.02rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:hover{color:var(--bright)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ---------------------------------------------------------------- bar ---- */
.bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1.2rem;
  flex-wrap:wrap;padding:.7rem 1.4rem;background:rgba(var(--bg-rgb),.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase}
.bar a{color:var(--ink-dim);text-decoration:none}
.bar a:hover{color:var(--accent)}
.bar .bar-nav{display:flex;gap:1.2rem;margin-left:auto;flex-wrap:wrap}
.bar .cs{color:var(--accent);letter-spacing:.2em}

/* --------------------------------------------------------------- wrap ---- */
.wrap{max-width:64rem;margin:0 auto;padding:0 1.4rem}
.eyebrow{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .7rem}
h1{font-family:var(--font-disp);font-weight:600;font-size:clamp(2rem,5.5vw,3.1rem);
  line-height:1.08;letter-spacing:-.01em;margin:0 0 1rem;color:var(--ink)}
h2{font-family:var(--font-disp);font-weight:600;font-size:clamp(1.4rem,3.4vw,1.9rem);
  line-height:1.2;margin:2.8rem 0 .8rem;color:var(--ink)}
h3{font-family:var(--font-disp);font-weight:600;font-size:1.12rem;margin:1.8rem 0 .5rem}
.standfirst{font-size:1.14rem;line-height:1.65;color:var(--ink-dim);
  max-width:46ch;margin:0 0 2rem}
p{margin:0 0 1.1rem}
.note{color:var(--ink-dim);font-size:.94rem;border-left:2px solid var(--accent-deep);
  padding-left:1rem;margin:2rem 0}
code{font-family:var(--font-mono);font-size:.86em;background:var(--bg-raised);
  border:1px solid var(--line);border-radius:3px;padding:.1rem .35rem}

/* --------------------------------------------------------------- hero ---- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(var(--accent-rgb),.10), transparent 60%),
    linear-gradient(180deg, var(--bg-raised), var(--bg));
}
.hero-in{position:relative;z-index:2;max-width:64rem;margin:0 auto;
  padding:3.6rem 1.4rem 3rem;display:grid;gap:2rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
@media(max-width:52rem){.hero-in{grid-template-columns:1fr;padding-top:2.6rem}}
.wm{font-family:var(--font-stencil);font-size:clamp(3.52rem,14.3vw,6.6rem);
  letter-spacing:.18em;line-height:.92;color:var(--mark);margin:0;
  text-shadow:-0.04em 0 0 var(--scarlet), 0 0 40px rgba(var(--mark-rgb),.30)}
.hero .sub{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-dim);margin:.9rem 0 0}
.hero .lede{margin:1.4rem 0 0;color:var(--ink);max-width:40ch}
.hero-art{position:relative}
.hero-art img{display:block;width:100%;filter:drop-shadow(0 22px 40px rgba(0,0,0,.6))}
/* sonar arcs behind the radio */
.sonar{position:absolute;inset:-12% -6% -12% -6%;z-index:-1;opacity:.5}

.status{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent-deep);border-radius:2px;padding:.3rem .75rem;
  margin:0 0 1.4rem}
.status i{width:7px;height:7px;border-radius:50%;background:var(--accent);
  display:block;animation:ping 2.6s steps(1) infinite}
@keyframes ping{50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.status i{animation:none}}

/* -------------------------------------------------------------- blocks --- */
section.band{padding:3rem 0;border-bottom:1px solid var(--line)}
section.band:last-of-type{border-bottom:0}

.kit{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.55rem}
.kit li{display:grid;grid-template-columns:11rem 1fr;gap:1rem;align-items:baseline;
  padding:.6rem 0;border-bottom:1px solid var(--line)}
@media(max-width:44rem){.kit li{grid-template-columns:1fr;gap:.15rem}}
.kit b{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:400}
.kit span{color:var(--ink)}
.kit em{font-style:normal;color:var(--steel);font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}

.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  margin:1.4rem 0 0}
.card{display:block;background:var(--bg-raised);border:1px solid var(--line);
  border-radius:4px;padding:1.3rem 1.4rem;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent-deep);transform:translateY(-2px)}
.card .idx{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}
.card h3{margin:.5rem 0 .4rem;font-size:1.1rem;color:var(--ink)}
.card p{margin:0;color:var(--ink-dim);font-size:.92rem;line-height:1.6}

.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0}
.tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);border:1px solid var(--line);
  border-radius:2px;padding:.2rem .55rem}
.tag.on{color:var(--accent);border-color:var(--accent-deep)}

.dolphins{display:block;margin:0 auto;width:min(24rem,72%);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55))}

.backlink{display:inline-block;margin:2.4rem 0 0;font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none}
.backlink:hover{color:var(--accent)}

.foot{border-top:1px solid var(--line);margin-top:3rem;padding:2rem 1.4rem 3rem;
  text-align:center;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);line-height:2.2}
.foot a{color:var(--ink-dim);text-decoration:none}
.foot a:hover{color:var(--accent)}

.credit{font-family:var(--font-mono);font-size:.6rem;color:var(--steel);
  margin:1.2rem 0 0;text-transform:none;letter-spacing:.04em;line-height:1.6}
.hero-art .credit{margin-top:1.6rem;position:relative;z-index:3}