/* ── CROSS-REFERENCE TWO: the look (27 Sept 2026) ──────────────────────
   The index, the focus and the wires are crossref.html's, moved here so
   the page can grow a stage beside them. What is new is the stage (the
   shelf and the room on the right half), the clusters in the focus, and
   the type: Avenir Next only, as he asked for this round. The labels the
   first version set in a monospace are small grey caps now, the voice
   the pieces he sent back use ("SECTION 02: THE MATERIAL SYSTEM"), and
   the big type is set the way the board sets its own: 700, 800 for the
   very largest figures, tracking pulled in as it grows.

   The index has four settings as of 27 Sept 2026, one per value of
   html[data-ix] (a, b, c, d; d the default). The shared rules come first, then each
   version's own under its letter, then the phone. What the versions do
   and why is at the top of crossref2.html and above buildIndex in
   crossref2.js; here it is only sizes. A picture in the index is a
   board lead at its smallest rung, and it dims with its entry.

   Loads after density.css (the house tokens and the faces) and
   study-panel.css (the room). Colour only comes from the data, and only
   from a study's own: its palette inside its room. As of 27 Sept (later)
   no category is coded by colour anywhere: the lines' squares, their
   coloured words and their coloured grounds are gone. Index D, the
   default, is at the end of the versions. As of 27 Sept (latest) a shelf
   is a frame here (a running head on paper, the next entry at the foot)
   around a layout that sets the pictures in its own file: the edge-to-
   edge grid is shelf-grid.css now. The frame's rules are under "a
   shelf" below. */

/* --m, the site's margin: 20px on both sides since 1 Oct 2026 (his "maybe
   we do 20px on both sides (images too)"; it was 28px on the left and
   nothing on the right, where the shelf's pictures ran to the edge) */
:root { --m: 20px; --fs: 12px; --idxw: min(46vw, 760px); --gut: 64px; --top: 22px;
  --stl: calc(var(--m) + var(--idxw) + var(--gut) / 2); }
html, body { height: 100%; }
body { overflow: hidden; }

/* the label voice: small grey caps in Avenir */
.caps { font-size: 10px; font-weight: 600; letter-spacing: 0.085em; line-height: 1.3; text-transform: uppercase; }

/* ── the mark ── */
/* the mark at DemiBold since 30 Sept ("let's try 600"); density.css sets it Bold, 700 */
#mark { display: block; width: max-content; margin: 0 0 30px; font-size: 17px; font-weight: 600; }

/* ── the index. It scrolls in its own half now, under a still stage; the
   six pixels either side are room for an entry set solid ── */
#idx { position: fixed; left: calc(var(--m) - 6px); top: 0; bottom: 0; width: calc(var(--idxw) + 12px); z-index: 3;
  padding: var(--top) 6px 72px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  font-size: var(--fs); line-height: 1.27; }
#idx::-webkit-scrollbar { display: none; }
.grp { margin: 0 0 38px; }
.grp h2 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.6em; padding: 0 0 0.5em;
  border-bottom: 1px solid var(--hair); font-size: 9.5px; font-weight: 600; line-height: 1; letter-spacing: 0.09em; text-transform: uppercase; color: var(--grey);
  break-after: avoid; break-inside: avoid; }
.grp h2 .n { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.grp h2 .n b { font-weight: 600; color: var(--ink); }
.grp .items { font-weight: 500; }
.e { display: block; break-inside: avoid; font-weight: inherit; letter-spacing: -0.003em; color: var(--ink); cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease; -webkit-tap-highlight-color: transparent; }
.e .t { text-decoration: none; }
.e:focus { outline: none; }
.e:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.e .y { color: var(--grey); font-weight: 500; font-variant-numeric: tabular-nums; transition: color 0.2s ease; }
.grp.run .items, .grp.wall .items { line-height: 1.42; }
.grp.run .e, .grp.wall .e, .grp.inline .e, .grp.word .e { display: inline; }
.grp .e.nw { white-space: nowrap; }
.grp .sep { color: rgba(0, 0, 0, 0.3); margin: 0 0 0 0.3em; transition: color 0.2s ease; }
html[data-mark="dim"] body.x .grp .sep { color: var(--faint); }
.e.fig { font-variant-numeric: tabular-nums; }

/* a board picture in the index: small, cropped to its box, never drawn
   past half its pixels (the smallest rung covers every box here) */
.th { position: relative; display: block; overflow: hidden; background: #ece8e4; transition: opacity 0.2s ease; }
.th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; }
.th.in img { opacity: 1; }

/* the cross-reference, the old way (?mark=dim): what shares a study
   stays in ink and everything else goes grey, pictures too */
html[data-mark="dim"] body.x .e { color: var(--faint); }
html[data-mark="dim"] body.x .e .y { color: var(--faint); }
html[data-mark="dim"] body.x .e:not(.on) .th, html[data-mark="dim"] body.x .strip .th:not(.hit) { opacity: 0.16; }
html[data-mark="dim"] body.x .e.on { color: var(--ink); }
html[data-mark="dim"] body.x .e.on .y { color: var(--grey); }
html[data-mark="dim"] .e.me .t, html[data-mark="dim"] .grp.run .e.me, html[data-mark="dim"] .grp.wall .e.me { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ── THE INK MARK (27 Sept, the default) ─────────────────────────────
   His call: "everything going dim is difficult - how do we highlight in
   a different way? ... the black highlight behind it". Nothing recedes.
   What a hovered entry shares a study with is set in an ink band; a run
   of capabilities, tools or figures is set bold instead (the mix), so a
   broad hover does not turn half the index black.

   27 Sept, later: "remove the outline/box and the bars on each side of
   selected words to clean it up", then "add animations ... so things
   dont just 'pop' into place". So there is no ring on the hovered entry
   and no outline on a picture, and the band is a background that sweeps
   in from the left and leaves to the right rather than appearing. The
   side bars were the old band's shadows: an entry run inline now gets
   its hair of overhang as padding, given back by an equal negative
   margin and set at all times, so a band arriving never moves a word; a
   row set as a block is banded to the width of its column. */
html[data-mark="ink"] .e {
  background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat;
  background-size: 0% 100%; background-position: 100% 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.26s cubic-bezier(0.45, 0, 0.2, 1), color 0.18s ease 0.04s, -webkit-text-stroke-width 0.22s ease; }
html[data-mark="ink"] .grp:is(.run, .wall, .inline, .word) .e, html[data-mark="ink"] .erun .e, html[data-mark="ink"] .e.bf { padding-inline: 0.2em; margin-inline: -0.2em; }
html[data-mark="ink"] body.x .e.on, html[data-mark="ink"] .e.lock { background-size: 100% 100%; background-position: 0 0; color: var(--paper); text-shadow: none; }
/* rows that stack (Work, About, the line names) keep a sliver of paper
   under each band, scaled to the type, so a run of them reads as marks,
   not as one black block */
html[data-mark="ink"] body.x .grp:not(.run):not(.wall):not(.inline):not(.word) .e.on { box-shadow: inset 0 -0.09em 0 var(--paper); }
html[data-mark="ink"] body.x .e.on.w { box-shadow: inset 0 -1px 0 var(--paper); }
html[data-mark="ink"] body.x .e.on .y { color: rgba(255, 255, 255, 0.62); }
/* THE MIX: a run is set bold where it lights, the hovered entry banded.
   The bold is a hair of stroke on the letters, not a heavier weight,
   because a heavier weight is wider and would push the rest of the run
   along; it thickens in as the band would sweep. #idx is here so no band
   rule can outrank it and leave its bars behind */
html[data-mark="ink"] body.x #idx .grp[data-g="capabilities"] .e.on:not(.me):not(.lock),
html[data-mark="ink"] body.x #idx .grp[data-g="tools"] .e.on:not(.me):not(.lock),
html[data-mark="ink"] body.x #idx .grp[data-g="figures"] .e.on:not(.me):not(.lock) {
  background-size: 0% 100%; background-position: 100% 0; color: var(--ink); box-shadow: none;
  -webkit-text-stroke: 0.045em currentColor; text-shadow: var(--halo); }
.e.cur .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* what the stage holds open: set solid, in ink, whatever its kind */
.e.lock { color: var(--paper) !important; }
html:not([data-mark="ink"]) .e.lock { background: var(--ink); box-shadow: 0 0 0 0.18em var(--ink); }
.e.lock .y { color: rgba(255, 255, 255, 0.6) !important; }
.e.lock .t { text-decoration: none; }
.e.lock .th { opacity: 1 !important; }
body.staged .e:not(.on):hover .t, body.staged .grp.run .e:not(.on):hover, body.staged .grp.wall .e:not(.on):hover { text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 0.2em; }
/* in E, that underline is drawn (30 Sept, his "it's a grey underline that
   just sort of 'blinks' in...can we at least have that animate/swipe in?
   maybe the left to right swipe?"): it sweeps in from the left under
   every line of the name and leaves to the right, on the grey cell's
   own curve and time, its weight the type's own (about what an
   underline of that size would be) */
html[data-ix="e"]:not([data-mk="bar"]) body.staged #idx .e:not(.on) .t {
  background-image: linear-gradient(var(--faint), var(--faint)); background-repeat: no-repeat;
  background-size: 0% max(1px, 0.07em); background-position: 100% 100%;
  transition: background-size 0.36s cubic-bezier(0.45, 0, 0.2, 1); }
html[data-ix="e"]:not([data-mk="bar"]) body.staged #idx .e:not(.on):hover .t { text-decoration: none; background-size: 100% max(1px, 0.07em); background-position: 0 100%; }

