/* ==========================================================================
   HOMEPAGE — VERSION C: OPEN STORAGE, AFTER HOURS.
   Design exploration; brief in docs/VERSION-C-ART-DIRECTION.md.

   THE LIGHTS ARE OFF IN THE MUSEUM. The shell drops to the house plate ink
   and carries nothing but white type, the mono apparatus and the one violet;
   every point of light on the page is a world. No new colours: this whole
   sheet re-declares the existing house tokens on `body.night` and the shell
   restyles itself — masthead, menus, footer and all — because every shell
   surface already resolves from the tokens.
   ========================================================================== */

/* The wordmark artwork is near-black ink; in the dark it flips to white.
   Same file, no second asset. */
.night .masthead__mark img { filter: invert(1); }
.night .foot__mark img { filter: none; }

/* ---- the review strip ----------------------------------------------------
   Unlike B, this page renders the Explore sectionbar between masthead and
   main, so the strip must not pull itself up into that slot. Instead the
   sectionbar itself closes the masthead's gap (the negative margin collapses
   against the masthead's positive one) and the strip sits flush beneath:
   masthead / sectionbar / strip, three bars, no overlap. */
.night .sectionbar { margin-top: calc(-1 * var(--s7)); }
.bstrip {
  border-block-end: 1px solid var(--rule);
  background: var(--paper-deep);
}
.bstrip p { margin: 0; padding: var(--s2) 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-2); }
.bstrip a, .ledgc__list a, .shelfc__basis a {
  display: inline-block; padding-block: 5px; margin-block: -5px;
}

/* ---- the sign -------------------------------------------------------------
   Orientation in one band, not a hero: the sentence, the census, the two
   non-walking ways in. The collection starts immediately below. */
.signc { padding: var(--s6) 0 var(--s7); }
.signc__row {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7);
  align-items: flex-end; justify-content: space-between;
}
.signc__h {
  margin: 0 0 var(--s3);
  font: 650 var(--t-section)/1.1 var(--display);
  letter-spacing: -0.02em;
}
/* Subhead: the plain-language explanation of what the product does. Brand
   sans, not mono — this is customer-facing prose, not apparatus (ruling 12). */
.signc__sub { margin: 0 0 var(--s3); font: 400 var(--t-md)/1.35 var(--ui); color: var(--ink-2); max-width: 46ch; }
.signc__census { margin: 0; font: var(--t-sm)/var(--lh-meta) var(--ui); color: var(--ink-3); max-width: 52ch; }
.signc__tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.signc__tools input[type="search"] {
  min-width: 16rem; padding: var(--s2) var(--s3);
  background: var(--paper-deep); color: var(--ink);
  border: 1px solid var(--rule-firm); border-radius: 0;
  font: var(--t-sm)/1.2 var(--ui);
}
.signc__tools input[type="search"]::placeholder { color: var(--ink-3); }
.signc__rand {
  padding: var(--s2) var(--s3);
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule-firm); border-radius: 0;
  font: var(--t-sm)/1.2 var(--ui); cursor: pointer;
}
.signc__rand:hover { border-color: var(--brand); color: var(--brand); }
.signc__count { margin: var(--s3) auto 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }

/* ---- the filter surface ---------------------------------------------------
   Three controls, one row of chips at rest — there is no collapsed tier
   because there is nothing to collapse. Chips are toggle buttons; their
   definitions describe the chip, never a World. Hidden until JS initialises:
   filters are a progressive enhancement over a page of plain links. */
.filtc {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s2); margin-top: var(--s4);
}
/* The dimension label sits on its own line above its chips — "What carries
   the look?" is a question, not a 6.5rem tag. Label in the brand sans. */
.filtc__dim { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; align-self: stretch; }
.filtc__lbl { flex-basis: 100%; margin-bottom: 2px; font: 600 var(--t-xs)/1.3 var(--ui); color: var(--ink-2); }
.chip {
  display: inline-block; text-align: left;
  padding: var(--s1) var(--s2);
  background: transparent; border: 1px solid var(--rule-firm); border-radius: 0;
  color: var(--ink-2); cursor: pointer;
}
/* Feel's eight chips carry their definitions and share one row; the four
   craft chips are label-and-count only and keep their natural width. */
