/* Fonts: official Fontshare files, unmodified (ITF FFL forbids subsetting). See fonts/FFL.txt. */
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Tokens: ground, text, one accent. Plate, muted, faint and rule are tones of the same two. */
:root {
  --paper: #fcfbf8;
  --plate: #f3f1ec;
  --ink: #1c1a17;
  --muted: #5e584f;
  --faint: #8a8378;
  --rule: #e2ded6;
  --accent: #b4400f;

  --display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --body: "Satoshi", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --step-2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --step-3: clamp(2.125rem, 1.35rem + 3.9vw, 4.5rem);

  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --measure: 66ch;
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161412;
    --plate: #1f1c19;
    --ink: #ede9e2;
    --muted: #aaa398;
    --faint: #7d766c;
    --rule: #2f2b26;
    --accent: #f0885a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-kerning: normal;
  font-synthesis: none;
  overflow-wrap: break-word;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); max-width: 18ch; }
h2 { font-size: var(--step-2); max-width: 24ch; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
abbr[title] { text-decoration: none; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 1;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.wrap { max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }

/* Masthead and hero */
.masthead { padding-top: 1.5rem; }
.masthead p { margin: 0; font-weight: 700; letter-spacing: 0.01em; }

.hero { padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 44ch; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.dateline { margin-top: 2rem; color: var(--muted); font-size: var(--step--1); letter-spacing: 0.02em; }

/* The argument */
.argument .prose { font-size: var(--step-1); line-height: 1.55; max-width: 62ch; }
.spine {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.5rem;
  font-weight: 500;
}
.spine li + li::before {
  content: "\2192";
  content: "\2192" / "";
  margin-inline: 0.75rem;
  color: var(--faint);
}

/* Sections */
.section { margin-top: var(--section); }
.section-head { border-top: 1px solid var(--rule); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.stage-no { margin: 0 0 0.75rem; color: var(--accent); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em; }
.stage-lead { font-size: var(--step-1); line-height: 1.5; max-width: 52ch; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

.pair { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 60rem) {
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pair--flip > :first-child { order: 2; }
}

/* Plates: where a template would put project imagery, the diagrams go */
.plate { margin: 0; background: var(--plate); padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2vw, 2.5rem); }
@media (max-width: 59.99rem) { .plate { margin-inline: calc(-1 * var(--gutter)); } }
.plate svg { display: block; width: 100%; max-width: 23rem; height: auto; margin-inline: auto; overflow: visible; }
.plate figcaption { margin: 1.5rem auto 0; max-width: 23rem; color: var(--muted); font-size: var(--step--1); line-height: 1.5; }

.dg text { font-family: var(--body); font-size: 13px; fill: var(--ink); }
.dg .t { font-size: 14.5px; font-weight: 700; }
.dg .m { fill: var(--muted); }
.dg .s { font-size: 12.5px; fill: var(--muted); }
.dg .on { fill: var(--paper); font-weight: 700; font-size: 12.5px; }
.dg .was { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.dg .now { fill: var(--accent); }
.dg .box { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.dg .ln { fill: none; stroke: var(--faint); stroke-width: 1.25; }
.dg .dash { stroke-dasharray: 4 4; }
.dg .tip { fill: var(--faint); }

.figures { margin: 0; display: grid; gap: 2rem; }
.figures dt { margin-bottom: 0.4rem; color: var(--muted); font-size: var(--step--1); letter-spacing: 0.02em; }
.figures dd { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--step-2); line-height: 1.1; }
.figures dd span { display: block; margin-top: 0.6rem; font-family: var(--body); font-weight: 400; font-size: var(--step--1); line-height: 1.4; color: var(--muted); }

/* The limit, voices, the engineering half, the door */
.body-lg { font-size: var(--step-1); line-height: 1.55; max-width: 58ch; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

.quotes { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (min-width: 60rem) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.quote blockquote { margin: 0; }
.quote figcaption { margin-top: 1rem; color: var(--muted); font-size: var(--step--1); }

.aside { margin-top: 1.5rem; color: var(--muted); }

.door h2 { max-width: 30ch; }
.links { list-style: none; margin: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; font-size: var(--step-1); font-weight: 500; }

.foot { margin-top: var(--section); padding-block: 2rem 2.5rem; color: var(--muted); font-size: var(--step--1); }
.foot p { border-top: 1px solid var(--rule); padding-top: 1.5rem; }

/* One scroll reveal, added by script only, never without it */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}
@media print {
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .plate { background: none; }
}

/* Portfolio pieces: one centred reading column, full-bleed image bands between chapters */
cite { font-style: normal; }
.masthead a { text-decoration: none; }
.column { max-width: calc(66ch + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.piece .prose { font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); line-height: 1.65; }
.kicker { margin: 0 0 1rem; color: var(--accent); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em; }
.standfirst { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); font-size: var(--step-1); line-height: 1.5; }

/* The hatch shows until a generated image is in place; the image then covers it */
.band {
  position: relative;
  overflow: hidden;
  height: clamp(11rem, 7rem + 20vw, 24rem);
  background-color: var(--plate);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--rule) 14px 15px);
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, var(--paper)); }
@media (prefers-color-scheme: dark) { .band img { opacity: 0.55; } }
.band--hero { height: clamp(13rem, 8rem + 26vw, 30rem); }

.piece-head .column, .chapter-head { position: relative; margin-top: -3.5rem; }
.panel {
  display: inline-block;
  max-width: 100%;
  background: var(--paper);
  padding: 1rem min(1.25rem, var(--gutter)) 0;
  margin-left: calc(-1 * min(1.25rem, var(--gutter)));
}
.chapter { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.chapter .prose { margin-top: 1.25rem; }

.confirm { background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; padding: 0 0.2em; }
.onward { margin-top: 2rem; }