/*
 * The Making of document.
 *
 * A standalone page, not part of the app bundle, so it repeats the few tokens it
 * needs rather than importing the OS stylesheet: it has to render on its own when
 * someone opens it outside KM/OS.
 *
 * Set as a document rather than as an interface. One column of measured text, a
 * sticky contents rail, and no component chrome anywhere.
 */

:root {
  --mo-paper: #f8f6f1;
  --mo-ink: #191816;
  --mo-muted: #68635c;
  --mo-accent: #76654d;
  --mo-rule: #e0dcd3;
  --mo-serif: "Source Serif 4", Charter, Georgia, serif;
  --mo-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  margin: 0;
  background: var(--mo-paper);
  color: var(--mo-ink);
  font-family: var(--mo-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------- nav -- */

.mo-nav {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  padding: 28px 14px;
  overflow-y: auto;
}
.mo-nav__group { margin-bottom: 22px; }
.mo-nav__label {
  margin: 0 0 6px;
  padding-left: 10px;
  color: var(--mo-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mo-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--mo-ink);
  font-size: 13.5px;
  text-decoration: none;
}
.mo-nav a:hover { background: rgba(25, 24, 22, 0.06); }
/*
 * :target styles the section the reader jumped to. It costs nothing, needs no
 * script, and is the whole reason this page works with JavaScript switched off.
 */
.mo-nav a:focus-visible {
  outline: 2px solid var(--mo-accent);
  outline-offset: 1px;
}

/* ------------------------------------------------------------------ main -- */

.mo-main {
  max-width: 960px;
  padding: 36px 32px 260px;
}

.mo-main h1 {
  margin: 0 0 14px;
  font-family: var(--mo-serif);
  font-size: 38.4px;
  font-weight: 600;
  line-height: 1.6;
}
.mo-standfirst {
  max-width: 62ch;
  margin: 0 0 8px;
  color: var(--mo-muted);
  font-size: 15px;
}

.mo-section { padding-top: 26px; }
/* A rule between sections, never above the first one. */
.mo-section + .mo-section { border-top: 1px solid var(--mo-rule); margin-top: 34px; }

.mo-eyebrow {
  margin: 0 0 6px;
  color: var(--mo-accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mo-main h2 {
  margin: 0 0 12px;
  font-family: var(--mo-serif);
  font-size: 27.2px;
  font-weight: 600;
  line-height: 1.6;
}

.mo-main p { max-width: 68ch; }
.mo-section p { margin: 0 0 12px; }

/* ----------------------------------------------------------------- lists -- */

.mo-list {
  max-width: 68ch;
  margin: 16px 0 0;
  padding-left: 20px;
}
.mo-list li { margin-bottom: 10px; }

.mo-timeline {
  max-width: 68ch;
  margin: 20px 0 0;
  padding-left: 26px;
}
.mo-timeline li { margin-bottom: 18px; }
.mo-timeline b { display: block; font-weight: 600; }
.mo-timeline span { color: var(--mo-muted); }

/* ---------------------------------------------------------------- narrow -- */

/* The contents rail is the first thing to go: on a phone it is a wall of links. */
@media (max-width: 720px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .mo-nav {
    position: static;
    max-height: none;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mo-rule);
  }
  .mo-nav__group { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; }
  .mo-nav__label { flex: 1 0 100%; }
  .mo-main { padding: 24px 20px 120px; }
  .mo-main h1 { font-size: 30px; }
  .mo-main h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}