/* Wolf Road, the case pages as pinned chapters (2026-10-01; js/case-chapters.js), on the frame of the home's work
   section. Loaded after door.css and fx.css; the film, its play button and the next project keep their door.css
   styles. */

.cs { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: calc(6.6rem + env(safe-area-inset-top, 0px)) var(--gutter) clamp(3rem, 6vh, 5rem); }
.cs .asset { opacity: 1; } /* the old page dimmed every picture but the one in view */

/* The head: the name huge on the left, the line and the scope low on the right. */
.cs__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: clamp(2rem, 4vw, 5rem); align-items: end; }
.cs__head .case__back { grid-column: 1 / -1; justify-self: start; }
.cs__title { margin: 0; font-family: var(--head); font-weight: var(--head-weight); font-size: clamp(3rem, 8.4vw, 10rem); line-height: var(--head-leading); letter-spacing: var(--head-track); word-spacing: var(--head-word); text-transform: var(--head-case); text-wrap: balance; color: var(--white); }
.cs__meta { padding-bottom: 0.5rem; }
.cs__line { margin: 0; color: var(--grey); line-height: 1.8; text-transform: none; letter-spacing: 0.04em; font-size: 0.82rem; }
.cs__line b { font-weight: 400; color: var(--white); } /* the format, first line on the right */
.cs__scope { list-style: none; margin: 0.9rem 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; font-size: 0.72rem; letter-spacing: 0.14em; }
.cs__scope li { color: var(--white); line-height: 1.8; }
.cs__scope li::before { content: "/ "; color: var(--red-text); }

/* The film, wide, under the head. */
.cs__film { margin: clamp(2rem, 5vh, 3.4rem) 0 0; }
.cs__film figcaption { margin-top: 0.7rem; color: var(--grey); }

/* The chapters, stacked (phones, reduced motion, no script): each chapter's words, then the pictures. */
.cs__chapters { margin-top: clamp(3rem, 8vh, 6rem); }
.cs__ruler { display: none; }
.cs__text { display: grid; gap: clamp(2rem, 5vh, 3rem); }
.cs__k { margin: 0 0 1rem; font-family: var(--digital); font-weight: 400; font-size: clamp(1.05rem, 0.8rem + 0.7vw, 1.55rem); line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red-text); } /* the site's one mono, set big enough to read at a glance */
.cs__copy { margin: 0; max-width: 32ch; font-family: var(--body); font-weight: 500; font-size: clamp(1.35rem, 0.9rem + 1.3vw, 2.3rem); line-height: 1.18; letter-spacing: -0.02em; color: var(--white); text-wrap: pretty; }
.cs__window { margin-top: clamp(2rem, 5vh, 3rem); }
.cs__strip { display: grid; gap: clamp(1.4rem, 4vh, 2.4rem); }
.cs__frame { position: relative; margin: 0; overflow: hidden; background: var(--frame); }
.cs__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cs__frame figcaption { margin-top: 0.7rem; color: var(--grey); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; }

/* Pinned (desktop): the section holds while the scroll runs through the chapters. The ruler on the left, the words
   of the chapter in view beside it, its picture in the window on the right, the pictures running up through it. */
