/* Derail Games — the parent company page.
 *
 * Palette and type are BloxTrace's, unchanged (see bloxtraceweb
 * src/styles/tokens.css): monochrome paper and ink, IBM Plex throughout, and
 * periwinkle kept as the single hue. On the product site periwinkle means
 * "forecast"; here there is no data to forecast, so it is used only to mark
 * the company itself — the glyph, the rules under headings, links. Nothing
 * decorative gets it, so it keeps meaning something.
 */

:root {
  --c-ground:  #e3e3e0;
  --c-paper:   #f2f2f0;
  --c-panel:   #ffffff;
  --c-rule:    #c7c7c2;
  --c-rule-2:  #d8d8d4;

  --c-ink:    #0e0e0f;
  --c-ink-2:  #55565a;
  --c-ink-3:  #8b8c90;

  --c-now:      #33383d;
  --c-navy:     #131a3e;
  --c-corridor: #6b76e5;
  --c-corridor-f: #6b76e540;

  --f-display: "IBM Plex Sans Condensed", "Helvetica Neue", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --f-body:    "IBM Plex Sans", "Helvetica Neue", sans-serif;

  --t-micro: 0.6875rem;
  --t-fine:  0.8125rem;
  --t-body:  0.9375rem;
  --t-lead:  1.125rem;
  --t-h3:    1.375rem;
  --t-h2:    clamp(1.625rem, 3.2vw, 2.5rem);
  --t-h1:    clamp(1.875rem, 4.2vw, 3.125rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem;

  --page-max: 82rem;
  --radius: 2px;
  --rule: 1px solid var(--c-rule);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--s-4);
  top: var(--s-4);
  z-index: 10;
  background: var(--c-panel);
  padding: var(--s-2) var(--s-4);
  border: var(--rule);
}

:focus-visible {
  outline: 2px solid var(--c-corridor);
  outline-offset: 2px;
}

.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ── masthead ─────────────────────────────────────────────── */

.masthead {
  background: var(--c-paper);
  border-bottom: var(--rule);
}
.masthead--foot {
  border-bottom: 0;
  border-top: var(--rule);
  margin-top: var(--s-8);
}

.masthead__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-4);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-ink);
}
.mark__glyph {
  width: 10px;
  height: 10px;
  background: var(--c-corridor);
  /* A parallelogram — a rail knocked off true. The one piece of the brand
     that is drawn rather than set. */
  transform: skewX(-18deg);
  flex: none;
}
.mark__word {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
}

.masthead__meta {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--c-ink-3);
  letter-spacing: 0.02em;
}

/* ── hero ─────────────────────────────────────────────────── */

.hero { padding-block: var(--s-8) var(--s-7); }

.eyebrow {
  margin: 0 0 var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-ink-3);
}

h1 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  margin: var(--s-5) 0 0;
  max-width: 58ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
}

/* ── sections ─────────────────────────────────────────────── */

.section { padding-block: var(--s-7); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-corridor);
  margin-bottom: var(--s-6);
}

h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.section__note {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-fine);
  color: var(--c-ink-3);
}

/* ── product ──────────────────────────────────────────────── */

.product {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--s-6);
  background: var(--c-panel);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--s-6);
}

.product__id h3 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h3);
}
.product__tag {
  margin: var(--s-2) 0 var(--s-4);
  font-size: var(--t-fine);
  color: var(--c-ink-2);
}

.product__body p {
  margin: 0;
  max-width: 62ch;
  color: var(--c-ink-2);
}

.link {
  color: var(--c-navy);
  text-decoration-color: var(--c-corridor-f);
  text-underline-offset: 3px;
  font-family: var(--f-mono);
  font-size: var(--t-fine);
}
.link:hover { text-decoration-color: var(--c-corridor); }

/* ── principles ───────────────────────────────────────────── */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--s-5);
}
.principle {
  border-top: 2px solid var(--c-now);
  padding-top: var(--s-4);
}
.principle h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.0625rem;
}
.principle p { margin: 0; font-size: var(--t-fine); color: var(--c-ink-2); }

/* ── enquiry lanes ────────────────────────────────────────── */

/* A label/value grid: the left column holds a phrase rather than a one-word
   tag, so it is wider than a plain definition list would need. */
.lanes {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
  border-top: 1px solid var(--c-rule-2);
  max-width: 64rem;
}
.lanes li {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-rule-2);
}
.lane__k {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-ink-3);
  padding-top: 0.2em;
}
.lane__v { font-size: var(--t-fine); color: var(--c-ink-2); }

/* ── contact ──────────────────────────────────────────────── */

.contact { margin: 0; }
.contact__mail {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--c-ink);
  text-decoration-color: var(--c-corridor);
  text-underline-offset: 5px;
}
.contact__note {
  margin: var(--s-4) 0 0;
  max-width: 52ch;
  font-size: var(--t-fine);
  color: var(--c-ink-2);
}

/* ── colophon ─────────────────────────────────────────────── */

.colophon {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-5);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--c-ink-3);
}

/* ── narrow ───────────────────────────────────────────────── */

@media (max-width: 46rem) {
  .product,
  .lanes li { grid-template-columns: minmax(0, 1fr); }
  .lanes li { gap: var(--s-1); }
  .hero { padding-block: var(--s-7) var(--s-6); }
}