/* the switch, on the mark's line: four letters */
.ixtop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 30px; }
.ixtop #mark { margin: 0; }
.ixsw { display: flex; align-items: baseline; gap: 14px; margin: 0 0 0 auto; color: var(--grey); font-size: 12px; }
.ixsw .ixl { margin-right: 4px; color: var(--faint); }
.ixsw a { padding: 2px 0; }
.ixsw a:hover { color: var(--ink); }
.ixsw a.on { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

/* ── A: three sizes. The lines large, Work at a reading size, the rest
   as fine print; the figures, the evidence with no pictures, in bold ── */
[data-ix="a"] .grp[data-g="lines"] .items { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 30px; }
[data-ix="a"] .e.ln { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding: 9px 0 10px; border-bottom: 1px solid var(--hair); }
[data-ix="a"] .e.ln .nm { font-size: 32px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
[data-ix="a"] .strip { display: flex; flex-wrap: wrap; gap: 3px; }
[data-ix="a"] .strip .th { flex: none; width: var(--ts, 22px); height: var(--ts, 22px); }
[data-ix="a"] .grp[data-g="work"] .items { columns: 2; column-gap: 30px; }
[data-ix="a"] .grp[data-g="work"] .e { display: flex; align-items: center; gap: 11px; padding: 3px 0; font-size: 15px; font-weight: 500; letter-spacing: -0.014em; line-height: 1.2; }
[data-ix="a"] .grp[data-g="work"] .th { flex: none; width: 33px; height: 22px; }
[data-ix="a"] .grp[data-g="work"] .t { flex: 1 1 auto; min-width: 0; }
[data-ix="a"] .grp[data-g="work"] .y { flex: none; font-size: 12px; }
[data-ix="a"] .grp.wall .items { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.34; }
[data-ix="a"] .grp.wall .sep { margin: 0 0.1em 0 0.2em; font-weight: 400; color: rgba(0, 0, 0, 0.2); }
[data-ix="a"] .fine, [data-ix="c"] .fine { columns: 3; column-gap: 24px; font-size: 11px; }
[data-ix="a"] .fine .grp, [data-ix="c"] .fine .grp { margin-bottom: 26px; }
[data-ix="a"] .fine .grp[data-g="about"] .e, [data-ix="c"] .fine .grp[data-g="about"] .e { line-height: 1.45; }

/* ── B: his idea as he said it, each section a step smaller than the one
   before: 32, 22, 17, 14, 12, 11. Everything runs on as text, and Work
   sets each study's picture in the line like a word ── */
[data-ix="b"] .grp { margin-bottom: 34px; }
[data-ix="b"] .grp[data-g="lines"] .items { font-size: 32px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.1; }
[data-ix="b"] .grp[data-g="lines"] .e { margin-right: 0.3em; white-space: nowrap; }
[data-ix="b"] .grp[data-g="work"] .items { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.36; }
[data-ix="b"] .grp[data-g="work"] .e { margin-right: 0.42em; }
[data-ix="b"] .grp[data-g="work"] .hold { white-space: nowrap; }
[data-ix="b"] .grp[data-g="work"] .th { display: inline-block; width: 1.44em; height: 0.96em; margin-right: 0.24em; vertical-align: -0.14em; }
[data-ix="b"] .grp[data-g="work"] .y { font-weight: 500; }
[data-ix="b"] .grp[data-g="about"] .items { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
[data-ix="b"] .grp[data-g="years"] .items { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
[data-ix="b"] .grp[data-g="figures"] .items { font-size: 12px; font-weight: 600; }
[data-ix="b"] .grp[data-g="capabilities"] .items, [data-ix="b"] .grp[data-g="tools"] .items { font-size: 11px; }

/* ── C: pictures lead. The lines as large words (in ink since 27 Sept),
   every study's picture in one tight grid, the rest as fine print ── */
[data-ix="c"] .grp[data-g="lines"] .items { font-size: var(--lw, 48px); font-weight: 700; letter-spacing: -0.05em; line-height: 1.02; }
[data-ix="c"] .grp[data-g="lines"] .e { display: inline-block; margin-right: 0.2em; white-space: nowrap; }
/* set solid, the ink kept inside its own line so it never covers the one above */
[data-ix="c"] .grp[data-g="lines"] .e.lock { box-shadow: 0 0 0 0.05em var(--ink); }
[data-ix="c"] .grp[data-g="work"] .items { display: grid; grid-template-columns: repeat(var(--gc, 6), minmax(0, 1fr)); gap: 13px 6px; }
[data-ix="c"] .grp[data-g="work"] .e { display: block; }
[data-ix="c"] .grp[data-g="work"] .th { width: 100%; aspect-ratio: 3 / 2; }
[data-ix="c"] .tc { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; line-height: 1.25; }
[data-ix="c"] .tc .y { font-weight: 500; }
[data-ix="c"] .grp[data-g="work"] .e.lock { background: none; box-shadow: none; color: var(--ink) !important; }
[data-ix="c"] .grp[data-g="work"] .e.lock .tc { color: var(--paper); }
[data-ix="c"] .grp[data-g="work"] .e.lock .tc .t { background: var(--ink); box-shadow: 0 0 0 0.2em var(--ink); }

[data-ix="c"] .fine .grp[data-g="figures"] .e { font-weight: 600; }

/* ── D: the first version's columns with a contents page's scale. Four
   sizes: the caps over each group (9.5px), the run (--fs, fitted to the
   glass), the features (half again the run), the lines and the big
   figures (--fl, sized to the column). Only sizes here; what and why is
   above INDEX D in crossref2.js ── */
[data-ix="d"] #idx { display: flex; flex-direction: column; padding-bottom: var(--top); overflow-y: hidden; }
[data-ix="d"] .ixtop { display: block; margin: 0 0 1.9em; break-inside: avoid; }
[data-ix="d"] .ixtop #mark { margin: 0 0 0.35em; }
[data-ix="d"] .ixsw { gap: 10px; margin: 0; font-size: 10px; }
[data-ix="d"] .ixsw .ixl { margin-right: 2px; }
[data-ix="d"] .dcols { flex: 1 1 auto; min-height: 0; overflow: hidden; columns: var(--cols, 4); column-gap: 18px; column-fill: auto;
  font-size: var(--fs); line-height: 1.27; --fm: calc(var(--fs) * 1.5); }
[data-ix="d"] .grp { margin: 0 0 1.1em; }
[data-ix="d"] .grp h2 { margin: 0 0 0.55em; padding: 0 0 0.45em; }
[data-ix="d"] .grp.run .items { line-height: 1.42; }
/* a study: its name, its year at the column's edge like a catalogue */
[data-ix="d"] .e.w { display: flex; justify-content: space-between; align-items: baseline; gap: 0.7em; }
/* a line: the largest words on the page, its count at the edge */
[data-ix="d"] .e.ld { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
[data-ix="d"] .e.ld .t { flex: none; margin-left: -0.045em; font-size: var(--fl, 32px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
/* a feature: a size up, its board picture butted to its name */
[data-ix="d"] .e.w.ft { display: flow-root; margin: 0.5em 0 0.55em; }
[data-ix="d"] .e.ft .th { float: left; height: calc(var(--fm) * 1.04 * 2); width: calc(var(--fm) * 1.04 * 2 * var(--r, 1.5)); margin: 0.12em 0.45em 0.1em 0; }
[data-ix="d"] .e.ft .t { font-size: var(--fm); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }
/* the name is a block beside the picture, so a third line never runs
   under it; its year sits at the column's edge, as every row's does, on
   the name's last line, or under it when that line is full (27 Sept review) */
[data-ix="d"] .e.ft .tx { display: flow-root; }
[data-ix="d"] .e.ft .y { float: right; margin: calc(var(--fs) * 0.44) 0 0 0.5em; line-height: 1; white-space: nowrap; }
/* a big figure: on its own line, the number large, a noun after it at the run's size */
[data-ix="d"] .it.bf { display: block; margin: 0.2em 0 0.3em; }
[data-ix="d"] .grp.run .e.bf { display: inline-block; white-space: normal; }
[data-ix="d"] .e.bf .fn { margin-left: -0.04em; font-size: var(--fl, 32px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
[data-ix="d"] .e.bf .fu { margin-left: 0.3em; }
/* too short a glass for it all: the columns balance and scroll in their half */
html.dscroll[data-ix="d"] #idx { display: block; overflow-y: auto; padding-bottom: 72px; }
html.dscroll[data-ix="d"] .dcols { overflow: visible; column-fill: balance; }

/* ── the wires: from each related entry to the thing in focus ── */
/* the same wires twice (27 Sept): #wiresBack over the index, clipped to
   the index and its gutter; #wires over the stage, clipped to the stage,
   so a wire into a shelf or a room lands on the picture. #wiresBack ran
   under the index, the words' paper halos letting a wire pass behind
   them, until his "let's move the wires to the top index" (1 Oct 2026):
   it sits over the index now (the same z as #idx, after it in the page) */
#wires, #wiresBack { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#wires { z-index: 6; clip-path: inset(0 0 0 var(--stl)); }
#wiresBack { z-index: 3; clip-path: inset(0 calc(100% - var(--stl)) 0 0); }
/* a touch darker (27 Sept, his "can we make them just a teeny tiny bit
   dark - just a touch"): 0.13 to 0.17, its own entry's 0.55 to 0.62.
   How they draw in and out is set in crossref2.js (draw, clearWires) */
#wires path, #wiresBack path { fill: none; stroke: var(--ink); stroke-width: 0.6; opacity: 0.17; }
#wires path.me, #wiresBack path.me { opacity: 0.62; stroke-width: 0.8; }
#wires circle, #wiresBack circle { fill: var(--ink); }
#wires g, #wiresBack g { opacity: 0; transition: opacity 0.12s ease; }
#wires g.in, #wires g.live, #wiresBack g.in, #wiresBack g.live { opacity: 1; }
#wires g.live, #wiresBack g.live { transition: none; }
/* the halo: a hair of paper around every letter in the index, the way a
   map sets its labels over its roads, so a wire passing behind a word
   broke there. The wires run over the index since 1 Oct, so there is no
   halo anywhere any more: on a lit box it only ever showed as a white
   outline round the words (his "i still see some of the headlines that
   have white outlines around them"). The variable stays, empty, for the
   rules that still name it */
:root { --halo: none; }
#idx { text-shadow: none; }
/* the highlight, one colour for every lit cell and run. A warm beige was
   tried (1 Oct 2026, #EDE8DF) and he went back: "i like the grey we had
   more". ?hl= tries another by eye (hex, with or without #) */
:root { --hl: #ECECEC; }
.e.lock, html[data-mark="ink"] body.x .e.on { text-shadow: none; }

/* ── the open half at hover ── */
/* the field sits in the site's margin with the pictures' corner (1 Oct
   2026, his "can we make the black flood here have padding like the
   images? also the slight radius too?"): 20px off the top, right and
   foot, flush with the open half's left edge as a shelf's pictures are */
#field { position: fixed; top: var(--m); right: var(--m); bottom: var(--m); left: var(--stl); z-index: 1; background: var(--fc, var(--paper));
  clip-path: inset(100% 0 0 0 round var(--pr, 4px)); transition: clip-path 0.55s var(--ease); }
#field.on { clip-path: inset(0 0 0 0 round var(--pr, 4px)); }
#focus { position: fixed; top: var(--m); right: var(--m); bottom: var(--m); left: calc(var(--m) + var(--idxw) + var(--gut)); z-index: 4;
  transition: opacity 0.28s ease; }
body.staged #focus { opacity: 0; pointer-events: none; }
.layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  color: var(--lc, var(--ink)); opacity: 1; transition: opacity 0.16s ease; }
.layer.out { opacity: 0; pointer-events: none; }
.layer:not(.out) { animation: arrive 0.2s ease both; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
.main { position: relative; max-width: 100%; }
.main.go { cursor: pointer; }

/* a picture: never wider than half its pixels */
.pic { position: relative; overflow: hidden; background: #ece8e4; }
.pic.alpha { background: var(--cream); }
.pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.pic.alpha img { object-fit: contain; }
.rise { animation: rise 0.5s var(--ease) both; }
@keyframes rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* a cluster: one large, the rest small with air, each captioned */
.clu { position: relative; flex: none; }
.cp { position: absolute; cursor: pointer; }
.cp .pic { animation: rise 0.55s var(--ease) both; }
.cp:nth-child(2) .pic { animation-delay: 0.05s; }
.cp:nth-child(3) .pic { animation-delay: 0.1s; }
.cp:nth-child(4) .pic { animation-delay: 0.15s; }
.cc { margin-top: 7px; font-size: 11px; font-weight: 600; letter-spacing: -0.002em; line-height: 14px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc .y { margin-left: 0.05em; font-weight: 500; color: var(--grey); font-variant-numeric: tabular-nums; }
.fieldv .cc .y { color: inherit; opacity: 0.6; }
.cp:hover .cc .t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* type in the open half: Avenir Next, set large the way the board does */
.big { font-weight: 700; line-height: 0.9; letter-spacing: -0.055em; margin-left: -0.045em; }
.fig .big { font-weight: 800; white-space: nowrap; line-height: 0.84; letter-spacing: -0.06em; }
.say { font-weight: 700; line-height: 1.02; letter-spacing: -0.045em; text-wrap: pretty; }
.say .g, .big .g { color: var(--grey); }
.say .h { color: var(--ink); }
.fieldv .say .g { color: inherit; opacity: 0.55; }
.lbl { margin: 1.1em 0 0; font-size: 13.5px; font-weight: 600; letter-spacing: -0.004em; line-height: 1.45; }
.lbl .caps { display: block; margin-bottom: 0.35em; color: var(--ink); }
.lbl .g { font-weight: 500; color: var(--grey); }
.sent { max-width: 34em; margin: 1.1em 0 0; font-size: 15px; font-weight: 500; letter-spacing: -0.006em; line-height: 1.55; color: var(--grey); }
.sent b, .sent mark { font-weight: 600; color: var(--ink); background: none; }
.body2 { columns: 2; column-gap: 28px; max-width: 700px; margin: 1.5em 0 0; font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--grey); }
.body2 p { margin: 0 0 0.8em; break-inside: avoid; }
.body2 p:first-child { color: var(--ink); font-weight: 500; }
.lk { display: block; margin: 0 0 14px; color: var(--grey); }

/* a line's field: its sentence, then its name, very large */
.fieldv { display: flex; flex-direction: column; align-items: flex-start; }
.fieldv .sent { color: inherit; opacity: 0.8; margin: 26px 0 0; font-weight: 500; }
.fieldv .big { margin-top: 0.12em; }

/* a chart and a timeline, drawn from their numbers */
.bars { width: 100%; margin: 26px 0 0; }
.bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--grey); }
.bar i { grid-column: 1 / -1; display: block; height: 18px; background: var(--faint); }
.bar.hl { color: var(--ink); }
.bar.hl i { background: var(--ink); }
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; margin: 26px 0 0; border-top: 1px solid var(--ink); }
.steps div { padding: 10px 12px 0 0; font-size: 13px; font-weight: 600; line-height: 1.35; }
.steps div span { display: block; margin-top: 4px; font-weight: 500; color: var(--grey); }
.swatches { display: flex; }
.swatches div { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 10px 10px; }

/* the caption: the study, its year, what it was */
.cap { width: 100%; margin: 14px 0 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.004em; line-height: 1.45; }
.cap:empty { display: none; }
.cap .who .g { font-weight: 500; color: var(--grey); margin-left: 0.4em; }
.cap .alt { display: block; max-width: 44em; margin-top: 2px; font-weight: 500; color: var(--grey); }
.cap .pal { display: inline-flex; gap: 3px; margin-left: 0.7em; vertical-align: 0.05em; }
.cap .pal i { display: block; width: 9px; height: 9px; }
.cap .act { flex: none; display: flex; gap: 18px; align-items: baseline; }
.cap .act .caps { opacity: 0.7; font-variant-numeric: tabular-nums; }

/* at rest: his statement, as the board sets a lead */
/* the statement in demi, a step under the bold it was (27 Sept, his
   "let's try just this one demi-bold") */
.rest .say { max-width: 17em; font-weight: 600; }
/* in the rooms' one statement style (6 Oct 2026): medium at 1.1, its size
   and tracking set by V.rest; ?statement=demi keeps the demi */
html.st-one:not([data-type="bold"]) .rest .say { font-weight: 500; line-height: 1.1; }
.say .nw { white-space: nowrap; }
.rest .links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 1.7em 0 0; font-size: 13px; font-weight: 600; }
.rest .links a { border-bottom: 1px solid var(--hair); }
.rest .links a:hover { border-bottom-color: var(--ink); }
.rest .prac { margin: 0 0 1.4em; color: var(--grey); }
.rest .prac span + span::before { content: " · "; }
/* his name and the contact, over the statement (4 Oct 2026): the links
   as the cover's head had them, a hairline under each, the address never
   in capitals */
.rest .prac.by { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 26px; }
.rest .prac.by a { color: var(--ink); border-bottom: 1px solid var(--hair); transition: border-color 0.2s ease; }
.rest .prac.by a:hover { border-bottom-color: var(--ink); }
.rest .prac.by a.em { text-transform: none; letter-spacing: 0; }

/* ── the stage: shelves and rooms on the right half ── */
#stage { position: fixed; top: 0; right: 0; bottom: 0; left: var(--stl); z-index: 5; pointer-events: none; }
body.staged #stage { pointer-events: auto; }
.shelf, .roomc { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.shelf::-webkit-scrollbar, .roomc::-webkit-scrollbar { display: none; }
/* no rule down a room's left edge (1 Oct 2026, his "on case studies we add a
   thin rule on the left of the content column but the rest of the time we
   dont have it - let's not add it on case studies so it's clean") */
.roomc { background: var(--paper); }
.roomc .sp { min-height: 100%; }
.flyer { position: fixed; z-index: 60; margin: 0; transform-origin: 0 0; pointer-events: none; will-change: transform, clip-path; }

/* ── a shelf: the frame every layout sits in (27 Sept, latest). How the
   pictures sit is the layout's (shelf-grid.css and its siblings, one per
   file that registers on window.XREF_SHELVES). The page keeps a running
   head on paper on the index's first line (the kind of entry, its name
   once the layout's own head has gone by, the switch between layouts,
   Close) and, at the foot, the next entry of the same kind, on paper,
   set at the size a shelf's name opens at ── */
.shelf { background: var(--paper); color: var(--ink); font-family: var(--sans); }
.sh-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: baseline; gap: 18px; height: 44px; padding: 27px 20px 0;
  background: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: -0.004em; line-height: 1; white-space: nowrap; }
.sh-bar { border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.shelf.moved .sh-bar { border-bottom-color: var(--hair); }
.sh-bar-k { flex: none; color: var(--grey); }
.sh-bar-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.25s ease; }
.shelf.past .sh-bar-t { opacity: 1; }
/* the switch: the layouts by their own words, the current one underlined */
.sh-sw { flex: none; display: flex; gap: 14px; margin-left: auto; font-weight: 500; color: var(--grey); }
.sh-sw a { padding: 2px 0; }
.sh-sw a:hover { color: var(--ink); }
.sh-sw a.on { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.sh-sw a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.sh-x { flex: none; margin-left: 12px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sh-sw:empty + .sh-x { margin-left: auto; }
.sh-x:hover { opacity: 0.6; }
.sh-x:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.sh-body { position: relative; }
/* the foot: the next entry, on paper, a glass tall, set as the stack sets
   a shelf's own head (.xk-head in shelf-stack.css; its values copied, so
   the name lands where it will stand) */
.sh-foot { position: relative; display: block; min-height: calc(100% - 44px); padding: 30px 20px 64px; color: inherit; cursor: pointer;
  -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; }
/* Next, and a rule beside it that fills as the next entry comes up */
.sh-foot-k { position: absolute; left: 20px; right: 20px; top: 2px; display: flex; align-items: center; gap: 12px; color: var(--grey); }
.sh-foot-k i { position: relative; flex: 1 1 auto; height: 1px; background: var(--hair); }
.sh-foot-k i::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--fp, 0)); transform-origin: 0 50%; }
.sh-foot-hl { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.sh-foot-t { flex: 1 1 auto; min-width: 0; margin: 0 0 0 -0.045em; font-size: 64px; font-weight: 700; letter-spacing: -0.05em; line-height: 0.98; transition: color 0.2s ease; }
.sh-foot-t.num { font-variant-numeric: tabular-nums; }
.sh-foot-n { flex: none; color: var(--grey); white-space: nowrap; }
.sh-foot-n b { margin-left: 0.5em; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sh-foot-l { display: block; margin: 18px 0 0; color: var(--ink); }
.sh-foot-s { display: block; max-width: 31em; margin: 16px 0 0; font-size: 19px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; color: var(--grey); text-wrap: pretty; }
.sh-foot-l + .sh-foot-s { margin-top: 5px; }
.sh-foot-s.lead { color: var(--ink); }
.sh-foot-s.lead .g { color: var(--grey); }
.sh-foot:hover .sh-foot-t { color: var(--grey); }
.sh-foot:focus-visible { outline: 1px solid var(--ink); outline-offset: -6px; }

/* ── stacked: a phone, or any glass too small for the index beside the
   stage. The focus is a band at the top that stays put; the index runs
   down the page. The stage is a sheet that rises over everything ── */
html.stack { --m: 16px; --fs: 12.5px; }
html.stack, html.stack body { height: auto; }
html.stack body { overflow: visible; overflow-x: clip; }
html.stack.sheet body { overflow: hidden; }
html.stack #mark { margin: 18px var(--m) 12px; }
html.stack .ixtop #mark { margin: 0; }
html.stack #focus { position: sticky; top: 0; left: auto; right: auto; bottom: auto; height: min(46svh, 400px); margin: 0; padding: 12px var(--m) 14px;
  background: var(--paper); border-bottom: 1px solid var(--hair); transition: opacity 0.28s ease; }
html.stack .layer { inset: 12px var(--m) 14px; }
html.stack #field, html.stack #wires, html.stack #wiresBack { display: none; }
html.stack #idx { position: static; width: auto; max-width: 900px; margin: 24px var(--m) 48px; padding: 0; overflow: visible; }
html.stack .grp { margin: 0 0 34px; }
html.stack .grp.list .e { padding: 0.14em 0; }
html.stack .grp.run .e { line-height: 1.7; }
html.stack .ixsw { gap: 22px; }
html.stack .ixsw a { padding: 6px 0; }
/* A on a phone: the strip under its line's name, Work one column */
html.stack[data-ix="a"] .grp[data-g="lines"] .items { display: block; }
html.stack[data-ix="a"] .e.ln { display: block; padding: 10px 0 11px; }
html.stack[data-ix="a"] .e.ln .nm { display: block; font-size: 30px; }
html.stack[data-ix="a"] .strip { margin-top: 9px; }
html.stack[data-ix="a"] .grp[data-g="work"] .items { columns: 1; }
html.stack[data-ix="a"] .grp[data-g="work"] .e { padding: 4px 0; }
html.stack[data-ix="a"] .grp.wall .items { font-size: 18px; }
html.stack[data-ix="a"] .fine, html.stack[data-ix="c"] .fine { columns: 2; column-gap: 18px; font-size: 11.5px; }
/* B on a phone: the same steps, the top two a little smaller */
html.stack[data-ix="b"] .grp[data-g="lines"] .items { font-size: 29px; }
html.stack[data-ix="b"] .grp[data-g="work"] .items { font-size: 20px; }
html.stack[data-ix="b"] .grp[data-g="capabilities"] .items, html.stack[data-ix="b"] .grp[data-g="tools"] .items { font-size: 11.5px; }
html.stack[data-ix="b"] .grp.run .e { line-height: inherit; }
html.stack[data-ix="b"] .grp[data-g="about"] .items, html.stack[data-ix="b"] .grp[data-g="years"] .items { line-height: 1.6; }
/* C on a phone: three frames across */
html.stack[data-ix="c"] .grp[data-g="work"] .items { gap: 14px 6px; }
html.stack[data-ix="c"] .tc { font-size: 11px; }
html.stack .cap { font-size: 12px; margin-top: 10px; }
html.stack .cap .alt { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html.stack .sent { font-size: 13px; }
html.stack .body2 { columns: 1; font-size: 12.5px; }
html.stack .rest .links { font-size: 12px; margin-top: 1em; }
html.stack .cc { font-size: 10.5px; }
html.stack #stage { left: 0; z-index: 40; height: 100%; height: 100dvh; transform: translateY(102%); visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0s linear 0.5s; }
html.stack body.staged #stage { transform: none; visibility: visible; transition: transform 0.5s var(--ease), visibility 0s; }
html.stack .sh-bar { gap: 14px; padding: 27px 16px 0; }
html.stack .sh-sw { gap: 12px; }
html.stack .sh-foot { padding: 24px 16px 48px; }
html.stack .sh-foot-k { left: 16px; right: 16px; }
html.stack .sh-foot-t { font-size: 40px; letter-spacing: -0.045em; }
html.stack .sh-foot-s { font-size: 16px; margin-top: 12px; }

/* D on a phone: one column that reads down, the lines two abreast, Work
   one list, the runs full width */
html.stack[data-ix="d"] #idx { display: block; }
html.stack[data-ix="d"] .dcols { overflow: visible; column-fill: balance; }
html.stack[data-ix="d"] .ixtop { margin-bottom: 26px; }
html.stack[data-ix="d"] .grp { margin-bottom: 30px; }
html.stack[data-ix="d"] .grp.dline .items { columns: 2; column-gap: 16px; }
html.stack[data-ix="d"] .grp.list .e.w:not(.ft) { padding: 0.12em 0; }
html.stack[data-ix="d"] .grp[data-g="about"] .items { columns: 2; column-gap: 16px; }
html.stack[data-ix="d"] .grp.run .e { line-height: inherit; }
html.stack[data-ix="d"] .grp.run .items { line-height: 1.6; }

/* the room keeps a study's own palette; its lines are words there too */
#stage .sp-line i { display: none; }

@media (prefers-reduced-motion: reduce) {
  #field, .layer, .cp .pic, .rise { transition: none; animation: none; }
  #idx .e, #idx .e .t, #idx .e .er, #idx .e .nr, #idx .pips i, #idx .e::before, #idx .e .nr::before, #idx .e .er::before, #idx .e::after, #idx .e .nr::after, #idx .e .er::after { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   INDEX E, THE CONTENTS PAGE (27 Sept 2026, latest). His magazine
   contents pages: a four-column grid with a hairline rule in every gutter
   from top to foot, numbered sections over a rule of ink, big numbers
   over names, pictures under them, dense lists beside airy features. The
   air falls in different places on purpose. What each section holds and
   why is above buildE in crossref2.js.
   ════════════════════════════════════════════════════════════════════ */
[data-ix="e"] #idx { --eg: 20px; }
/* E's index keeps fourteen pixels either side of its columns unclipped,
   the columns where they were, so a mark in the first or last column can
   stand out as far as the others do past the rules */
html:not(.stack)[data-ix="e"] #idx { left: calc(var(--m) - 14px); width: calc(var(--idxw) + 28px); padding-left: 14px; padding-right: 14px; }
[data-ix="e"] .ixtop { margin: 0 0 26px; }
[data-ix="e"] .eg { position: relative; }
/* the column rules in the cell grid's own weight (1 Oct 2026, his "are the
   vertical rules the same color as the horizontal ones? i feel like they're
   darker", then "match them to the lighter one"): 7.5% of ink, where they
   were the 13% hairline */
[data-ix="e"] .vr { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.075); pointer-events: none; }
[data-ix="e"] .vr1 { left: calc((100% - 3 * var(--eg)) / 4 + var(--eg) / 2); }
[data-ix="e"] .vr2 { left: calc((100% - 3 * var(--eg)) / 2 + var(--eg) * 1.5); }
[data-ix="e"] .vr3 { left: calc((100% - 3 * var(--eg)) * 3 / 4 + var(--eg) * 2.5); }
/* masonry (27 Sept): four columns that run on, each block under the last
   in its column, with the air between blocks the same everywhere */
[data-ix="e"] .emas { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--eg); align-items: start; }
[data-ix="e"] .ecol { display: flex; flex-direction: column; gap: 50px; min-width: 0; }
[data-ix="e"] .ecol > .c-feat + .c-feat { margin-top: -8px; }
/* the columns start on one line (4 Oct 2026, his "let's also top align
   the columns in the TOC section"); the lead studies of the third and
   fourth had been dropped 54px and 20px. ?stagger=on drops them again */
html[data-stagger="on"][data-ix="e"] .ecol:nth-child(3) > .c-feat:first-child { margin-top: 54px; }
html[data-stagger="on"][data-ix="e"] .ecol:nth-child(4) > .c-feat:first-child { margin-top: 20px; }
[data-ix="e"] .grp.ec { margin: 0; }
[data-ix="e"] .grp h2.eh { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px; padding: 0 0 8px;
  border-bottom: 0; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px;
  color: var(--ink); font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; }
[data-ix="e"] .eh b { font-weight: 700; margin-right: 0.8em; }
[data-ix="e"] .eh .n { color: var(--grey); }
[data-ix="e"] .e .dk { display: block; font-size: 10.5px; font-weight: 500; line-height: 1.4; letter-spacing: -0.003em; color: var(--grey); }
[data-ix="e"] .e .cr { display: block; color: var(--grey); }
[data-ix="e"] .e .cr.caps { font-size: 8.5px; }

/* 01: the lines down the first column, their lead studies across the rest */
[data-ix="e"] .e.el { display: block; padding: 0 0 19px; }
[data-ix="e"] .e.el .kk { display: flex; justify-content: space-between; margin: 0 0 3px; color: var(--grey); }
[data-ix="e"] .e.el .t { display: inline-block; margin-left: -0.04em; font-size: var(--fl, 28px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; white-space: nowrap; }
[data-ix="e"] .e.el .dk { margin: 6px 0 0; }
[data-ix="e"] .e.ef { display: block; }
[data-ix="e"] .e.ef .kk { display: block; margin: 0 0 9px; padding: 0 0 5px; border-bottom: 1px solid var(--hair); color: var(--grey); }
[data-ix="e"] .e.ef .fy { display: block; margin: 0 0 5px -0.035em; font-size: 31px; font-weight: 700; letter-spacing: -0.05em; line-height: 0.92; font-variant-numeric: tabular-nums; }
[data-ix="e"] .e.ef .t { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
/* the picture sits under the line's label and over the name (1 Oct), so
   its air is below it, and the sentence keeps a little from the name */
[data-ix="e"] .e.ef .th.fth { width: 100%; height: auto; aspect-ratio: var(--r, 1.4); margin: 2px 0 11px; }
[data-ix="e"] .e.ef .nr + .dk { margin-top: 8px; }
[data-ix="e"] .e.ef .cr { margin: 7px 0 0; }

/* 02: the rest of the work as a contents list, a leader of dots to the year */
[data-ix="e"] .elist { columns: 1; }
[data-ix="e"] .e.ew { display: block; break-inside: avoid; padding: 0 0 7px; }
[data-ix="e"] .e.ew .er { display: flex; align-items: last baseline; }
[data-ix="e"] .e.ew .t { flex: 0 1 auto; }
[data-ix="e"] .e.ew .ld { flex: 1 1 auto; min-width: 10px; height: 0; margin: 0 4px; border-bottom: 1px dotted rgba(0, 0, 0, 0.32); transform: translateY(-0.3em); }
[data-ix="e"] .e.ew .y { flex: none; }
[data-ix="e"] .e.ew .cr { margin: 1px 0 0 2.1em; font-size: 9.5px; line-height: 1.3; }
/* the reference system: a study's number, tabular, in the margin of its
   row and at the end of a feature's line name */
[data-ix="e"] .e .wn { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--grey); font-variant-numeric: tabular-nums; }
[data-ix="e"] .e.ew .wn { width: 2.1em; padding-top: 0.15em; align-self: first baseline; }
[data-ix="e"] .e.ef .kk { display: flex; justify-content: space-between; align-items: baseline; }
[data-ix="e"] .e.ef .kk .wn { color: var(--ink); }

/* 03: the years large, a square for each study, so the column is a chart */
[data-ix="e"] .e.ey { display: flex; align-items: baseline; gap: 9px; padding: 0 0 2px; }
[data-ix="e"] .e.ey .t { font-size: 21px; font-weight: 700; letter-spacing: -0.045em; line-height: 1.08; font-variant-numeric: tabular-nums; }
[data-ix="e"] .e.ey .pips { display: inline-flex; flex-wrap: wrap; gap: 2px; }
[data-ix="e"] .e.ey .pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); transition: background-color 0.18s ease calc(var(--d, 0) * 32ms); }
html[data-ix="e"] body.x .e.ey.on .pips i { background: var(--ink); }

/* 04: About, each section with its first sentence */
[data-ix="e"] .e.ea { display: block; padding: 0 0 13px; }
[data-ix="e"] .e.ea .t { font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; }
[data-ix="e"] .e.ea .dk { margin: 3px 0 0; }

/* 05: four figures large with the sentence each comes from, the rest run on */
[data-ix="e"] .ebig { display: block; margin: 0 0 24px; }
[data-ix="e"] .e.efig { display: block; }
[data-ix="e"] .e.efig + .e.efig { margin-top: 24px; }
[data-ix="e"] .e.efig .fn { margin-left: -0.035em; font-size: 34px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
[data-ix="e"] .e.efig .fu { margin-left: 0.25em; font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; }
[data-ix="e"] .e.efig .kk { display: block; margin: 9px 0 0; color: var(--ink); }
[data-ix="e"] .e.efig .dk { margin: 7px 0 0; }
[data-ix="e"] .e.efig .dk b { font-weight: 600; color: var(--ink); }
[data-ix="e"] .e.efig .cr { margin: 7px 0 0; }

/* the runs, set in the grid's own columns so the rules fall in the gutters */
[data-ix="e"] .erun { line-height: 1.5; font-weight: 500; }
[data-ix="e"] .erun .e { display: inline; }


/* 06: the five capabilities the most studies list, a size up */
[data-ix="e"] .ecaps { margin: 0 0 16px; }
[data-ix="e"] .e.ecap { display: block; break-inside: avoid; padding: 0 0 5px; font-size: 15px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.18; }
[data-ix="e"] .e.ecap .cnt { position: relative; top: -0.55em; margin-left: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0; vertical-align: baseline; color: var(--grey); }

/* 07: the five tools the most studies list, as a short bar chart */
[data-ix="e"] .etools { margin: 0 0 16px; }
[data-ix="e"] .e.etool { display: block; break-inside: avoid; padding: 0 0 10px; }
[data-ix="e"] .e.etool .er { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
[data-ix="e"] .e.etool .cnt { font-size: 10px; color: var(--grey); font-variant-numeric: tabular-nums; }
[data-ix="e"] .e.etool .bar { display: block; position: relative; height: 1px; margin: 4px 0 0; background: var(--hair); }
[data-ix="e"] .e.etool .bar i { position: absolute; left: 0; top: -1px; height: 3px; background: var(--ink); }

/* ── THE MARK IN E (27 Sept, later): three settings, on the switch by
   the index's (html[data-mk]). His words on the old band: "the black bars
   behind the text are nice but the padding is so tight it looks off ...
   is there another treatment ... editorial meets tech/system design?"
   An entry that stands on its own is marked on its name's own row (.nr,
   or .er where the name runs to a count or a year; a year and a
   capability are the row themselves), never across its picture and
   sentence. The runs stay bold in all three. #idx is in each selector
   so the band rules above cannot outrank these. ── */
html[data-mark="ink"][data-ix="e"] #idx .grp.ec .e:is(.el, .ef, .ew, .ey, .ea, .efig, .ecap, .etool) {
  background-image: none; box-shadow: none; padding-inline: 0; margin-inline: 0; color: var(--ink); -webkit-text-stroke: 0; }
[data-ix="e"] .e.el .nr { display: block; font-size: var(--fl, 28px); line-height: 1; }
[data-ix="e"] .e:is(.ef, .ea, .efig) .nr { display: block; }
/* how far a band stands above and below its row, by the row's size */
[data-ix="e"] .e.el { --pb: 0.2em; }
[data-ix="e"] .e.efig { --pb: 5px; }
[data-ix="e"] .e.ef { --pb: 5px; }
[data-ix="e"] .e:is(.ea, .ew, .etool, .ey, .ecap) { --pb: 3px; }
/* the text a mark turns to paper, and its greys to a light grey */
html[data-ix="e"]:is([data-mk="cell"], [data-mk="bar"]) #idx .grp.ec .e.ew .ld { transition: border-color 0.2s ease 0.06s; }
html[data-ix="e"]:is([data-mk="cell"], [data-mk="bar"]) #idx .grp.ec .e :is(.nr, .er, .cnt, .y) { transition: color 0.2s ease 0.06s; }
html[data-ix="e"]:is([data-mk="cell"], [data-mk="bar"]) body.x #idx .grp.ec .e.on.ew .ld, html[data-ix="e"]:is([data-mk="cell"], [data-mk="bar"]) #idx .grp.ec .e.lock.ew .ld { border-color: rgba(255, 255, 255, 0.5); }
html[data-ix="e"]:is([data-mk="cell"], [data-mk="bar"]) body.x #idx .grp.ec .e.on:is(.ew, .etool, .ecap) :is(.y, .cnt),
html[data-ix="e"]:is([data-mk="cell"], [data-mk="bar"]) #idx .grp.ec .e.lock:is(.ew, .etool, .ecap) :is(.y, .cnt) { color: rgba(255, 255, 255, 0.62); }
/* the mix (a hair of stroke and a paper halo) is for the runs; a top
   capability, tool or figure standing on its own takes the mark instead */
/* a reel stands on its own like the top five, so it takes the box and not
   the runs' hair of stroke */
html[data-mark="ink"][data-ix="e"] body.x #idx .grp.ec .e.on:is(.ecap, .etool, .efig, .ereel):not(.me):not(.lock) { -webkit-text-stroke: 0; text-shadow: none; }
html[data-ix="e"] #idx .grp.ec .e.lock:is(.el, .ef, .ew, .ey, .ea, .efig, .ecap, .etool) { background: none !important; box-shadow: none !important; color: var(--ink) !important; }
html[data-ix="e"] #idx .grp.ec .e.lock .dk, html[data-ix="e"] #idx .grp.ec .e.lock .cr, html[data-ix="e"] #idx .grp.ec .e.lock .kk { color: var(--grey) !important; }
/* where the mark leaves the words ink, a year stays grey, lit or held:
   the black band's white year was left on the grey (his "the years turn
   white and arent legible on the light grey") */
html[data-ix="e"]:is([data-mk="grey"], [data-mk="node"], [data-mk="box"]) #idx .grp.ec .e.lock .y { color: var(--grey) !important; }
html[data-ix="e"]:is([data-mk="grey"], [data-mk="node"], [data-mk="box"]) body.x #idx .grp.ec .e.on .y { color: var(--grey); }

/* CELL, the default: the band fills the entry's cell of the grid, out to
   the rules either side, so the gutter is its padding. It sweeps in from
   the left and leaves to the right; the words turn a beat after */
html[data-mk="cell"][data-ix="e"] #idx .grp.ec :is(.e .nr, .e .er, .e.ey, .e.ecap) { position: relative; z-index: 0; }
html[data-mk="cell"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e.ey, .e.ecap)::before {
  content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--pb)); bottom: calc(-1 * var(--pb)); left: calc(var(--eg) / -2 + 0.5px); right: calc(var(--eg) / -2 + 0.5px);
  background: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.36s cubic-bezier(0.45, 0, 0.2, 1); pointer-events: none; }
html[data-mk="cell"][data-ix="e"] body.x #idx .grp.ec :is(.e.on:is(.el, .ef, .ea, .efig) .nr, .e.on:is(.ew, .etool) .er, .e.on.ey, .e.on.ecap)::before,
html[data-mk="cell"][data-ix="e"] #idx .grp.ec :is(.e.lock:is(.el, .ef, .ea, .efig) .nr, .e.lock:is(.ew, .etool) .er, .e.lock.ey, .e.lock.ecap)::before { transform: scaleX(1); transform-origin: 0 50%; }
html[data-mk="cell"][data-ix="e"] body.x #idx .grp.ec :is(.e.on:is(.el, .ef, .ea, .efig) .nr, .e.on:is(.ew, .etool) .er, .e.on.ey .t, .e.on.ecap .t),
html[data-mk="cell"][data-ix="e"] #idx .grp.ec :is(.e.lock:is(.el, .ef, .ea, .efig) .nr, .e.lock:is(.ew, .etool) .er, .e.lock.ey .t, .e.lock.ecap .t) { color: var(--paper); }
html[data-mk="cell"][data-ix="e"] #idx .grp.ec .e:is(.ey, .ecap) .t { transition: color 0.2s ease 0.06s; }
html[data-mk="cell"][data-ix="e"] body.x #idx .grp.ec .e.on.ey .pips i, html[data-mk="cell"][data-ix="e"] #idx .grp.ec .e.lock.ey .pips i { background: var(--paper); }
/* a line's name gets air above and below, so its number and its
   sentence never touch a band */
[data-ix="e"] .e.el .kk { margin-bottom: 8px; }
[data-ix="e"] .e.el .dk { margin-top: 10px; }

/* GREY, the default (27 Sept, his "the cell in a grey AND keep the
   node ... a circle vs a square"): the cell's fill in a light grey, under
   the hairlines in weight, the words staying ink; and a small circle of ink on
   the rule at the row's left edge, arriving a beat after the fill */
html[data-mk="grey"][data-ix="e"] #idx .grp.ec :is(.e .nr, .e .er, .e.ey, .e.ecap) { position: relative; z-index: 0; }
html[data-mk="grey"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e.ey, .e.ecap)::before {
  content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--pb)); bottom: calc(-1 * var(--pb)); left: calc(var(--eg) / -2 + 0.5px); right: calc(var(--eg) / -2 + 0.5px);
  background: var(--hl); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.36s cubic-bezier(0.45, 0, 0.2, 1); pointer-events: none; }
html[data-mk="grey"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e.ey, .e.ecap)::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--eg) / -2 - 2.5px); width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--ink); transform: scale(0); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
html[data-mk="grey"][data-ix="e"] body.x #idx .grp.ec :is(.e.on:is(.el, .ef, .ea, .efig) .nr, .e.on:is(.ew, .etool) .er, .e.on.ey, .e.on.ecap)::before,
html[data-mk="grey"][data-ix="e"] #idx .grp.ec :is(.e.lock:is(.el, .ef, .ea, .efig) .nr, .e.lock:is(.ew, .etool) .er, .e.lock.ey, .e.lock.ecap)::before { transform: scaleX(1); transform-origin: 0 50%; }
html[data-mk="grey"][data-ix="e"] body.x #idx .grp.ec :is(.e.on:is(.el, .ef, .ea, .efig) .nr, .e.on:is(.ew, .etool) .er, .e.on.ey, .e.on.ecap)::after,
html[data-mk="grey"][data-ix="e"] #idx .grp.ec :is(.e.lock:is(.el, .ef, .ea, .efig) .nr, .e.lock:is(.ew, .etool) .er, .e.lock.ey, .e.lock.ecap)::after { transform: none; transition-delay: 0.12s; }