.filtc__dim--feel .chip { flex: 1 1 0; min-width: 0; }
.chip__l { font: 600 var(--t-xs)/1.3 var(--ui); color: var(--ink); }
.chip__n { font: var(--t-xs)/1.3 var(--mono); font-style: normal; color: var(--ink-3); margin-left: var(--s1); }
.chip__d { display: block; margin-top: 1px; font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-3); }
.chip:hover { border-color: var(--ink-3); }
.chip[aria-pressed="true"] { border-color: var(--brand); }
.chip[aria-pressed="true"] .chip__l { color: var(--brand); }
.filtc__clear {
  padding: var(--s1) var(--s3);
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule-firm); border-radius: 0;
  font: var(--t-xs)/1.3 var(--ui); cursor: pointer;
}
.filtc__clear:hover { border-color: var(--brand); color: var(--brand); }

/* Visually hidden, still in the accessible name: the dimmed vitrine's
   " — not matching your filter" suffix. The [hidden] attribute rules while
   the vitrine is lit; removing it reveals the text to AT only. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- the shelves ---------------------------------------------------------- */
.rowsc { display: flow-root; }
.shelfc { padding: var(--s5) 0 var(--s6); }
.shelfc__head {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  align-items: baseline; margin-bottom: var(--s4);
}
.shelfc__h { margin: 0; font: 650 var(--t-md)/1.15 var(--display); letter-spacing: -0.015em; }
/* Rail basis: customer-facing explanation, so brand sans (ruling 12). */
.shelfc__basis { margin: 0; font: var(--t-sm)/var(--lh-meta) var(--ui); color: var(--ink-2); flex-basis: 100%; max-width: 60ch; }
/* Provenance credit under Start-here: apparatus register, so mono, quiet. */
.shelfc__credit { margin: var(--s1) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); flex-basis: 100%; }

/* ---- R2, the implementation wedge, given real weight ----------------------
   The one rail the product's differentiation lives on. A full-width band a
   shade up from the shell, hairline-ruled top and bottom, a larger heading and
   a lead-size basis line — so it reads as a capability, not another shelf.
   No new colour or radius: paper-deep and rule-firm are existing tokens. */
.shelfc--feature {
  background: var(--paper-deep);
  border-block: 1px solid var(--rule-firm);
  padding-block: var(--s6);
  margin-block: var(--s5);
}
/* Same heading and basis sizes as every other shelf (founder, 2026-09-26:
   the larger type read as a mistake, not a feature). The band carries it. */

/* The track: native horizontal scroll with snap, first vitrine on the page
   column, continuation visible off the right edge. No chevrons. */
.shelfc__track {
  display: flex; gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: var(--s1) max(var(--s5), calc((100vw - var(--page)) / 2 + var(--s5))) var(--s4);
  scrollbar-width: thin;
  scrollbar-color: var(--rule-firm) transparent;
}

/* ---- a vitrine -------------------------------------------------------------
   One frame and one wall-label grammar for every card. Explore is the built
   collection, so behind every pane of glass is that room's own loop. */
.vit {
  --vw: 232px;
  flex: none; width: var(--vw);
  scroll-snap-align: start;
  display: block; text-decoration: none;
  /* Lit ⇄ dimmed cross-fades at the house motion value. No transform, no
     scale, no movement — a filter moves the lights, nothing else. */
  transition: opacity 180ms cubic-bezier(.2,.7,.2,1);
}
.vit__glass {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--rule-firm);
  transition: translate 160ms cubic-bezier(.2,.7,.2,1), box-shadow 160ms cubic-bezier(.2,.7,.2,1), border-color 160ms ease;
}
.vit:hover .vit__glass,
.vit:focus-visible .vit__glass { translate: 0 -3px; box-shadow: var(--lift); border-color: var(--ink-3); }
.vit:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* The room loops rest on their composed frame until attention arrives:
   without .is-live the animation is removed entirely, so the base styles —
   (pv contract: the resting frame is the composed fallback) —
   which ARE the composed frame — show. previews.css needs no edits. */
