/* Case study scene and editorial lists. Shared problem/flow/live blocks come from pages.css. */

  /* Hero scene. --art-pos anchors the painting; the scrim is left-only
     (max 0.35) and nothing fades into the page ground. */
  .case-hero { --art-pos: 100% 100%; padding-bottom: var(--s-9); }
  .case-hero > .container { width: 100%; }
  .case-hero .art-bg::after {
    background:
      linear-gradient(90deg, rgba(var(--art-scrim), 0.35) 0%, rgba(var(--art-scrim), 0.14) 42%, transparent 68%);
  }
  .case-hero .art-mist { -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 90%); mask-image: linear-gradient(180deg, #000 74%, transparent 90%); }
  .case-hero h1 { max-width: none; font-size: clamp(1.75rem, 0.8rem + 4.7vw, 5rem); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: var(--s-5); text-shadow: var(--hero-shadow); }
  .case-hero .lead { max-width: 46ch; color: var(--text-1); text-shadow: var(--hero-shadow); }
  .case-hero .eyebrow, .case-hero .crumbs a, .case-hero .crumbs { color: var(--text-1); text-shadow: var(--hero-shadow); }
  @media (max-width: 767px) {
    .case-hero { align-items: flex-start; padding-bottom: calc(var(--s-8) + 34vw); }
    .case-hero .art-bg::after { background: linear-gradient(180deg, rgba(var(--art-scrim), 0.35) 0%, rgba(var(--art-scrim), 0.35) 70%, transparent 100%); }
  }
  @media (max-width: 479px) { .case-hero .btn { width: 100%; } }

  .case-hero__copy .crumbs { margin-bottom: var(--s-5); }
  @media (max-width: 767px) { .case-hero { padding-bottom: calc(var(--s-8) + 62vw); } }
  .case-hero .case-facts { margin-top: var(--s-8); }
  /* Keeps the facts card clear of the watermark corner. */
  @media (min-width: 768px) { .case-hero .case-facts { width: min(100%, 62vw); grid-template-columns: repeat(2, 1fr); padding: var(--s-5) var(--s-6); } }
  .case-hero .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

  /* What I built: numbered hairline rows with large live frames between them. */
  .built-list { margin: var(--s-8) 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-1); }
  .built-list + .built-shot, .built-shot + .built-list { margin-top: var(--s-8); }
  .built-row { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding-block: var(--s-6); border-top: 1px solid var(--line-1); align-items: start; }
  .built-num { grid-row: span 3; font-family: var(--font-serif); font-style: italic; font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4rem); line-height: 0.9; color: var(--accent-text); }
  .built-row h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1.1; letter-spacing: -0.025em; }
  .built-row p { color: var(--text-2); max-width: 52ch; }
  .built-row .chips { margin-top: var(--s-3); }
  .built-shot { margin-inline: 0; position: relative; width: 100%; }
  .built-shot img { aspect-ratio: 16 / 10; }
  @media (min-width: 1024px) {
    .built-row { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-2) var(--s-7); }
    .built-num { grid-row: 1 / span 2; }
    .built-row h3 { grid-column: 2; grid-row: 1 / span 2; }
    .built-row p { grid-column: 3; grid-row: 1; }
    .built-row .chips { grid-column: 3; grid-row: 2; }
    .built-shot { width: 84%; }
    .built-shot--r { margin-left: auto; }
  }
  @media (prefers-reduced-motion: reduce) { .built-shot [data-depth] { transform: none !important; } }

  /* Chapter rail: numerals sit in a left gutter at >=1024px; the line and glow come from art.css. */
  .chapters { position: relative; --chapter-pad: calc(var(--s-9) / 2); }
  .chapters > .section { padding-block: var(--chapter-pad); }
  .chapters .rail__num { display: block; }
  .chapters .rail__label { display: block; margin-top: var(--s-2); }
  @media (min-width: 1024px) {
    .chapters .rail__line { z-index: 1; left: max(calc(var(--gutter) - var(--s-5)), calc((100vw - var(--maxw)) / 2 + var(--gutter) - var(--s-5))); }
    .chapters .container { padding-left: calc(var(--gutter) + 7rem); }
    /* The painted chapter clips instead of hiding, so it does not become a scroll container and the numeral can still stick. */
    .chapters > .art-scene { overflow: clip; }
    /* The numeral's text hangs below its 0-height box, so every chapter reserves that height plus the chapter padding at its
       bottom: the pinned numeral then ends the same distance above the chapter end whatever the chapter's own padding. */
    .chapters { --rail-text-h: 3.9rem; }
    .chapters .section { padding-bottom: calc(var(--chapter-pad) + var(--rail-text-h)); }
    .chapters .rail__num { position: sticky; top: calc(var(--nav-h) + var(--s-6)); z-index: 2; height: 0; margin-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); padding-top: var(--chapter-pad); white-space: nowrap; }
  }
  @media (max-width: 1023px) { .chapters .rail__line, .chapters .rail__label { display: block; margin-top: var(--s-2); } .chapters .rail__num { padding: var(--s-6) var(--gutter) 0; margin: 0 auto; max-width: var(--maxw); } }