.toc{
  --ground:#1b2136; --card:#232a44; --ink:#ece7da; --mut:#a3a795; --meta:#8fa3c8;
  --gold:#d9a441; --seam:#38405e; --line:#4a537a;
  --mono:'IBM Plex Mono','Zen Kaku Gothic New',monospace;
  --serif:'Shippori Mincho B1',serif; --sans:'Zen Kaku Gothic New',sans-serif;
  display:block;padding:0 0 96px}

.toc .wrap{max-width:940px;margin:0 auto;padding:0 24px}

/* ---- the head: two lines, then straight into the list ---------------------------- */
.toc .toc-head{margin:46px auto 0}
.toc .toc-head .k{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0}
.toc .toc-head h1{font-family:var(--serif);font-weight:700;
  font-size:clamp(28px,4.2vw,44px);line-height:1.15;margin:12px 0 0;color:var(--ink)}
.toc .toc-head p{margin:14px 0 0;max-width:64ch;color:var(--mut);font-size:16px;
  line-height:1.7}

/* ---- a group of entries ----------------------------------------------------------- */
.toc .grp{margin-top:52px}
.toc .grp-h{display:flex;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--seam);padding-bottom:9px}
.toc .grp-h b{font-family:var(--mono);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.toc .grp-h span{font-family:var(--mono);font-size:12px;color:var(--meta);
  letter-spacing:.04em;margin-left:auto;text-align:right}

/* ---- one entry: the whole row is the link ---------------------------------------- */
/* Taking the underline off the questions made the page calm and also made it look like a
   printed list rather than eight links, so each row carries its own visible affordance:
   a chevron in a column of its own, a rule down the left edge, and a number that lights up.
   All three are painted at rest — a hover-only cue tells a phone nothing. */
.toc .ent{display:grid;grid-template-columns:44px minmax(0,1fr) auto 30px;
  align-items:baseline;gap:0 14px;padding:17px 6px 16px 14px;
  border-bottom:1px dashed var(--seam);color:inherit;
  border-left:2px solid transparent;border-radius:0 3px 3px 0;
  transition:background .12s,border-left-color .12s}
/* text-decoration propagates from an ancestor and a descendant cannot cancel it, so the
   row link has to say it here rather than relying on a reset further up */
.toc .ent,.toc .ent:hover,.toc .ent:focus{text-decoration:none}
.toc .ent:hover,.toc .ent:focus-visible{background:rgba(217,164,65,.06);
  border-left-color:var(--gold);outline:none}
.toc .ent:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.toc .ent .no{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--meta);
  letter-spacing:.04em;transition:color .12s}
.toc .ent:hover .no{color:var(--gold)}
/* the chevron: the one mark on the row that means «this goes somewhere». It sits in its own
   track so it never collides with the answer, and it steps right on hover rather than
   appearing from nothing — an affordance that only exists on hover is not an affordance. */
.toc .ent .go{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--seam);border-radius:50%;
  font-family:var(--mono);font-size:13px;line-height:1;color:var(--meta);
  justify-self:end;align-self:center;
  transition:color .12s,border-color .12s,background .12s,transform .12s}
.toc .ent:hover .go,.toc .ent:focus-visible .go{color:var(--gold);
  border-color:var(--gold);background:rgba(217,164,65,.12);transform:translateX(3px)}
.toc .ent .mid{display:flex;align-items:baseline;gap:12px;min-width:0}
.toc .ent .q{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.35;
  color:var(--ink)}
/* the leader: the row of dots a contents page runs between the entry and its page number.
   A flex spacer rather than a pseudo-element, because the middle grid cell is 1fr wide and
   an ::after anchored to it would start at the end of the COLUMN, not the end of the text
   — which is why the first attempt drew nothing. Same device as the ledger's .dots. */
.toc .ent .dots{flex:1 1 24px;min-width:18px;border-bottom:1px dotted var(--line);
  opacity:.7;transform:translateY(-.34em)}
.toc .ent:hover .q{color:var(--gold)}
.toc .ent .a{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--mut);
  text-align:right;max-width:44ch;justify-self:end}
.toc .ent .a i{font-style:normal;color:var(--meta)}
.toc .ent .a b{font-weight:600;color:var(--ink)}

/* the answer column carries the weight on a phone, so the row stacks and the leader goes */
@media (max-width:760px){
  /* the row stacks, and every cell is placed by hand: with the chevron in the markup after
     the answer, auto-placement would drop it onto a third row of its own. */
  .toc .ent{grid-template-columns:30px minmax(0,1fr) 28px;gap:0 10px;
    padding:15px 2px 14px 12px}
  .toc .ent .no{grid-column:1;grid-row:1}
  .toc .ent .mid{grid-column:2;grid-row:1}
  .toc .ent .go{grid-column:3;grid-row:1;align-self:start}
  .toc .ent .dots{display:none}
  .toc .ent .a{grid-column:2;grid-row:2;text-align:left;justify-self:start;
    max-width:none;margin-top:6px}
  .toc .ent .q{font-size:17px}
  .toc .grp{margin-top:38px}
  /* the heading and its subtitle stop competing for one line: on a phone they were both
     breaking in half («GETTING / THERE» against «routes, fares and the / walk») */
  .toc .grp-h{display:block}
  .toc .grp-h span{display:block;margin-left:0;text-align:left;margin-top:5px}
}

/* ---- the foot: dates and the one honest line about money -------------------------- */
.toc .toc-foot{margin-top:56px;border-top:1px solid var(--seam);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:10px 32px;align-items:baseline}
.toc .toc-foot p{margin:0;font-family:var(--mono);font-size:12px;line-height:2;
  color:var(--meta);letter-spacing:.03em;max-width:62ch}
/* A link inside a sentence stays inline. Forcing the 44px tap floor on it — inline-flex
   with a min-height — makes a box four times the height of its own text, and the dashed
   underline then draws a stray rule a line and a half below the words. The tap-size gate
   exempts links inside prose for exactly this reason. */
.toc .toc-foot a{color:var(--gold);text-decoration:none;
  border-bottom:1px dashed rgba(217,164,65,.5)}
.toc .toc-foot a:hover{border-bottom-style:solid}