:root,
:root[data-design="galerie"],
:root[data-design="atelier"],
:root[data-design="salon"] {
  --page: #f3f0e8;
  --paper: #fbfaf5;
  --ink: #171b19;
  --soft-ink: #687068;
  --accent: #70806f;
  --accent-light: #d9ddd3;
  --line: rgba(30, 38, 34, .14);
  --panel: #e8e8e1;
}
.design-lab { display: none; }
.scene-section { height: 760svh; background: #080a09; }
.cinema-stage { background: radial-gradient(circle at 66% 42%, #e5e2d7 0, #b9b8af 25%, #454845 58%, #090b0a 100%); }
.scene-halo { background: radial-gradient(ellipse at center, rgba(238,235,218,.48), transparent 68%); }
.scene-photo, :root[data-design="atelier"] .scene-photo { z-index: 4; inset: auto 3vw 2svh auto; width: min(68vw, 1050px); height: 76svh; filter: drop-shadow(0 45px 45px rgba(0,0,0,.45)); }
.scene-photo img { object-fit: contain; }
.cinema-film { position: absolute; inset: 0; z-index: 3; overflow: hidden; opacity: 0; transform-origin: center 54%; will-change: opacity, transform, filter; background: #070907; }
.cinema-film video { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.035); filter: saturate(.72) contrast(1.1) brightness(.72) sepia(.08); }
.cinema-film--inside::after,
.cinema-film--action::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 55% 46%, transparent 28%, rgba(2,4,3,.28) 74%, rgba(2,3,2,.72) 100%), linear-gradient(90deg, rgba(3,5,4,.62), transparent 46%); pointer-events: none; }
.cinema-film--action video { object-position: 56% center; filter: saturate(.68) contrast(1.14) brightness(.68) sepia(.12); }
.cinema-lens-flare { position: absolute; z-index: 5; width: 34vw; height: 34vw; right: -10vw; top: 8vh; border-radius: 50%; background: radial-gradient(circle, rgba(244,235,201,.19), transparent 65%); mix-blend-mode: screen; pointer-events: none; }
.scene-grain { z-index: 6; opacity: .18; mix-blend-mode: soft-light; }
.scene-whiteout { z-index: 7; background: #f3f0e8; }
.scene-sticky .hero-copy,
.scene-chapter-copy,
.scene-inside,
.scene-mechanics,
.scene-transition { z-index: 12; color: #f5f2e9; text-shadow: 0 2px 24px rgba(0,0,0,.28); }
.scene-sticky .hero-copy { color: #161a18; text-shadow: none; }
.scene-chapter-copy,
.scene-inside,
.scene-mechanics { background: rgba(8,11,9,.30); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(12px); border-radius: 3px; padding: 22px 26px; }
.scene-material-note { position: absolute; left: 38px; bottom: 27px; z-index: 15; color: rgba(255,255,255,.7); font: 600 8px/1.2 var(--sans); letter-spacing: .22em; transition: opacity .4s; }
.scene-chapters { z-index: 15; }
.scene-sticky .scene-chapters { display: none; }
.scene-caption, .scene-progress, .scroll-prompt { z-index: 15; }
.primary-button { background: #1c211e; color: #f8f5ed; }
.lesson-card:nth-child(1) { background: #e7e3d8; }
.lesson-card:nth-child(2) { background: #dfe5df; }
.lesson-card:nth-child(3) { background: #e4e4df; }
.method-section { background: #dde4dc; }
.site-footer { background: #161b18; }

@media (max-width: 740px) {
  .scene-section { height: 650svh; }
  .cinema-film video { object-position: 58% center; }
  .cinema-film--action video { object-position: 60% center; }
  .scene-photo, :root[data-design="atelier"] .scene-photo { inset: auto -7vw 5svh auto; width: 108vw; height: 55svh; }
  .scene-material-note { left: 22px; bottom: 25px; max-width: 58vw; line-height: 1.5; }
  .scene-chapter-copy, .scene-inside, .scene-mechanics { left: 20px; right: 20px; bottom: 14%; width: auto; max-width: none; padding: 15px 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-section { height: 100svh; }
  .cinema-film { display: none; }
  .scene-material-note { display: none; }
}