.vit:not(.is-live) .pv *,
.vit:not(.is-live) .pv *::before,
.vit:not(.is-live) .pv *::after { animation: none !important; }
.vit .pv { width: 100%; height: 100%; aspect-ratio: auto; max-width: none; border: 0; }

/* The card label: the style name, then the one-line definition — plain
   language, always visible (rulings 3 & 10). No accession number, no editorial
   word. A wrapping flex column so a long name or definition never overflows. */
.vit__label {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--s2); padding: var(--s2) 0 0;
}
.vit__title { flex-basis: 100%; font: 600 var(--t-sm)/var(--lh-tight) var(--ui); color: var(--ink); }
/* An honest capability marker (R2): the styles that carry full build rules.
   Neutral, not violet — violet is reserved for interaction (ruling 11). */
.vit__tag {
  align-self: flex-start; margin-top: 3px; padding: 0 var(--s1);
  border: 1px solid var(--rule-firm);
  font: 600 var(--t-xs)/1.5 var(--ui); color: var(--ink-2);
}
/* The definition: what the style is, in one line. Brand sans, two lines max. */
.vit__def {
  flex-basis: 100%; margin-top: 2px;
  font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Search shows its reason: the matched fragment, under the name. */
.vit__match { flex-basis: 100%; margin-top: 2px; font: var(--t-xs)/var(--lh-tight) var(--ui); color: var(--ink-2); }

/* ---- the pair card (R5) ----------------------------------------------------
   Two panes of glass in one case: the vitrine reused whole, twice, inside
   one hairline frame. Both distinguishing lines are corpus text, verbatim. */
.pairc {
  flex: none; display: flex; gap: var(--s3);
  scroll-snap-align: start;
  padding: var(--s3);
  border: 1px solid var(--rule-firm);
}
.pairc .vit { --vw: 208px; }
.vit__pline {
  flex-basis: 100%; margin-top: 2px;
  font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-2);
  white-space: normal;
}

/* ---- R6's inline group labels ----------------------------------------------
   One shelf, seven labelled groups scrolling inside it — not seven shelves.
   The label is furniture in the track, in the apparatus register. */
.shelfc__grp {
  flex: none; align-self: stretch; max-width: 8rem;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s1);
  padding-left: var(--s2); border-left: 1px solid var(--rule-firm);
  font: 600 var(--t-xs)/1.3 var(--ui); color: var(--ink-2);
}
.shelfc__grp i { font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--ink-3); }

/* Filtering is lighting: matches lit, non-matches dimmed in place — frame
   to the quiet rule, preview stilled, still clickable, still in the tab
   order. The collection never appears smaller than it is. */
.vit.is-dim { opacity: 0.22; }
.vit.is-dim .vit__glass { border-color: var(--rule); }
/* A dimmed vitrine's preview NEVER animates — not on hover, not on focus,
   and not for the autonomous three. */
.vit.is-dim .pv *,
.vit.is-dim .pv *::before,
.vit.is-dim .pv *::after { animation: none !important; }
.ledgc__list li { transition: opacity 180ms cubic-bezier(.2,.7,.2,1); }
.ledgc__list li.is-dim { opacity: 0.22; }

/* ---- the ledger ------------------------------------------------------------ */
.ledgc { border-top: 1px solid var(--rule); padding: var(--s8) 0 var(--s9); margin-top: var(--s6); }
.ledgc__head {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  align-items: baseline; margin-bottom: var(--s5);
}
.ledgc__h { margin: 0; font: 650 var(--t-md)/1.15 var(--display); letter-spacing: -0.015em; }
.ledgc__list {
  margin: 0; padding: var(--s4) 0 0; list-style: none;
  columns: 13rem; column-gap: var(--s6);
  border-top: 1px solid var(--rule);
}
.ledgc__list li { break-inside: avoid; margin: 0 0 var(--s1); }
.ledgc__list a { font: 400 var(--t-sm)/var(--lh-tight) var(--ui); color: var(--ink); text-decoration: none; display: inline-block; min-inline-size: 24px; }
.ledgc__list a:hover { text-decoration: underline; text-decoration-color: var(--brand); }
/* STILL BUILDING — the unbuilt names, inline under the ledger in the
   ledger's own columns, dimmed and unlinked: a fact, not a destination.
   The request slip is the one link out. */
