/* ══════════════════════════════════════════════════════════════════════
   work-rail.css — the horizontal "Selected work" rail.

   Everything here is namespaced hz- and scoped under .hz, so nothing
   leaks into the nav, the deck, or any other section. It borrows the
   site's tokens (--ink, --muted, --f, --nav-h, --ease) and adds only
   what the rail itself needs.

   The pin is the same trick the old deck used: the section is taller
   than the screen, and .hz-pin sticks inside that extra length. JS
   turns scroll progress through that runway into translateX on the
   track. No animation library involved.
   ══════════════════════════════════════════════════════════════════════ */

.hz {
  /* Local hairline. The global --border is deliberately transparent
     site-wide, so the rail defines its own rather than flipping it. */
  --hz-line: rgba(17, 17, 17, 0.14);
  --hz-runway: 0px;          /* set by JS = total horizontal travel */
  --hz-gutter: 2.5rem;       /* page gutter, matched across the homepage sections */
  /* Two panels share the screen; capped so ultra-wide covers don't outgrow the pin's height */
  --hz-panel-w: min(calc((100vw - 2 * var(--hz-gutter)) / 2), 960px);

  position: relative;
  z-index: 2;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Same grainy grey field the Selected work block already sits on, so
     the rail reads as the same band in the page. Tokens live in style.css
     and are shared with the contact footer. */
  background-color: var(--grain-bg);
  background-image: var(--grain-img);
  /* `clip`, not `hidden` — hidden would make this a scroll container and
     the sticky pin inside would never pin. */
  overflow: clip;
}

/* The runway only exists when JS has decided to pin. Without the class
   the section is its natural height and the rail just sits there. */
.hz.is-pinned {
  min-height: calc(100svh - var(--nav-h) + var(--hz-runway));
}

.hz-pin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1.25rem, 3.5vh, 2.75rem) 0;
}
.hz.is-pinned .hz-pin {
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
}

/* ── Header ────────────────────────────────────────────────────────── */
/* Heading and metadata read as one editorial lockup, so the meta sits
   beside the display line rather than being pushed to the far margin. */
.hz-head {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
  padding: 0 var(--hz-gutter);
}

.hz-eyebrow { margin-bottom: 0.5rem; }

.hz-display {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: var(--h-size);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Editorial metadata block — label/value pairs beside the display line.
   The project count is filled in from work-data.js; the rest is set in
   index.html's .hz-meta markup. */
.hz-meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.15rem 1.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  padding-bottom: 0.6rem;
}
.hz-meta dt { color: var(--muted); }
.hz-meta dd { color: var(--accent); }

/* ── Track ─────────────────────────────────────────────────────────── */
.hz-viewport { overflow: hidden; }

.hz-track {
  display: flex;
  align-items: stretch;
  list-style: none;
  padding: 0 var(--hz-gutter);
  margin: 0;
  width: max-content;
  will-change: transform;
}

.hz-panel {
  flex: 0 0 var(--hz-panel-w);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 clamp(1.25rem, 2.5vw, 2.25rem);
}
/* Full-height vertical hairlines between panels */
.hz-panel + .hz-panel { border-left: 1px solid var(--hz-line); }

/* ── Media card ────────────────────────────────────────────────────── */
.hz-card {
  position: relative;
  display: block;
  padding-left: 1.75rem;   /* the gutter the spine label sits in */
  color: inherit;
}

.hz-spine {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

.hz-media {
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 10;
}
.hz-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Parallax drift is written here by JS; the track owns the big move. */
  will-change: transform;
}

/* The parallax slides the image inside its frame, so an image that exactly
   fills the box uncovers the frame's own background at whichever edge it
   drifts away from — a pale sliver that slides about as you scroll. Giving
   it more width than the frame means there is always image under the edge.
   Must exceed the largest drift PARALLAX can produce (~19px). */
.hz[data-media="frame"] .hz-media img {
  width: calc(100% + 56px);
  margin-left: -28px;
}

/* ── Media treatment: editorial frame (default) ──────────────────────
   No mat — the photograph runs to the edge of its frame. The hairline and
   the restrained shadow are what hold it, not a white border. */
.hz[data-media="frame"] .hz-media {
  border: 1px solid var(--hz-line);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06);
}
.hz[data-media="frame"] .hz-media img { transition: transform 0.65s var(--ease); }

/* ── Media treatment: CD jewel case (toggle) ───────────────────────────
   Flip data-media="jewel" on the .hz section to switch. Nothing else
   changes — the markup and the JS are identical for both. */
.hz[data-media="jewel"] .hz-media {
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  border-radius: 3px;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0) 55%),
    linear-gradient(to right, rgba(255,255,255,0.75) 0 6px, rgba(190,195,200,0.5) 6px 9px, rgba(255,255,255,0.15) 9px 100%),
    rgba(230, 232, 234, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    inset 0 0 0 2px rgba(17, 17, 17, 0.06),
    0 10px 30px rgba(17, 17, 17, 0.16);
  backdrop-filter: blur(1px);
}
.hz[data-media="jewel"] .hz-media img { border-radius: 1px; }
.hz[data-media="jewel"] .hz-spine { color: var(--ink); opacity: 0.55; }

@media (hover: hover) {
  .hz-card:hover .hz-media img { transform: scale(1.03); }
}

/* In-progress projects render as a plain div — no link, no hover lift. */
.hz-card.is-wip { cursor: default; }
.hz-card.is-wip .hz-media { opacity: 0.62; }
@media (hover: hover) {
  .hz-card.is-wip:hover .hz-media img { transform: none; }
}

/* ── Body ──────────────────────────────────────────────────────────── */
.hz-title {
  font-family: var(--f);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hz-role {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.hz-wip {
  color: var(--ink);
  border: 1px solid var(--hz-line);
  padding: 0.1em 0.5em;
  margin-left: 0.4em;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hz-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ── Tablet and below: no pin. Native horizontal swipe with snap. ──── */
@media (max-width: 900px) {
  .hz { --hz-panel-w: min(78vw, 380px); --hz-gutter: 1.5rem; }
  .hz-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hz-viewport::-webkit-scrollbar { display: none; }
  .hz-track { transform: none !important; }
  .hz-panel { scroll-snap-align: start; }
  .hz-media img { transform: none !important; }
}

/* ── Reduced motion: no pin, no parallax, no rail. A plain stack. ──── */
@media (prefers-reduced-motion: reduce) {
  .hz { --hz-panel-w: auto; }
  .hz-viewport { overflow: visible; }
  .hz-track {
    flex-direction: column;
    width: auto;
    gap: 3rem;
    transform: none !important;
    will-change: auto;
  }
  .hz-panel { padding: 0; }
  .hz-panel + .hz-panel {
    border-left: 0;
    border-top: 1px solid var(--hz-line);
    padding-top: 3rem;
  }
  .hz-media img { transform: none !important; transition: none; }
}