/* ==========================================================================
   YOPROFX / 04 — COMPONENTS
   --------------------------------------------------------------------------
   Every reusable object on the site. Each block is self-contained, reads
   only from tokens, and inherits --territory from whatever section it is
   dropped into. Adding an experiment must never require a new component.

     01  CHROME       instrument bar, masthead, nav
     02  CTA          the door handle
     03  HERO         see 07-opening.css
     04  PLAN         floor plan + wings
     05  XCARD        the experiment card — 3 densities, 1 partial
     06  INSTRUMENT   the five wing drawings, shared by zones and cards
     07  CHIP/CHAIN   status + territory chain
     08  APPARATUS    the three-dimension diagrams
     09  LOG          field log entries
     10  FRAME        artifact frame — all heavy media enters here
     11  DOOR         the closing block
     12  COLOPHON     footer
   ========================================================================== */


/* ==========================================================================
   01 — CHROME
   A fixed two-tier header: a mono readout strip over a signage masthead.
   The readout is the site's spine; it narrates state on every page.
   ========================================================================== */

.chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-instrument);
  background: linear-gradient(180deg, var(--c-vault) 62%, rgba(8, 8, 10, 0));
  transition: background var(--dur-slow) var(--ease-dimmer),
              border-color var(--dur-slow) var(--ease-dimmer);
  border-bottom: var(--hair) solid transparent;
}

.chrome.is-scrolled {
  background: rgba(8, 8, 10, 0.88);
  border-bottom-color: var(--c-line-soft);
}

/* Blur is the most expensive thing on the page and this layer sits over
   everything during scroll. 10px reads the same at this opacity and costs
   noticeably less; anyone who has asked for less transparency gets an
   opaque bar and no blur at all. */
@supports (backdrop-filter: blur(1px)) {
  @media (prefers-reduced-transparency: no-preference) {
    .chrome.is-scrolled {
      background: rgba(8, 8, 10, 0.72);
      backdrop-filter: blur(10px) saturate(1.15);
    }
  }
}

/* --- readout strip ------------------------------------------------------- */
.instrument {
  height: var(--instrument-h);
  border-bottom: var(--hair) solid var(--c-line-soft);
}

.instrument__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  height: 100%;
  overflow: hidden;
}

.instrument__cell {
  flex: none;
  white-space: nowrap;
  color: var(--c-graphite);
}

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

.instrument__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--c-chalk);
}

.instrument__lamp {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--t-make);
  box-shadow: 0 0 8px var(--t-make);
}

/* The reel name is the first thing to go when there is no room for it. */
@media (max-width: 56rem) { .instrument__cell--p2 { display: none; } }

/* --- masthead ----------------------------------------------------------- */
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: var(--masthead-h);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--font-structure);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-bone);
}

.wordmark__x {
  font-size: 1.35em;
  line-height: 1;
  color: var(--c-chalk);
  transition: color var(--dur-base) var(--ease-dimmer),
              transform var(--dur-slow) var(--ease-gate);
}

.wordmark:hover .wordmark__x,
.wordmark:focus-visible .wordmark__x {
  color: var(--c-bone);
  transform: rotate(90deg);
}

/* --- nav ----------------------------------------------------------------
   No hamburger. Four short mono items that wrap honestly on small screens. */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--sp-sm), 2.2vw, var(--sp-lg));
}

.nav__a {
  position: relative;
  padding-block: 0.4rem;
  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);
}

.nav__a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--hair);
  background: var(--c-bone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-gate);
}

.nav__a:hover,
.nav__a:focus-visible,
.nav__a[aria-current="page"] { color: var(--c-bone); }

.nav__a:hover::after,
.nav__a:focus-visible::after,
.nav__a[aria-current="page"]::after { transform: scaleX(1); }

.nav__a--start { color: var(--c-bone); }
.nav__a--start::after { background: var(--territory); transform: scaleX(1); opacity: 0.45; }
.nav__a--start:hover::after { opacity: 1; }

@media (max-width: 36rem) {
  .masthead__inner { flex-wrap: wrap; padding-block: var(--sp-2xs); }
  .nav { width: 100%; justify-content: space-between; gap: var(--sp-sm); }
}


/* ==========================================================================
   02 — CTA
   Lights, not buttons. A hairline box that ignites and grows a leader rule.
   .cta--solid is the one exception: the plaque beside the door.
   ========================================================================== */

.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.9rem 1.4rem;
  border: var(--hair) solid var(--c-line-lit);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bone);
  transition: border-color var(--dur-base) var(--ease-dimmer),
              color var(--dur-base) var(--ease-dimmer);
}