/* and in the runs, the entry under the pointer or held open takes the
   same grey, its words ink, where it was the black band (his "add the
   same grey cell highlight here ... so it's consistent across the
   TOC"). A run shares its lines, so the grey sits on the words with a
   little room either side rather than filling the cell; the entries a
   hover lights around it stay bold */
html:is([data-mk="grey"], [data-mk="box"])[data-ix="e"] #idx .erun .e { background-image: linear-gradient(var(--hl), var(--hl)); box-shadow: none;
  padding: 0.12em 0.26em 0.14em; margin: -0.12em -0.26em -0.14em; }
html:is([data-mk="grey"], [data-mk="box"])[data-ix="e"] body.x #idx .erun .e.on, html:is([data-mk="grey"], [data-mk="box"])[data-ix="e"] #idx .erun .e.lock { color: var(--ink) !important; box-shadow: none; }
html[data-mk="box"][data-ix="e"] #idx .erun .e { border-radius: var(--pr, 0px); }

/* BOX (1 Oct 2026, the default since his "make the box highlight and
   reels the default"; ?mark=grey for the name's row alone): his "can we
   try filling the entire
   'section' when things are selected or highlighted? right now it's just
   the headline...let's try the entire box". The grey's fill, now the whole
   entry: a lead study's label, picture, name and sentence; a line's count,
   name and sentence; a row and its credit; a figure and its source. It
   sweeps in from the left as the grey does, out to the column rules, and
   the node stays on the name's row. Each kind says how far the fill stands
   above its first words (--bt) and how much of the air under it the fill
   leaves (--bb). Two lit neighbours keep paper between them (his "instead
   of them touching and looking like one big section in places can we have
   some padding between?"): eight pixels between lines, six between About's
   sections and between reels, four or so in the dense rows */
