/* Project pages (case studies and the photography series), built on the homepage system: home.css supplies tokens, header, links and footer. */

/* Hero: metadata, serif title, then the project question set as the lead. */
.cs-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.cs-back { margin-bottom: var(--s5); font-size: .9375rem; color: var(--muted); }
.cs-back:hover .arrow, .cs-back:focus-visible .arrow { transform: translateX(-3px); }
.cs-hero h1 { margin-top: var(--s3); font: 400 clamp(2.5rem, 6vw, 4.75rem)/1.02 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.cs-subtitle { margin-top: var(--s3); font: italic 400 clamp(1.125rem, 2vw, 1.375rem)/1.4 var(--serif); color: var(--muted); }
.cs-question { margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding-top: var(--s4); border-top: 1px solid var(--ink); max-width: 52rem; }
.cs-question p:last-child { margin-top: var(--s3); font: 400 clamp(1.5rem, 3vw, 2.25rem)/1.25 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.cs-scope { margin-top: var(--s5); font-size: .9375rem; color: var(--muted); }

/* Sections: ink rule + label, body on the reading column. */
.cs-section { padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.cs-body { max-width: 44rem; display: flex; flex-direction: column; gap: var(--s4); }
.cs-body > p { line-height: 1.65; }
.cs-small { font-size: .875rem; color: var(--muted); }
.cs-label { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.cs-emph { font: 400 1.25rem/1.4 var(--serif); }

/* Manual vs automation */
.cs-versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s5); align-items: start; padding-block: var(--s4); border-block: 1px solid var(--rule); }
.cs-versus .meta { margin-bottom: var(--s2); }
.cs-versus div p:last-child { font: 400 1.125rem/1.4 var(--serif); }
.cs-vs { font: italic 400 1rem/1 var(--serif); color: var(--muted); padding-top: 2rem; }

/* Figures: rendered artifacts sit on the stone tone with a thin rule. */
.cs-figure { margin-top: var(--s6); }
.cs-figure a { display: block; background: var(--stone); padding: clamp(.5rem, 1.5vw, 1rem); border-radius: 2px; }
.cs-figure img { width: 100%; border: 1px solid #D3D1C8; background: #fff; }
.cs-figure figcaption { margin-top: var(--s3); max-width: 44rem; font-size: .875rem; color: var(--muted); }
.cs-figure figcaption .meta { margin-left: var(--s2); }
.cs-figure--mid { max-width: 56rem; }
.cs-figure--sheet { max-width: 68rem; }
.cs-zoom { cursor: zoom-in; }
.cs-zoom:focus-visible { outline-offset: 4px; }

/* Two commercial structures */
.cs-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.cs-mode { padding-top: var(--s3); border-top: 2px solid var(--accent); }
.cs-mode h3 { margin-top: var(--s2); font: 400 1.25rem/1.25 var(--serif); }
.cs-mode p:last-child { margin-top: var(--s3); color: var(--muted); line-height: 1.55; }

/* Key finding: the one line a reader should leave with. */
.cs-finding { margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-block: clamp(2rem, 5vw, 3.5rem); border-block: 1px solid var(--ink); }
.cs-finding .meta { color: var(--accent); }
.cs-finding-line { margin-top: var(--s4); max-width: 22ch; font: 400 clamp(2rem, 4.6vw, 3.5rem)/1.08 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.cs-finding-note { margin-top: var(--s4); max-width: 40rem; font-size: 1.0625rem; color: var(--muted); }

/* Drivers */
.cs-drivers li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s4); padding-block: var(--s3); border-top: 1px solid var(--rule); }
.cs-drivers li:last-child { border-bottom: 1px solid var(--rule); }
.cs-drivers li:first-child { border-top: 0; padding-top: 0; }
.cs-n { grid-row: 1 / span 2; padding-top: .45em; font: 500 .75rem/1 var(--mono); color: var(--muted); }
.cs-d { font: 400 1.25rem/1.3 var(--serif); }
.cs-f { font-size: .875rem; color: var(--muted); }

/* Illustrative scenario figures */
.cs-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0 var(--s5); margin: 0; }
.cs-figures div { padding-block: var(--s3); border-top: 1px solid var(--rule); }
.cs-figures dt { font-size: .8125rem; color: var(--muted); }
.cs-figures dd { margin: var(--s1) 0 0; font: 400 1.5rem/1.2 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.cs-result { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--stone); border-left: 2px solid var(--accent); font: 400 1.25rem/1.3 var(--serif); }

/* Thresholds */
.cs-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cs-table th, .cs-table td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cs-table thead th { font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink); }
.cs-table tbody th { font-weight: 500; }
.cs-table td { color: var(--muted); }

