/* ── A SHELF AS A STACK OF OPENERS (27 Sept 2026) ────────────────────
   shelf-stack.js sets each study's opening picture across the stage, one
   over the next, a strip of paper under each with its credit. The head
   is the grid's, so the layouts share one voice. */
.xk { position: relative; }
.xk-head { padding: 30px 20px 30px; }
.xk-hl { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.xk-name { 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; }
.xk-name.num { font-variant-numeric: tabular-nums; }
.xk-n { flex: none; color: var(--grey); white-space: nowrap; }
.xk-n b { margin-left: 0.5em; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.xk-sent { 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; }
.xk-lbl { margin: 18px 0 0; color: var(--ink); }
.xk-lbl + .xk-sent { margin-top: 5px; }
/* a homepage line: ink, then grey */
.xk-sent.lead { color: var(--ink); }
.xk-sent.lead .g { color: var(--grey); }

/* an opener: the picture across the stage, its credit on paper under it */
.xk-it { margin: 0; cursor: pointer; }
.xk-pic { position: relative; overflow: hidden; background: #e8e4e0; }
.xk-pic.alpha { background: var(--cream); }
.xk-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.1s var(--ease); }
.xk-pic.alpha img { object-fit: contain; }
/* the drift, as the rooms draw it (.sp-pic.par): a tenth taller, moved by --py */
.xk-pic.par img { bottom: auto; height: 110%; translate: 0 var(--py, 0px); }
.xk-pic img.hi { opacity: 0; transition: opacity 0.4s ease, transform 1.1s var(--ease); }
.xk-pic.in img.hi { opacity: 1; }
.xk-it:hover .xk-pic img { transform: scale(1.018); }
.xk-it.narrow .xk-pic { margin: 0 20px; }
.xk-cap { display: flex; align-items: baseline; gap: 12px; padding: 13px 20px 34px; font-size: 13px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; }
.xk-no { flex: none; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--grey); font-variant-numeric: tabular-nums; }
.xk-t { transition: background-size 0.26s cubic-bezier(0.45, 0, 0.2, 1), color 0.18s ease 0.04s;
  background-image: linear-gradient(#ECECEC, #ECECEC); background-repeat: no-repeat; background-size: 0% 100%; background-position: 100% 0;
  padding-inline: 0.2em; margin-inline: -0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.xk-y { color: var(--grey); font-weight: 500; font-variant-numeric: tabular-nums; }
.xk-d { margin-left: auto; text-align: right; color: var(--grey); font-weight: 500; }
/* the reference system: the study's number in ink, its sections after
   the year as small links, the way a catalogue gives a figure a page */
.xk-no { color: var(--ink); }
.xk-locs { display: inline-flex; gap: 8px; }
.xk-l { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--grey); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--hair); transition: color 0.2s ease, border-color 0.2s ease; }
.xk-l:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* see also: the index's cross-references, under the entry's own line */
.xk-see { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 20px 0 0; font-size: 14px; font-weight: 600; letter-spacing: -0.012em; }
.xk-sl { margin-right: 4px; color: var(--grey); }
.xk-sd { color: var(--grey2, rgba(0, 0, 0, 0.3)); }
.xk-see a { color: var(--ink); border-bottom: 1px solid var(--hair); transition: border-color 0.2s ease; }
.xk-see a:hover { border-bottom-color: var(--ink); }
.xk.ph .xk-see { font-size: 13px; }
/* the index's own grey cell, the words staying ink (27 Sept, his "let's
   make the highlight color on these match the TOC - the grey vs the
   black"; it was the black band, the words in paper) */
.xk-it.hit .xk-t { background-size: 100% 100%; background-position: 0 0; color: var(--ink); }
.xk.ph .xk-head { padding: 24px 16px 24px; }
.xk.ph .xk-name { font-size: 40px; letter-spacing: -0.045em; }
.xk.ph .xk-sent { font-size: 16px; margin-top: 12px; }
.xk.ph .xk-cap { flex-wrap: wrap; padding: 11px 16px 28px; }
.xk.ph .xk-d { margin-left: 0; flex-basis: 100%; text-align: left; }
@media (prefers-reduced-motion: reduce) { .xk-pic img, .xk-t { transition: none !important; } }

/* a line's head (27 Sept): one run, its name in ink and its sentence in
   grey at one size, as a study's lead is set, at the homepage intro's
   size and weight (crossref2.css .say: 700, 1.02); the size and its
   tracking are set on the shelf as --stand and --stand-tr */
.xk-stand { flex: 1 1 auto; min-width: 0; 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; }
/* on a phone the run takes the whole measure and the count goes under it */
.xk.ph .xk-hl { flex-wrap: wrap; row-gap: 14px; }
.xk.ph .xk-stand { flex-basis: 100%; }
.xk-stand .g { color: var(--grey); }

/* ── the shelf's type, as the rooms' (27 Sept, his "let's then take a
   design typography pass at the other sections and align with the
   changes we just made (size, weight, etc)"). The name and a line's run
   in demi at their sizes; the sentence under a name at the rooms' mid,
   15px medium, grey; a credit's title 13px demi, its year and
   discipline 13px regular; the count and the labels as the rooms' small
   caps, 8.5px bold, tracked wide; the section links 12px regular. The
   foot's copies of these (crossref2.css) keep to the same, so the
   carry-on still lands true ── */
.xk-name, .xk-stand { font-weight: 600; }
.xk-sent { font-size: 15px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.3; }
.xk.ph .xk-sent { font-size: 14px; }
/* a line's head in the rooms' one statement style (6 Oct 2026): medium at
   1.1, its size and tracking set on the shelf as --stand and --stand-tr;
   ?statement=demi keeps the demi */
html.st-one:not([data-type="bold"]) .xk-stand { font-weight: 500; line-height: 1.1; }
.xk-n, .xk-sl { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; }
.xk-n b { font-weight: 700; }
.xk-cap { font-size: 13px; font-weight: 600; }
.xk-y, .xk-d { font-weight: 400; }
.xk-l { font-size: 12px; font-weight: 400; letter-spacing: 0; }
.xk-see, .xk.ph .xk-see { font-size: 13px; font-weight: 600; }

/* ── a foot's preview (4 Oct 2026): the next shelf's first openers under
   its name, hung where that shelf will set them (peek in shelf-stack.js),
   so the glass a foot brings up is never empty paper; the foot clips the
   last of them at its own height, which the carry-on is measured by ── */
.sh-foot.peeks { overflow: hidden; }
.xk-peek { position: absolute; left: 0; right: 0; }
/* the honest file waits out of sight until it is whole and decoded, then
   shows at once over the rung under it (load in shelf-stack.js, 4 Oct) */
.xk-pic img.ld { visibility: hidden; }
/* a foot with a preview keeps its name in ink under the pointer, as the
   shelf's head does, so carrying on changes nothing there (4 Oct) */
.sh-foot.peeks:hover .sh-foot-t { color: inherit; }
/* a scroll is not a hover: while the page moves the picture under a still
   pointer keeps its size, so a carry-on finds the foot's picture and the
   shelf's alike; the zoom comes once the page is still (4 Oct) */
html.scrolling .xk-it .xk-pic img { transform: scale(1.001); transition: none; }

/* ── SHELF HEAD: a shelf's head in the rooms' two styles (11 Oct 2026).
   His "should we align the type style, size, etc for these as well?",
   after the copy under every head in the rooms went to the body, first
   set the name as a room title and the line in the statement; live, his
   "it's awfully big for a 'label' or category and not an actual project.
   maybe the styling is more like this second screenshot where brand
   design/labels/categories are the sub size then the rest body copy
   size", a room's section head over its body. So a category is set as a
   section head is: the name at the statement (--stand and --stand-tr,
   medium, at 1.1, not fitted), and the line under it as the body (13px
   regular at 2, ink, 34em), 14px under the name as a room's body sits
   under its head. The foot's copies follow (crossref2.css), so the
   carry-on lands true. ?shelfhead=title keeps the title-sized name and
   the statement line; ?shelfhead=old the 64px name and the 15px line ── */
html.st-one:not([data-type="bold"]):not(.sh-old):not(.sh-title) .xk-name { 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) .xk .xk-sent { 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) .xk .xk-sent .g { color: inherit; }
html.st-one:not([data-type="bold"]):not(.sh-old):not(.sh-title) .xk .xk-lbl + .xk-sent { margin-top: 2px; }
/* ?shelfhead=title: the name in a room title's tracking and leading at a
   room title's size (fitTitle in shelf-stack.js), the line in the
   statement, 18px under it, its two tones as they were */
html.st-one.sh-title:not([data-type="bold"]):not(.sh-old) .xk-name { letter-spacing: -0.045em; line-height: 0.9; }
html.st-one.sh-title:not([data-type="bold"]):not(.sh-old) .xk .xk-sent { 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) .xk .xk-lbl + .xk-sent { margin-top: 6px; }
/* on a phone the count stays beside the name, as on a desk and as the
   foot sets it, so a long name never pushes it under and the carry-on
   still lands (a line's run keeps its count under it) */
html.st-one:not([data-type="bold"]):not(.sh-old) .xk.ph .xk-hl:has(> .xk-name) { flex-wrap: nowrap; }