html[data-mk="box"][data-ix="e"] #idx .grp.ec .e:is(.el, .ef, .ea, .efig, .ew, .etool, .ey, .ecap) { position: relative; z-index: 0; }
html[data-mk="box"][data-ix="e"] #idx .grp.ec .e:is(.el, .ef, .ea, .efig, .ew, .etool, .ey, .ecap)::before {
  /* a quarter of the gutter out either side, not to the rule (his "can we
     give it some padding between the columns? see how the grey connect on
     the left and right sides?"): half the gutter stays paper, the column
     rule down its middle and the node on it */
  content: ""; position: absolute; z-index: -1; top: calc(-1 * var(--bt, 6px)); bottom: var(--bb, 4px); left: calc(var(--eg) / -4); right: calc(var(--eg) / -4);
  background: var(--hl); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.36s cubic-bezier(0.45, 0, 0.2, 1); pointer-events: none;
  /* the soft corner the pictures have (his "round the corners of the
     boxes too to match everything else"), and none under ?round=0 */
  border-radius: var(--pr, 0px); }
html[data-mk="box"][data-ix="e"] body.x #idx .grp.ec .e.on:is(.el, .ef, .ea, .efig, .ew, .etool, .ey, .ecap)::before,
html[data-mk="box"][data-ix="e"] #idx .grp.ec .e.lock:is(.el, .ef, .ea, .efig, .ew, .etool, .ey, .ecap)::before { transform: scaleX(1); transform-origin: 0 50%; transition-delay: var(--wd, 0ms); }
[data-ix="e"] .e.el { --bt: 4px; --bb: 12px; }
[data-ix="e"] .e.ef { --bt: 9px; --bb: -9px; }
[data-ix="e"] .e.ea { --bt: 4px; --bb: 10px; }
[data-ix="e"] .e.ereel { --bt: 6px; --bb: -6px; }
[data-ix="e"] .e.efig { --bt: 6px; --bb: -8px; }
[data-ix="e"] .e.ew { --bt: 2px; --bb: 5px; }
[data-ix="e"] .e.etool { --bt: 3px; --bb: 7px; }
[data-ix="e"] .e.ey { --bt: 0px; --bb: 3px; }
[data-ix="e"] .e.ecap { --bt: 1px; --bb: 4px; }
/* the node, a circle of ink on the rule at the name's row, as the grey's,
   arriving a beat after its box */
html[data-mk="box"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er) { position: relative; }
html[data-mk="box"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e:is(.ey, .ecap) > .t)::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--eg) / -2 - 2.5px); width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--ink); transform: scale(0); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
html[data-mk="box"][data-ix="e"] #idx .grp.ec .e:is(.ey, .ecap) > .t { position: relative; }
html[data-mk="box"][data-ix="e"] body.x #idx .grp.ec :is(.e.on:is(.el, .ef, .ea, .efig) .nr, .e.on:is(.ew, .etool) .er, .e.on:is(.ey, .ecap) > .t)::after,
html[data-mk="box"][data-ix="e"] #idx .grp.ec :is(.e.lock:is(.el, .ef, .ea, .efig) .nr, .e.lock:is(.ew, .etool) .er, .e.lock:is(.ey, .ecap) > .t)::after { transform: none; transition-delay: calc(var(--wd, 0ms) + 0.12s); }

/* BAR: the band on the words, as before, with room around them. It
   stands out a quarter of the type either side and a fifth above and
   below, given back by margins so a band arriving never moves a word */
html[data-mk="bar"][data-ix="e"] #idx .grp.ec .e:is(.el, .ef, .ey, .ea, .efig, .ecap, .etool) .t,
html[data-mk="bar"][data-ix="e"] #idx .grp.ec .e.ew .er {
  background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat;
  background-size: 0% 100%; background-position: 100% 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.3s cubic-bezier(0.45, 0, 0.2, 1), color 0.18s ease 0.05s; }
html[data-mk="bar"][data-ix="e"] #idx .grp.ec .e:is(.el, .ef, .ey, .ea, .efig, .ecap, .etool) .t { padding: 0.14em 0.28em 0.16em; margin: -0.14em -0.28em -0.16em; }
html[data-mk="bar"][data-ix="e"] #idx .grp.ec .e.ew .er { padding: 2px 5px; margin: -2px -5px; }
/* a large figure's name is its number, set larger than the entry: the
   band is sized on the number's box, not the entry's small type */
html[data-mk="bar"][data-ix="e"] #idx .grp.ec .e.efig .t { display: inline-block; line-height: 1; padding: 5px 8px 6px; margin: -5px -8px -6px; }
html[data-mk="bar"][data-ix="e"] body.x #idx .grp.ec .e.on:is(.el, .ef, .ey, .ea, .efig, .ecap, .etool) .t,
html[data-mk="bar"][data-ix="e"] body.x #idx .grp.ec .e.on.ew .er,
html[data-mk="bar"][data-ix="e"] #idx .grp.ec .e.lock:is(.el, .ef, .ey, .ea, .efig, .ecap, .etool) .t,
html[data-mk="bar"][data-ix="e"] #idx .grp.ec .e.lock.ew .er {
  background-size: 100% 100%; background-position: 0 0; color: var(--paper); text-shadow: none; }
