/* Justus Blümer — justusbluemer.de
   Tokens from the "Justus Blümer" design system, then the components, then this page.
   Five colours, one typeface, hairlines, square corners. Nothing here is centred. */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: "0xProto";
  src: url("fonts/0xProto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "0xProto";
  src: url("fonts/0xProto-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "0xProto";
  src: url("fonts/0xProto-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --night: #0d1321;
  --deep:  #1d2d44;
  --steel: #3e5c76;
  --haze:  #748cab;
  --paper: #f0ebd8;

  --ink-on-night:   var(--paper);
  --muted-on-night: var(--haze);
  --rule-on-night:  var(--haze);
  --ink-on-deep:    var(--paper);
  --rule-on-deep:   var(--haze);
  --ink-on-steel:   var(--paper);
  --rule-on-steel:  var(--paper);
  --ink-on-haze:    var(--night);
  --rule-on-haze:   var(--night);
  --ink-on-paper:   var(--night);
  --muted-on-paper: var(--steel);
  --rule-on-paper:  var(--steel);

  --font-mono: "0xProto", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-5: 40px;
  --space-8: 64px;
  --space-13: 104px;
  --space-21: 168px;

  --radius-0: 0;
  --rule-1: 1px;
  --rule-2: 2px;

  --measure: 64ch;
  --column-term: 176px;
  --page-max: 1040px;

  /* The gutter between the term column and the body. The spine runs down its
     middle, so text sits --space-3 away from the spine on either side, the same
     distance it sits below a rule. */
  --gutter: calc(var(--space-3) * 2);

  /* The spine: the one vertical line the whole page hangs off. */
  --spine-x: calc(var(--space-21) + var(--column-term) + var(--gutter) / 2);
}

/* ------------------------------------------------------------------- base */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 17px;
  line-height: 26px;
  font-weight: 400;
  color: var(--ink-on-night);
  background: var(--night);
  font-feature-settings: "calt" 0, "liga" 0;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 var(--space-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--band-ink, var(--paper)); color: var(--band-ground, var(--night)); }

/* ------------------------------------------------------------------- band */

.band {
  --band-ground: var(--night);
  --band-ink: var(--ink-on-night);
  --band-muted: var(--muted-on-night);
  --band-rule: var(--rule-on-night);
  position: relative;
  background: var(--band-ground);
  color: var(--band-ink);
  padding: var(--space-8) 0;
}
.band--night { --band-ground: var(--night); --band-ink: var(--ink-on-night); --band-muted: var(--muted-on-night); --band-rule: var(--rule-on-night); }
.band--deep  { --band-ground: var(--deep);  --band-ink: var(--ink-on-deep);  --band-muted: var(--ink-on-deep);  --band-rule: var(--rule-on-deep); }
.band--steel { --band-ground: var(--steel); --band-ink: var(--ink-on-steel); --band-muted: var(--ink-on-steel); --band-rule: var(--rule-on-steel); }
.band--haze  { --band-ground: var(--haze);  --band-ink: var(--ink-on-haze);  --band-muted: var(--ink-on-haze);  --band-rule: var(--rule-on-haze); }
.band--paper { --band-ground: var(--paper); --band-ink: var(--ink-on-paper); --band-muted: var(--muted-on-paper); --band-rule: var(--rule-on-paper); }

.band__inner {
  max-width: calc(var(--space-21) + var(--page-max));
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.muted { color: var(--band-muted); }
.small { font-size: 14px; line-height: 22px; }

@media (min-width: 720px) {
  .band { padding: var(--space-13) 0; }
  .band__inner { padding-left: var(--space-21); padding-right: var(--space-5); }

  /* The spine runs through every band, in that band's rule colour. */
  .band::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: var(--spine-x);
    width: var(--rule-1);
    background: var(--band-rule);
  }
}

/* --------------------------------------------------------------- wordmark */

.opening {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-5);
}

.wordmark { margin: 0; }
.wordmark__name {
  display: block;
  margin: 0;
  font-weight: 400;
  font-size: clamp(40px, 11vw, 136px);
  line-height: 0.95;
  letter-spacing: 0;
}
.wordmark__role {
  display: block;
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  font-size: 22px;
  line-height: 30px;
  font-style: italic;
  font-weight: 400;
}

/* The table of contents: five terms in the term column, aligned toward the spine. */
.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 700;
}
.toc li + li { margin-top: var(--space-1); }
/* At phone width the list follows the name; nothing sits above the name. */
.opening__nav { order: 2; }

@media (min-width: 720px) {
  .opening {
    grid-template-columns: var(--column-term) minmax(0, 1fr);
    column-gap: var(--gutter);
    align-items: end;
  }
  .opening__nav { order: 0; }
  .toc { text-align: right; }
  .wordmark__name { font-size: clamp(64px, 9.5vw, 136px); }
}

