/* ═══════════════════════════════════════════════════════════════════════════
   The Long Trace — the flagship essay, and the only page that loads this file.
   Loads AFTER site.css and extends it. Nothing here restates a token, a colour,
   a face or a component site.css already defines: the header, footer, sprite,
   buttons, `.essay-head`, `.essay-meta`, `.stats`, `.toc`, `.toc-mobile`,
   `.essay-grid`, `.prose`, `.fig`, `.source-list`, `.rule-head` and the reveal
   are all shared, and are only narrowed where this page genuinely differs.

   Three rules inherited from site.css and obeyed here:

   1. FAMILY NAMES ARE QUOTED. Only var(--display) / var(--label) / var(--text) /
      var(--code) are used below, and each of those tokens is already quoted at
      its definition, so no bare "Source Sans 3" or "Barlow Condensed" can leak.

   2. REVEALS NEVER GATE VISIBILITY. This sheet adds no reveal of its own. The
      only one used is site.css's `.reveal-rise`, which animates transform and
      never opacity, and site.js settles it after 2.5s and on visibilitychange.
      The retired build gated every era on `html.js .lt-reveal { opacity: 0 }`
      and shipped invisible prose. That bug is not carried.

   3. COLOUR IS PUNCTUATION. No era carries a tint. The whole page spends the
      --ox-deep drench exactly once, on the interlude, because that is where the
      argument turns. --ochre and --stone appear nowhere in this file, because
      nothing here is a rule or an icon that needed them.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────── the two-column measure ───────────
   Contents rail + prose, and that is all: this essay has no per-article rail of
   sources, LinkedIn and read-next, so a third column would be an empty one. Its
   26 sources and 10 books go to the foot instead, where a reader arrives on
   purpose. `--lt-band` is the rail plus gap plus measure, so the head, the stat
   row, the mobile contents and the sources section all align to the same two
   edges as the grid rather than to the wider wrap. */
.lt-page { --lt-rail: 212px; --lt-gap: 56px; --lt-measure: 70ch;
           --lt-band: calc(var(--lt-rail) + var(--lt-gap) + var(--lt-measure)); }
/* On a desktop the reading column took 70ch and stopped, while the standfirst
   and every rule above it ran the full band, so the essay read as a narrow
   ribbon inside a wide frame. An insights article can afford that, because it
   spends the room on a right-hand rail of sources and read-next. This one has
   no such rail, so the space was simply unused. The measure now takes whatever
   the wrap has left, to a ceiling of 92ch, and the figures widen with it, which
   also lifts their labels. Below 1180px nothing changes: the rail collapses
   into the accordion and the column already fills the screen. */
@media (min-width: 1181px) {
  .lt-page { --lt-measure: clamp(70ch,
             calc(min(1260px, 100vw) - 2 * clamp(20px, 4vw, 56px)
                  - var(--lt-rail) - var(--lt-gap)), 86ch); }
}
/* AND THE PROSE HAS TO ACTUALLY USE ITS COLUMN.
   site.css gives `.prose` a --measure of 34rem and caps every section at it.
   That is right on an insights article, where the column is 34rem wide anyway.
   Here the column is far wider, so each era stopped 233px short of its own right
   edge while the standfirst above ran the full band, which is exactly what
   Vishwanath saw. Sections now fill the column, so the body and the standfirst
   share a right edge and the only inset left is the contents rail, which is
   there on purpose and has something in it. The figures widen with the column,
   which lifts their labels again. */
.lt-page .lt-body { --measure: 100%; }
.lt-band { max-width: var(--lt-band); margin-left: auto; margin-right: auto; }
.essay-head.lt-band { max-width: var(--lt-band); }

.essay-grid.lt-grid { grid-template-columns: var(--lt-rail) minmax(0, var(--lt-measure));
           gap: var(--lt-gap); justify-content: center; }
/* the prose fills its own column, which is already the measure */
.lt-body { max-width: none; }

/* ─────────── head ───────────
   site.css styles `.hero h1 em` and `.page-head h1 em` but not the essay head,
   and this is the one essay title with an <em> in it. */
