/* The static version goes straight from a text index to the large case studies. */
.work { padding-top: 0; overflow: clip; }
.work-spiral { margin-inline: calc(-1 * var(--pad)); }
.spiral-stage { position: relative; padding: 55px var(--pad); }
.spiral-topline { position: relative; z-index: 5; }
.spiral-skip { border-bottom: 1px solid currentColor; padding: 7px 0; }
.spiral-skip:hover { color: var(--lime); }
.spiral-title { margin: 70px 0 25px; font-size: clamp(42px, 7.8vw, 138px); font-weight: 450; line-height: 1.02; letter-spacing: -.075em; }
.spiral-title > span { display: block; }
.spiral-title > span:last-child { text-align: right; color: var(--lime); }
.spiral-description { color: #b3baa7; font-size: 15px; line-height: 1.5; }
.spiral-ribbon { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 35px; }
.spiral-card { display: block; position: relative; outline-offset: 5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.spiral-card > img { display: none; }
.spiral-caption { font-size: 13px; line-height: 1.6; }
.spiral-caption > span:last-child { display: none; }
.spiral-card:hover, .spiral-card:focus-visible { outline: 2px solid var(--lime); }
.spiral-footer { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-top: 40px; font-size: 12px; color: #aeb59f; }
.spiral-footer p { margin: 0; line-height: 1.7; }
.spiral-scroll-note, .spiral-progress { display: none; }
.case-list-heading { display: flex; justify-content: space-between; padding: 30px 0 25px; border-top: 1px solid var(--line); margin: 50px 0 40px; scroll-margin-top: 35px; }
.case-list-heading:focus { outline: none; }
.project[id] { scroll-margin-top: 35px; }
.project:focus { outline: none; }
.project:target .project-image, .project:focus-visible .project-image { outline: 2px solid var(--lime); outline-offset: 7px; }
/* The real list occupies the last pinned viewport, then continues in normal flow.
   Only its first visible row has WebGL doubles; there is no intermediate grid. */
.work-immersive .case-landing { position: relative; z-index: 3; margin-top: calc(-1 * var(--spiral-height)); pointer-events: none; }
.work-immersive .case-list-heading { margin: 0 0 35px; padding: 28px 0 17px; border-top: 0; border-bottom: 1px solid var(--line); }
.work-immersive .project.reveal { opacity: 1; transform: none; transition: none; }
.work-immersive .project:not(.project-landing) { pointer-events: auto; }
.project-landing .project-image { background: transparent; }
.project-landing:not(.is-landed) .project-image { outline-color: transparent; }
.project-landing .project-image > img { opacity: var(--case-image, 0); }
.project-landing .project-image > :not(img):not(.project-open) { opacity: var(--case-details, 0); }
.project-landing > :not(.project-image) { opacity: var(--case-details, 0); transform: translateY(var(--case-detail-offset, 18px)); }
.project-landing { --case-image: 0; --case-details: 0; }
.spiral-webgl .spiral-stage { height: 100svh; min-height: 480px; padding: 0; overflow: clip; isolation: isolate; }
/* --spiral-arrive is set by spiral.js: the content sits lower while the section approaches
   and glides into place after the pin engages, so scrolling never stops dead. */
.spiral-webgl .spiral-scene, .spiral-webgl .spiral-title, .spiral-webgl .spiral-topline, .spiral-webgl .spiral-footer { transform: translate3d(0, var(--spiral-arrive, 0px), 0); }
.spiral-webgl .spiral-topline { position: absolute; top: 28px; left: var(--pad); right: var(--pad); padding-bottom: 15px; }
.spiral-webgl .spiral-title { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.spiral-webgl .spiral-title > span { position: absolute; top: 29%; left: var(--pad); white-space: nowrap; will-change: transform; }
.spiral-webgl .spiral-title > span:last-child { top: 54%; left: auto; right: var(--pad); }
.spiral-webgl .spiral-description { position: absolute; top: 47%; left: 50%; margin: 0; transform: translate(-50%, calc(-50% + var(--spiral-arrive, 0px))); text-align: center; pointer-events: none; }
.spiral-webgl .spiral-scene { position: absolute; inset: 0; z-index: 2; }
.spiral-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.spiral-webgl .spiral-ribbon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.spiral-webgl .spiral-footer { position: absolute; z-index: 5; bottom: 28px; left: var(--pad); right: var(--pad); padding: 0; pointer-events: none; }
.spiral-webgl .spiral-scroll-note, .spiral-webgl .spiral-progress { display: block; }
.spiral-progress { width: 100px; height: 2px; margin-bottom: 8px; background: #626a54; }
.spiral-progress > span { display: block; height: 100%; background: var(--lime); transform-origin: left; transform: scaleX(var(--spiral-progress, 0)); }
.spiral-hover-label { position: absolute; left: 50%; bottom: 78px; z-index: 6; transform: translateX(-50%); padding: 10px 16px; border-radius: 30px; background: var(--paper); color: var(--ink); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .15s; white-space: nowrap; }
.spiral-hover-label.is-visible { opacity: 1; }
/* Touch layouts stay in document flow. No pin spacer, shifted case list or
   scroll-scrubbed assembly can hold the page at the boundary between sections. */
.work-native .spiral-stage { height: 100svh; min-height: 480px; max-height: 960px; }
.work-native .case-list-heading { margin-top: 0; }
.work-native .project.reveal { opacity: 1; transform: none; transition: none; }
@media (max-width: 767px) {
  .spiral-stage { padding-top: 35px; padding-bottom: 40px; }
  .spiral-title { font-size: 9vw; margin-top: 50px; }
  .spiral-ribbon { gap: 12px 24px; }
  .spiral-webgl .spiral-topline { top: 20px; }
  .spiral-webgl .spiral-title > span { top: 32%; }
  .spiral-webgl .spiral-title > span:last-child { top: 55%; }
  .spiral-webgl .spiral-description { top: 46%; font-size: 12px; }
  .spiral-caption { font-size: 9px; padding: 7px 9px; }
  .spiral-caption > span:last-child { display: none; }
  .spiral-footer { font-size: 10px; }
  .spiral-webgl .spiral-progress { width: 40px; }
  .spiral-webgl .spiral-scroll-note { max-width: 90px; line-height: 1.6; text-align: right; }
  .spiral-webgl .spiral-footer { gap: 12px; bottom: 24px; }
  .spiral-topline .eyebrow, .case-list-heading .eyebrow { font-size: 10px; }
  .spiral-hover-label { font-size: 10px; bottom: 90px; max-width: 90%; white-space: normal; }
  .case-list-heading { margin-bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) { .spiral-card { transition: none; } }