/* WPRS / Willos aesthetic — shared by every page on wprs.uk.
   Palette and rules come from Willos: System/Brand/README.md.
   Mostly greyscale. NASA orange is the only accent; use it sparingly.
   Dark is the default; light follows the viewer's system or the toggle. */

:root {
  /* Brand palette */
  --charcoal: #232323;
  --chalk:    #F4F4F1;
  --stone:    #DADAD6;
  --graphite: #3A3A3A;
  --orange:   #FF4F00;   /* International Orange, as on NASA launch suits */

  /* Semantic tokens — dark (default) */
  --bg:          var(--charcoal);
  --surface:     #2B2B2B;
  --raised:      var(--graphite);
  --ink:         var(--chalk);
  --ink-2:       #B4B4AF;
  --ink-3:       #85857F;
  --rule:        var(--graphite);
  --accent:      var(--orange);
  --accent-text: var(--orange);  /* 4.8:1 on charcoal — fine for text */

  /* Plex family: serif for reading and headings (classical), mono for
     labels, numbers, navigation and code (technical). */
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font:  var(--serif);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;

  --measure: 760px;
  color-scheme: dark;
}

/* Light. Orange on chalk is only 3.3:1, so small orange text uses a deeper
   shade of the same orange; graphics keep the true brand orange. */
:root[data-theme="light"] {
  --bg: var(--chalk); --surface: #EBEBE7; --raised: #E2E2DD;
  --ink: var(--charcoal); --ink-2: #4E4E4A; --ink-3: #6E6E69;
  --rule: var(--stone); --accent-text: #B83800;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--chalk); --surface: #EBEBE7; --raised: #E2E2DD;
    --ink: var(--charcoal); --ink-2: #4E4E4A; --ink-3: #6E6E69;
    --rule: var(--stone); --accent-text: #B83800;
    color-scheme: light;
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: 16.5px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--charcoal); }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent);
    text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-text); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s6); }

h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: 34px; margin: 0 0 var(--s3); }
h2 { font-size: 22px; margin: 0 0 var(--s4); }
h3 { font-family: var(--mono); font-size: 12px; margin: var(--s6) 0 var(--s2); text-transform: uppercase;
     letter-spacing: 0.1em; color: var(--ink-3); font-weight: 500; }

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s2); }
.lede { color: var(--ink-2); margin: 0 0 var(--s8); max-width: 60ch; }
.muted { color: var(--ink-3); }
.rule { border: 0; border-top: 1px dashed var(--rule); margin: var(--s12) 0; }
.slash { color: var(--accent-text); }

/* ── Header ────────────────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; gap: var(--s4);
                     padding-top: var(--s4); padding-bottom: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; font-weight: 500; }
.brand:hover { color: var(--ink); }
.brand svg { width: 30px; height: 30px; flex: none; color: var(--ink); }
/* WPRS wordmark — sister to the Willos mark. WPR in ink (charcoal on light,
   chalk on dark), S in NASA orange. Text, so it stays crisp at any size. */
.brand.wordmark { display: inline-block; }
.wordmark { font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; color: var(--ink); }
.wordmark .s { color: var(--accent); }
.site-nav { font-family: var(--mono); display: flex; gap: var(--s4); margin-left: auto; font-size: 13px; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::before { content: "/"; color: var(--accent-text); margin-right: 2px; }

.theme-toggle { font: inherit; font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: none;
                border: 1px solid var(--rule); border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }

@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; margin-left: 0; gap: var(--s4); font-size: 12px; overflow-x: auto; }
  .theme-toggle { margin-left: auto; }
}

/* ── Page header + footer ──────────────────────────────────────────────── */
.page-head { padding: var(--s12) 0 var(--s4); }
.site-footer { border-top: 1px solid var(--rule); margin-top: var(--s16); }
.site-footer .wrap { font-family: var(--mono); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
                     padding-top: var(--s6); padding-bottom: var(--s8); font-size: 12px; color: var(--ink-3); }
.site-footer a { color: var(--ink-3); }

/* Technical text: numbers, code, readouts. */
code, pre, kbd, samp, .mono { font-family: var(--mono); }

/* ── Small parts ───────────────────────────────────────────────────────── */
.tag { font-family: var(--mono); display: inline-block; font-size: 11px; color: var(--ink-3); border: 1px solid var(--rule);
       border-radius: 3px; padding: 0 6px; line-height: 1.7; }
.tag::before { content: "#"; }

/* ── Request forms ─────────────────────────────────────────────────────── */
.request { border: 1px solid var(--rule); border-radius: 6px; padding: var(--s6); margin: var(--s12) 0; background: var(--surface); }
.request h2 { margin-bottom: var(--s2); }
.request > p { color: var(--ink-2); margin: 0 0 var(--s6); max-width: 60ch; }
.request form { display: grid; gap: var(--s4); }
.request .two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s4); }
.request label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.request label > input, .request label > textarea { flex: 1 0 100%; }
.request label .opt { color: var(--ink-3); }
.request input, .request textarea { font: inherit; font-family: var(--serif); font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 9px 12px; width: 100%; }
.request textarea { min-height: 5.5em; resize: vertical; }
.request input:focus, .request textarea:focus { outline: none; border-color: var(--ink-3); }
.request fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  font-family: var(--mono); font-size: 13px; }
.request fieldset legend { font-size: 12px; color: var(--ink-2); margin-bottom: var(--s2); padding: 0; }
.request fieldset label { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--s2); font-size: 13px; color: var(--ink); }
.request fieldset input { width: auto; accent-color: var(--accent); }
.request .actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.request button[type="submit"] { font: inherit; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--bg);
  background: var(--ink); border: 0; border-radius: 4px; padding: 9px 18px; cursor: pointer; }
.request button[type="submit"]:hover:not(:disabled) { background: var(--accent); color: var(--charcoal); }
.request button[type="submit"]:disabled { opacity: .4; cursor: progress; }
.request .privacy { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 0; }
.form-status { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.form-status.ok { color: var(--ink); } .form-status.ok::before { content: "✓ "; color: var(--accent-text); }
.form-status.err { color: var(--accent-text); }
.form-closed { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}