.essay-head h1 em { font-style: normal; color: var(--ox); }
/* The standfirst runs the FULL width of the band, out to the rule beneath it.
   It was capped at 56ch, which on a wide desktop stopped it barely two thirds of
   the way across while the rule below ran the whole way, so the block read as
   clipped rather than composed. It now reflows into all the space it has at every
   width, and the type steps up a little as the measure grows, so a longer line
   still reads as deliberate rather than stretched. */
.essay-head.lt-band .dek { max-width: none; color: var(--body);
           font-size: clamp(20px, 0.62vw + 15px, 24px); line-height: 1.52; }
.lt-jump { margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
           font-family: var(--code); font-size: 11.5px; font-weight: 700;
           letter-spacing: 0.07em; text-transform: uppercase; color: var(--ox);
           border-bottom: 2px solid var(--ox); padding-bottom: 2px;
           transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.lt-jump:hover { color: var(--ink); border-color: var(--ink); }

/* the three figures the essay puts in its own furniture. site.css owns the
   component; all this adds is the label case and a breathing gap. */
.lt-stats { margin-top: clamp(24px, 3vw, 34px); }
.lt-stats .stat .l { text-transform: uppercase; }

/* ─────────── contents ───────────
   The rail is site.css's `.toc`, sticky at top 86px, capped at
   calc(100vh - 120px) with overflow-y, with the oxblood edge indicator on the
   active chapter. Two changes only: the label tier is Barlow Condensed because a
   contents list is UI, and site.css's decimal counter is dropped because the
   spec's own tags already number the sections, and printing 07 against an
   interlude that sits between eras VI and VII would be a lie. */
.lt-page .toc a, .lt-page .toc-mobile a { font-family: var(--label); font-weight: 600;
           text-transform: uppercase; letter-spacing: 0.03em; }
.lt-page .toc a { font-size: 16.5px; line-height: 1.2; padding-left: 13px; }
.lt-page .toc a::before, .lt-page .toc-mobile a::before { content: none; }
.lt-page .toc-mobile a { font-size: 17px; }
.lt-toc-jump { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
           font-family: var(--code); font-size: 10.5px; font-weight: 700;
           letter-spacing: 0.09em; text-transform: uppercase; color: var(--ox);
           border-bottom: 1.5px solid var(--ox); padding-bottom: 2px; }
.lt-toc-jump:hover { color: var(--ink); border-color: var(--ink); }

/* ─────────── an era ───────────
   A masthead on a 2px rule, an Anton numeral as the one piece of colour in it,
   the spec's tag and span in mono, then the heading and standfirst. No tint, no
   giant watermark numeral, no per-era artwork. */
.lt-era, .lt-coda { border-top: 2px solid var(--ink); padding-top: 15px;
           margin-top: clamp(46px, 6vw, 78px); }
.lt-era-mast { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lt-no { font-family: var(--display); font-size: clamp(30px, 3.6vw, 40px); line-height: 0.82;
           color: var(--ox); letter-spacing: 0.014em; font-variant-numeric: tabular-nums; }
.lt-tag { font-family: var(--code); font-size: 11px; font-weight: 700; letter-spacing: 0.11em;
           color: var(--ink); }
.lt-span { font-family: var(--code); font-size: 11px; letter-spacing: 0.06em;
           color: var(--meta); margin-left: auto; white-space: nowrap; }
.lt-era-head h2, .lt-coda h2 { margin: 14px 0 10px; }
.lt-standfirst { font-size: clamp(17.5px, 1.8vw, 19.5px); line-height: 1.5; color: var(--ink);
           max-width: 68ch; margin: 0 0 1.5em; text-wrap: pretty; }
/* the spec marks its six landing lines with <b>, and site.css only dresses
   <strong>. Same weight, same ink, so the two are indistinguishable. */
.lt-body b { color: var(--ink); font-weight: 700; }

/* ─────────── the dated record ───────────
   Per-era facts with a date against them. Compact, mono dates in oxblood, one
   hairline per row, and no tick-marks or observer-driven dots: it is a table of
   record, so it reads the same whether or not anything ever scrolls. */
.lt-ledger { margin: 2.3em 0 2.1em; border-top: 2px solid var(--ink); }
.lt-ledger-lbl { font-family: var(--code); font-size: 10px; font-weight: 700;
           letter-spacing: 0.13em; text-transform: uppercase; color: var(--meta);
           padding: 9px 0 4px; display: block; }
.lt-ledger .r { display: grid; grid-template-columns: minmax(102px, 138px) minmax(0, 1fr);
           gap: 8px 18px; padding: 9px 0; border-top: 1px solid var(--hair); align-items: baseline; }
.lt-ledger .d { font-family: var(--code); font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
           color: var(--ox); }
.lt-ledger .e { font-size: 15.5px; line-height: 1.5; color: var(--body); }
.lt-ledger .e strong { color: var(--ink); font-weight: 700; }

/* ─────────── what an era hands on ───────────
   The value is set in var(--text) and never in var(--label): era VIII's reads
   "≈ 10 seconds", and U+2248 is absent from the Anton and Barlow Condensed
   subsets, so setting it in either would fall back to a visibly wrong face for
   that one character. Source Sans 3 and JetBrains Mono both ship it. */
.lt-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
           gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.lt-foot .c { background: var(--surface); padding: 12px 15px 13px; display: grid; gap: 5px; }
.lt-foot .k { font-family: var(--code); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
           text-transform: uppercase; color: var(--meta); }
.lt-foot .v { font-family: var(--text); font-size: 15px; font-weight: 600; line-height: 1.4;
           color: var(--ink); }
.lt-foot .c:first-child .v { color: var(--ox); }

/* ─────────── an exhibit that is still a brief ───────────
   The ten line-art scenes are removed. Two earned a brief for a real diagram,
   and until that diagram exists this is what ships: the brief's own claim set in
   type inside site.css's figure frame, the planned treatment underneath, and a
   mono note that says so. Deliberately not a grey box, not a spinner, not an
   attempt at the drawing. */
.lt-brief { margin: 2.5em 0; }
.lt-brief-body { padding: 17px 20px 18px; }
.lt-claim { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.4; font-weight: 600;
           color: var(--ink); margin: 0 0 14px; max-width: 46ch; text-wrap: pretty; }
.lt-why { font-size: 15px; line-height: 1.5; color: var(--body); margin: 0; max-width: 58ch; }
.lt-why-k { display: block; font-family: var(--code); font-size: 9.5px; font-weight: 700;
           letter-spacing: 0.12em; text-transform: uppercase; color: var(--meta);
           margin-bottom: 5px; }

/* ─────────── the interlude: the page's one drench ───────────
   1.4% of the record, and the point at which the essay turns. The old build
   drenched four eras and this section; that made the colour a background rather
   than an argument. Here it is the only dark panel on the page, and the era
   sections above and below it stay on the shared ground. */
/* THE DRENCH IS FIXED IN BOTH THEMES, SO ITS TEXT MUST BE TOO.
   --ox-deep is deliberately the same colour in light and dark. --ox-pale is
   not: it is #F5E4DF in light and #2A1713 in dark, because everywhere else it
   is used as a tinted GROUND rather than as ink. Reading it as text on the
   fixed drench gave 1.16:1 in dark mode, which is what made this whole card
   illegible. The literal is deliberate: a token that flips cannot be trusted
   on a ground that does not. */
.lt-interlude { background: var(--ox-deep); color: #F5E4DF;
           padding: clamp(24px, 3.2vw, 40px) clamp(20px, 3vw, 34px);
           margin: 2.9em 0; }
.lt-kicker { display: block; font-family: var(--code); font-size: 11px; font-weight: 700;
           letter-spacing: 0.11em; color: var(--ox-on-dark); }
.lt-interlude h2 { color: #fff; font-size: clamp(21px, 2.3vw, 27px); line-height: 1.1;
           margin: 13px 0 15px; }
.lt-interlude p { color: #F5E4DF; }
.lt-interlude b { color: #fff; }
.lt-interlude .lt-brief { background: rgba(0,0,0,0.24); border-color: rgba(255,255,255,0.34);
           margin-bottom: 0; }
.lt-interlude .fig-head { border-bottom-color: rgba(255,255,255,0.2); }
.lt-interlude .fig-no { color: var(--ox-on-dark); }
.lt-interlude .fig-title, .lt-interlude .lt-claim { color: #fff; }
.lt-interlude .lt-why { color: #F5E4DF; }
.lt-interlude .lt-why-k, .lt-interlude .fig-foot { color: var(--ox-on-dark); }
.lt-interlude .fig-foot { border-top-color: rgba(255,255,255,0.2); }

/* ─────────── sources and the bookshelf, at the foot ───────────
   Thirty-six citations are a reference apparatus, not a sidebar. They get their
   own section at the end of the read, on the same two edges as the essay, using
   site.css's `.source-list` rows and `.rule-head`. */
.lt-sources { padding: clamp(40px, 5vw, 64px) 0 0; }
.lt-src-block { margin-top: clamp(26px, 3vw, 38px); }
.lt-lbl { font-family: var(--code); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
           text-transform: uppercase; color: var(--meta); margin-bottom: 4px; }
.lt-cols { columns: 2; column-gap: clamp(26px, 3vw, 46px); }
.lt-cols li { break-inside: avoid; font-size: 14.5px; }
.lt-shelf .source-list li { color: var(--body); }
.lt-shelf b { color: var(--ink); font-weight: 600; }
.lt-shelf .pub { display: block; font-family: var(--code); font-size: 10px; letter-spacing: 0.06em;
           text-transform: uppercase; color: var(--meta); margin-top: 3px; }

/* ─────────── responsive ─────────── */
/* 1180 is site.css's own breakpoint: the rail hides, the <details> accordion
   above the essay takes over, and the grid becomes one column. */
@media (max-width: 1180px) {
  /* the rail is gone, so the band no longer has a rail to align to. The head,
     the stat row, the contents accordion and the sources keep a wider band than
     the prose on purpose: display type and two columns of citations want the
     room, and the reading measure must not grow to fill it. */
  /* With the rail gone there is nothing for the wider band to align to, and a
     head that runs 229px past the prose beneath it reads as a mistake rather
     than as a decision. Band and measure become the same edge here, which is
     the uniformity Vishwanath asked for as the screen narrows. */
  .lt-page { --lt-measure: min(100%, 86ch); --lt-band: var(--lt-measure); }
  .essay-grid.lt-grid { grid-template-columns: minmax(0, var(--lt-measure));
           justify-content: center; gap: 0; }
}
/* below 920 there is no spare room to spend on wider furniture, so the whole
   page collapses to one centred column and the head, the stats, the contents and
   the sources line up with the prose exactly. */
@media (max-width: 920px) {
  .lt-page { --lt-band: var(--lt-measure); }
}
@media (max-width: 760px) {
  .lt-cols { columns: 1; }
  .lt-span { margin-left: 0; }
}
@media (max-width: 620px) {
  /* the date stacks over its entry rather than squeezing to two words a line */
  .lt-ledger .r { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  /* and the span drops under the numeral rather than running to the edge */
  .lt-era-mast { row-gap: 5px; }
  .lt-span { flex: 1 0 100%; }
  .lt-page .stats .stat { border-right: none; }
  .lt-brief-body { padding: 15px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  /* site.css already settles .reveal-rise and draws .rule-head's underline.
     Nothing on this page animates otherwise, so there is nothing else to undo. */
  .lt-jump, .lt-toc-jump { transition: none; }
}

@media print {
  .lt-interlude { background: none; color: var(--body); border: 2px solid var(--ink); }
  .lt-interlude h2, .lt-interlude b, .lt-interlude .lt-claim,
  .lt-interlude .fig-title { color: var(--ink); }
  .lt-interlude p, .lt-interlude .lt-why { color: var(--body); }
  .lt-interlude .lt-kicker, .lt-interlude .fig-no,
  .lt-interlude .lt-why-k, .lt-interlude .fig-foot { color: var(--meta); }
  .lt-toc-jump, .lt-jump { display: none; }
  .lt-cols { columns: 2; }
}