.stillc { margin-block-start: var(--s6); padding-block-start: var(--s4); border-top: 1px solid var(--rule); }
.stillc__h { margin: 0; font: 500 var(--t-sm)/1.2 var(--ui); color: var(--ink-2); }
.stillc__h a { color: inherit; text-decoration: none; }
.stillc__h a:hover { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand); }
.stillc__h i { font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--ink-3); margin-inline-start: var(--s1); font-variant-numeric: tabular-nums; }
.stillc__list {
  margin: 0; padding: var(--s3) 0 0; list-style: none;
  columns: 13rem; column-gap: var(--s6);
}
.stillc__list li { break-inside: avoid; margin: 0 0 var(--s1); font: 400 var(--t-sm)/var(--lh-tight) var(--ui); color: var(--ink-3); }
.stillc__cta { margin: var(--s4) 0 0; font: var(--t-sm)/var(--lh-meta) var(--ui); }
.stillc__cta a { display: inline-block; padding-block: 5px; margin-block: -5px; color: var(--ink-2); text-decoration: none; }
.stillc__cta a:hover { color: var(--brand); text-decoration: underline; text-decoration-color: var(--brand); }

/* ---- small screens --------------------------------------------------------- */
@media (max-width: 64rem) {
  /* Below the width where eight defined chips share a row, they wrap to a
     second — still nothing collapsed, still the whole surface visible. */
  .filtc__dim--feel .chip { flex: 1 1 10rem; }
}

@media (max-width: 48rem) {
  .signc__row { align-items: stretch; flex-direction: column; }
  .signc__tools { flex-direction: column; align-items: stretch; }
  .signc__tools input[type="search"] { min-width: 0; }
  .vit { --vw: 196px; }
  .pairc .vit { --vw: 172px; }
  .ledgc__list { columns: 2; column-gap: var(--s5); }
  .ledgc__list a { font-size: var(--t-xs); }
}

/* ---- motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .vit__glass { transition: none; }
  .vit:hover .vit__glass, .vit:focus-visible .vit__glass { translate: none; }
  /* Filter state changes are instant: no cross-fade on the lights. */
  .vit, .ledgc__list li { transition: none; }
  /* The loops themselves are already stilled by previews.css. */
}

.signc__n { font-weight: 400; color: var(--ink-3); font-size: 0.5em; vertical-align: 0.4em; margin-inline-start: 0.2em; }

/* ONE GALLERY, A TO Z (2026-09-26). */
.galc { padding-block: var(--s4) var(--s7); }
.galc__h { margin: 0 0 var(--s4); font: 650 var(--t-md)/1.15 var(--display); letter-spacing: -0.015em; }
.galc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s5) var(--s4); }
.galc__grid .vit { width: auto; max-width: none; flex: none; }

/* The Aesthetics statement (2026-09-26): the one oversized moment on the page. */
.signc__h--big { font: 700 clamp(3rem, 8.5vw, 7.5rem)/0.92 var(--display); letter-spacing: -0.035em; margin: 0 0 var(--s4); }
.signc__count0 { margin: 0; font: var(--t-sm)/1.3 var(--ui); color: var(--ink-3); }
.signc__count0 .signc__n { font-size: inherit; vertical-align: baseline; margin: 0; color: var(--ink-2); font-weight: 600; }

