/* Wolf Road, the clean case layout (2026-10-07), on the grammar of twks.ch's project pages at Daniel's call: Inter
   only, one text size for everything but the name, the particulars in the mono on the left, the job explained on
   the right with a See more that opens Problem, Solution and Result, then the work stacked full width and in pairs
   with the thinnest of gaps. Loaded after case.css on pages marked .cs--clean. Measured from the reference at
   1492 wide: name 52.8px/600 on one line and a grey second line, everything else 20px on 24px, a six-column grid
   with the blurb over the last two, hairlines in place of headings, 10px between pictures. */

.cs--clean { --cl-text: clamp(1.02rem, 0.9rem + 0.45vw, 1.25rem); --cl-gap: 10px; --cl-grey: #8c8c8c; }
.cs--clean, .cs--clean p, .cs--clean dl, .cs--clean h2, .cs--clean button { font-family: var(--body); font-weight: 400; font-size: var(--cl-text); line-height: 1.2; letter-spacing: 0.01em; }

/* The head: a long breath after the bar, then the name and its line at the same size, the second in grey. */
.cs--clean .cs__head { display: block; padding-top: clamp(4rem, 12vh, 9rem); }
.cs--clean .cs__head .case__back { display: inline-block; margin-bottom: clamp(2rem, 6vh, 4rem); }
.cl-title { margin: 0; font-family: var(--body); font-weight: 600; font-size: clamp(2.2rem, 3.54vw, 3.3rem); line-height: 1; letter-spacing: -0.01em; text-transform: none; color: var(--white); text-wrap: balance; }
.cl-title span { display: block; color: var(--cl-grey); }

/* The particulars and the blurb: six columns under a hairline; three mono lists at the left, the words over the
   last two columns. */
.cl-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 8px; row-gap: 2.4rem; margin-top: clamp(3rem, 8vh, 5rem); padding-top: 1rem; border-top: 1px solid var(--hairline); }
.cl-dl { margin: 0; font-family: var(--digital); font-size: calc(var(--cl-text) * 0.78); letter-spacing: 0.12em; line-height: 1.55; text-transform: uppercase; }
.cl-dl dt { margin: 0 0 1lh; color: var(--cl-grey); }
.cl-dl dd { margin: 0; color: var(--white); }
.cl-dl dd a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--hairline-strong); }
.cl-blurb { grid-column: 5 / 7; }
.cl-blurb p { margin: 0 0 1lh; color: var(--white); text-wrap: pretty; }
.cl-blurb > p:first-child { text-indent: 3.4em; }
.cl-blurb p:last-child { margin-bottom: 0; }
/* the fold: Problem, Solution and Result, closed until asked for; the button under its own hairline, the arrow
   turning when it is open */
.cl-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease); }
.cl-more.is-open, .cl-more.is-static { grid-template-rows: 1fr; } /* static: no script, so the three sections simply show */
.cl-more__in { overflow: hidden; }
.cl-more section { padding-top: 2.4rem; }
.cl-more section:last-child { padding-bottom: 2.4rem; }
.cl-more h2 { margin: 0 0 1lh; color: var(--white); }
.cl-more p { color: var(--text-soft); }
.cl-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 1.5rem; padding: 0.75rem 0 0; border: 0; border-top: 1px solid var(--hairline); background: none; color: var(--white); text-align: left; cursor: pointer; }
.cl-toggle b { font-weight: 400; }
.cl-toggle .is-close, .cl-toggle[aria-expanded="true"] .is-more { display: none; }
.cl-toggle[aria-expanded="true"] .is-close { display: inline; }
.cl-toggle i { font-style: normal; display: inline-block; transition: transform 0.5s var(--ease); }
.cl-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.cl-toggle:hover { color: var(--red-text); }
@media (prefers-reduced-motion: reduce) { .cl-more, .cl-toggle i { transition: none; } }

/* The work: the lead film full width, then rows of one, two or three with the thinnest gap, no headings. */
.cs--clean .cs__film { margin-top: clamp(3rem, 8vh, 5rem); }
.cs--clean .cs__film figcaption, .cl-row figcaption { margin-top: 0.6rem; font-family: var(--digital); font-size: calc(var(--cl-text) * 0.72); letter-spacing: 0.12em; line-height: 1.5; text-transform: uppercase; color: var(--cl-grey); }
.cs--clean .cs__film figcaption b, .cl-row figcaption b { font-weight: 400; color: var(--white); }
.cl-stack { display: grid; gap: var(--cl-gap); margin-top: var(--cl-gap); }
.cl-row { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--cl-gap); }
.cl-row figure { margin: 0; }
.cl-row img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--frame); }
.cl-row--2 img { aspect-ratio: 3 / 2; }
.cl-row--3 img { aspect-ratio: 4 / 5; }
.cl-row--1 img { aspect-ratio: 3 / 2; }
.cl-row .case__film img { aspect-ratio: auto; }
.cl-row .case__film--sub img { view-transition-name: none; }
.cl-row .case__play-icon { width: 3.4rem; height: 3.4rem; }
.cl-stack .cl-gap { height: clamp(2rem, 6vh, 4rem); } /* a breath between the films and the stills */
.cs--clean .case__next { margin-top: clamp(3rem, 8vh, 5rem); }

@media (max-width: 1023px) {
  .cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-blurb { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .cs--clean .cs__head { padding-top: 2rem; }
  .cl-grid { grid-template-columns: 1fr; row-gap: 1.8rem; }
  .cl-dl dt { margin-bottom: 0.4rem; }
  .cl-blurb > p:first-child { text-indent: 0; }
  .cl-row--2 { grid-template-columns: 1fr; }
  .cl-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Six 9:16 films in a row (Dreamstate), three on phones; a pair of 4:5 cuts keeps its shape from the frame. */
.cl-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cl-row .asset__media img { height: 100%; }
@media (max-width: 767px) { .cl-row--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }