:root { --wspine-img: 300px; }



/* ===== WITNESS — The Visual Record · isolated page styles ===== */

/* Runtime tokens only (--paper/--ink/--brass/--rule). Themes with the body[data-theme]. */



/* ---- intro ---- */

.witness-intro {

  max-width: 760px; margin: 64px auto 24px; padding: 0 60px; text-align: center;

}

.witness-intro-eyebrow {

  font-family: var(--mono); font-size: calc(10px * var(--type-scale));

  letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); margin-bottom: 18px;

}

.witness-intro-title {

  font-family: var(--display); font-weight: 400; letter-spacing: 0.06em;

  font-size: calc(60px * var(--type-scale)); color: var(--paper); margin: 0 0 18px;

}

.witness-intro-lede {

  font-family: var(--display); font-style: italic; font-weight: 400;

  font-size: calc(21px * var(--type-scale)); line-height: 1.5; color: var(--paper-soft); margin: 0;

}



/* ---- the spine: a center line with alternating entries ---- */

.wspine {

  position: relative; max-width: 1100px; margin: 56px auto 96px; padding: 0 24px;

}

.wspine-line {

  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;

  background: var(--rule-strong); transform: translateX(-0.5px);

}

.wspine-cap {

  position: relative; width: 9px; height: 9px; margin: 0 auto;

  border: 1px solid var(--brass); background: var(--ink); transform: rotate(45deg);

}



/* one entry = half-width, pushed to its side, anchored to the center node */

.wspine-entry {

  position: relative; width: 50%; box-sizing: border-box; padding: 0 0 72px;

  opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease;

}

.wspine-entry.in { opacity: 1; transform: translateY(0); }

.wspine-left  { margin-right: 50%; padding-right: 56px; text-align: right; }

.wspine-right { margin-left: 50%;  padding-left: 56px;  text-align: left; }



/* the node on the center line */

.wspine-node {

  position: absolute; top: 6px; width: 11px; height: 11px;

  background: var(--brass); border-radius: 50%; box-shadow: 0 0 0 4px var(--ink);

}

.wspine-left  .wspine-node { right: -5.5px; }

.wspine-right .wspine-node { left: -5.5px; }



/* the card (the link into the record) */

.wspine-card { display: inline-block; text-decoration: none; color: inherit; max-width: var(--wspine-img); }

.wspine-frame {

  border: 1px solid var(--rule-strong); padding: 6px; background: var(--ink-2, var(--ink));

  transition: border-color 0.25s ease, transform 0.25s ease;

}

.wspine-card:hover .wspine-frame { border-color: var(--brass); transform: translateY(-2px); }

.wspine-img { display: block; width: 100%; height: auto; filter: grayscale(0.15); }

.wspine-card:hover .wspine-img { filter: grayscale(0); }



.wspine-meta { margin-top: 14px; }

.wspine-year {

  font-family: var(--mono); font-size: calc(13px * var(--type-scale));

  letter-spacing: 0.18em; color: var(--brass); margin-bottom: 6px;

}

.wspine-name {

  font-family: var(--display); font-size: calc(24px * var(--type-scale));

  color: var(--paper); line-height: 1.15;

}

.wspine-une {

  font-family: var(--mono); font-size: calc(11px * var(--type-scale));

  letter-spacing: 0.12em; color: var(--paper-dim); margin-top: 4px;

}



/* the per-entry "view image" trigger */

.wspine-zoom {

  margin-top: 12px; font-family: var(--mono); font-size: calc(10px * var(--type-scale));

  letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-dim);

  background: none; border: none; border-bottom: 1px solid var(--rule-strong);

  padding: 0 0 3px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease;

}

.wspine-zoom:hover { color: var(--brass); border-color: var(--brass); }



/* ---- lightbox (the "view image" overlay) ---- */

.wlightbox {

  position: fixed; inset: 0; z-index: 1000; display: none;

  align-items: center; justify-content: center;

}

.wlightbox.visible { display: flex; }

.wlightbox-scrim { position: absolute; inset: 0; background: rgba(6,5,4,0.9); }

.wlightbox-figure {

  position: relative; z-index: 1; margin: 0; max-width: 90vw; max-height: 90vh;

  display: flex; flex-direction: column; align-items: center;

}

.wlightbox-img { max-width: 90vw; max-height: 78vh; border: 1px solid var(--rule-strong); }

.wlightbox-cap {

  margin-top: 14px; text-align: center; font-family: var(--body);

  font-size: calc(13px * var(--type-scale)); color: var(--paper-soft); max-width: 70ch;

}

.wlightbox-credit {

  display: block; margin-top: 4px; font-family: var(--mono);

  font-size: calc(10px * var(--type-scale)); letter-spacing: 0.12em; color: var(--paper-dim);

}

.wlightbox-close {

  position: absolute; top: -40px; right: 0; background: none; border: none;

  color: var(--paper-soft); cursor: pointer; padding: 6px;

}

.wlightbox-close:hover { color: var(--paper); }

body.wlightbox-open { overflow: hidden; }



/* ---- mobile: collapse the alternating spine to a single left rail ---- */

@media (max-width: 720px) {

  .witness-intro { padding: 0 24px; margin-top: 40px; }

  .witness-intro-title { font-size: calc(44px * var(--type-scale)); }

  .wspine-line { left: 14px; }

  .wspine-entry { width: 100%; margin: 0; padding: 0 0 48px 40px; text-align: left; }

  .wspine-left, .wspine-right { margin: 0; padding: 0 0 48px 40px; text-align: left; }

  .wspine-left .wspine-node, .wspine-right .wspine-node { left: 9px; right: auto; }

  .wspine-cap { margin-left: 14px; }

}





/* ---- header: pin + inset to match the directory exactly ---- */

/* On the directory the chrome is fixed via #directory.active; witness has no such wrapper,

   so the same included .directory-header floats. Re-apply the identical pin + 60px inset here. */

body[data-theme] .directory-header {

  position: fixed; top: 0; left: 0; right: 0; z-index: 50;

  padding-left: 60px; padding-right: 60px;

  background: var(--ink);

}

/* clear the fixed header so the intro doesn't hide under it (directory uses ~73px) */

.witness-intro { margin-top: 112px; }

@media (max-width: 720px) {

  .witness-intro { margin-top: 96px; }

}