/* RAKING: low-angle light across the face */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 160% at 0% 0%,
              rgba(239, 234, 225, 0.16), transparent 68%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-dimmer);
}

.cta > * { position: relative; }

.cta__rule {
  width: 0;
  height: 0;
  border-top: var(--hair) solid currentColor;
  transition: width var(--dur-base) var(--ease-gate);
}

.cta:hover,
.cta:focus-visible { border-color: var(--c-bone); }
.cta:hover::before,
.cta:focus-visible::before { opacity: 1; }
.cta:hover .cta__rule,
.cta:focus-visible .cta__rule { width: 1.5rem; }

.cta--solid {
  background: var(--c-bone);
  border-color: var(--c-bone);
  color: var(--c-vault);
}

.cta--solid::before {
  background: radial-gradient(130% 160% at 0% 0%,
              rgba(8, 8, 10, 0.16), transparent 68%);
}

.cta--lg { padding: 1.1rem 1.75rem; font-size: var(--t-label); }

/* Bare inline action, e.g. "⨯ HOW IT WAS MADE" */
.act {
  display: inline-flex;
  align-items: center;
  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);
  border-bottom: var(--hair) solid transparent;
  padding-bottom: 2px;
}

.act:hover,
.act:focus-visible {
  color: var(--c-bone);
  border-bottom-color: var(--territory);
}


/* ==========================================================================
   03 — HERO + WORDMARK
   Both live in 07-opening.css, alongside the opening sequence they belong to.
   ========================================================================== */


/* ==========================================================================
   04 — PLAN
   The floor-plan strip lives in 08-territories.css, with the zones it
   indexes. The portrait plan and the wings list that used to sit here were
   replaced by the zones and have been removed rather than left to rot.
   ========================================================================== */


/* ==========================================================================
   05 — EXPERIMENT CARD
   One experiment as an object on a wall, rendered from a catalogue record
   by partials/card.php. Three densities, one partial, used by the
   homepage, the archive and the exhibit pages:

     feature    the large one. Plate, premise, full metadata.
     specimen   the default.
     strip      a line, for related work and dense lists.

   Adding an experiment must never require a new component. This is it.
   ========================================================================== */

.xcard {
  position: relative;
  background: var(--c-plinth);
  border: var(--hair) solid var(--c-line-soft);
  overflow: hidden;
  transition: border-color var(--dur-slow) var(--ease-dimmer),
              background var(--dur-slow) var(--ease-dimmer),
              transform var(--dur-slow) var(--ease-dolly),
              opacity var(--dur-slow) var(--ease-dimmer);
}

/* The territory rule: dim at rest, lit when the object is. */
.xcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 3;
  background: var(--territory);
  opacity: 0.3;
  transition: opacity var(--dur-slow) var(--ease-dimmer);
}

.xcard__a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.xcard:hover,
.xcard:focus-within {
  border-color: var(--c-line);
  background: var(--c-vitrine);
  transform: translateY(var(--lift));
}

.xcard:hover::before,
.xcard:focus-within::before { opacity: 1; }

/* --- the plate ----------------------------------------------------------
   No photography. The plate carries the drawing of the object's primary
   wing, dimmed, with its accession number over it — so TELL objects look
   like film and MAKE objects look like circuits, across the whole archive.
   A real `hero` image replaces it. */
.xcard__plate {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--c-vitrine);
  border-bottom: var(--hair) solid var(--c-line-soft);
  overflow: hidden;
}

.xcard__plate img { width: 100%; height: 100%; object-fit: cover; }

.xcard__fig {
  position: absolute;
  inset: 12% 8%;
  display: grid;
  place-items: center;
  opacity: 0.4;
  transform: translate(var(--px, 0), var(--py, 0)) scale(var(--pz, 1));
  transition: opacity var(--dur-slow) var(--ease-dimmer),
              transform var(--dur-slow) var(--ease-dolly);
}

.xcard:hover .xcard__fig { transform: translate(var(--px, 0), var(--py, 0)) scale(calc(var(--pz, 1) * 1.04)); }

.xcard__fig .fig { max-width: 100%; max-height: 100%; }

/* Plates show the finished diagram: the assembling motion belongs to the
   homepage zones, not to eighty thumbnails. */
.xcard__fig .fig-edge { stroke-dashoffset: 0; }
.xcard__fig .fig-cell { fill-opacity: 0.08; }
.xcard__fig .fig-cell[data-live] { fill-opacity: 0.3; }

