/* Studium intro page.
   Plan: a study page marked up by a reader. Cool unbleached paper, green-black
   ink, graphite for secondary text, and two highlighter colours that appear only
   where something is being learned: yellow for the loop, pink for the
   alternative route. One typeface (Atkinson Hyperlegible Next, chosen because
   it separates l, I and 1, which matters on a page about ln x). The only
   motion is the figure being drawn as you scroll. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* colour */
  --paper: #f3f5f0;
  --paper-2: #e3e7e0;
  --ink: #1a201c;
  --graphite: #525a55;
  --line: #7f8781;
  --mark-a: #f4dc3a;
  --mark-b: #f4a3c6;
  --on-mark: #1a201c;
  --mark-blend: multiply;
  --mark-opacity: 0.9;

  /* type */
  --font: "Atkinson Hyperlegible Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-h3: 1.125rem;
  --t-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-h1: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);

  /* space: 4 8 12 16 24 32 48 64 96 128 */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem;

  --gutter: max(16px, 4vw);
  --measure: 36rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141816;
    --paper-2: #232a26;
    --ink: #e4e8e2;
    --graphite: #a1aaa4;
    --line: #66706a;
    --mark-a: #d8c22c;
    --mark-b: #d986ac;
    --on-mark: #141816;
    --mark-blend: normal;
    --mark-opacity: 0.55;
    color-scheme: dark;
  }
}

@media (min-width: 40em) {
  :root { --t-body: 1.125rem; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--mark-a); color: var(--on-mark); }

h1, h2, h3 { font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 var(--s4); }
var { font-style: italic; }
.nw { white-space: nowrap; }
sup { font-size: 0.68em; line-height: 0; vertical-align: 0.5em; }
b, strong { font-weight: 700; }

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

.skip {
  position: absolute; left: var(--gutter); top: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--mark-a); color: var(--on-mark);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- page frame ---------- */

.top, main, .foot {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.top { padding-top: var(--s5); }
.wordmark {
  font-weight: 750;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.wordmark:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.intro { padding-top: var(--s9); max-width: 44rem; }
.intro h1 { font-size: var(--t-h1); margin-bottom: var(--s6); }
.intro p { max-width: var(--measure); }
.lede { font-size: 1.1875rem; line-height: 1.55; }
@media (min-width: 40em) { .lede { font-size: 1.3125rem; } }
.aside { color: var(--graphite); }

/* ---------- the story ---------- */

.story { margin-top: var(--s9); }
.story-title { font-size: var(--t-h2); margin-bottom: var(--s5); }

.fig { margin: 0; display: flex; flex-direction: column; height: 100%; }
.graph { display: block; width: 100%; flex: 1 1 auto; min-height: 0; overflow: visible; }

.fig figcaption { flex: none; font-size: var(--t-small); color: var(--graphite); margin-top: var(--s2); }

/* graph: nodes */
.graph text {
  font-family: var(--font);
  font-size: 22px;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
  transition: fill 200ms linear;
}
.graph .v { font-style: italic; }
.graph .sup { font-size: 15px; }
.graph .chip { fill: var(--paper-2); }
.graph .hl {
  fill: var(--mark-a);
  transform-box: fill-box;
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform 260ms var(--ease);
}
.graph .node.b .hl { fill: var(--mark-b); }

#n-ln text { font-size: 30px; font-weight: 700; }
#n-ln .slot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
#n-ln .frame { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; transition: opacity 200ms linear; }
#n-ln { opacity: 0; transition: opacity 300ms linear; }

/* graph: edges */
.edges-known line { stroke: var(--line); stroke-width: 1.5; }
.route line { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 280ms var(--ease); }
.route .mark { stroke-width: 13; stroke-linecap: round; opacity: var(--mark-opacity); mix-blend-mode: var(--mark-blend); }
.route-a .mark { stroke: var(--mark-a); }
.route-b .mark { stroke: var(--mark-b); }
.route .core { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.next { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0; transition: opacity 300ms linear; }

/* states. s1 known; s2 new point; s3 loop from area; s4 the other route;
   s5 the check; s6 the record. */
[data-state="s2"] #n-ln, [data-state="s3"] #n-ln, [data-state="s4"] #n-ln,
[data-state="s5"] #n-ln, [data-state="s6"] #n-ln { opacity: 1; }

[data-state="s3"] .route-a line, [data-state="s5"] .route-a line,
[data-state="s6"] .route-a line,
[data-state="s4"] .route-b line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease);
}
[data-state="s3"] .route-a .mark, [data-state="s5"] .route-a .mark,
[data-state="s6"] .route-a .mark, [data-state="s4"] .route-b .mark { transition-delay: 160ms; }

[data-state="s3"] .node.a .hl, [data-state="s5"] .node.a .hl, [data-state="s6"] .node.a .hl,
[data-state="s4"] .node.b .hl { transform: scaleX(1); }
[data-state="s3"] .node.a text, [data-state="s5"] .node.a text, [data-state="s6"] .node.a text,
[data-state="s4"] .node.b text { fill: var(--on-mark); }

[data-state="s3"] #n-ln .hl, [data-state="s5"] #n-ln .hl, [data-state="s6"] #n-ln .hl,
[data-state="s4"] #n-ln .hl {
  transform: scaleX(1);
  transition: transform 420ms var(--ease) 650ms;
}
[data-state="s4"] #n-ln .hl { fill: var(--mark-b); }
[data-state="s3"] #n-ln text, [data-state="s5"] #n-ln text, [data-state="s6"] #n-ln text,
[data-state="s4"] #n-ln text { fill: var(--on-mark); transition-delay: 650ms; }
[data-state="s3"] #n-ln .slot, [data-state="s4"] #n-ln .slot,
[data-state="s5"] #n-ln .slot, [data-state="s6"] #n-ln .slot { stroke: none; }