html[data-mk="bar"][data-ix="e"] body.x #idx .grp.ec .e.on.ey .pips i { background: var(--ink); }

/* NODE: no band. A square sits on the column's rule beside the entry, a
   point on an axis, and a rule of ink draws under its name */
html[data-mk="node"][data-ix="e"] #idx .grp.ec :is(.e .nr, .e .er, .e.ey, .e.ecap) { position: relative; }
html[data-mk="node"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e.ey, .e.ecap)::before {
  content: ""; position: absolute; top: 50%; left: calc(var(--eg) / -2 - 3.5px); width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--ink); transform: scale(0) rotate(45deg); transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
html[data-mk="node"][data-ix="e"] body.x #idx .grp.ec :is(.e.on:is(.el, .ef, .ea, .efig) .nr, .e.on:is(.ew, .etool) .er, .e.on.ey, .e.on.ecap)::before,
html[data-mk="node"][data-ix="e"] #idx .grp.ec :is(.e.lock:is(.el, .ef, .ea, .efig) .nr, .e.lock:is(.ew, .etool) .er, .e.lock.ey, .e.lock.ecap)::before { transform: none; }
html[data-mk="node"][data-ix="e"] #idx .grp.ec .e:is(.el, .ef, .ey, .ea, .efig, .ecap, .etool, .ew) .t {
  background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.34s cubic-bezier(0.45, 0, 0.2, 1) 0.04s; }
html[data-mk="node"][data-ix="e"] #idx .grp.ec .e.el .t { background-size: 0% 0.085em; }
html[data-mk="node"][data-ix="e"] body.x #idx .grp.ec .e.on .t, html[data-mk="node"][data-ix="e"] #idx .grp.ec .e.lock .t { background-size: 100% 2px; background-position: 0 100%; }
html[data-mk="node"][data-ix="e"] body.x #idx .grp.ec .e.on.el .t, html[data-mk="node"][data-ix="e"] #idx .grp.ec .e.lock.el .t { background-size: 100% 0.085em; }

/* E on a phone: the same blocks as one column, in reading order (each
   carries its place in style.order), the lines two across, no rules */
html.stack[data-ix="e"] .vr { display: none; }
html.stack[data-ix="e"] .emas { display: flex; flex-direction: column; gap: 44px; }
html.stack[data-ix="e"] .ecol { display: contents; }
html.stack[data-ix="e"] .ecol > .c-feat:first-child, html.stack[data-ix="e"] .ecol > .c-feat + .c-feat { margin-top: 0; }
html.stack[data-ix="e"] .elines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--eg); }

/* a figure's own study, pictured over it, set to the right as a tool's are */
#focus .fig .figpic { display: flex; flex-direction: column; align-items: flex-end; margin: 0 0 30px; }
#focus .fig .figpic .cc { margin: 9px 0 0; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
#focus .fig .figpic .cc .y { color: var(--grey); font-weight: 500; }

/* ── MOTION (27 Sept, his "subtle micro animations will help bring this
   to life") ─────────────────────────────────────────────────────────
   Nothing pops. Only under html.anim, which reduced motion never sets:
   - each group of the index rises and fades in the first time it is in
     view, a beat after the one before (crossref2.js, watchSeen);
   - in E the gutter rules draw down the page, each section's rule of ink
     draws across as its section arrives, the tools' bars grow to their
     counts and the capabilities step in;
   - a year's squares fill one after another when it lights;
   - a picture in the index settles as it loads;
   - in the open half the figure, the words and the caption lift in
     after the picture, a few hundredths of a second apart. */
html.anim #idx .grp { transition: opacity 0.5s ease, transform 0.65s var(--ease); }
html.anim #idx .grp:not(.seen) { opacity: 0; transform: translateY(12px); }
html.anim[data-ix="e"] .vr { transform-origin: 50% 0; animation: drawdown 1.2s var(--ease) 0.15s both; }
@keyframes drawdown { from { transform: scaleY(0); } }
html.anim[data-ix="e"] .grp.ec h2.eh { transition: background-size 0.9s var(--ease) 0.12s; }
html.anim[data-ix="e"] .grp.ec:not(.seen) h2.eh { background-size: 0% 1px; }
html.anim[data-ix="e"] .e.etool .bar i { transform-origin: 0 50%; transition: transform 0.9s var(--ease) calc(0.25s + var(--d, 0) * 70ms); }
html.anim[data-ix="e"] .grp.ec:not(.seen) .e.etool .bar i { transform: scaleX(0); }
html.anim[data-ix="e"] .e.ecap { transition: opacity 0.5s ease calc(0.15s + var(--d, 0) * 60ms), transform 0.6s var(--ease) calc(0.15s + var(--d, 0) * 60ms), background-size 0.26s cubic-bezier(0.45, 0, 0.2, 1); }
html.anim[data-ix="e"] .grp.ec:not(.seen) .e.ecap { opacity: 0; transform: translateX(-8px); }
html.anim #idx .th img { transform: scale(1.05); transition: opacity 0.45s ease, transform 1s var(--ease); }
html.anim #idx .th.in img { transform: none; }
/* the load pass (27 Sept, his "load and unload animation, etc."): in E
   the large words (a line's name, a feature's year, a big figure, a
   year of the chart) rise through masks of their own as their section
   is first seen, on the site's headline curve, one after another; and
   a feature's picture unveils down its frame. The clip is on the image,
   so the thumbnail's own observer still sees it arrive */
[data-ix="e"] .mk { display: inline-block; clip-path: inset(-0.3em -0.25em -0.32em -0.25em); }
[data-ix="e"] .mi { display: inline-block; }
html.anim[data-ix="e"] #idx .grp.ec .mi { transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--gd, 0ms) + 80ms + var(--i, 0) * 70ms); }
html.anim[data-ix="e"] #idx .grp.ec:not(.seen) .mi { transform: translateY(128%); }
html.anim[data-ix="e"] #idx .grp.ec .th img { transition: opacity 0.45s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--gd, 0ms) + 0.15s), clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--gd, 0ms) + 0.15s); }
html.anim[data-ix="e"] #idx .grp.ec:not(.seen) .th img { clip-path: inset(0 0 100% 0); }
html.anim .layer:not(.out) :is(.say, .lk, .fig .big, .fig .sent, .fig .lbl, .figpic) { animation: lift 0.5s var(--ease) both; }
html.anim .layer:not(.out) .fig .big { animation-delay: 0.04s; }
html.anim .layer:not(.out) :is(.fig .sent, .fig .lbl) { animation-delay: 0.1s; }
html.anim .layer:not(.out) .cap { animation: lift 0.5s var(--ease) 0.14s both; }
@keyframes lift { from { opacity: 0; transform: translateY(10px); } }

/* ── THE OPEN HALF, FILLED (27 Sept, his "more filled in, big editorial
   feeling to balance the feel of the TOC"). A study's picture runs to
   the edges of the half, top to foot and out to the window's edge, with
   its credit on a strip of paper under it; a line, a year or a
   capability is a mosaic of its studies, butted, no gutters. The index
   stays dense and small; this is its opposite. ── */
.layer.bleed { position: fixed; top: 0; right: 0; bottom: 0; left: var(--stl); align-items: stretch; justify-content: flex-start; }
.layer.bleed .main { width: 100%; }
.layer.bleed .cap { margin: 0; padding: 16px var(--m) 0 20px; }
.pic.cov { overflow: hidden; }
.pic.cov img { object-fit: cover; }
.pic.cov img.hi { opacity: 0; transition: opacity 0.3s ease; }
.pic.cov img.hi.in { opacity: 1; }
.mos { position: relative; }
.mos .tile { position: absolute; overflow: hidden; }
.mos .tile .tc { position: absolute; left: 14px; bottom: 12px; right: 14px; color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.25); pointer-events: none; }
.mos .tile .tc .y { color: rgba(255, 255, 255, 0.72); font-weight: 500; }
html.anim .layer.bleed:not(.out) .fillpic { animation: unveil 0.6s var(--ease) both; }
html.anim .layer.bleed:not(.out) .fillpic img { animation: settle 1.2s var(--ease) both; }
html.anim .layer.bleed:not(.out) .mos .tile { animation: unveil 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
html.anim .layer.bleed:not(.out) .mos .tile img { animation: settle 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes unveil { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.06); } }

/* the open half at rest: black, the words light (27 Sept, his "let's try
   making this black with lighter text"). The field under it rises when
   the half comes to rest and falls away, quicker, when anything is
   hovered; the statement keeps its two tones, paper and a light grey */
#field:not(.on) { transition-duration: 0.36s; }
.layer.dark { --lc: var(--paper); }
.layer.dark .say { color: var(--paper); }
.layer.dark .say .g { color: rgba(255, 255, 255, 0.46); }
.layer.dark .rest .prac { color: rgba(255, 255, 255, 0.46); }
.layer.dark .rest .prac.by a { color: var(--paper); border-bottom-color: rgba(255, 255, 255, 0.28); }
.layer.dark .rest .prac.by a:hover { border-bottom-color: var(--paper); }
.layer.dark .rest .links a { color: var(--paper); border-bottom-color: rgba(255, 255, 255, 0.28); transition: border-color 0.2s ease; }
.layer.dark .rest .links a:hover { border-bottom-color: var(--paper); }

/* ── THE PREVIEW (27 Sept): a line, a year or a capability shows its
   shelf on hover, built in the open half exactly as the stage will hold
   it. Its running head shows only the kicker until a click makes it the
   shelf; then the switch and Close arrive ── */
.layer.pvl .main { position: absolute; inset: 0; max-width: none; }
.sh-sw, .sh-x { transition: opacity 0.3s ease 0.08s; }
.shelf.pv .sh-sw, .shelf.pv .sh-x { opacity: 0; pointer-events: none; transition: none; }

/* ── THE EDITORIAL PASS (27 Sept, his "an even more editorial look ...
   editorial meets tech/system design") ─────────────────────────────
   - the half at rest is the cover, so its head carries a folio of the
     index's own counts, set as the index sets its heads (name, count),
     on the line the index's own head sits on. (Ticks on the ends of E's
     gutter rules were tried and read as stray hyphens.) */
.layer .folio { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-wrap: wrap; gap: 4px 26px;
  color: rgba(255, 255, 255, 0.46); pointer-events: none; }
.layer .folio b { margin-left: 0.45em; font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
.layer:not(.dark) .folio { display: none; }
html.anim .layer.dark:not(.out) .folio { animation: lift 0.6s var(--ease) 0.25s both; }
/* the folio as the contact (1 Oct 2026): the links in paper, a hairline
   under each as the statement's links had; the address never in capitals */
.layer .folio.contact { pointer-events: auto; }
.layer .folio.contact a { color: var(--paper); border-bottom: 1px solid rgba(255, 255, 255, 0.28); transition: border-color 0.2s ease; }
.layer .folio.contact a:hover { border-bottom-color: var(--paper); }
.layer .folio.contact a.em { text-transform: none; letter-spacing: 0; }

/* ════════════════════════════════════════════════════════════════════
   INDEX F, THE BACK OF THE BOOK (27 Sept 2026, a lever pull). The
   contents in the first column, the catalogue's numbered rows; the index
   across the other three, a magazine's A to Z with a legend of kinds and
   each name's locators after it, the way a book gives its pages. What F
   is and why is above buildF in crossref2.js.
   ════════════════════════════════════════════════════════════════════ */
[data-ix="f"] #idx { --eg: 20px; }
[data-ix="f"] .ixtop { margin: 0 0 14px; }
[data-ix="f"] .flegend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 22px; color: var(--grey); font-size: 9px; }
[data-ix="f"] .flegend i { margin-right: 5px; font-style: normal; color: var(--ink); }
[data-ix="f"] .fbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--eg); align-items: start; }
[data-ix="f"] .grp.fcon, [data-ix="f"] .grp.findex { margin: 0; }
[data-ix="f"] .grp.findex { padding-left: var(--eg); border-left: 1px solid var(--hair); margin-left: calc(var(--eg) / -2); }
[data-ix="f"] .grp h2.fh { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; padding: 0 0 8px;
  border-bottom: 0; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 1px; color: var(--ink); font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; }
