/* Desktop case-study layout; the established mobile composition lives in kurchanov.css. */
:root {
  --content: 1512px;
  --section-space: clamp(52px, 4.4vw, 68px);
  --gallery-gap: clamp(24px, 3vw, 44px);
  --line: rgb(23 23 19 / .18);
}

.hero {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 64px);
  min-height: min(800px, calc(100dvh - 72px));
  padding-block: 44px 60px;
}
.hero h1 { font-size: clamp(3rem, 5.2vw, 5.5rem); }
.hero-summary { max-width: 45ch; line-height: 1.5; }
.hero-art__frame { aspect-ratio: 1.08; }

.arc, .chapter, .closing { padding-block: var(--section-space); }
.arc-heading, .chapter-heading, .lesson-scale,
.drawing-subheading, .village-subheading, .reels-section-heading,
.closing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.arc-heading, .chapter-heading, .drawing-subheading,
.village-subheading, .reels-section-heading { max-width: 1100px; }
.arc h2, .chapter h2, .closing h2 {
  max-width: 1000px;
  font-size: clamp(2.75rem, 4.5vw, 4.5rem);
  line-height: 1.08;
}
.arc-heading p, .chapter-heading > p:last-child, .closing > p {
  grid-column: 1;
  max-width: 70ch;
  margin: 0;
  font-size: clamp(1.08rem, 1.35vw, 1.25rem);
  line-height: 1.58;
}
.chapter-heading { margin-bottom: 36px; }
.chapter-count { margin: 0 0 4px; }
.chapter + .chapter, .closing { border-top: 1px solid var(--line); }

.chapter-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.chapter-nav a {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 20px minmax(110px, 1fr) 150px;
  gap: 16px;
  align-items: start;
  min-height: 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.chapter-nav__number { padding: 0; }
.chapter-nav__copy { gap: 12px; padding-right: 8px; }
.chapter-nav__copy strong { max-width: none; font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.18; }
.chapter-nav__copy small { font-size: .65rem; line-height: 1.5; }
.chapter-nav__thumb { height: 150px; outline: none; }
.chapter-nav__arrow { position: absolute; top: 18px; right: 0; }

.image-pair, .village-language, .village-slides,
.reels-identities, .reels-outreach { gap: var(--gallery-gap); }
.image-pair--speed figure:nth-child(2) { padding-top: 0; }
.deck-overview, .mobile-site-composite { margin-top: 36px; }
.lesson-scale { gap: 16px; max-width: 900px; margin-bottom: 32px; }
.lesson-scale h3 { max-width: none; }
.lesson-scale p { max-width: 70ch; }
.lesson-overviews { gap: 32px; }
.lesson-overviews figure:nth-child(2) { width: 100%; justify-self: stretch; }

.drawing-subheading, .village-subheading, .reels-section-heading { margin: 56px 0 28px; }
.drawing-subheading h3, .village-subheading h3, .reels-section-heading h3 {
  max-width: 900px;
  font-size: clamp(2rem, 3.1vw, 3rem);
  line-height: 1.15;
  letter-spacing: -.03em;
}
.drawing-subheading p, .village-subheading p, .reels-section-heading p {
  max-width: 70ch;
  margin: 0;
  font-size: clamp(1.06rem, 1.3vw, 1.2rem);
  line-height: 1.58;
}

/* Pair the two examples, then the two course views, without changing mobile DOM order. */
.chapter--drawing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "intro intro"
    "scale scale"
    "overviews overviews"
    "language language"
    "illustrations illustrations"
    "slide campaign"
    "modules lessons";
  column-gap: var(--gallery-gap);
}
.chapter--drawing > * { grid-column: 1 / -1; }
.chapter--drawing .chapter-heading { grid-area: intro; }
.lesson-scale { grid-area: scale; }
.lesson-overviews { grid-area: overviews; }
.drawing-subheading { grid-area: language; }
.drawing-system { grid-area: illustrations; }
.drawing-gallery { display: contents; }
.drawing-gallery__slide { grid-area: slide; margin-top: 32px; }
.drawing-campaign { grid-area: campaign; width: 100%; margin-top: 32px; }
.drawing-gallery__slide img { aspect-ratio: 1; object-fit: contain; }
.drawing-gallery__modules { grid-area: modules; margin-top: 36px; }
.drawing-gallery__lessons { grid-area: lessons; margin-top: 36px; }
.drawing-gallery__modules a { height: clamp(480px, 48vw, 680px); max-height: none; overflow: auto; scrollbar-color: #bd4e42 #fff9f0; }
.drawing-gallery__lessons img {
  height: clamp(480px, 48vw, 680px);
  max-height: none;
  object-fit: contain;
  object-position: top;
}

.village-slides { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; }
.village-slides img { aspect-ratio: 16 / 9; object-fit: contain; background: #060505; }
.village-telegram-collage { width: min(100%, 880px); margin-top: 36px; }
.reels-identities { width: 100%; margin: 0; }
.reels-web-stage { gap: 24px; align-items: start; padding: 32px; }
.web-window { border-radius: 8px; box-shadow: none; }
.web-window__bar { min-height: 32px; }
.web-window__bar small { font-size: .65rem; }
.web-window img { height: clamp(400px, 44vw, 620px); object-fit: contain; object-position: top; }
.reels-slide-details, .reels-social-sequence { gap: 24px; margin-top: 32px; }
.reels-outreach, .reels-final-asset { margin-top: 36px; }
.reels-section-copy p + p { margin-top: 18px; }
.site-footer { border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
  .hero { min-height: 0; padding-block: 36px 52px; }
  .hero h1 { font-size: clamp(2.8rem, 5.1vw, 3.5rem); }
  .hero-summary { font-size: 1.05rem; }
  .project-line { margin-bottom: 24px; }
  .chapter-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter-nav a { grid-template-rows: 20px minmax(90px, 1fr) 150px; }
  .chapter-nav__copy strong { font-size: 1.5rem; }
  .reels-web-stage { gap: 16px; padding: 20px; }
  .web-window img { height: 400px; }
  .web-window__bar small { font-size: .5rem; }
}