.xcard:hover .xcard__fig { opacity: 0.68; }

.xcard__plateid {
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-sm);
  z-index: 2;
  color: var(--territory);
  opacity: 0.8;
}

/* --- the hover preview --------------------------------------------------
   The premise, rising over the plate. There is no film to show, so the
   preview shows the thinking. */
.xcard__peek {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--sp-md) var(--sp-sm) var(--sp-sm);
  font-family: var(--font-display);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-bone);
  background: linear-gradient(0deg,
              rgba(8, 8, 10, 0.96) 55%, rgba(8, 8, 10, 0));
  opacity: 0;
  transform: translateY(12%);
  transition: opacity var(--dur-slow) var(--ease-dimmer),
              transform var(--dur-slow) var(--ease-dolly);
}

.xcard:hover .xcard__peek,
.xcard:focus-within .xcard__peek { opacity: 1; transform: none; }

/* --- the body ------------------------------------------------------------ */
.xcard__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: var(--sp-md);
  flex: 1;
}

.xcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-3xs);
}

.xcard__id { color: var(--territory); }

.xcard__title {
  font-family: var(--font-structure);
  font-weight: 600;
  font-stretch: 108%;
  font-size: var(--t-title);
  line-height: 1.15;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--c-bone);
  text-wrap: balance;
}

.xcard__blurb {
  font-family: var(--font-display);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-chalk);
  max-width: 46ch;
}

.xcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-md);
  color: var(--c-graphite);
}

.xcard__chain { margin-top: auto; padding-top: var(--sp-sm); }

/* --- feature density ----------------------------------------------------- */
/* A fixed height, not an aspect ratio: the two feature objects sit in
   unequal columns, and matching plate heights is what keeps their wall
   cards aligned. */
.xcard--feature .xcard__plate { aspect-ratio: auto; height: clamp(11rem, 20vw, 17rem); }
.xcard--feature .xcard__body { padding: clamp(var(--sp-md), 3vw, var(--sp-xl)); gap: var(--sp-sm); }
.xcard--feature .xcard__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.xcard--feature .xcard__blurb { font-size: var(--t-lede); max-width: 52ch; }

/* --- strip density ------------------------------------------------------- */
.xcard--strip { background: transparent; border-inline: 0; border-top: 0; }
.xcard--strip .xcard__a { flex-direction: row; align-items: baseline; gap: var(--sp-md); }
.xcard--strip .xcard__body { padding: var(--sp-sm) 0; }
.xcard--strip .xcard__title { font-size: var(--t-small); }
.xcard--strip:hover { transform: none; }


/* ==========================================================================
   06 — INSTRUMENT
   The five wing drawings, from partials/instruments.php. Shared language:
   hairline, no fill, currentColor plus exactly one territory accent.

   These live here, beside the card, because the card renders them — on the
   homepage, in the archive, in related work and on the specimen sheet. The
   zone-specific sizing and the hover motion stay in 08-territories.css.

   Strokes are in user units and there is no vector-effect: see the note in
   07-opening.css about dash patterns and coordinate spaces.
   ========================================================================== */

.fig {
  display: block;
  width: 100%;
  height: auto;
}

.fig [data-line]  { fill: none; stroke: var(--c-line-lit); stroke-width: 0.9; }
.fig [data-soft]  { fill: none; stroke: var(--c-line); stroke-width: 0.8; }
.fig [data-accent]{ fill: none; stroke: var(--territory); stroke-width: 1.4; }

.fig [data-ghost] {
  fill: none;
  stroke: var(--c-line-lit);
  stroke-width: 0.8;
  stroke-dasharray: 4 5;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-dimmer);
}




/* Resting state of the moving parts. These belong here, not with the zone
   motion: a card plate renders the same drawing and needs the board to have
   cells, the framework to have nodes, and the dimension line to be hidden —
   with or without the hover choreography that lives in 08-territories.css. */
.fig-cell {
  fill: var(--territory);
  fill-opacity: 0;
  stroke: var(--c-line);
  stroke-width: 0.8;
}

.fig-cell[data-live] { fill-opacity: 0.22; }

.fig-pulse {
  stroke-dasharray: 16 600;     /* 600 exceeds every trace: one pulse each */
  stroke-dashoffset: 0;
  opacity: 0;
}

.fig-edge {
  stroke-dasharray: 200;        /* 200 exceeds every edge */
  stroke-dashoffset: 200;
  opacity: 0.85;
}

.fig-node {
  fill: var(--c-vault);
  stroke: var(--c-line-lit);
  stroke-width: 0.9;
}