[data-ix="f"] .fh b { font-weight: 700; margin-right: 0.8em; }
[data-ix="f"] .fh .n { color: var(--grey); }
/* the contents: number, year, the study and its discipline, ruled */
[data-ix="f"] .e.fw { display: grid; grid-template-columns: 2.2em 2.9em minmax(0, 1fr); align-items: first baseline; padding: 6px 0 7px; border-bottom: 1px solid var(--hair); }
[data-ix="f"] .e.fw .fn { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
[data-ix="f"] .e.fw .fy { font-size: 10px; font-weight: 500; color: var(--grey); font-variant-numeric: tabular-nums; }
[data-ix="f"] .e.fw .t { font-size: 12px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.25; }
[data-ix="f"] .e.fw .fd { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; line-height: 1.3; color: var(--grey); }
/* the index: three columns with a rule in each gutter, a letter over its
   names, a shape for the kind, the locators after the name */
[data-ix="f"] .fcols { columns: 3; column-gap: var(--eg); column-rule: 1px solid var(--hair); }
[data-ix="f"] .fblock { margin: 0 0 6px; }
[data-ix="f"] .flh { margin: 10px 0 5px; padding: 0 0 4px; border-bottom: 1px solid var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; break-after: avoid; }
[data-ix="f"] .fblock:first-child .flh { margin-top: 6px; }
[data-ix="f"] .e.ft { display: grid; grid-template-columns: 1.15em minmax(0, 1fr); align-items: first baseline; padding: 2px 0 3px; break-inside: avoid; }
[data-ix="f"] .e.ft .fk { font-size: 8px; color: var(--ink); line-height: 1; }
[data-ix="f"] .e.ft .t { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
[data-ix="f"] .e.ft .fl { display: block; margin-top: 1px; font-size: 9.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0.02em; color: var(--grey); font-variant-numeric: tabular-nums; }
[data-ix="f"] .floc { cursor: pointer; transition: color 0.15s ease; }
[data-ix="f"] .floc:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }
/* marks in F: the grey of E's default, on the name, the words ink; the
   black band and its white words stand down */
html[data-ix="f"] #idx .e { background-image: none !important; box-shadow: none !important; padding-inline: 0 !important; margin-inline: 0 !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
html[data-ix="f"] #idx .e.on, html[data-ix="f"] #idx .e.lock { color: var(--ink) !important; }
html[data-ix="f"] #idx .e :is(.fy, .fd, .fl) { color: var(--grey) !important; }
html[data-ix="f"] #idx .e .t { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 0% 100%; background-position: 100% 0;
  padding: 0.1em 0.25em 0.12em; margin: -0.1em -0.25em -0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.3s cubic-bezier(0.45, 0, 0.2, 1); }
html[data-ix="f"] body.x #idx .e.on .t, html[data-ix="f"] #idx .e.lock .t { background-size: 100% 100%; background-position: 0 0; }
/* F on a phone: contents, then the index in two columns */
html.stack[data-ix="f"] .fbody { display: block; }
html.stack[data-ix="f"] .grp.findex { margin: 36px 0 0; padding: 0; border: 0; }
html.stack[data-ix="f"] .fcols { columns: 2; }

/* ── the texture, one to a section (27 Sept, a lever pull): set in type on
   a canvas inside each of E's sections by crossref2.js, exactly the
   section's measure, half a line over and under, never into a gutter.
   Behind everything in the section: a lit cell's grey still covers it */
/* a section is its own layer, so the canvas stays over the paper even
   stacked on a phone, where the index is not a layer of its own */
html[data-ix="e"]:not([data-tx="none"]) #idx .grp.ec { position: relative; isolation: isolate; }
#idx .grp.ec > .stx { position: absolute; left: 0; top: -8px; width: 100%; height: calc(100% + 16px); z-index: -1; pointer-events: none; }
html[data-tx="none"] #idx .stx { display: none; }
/* its switch takes a line of its own, under Mark */
.txsw { flex-basis: 100%; justify-content: flex-end; }

/* ── the credits (30 Sept): the footer's brands as entries, a cell each,
   in the work list's own type (typed, his pick), or each brand's mark in
   ink under ?credits=marks; one that reaches no study yet is inert ── */
[data-ix="e"] #idx .e.ecap.ecrd { font-size: inherit; font-weight: 400; letter-spacing: -0.003em; line-height: 1.27; padding: 0.55em 0 0.6em; }
[data-ix="e"] #idx .e.ecrd.bare { pointer-events: none; }
[data-ix="e"] #idx .e.ecrd img { display: block; height: var(--mh, 15px); width: auto; max-width: 100%; filter: brightness(0); }
[data-ix="e"] #idx .e.ecrd img.asis { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }

/* ── soft corners (30 Sept): every picture box rounded just enough to
   take the edge off, 4px his pick (?round=0 squares them again); each
   box already clips its picture ── */
html[data-round="on"] :is(.th, .pic, .tpic, .xs-pic, .xk-pic, .sp-pic) { border-radius: var(--pr, 4px); }
/* and the room's solid blocks, the black field of figures and the study's
   colour under its quote (2 Oct 2026, his "add the border radius to it
   that the others have") */
html[data-round="on"] :is(.sp-black, .sp-field) { border-radius: var(--pr, 4px); }
/* and the palette strip's outer corners (his "yes, round the outer corners
   too"): the strip's blocks touch, so the box that holds them is rounded
   and clips them, and the corners between blocks stay square. The four
   looks that are blocks of colour (blocks, paired, overlay, cycle); the
   lightness chart is bars on paper */
html[data-round="on"] :is(.sp-pbk, .sp-ppr, .sp-pov, .sp-pcy) { border-radius: var(--pr, 4px); overflow: hidden; }

/* ── the grid (30 Sept, a lever pull, ?grid=on): E's sections ruled into
   cells, fainter than the gutter rules, under everything, so a lit
   row's fill covers its cell's rule as a selected cell does ── */
html[data-grid="on"][data-ix="e"] #idx .eg { isolation: isolate; }
#idx .egrid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
#idx .egrid i { position: absolute; height: 1px; background: rgba(0, 0, 0, 0.075); }

/* ── Faux Reel, running (27 Sept): the product fills whatever box its
   picture would have, over paper, in any layout, the focus and its room */
sizzle-reel.live { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; z-index: 1; }

/* the Next panel for a line: the run its head is set in (shelf-stack.css
   .xk-stand), at the shelf's --stand, so the scroll into it lands true */
.sh-foot-t.stand, html.stack .sh-foot-t.stand { max-width: 17em; margin: 0; font-size: var(--stand, 35px); font-weight: 700; letter-spacing: var(--stand-tr, -0.042em); line-height: 1.02; text-wrap: pretty; }
html.stack .sh-foot-hl:has(.stand) { flex-wrap: wrap; row-gap: 14px; }
html.stack .sh-foot-t.stand { flex-basis: 100%; }
.sh-foot-t.stand .g { color: var(--grey); }
/* the fourth switch row, Motion, sits under Texture */
.mosw { flex-basis: 100%; justify-content: flex-end; }

/* ── THE HOME (27 Sept, his "when a user hits the homepage we should
   allow them to keep scrolling on the right into the work vs it being a
   deadend"). On a desk the half at rest scrolls, in the stage's own box,
   so its foot lands where the first line's shelf sets its head. The
   statement is its first glass, set where it stood; the foot is on
   paper, and its paper reaches up to the running head's line, so the
   last of the black has gone when it carries on ── */
.layer.home { position: fixed; top: 0; right: 0; bottom: 0; left: var(--stl); display: block; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: none; }
.layer.home::-webkit-scrollbar { display: none; }
.layer.home .main { max-width: none; }
/* --peek is how much of the paper foot shows at the bottom of the
   cover's screen: the site's margin, since the black became a card in it
   (1 Oct 2026; it was 44px). The cover keeps its words above it */
.layer.home { --peek: var(--m); }
.hm-cover { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  height: 100vh; height: 100dvh; padding: var(--m) calc(var(--m) * 2) calc(var(--m) + var(--peek)) calc(var(--gut) / 2); }
/* the words keep 20px inside the black: the head's links a margin below
   its top edge, the statement a margin above its foot */
.layer.home .folio { top: calc(var(--m) * 2); left: calc(var(--gut) / 2); right: calc(var(--m) * 2); }
.hm-foot { min-height: calc(100vh - var(--peek)); min-height: calc(100dvh - var(--peek)); background: var(--paper); color: var(--ink); box-shadow: 0 calc(-1 * var(--peek)) 0 var(--paper); }
/* its words land where the first shelf sets its head, under the running
   head's 44px line (4 Oct 2026): since --peek became the 20px margin the
   foot's top lands 24px higher than a shelf foot's, so its padding takes
   the difference back. They had been landing 24px above the head */
.hm-foot { padding-top: calc(30px + 44px - var(--peek)); }
/* and its label ("What I Make") on the running head's own line, 27px, so
   when the shelf's head comes up with the same words they do not move */
.hm-foot .sh-foot-k { top: calc(27px - var(--peek)); }

/* ── NUMBER LABELS (27 Sept, his "there are a lot of number labels on
   things - it's turning into an 'ai-tell' out in the design community
   so i would like to take a pass at reducing/removing the ones not
   needed"). The rule: a number stays when it is data (a count, a year,
   a figure, the lit readout "3 /6"); one that only labels (a group's
   01, a line's 01, a study's own number) comes off. The room's go in
   study-panel.css. ?nums=on puts them back, for comparing. The §
   links on a shelf's credits stay: they take the reader to a place ── */
html[data-ix="e"]:not([data-nums="on"]) :is(.eh b, .e.el .kk > span:not(.cnt), .e .wn) { display: none; }
html[data-ix="e"]:not([data-nums="on"]) .e.el .kk { justify-content: flex-end; }
html:not([data-nums="on"]) .xk-no { display: none; }
html:not([data-nums="on"]) :is(.xs-cap, .xs-ti) > .n { display: none; }

/* the work cards lead with the name, not the year (27 Sept, his "Ivy Park
   by Beyonce is WAY more important than the year...in fact the year
   really isnt relevant"): the name set as the year was, bold and tight,
   its size fitted in crossref2.js (fitFeat); the year comes off the card,
   and stays in the Years column and on the work list */
[data-ix="e"] .e.ef .fy { display: none; }
[data-ix="e"] .e.ef .t { display: block; margin-left: -0.03em; font-size: 22px; font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }

/* his weights from the tweaks panel (27 Sept): the index's big words in
   demi (the line names, the work cards' names, the years, the figures);
   the line names and card names at most 26px, in crossref2.js */
html[data-ix="e"] #idx :is(.e.el .t, .e.ef .t, .e.ey .t, .e.efig .fn) { font-weight: 600; }

/* the shelf's frame and foot, as the rooms' type (27 Sept; the stack's
   own in shelf-stack.css): the running head medium, its label the small
   caps (8.5px bold, tracked wide), the layouts' words regular; the
   foot's name and run in demi, its sentence 15px medium, its labels the
   small caps, all as the stack sets the shelf they carry on into */
.sh-bar { font-weight: 500; }
.sh-bar-k { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; }
.sh-sw { font-weight: 400; }
.sh-foot-t, .sh-foot-t.stand, html.stack .sh-foot-t.stand { font-weight: 600; }
/* a line's run in a foot keeps to its shelf's head (shelf-stack.css), so
   the carry-on still lands: the rooms' one statement style since 6 Oct */
html.st-one:not([data-type="bold"]) .sh-foot-t.stand { font-weight: 500; line-height: 1.1; }
.sh-foot-s { font-size: 15px; font-weight: 500; }
html.stack .sh-foot-s { font-size: 14px; }
.sh-foot-n, .sh-foot-k, .sh-foot-l { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; }
.sh-foot-n b { font-weight: 700; }

