/* The case study: a calm documentary on paper. Numbered plates, one short paragraph each, real figures.
   Ported from 05-Motion-Prototype/css/case.css (the locked P4 composition). P02 adds: the two film entries under
   04 Craft, the transcript's "Shown" lines, the visitor-facing 05 Validation, and (css/large.css) the case's spacing
   on large screens. Reading text keeps its measure (--measure, about 68 characters) at every width. */

.case { position: relative; padding-top: var(--nav-h); }
.case .rule-h.top { top: var(--nav-h); }
.c-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding: 0 var(--m); position: relative; }

/* opening: number, headline, contents, drafting hairline with its return, meta row */
.c-open { padding-top: 86px; }
.c-open .num { grid-column: 1; padding-top: 18px; }
.c-open h1 { grid-column: 2 / span 8; font-size: clamp(4rem, 8.6vw, calc(7.75rem * var(--display-boost))); }
.c-open .toc { grid-column: 10 / span 3; align-self: start; margin-top: 14px; border-top: 1px solid var(--hair); }
.c-open .toc li { border-bottom: 1px solid var(--hair); }
.c-open .toc a { display: flex; gap: 1.6em; padding: 11px 0; color: var(--ink); transition: color var(--t-micro) var(--expo); }
.c-open .toc a .dim { color: var(--ink-3); }
.c-open .toc a:hover { color: var(--accent); }
.c-hair { position: relative; margin: 76px var(--m) 0; height: 1px; }
.c-hair .ln { position: absolute; inset: 0; background: var(--ink); opacity: 0.85; }
.c-hair .ret { position: absolute; right: 0; top: 0; width: 1px; height: 18px; background: var(--ink); opacity: 0.85; transform-origin: 50% 0; transform: scaleY(0); transition: transform 500ms var(--expo); transition-delay: 900ms; }
.c-hair.draw-in .ret { transform: scaleY(1); }
.c-hair .tick { position: absolute; top: -5px; width: 1px; height: 11px; background: var(--ink); opacity: 0.5; }
.c-meta { padding-top: 34px; padding-bottom: 40px; }
.c-meta > div { grid-column: span 3; }
.c-meta > div:first-child { grid-column: 2 / span 3; }
.c-meta > div:nth-child(2), .c-meta > div:nth-child(3) { grid-column: span 3; }
.c-meta > div:last-child { grid-column: span 2; }
.c-meta .v { font-size: var(--fs-body); color: var(--ink); margin-top: 8px; }

/* phones only: the charge opens the case study (the same figure 01 Problem shows on wider screens) */
.c-lead { display: none; }

/* sections */
.c-sec { position: relative; padding: 110px 0 40px; scroll-margin-top: 20px; }
.c-sec > .rule-h { top: 0; }
.c-sec .txt { grid-column: 2 / span 4; }
.c-sec h2 { font-size: var(--fs-section); margin: 14px 0 20px; text-wrap: balance; }   /* no one-word last line (P02) */
.c-sec .body + .body { margin-top: 14px; }
.c-sec figcaption, .c-sec .cap { margin-top: 16px; color: var(--ink-3); }

/* 01: the picture bleeds off the right edge */
.s-problem .fig { grid-column: 7 / span 6; margin-right: calc(var(--m) * -1); }
.s-problem .fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* 02: specimens laid on a slightly darker bed, and the pull figure */
.s-thinking .txt { grid-column: 1 / span 4; }
.pull { grid-column: 1 / span 4; margin-top: 90px; padding-left: calc(var(--u)); font-family: var(--serif); font-weight: 600; font-size: clamp(6rem, 10vw, calc(9.375rem * var(--display-boost))); letter-spacing: -0.055em; line-height: 0.85; }
.pull em { font-size: 0.5em; font-style: italic; font-weight: 400; letter-spacing: -0.055em; margin-left: 0.1em; }
.bed { grid-column: 6 / span 7; grid-row: 1 / span 2; position: relative; background: rgba(214, 204, 184, 0.35); box-shadow: inset 0 0 0 1px rgba(31, 30, 27, 0.08);
  aspect-ratio: 780 / 640; }
.bed img { position: absolute; height: auto; box-shadow: 0 18px 26px -18px rgba(40, 32, 20, 0.45), 0 2px 4px rgba(40, 32, 20, 0.08); }
.spec { transform: rotate(var(--r, 0deg)) translateY(var(--drop, 0px)); }
.bed .sp0 { left: 7.5%; top: 6.5%; width: 39%; --r: -0.6deg; }
.bed .sp1 { left: 53%; top: 13.5%; width: 38.5%; }
.bed .sp2 { left: 54.5%; top: 43%; width: 38.5%; --r: 0.4deg; }
.bed .sp3 { left: 50.5%; top: 77%; width: 42%; --r: -0.3deg; }
.bed + .cap { grid-column: 6 / span 7; }

