/* ─────────────────────────────────────────────────────────────────────────────
   THEME — the only file you edit to rebrand.
   Every colour, type ramp and rule in the portal resolves through these tokens.
   Swap the values, keep the names, and both pages follow.

   The default is an instrument surface: black ground, one cold accent, right
   angles, hairlines instead of shadows. Depth comes from 1px rules and
   near-black surface steps, never from blur.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* ── Ground and surfaces ── */
  --void:        #06070A;   /* page ground; the only true background */
  --void-70:     rgba(6, 7, 10, 0.7);
  --surface-1:   #08090D;   /* cards, panels, grid cells */
  --surface-2:   #0A0B11;   /* the emphasised cell in a pair */

  /* ── Type ── */
  --ink:         #F5F7FA;   /* primary type, the mark, inverted buttons */
  --ink-muted:   #B8BEC7;   /* body copy, secondary navigation */
  --ink-dim:     #5D6673;   /* labels, indices, de-emphasised statements */

  /* ── Accent. One hue, spent sparingly — if it covers more than ~5% of a
        viewport it is being wasted. Never a gradient, never a background. ── */
  --accent:      #8D90FF;
  --accent-wash: rgba(141, 144, 255, 0.07);
  --accent-edge: rgba(141, 144, 255, 0.34);

  /* ── Rules. The gap IS the divider. ── */
  --rule:        rgba(245, 247, 250, 0.09);
  --rule-soft:   rgba(245, 247, 250, 0.07);
  --rule-strong: rgba(245, 247, 250, 0.18);

  /* ── Status ── */
  --ok:          #6FD3A2;
  --warn:        #E3C07B;
  --down:        #FF8FA3;

  /* ── Families ── */
  --font-sans: "IBM Plex Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Geometry. Right angles only: rounding reads as consumer software. ── */
  --radius: 0;
  --gutter: 48px;
  --measure: 660px;

  --ease: cubic-bezier(.16, .6, .2, 1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

h1, h2, h3 { color: var(--ink); font-weight: 200; letter-spacing: -.025em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* ── Mono label. Uppercase, wide tracking, small. There is no middle
      register between this and a 200-weight statement. ── */
.label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1;
}
.index {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-dim);
  line-height: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn-primary { background: var(--ink); color: var(--void); }
.btn-primary:hover { background: var(--accent); color: var(--void); }

.btn-secondary {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ── The mark. A constructed glyph, not a logo file: an A whose crossbar is
      an orbit. Replaced by the operator's own image when one is configured. ── */
.mark { display: block; width: 28px; height: 28px; flex: none; }
.mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.wordmark {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Navigation. The only blurred surface in the system. ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--gutter);
  background: var(--void-70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-brand { display: flex; align-items: center; gap: 14px; }

/* ── Grid. gap:1px over a rule-coloured ground — the gap is the divider,
      so there are no margins and no card shadows. ── */
.grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cell {
  background: var(--surface-1);
  padding: 30px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background .18s var(--ease);
}
a.cell:hover { background: var(--surface-2); }
.cell.emphasis { background: var(--surface-2); box-shadow: inset 0 1px 0 var(--accent); }

/* ── Motion. Gravitational: eases in once, never replays, never bounces. ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; animation: none !important; }
}

/* ── Narrow screens. The shell holds its structure; it does not become a
      different design. ── */
@media (max-width: 900px) {
  :root { --gutter: 22px; }
  .nav { height: 60px; }
}