.fig-dim { opacity: 0; }


/* ==========================================================================
   07 — CHIP + CHAIN
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.28em 0.6em 0.24em;
  border: var(--hair) solid var(--c-line);
  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;
}

.chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Lifecycle. Status is carried by brightness, not hue — hue belongs to the
   territories. Only `live` gets any light, because only `live` means there
   is something running right now.

   idea → development → prototype → live → completed */
.chip--idea        { color: var(--c-graphite); border-color: var(--c-line-soft); }
.chip--idea::before        { background: transparent; box-shadow: inset 0 0 0 1px var(--c-graphite); }
.chip--development { color: var(--c-chalk); }
.chip--development::before { background: var(--c-graphite); }
.chip--prototype   { color: var(--c-chalk); border-color: var(--c-line); }
.chip--prototype::before   { background: var(--c-chalk); }
.chip--live        { color: var(--c-bone); border-color: var(--c-line-lit); }
.chip--live::before        { background: var(--t-make); box-shadow: 0 0 7px var(--t-make); }
.chip--completed   { color: var(--c-graphite); border-color: var(--c-line-soft); }
.chip--completed::before   { background: var(--c-graphite); }

.chain {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
  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);
}

.chain__link { display: inline-flex; align-items: center; gap: 0.4em; }

.chain__dot {
  width: 6px;
  height: 6px;
  background: var(--territory);
  flex: none;
}

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


/* ==========================================================================
   08 — APPARATUS
   The three commercial dimensions as technical drawings, never icon cards.
   ========================================================================== */

.appar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: var(--hair) solid var(--c-line);
  transition: border-top-color var(--dur-slow) var(--ease-dimmer);
}

.appar:hover { border-top-color: var(--c-line-lit); }

.appar__fig {
  width: 100%;
  max-width: 13rem;
  height: auto;
  color: var(--c-graphite);
  transition: color var(--dur-slow) var(--ease-dimmer);
}

.appar:hover .appar__fig { color: var(--c-chalk); }

.appar__fig [data-stroke] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.appar__fig [data-accent] {
  fill: none;
  stroke: var(--territory);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
  transition: opacity var(--dur-slow) var(--ease-dimmer);
}

.appar:hover .appar__fig [data-accent] { opacity: 1; }

.appar__n { color: var(--territory); }

.appar__body {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-chalk);
  max-width: 34ch;
}


/* ==========================================================================
   09 — LOG
   The running notebook. Dense, dated, cheap to publish. This is the
   component that makes the museum feel occupied.
   ========================================================================== */

.loglist {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--hair) solid var(--c-line-soft);
}

.log {
  position: relative;
  display: grid;
  gap: var(--sp-2xs) var(--sp-md);
  padding: var(--sp-md) 0;
  border-bottom: var(--hair) solid var(--c-line-soft);
}

@media (min-width: 48rem) {
  .log {
    grid-template-columns: 7rem 1fr 9rem;
    align-items: baseline;
  }
}

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

.log__text {
  font-family: var(--font-display);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-chalk);
  max-width: 60ch;
}

.log__ref { color: var(--territory); }

.log a.log__text,
.log__text a { color: var(--c-bone); }

.log:hover .log__date { color: var(--c-chalk); }
.log:hover .log__text { color: var(--c-bone); }


/* ==========================================================================
   10 — FRAME  (artifact frame)
   All heavy media enters the site through here. Nothing autoplays; the
   visitor throws the switch. This is simultaneously the interaction
   principle and the shared-hosting performance strategy.
   ========================================================================== */

.frame { margin: 0; }

.frame__stage {
  position: relative;
  aspect-ratio: var(--frame-ratio, 16 / 9);
  background: var(--c-vitrine);
  border: var(--hair) solid var(--c-line);
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Poster surface: no stock photography — a lit plane and a grid. */
.frame__poster {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 50% 42%, rgba(239, 234, 225, 0.07), transparent 70%),
    repeating-linear-gradient(90deg, var(--c-line-soft) 0 1px, transparent 1px 8.3333%),
    repeating-linear-gradient(0deg, var(--c-line-soft) 0 1px, transparent 1px 25%),
    var(--c-vitrine);
  transition: opacity var(--dur-slow) var(--ease-dimmer);
}

.frame__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame__switch {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85rem 1.3rem;
  background: rgba(8, 8, 10, 0.55);
  border: var(--hair) solid var(--c-line-lit);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-bone);
  transition: border-color var(--dur-base) var(--ease-dimmer),
              background var(--dur-base) var(--ease-dimmer),
              box-shadow var(--dur-slow) var(--ease-dimmer);
}

