/* Cross Software. A plain-text corporate page: one left column, one
   type size, uppercase labels, blank lines between blocks. Every length
   comes from a token in :root. The only raw px values below :root are
   1px rules and the focus ring. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Colour. --bg is not pure black so 1px alpha rules stay visible. */
  --bg: #0b0c0e;
  --bg-raised: #121417;
  --fg: #e6e7e9;
  --fg-2: #9a9ea6;
  --fg-3: #5c6069;
  /* --fg-idx is text (the section indices), so it meets 4.5:1 on --bg.
     --rule is a decorative 1px line, so it may sit below 3:1. */
  --fg-idx: #787d86;
  --rule: #ffffff33;
  --accent: #ff6a3d;
  --accent-active: #e65f37;
  --selection: var(--accent);
  --focus: #e6e7e9;

  /* Spacing, 4px base. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 96px;

  /* Type: one size for everything. */
  --t0: 15px;
  --lh0: 24px;

  /* Layout. */
  --container: 64ch;
  --gutter: 24px;

  /* The mark svg is cropped to its ink (viewBox 0 7 32 18), so the box is
     the ink: 12px tall, 32/18 as wide. The "C" has a 1px side bearing, so a
     7px box gap is an 8px ink gap. */
  --mark: 12px;
  --mark-gap: 7px;

  --fast: 150ms;
  --ease: ease-out;
}

@media (max-width: 480px) {
  :root { --gutter: 16px; }
}

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

html {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--t0);
  line-height: var(--lh0);
  font-weight: 400;
  letter-spacing: 0;
  font-synthesis: none;
  font-feature-settings: "zero";
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--fg-3) var(--bg);
  scrollbar-width: thin;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  text-wrap: pretty;
}

h1, h2, p, ul {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

h1, h2 {
  text-wrap: balance;
}

::selection {
  background: var(--selection);
  color: var(--bg);
}

img, svg {
  display: block;
  height: auto;
}

/* Links. */
a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: var(--s1);
  touch-action: manipulation;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

a:hover {
  background: var(--accent);
  color: var(--bg);
  text-decoration-color: transparent;
}

a:active {
  background: var(--accent-active);
  color: var(--bg);
  text-decoration-color: transparent;
}

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

.skip {
  position: absolute;
  top: calc(-1 * var(--s8));
  left: var(--gutter);
  padding: var(--s2) var(--s3);
  background: var(--bg-raised);
  text-decoration: none;
}

.skip:focus {
  top: var(--s2);
}

/* Page: hugs the left like a text file. */
.page {
  max-width: var(--container);
  padding: var(--s7) var(--gutter) var(--s8);
}

.prose,
.head,
.copy {
  max-width: var(--container);
}

.prose p,
.prose ul {
  margin-bottom: var(--s5);
}

.prose > :last-child,
.block > :last-child {
  margin-bottom: 0;
}

.num {
  font-variant-numeric: tabular-nums;
}

.wrap {
  overflow-wrap: anywhere;
}

/* Header block: three uppercase lines, the mark before the first. */
.caps,
.brand,
h2 {
  text-transform: uppercase;
}

.brand,
.wordmark {
  display: flex;
  align-items: center;
  gap: var(--mark-gap);
}

.wordmark {
  text-decoration: none;
}

.mark {
  width: calc(var(--mark) * 32 / 18);
  height: var(--mark);
  flex: none;
}

.mark .cut {
  stroke: var(--bg);
}

.wordmark:hover .cut,
.wordmark:active .cut {
  stroke: var(--accent);
}

/* Blocks: the © line sits a long blank below the header, then every block
   is one blank line of 32px apart, with its label one line above its body. */
.copy {
  margin: var(--s8) 0 var(--s6);
  color: var(--fg-2);
}

.block {
  margin-top: var(--s6);
}

.copy + main > .block:first-child {
  margin-top: 0;
}

h2 {
  font-weight: 700;
  margin-bottom: var(--s5);
}

.idx {
  color: var(--fg-idx);
  font-variant-numeric: tabular-nums;
}

ul {
  list-style: "- ";
  padding-left: 2ch;
}

/* Reduced motion keeps every state and removes every transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Print: black on white, URLs after links, no chrome. */
@media print {
  :root {
    --bg: #ffffff;
    --fg: #000000;
    --fg-2: #000000;
    --fg-idx: #000000;
    --rule: #000000;
  }

  html, body {
    background: #ffffff;
    color: #000000;
  }

  .skip, .mark {
    display: none;
  }

  .page {
    padding: 0;
  }

  a {
    color: #000000;
  }

  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
  }

  a[href^="/"]::after {
    content: " (https://cross.software" attr(href) ")";
  }

  .block {
    break-inside: avoid;
  }
}