/* Erie Canal betweenness — page styles.

   The design tokens, the type stacks, the wobble radii, the pen shadow and the
   wavy stroke are lifted verbatim from adv-net-sci/lecture-note's
   m01-euler_tour/pen-and-paper/lecture-hall.css, so this page reads as part of
   the same course.

   Its rule is kept too: THE HAND IS IN THE LINES, NOT IN THE LETTERS. The prose
   is a system sans and the headings a system serif; what is drawn by hand is
   everything not read as a word — the wavy rules, the wobbly borders, the pen
   shadows, the sketched corridor. One handwritten line exists, in the margin,
   and that is the whole point of it.

   No webfont, no network request. */

:root {
  --lh-paper:   #FFFDF7;
  --lh-card:    #FFFFFF;
  --lh-surface: #F6F2E9;
  --lh-line:    #E4E6EA;
  --lh-rule:    #D9D2C2;
  --lh-ink:     #1D1E21;
  --lh-ink-2:   #35373C;
  --lh-muted:   #6A6D75;
  --lh-blue:    #22336B;
  --lh-blue-2:  #3959A6;
  --lh-rust:    #B14434;

  --lh-serif:   "Iowan Old Style", "Palatino Linotype", Palatino,
                "Book Antiqua", "Hoefler Text", Georgia,
                "Times New Roman", serif;
  --lh-sans:    system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial,
                sans-serif;
  --lh-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                "Liberation Mono", monospace;
  --lh-hand:    "Chalkboard SE", "Bradley Hand", "Segoe Print",
                "Comic Sans MS", cursive;

  --lh-wobble:   14px 6px 16px 8px / 8px 16px 6px 14px;
  --lh-wobble-2: 6px 16px 8px 14px / 16px 6px 14px 8px;
  --lh-pen:      3px 4px 0 -1px rgba(35, 34, 43, 0.16);
  --lh-pen-soft: 2px 3px 0 -1px rgba(35, 34, 43, 0.12);

  /* The animation kit (assets/anim.css) reads these off :root and resolves them
     once on .anim-stage. Declaring them here is how the shared kit ends up in
     this page's palette instead of the lecture note's purple. */
  --anim-ink: #1D1E21;
  --anim-ink-soft: #35373C;
  --anim-ink-faint: #A8AEB9;
  --anim-paper: #FFFDF7;
  --anim-white: #FFFFFF;
  --anim-accent: #22336B;
  --anim-accent-soft: #E4E9F5;
  --anim-amber: #B14434;
  --anim-amber-soft: #F7E7E2;
  --rule: #D9D2C2;

  --lh-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='7' viewBox='0 0 120 7'%3E%3Cpath d='M1 4.4C20 1.9 40 6.2 60 3.7 80 1.4 100 5.6 119 3.2' fill='none' stroke='%23B14434' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --lh-stroke-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='7' viewBox='0 0 120 7'%3E%3Cpath d='M1 4.4C20 1.9 40 6.2 60 3.7 80 1.4 100 5.6 119 3.2' fill='none' stroke='%23D9D2C2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

body {
  margin: 0;
  /* Dot-grid, not ruled lines: the same "this is a sketchbook" signal without
     fighting a line of prose for the same horizontal band. */
  background-color: var(--lh-paper);
  background-image: radial-gradient(rgba(31, 58, 95, 0.085) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--lh-ink-2);
  font-family: var(--lh-sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  text-wrap: pretty;
}

h1, h2 {
  font-family: var(--lh-serif);
  font-weight: 600;
  color: var(--lh-ink);
  line-height: 1.25;
}

h1 { font-size: 37px; margin: 0 0 0.5rem; letter-spacing: -0.01em; }

/* A chapter break — one of the places the pen still writes. */
h2 {
  font-size: 24px;
  margin: 2.6rem 0 0.7rem;
  padding-bottom: 0.18em;
  background-image: var(--lh-stroke);
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 120px 7px;
}

p { margin: 0 0 1rem; }
strong { color: var(--lh-ink); font-weight: 700; }
a { color: var(--lh-blue); text-decoration-color: var(--lh-line); }
a:hover { color: var(--lh-rust); text-decoration-color: currentColor; }

.standfirst { color: var(--lh-muted); margin-bottom: 2rem; }

.num {
  font-family: var(--lh-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
}

/* ---------- the map ---------- */

/* The outline is the state boundary, which along the north and west is the Lake
   Ontario and Lake Erie shore — that is what makes the shape read as New York
   without a single tile being fetched. The rail network was drawn on here once
   and it read as a scribble; the six dots make the line on their own. */
.corridor {
  margin: 1.5rem 0 2rem;
  padding: 0.6rem 0.6rem 0.3rem;
  background: var(--lh-card);
  border: 2px solid var(--lh-ink);
  border-radius: var(--lh-wobble);
  box-shadow: var(--lh-pen);
}
.corridor svg { display: block; width: 100%; height: auto; }
.corridor figcaption {
  margin-top: 0.1rem;
  padding: 0 0.6rem 0.3rem;
  font-size: 14px;
  color: var(--lh-muted);
}

/* Drawn by hand, in the same sense the rest of the page is: the coast is one
   bowed pen line gone over twice, not a plotted boundary. The generator writes
   three paths per ring — the fill, the ink, and the second pass. */
.m-land { fill: var(--lh-surface); stroke: none; }
.m-ink {
  fill: none;
  stroke: var(--lh-ink);
  stroke-width: 1.9;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* The going-over stroke. Thinner, paler, and slightly out of register — that
   offset is the whole effect; line them up and it just looks blurred. */
.m-ink2 {
  stroke: var(--lh-ink);
  stroke-width: 1.1;
  stroke-opacity: 0.34;
  transform: translate(1.6px, 1.4px);
}

/* The main line, faint: it is the thing being measured, not the thing being
   argued. The canal sits on top of it because the canal is the argument. */
.m-rail {
  fill: none;
  stroke: var(--lh-ink);
  stroke-opacity: 0.38;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.m-canal {
  fill: none;
  stroke: var(--lh-blue-2);
  stroke-opacity: 0.92;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Gone over a second time, like the coast. */
.m-canal2 { stroke-width: 1.6; stroke-opacity: 0.4; }

.legend { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.9rem; }
.legend i { display: inline-block; width: 1.5rem; height: 0; border-top-style: solid; }
.legend .k-rail { border-top-width: 1.5px; border-color: rgba(29, 30, 33, 0.4); }
.legend .k-canal { border-top-width: 3px; border-color: var(--lh-blue-2); }

/* Dots get an ink outline for the same reason: a drawn dot has an edge. */
.m-town, .m-top, .m-host { stroke: var(--lh-ink); stroke-width: 1.2; }
.m-town { fill: #C4BCA8; stroke-opacity: 0.45; }
.m-top { fill: var(--lh-blue); }
.m-host { fill: var(--lh-rust); }

/* Hand-lettered, unlike the prose. The kit draws the same distinction: body
   text is a system face, but type *inside a drawing* is the hand — see
   .anim-label in assets/anim.css. Six words on a map is a caption, not a read.
   The face comes from anim.css's @font-face. */
.m-lab {
  font-family: "Excalifont", "Bradley Hand", "Chalkboard SE", "Segoe Print",
    "Comic Sans MS", cursive;
  font-size: 17px;
  fill: var(--lh-ink);
  /* Knock the land out behind the letters rather than dodging the dots. */
  paint-order: stroke;
  stroke: var(--lh-surface);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.m-lab-host { fill: var(--lh-rust); }

/* ---------- the betweenness animation ---------- */

/* Wider than the kit's default 310px: this drawing is a six-town line, not a
   diagram that wants to be square. */
/* Wider than the kit's default 310px: nine towns in a line want the room, and
   the type inside has to survive being scaled down with the drawing. */
#bc-anim .anim-svg { max-width: 620px; }

/* The pen went over every line twice. This is the second pass — thinner, paler
   and deliberately out of register, which is the whole effect. */
#bc-anim .bc-edge2 { stroke-width: 1.3; stroke-opacity: 0.4; }
#bc-anim .anim-edge { stroke-width: 2.6; }
#bc-anim .bc-blob { stroke-width: 2.2; }

#bc-anim .bc-name { font-size: 19px; font-weight: 700; }
#bc-anim .bc-badge { font-size: 21px; font-weight: 700; fill: var(--lh-muted); }
#bc-anim .bc-bump { fill: var(--lh-rust); }
#bc-anim .bc-win { fill: var(--lh-rust); }
#bc-anim .bc-win-badge { fill: var(--lh-rust); font-size: 26px; }
#bc-anim .anim-big { color: var(--lh-rust); }

/* The kit's own type, one step up: this stage is read on a phone too. */
#bc-anim .anim-step { font-size: 1.2rem; }
#bc-anim .anim-note { font-size: 1.02rem; line-height: 1.6; }
#bc-anim .anim-tally { font-size: 1.05rem; }
#bc-anim .anim-caption { font-size: 0.95rem; }

/* ---------- ranking ---------- */

.rank { list-style: none; margin: 1.2rem 0 0.6rem; padding: 0; }
.rank li {
  display: grid;
  grid-template-columns: 1.4rem 8.5rem 1fr 3rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.18rem 0;
}
.rank .n { font-family: var(--lh-mono); font-size: 13px; color: var(--lh-muted); }
.rank .t { font-size: 16px; color: var(--lh-ink); }
.rank .v {
  font-family: var(--lh-mono);
  font-size: 13px;
  color: var(--lh-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.rank .bar {
  height: 13px;
  border-radius: 7px 3px 8px 4px / 4px 8px 3px 7px;
  background: var(--lh-blue-2);
}
.rank .off .bar { background: var(--lh-rule); }
.rank .off .t { color: var(--lh-muted); }
/* The host city, and the only bar that is allowed to shout. */
.rank .host .bar { background: var(--lh-rust); }
.rank .host .t { font-weight: 700; }

.cut {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0;
  font-size: 13px;
  color: var(--lh-rust);
}
.cut::after {
  content: "";
  flex: 1;
  height: 7px;
  background-image: var(--lh-stroke);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 120px 7px;
}

/* ---------- margin note ---------- */

/* The one handwritten line on the page. Printed note, handwritten margin — the
   difference between the two is the point, so it writes exactly one thing. */
.margin-note {
  margin: 2rem 0;
  font-family: var(--lh-hand);
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--lh-blue);
  transform: rotate(-0.7deg);
}

/* ---------- caveats ---------- */

.caveats {
  margin: 2rem 0 0;
  padding: 1rem 1.2rem;
  background: var(--lh-surface);
  border-radius: var(--lh-wobble-2);
  font-size: 15px;
  color: var(--lh-muted);
}
.caveats h2 {
  font-size: 17px;
  margin: 0 0 0.5rem;
  background: none;
  padding: 0;
}
.caveats ul { margin: 0; padding-left: 1.1rem; }
.caveats li { margin-bottom: 0.4rem; }

footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  font-size: 14px;
  color: var(--lh-muted);
  background-image: var(--lh-stroke-faint);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 120px 7px;
}

@media (max-width: 30rem) {
  body { font-size: 17px; }
  .rank li { grid-template-columns: 1.2rem 6.5rem 1fr 2.6rem; }
}