.frame__switch:hover,
.frame__switch:focus-visible {
  border-color: var(--c-bone);
  background: rgba(8, 8, 10, 0.75);
  box-shadow: 0 0 40px -8px var(--territory);
}

.frame__stage.is-live .frame__poster,
.frame__stage.is-live .frame__switch { display: none; }

.frame__stage > iframe,
.frame__stage > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: none;
}

.frame__note {
  position: absolute;
  z-index: 2;
  padding: var(--sp-sm);
  text-align: center;
  color: var(--c-graphite);
}

.frame__cap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-md);
  padding-top: var(--sp-2xs);
  color: var(--c-graphite);
}


/* ==========================================================================
   11 — DOOR
   The closing block. Two destinations, equal weight, and the sentence
   repeated small. The last thing read is "the lab is open", not a pitch.
   ========================================================================== */

.door {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  align-items: flex-start;
}

.door__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
}

.door__note {
  max-width: 48ch;
  font-family: var(--font-display);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-graphite);
}


/* ==========================================================================
   12 — COLOPHON
   Identity, the building, elsewhere — then the calibration strip, then the
   line of record. No social icons: there are no accounts to link to, and a
   row of empty glyphs is worse than none.
   ========================================================================== */

.colophon {
  border-top: var(--hair) solid var(--c-line);
  padding-block: var(--sp-xl) var(--sp-lg);
  background: var(--c-vault);
}

.colophon__grid {
  display: grid;
  gap: var(--sp-lg);
}

@media (min-width: 48rem) {
  .colophon__grid { grid-template-columns: 1.7fr 1fr 1fr; gap: var(--sp-xl); }
}

.colophon__mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  font-family: var(--font-structure);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-bone);
}

.colophon__x { font-size: 1.35em; line-height: 1; color: var(--c-chalk); }

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

.colophon__sentence {
  font-family: var(--font-display);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--c-graphite);
  max-width: 44ch;
  margin-top: var(--sp-2xs);
}

.colophon__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
}

.colophon__list a {
  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);
}

.colophon__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

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

.colophon__list a:hover,
.colophon__list a:focus-visible { color: var(--c-bone); }
.colophon__list a:hover .colophon__dot { opacity: 1; }


/* --- THE CALIBRATION STRIP ------------------------------------------------
   A printer's density wedge, or the colour bar on a strip of film leader:
   the reference target you put in the frame so you can tell whether
   everything else is reading true.

   It carries the lab's entire colour inventory — five territories, four
   densities each — which means the site signs off every page by showing
   you its own palette as an instrument. Subtle at rest; the strip comes
   up to full density when you point at it. */

.calib {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-2xl);
  padding-block: var(--sp-sm);
  border-top: var(--hair) solid var(--c-line-soft);
  border-bottom: var(--hair) solid var(--c-line-soft);
}

.calib__label { flex: none; color: var(--c-graphite); }

.calib__label--end { margin-inline-start: auto; }

@media (max-width: 40rem) {
  .calib__label { display: none; }
}

.calib__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.calib__g {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calib__steps { display: flex; gap: 2px; }

.calib__steps i {
  display: block;
  width: 14px;
  height: 7px;
  background: var(--territory);
  transition: opacity var(--dur-slow) var(--ease-dimmer);
}

/* four densities, 25 / 50 / 75 / 100 — a real wedge, not a gradient */
.calib__steps i:nth-child(1) { opacity: 0.12; }
.calib__steps i:nth-child(2) { opacity: 0.26; }
.calib__steps i:nth-child(3) { opacity: 0.44; }
.calib__steps i:nth-child(4) { opacity: 0.66; }

.calib:hover .calib__steps i:nth-child(1) { opacity: 0.25; }
.calib:hover .calib__steps i:nth-child(2) { opacity: 0.5; }
.calib:hover .calib__steps i:nth-child(3) { opacity: 0.75; }
.calib:hover .calib__steps i:nth-child(4) { opacity: 1; }

.calib__k {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-graphite);
  transition: color var(--dur-slow) var(--ease-dimmer);
}

.calib:hover .calib__k { color: var(--c-chalk); }

@media (max-width: 30rem) {
  .calib__steps i { width: 10px; }
}


.colophon__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  margin-top: var(--sp-md);
  color: var(--c-graphite);
}

@media (prefers-reduced-motion: reduce) {
  .calib__steps i,
  .calib__k { transition: none; }
}