/* Said once, under the statement; kept for screen readers here. */
.galc__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Still building, a carousel (2026-09-26). */
.stillc__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.stillc__nav { margin: 0; display: flex; gap: var(--s2); }
.stillc__nav button { width: 32px; height: 32px; display: grid; place-items: center; background: transparent; color: var(--ink-2); border: 1px solid var(--rule-firm); font: var(--t-sm)/1 var(--ui); cursor: pointer; }
.stillc__nav button:hover { color: var(--ink); border-color: var(--ink-3); }
.stillc .stillc__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem, 15rem); grid-template-columns: none; gap: var(--s4); overflow-x: auto; scroll-snap-type: x proximity; padding: var(--s3) 0 var(--s3); margin: 0; list-style: none; columns: auto; scrollbar-width: thin; }
.stillc .stillc__list li { scroll-snap-align: start; display: grid; gap: var(--s1); break-inside: auto; }
.stillc__box { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--rule-firm); background: var(--paper-deep); }
.stillc__box i { font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--ink-3); }
.stillc .stillc__list b { margin-top: var(--s2); font: 600 var(--t-base)/1.2 var(--ui); color: var(--ink-2); }
.stillc__def { font: var(--t-sm)/1.4 var(--ui); color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Gradients on the Still building boxes; the label on its own solid chip so
   it reads on every one (white on #0B0D12 is 19:1). */
.stillc__box { border: 1px solid var(--rule-firm); border-style: solid; }
.stillc__box i { padding: 4px 8px; background: #0B0D12; color: #F2F3F7; font: var(--t-xs)/1 var(--mono); font-style: normal; }
.stillc__note { margin: 0 0 var(--s2); font: var(--t-xs)/1.4 var(--ui); color: var(--ink-3); }

/* Headline to gallery, consolidated (2026-09-26): the hidden match count takes
   no room, and the section and gallery padding meet at one gap. */
.signc:has(.signc__h--big) { padding-bottom: 0; }
.signc__h--big { margin-bottom: 0; }
.signc__count[style*="hidden"] { display: none; }
.signc:has(.signc__h--big) + .galc { padding-top: var(--s5); }

/* The statement starts level with the rail logo (2026-09-26). */
.topbar:not(:has(*)) + .signc { margin-top: 0; }
.signc:has(.signc__h--big) { padding-top: var(--s5); }

/* Request an Aesthetic, full width (2026-09-26): the still-building colours
   run along its top edge; big type left, the button right. */
.stillc__ask { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s6); padding: calc(var(--s6) + 10px) var(--s6) var(--s6); background: var(--paper-deep); border: 1px solid var(--rule-firm); color: var(--ink); text-decoration: none; overflow: hidden; }
.stillc__strip { position: absolute; top: 0; left: 0; right: 0; height: 10px; display: flex; }
.stillc__strip > span { flex: 1; transition: flex-grow 0.25s ease-out; }
.stillc__ask:hover .stillc__strip > span:nth-child(odd) { flex-grow: 1.6; }
.stillc__askt b { display: block; font: 700 clamp(1.75rem, 3.6vw, 3rem)/1.02 var(--display); letter-spacing: -0.025em; }
.stillc__askt span { display: block; margin-top: var(--s2); font: var(--t-md)/1.35 var(--ui); color: var(--ink-2); }
.stillc__askb { display: inline-flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s4); background: var(--ink); color: var(--paper); font: 600 var(--t-sm)/1 var(--ui); white-space: nowrap; }
.stillc__ask:hover .stillc__askb { background: var(--brand); }
.stillc__ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 40rem) { .stillc__ask { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .stillc__strip > span { transition: none; } }

/* CULTURAL REVIEW (founder, 2026-09-29). The same neutral tag as the old
   capability marker, with the open ring; the key above the grid names it
   once. A status on the card, never a shelf of its own. */
.vit__tag--cr { display: inline-flex; align-items: center; gap: 4px; }
.galc__key {
  display: flex; align-items: baseline; gap: var(--s2);
  margin: 0 0 var(--s4);
  font: var(--t-xs)/var(--lh-meta) var(--ui); color: var(--ink-3);
}
.galc__key b { font-weight: 600; color: var(--ink-2); }
.galc__key a { color: var(--ink-2); text-underline-offset: 2px; }
.galc__key a:hover { color: var(--ink); }
.galc__key .cr-o { position: relative; top: 1px; }