/* Liminal — corporate site.
   A company website that has been maintained since 1996 by people who do not
   discuss what the company does. Restrained, bright by default, dark on
   request. The franchise's colours do the unsettling: the wordmark cyan, the
   lamp amber, and records set in the same monospace the games use. */

:root {
  --bg: #f5f6f7;
  --surface: #ffffff;
  --surface-2: #eef1f3;
  --text: #14181d;
  --muted: #58616d;
  --line: #dce0e5;
  --accent: #007f9e;
  --accent-ink: #ffffff;
  --glyph: #0092b5;
  --amber: #a86a12;
  --green: #2d8a44;
  --red: #b3261e;
  --mono: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --wrap: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0e12;
    --surface: #12161c;
    --surface-2: #171c23;
    --text: #e2e6eb;
    --muted: #8b949f;
    --line: #242b34;
    --accent: #00c3e6;
    --accent-ink: #051015;
    --glyph: #00d8ff;
    --amber: #d89c3a;
    --green: #3fb950;
    --red: #e0605a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0e12; --surface: #12161c; --surface-2: #171c23; --text: #e2e6eb; --muted: #8b949f;
  --line: #242b34; --accent: #00c3e6; --accent-ink: #051015; --glyph: #00d8ff; --amber: #d89c3a;
  --green: #3fb950; --red: #e0605a; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
}
img, svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--surface); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Masthead ------------------------------------------------------------- */
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.masthead-row { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: var(--glyph); }
.wordmark svg { display: block; height: 24px; width: auto; }
.division { font: 600 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--text); text-decoration: none; font-size: 14px; padding: 8px 10px; border-radius: var(--radius); }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.nav .nav-cta { background: var(--accent); color: var(--accent-ink); font-weight: 600; margin-left: 6px; }
.nav .nav-cta:hover { background: var(--accent); filter: brightness(1.08); }
.nav .nav-cta[aria-current="page"] { color: var(--accent-ink); }
@media (max-width: 760px) {
  .nav { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .nav a { white-space: nowrap; }
}

/* Type ----------------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 650; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 650; margin-top: 1.6em; }
h3 { font-size: 19px; font-weight: 650; margin-top: 1.4em; }
h4 { font-size: 16px; margin-top: 1.2em; }
p { margin: 0 0 1em; }
.lede { font-size: 19px; color: var(--muted); max-width: 46em; }
.eyebrow { font: 600 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.fine { font-size: 13px; color: var(--muted); }
.mono { font-family: var(--mono); }
code { font-family: var(--mono); font-size: 0.92em; background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }

/* Sections -------------------------------------------------------------- */
.section { padding: 56px 0; }
.section + .section { border-top: 1px solid var(--line); }
.hero { padding: 72px 0 56px; background: var(--surface); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--sans);
  padding: 12px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

/* The incident record on the front page ------------------------------- */
.record-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 20px; font-size: 15px; }
.record-panel .doc-head { margin-bottom: 16px; background: var(--surface); }
.register td a { font-weight: 600; }

/* Service status ------------------------------------------------------- */
.status-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.status-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 12px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.status-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: baseline; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.status-row:last-child { border-bottom: 0; }
.status-row .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); transform: translateY(1px); }
.status-row .dot.amber { background: var(--amber); }
.status-row .dot.red { background: var(--red); animation: pulse 2.4s ease-in-out infinite; }
.status-row .state { font: 12px/1.2 var(--mono); color: var(--muted); text-align: right; }
.status-row.incident { background: color-mix(in srgb, var(--red) 7%, transparent); }
.status-row.incident .state { color: var(--red); }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .status-row .dot.red { animation: none; } }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
@media (max-width: 880px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.card h3 { margin-top: 0; }
.card p { color: var(--muted); font-size: 15px; }
.card .more { margin-top: auto; font-weight: 600; text-decoration: none; }
.card-code { font: 600 11px/1 var(--mono); letter-spacing: 0.12em; color: var(--amber); margin-bottom: 12px; }

.notices { list-style: none; margin: 20px 0 0; padding: 0; }
.notices li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.notices time { font: 13px/1.6 var(--mono); color: var(--muted); }
@media (max-width: 600px) { .notices li { grid-template-columns: 1fr; gap: 4px; } }

/* Documents: how the company's own records look ------------------------- */
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 880px) { .doc-layout { grid-template-columns: 1fr; gap: 24px; } }
.toc { position: sticky; top: 96px; font-size: 14px; }
@media (max-width: 880px) { .toc { position: static; } }
.toc p { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 5px 12px; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--text); }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 4vw, 44px); min-width: 0; }
.doc h2 { font-size: 22px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.doc h3, .doc h4 { scroll-margin-top: 90px; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 0.4em; }
.doc-head { font: 13px/1.5 var(--mono); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; margin: 0 0 28px; background: var(--bg); display: grid; grid-template-columns: max-content 1fr; gap: 4px 20px; }
.doc-head dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.doc-head dd { margin: 0; }
.doc-head .classified { color: var(--red); font-weight: 700; }
.signoff { font: 600 14px/1.5 var(--mono); letter-spacing: 0.04em; text-align: center; padding: 28px 0 8px; color: var(--muted); }

pre.sprite {
  font: 12px/1.15 var(--mono);
  color: var(--glyph);
  background: #05080a;
  border-radius: 4px;
  padding: 14px 10px;
  overflow-x: auto;
  margin: 18px 0 24px;
  text-shadow: 0 0 6px rgba(0, 216, 255, 0.35);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) pre.sprite { color: #7fe8ff; } }

.record {
  font: 13px/1.55 var(--mono);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px 18px;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 12px 0 20px;
}

.table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0 24px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font: 600 12px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.table td.num { font-family: var(--mono); white-space: nowrap; }
.table-wrap { overflow-x: auto; }

/* Careers --------------------------------------------------------------- */
.postings { display: grid; gap: 16px; margin-top: 24px; }
.posting { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
@media (max-width: 700px) { .posting { grid-template-columns: 1fr; } }
.posting h3 { margin: 4px 0 6px; }
.posting p { margin: 0; color: var(--muted); font-size: 15px; }
.posting .dept { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--amber); }
.posting .closed { font: 600 12px/1 var(--mono); color: var(--muted); letter-spacing: 0.06em; }

/* Footer ---------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 36px 0 44px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 20px; } }
.footer-mark { display: flex; align-items: center; gap: 8px; font-weight: 650; margin-bottom: 8px; }
.footer-mark img { width: 22px; height: 22px; }
.footer-head { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 6px; }

.flush { margin-top: 0; }