[data-state="s5"] #n-ln .frame, [data-state="s6"] #n-ln .frame { opacity: 1; }
[data-state="s6"] .next { opacity: 1; transition-delay: 200ms; }

/* notes under the graph: one per state */
.notes { flex: none; font-size: var(--t-small); line-height: 1.45; min-height: 9.5em; margin-top: var(--s4); }
.notes p { margin: 0 0 var(--s1); }
.note { display: none; margin: 0; max-width: 34rem; }
[data-state="s1"] [data-note="s1"], [data-state="s2"] [data-note="s2"],
[data-state="s3"] [data-note="s3"], [data-state="s4"] [data-note="s4"],
[data-state="s5"] [data-note="s5"], [data-state="s6"] [data-note="s6"] { display: block; }
.said.tutor { color: var(--graphite); }
.marked {
  background: var(--mark-a); color: var(--on-mark);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.15em;
}
.record { margin: var(--s2) 0 0; }
.record div { display: grid; grid-template-columns: 8.5em 1fr; gap: var(--s3); padding: 1px 0; }
.record dt { color: var(--graphite); }
.record dd { margin: 0; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; }
.step p { margin-bottom: var(--s3); }
.step p:last-child { margin-bottom: 0; }
.js .step { color: var(--graphite); transition: color 200ms linear; }
.js .step.is-active { color: var(--ink); }

/* narrow: the figure holds the top of the screen, steps scroll beneath it */
@media (max-width: 55.99em) {
  .fig-wrap {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 58vh;
    height: 58svh;
    padding-top: var(--s3);
    padding-bottom: var(--s3);
    background: var(--paper);
    border-bottom: 1px solid var(--paper-2);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .notes { min-height: 0; margin-top: var(--s2); line-height: 1.4; }
  .record div { grid-template-columns: 7.5em 1fr; gap: var(--s2); }
  .step { min-height: 62vh; min-height: 62svh; padding-top: var(--s6); }
  .step:last-child { min-height: 70svh; }
}
@media (max-width: 55.99em) and (max-height: 40em) {
  .fig-wrap { height: 52svh; }
  .notes { display: none; }
}
/* without the script the figure is a normal block above the steps */
@media (max-width: 55.99em) {
  html:not(.js) .fig-wrap { position: static; height: auto; }
  html:not(.js) .graph { flex: none; }
  html:not(.js) .step { min-height: 0; }
}

/* wide: steps on the left, the figure held on the right */
@media (min-width: 56em) {
  .story {
    display: grid;
    grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 6rem);
  }
  .story-title { grid-column: 1 / -1; }
  .steps { grid-column: 1; grid-row: 2; }
  .fig-wrap { grid-column: 2; grid-row: 2; }
  .fig { position: sticky; top: 8vh; height: 84vh; max-height: 48rem; justify-content: flex-start; padding-top: 4vh; }
  .graph { flex: 0 1 auto; max-height: 58vh; max-width: 36rem; }
  .step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; }
  .step:first-child { min-height: 70vh; justify-content: flex-start; padding-top: 18vh; }
  html:not(.js) .step { min-height: 60vh; }
}

/* ---------- plain sections ---------- */

.plain { margin-top: var(--s10); }
.plain h2 { font-size: var(--t-h2); margin-bottom: var(--s5); max-width: 30ch; }
.prose { max-width: var(--measure); }

.outline { margin: var(--s7) 0 0; max-width: 40rem; }
.outline figcaption { font-size: var(--t-small); color: var(--graphite); margin-top: var(--s3); }
.tree { font-size: var(--t-small); line-height: 1.5; }
.tree p { margin: 0; }
.t-project { font-weight: 700; }
.t-main { margin: var(--s2) 0 0 var(--s2); padding-left: var(--s5); border-left: 1px solid var(--line); }
.t-label { font-weight: 700; padding-top: var(--s2); }
.t-tasks { list-style: none; margin: var(--s2) 0 var(--s4) var(--s2); padding-left: var(--s5); border-left: 1px solid var(--line); }
.t-tasks li { padding: var(--s1) 0; }
.t-state { color: var(--graphite); margin-left: var(--s2); }
.t-msg { margin-bottom: var(--s2) !important; }
.t-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.t-options li { padding: var(--s3) var(--s4); background: var(--paper-2); border-radius: 4px; }
.t-options li.rec strong { background: var(--mark-a); color: var(--on-mark); padding: 0 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.diffs { display: grid; gap: 0; max-width: 60rem; }
.diff { padding: var(--s6) 0; border-top: 1px solid var(--paper-2); }
.diff:first-child { border-top: 0; padding-top: 0; }
.diff h3 { font-size: 1.25rem; margin-bottom: var(--s3); }
.diff p { margin: 0; }
.diff .most { color: var(--graphite); margin-bottom: var(--s2); }
@media (min-width: 48em) {
  .diff { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s7); }
  .diff h3 { grid-column: 1 / -1; }
  .diff .most { margin-bottom: 0; }
}
.minor { margin-top: var(--s6); color: var(--graphite); }

.holds { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.holds li { padding: var(--s3) 0; border-top: 1px solid var(--paper-2); }
.holds li:first-child { border-top: 0; padding-top: 0; }

.foot { margin-top: var(--s10); padding-bottom: var(--s7); color: var(--graphite); }
.foot p { margin: 0; padding-top: var(--s5); border-top: 1px solid var(--paper-2); }

/* reduced motion: states still change, nothing is drawn or swept */
@media (prefers-reduced-motion: reduce) {
  .graph *, .graph, .js .step { transition: none !important; }
}