/* Atelier — inner pages: case studies, About, Writings. Loaded after case-study.css, which keeps the screen layouts. */

/* ---------- Page heroes (case studies and Writings) ---------- */
.hero-eyebrow, .hero-sub { animation: none; opacity: 1; }
.cs-hero { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--m); padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: 0; }
.cs-hero > * { grid-column: 1 / -1; }
.cs-hero .hero-eyebrow { font-family: var(--sans); font-style: normal; font-size: .875rem; line-height: 1.25rem; letter-spacing: .14em; color: var(--soft); margin: 0 0 30px; }
.cs-hero h1, .cs-hero h1.article-title { grid-column: 1 / 11; font-size: var(--t-page); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; word-spacing: -0.03em; margin: 0 0 0 -0.04em; max-width: none; text-wrap: balance; }
.cs-hero .hero-sub { grid-column: 1 / 9; max-width: 32em; margin-top: clamp(32px, 3.5vw, 48px); font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.015em; color: var(--text2); max-width: none; }

/* Role / Platform / Timeline / Team under an ink rule: four equal cells of three columns, each starting on a grid line
   (Role over the section headings, Platform over the body text) */
.cs-meta { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: var(--m); row-gap: 24px; margin-top: clamp(48px, 5vw, 80px); padding-top: 16px; border-top: 1px solid var(--rule); }
.cs-meta > div { grid-column: span 3; font-size: var(--t-small); line-height: 1.25rem; gap: 4px; text-wrap: pretty; }
.cs-meta-label { font-weight: 400; font-size: var(--t-small); text-transform: none; letter-spacing: .015em; color: var(--soft); }

/* Cover screens sit together on one soft panel, centred however many there are */
.cs-screens-hero { margin-top: clamp(48px, 5vw, 80px); background: none; padding: 0; justify-content: flex-start; gap: clamp(16px, 2.6vw, 40px); }   /* cover screens straight on the paper, no panel */
.wrap > .cs-screens-hero { justify-content: center; }

/* ---------- Body: section heading in columns 1–3, text in 4–10, pictures out to the edge ---------- */
.cs-body { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--m); padding-top: clamp(80px, 9vw, 140px); padding-bottom: 0; }
.cs-body > * { grid-column: 1 / -1; }
.cs-block { display: grid; grid-template-columns: subgrid; max-width: none; margin-bottom: clamp(72px, 8vw, 120px); }
.cs-block > * { grid-column: 4 / 11; }
.cs-block > h2 { grid-column: 1 / 4; grid-row: 1 / span 80; align-self: start; position: sticky; top: calc(65px + 24px); padding-right: 16px; margin: 0; font-size: var(--t-lead); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.cs-block > h2:has(+ .cs-stats) { margin-top: 1.25rem; }
.cs-block > figure, .cs-block > .cs-scenarios, .cs-block > .cs-compare, .cs-block > .cs-stats, .cs-block > .cs-feature { grid-column: 4 / -1; }
.cs-block p, .cs-block ul, .cs-block ol { font-size: 1.125rem; line-height: 1.6; color: var(--text2); }
.cs-block > p, .cs-block > ul, .cs-block > ol, .cs-block > h3 { max-width: 37em; }
.cs-body .cs-block:has(.cs-scenarios) > :is(p, ul, ol, h3) { max-width: 37em; }   /* same measure next to the wide scenario columns */
.cs-block p + p { margin-top: 1.1em; }
/* One gap between paragraphs and lists. Blocks are grids, so margins add up instead of collapsing: only top margins.
   The first line after a heading starts level with it. */
.cs-body .cs-block > :is(p, ul, ol) { margin: 1.1em 0 0; }
.cs-body .cs-block > :is(h2, h3) + :is(p, ul, ol) { margin-top: 0; }
.cs-body .cs-block > ol { padding-left: 1.75em; }   /* room for "10." inside the text column, never past its edge */
.cs-block h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.005em; margin: 1.8em 0 .5em; color: var(--ink); text-wrap: balance; }   /* no single word left alone on the last line */
.cs-block strong { font-weight: 500; color: var(--ink); }
.cs-block > ul { list-style: none; padding-left: 0; }
.cs-block > ul li { position: relative; padding-left: 1.4em; }
.cs-block > ul li::before { content: "–"; position: absolute; left: 0; color: var(--soft); }
/* Screen titles: above the screens they name, in ink, one step below the subheadings */
.cs-block p.cs-label, .cs-feature .cs-label { font-size: 1rem; line-height: 1.375rem; font-weight: 500; letter-spacing: -0.005em; text-transform: none; color: var(--ink); }
.cs-figure:has(> .cs-label), .cs-compare > div { display: flex; flex-direction: column; align-items: flex-start; }
.cs-block .cs-figure > p.cs-label, .cs-block .cs-compare p.cs-label, .cs-feature .cs-label { text-align: left; margin: 0 0 28px; }   /* screen title to screen: 28px (20px on phones) */
@media (max-width: 760px) { .cs-block .cs-figure > p.cs-label, .cs-block .cs-compare p.cs-label, .cs-feature .cs-label { margin-bottom: 20px; } }
.cs-figure figcaption, .article-figure figcaption { font-size: var(--t-small); line-height: 1.25rem; color: var(--soft); }
.cs-block > .cs-scenarios { grid-column: 4 / 13; display: grid; grid-template-columns: subgrid; column-gap: var(--m); }
.cs-scenarios > div { grid-column: span 3; align-items: flex-start; }
.cs-scen-text { width: auto; }
.cs-block .cs-scenarios .cs-scen-text p.cs-label { text-align: left; }
.cs-scenarios .cs-screens { justify-content: flex-start; }
.cs-block .cs-scenarios ul { font-size: .9375rem; list-style: none; padding-left: 0; }
.cs-block .cs-scenarios li { position: relative; padding-left: 1.2em; }
.cs-block .cs-scenarios li::before { content: "–"; position: absolute; left: 0; color: var(--soft); }

