/* ---------------------------------------------------------------------------
   Lev Developments: Our Work page (rail rebuild, 2026-09)

   Page-local. Everything here is specific to projects.html: the card grid,
   the expanding timeline rail, and the lightbox. Builds on .section--paper
   from styles.css for the paper ground, ink, and button inversion.

   Hard rule: brass is linework only on paper. Every colour used as text below
   is navy or ink; brass appears only on borders, the timeline, rings, and the
   caret. Contrast floors are measured in work-rail-browser.mjs.
   --------------------------------------------------------------------------- */

/* ---- 0. Band -------------------------------------------------------------- */
.work-band { padding-bottom: clamp(36px, 4.5vw, 56px); }
.work-section { padding-top: clamp(40px, 5vw, 64px); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.work-fallback { margin: 18px 0 0; color: rgba(26,36,51,0.68); }

/* ---- 1. Grid -------------------------------------------------------------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 16px;
  align-items: start;
}
@media (max-width: 1024px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
}

/* ---- 2. Card -------------------------------------------------------------- */
.work-card { position: relative; min-width: 0; }
.work-card-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 5px 5px 12px;
  border: 4px solid var(--navy-base);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  /* Double frame: a 3px paper gap ring painted on top of a 2px inner navy
     line (the line runs from 3px to 5px in from the outer border's inner
     edge). The paper ring is listed first so it sits above the line ring. */
  box-shadow:
    inset 0 0 0 3px var(--card),
    inset 0 0 0 5px rgba(4,38,92,0.35);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #1A2433;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.work-card-btn:focus-visible { outline: 2px solid var(--navy-base); outline-offset: 4px; }
.work-card-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
}
.work-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.work-card-btn:hover,
.work-card.is-active .work-card-btn {
  border-color: var(--brass-line);
  box-shadow:
    inset 0 0 0 3px var(--card),
    inset 0 0 0 5px var(--brass-line);
}
.work-card-btn:hover .work-card-media img { transform: scale(1.02); }
.work-card-name {
  display: block;
  margin: 12px 12px 2px;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.3;
  color: #1A2433;
}
.work-card-loc,
.work-card-date {
  display: block;
  margin: 0 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(26,36,51,0.68);   /* 5.18:1 on paper, the corrected eyebrow ink */
  line-height: 1.7;
}
.work-card-tag {
  display: inline-block;
  margin: 8px 12px 0;
  padding: 3px 8px;
  border: 1px solid var(--brass-line);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-base);       /* navy text inside a brass hairline, never brass text */
}
/* Caret: a brass diamond hanging off the active card, pointing at the rail. */
.work-card.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-right: 2px solid var(--brass-line);
  border-bottom: 2px solid var(--brass-line);
  background: var(--paper);
  transform: rotate(45deg);
  z-index: 2;
}