/* the index's small type, as the rooms' (27 Sept, the same pass): every
   small-caps label (a section's head, a card's kicker, a credit) in the
   rooms' label, 8.5px bold tracked 0.2em; an entry's grey sentence in
   the rooms' small size, 12px regular. The index's big words were set
   in demi with his tweaks */
html[data-ix="e"] #idx .grp h2.eh { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; }
html[data-ix="e"] #idx .e .kk.caps, html[data-ix="e"] #idx .e .cr.caps { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; }
html[data-ix="e"] #idx .e .dk { font-size: 12px; font-weight: 400; line-height: 1.45; }

/* ════════════════════════════════════════════════════════════════════
   CARDS (1 Oct 2026, a lever pull, ?cards=on). His references were
   xAI's Grok Voice pages, "these light/warm containers with content in
   them", and his ask: "what would a version on the TOC/index look like
   with cards? ... if it would make the TOC look a little more modern yet
   still keep that dense busy look". E's sections and order, unchanged;
   each section is a warm card with no border, no shadow and no rules
   inside, at the site's 4px corner, the cards packed ten pixels apart so the page stays busy, the pictures rounded
   inside them. What the mark lights lifts onto white, as a chip sits in
   one of those cards, with no node, since there are no rules for one to
   sit on. The cell grid stays out of the cards unless ?grid=on.
   ════════════════════════════════════════════════════════════════════ */
html[data-cards="on"][data-ix="e"] #idx { --eg: 10px; --card: #F4F3EF; --lift: #fff; }
html[data-cards="on"][data-ix="e"] .vr { display: none; }
html[data-cards="on"][data-ix="e"] .ixtop { margin-bottom: 18px; }
html[data-cards="on"][data-ix="e"] .ecol { gap: 10px; }
html[data-cards="on"][data-ix="e"] .ecol > .c-feat + .c-feat,
html[data-cards="on"][data-ix="e"] .ecol:nth-child(3) > .c-feat:first-child,
html[data-cards="on"][data-ix="e"] .ecol:nth-child(4) > .c-feat:first-child { margin-top: 0; }
/* the corners are the site's soft corner, his 4px (?round=N moves them
   with every picture) */
html[data-cards="on"][data-ix="e"] .grp.ec { padding: 15px 15px 13px; border-radius: var(--pr, 4px); background: var(--card); }
html.stack[data-cards="on"][data-ix="e"] .emas { gap: 10px; }
/* no thin rules in a card (his "let's remove any thin rules in the
   cards"): the section's head is its name and count alone, a lead study's
   line name sits over its year with no hairline, and the work list runs
   without its dotted leaders */
html[data-cards="on"][data-ix="e"] .grp h2.eh { margin-bottom: 14px; padding-bottom: 0; background: none; }
/* a lead study: its picture rounded inside the card */
html[data-cards="on"][data-ix="e"] .e.ef .kk { padding-bottom: 0; border-bottom: 0; }
html[data-cards="on"][data-ix="e"] .e.ef .th.fth { border-radius: var(--pr, 4px); }
html[data-cards="on"][data-ix="e"] .grp.ec .e.el:last-child { padding-bottom: 4px; }
/* the tools' bars as tracks, the years' pips as dots on the card */
html[data-cards="on"][data-ix="e"] .e.etool .bar { height: 4px; margin-top: 5px; border-radius: 2px; background: var(--lift); }
html[data-cards="on"][data-ix="e"] .e.etool .bar i { top: 0; height: 4px; border-radius: 2px; }
html[data-cards="on"][data-ix="e"] .e.ey .pips i { background: var(--lift); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
html[data-cards="on"][data-ix="e"] body.x .e.ey.on .pips i { box-shadow: none; }
html[data-cards="on"][data-ix="e"] #idx .grp.ec .e.ew .ld { border-bottom-color: transparent !important; }

/* the mark, as a lift: the row's cell fills white and rounds, inside the
   card's padding, and the node that sat on a column rule goes */
html[data-cards="on"][data-mk="grey"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e.ey, .e.ecap)::before {
  left: -7px; right: -7px; border-radius: var(--pr, 4px); background: var(--lift); }
html[data-cards="on"][data-mk="grey"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e.ey, .e.ecap)::after { display: none; }
html[data-cards="on"][data-mk="grey"][data-ix="e"] #idx .erun .e { background-image: linear-gradient(var(--lift), var(--lift)); border-radius: var(--pr, 4px); }
html[data-cards="on"][data-mk="cell"][data-ix="e"] #idx .grp.ec :is(.e:is(.el, .ef, .ea, .efig) .nr, .e:is(.ew, .etool) .er, .e.ey, .e.ecap)::before { left: -7px; right: -7px; border-radius: var(--pr, 4px); }
/* the grid, when asked for, over the cards and inside them */
html[data-cards="on"] #idx .egrid { z-index: 1; }
html[data-cards="on"] #idx .egrid i { background: rgba(0, 0, 0, 0.06); }
/* a card keeps its texture, when asked for, inside its own rounded edge */
html[data-cards="on"][data-ix="e"] #idx .grp.ec { overflow: hidden; }
/* the wires run over the cards and the type has no halo, as on the page
   itself since 1 Oct; inside a card, nothing even the ink mark asks for */
html[data-cards="on"][data-ix="e"] #idx * { text-shadow: none !important; }

/* ── faux reels (1 Oct 2026, ?reels=on): a term whose studies' pictures
   look like it stands in its section as a feature, its picture a
   <sizzle-reel> cutting through them, its kind over it, its name and its
   homepage line under it ── */
[data-ix="e"] .grp.ec .e.ereel { display: block; margin: 16px 0 18px; padding: 0; }
[data-ix="e"] .e.ereel .kk { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; color: var(--grey); }
[data-ix="e"] .e.ereel .kk .wn { color: var(--ink); }
[data-ix="e"] .e.ereel .rl { display: block; width: 100%; margin: 0 0 10px; overflow: hidden; border-radius: var(--pr, 4px); background: #F2F2F0; }
[data-ix="e"] .e.ereel sizzle-reel { display: block; width: 100%; }
[data-ix="e"] .e.ereel .t { font-size: 17px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
[data-ix="e"] .e.ereel .dk { margin: 6px 0 0; }
[data-ix="e"] .e.ereel { --pb: 4px; }
/* a reel straight under its section's head */
[data-ix="e"] .grp.ec h2.eh + .e.ereel { margin-top: 2px; }

/* the lab's own tools stay off a visitor's page (1 Oct 2026, when this
   became the homepage): the sizzle's row of versions under a cover shows
   only with the lab flag (a dev host, or ?lab) */
html:not([data-lab]) .szl-row { display: none; }

/* ── the small labels in title case (1 Oct 2026): his "all the labels that
   are ALL CAPS and tracked out...can we look at them just title case and
   normal tracking?". Out of capitals a label loses the cap height that
   carried it at 8.5px, so it steps up to 11px, demi; a credit or a source,
   grey under its entry, a weight lighter. ?labels=caps for the capitals,
   ?labels=sentence for the words as written. The words are cased in
   crossref2.js by the rooms' rule (StudyPanel.label), which keeps the
   short joining words low ("Spotted by") where a stylesheet's capitalize
   cannot ── */
html:is([data-labels="title"], [data-labels="sentence"]) #idx :is(.grp h2.eh, .e .kk.caps, .e .cr.caps) { font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.25; text-transform: none; }
/* and on the right (his "yea do the rooms too - i like it more"): the
   cover's practice line and folio, a shelf's running head and foot, the
   stack's, grid's and spread's labels, a figure's. The rooms' own are in
   study-panel.css */
html:is([data-labels="title"], [data-labels="sentence"]) .caps { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html:is([data-labels="title"], [data-labels="sentence"]) #idx .e .cr.caps { font-weight: 500; }
html:is([data-labels="title"], [data-labels="sentence"]) #idx .grp h2.eh b { margin-right: 0.5em; }

/* ── no rules under the labels (2 Oct 2026, his "can we try removing
   these thin rules under the section labels? i'm not sure we need
   them"): a section's head and a feature's line stand on air, and the
   room each rule kept above itself comes out with it, the way the cards
   took theirs off. ?rules=on draws them again ── */
html[data-rules="off"][data-ix="e"] .grp h2.eh { padding-bottom: 0; background: none; }
html[data-rules="off"][data-ix="e"] .e.ef .kk { padding-bottom: 0; border-bottom: 0; }

/* ── a line's count locked up with its name (2 Oct 2026, his "can we
   try moving these project number/labels locked up with the
   category?"): the label's size and grey, just after the name, its top
   on the name's cap height, the way the capabilities carry theirs. The
   row it stood on above the name goes, unless ?nums=on still has a
   number for it. ?count=above sets it back on that row. Then his "can
   we try making the numbers even smaller?": 9px, the size the
   capabilities' counts are, down from the label's 11 (--cn), and the
   lift follows the size so the top stays on the cap height ── */
html[data-count="name"][data-ix="e"] .e.el .nr { --cn: 9px; white-space: nowrap; }
html[data-count="name"][data-ix="e"] .e.el .nr .cnt { position: relative; top: calc((var(--fl, 26px) - var(--cn)) * -0.7); margin-left: 3px;
  font-size: var(--cn); font-weight: 600; letter-spacing: 0; line-height: 1; vertical-align: baseline; color: var(--grey); font-variant-numeric: tabular-nums; }
html[data-count="name"][data-ix="e"]:not([data-nums="on"]) .e.el .kk { display: none; }
html[data-count="name"][data-mk="cell"][data-ix="e"] body.x #idx .grp.ec .e.on.el .nr .cnt,
html[data-count="name"][data-mk="cell"][data-ix="e"] #idx .grp.ec .e.lock.el .nr .cnt { color: rgba(255, 255, 255, 0.62); }
/* with the row gone the name is the entry's first words, so a lit box
   stands a little more above it and leaves a little more under the
   sentence, keeping the eight pixels between two lit lines */
html[data-count="name"][data-ix="e"] .e.el { --bt: 6px; --bb: 14px; }

/* a foot's head as the shelf it carries on into (11 Oct 2026, SHELF HEAD
   in shelf-stack.css): the name at the glass's --stand, as a room's
   section head, and the line as the body. ?shelfhead=title keeps the name
   in a room title's tracking and leading, fitted by the stack's fitTitle,
   and the line in the statement; ?shelfhead=old the 64px name and the
   15px line */
html.st-one:not([data-type="bold"]):not(.sh-old):not(.sh-title) .sh-foot-t:not(.stand) { font-size: var(--stand, 35px); font-weight: 500; letter-spacing: var(--stand-tr, -0.045em); line-height: 1.1; }
html.st-one:not([data-type="bold"]):not(.sh-old):not(.sh-title) .sh-foot .sh-foot-s { max-width: 34em; margin-top: 14px; font-size: 13px; font-weight: 400; letter-spacing: -0.004em; line-height: 2; color: var(--ink); }
html.st-one:not([data-type="bold"]):not(.sh-old):not(.sh-title) .sh-foot .sh-foot-s .g { color: inherit; }
html.st-one:not([data-type="bold"]):not(.sh-old):not(.sh-title) .sh-foot .sh-foot-l + .sh-foot-s { margin-top: 2px; }
html.st-one.sh-title:not([data-type="bold"]):not(.sh-old) .sh-foot-t:not(.stand) { letter-spacing: -0.045em; line-height: 0.9; }
html.st-one.sh-title:not([data-type="bold"]):not(.sh-old) .sh-foot .sh-foot-s { max-width: none; margin-top: 18px; font-size: var(--stand, 35px); font-weight: 500; letter-spacing: var(--stand-tr, -0.045em); line-height: 1.1; }
html.st-one.sh-title:not([data-type="bold"]):not(.sh-old) .sh-foot .sh-foot-l + .sh-foot-s { margin-top: 6px; }