/* ------------------------------------------------------------------ entry */

.entries { margin: 0; }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: var(--rule-1) solid var(--band-rule);
}
.entry:last-child { padding-bottom: 0; }
.entry__term { margin: 0; font-weight: 700; }
.entry__body { margin: 0; max-width: var(--measure); min-width: 0; }
/* A second body under the same term: ruled off from the first, in the body column only. */
.entry__body + .entry__body {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--rule-1) solid var(--band-rule);
}
.entry__body > :first-child { margin-top: 0; }
.entry__body > :last-child { margin-bottom: 0; }
.entry__heading {
  margin: 0 0 var(--space-1);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
}

@media (min-width: 720px) {
  .entry {
    grid-template-columns: var(--column-term) minmax(0, var(--measure));
    column-gap: var(--gutter);
    row-gap: 0;
  }
  .entry__term {
    text-align: right;
    align-self: start;
    position: sticky;
    top: var(--space-3);
  }
  .entry__body + .entry__body { grid-column: 2; }
}

/* ------------------------------------------------------------------- more
   The outbound link under an entry, with an arrow in front. The arrow is
   decoration, so it lives in CSS and stays out of the link text. */

.more { font-weight: 700; }
.more::before { content: "\2192\00a0"; }

/* ------------------------------------------------------------------ stack
   What I do, as a ruled list of big terms. */

.stack {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  max-width: var(--measure);
}
.stack__row {
  padding: var(--space-2) 0;
  border-top: var(--rule-1) solid var(--band-rule);
}
.stack__row:last-child { border-bottom: var(--rule-1) solid var(--band-rule); }
.stack__name {
  display: block;
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
}
.stack__what {
  display: block;
  margin: var(--space-1) 0 0;
  max-width: none;
}

/* ------------------------------------------------------------------- flow
   How server-side tagging routes an event. Lines, not boxes. */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-5) 0 0;
  max-width: var(--measure);
}
.flow__node { padding: var(--space-2) 0; }
.flow__node > p { max-width: none; }
.flow__term {
  margin: 0 0 var(--space-1);
  font-weight: 700;
}
.flow__line {
  position: relative;
  width: var(--rule-1);
  height: var(--space-5);
  margin-left: var(--space-2);
  background: var(--band-rule);
}

@media (min-width: 720px) {
  .flow {
    grid-template-columns: minmax(0, 1fr) var(--space-5) minmax(0, 1fr) var(--space-5) minmax(0, 1fr);
    align-items: start;
  }
  .flow__node {
    padding: var(--space-2) 0 0;
    border-top: var(--rule-1) solid var(--band-rule);
  }
  .flow__line {
    width: 100%;
    height: var(--rule-1);
    margin: 0;
  }
}

/* ------------------------------------------------------------------- link */

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--rule-1);
  text-underline-offset: 0.18em;
  border-radius: var(--radius-0);
}
.link:hover {
  background: var(--band-ink);
  color: var(--band-ground);
  text-decoration: none;
}
.link:focus-visible {
  outline: var(--rule-2) solid var(--band-ink);
  outline-offset: 2px;
  text-decoration: none;
}

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li + li { margin-top: var(--space-2); }

/* ---------------------------------------------------------------- address */

.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.address { font-style: normal; margin: 0; max-width: var(--measure); }
.address__name { font-weight: 700; }
@media (min-width: 720px) {
  .foot {
    grid-template-columns: var(--column-term) minmax(0, var(--measure));
    column-gap: var(--gutter);
  }
  .foot > * { grid-column: 2; }
}

/* ------------------------------------------------------------------- rail
   The palette, fixed at the right edge: five grounds in page order.
   The segment of the band on screen widens. Each is a link to its band. */

.rail {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 10;
}
.rail__seg {
  display: block;
  width: var(--space-1);
  height: var(--space-5);
  border-radius: var(--radius-0);
}
.rail__seg:focus-visible {
  outline: var(--rule-2) solid var(--paper);
  outline-offset: -2px;
}
.rail__seg[aria-current="true"] { width: var(--space-3); }
.rail__seg--night { background: var(--night); }
.rail__seg--deep  { background: var(--deep); }
.rail__seg--steel { background: var(--steel); }
.rail__seg--haze  { background: var(--haze); }
.rail__seg--paper { background: var(--paper); }
/* A hairline so the night segment is visible on the night band and paper on paper. */
.rail__seg--night { border: var(--rule-1) solid var(--haze); }
.rail__seg--paper { border: var(--rule-1) solid var(--steel); }

@media (max-width: 719px) {
  .rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}