/* Measure / limits / process lists */
.cs-measure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); max-width: 56rem; }
.cs-measure h3 { padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); color: var(--ink); }
.cs-measure li { padding-block: var(--s2); border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.cs-limits { columns: 2; column-gap: var(--s6); }
.cs-limits li { break-inside: avoid; padding-block: var(--s2); border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.cs-process { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) 0; font-size: .9375rem; }
.cs-process li { display: inline-flex; align-items: center; }
.cs-process li + li::before { content: "→"; margin-inline: var(--s3); color: var(--accent); }
.cs-process li:nth-child(5), .cs-process li:nth-child(6) { font-weight: 600; }

/* Downloads */
.cs-downloads { gap: var(--s2); }
.cs-downloads .quiet-link { font: 400 1.25rem/1.3 var(--serif); }
.cs-downloads .cs-small { margin-top: 0; }

.cs-disclaimer { margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: var(--s4); border-top: 1px solid var(--rule); font-size: .8125rem; color: var(--muted); }

@media (min-width: 880px) {
  /* Label hangs in the left column, content reads on the right — as in About and Contact. */
  .cs-section { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--s5); align-items: start; }
  .cs-section > .section-head { grid-column: 1; margin-bottom: 0; border-top: 0; padding-top: 0; }
  .cs-section > .section-head h2 { line-height: 2.2; }
  .cs-section > .cs-body { grid-column: 2; padding-top: var(--s4); border-top: 1px solid var(--ink); }
  .cs-section > .cs-figure { grid-column: 1 / -1; }
  .cs-figure--mid, .cs-figure--sheet { grid-column: 2 / -1 !important; }
}

@media (max-width: 699px) {
  .cs-versus { grid-template-columns: 1fr; gap: var(--s3); }
  .cs-vs { padding-top: 0; }
  .cs-modes, .cs-measure { grid-template-columns: 1fr; }
  .cs-limits { columns: 1; }
}

/* ---- Base Power research ---- */

/* Key takeaway sits under the question, lighter than the mid-page finding. */
.cs-takeaway { margin-top: var(--s6); max-width: 44rem; padding-left: var(--s4); border-left: 2px solid var(--accent); }
.cs-takeaway .meta { color: var(--accent); }
.cs-takeaway p:last-child { margin-top: var(--s2); font-size: 1.0625rem; line-height: 1.55; }

.cs-hypotheses { row-gap: var(--s6); margin-block: var(--s2); }

/* Evidence table: fixed columns wrap on small screens instead of scrolling. */
.cs-evidence { margin-top: var(--s4); }
.cs-evidence .cs-table { table-layout: fixed; font-size: .9375rem; line-height: 1.5; }
.cs-evidence caption { text-align: left; padding-bottom: var(--s3); }
.cs-evidence th, .cs-evidence td { overflow-wrap: anywhere; }
.cs-evidence th:first-child { width: 30%; }
.cs-evidence figcaption { margin-top: var(--s3); }
.cs-role { display: block; margin-top: var(--s1); font-size: .8125rem; font-weight: 400; color: var(--muted); }
.cs-row-screen th { color: var(--accent); }

/* Findings: numbered, serif headline, evidence beneath. */
.cs-findings { gap: 0; }
.cs-findings li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s3); padding-block: var(--s6); border-top: 1px solid var(--rule); }
.cs-findings li:first-child { padding-top: 0; border-top: 0; }
.cs-findings li:last-child { padding-bottom: 0; }
.cs-findings .cs-n { grid-row: 1 / span 4; }
.cs-findings h3 { grid-column: 2; font: 400 clamp(1.375rem, 2.2vw, 1.625rem)/1.2 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.cs-findings p { grid-column: 2; line-height: 1.65; }

.cs-checks li { padding-block: var(--s3); border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.cs-checks li:first-child { border-top: 1px solid var(--rule); }

.cs-finding-note { display: flex; flex-direction: column; gap: var(--s3); }
.cs-source { color: var(--muted); font-size: .9375rem; }

/* End-of-page project navigation. */
.cs-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); margin-top: clamp(3.5rem, 7vw, 5rem); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.cs-back:hover .cs-arrow-back, .cs-next a:hover .cs-arrow-back, .cs-next a:focus-visible .cs-arrow-back { transform: translateX(-3px); }

/* ---- Photography: visual-first, varied scale, original order ---- */
.cs-photo-intro { margin-top: var(--s5); max-width: 34rem; font-size: 1.0625rem; color: var(--muted); }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s4); row-gap: clamp(2rem, 6vw, 5.5rem); margin-top: clamp(3rem, 7vw, 5.5rem); }
.gallery figure { background: var(--stone); }
.gallery img { width: 100%; }
.g-open { grid-column: 1 / -1; }
.g-left-lg { grid-column: 1 / 9; }
.g-right-sm { grid-column: 9 / 13; align-self: end; }
.g-right-lg { grid-column: 5 / 13; }
.g-half { grid-column: span 6; }
.g-close { grid-column: 3 / 11; }

@media (max-width: 699px) {
  .cs-evidence .cs-table { font-size: .8125rem; }
  .cs-evidence th, .cs-evidence td { padding-right: var(--s2); }
  .cs-findings li { grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--s3); }
  .gallery { row-gap: var(--s5); }
  .gallery > figure { grid-column: 1 / -1; }
}

/* Place captions (Stage I1). A captioned frame keeps the stone placeholder on the image only, and keeps its own height in
   a pair, so the caption sits on paper directly under the photograph. */
.gallery picture { display: block; }
.gallery figure:has(> figcaption) { background: none; align-self: start; }
.gallery figure:has(> figcaption) img { background: var(--stone); }
.gallery figcaption { margin-top: var(--s3); font-size: .875rem; color: var(--muted); }