/* The case studies in the lab's language (pages_case.py, 2026-11-09): the hero on the grid paper with
   the card clicked on Work, the overview on a torn sheet, the gallery on the project's colour, the next card */

/* hero: name and numbers on the left, the card on the right */
.opt-d .cl-h .cl-hero { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(30px, 5vw, 90px);
  align-items: center; width: min(1320px, 100%); margin: 0 auto; padding: clamp(30px, 6vh, 70px) var(--pad) clamp(50px, 9vh, 100px); text-align: left; }
.cl-back { display: inline-block; rotate: var(--r); margin-bottom: clamp(22px, 4vh, 40px); }
.cl-back img { display: block; height: 42px; width: auto; }
.cl-tags { font: 600 11px/1.6 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #111; opacity: 0.7; }
.opt-d .cl-title { font-size: clamp(54px, min(7.4vw, 13vh), 132px); margin: 12px 0 14px; line-height: 0.88; }
.cl-client { font: 400 clamp(16px, 1.3vw, 20px)/1.45 var(--sans); color: #111; max-width: 30ch; }
.cl-stats { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-top: clamp(22px, 4vh, 40px); }
.cl-stats dt { font: 400 clamp(26px, 2.4vw, 38px)/1 var(--hero); color: #111; letter-spacing: -0.02em; }
.cl-stats dd { margin: 6px 0 0; max-width: 17ch; font: 400 13px/1.35 var(--sans); color: #111; opacity: 0.7; }
.cl-card { position: relative; margin: 0; }
.cl-card__frame { position: relative; aspect-ratio: 16 / 9; }
.cl-card__img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 30px 64px rgba(0, 0, 0, 0.28); }
.cl-twist { display: block; height: clamp(26px, 2.6vw, 42px); width: auto; margin: clamp(18px, 3vh, 30px) 0 0 4%; rotate: -2deg; }

/* overview: the story on a torn sheet */
.cl-sheet { color: #111; }
.cl-ov { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); padding: clamp(50px, 7vw, 100px) clamp(24px, 6vw, 100px); }
.cl-desc { font: 400 clamp(16px, 1.25vw, 19px)/1.7 var(--sans); max-width: 62ch; margin-top: 14px; }
.cl-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; margin-top: clamp(30px, 5vh, 50px); }
.cl-meta div { border-top: 1px solid rgba(17, 17, 17, 0.18); padding: 10px 0 14px; }
.cl-meta dt { font: 600 10px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.cl-meta dd { margin: 4px 0 0; font: 500 15px/1.4 var(--sans); }
.cl-scope { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cl-scope li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; font: 500 clamp(15px, 1.1vw, 17px)/1.35 var(--sans); }
.cl-tick { display: block; width: 24px; height: auto; }

/* the gallery: the case's chapters and images as they are, on the project's colour */
.cl-gallery { background: var(--pc); padding-top: clamp(60px, 9vh, 110px); margin-top: clamp(60px, 9vh, 110px); }

/* next project: its card and the tape */
.cl-next { display: grid; justify-items: center; gap: 26px; padding: clamp(90px, 12vw, 150px) var(--pad); text-align: center; }
.cl-next__card { display: grid; gap: 10px; width: min(520px, 86vw); color: #f3efe7; text-decoration: none; rotate: 1.5deg; }
.cl-next__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 48px rgba(0, 0, 0, 0.4); transition: translate 0.4s ease; }
.cl-next__card:hover .cl-next__img { translate: 0 -4px; }
.cl-next__name { font: 400 clamp(28px, 3vw, 46px)/1 var(--hero); text-transform: uppercase; letter-spacing: -0.03em; margin-top: 14px; }
.cl-next__cat { font: 600 11px/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.6; }
.cl-next__btn { rotate: var(--r); } .cl-next__btn img { display: block; height: 52px; width: auto; }

@media (max-width: 900px) {
  .opt-d .cl-h .cl-hero, .cl-ov { grid-template-columns: minmax(0, 1fr); }
  .cl-meta { grid-template-columns: minmax(0, 1fr); }
}
.opt-d .hero--c.cl-h { min-height: 0; height: auto; }
.cl-next__card .cl-next__img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: none; }

/* 2026-11-10: the hero is only the name, centred and always inside the screen; no cover photo */
.opt-d .cl-h .cl-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; width: min(1200px, 100%); }
.cl-hero__txt { display: flex; flex-direction: column; align-items: center; }
.cl-card__frame { display: none; }
.cl-card { display: flex; justify-content: center; }
.cl-twist { margin: 4px auto 0; }
.opt-d .cl-title { font-size: clamp(40px, min(8.6vw, 12vh), 124px); text-wrap: balance; white-space: normal !important; max-width: 100%; width: auto !important; }
.cl-client { margin-inline: auto; }
.cl-stats { justify-content: center; }
.cl-stats dd { margin-inline: auto; }
/* the story sheet: centred on the page, not hugging the left */
.cl-ov { width: min(1140px, 100%); margin-inline: auto; box-sizing: border-box; }
/* 2026-11-10: the gallery on the same light grey the portfolio photos are shot on */
.cl-gallery, .cl-gallery .p-scroll-gallery, .cl-gallery .p-cover, .cl-gallery section { background: #ececec !important; }

/* 2026-11-11 (final review): the name always fits the screen. pages_case.py measures the name's longest
   word in the print's font (--lw, its width in em); the name is set at the size where that word fills the
   hero's width at most (100cqi: .cl-hero is the container), and never above the print's own size (--cap).
   Names over 15 characters (.cl-title--long) are capped lower on desktop, so the numbers and the twist
   stay on the first screen. .print.cl-title outranks hero D's own .print sizes (inline, after this file). */
.opt-d .cl-h .cl-hero { container-type: inline-size; }
.opt-d .print.cl-title { --cap: clamp(54px, min(9.6vw, 17.5vh), 172px); font-size: min(var(--cap), (min(100vw, 1200px) - 2 * var(--pad)) / var(--lw, 8.4)); }
@supports (width: 1cqi) { .opt-d .print.cl-title { font-size: min(var(--cap), 100cqi / var(--lw, 8.4)); } }
.opt-d .print.cl-title--long { --cap: clamp(40px, min(7.6vw, 12vh), 124px); }
@media (max-width: 900px) {
  .opt-d .print.cl-title { --cap: calc((100vw - 2 * var(--pad)) / 5.05); }
}
/* nothing in the hero is wider than the hero: the tags and the client line wrap (evenly, no lone word) */
.cl-hero__txt, .cl-card { min-width: 0; max-width: 100%; }
.cl-tags { text-wrap: balance; }
.cl-client { max-width: 60ch; text-wrap: balance; }
.cl-twist { max-width: 100%; }
@media (max-width: 480px) {
  .cl-stats { flex-direction: column; align-items: center; gap: 16px; }
  .cl-stats dd { max-width: 28ch; }
}
/* the gallery's pictures carry their real size (width/height): they keep their shape and their place */
.cl-gallery .p-scroll-gallery img { height: auto; }
/* the next project's category: the mat's grid lines pass behind it, not through it (a soft patch of the
   mat's own tone under the small capitals) */
.cl-next__cat { justify-self: center; padding: 2px 8px; border-radius: 99px; opacity: 1; color: rgba(243, 239, 231, 0.62);
  background: rgb(40, 41, 44); box-shadow: 0 0 8px 5px rgb(40, 41, 44); }
/* a tag never breaks inside itself, not even at its hyphen (Re-Branding): lines break between tags */
.cl-tag { white-space: nowrap; }