/* ==========================================================================
   YOPROFX / 09 — ARCHIVE + EXHIBIT
   --------------------------------------------------------------------------
   The experiments portion: the filter rail, the accession rail, the wall,
   the reusable experiment card, and the exhibit page pattern.

   THE IDEA
   An exhibition, not an index. Objects sit on a wall at two scales, the
   whole holding is visible at once as a rail of marks, and pointing at any
   object lights everything related to it. Browsing is lateral — you are
   meant to leave by a door you did not come in through.

   The experiment card itself lives in 04-components.css: it is used on the
   homepage too, so it is a core component, not an archive one.

   Everything in this file is loaded only by /lab/ and the exhibit pages.
   ========================================================================== */


/* ==========================================================================
   THE FILTER RAIL
   Sticky under the chrome. Real links, so it works with no JavaScript;
   js/ypx.js upgrades it to in-place filtering.
   ========================================================================== */

.rail {
  position: sticky;
  top: var(--chrome-h);
  z-index: 40;
  border-block: var(--hair) solid var(--c-line-soft);
  background: rgba(8, 8, 10, 0.86);
}

@supports (backdrop-filter: blur(1px)) {
  @media (prefers-reduced-transparency: no-preference) {
    .rail {
      background: rgba(8, 8, 10, 0.68);
      backdrop-filter: blur(10px) saturate(1.15);
    }
  }
}

.rail__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: 3.25rem;
}

.rail__set {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

.rail__set::-webkit-scrollbar { display: none; }

.rail__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  flex: none;
  padding: 0.45rem 0.7rem;
  border: var(--hair) solid transparent;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-chalk);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-dimmer),
              border-color var(--dur-fast) var(--ease-dimmer),
              background var(--dur-fast) var(--ease-dimmer);
}

.rail__dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--territory);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-dimmer);
}

.rail__n { color: var(--c-graphite); }

.rail__btn:hover,
.rail__btn:focus-visible { color: var(--c-bone); border-color: var(--c-line); }
.rail__btn:hover .rail__dot { opacity: 1; }

.rail__btn.is-on {
  color: var(--c-vault);
  background: var(--c-bone);
  border-color: var(--c-bone);
}

.rail__btn.is-on .rail__n { color: rgba(8, 8, 10, 0.55); }
.rail__btn.is-on .rail__dot { opacity: 1; }

.rail__read {
  flex: none;
  margin-inline-start: auto;
  color: var(--c-graphite);
}

@media (max-width: 52rem) {
  .rail__read { display: none; }
}


/* ==========================================================================
   THE ACCESSION RAIL
   The whole collection as a row of marks. Not a timeline: most records have
   no fixed year, and inventing dates to make a nicer graph is not an option.
   This is the order things entered the catalogue, which is a real thing.
   ========================================================================== */

.accession {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--sp-sm);
  border-top: var(--hair) solid var(--c-line-soft);
  padding-top: var(--sp-sm);
}

.accession__i a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
  padding-top: var(--sp-2xs);
}

.accession__bar {
  height: 3px;
  background: var(--territory);
  opacity: 0.35;
  transform-origin: left;
  transition: opacity var(--dur-base) var(--ease-dimmer),
              transform var(--dur-base) var(--ease-gate);
}

.accession__id { color: var(--c-chalk); }

.accession__t {
  color: var(--c-graphite);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-meta);
  line-height: 1.35;
}

.accession__i a:hover .accession__bar,
.accession__i a:focus-visible .accession__bar { opacity: 1; transform: scaleY(2); }

.accession__i a:hover .accession__id { color: var(--c-bone); }


/* ==========================================================================
   THE WALL
   ========================================================================== */

.features {
  display: grid;
  gap: var(--sp-md);
}

@media (min-width: 60rem) {
  .features { grid-template-columns: 7fr 5fr; }
}

.wall {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.wall__empty {
  padding: var(--sp-2xl) 0;
  text-align: center;
  max-width: 44ch;
  margin-inline: auto;
}

/* --- KINSHIP -------------------------------------------------------------
   The whole reason the archive exists in this shape. Point at any object
   and everything sharing a territory with it stays lit while the rest step
   back. Driven by js/ypx.js, which knows nothing but data-territories. */
/* three states: unrelated, shares one territory, shares two or more */
.wall.is-probing .xcard,
.features.is-probing .xcard { opacity: 0.22; }

.wall.is-probing .xcard.is-kin,
.features.is-probing .xcard.is-kin { opacity: 0.62; }

.wall.is-probing .xcard.is-kin-near,
.features.is-probing .xcard.is-kin-near { opacity: 1; }

.wall.is-probing .xcard.is-kin-near::before,
.features.is-probing .xcard.is-kin-near::before { opacity: 1; }

.accession.is-probing .accession__i {
  opacity: 0.2;
  transition: opacity var(--dur-base) var(--ease-dimmer);
}
.accession.is-probing .accession__i.is-kin { opacity: 0.6; }
.accession.is-probing .accession__i.is-kin-near { opacity: 1; }
.accession.is-probing .accession__i.is-kin-near .accession__bar { opacity: 1; }

/* Filtered out by the client-side rail. */
.xcard[hidden] { display: none; }


/* ==========================================================================
   THE EXHIBIT
   ========================================================================== */

.exhibit__crumb { color: var(--c-graphite); margin-bottom: var(--sp-lg); }
.exhibit__crumb a { color: var(--c-chalk); }
.exhibit__crumb a:hover { color: var(--c-bone); }

.exhibit__lockup { align-items: start; }

.exhibit__id { color: var(--territory); font-size: var(--t-label); }

.exhibit__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.2vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  color: var(--c-bone);
  text-wrap: balance;
  margin-top: var(--sp-2xs);
}

.exhibit__blurb {
  font-family: var(--font-display);
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--c-chalk);
  max-width: 46ch;
  margin-top: var(--sp-sm);
}

.exhibit__meta {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sp-2xs) var(--sp-md);
  margin: 0;
  padding-top: var(--sp-sm);
  border-top: var(--hair) solid var(--c-line);
}

.exhibit__meta dt {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-graphite);
  line-height: var(--lh-mono);
}

.exhibit__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--c-chalk);
  line-height: var(--lh-mono);
}

.exhibit__stage { padding-top: var(--sp-lg); }

/* With nothing mounted, a full-bleed 16:9 of empty grid swallows the page.
   The frame still exists — the switch still works, and says so — it just
   stops pretending to be a cinema. */
.frame--empty { max-width: 32rem; }

/* The archive is a long room. It does not need the full section rhythm
   between every wall. */
.archive__strip,
.archive__features,
.archive__wall { padding-block: clamp(var(--sp-lg), 6vh, var(--sp-2xl)); }

/* --- the long-form body -------------------------------------------------- */
.entry {
  display: grid;
  gap: var(--sp-2xs) var(--sp-lg);
  padding-block: var(--sp-lg);
  border-top: var(--hair) solid var(--c-line-soft);
}

@media (min-width: 52rem) {
  .entry { grid-template-columns: 4rem 1fr; }
}

.entry__n { color: var(--territory); padding-top: 0.35em; }

.entry__c { max-width: var(--w-text); }

.entry__h { margin-bottom: var(--sp-sm); }

.entry__t {
  font-family: var(--font-display);
  font-size: var(--t-lede);
  line-height: 1.6;
  color: #cfcac1;
  text-wrap: pretty;
}

.entry__pending {
  padding: var(--sp-sm) var(--sp-md);
  border: var(--hair) dashed var(--c-line);
  color: var(--c-graphite);
  max-width: 52ch;
}

/* --- appendix ------------------------------------------------------------ */
.filelist { list-style: none; margin: 0; padding: 0; }

.filelist__i {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2xs) var(--sp-sm);
  padding-block: var(--sp-2xs);
  border-bottom: var(--hair) solid var(--c-line-soft);
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .xcard:hover { transform: none; }
  .xcard__peek { transition: opacity 0.01ms; transform: none; }
  .accession__bar { transition: none; }
}