/* ---- 3. Rail ---------------------------------------------------------------- */
.work-rail {
  grid-column: 1 / -1;
  position: relative;
  margin: 6px 0 4px;
  padding: 14px 0 0;
  border-top: 1px solid rgba(4,38,92,0.18);
  border-bottom: 1px solid rgba(4,38,92,0.18);
  outline: none;
}
.work-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 10px;
}
.work-rail-title { margin: 0; font-family: var(--serif); font-size: 1.15rem; color: #1A2433; }
.work-rail-count { margin: 2px 0 0; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(26,36,51,0.68); }
.work-rail-controls { display: flex; align-items: center; gap: 8px; }
.work-rail-controls button {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(4,38,92,0.35);
  background: transparent;
  color: var(--navy-base);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.work-rail-controls button:hover { background: rgba(4,38,92,0.06); }
.work-rail-controls button:disabled { opacity: 0.35; cursor: default; }
.work-rail-controls button:focus-visible { outline: 2px solid var(--navy-base); outline-offset: 2px; }
.work-rail-close { font-size: 1.1rem; }
.work-rail-status { margin: 0 4px 12px; color: rgba(26,36,51,0.68); }
.work-rail.is-error .work-rail-status { color: #1A2433; }

.work-rail-scroller {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  height: 440px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.work-rail-scroller::-webkit-scrollbar { display: none; }
.work-rail-scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.work-rail.is-loading .work-rail-scroller,
.work-rail.is-error .work-rail-scroller,
.work-rail.is-loading .work-rail-scrub,
.work-rail.is-error .work-rail-scrub { display: none; }

/* The timeline: one brass line across the whole track, a ring per column. */
.work-rail-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 26px 8px 8px;
  min-width: 100%;
  width: max-content;
}
.work-rail-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 2px;
  background: var(--brass-line);
}
.rail-col {
  position: relative;
  flex: 0 0 320px;
  scroll-snap-align: start;
}
.rail-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: -19px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--brass-line);
  background: var(--paper);
}
.rail-col--photo { flex: 0 0 auto; }
.rail-date { margin: 0 0 2px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #1A2433; }
.rail-weather { margin: 0 0 10px; font-size: 0.64rem; letter-spacing: 0.06em; color: rgba(26,36,51,0.68); }
.rail-photo {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(4,38,92,0.18);
  background: var(--card);
  cursor: zoom-in;
  overflow: hidden;
}
.rail-photo:focus-visible { outline: 2px solid var(--navy-base); outline-offset: 3px; }
.rail-photo img { display: block; width: 100%; height: auto; }
.rail-col--log .rail-photo { aspect-ratio: 3 / 2; }
.rail-col--log .rail-photo img { height: 100%; object-fit: cover; }
.rail-col--photo .rail-photo { height: 340px; width: auto; }
.rail-col--photo .rail-photo img { height: 100%; width: auto; }
.rail-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 7px;
  background: rgba(4,38,92,0.88);
  color: var(--paper);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
}
.rail-notes {
  margin: 10px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #1A2433;
}
.rail-notes.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-more {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed rgba(4,38,92,0.5);
  background: transparent;
  color: var(--navy-base);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.rail-col--nophoto .rail-nophoto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 213px;
  margin: 0;
  border: 1px dashed rgba(4,38,92,0.35);
  color: rgba(26,36,51,0.68);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-rail-scrub {
  position: relative;
  height: 2px;
  margin: 10px 4px 14px;
  background: rgba(4,38,92,0.12);
}
.work-rail-scrub-thumb {
  position: absolute;
  top: -1px;
  height: 4px;
  background: var(--brass-line);
  transition: left .12s linear, width .12s linear;
}

@media (max-width: 720px) {
  .work-rail-scroller { height: auto; }
  .rail-col { flex: 0 0 82vw; }
  .rail-col--photo .rail-photo { height: 240px; }
  .work-rail-head { flex-wrap: wrap; }
  .work-card.is-active::after { bottom: -16px; }
}

/* ---- 4. Lightbox ------------------------------------------------------------ */
html.lb-open { overflow: hidden; }
.work-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(1,23,58,0.96);
}
.work-lightbox.is-open { display: flex; }
.work-lightbox-frame { margin: 0; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; }
.work-lightbox-img { display: block; max-width: 92vw; max-height: 78vh; width: auto; height: auto; border: 1px solid var(--brass-faint); background: #000; }
.work-lightbox-caption { margin: 12px 0 0; max-width: 70ch; text-align: center; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--paper); }
.work-lightbox-counter { position: absolute; top: 18px; left: 24px; margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--paper); }
.work-lightbox button {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid var(--paper-line);
  background: rgba(4,38,92,0.6);
  color: var(--paper);
  font-size: 1.2rem;
  cursor: pointer;
}
.work-lightbox button:hover { background: rgba(4,38,92,0.9); border-color: var(--paper); }
.work-lightbox button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.work-lightbox-prev { left: 18px; top: 50%; margin-top: -22px; }
.work-lightbox-next { right: 18px; top: 50%; margin-top: -22px; }
.work-lightbox-close { right: 18px; top: 14px; }
@media (max-width: 720px) {
  .work-lightbox { padding: 12px; }
  .work-lightbox-prev { left: 8px; }
  .work-lightbox-next { right: 8px; }
}