.cs__chapters.is-pinned { height: calc(100svh + (var(--n) - 1) * 80svh); margin-top: clamp(2rem, 5vh, 4rem); }
.is-pinned .cs__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: center; }
.is-pinned .cs__ruler { display: flex; gap: 0.7rem; height: min(40svh, 22rem); align-self: center; }
.cs__marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.cs__mark { display: block; padding: 0.2rem 0; font-family: var(--digital); font-size: 0.72rem; letter-spacing: 0.14em; line-height: 1; color: var(--mark-rest); transition: color 0.4s var(--ease); }
.cs__mark.is-on { color: var(--white); }
.cs__track { position: relative; width: 6px; height: 100%; container-type: size; background: repeating-linear-gradient(to bottom, var(--hairline-strong) 0 1px, transparent 1px 9px); background-position: 0 0.35rem; }
.cs__marker { position: absolute; left: -3px; top: 0; width: 12px; height: 2px; margin-top: 0.3rem; background: var(--red); box-shadow: 0 0 10px var(--red-glow); will-change: transform; }
.is-pinned .cs__text { display: grid; gap: 0; align-self: center; }
.is-pinned .cs__ch { grid-area: 1 / 1; opacity: 0; transform: translateY(1.2rem); transition: opacity 0.6s var(--slow), transform 0.8s var(--ease); pointer-events: none; }
.is-pinned .cs__ch.is-on { opacity: 1; transform: none; pointer-events: auto; }
.is-pinned .cs__window { margin: 0; width: 100%; aspect-ratio: 16 / 10; max-height: 70svh; overflow: hidden; background: var(--frame); }
.is-pinned .cs__strip { display: block; height: 100%; will-change: transform; }
.is-pinned .cs__frame { height: 100%; }
.is-pinned .cs__frame img { height: 100%; aspect-ratio: auto; transform: scale(1.18); will-change: transform; }
.is-pinned .cs__frame figcaption { position: absolute; left: 1rem; bottom: 0.9rem; margin: 0; color: var(--white); text-shadow: 0 1px 10px var(--shade-bar); }

/* The rest of the stills: a grid, every third one across the full width. */
.cs__gallery { margin-top: clamp(3rem, 8vh, 6rem); }
.cs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.cs__shot { margin: 0; }
.cs__shot.is-wide, .cs__shot:last-child:nth-child(3n + 2) { grid-column: 1 / -1; } /* a picture left on its own at the end runs across too */
.cs__shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--frame); }
.cs__shot figcaption { margin-top: 0.7rem; color: var(--grey); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: none; }

@media (max-width: 767px) {
  .cs__head { grid-template-columns: 1fr; row-gap: 1.2rem; }
  .cs__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .is-pinned .cs__ch { transition: none; } }

/* The film's play mark, alone in the middle of the frame (2026-10-02): no label, no running time. */
.cs__film .case__play { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.cs__film .case__play-icon { width: clamp(4rem, 3rem + 3vw, 5.6rem); height: clamp(4rem, 3rem + 3vw, 5.6rem); }
.cs__film .case__play-icon svg { width: 34%; height: 34%; }
.cs__film .asset__media::after { display: none; } /* the fade was there for the label */

/* The stills: a small heading like the home's "The work" and "The method" dividers, then the pictures full bleed,
   edge to edge across the screen. */
.cs__divider { display: flex; align-items: center; justify-content: center; gap: clamp(0.9rem, 2vw, 1.6rem); margin: 0 0 clamp(1.6rem, 4vh, 2.6rem); font-family: var(--digital); font-weight: 400; font-size: clamp(0.78rem, 0.62rem + 0.45vw, 1.05rem); line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: var(--white); }
.cs__divider::before, .cs__divider::after { content: ""; flex: 0 0 clamp(2.5rem, 10vw, 9rem); height: 1px; background: var(--grey); opacity: 0.6; }
.cs__gallery .cs__grid { width: 100vw; margin-left: calc(50% - 50vw); }
.cs__shot figcaption { padding-inline: var(--gutter); }
body.case-page { overflow-x: clip; } /* the full-bleed grid reaches the window's edge; never a sideways scroll */
@media (max-width: 767px) { .cs__divider { white-space: normal; } .cs__divider::before, .cs__divider::after { flex-basis: 1.5rem; } }

/* The format sits under the name, left (2026-10-02); the scope alone on the right, its hairline as the top rule. */
.cs__name .cs__line { margin-top: clamp(0.8rem, 1.6vh, 1.2rem); font-family: var(--digital); font-weight: 400; font-size: clamp(0.78rem, 0.62rem + 0.45vw, 1.05rem); line-height: 1.6; letter-spacing: 0.22em; text-transform: uppercase; } /* the same mono as the stills heading and the home's dividers */
.cs__meta > .cs__scope:first-child { margin-top: 0; }