/* 03: three phones at one device size, offset in height */
.s-product .txt { grid-column: 1 / span 4; }
.phones { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--g) * 2); align-items: start; }
.phone-fig:nth-child(2) { margin-top: 90px; }
.phone-fig:nth-child(3) { margin-top: 44px; }
.phone { border-radius: 13.5% / 6.3%; padding: 3.2%; background: #23262A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 60px -34px rgba(40, 32, 20, 0.55), 0 10px 18px -12px rgba(40, 32, 20, 0.35); }
.phone img { width: 100%; height: auto; aspect-ratio: 780 / 1688; border-radius: 11.4% / 5.3%; }
.phone-fig figcaption { margin-top: 20px; }
.phone-fig figcaption .small { margin-top: 6px; max-width: 17.5rem; }

/* 04: craft, the film moment, and the evidence it hands back */
.s-craft .txt { grid-column: 1 / span 5; }
/* Play film / Audio described: two quiet rows, each a link-style button and its length in mono */
.s-craft .play-open { margin-top: 26px; display: grid; row-gap: 2px; }
.s-craft .play-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; min-height: 44px; }
/* the film as text: a quiet disclosure under Play film */
.transcript { margin-top: 18px; }
.transcript summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ink-2); list-style: none; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after { content: '+'; margin-left: 0.8em; font-family: var(--mono); }
.transcript[open] summary::after { content: '\2212'; }
.transcript ol { margin-top: 8px; border-top: 1px solid var(--hair); }
.transcript li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.transcript .shown { color: var(--ink-3); margin-top: 4px; }
.evidence { padding-top: 120px; padding-bottom: 40px; scroll-margin-top: 0; }
.evidence .film-side { grid-column: 5 / span 4; position: relative; }
.evidence .film-side img { width: 100%; height: auto; box-shadow: 0 18px 26px -18px rgba(40, 32, 20, 0.45); background: #F3EFE6; }
.evidence .film-side img + img { margin-top: 10px; }
.evidence .app-side { grid-column: 10 / span 3; }
.evidence .app-side .phone { max-width: 300px; }

/* 05: validation, only real evidence */
.s-valid .txt { grid-column: 1 / span 4; }
.ev-list { grid-column: 6 / span 7; border-top: 1px solid var(--hair); }
.ev-list > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--g); padding: 18px 0 20px; border-bottom: 1px solid var(--hair); }
.ev-list dd { font-size: 0.96875rem; line-height: 1.5; color: var(--ink); max-width: var(--measure); }
.ev-open { grid-column: 6 / span 7; margin-top: 20px; max-width: var(--measure); color: var(--ink-3); }

/* the gallery module (any project, P06 project-ready architecture): figures in two columns beside the text, in the
   same paper-and-shadow language as the other figures */
.gallery { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); row-gap: 40px; align-items: start; }
.gallery img { width: 100%; height: auto; box-shadow: 0 18px 26px -18px rgba(40, 32, 20, 0.45); }

.c-end { padding: 140px 0 120px; position: relative; }
.c-end .rule-h { top: 60px; }
.c-end .back { grid-column: 1 / span 4; }
.c-end .back .h { font-size: var(--fs-section); margin-top: 12px; }
.c-end .back .h a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size var(--t-micro) var(--expo); }
.c-end .back .h a:hover { background-size: 0 1px; background-position: 100% 100%; }
.c-end .contact { grid-column: 9 / span 4; align-self: end; }
.c-end .contact .positioning { display: block; margin-bottom: 18px; max-width: 22rem; }

/* reveal on scroll: small distances, the spring is applied by JS to figures */
.rv { opacity: 0; transform: translateY(18px); }
.rv.on { opacity: 1; transform: none; transition: opacity 700ms var(--expo), transform 900ms var(--expo); transition-delay: calc(var(--i, 0) * 120ms); }

@media (max-width: 1099px) {
  .c-open h1 { grid-column: 1 / span 12; }
  .c-open .num { display: none; }
  .c-open .toc { grid-column: 1 / span 6; margin-top: 40px; }
  .c-sec .txt, .s-thinking .txt, .s-product .txt, .s-valid .txt, .s-craft .txt { grid-column: 1 / span 12; max-width: 560px; }
  .s-problem .fig, .bed, .bed + .cap, .phones, .ev-list, .ev-open, .gallery { grid-column: 1 / span 12; margin-top: 34px; }
  .s-problem .fig { margin-right: calc(var(--m) * -1); }
  .bed { grid-row: auto; }
  .pull { grid-column: 1 / span 12; margin-top: 40px; padding-left: 0; }
  .evidence .film-side { grid-column: 1 / span 7; }
  .evidence .app-side { grid-column: 8 / span 5; }
  .c-end .back, .c-end .contact { grid-column: 1 / span 12; }
  .c-end .contact { margin-top: 50px; }
}
@media (max-width: 819px) {
  .case { padding-top: 64px; }
  .case .rule-h.top { top: 64px; }
  .c-open { padding-top: 48px; }
  .c-open h1 { font-size: clamp(2.75rem, 13vw, 4.5rem); }   /* floor 3rem -> 2.75rem with Newsreader: "Keep the proof" needs 302 px of 288 at 320 */
  .c-open .toc { grid-column: 1 / span 12; }
  .c-lead { display: block; grid-column: 1 / span 12; margin-top: 26px; }
  .c-lead img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .c-lead figcaption { margin-top: 12px; color: var(--ink-3); }
  .s-problem .fig { display: none; }
  .c-hair { margin-top: 48px; }
  .c-meta { row-gap: 22px; }
  .c-meta > div, .c-meta > div:first-child, .c-meta > div:last-child, .c-meta > div:nth-child(2), .c-meta > div:nth-child(3) { grid-column: span 6; }
  .c-sec { padding-top: 72px; }
  .phones { grid-template-columns: 1fr 1fr; column-gap: var(--g); }
  .phone-fig:nth-child(2) { margin-top: 48px; }
  .phone-fig:nth-child(3) { margin-top: 30px; grid-column: 1 / span 1; }
  .evidence { padding-top: 72px; }
  .evidence .film-side, .evidence .app-side { grid-column: 1 / span 12; }
  .evidence .app-side { margin-top: 36px; }
  .ev-list > div { grid-template-columns: 1fr; row-gap: 6px; }
}