/* Results: large light numbers */
.cs-block > .cs-stats { grid-column: 4 / 12; display: grid; grid-template-columns: subgrid; row-gap: 24px; margin-top: 0; }
.cs-stats > div { grid-column: span 4; }

.cs-stat-num { font-size: clamp(2.25rem, 3.3vw, 3rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.cs-stat-label { margin-top: 12px; font-size: var(--t-small); line-height: 1.25rem; color: var(--soft); }
.cs-block p.cs-stats-note { font-size: var(--t-small); line-height: 1.25rem; color: var(--soft); }

/* The comparison a reader should remember */
.cs-body > .cs-feature { grid-column: 4 / -1; margin: 0 0 clamp(72px, 8vw, 120px); padding: 0; border: 0; }
/* It belongs to the section it follows: ordinary picture spacing around it, a section gap only before the next heading */
.cs-body > .cs-block:has(+ .cs-feature) { margin-bottom: 32px; }
.cs-body > .cs-feature:has(+ .cs-block:not(:has(> h2))) { margin-bottom: 32px; }
.cs-pullquote { text-wrap: balance; max-width: 20em; margin-top: 72px; font-family: var(--sans); font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }

/* Screens: two sizes, column gaps */
.page-case .cs-block .cs-screens { gap: var(--m); }
.page-case .cs-block .cs-screens .cs-zoom, .page-case .cs-block .cs-figure-muted .cs-screens .cs-zoom, .page-case .cs-block .cs-figure-sm .cs-screens .cs-zoom, .page-case .cs-block .cs-figure .cs-screens .cs-zoom { width: 220px; max-width: none; }
.page-case .cs-feature:not(.cs-feature-pair) .cs-screens .cs-zoom { width: 300px; }
.page-case .cs-feature .cs-compare { gap: var(--m); }
.page-case .cs-block .cs-scenarios .cs-screens { gap: 16px; }
.page-case .cs-block .cs-scenarios .cs-screens .cs-zoom { width: 150px; }
.page-case .cs-block .cs-figure-email .cs-screens .cs-zoom { width: 240px; }

/* Screens: open bigger on click */
.cs-zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 0; }
.lightbox { background: rgba(12, 11, 10, .92); }
/* Viewer buttons: 44px round targets that stay visible over dark backdrop and white screens alike */
.lightbox button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #efede7; cursor: pointer; z-index: 1; }
.lightbox button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lightbox-close { position: absolute; top: 12px; right: 12px; font-size: 0; }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-count { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: #efede7; font-size: var(--t-small); letter-spacing: .14em; font-variant-numeric: tabular-nums; pointer-events: none; }
.lightbox-scroll :is(.lightbox-prev, .lightbox-next, .lightbox-count) { position: fixed; }
.lightbox :focus-visible { outline: 2px solid #efede7; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox { animation: lb-fade .2s linear; }
  .lightbox .lightbox-slot > * { animation: lb-zoom .3s var(--out); }
  .lightbox.closing { opacity: 0; transition: opacity .15s linear; }
}
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-zoom { from { opacity: 0; transform: scale(.97); } }
.motion-toggle { right: var(--side); bottom: 24px; border-radius: 0; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); font-family: var(--sans); font-size: var(--t-small); letter-spacing: .015em; text-transform: none; padding: 8px 12px; }
/* Shown only while a video is on screen, so it never sits over text far from any video */
.motion-toggle { visibility: hidden; opacity: 0; transition: opacity .2s linear, visibility 0s .2s; }
.motion-toggle.show { visibility: visible; opacity: 1; transition: opacity .2s linear; }
.motion-toggle::before { content: ""; position: absolute; inset: -6px; }   /* 48px tap area, no visible change */
.motion-toggle svg { display: none; width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 760px) {   /* phones: a small round icon button that covers less of the screens; the words stay for screen readers */
  .motion-toggle { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
  .motion-toggle svg { display: block; }
  .motion-toggle .mt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Next project: one index row */
.next { margin-top: 0; }   /* the dark Let's Connect band follows straight after, as on the homepage */
/* Back to homepage: one row with a line above, like a project row; hover takes the same light tint */
.back-row { position: relative; padding-top: 32px; padding-bottom: 32px; align-items: baseline; transition: background-color .3s var(--out); }
.back-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }
.back-row .b-arrow { grid-column: 1 / 2; }
.back-row .b-arrow .icon { width: .9em; height: .9em; stroke: currentColor; stroke-width: 1.2; fill: none; }
.back-row .b-label { grid-column: 2 / 10; font-size: var(--t-lead); line-height: 1.75rem; letter-spacing: -0.015em; font-weight: 500; color: var(--ink); }
@media (hover: hover) { .back-row:hover { background: var(--fill-tint); transition-duration: .2s; } }
.back-row:focus-visible { background: var(--fill-tint); outline-offset: -2px; }
@media (max-width: 760px) { .back-row { display: flex; gap: 12px; } }   /* phones: the arrow sits right next to the words */

/* ---------- About ---------- */
.about { padding-top: clamp(3.5rem, 6vw, 5.5rem); padding-bottom: 96px; align-items: start; }
.about .eyebrow { grid-column: 1 / -1; margin-bottom: 30px; }
.about h1 { grid-column: 1 / 11; font-size: var(--t-page); line-height: 1.1; letter-spacing: -0.03em; margin-left: -0.04em; text-wrap: balance; }
.about-photo { grid-column: 1 / 6; margin-top: clamp(48px, 5vw, 80px); }
.about-photo img { display: block; width: 100%; height: auto; }
.about-text { grid-column: 7 / 12; margin-top: calc(clamp(48px, 5vw, 80px) - 7px); font-size: 1.125rem; line-height: 1.6; color: var(--text2); }
.about-text p { max-width: 34em; }
.about-text p + p { margin-top: 1.1em; }
.about-text a:not(.links a) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.about-text .ask { margin-top: 2.2em; color: var(--ink); }
.about-text .links { margin-top: 20px; color: var(--ink); }

/* ---------- Writings ---------- */
.page-article .article-figure { grid-column: 1 / 8; width: auto; max-width: calc(37 * 1.125rem); margin: 0 0 clamp(56px, 6vw, 96px); }   /* as wide as the text */
.page-article .article-figure img { border-radius: 0; }
.page-article .cs-block { margin-bottom: 56px; }
.page-article .cs-body { padding-bottom: 40px; }   /* room between the essay and the Let's Connect band */
.page-article .cs-block > * { grid-column: 1 / 11; max-width: none; }   /* the essay runs exactly as wide as the title (her call) */
.page-article .cs-block > h2 { grid-column: 1 / 11; grid-row: auto; position: static; padding: 0; margin: 0 0 16px; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }

@media (max-width: 760px) {
  .cs-hero h1, .cs-hero h1.article-title, .cs-hero .hero-sub, .about h1 { grid-column: 1 / -1; }
  .cs-block > *, .cs-block > figure, .cs-block > .cs-scenarios, .cs-block > .cs-compare, .cs-block > .cs-stats, .cs-body > .cs-feature, .page-article .article-figure, .page-article .cs-block > *, .page-article .cs-block > h2 { grid-column: 1 / -1; }
  .cs-block > h2 { grid-row: auto; position: static; margin-bottom: 16px; padding-right: 0; }

  .cs-meta > div { grid-column: span 2; }   /* two cells a row, on the phone's four columns */
  .cs-block > .cs-scenarios { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 32px; }
  .cs-scenarios > div { grid-column: 1 / -1; }
  .cs-block > .cs-stats { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .cs-stats > div { grid-column: 1 / -1; }
  .page-case .cs-block .cs-figure .cs-screens .cs-zoom { width: calc(50% - 8px); }
  .page-case .cs-feature:not(.cs-feature-pair) .cs-screens .cs-zoom { width: 100%; }
  .page-case .cs-block .cs-screens { gap: 16px; }
  .page-case .cs-feature .cs-compare { gap: 16px; }
  .cs-block .cs-figure .cs-screens:has(> .cs-zoom:nth-child(3)) { margin-inline: calc(-1 * var(--side)); padding-inline: var(--side); scroll-padding-inline: var(--side); }
  /* Comparisons stay side by side, two half-width screens; a video screen takes its column's width instead of collapsing */
  .cs-compare, .cs-feature-pair:not(.cs-sheet) .cs-compare { flex-direction: row; flex-wrap: nowrap; gap: 16px; }
  :not(.cs-sheet) > .cs-compare > div { flex: 1 1 0; min-width: 0; }
  .cs-compare > div > .cs-screens { align-self: stretch; }
  .page-case .cs-block .cs-figure .cs-compare .cs-screens .cs-zoom, .cs-feature-pair:not(.cs-sheet) .cs-screens .cs-zoom { width: 100%; }
  /* The stacked three-step sheet: groups start on the text edge, single screens half width like the pairs */
  .cs-sheet .cs-compare { gap: 40px; }
  .cs-sheet .cs-compare > div > .cs-screens { justify-content: flex-start; }
  .cs-sheet .cs-compare .cs-screens .cs-zoom { width: calc(50% - 8px); }
  /* A lone screen starts on the text edge, under its left-aligned label */
  .cs-block .cs-figure:has(> .cs-label) .cs-screens { justify-content: flex-start; }
  .about-photo, .about-text { grid-column: 1 / -1; }
  /* More air on phones: hero, between sections, and around pictures */
  .cs-hero, .about { padding-top: 4rem; }
  .cs-hero h1, .cs-hero h1.article-title, .about h1 { line-height: 1.1; }
  .cs-hero .hero-sub { margin-top: 28px; }
  .cs-meta { margin-top: 48px; row-gap: 28px; }
  .cs-body { padding-top: 72px; }
  .cs-body .cs-block { margin-bottom: 72px; }
  .cs-body > .cs-feature { margin-bottom: 72px; }
  .cs-figure { margin: 40px 0; }
  .about-photo { margin-top: 40px; }
  .about-text { margin-top: 40px; }
  /* Phone type scale (see atelier.css): headings 24, intros and subheadings 20, body 17/28 everywhere */
  .cs-block > h2, .page-article .cs-block > h2 { font-size: 1.375rem; line-height: 1.25; }
  .cs-block h3 { font-size: 1.125rem; line-height: 1.35; }
  .cs-hero .hero-sub { font-size: 1.125rem; line-height: 1.6; color: var(--ink); }   /* intros: one step over body, in ink */
  .cs-screens-hero, .cs-screens-hero-3, .cs-screens-hero-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; gap: 16px; }   /* cover: two screens a row, readable */
  .cs-block p, .cs-block ul, .cs-block ol, .cs-block .cs-scenarios ul, .about-text { font-size: var(--t-body); line-height: 1.625rem; }
  .cs-stat-num { font-size: 1.875rem; }   /* result numbers no bigger than the page title */
  .cs-pullquote { font-size: 1.375rem; line-height: 1.3; margin-top: 40px; }
}

/* ---------- One screen size ----------
   Desktop: covers one size, every other screen one size. Phones: every screen half the text width, covers included.
   This block is the single source of truth for screen widths; !important on width overrides the older per-page rules. */
:root { --shot: clamp(150px, 15.3vw, 220px); --shot-l: clamp(170px, 18vw, 260px); }
@media (min-width: 761px) {
  /* Cover: no panel; the first screen starts on the text edge */
  body.page-case .cs-screens-hero { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--m); }
  body.page-case .cs-screens-hero .cs-zoom { width: var(--shot-l) !important; max-width: none; flex: none; }
  body.page-case .cs-body .cs-zoom { width: var(--shot) !important; max-width: none; flex: none; }
  body.page-case .cs-body .cs-screens { gap: var(--m); }
  body.page-case .cs-screens-hero:has(> .cs-zoom:nth-child(6)) { display: grid; grid-template-columns: repeat(3, var(--shot-l)); justify-content: start; }   /* six covers: two rows of three */
  body.page-case .cs-sheet .cs-compare { flex-wrap: wrap; row-gap: 48px; }   /* four sheet screens never run past the margin */
  /* Scenarios: one row each, text in columns 4–7, its screens from column 8 */
  .cs-block > .cs-scenarios { grid-column: 4 / 13; display: grid; grid-template-columns: subgrid; row-gap: 48px; margin: 40px 0; }
  .cs-block > .cs-scenarios > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
  .cs-block > .cs-scenarios .cs-scen-text { grid-column: 1 / 5; max-width: none; }
  .cs-block > .cs-scenarios .cs-screens { grid-column: 5 / -1; margin: 0; padding: 0; width: auto; justify-content: flex-start; }
}
@media (min-width: 761px) and (max-width: 1100px) {   /* too narrow for two screens beside the text: screens go under it */
  .cs-block > .cs-scenarios .cs-scen-text, .cs-block > .cs-scenarios .cs-screens { grid-column: 1 / -1; }
  .cs-block > .cs-scenarios .cs-screens { margin-top: 24px; }
}
/* Screen titles sit centred over the screen, or group of screens, they name (swipe rows on phones keep them on the text edge) */
body.page-case .cs-figure:has(> .cs-label), body.page-case .cs-compare > div { width: fit-content; max-width: 100%; align-items: center; }
body.page-case .cs-block .cs-figure > p.cs-label, body.page-case .cs-compare p.cs-label { text-align: center; align-self: center; }
@media (max-width: 760px) {
  body.page-case .cs-figure:has(> .cs-label):has(.cs-screens > .cs-zoom:nth-child(3)) { width: auto; align-items: flex-start; }
  body.page-case .cs-figure:has(> .cs-label):has(.cs-screens > .cs-zoom:nth-child(3)) > p.cs-label { align-self: flex-start; text-align: left; }
  body.page-case :not(.cs-sheet) > .cs-compare > div { width: auto; }
}
@media (max-width: 760px) {
  body.page-case .cs-screens-hero { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px; }
  body.page-case .cs-zoom { width: calc(50% - 8px) !important; max-width: none; flex: none; }
  body.page-case :not(.cs-sheet) > .cs-compare > div .cs-zoom { width: 100% !important; }   /* each half of a comparison is already half the width */
  body.page-case .cs-scenarios .cs-screens { gap: 16px; justify-content: flex-start; }
}