/* Scroll-driven work gallery. The paper color follows the existing about panel. */
.work { --work-paper: #fafaf9; --work-ink: #171514; position: relative; z-index: 1; background: var(--work-paper); color: var(--work-ink); }
.work__accessible-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.work__pin { position: relative; height: 100svh; overflow: hidden; background: var(--work-ink); }
.work__scene { position: absolute; inset: 0; perspective: 640px; background-image: radial-gradient(circle, #fafaf940 .65px, transparent .85px); background-size: 24px 24px; }
.work__letters, .work__projects { display: contents; }
.work__letter { position: absolute; left: 50%; pointer-events: none; color: var(--work-paper); will-change: transform; }
.work__letter svg { display: block; width: 100%; height: 100%; overflow: visible; }
.work__letter-shadow { fill: #5e5955; opacity: var(--spread, 0); }
.work__letter-face { fill: currentColor; }
.work__mask { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; transform-origin: center; will-change: transform; }
.work__paper, .work__rim { fill: var(--work-paper); stroke: var(--work-ink); stroke-width: 1; }
.work__grid { fill: none; stroke: var(--work-ink); stroke-width: 1; }
.work__card { position: relative; margin: 0; padding: 6px 6px 0; background: var(--work-ink); color: var(--work-paper); }
.work__card img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }
.work__card figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 9px 3px; font: 600 9px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.work__rail { position: absolute; left: 16px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 16px; border: 1px solid var(--work-ink); background: var(--work-paper); font: 500 8px/1 'Geist Mono', monospace; white-space: nowrap; overflow: hidden; }
.work__rail--top { top: 0; }
.work__rail--bottom { bottom: 0; }
.work__rail i { flex: 1; min-width: 24px; height: 9px; background: repeating-linear-gradient(110deg, transparent 0 3px, var(--work-ink) 3px 4px, transparent 4px 6px); }
.work.is-enhanced { height: 650svh; }
.work.is-enhanced .work__pin { position: sticky; top: 0; }
.work.is-enhanced .work__card { position: absolute; top: 50%; left: 50%; z-index: 2; width: min(50vw, 760px); visibility: hidden; will-change: transform; }
/* A real gallery remains available with JS disabled or reduced motion enabled. */
.work:not(.is-enhanced) { padding: 70px 24px; }
.work:not(.is-enhanced) .work__accessible-title { position: static; width: auto; height: auto; margin: 0 0 30px; clip-path: none; font-size: clamp(40px, 8vw, 110px); }
.work:not(.is-enhanced) .work__pin { height: auto; overflow: visible; background: none; }
.work:not(.is-enhanced) .work__scene { position: static; background: none; }
.work:not(.is-enhanced) .work__projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.work:not(.is-enhanced) .work__mask { display: none; }
@media (max-width: 640px) {
  .work.is-enhanced { height: 700svh; }
  .work.is-enhanced .work__card { width: 82vw; padding: 4px 4px 0; }
  .work__card figcaption { font-size: 7px; letter-spacing: .07em; }
  .work__rail { left: 8px; right: 8px; height: 28px; padding: 0 8px; gap: 8px; font-size: 6px; }
  .work__rail span:nth-of-type(2) { display: none; }
  .work:not(.is-enhanced) .work__projects { grid-template-columns: 1fr; }
}