/* 04 / THE SOUND JOURNEY — a spatial, chapter-driven visual direction */
:root[data-design="galerie"] {
  --page: #edf0f1;
  --paper: #fffdfa;
  --ink: #202a32;
  --soft-ink: #64717a;
  --accent: #ad6570;
  --accent-light: #eed4d4;
  --panel: #e3e9eb;
  --scene-01: #edf1f2;
  --scene-02: #e9e8ee;
  --scene-03: #e5e9e6;
  --scene-04: #e8eaf0;
  --scene-05: #f1e9e4;
  --scene-06: #f1ede8;
  --scene-07: #f7f4f1;
  --section-lessons: #f6f4f0;
  --section-about: #f2eee9;
  --section-steps: #e9edf0;
  --section-contact: #f6eee8;
  --section-faq: #f9f8f5;
}
:root[data-design="atelier"] {
  --ink: #302731;
  --accent: #b36a78;
  --scene-01: #f4edea;
  --scene-02: #eee2e7;
  --scene-03: #f0e9e4;
  --scene-04: #eae5ef;
  --scene-05: #eee5e3;
  --scene-06: #f3ebe4;
  --scene-07: #fcf8f4;
  --section-lessons: #f9f1ed;
  --section-about: #f2e9e4;
  --section-steps: #eee4ed;
  --section-contact: #f5e6e4;
  --section-faq: #faf5f0;
}
:root[data-design="salon"] {
  --ink: #26382f;
  --accent: #738579;
  --scene-01: #edf3eb;
  --scene-02: #e8edec;
  --scene-03: #e9eee3;
  --scene-04: #e8e8ed;
  --scene-05: #f0e9e0;
  --scene-06: #edf1e9;
  --scene-07: #f9faf5;
  --section-lessons: #f6f8f1;
  --section-about: #f0f3ea;
  --section-steps: #e7eee9;
  --section-contact: #f2eee5;
  --section-faq: #f8faf4;
}

body { background: var(--page); }
.scene-section { height: 590vh; height: 590svh; }
.scene-sticky { perspective: 1400px; perspective-origin: 58% 48%; overflow: hidden; }
.scene-sticky::before { width: min(62vw,850px); height: min(62vw,850px); right: 5%; top: 13%; border: 1px solid rgba(69,80,83,.10); }
.scene-stage { transform-style: preserve-3d; perspective: 1100px; perspective-origin: 59% 50%; }
.scene-halo { position: absolute; z-index: -1; inset: 14% 3% 10% 43%; border-radius: 50%; background: radial-gradient(ellipse,rgba(255,255,255,.35),rgba(255,255,255,.05) 50%,transparent 72%); filter: blur(6px); pointer-events: none; opacity: .25; }
.scene-floor { position: absolute; z-index: 0; right: -8%; bottom: -39%; width: 92%; height: 85%; transform: perspective(900px) rotateX(69deg); transform-origin: 50% 85%; background-image: linear-gradient(rgba(97,108,112,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(97,108,112,.10) 1px,transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(transparent,black 30%,transparent 95%); mask-image: linear-gradient(transparent,black 30%,transparent 95%); pointer-events: none; }
.scene-photo, :root[data-design="atelier"] .scene-photo { inset: auto -4vw 4svh auto; height: 83svh; width: min(76vw,1200px); transform-origin: 73% 43%; backface-visibility: hidden; transform-style: preserve-3d; filter: drop-shadow(0 45px 26px rgba(25,32,39,.10)); }
.scene-photo img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.scene-depth-layer { inset: 12svh 8.5vw 12svh 42vw; border: 6px solid rgba(255,255,255,.68); border-radius: 24px; box-shadow: -25px 45px 95px rgba(14,28,31,.22),inset 0 0 0 1px rgba(255,255,255,.3); transform-origin: 50% 50%; backface-visibility: hidden; transform-style: preserve-3d; }
.scene-strings, .scene-soundboard, .scene-hammers, .scene-detail { transform-origin: 52% 48%; }
.scene-depth-layer img { object-fit: cover; }
.scene-depth-layer::after { background: linear-gradient(110deg,rgba(26,29,32,.07),transparent 35%); }
.scene-grain { opacity: .04; }
.scene-sticky .hero-copy { top: 25%; left: clamp(30px,6.4vw,108px); max-width: min(590px,48vw); }
.scene-sticky .hero-copy h1, :root[data-design="galerie"] .scene-sticky .hero-copy h1 { font-size: clamp(66px,6.3vw,104px); line-height: .98; letter-spacing: -.065em; }
:root[data-design="galerie"] .scene-sticky .hero-copy h1 { font-family: var(--serif); font-weight: 500; }
.scene-sticky .hero-copy p { font-size: clamp(14px,1.14vw,16px); max-width: 365px; }
.hero-copy .eyebrow { font-size: 10px; }
.scene-chapter-copy, .scene-inside, .scene-mechanics { left: clamp(35px,6.5vw,105px); bottom: 25%; max-width: min(420px,34vw); width: min(420px,34vw); transform-style: preserve-3d; }
.scene-chapter-copy p, .scene-inside p, .scene-mechanics p { font-size: clamp(66px,6.3vw,101px); line-height: .89; margin: 29px 0; }
.scene-chapter-copy small, .scene-inside small, .scene-mechanics small { font-size: 14px; max-width: 330px; }
.scene-chapter-copy::before, .scene-inside::before, .scene-mechanics::before { width: 65px; margin-bottom: 36px; }
.scene-transition { top: 34%; }
.scene-transition p { font-size: clamp(62px,7.6vw,128px); }
.scene-final-note { display: inline-block; margin-top: 18px; color: var(--accent); letter-spacing: .18em; font-weight: 700; font-size: 10px; }
.scene-chapters { position: absolute; z-index: 17; top: 100px; right: clamp(24px,5.5vw,90px); display: flex; flex-direction: row; gap: 3px; padding: 6px; background: rgba(255,255,255,.77); border: 1px solid rgba(255,255,255,.8); border-radius: 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 18px 70px rgba(25,37,42,.08); }
.scene-chapter-button { display: flex; align-items: center; justify-content:center; gap: 7px; min-height: 36px; width: 99px; padding: 7px 9px; text-align: left; color: #6c7479; background: transparent; border: 1px solid transparent; border-radius: 10px; transition: color .23s var(--ease-out),background .23s var(--ease-out),transform .23s var(--ease-out); }
.scene-chapter-button span { min-width: 21px; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.scene-chapter-button small { font-size: 10px; letter-spacing: .01em; font-weight: 600; }
.scene-chapter-button.is-current { color: #fff; background: #243039; }
.scene-chapter-button:active { transform: scale(.95); }
@media (hover:hover) and (pointer:fine) { .scene-chapter-button:hover:not(.is-current) { color: #223038; background: rgba(224,230,231,.8); } }
.scene-progress { bottom: 55px; right: 23%; width: 160px; height: 3px; border-radius: 4px; }
.scene-caption { bottom: 49px; left: 50%; font-size: 10px; }
.scroll-prompt { bottom: 47px; }
.site-header.is-scrolled { background: rgba(253,254,254,.92); }

.intro-section { background: #202d34; color: #f8f8f3; min-height: 82svh; max-width: none; padding-block: 150px; }
.intro-section .micro-title { color: #e1a7af; }
.intro-section>p { max-width: 1350px; font-size: clamp(65px,8vw,130px); }
.intro-section em { color: #e7acb6; }
.intro-bottom { color: #e4e7e6; }
.intro-bottom .decorative-note { color: #edbdc5; }
.lessons-section { background: var(--section-lessons); padding-block: 148px 175px; }
.section-heading { align-items: center; }
.lesson-grid { border: none; gap: 18px; }
.lesson-card { border: 1px solid var(--line) !important; border-radius: 19px; background: #fefdfa; min-height: 510px; transition: transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .45s; }
.lesson-card:nth-child(1) { background: #f5e9e6; }
.lesson-card:nth-child(2) { background: #e8eff0; }
.lesson-card:nth-child(3) { background: #e9e6ef; }
@media (hover:hover) and (pointer:fine) { .lesson-card:hover { transform: translateY(-12px); box-shadow: 0 28px 70px rgba(23,39,45,.11); } }
.lesson-card h3 { font-size: clamp(42px,3.5vw,57px); }
.method-section { display: grid; grid-template-columns: 49% 51%; min-height: 850px; background: #e7eee9; }
.method-image { position: relative; min-height: 850px; overflow: hidden; }
.method-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 65% center; }
.method-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 60%,rgba(7,18,21,.50)); pointer-events: none; }
.method-image-stamp { position: absolute; left: clamp(30px,5vw,82px); bottom: 40px; z-index: 2; color: white; font-size: 10px; letter-spacing: .2em; font-weight: 700; }
.method-content { padding: clamp(70px,8vw,155px) clamp(35px,7vw,125px); align-self: center; }
.method-content h2 { margin: 45px 0 35px; font-size: clamp(60px,5.4vw,93px); }
.method-content .method-intro { font-size: 15px; line-height: 1.85; color: var(--soft-ink); max-width: 520px; }
.method-steps { margin-top: 55px; border-top: 1px solid var(--line); }
.method-steps>div { display: flex; gap: 32px; padding: 23px 0 17px; border-bottom: 1px solid var(--line); }
.method-steps>div>span { flex: none; color: var(--accent); font-size: 11px; font-weight: 700; }
.method-steps h3 { font-family: var(--serif); font-weight: 600; font-size: 31px; margin: 0 0 3px; }
.method-steps p { color: var(--soft-ink); font-size: 13px; line-height: 1.75; }
.about-section { background: var(--section-about); }
.about-image-wrap { border-radius: 21px; }
.steps-section { background: var(--section-steps); }
.contact-section { background: var(--section-contact); }
.faq-section { background: var(--section-faq); }
.form-card { border-radius: 22px; }
.site-footer { background: #1e2d34; }

@media (max-width: 1050px) {
  .scene-sticky .hero-copy { top: 23%; max-width: 55vw; }
  .scene-depth-layer { inset: 13svh 7vw 13svh 39vw; }
  .scene-chapter-copy, .scene-inside, .scene-mechanics { width: 35vw; max-width: 35vw; }
  .scene-chapter-copy p, .scene-inside p, .scene-mechanics p { font-size: clamp(56px,6.3vw,85px); }
  .scene-chapters { right: 18px; }
  .scene-chapter-button { width: 81px; gap: 5px; padding: 7px; }
  .method-content { padding: 70px 45px; }
  .method-content h2 { font-size: 65px; }
}
@media (max-width: 740px) {
  .scene-section { height: 565svh; }
  .scene-sticky { perspective: 850px; }
  .scene-floor { bottom: -22%; width: 125%; right: -30%; height: 65%; background-size: 36px 36px; }
  .scene-halo { inset: 31% -18% 10% -5%; }
  .scene-photo, :root[data-design="atelier"] .scene-photo { inset: auto -12vw 4svh auto; width: 108vw; height: 56svh; }
  .scene-sticky .hero-copy { left: 24px; top: 12%; max-width: 95%; }
  .scene-sticky .hero-copy h1, :root[data-design="galerie"] .scene-sticky .hero-copy h1 { font-size: clamp(48px,11vw,69px); line-height: .96; }
  .scene-sticky .hero-copy p { max-width: 300px; font-size: 12px; }
  .scene-depth-layer { inset: 9svh 14px 22svh 14px; border-width: 3px; border-radius: 17px; transform-origin: center center; }
  .scene-chapter-copy, .scene-inside, .scene-mechanics { left: 22px; right: 22px; bottom: 13.5%; width: auto; max-width: none; padding: 14px 17px; }
  .scene-chapter-copy p, .scene-inside p, .scene-mechanics p { font-size: clamp(47px,11.5vw,67px); margin: 12px 0 5px; }
  .scene-chapter-copy small, .scene-inside small, .scene-mechanics small { font-size: 10px; }
  .scene-chapter-copy::before, .scene-inside::before, .scene-mechanics::before { margin-bottom: 12px; width: 35px; }
  .scene-chapters { top: 78px; right: 12px; padding: 4px; gap: 3px; border-radius: 11px; }
  .scene-chapter-button { justify-content: center; width: 31px; min-height: 30px; padding: 5px; border-radius: 8px; }
  .scene-chapter-button span { min-width: 0; font-size: 9px; }
  .scene-chapter-button small { display: none; }
  .scene-caption { left: 23px; bottom: 85px; transform: none; }
  .scene-progress { display: none; }
  .scroll-prompt { bottom: 117px; }
  .scene-transition p { font-size: clamp(55px,12vw,81px); }
  .scene-final-note { font-size: 8px; }
  .intro-section { min-height: 62svh; padding-block: 100px; }
  .intro-section>p { font-size: clamp(55px,12vw,83px); }
  .lessons-section { padding-block: 105px; }
  .lesson-grid { gap: 15px; }
  .lesson-card { min-height: 350px; }
  .method-section { grid-template-columns: 1fr; min-height: 0; }
  .method-image { min-height: 480px; height: 58svh; }
  .method-content { padding: 80px 25px 95px; }
  .method-content h2 { font-size: clamp(63px,12.6vw,85px); }
  .method-steps { margin-top: 38px; }
  .method-steps>div { gap: 25px; }
  .faq-section { padding-top: 90px; }
}
@media (max-width: 400px) {
  .scene-sticky .hero-copy h1, :root[data-design="galerie"] .scene-sticky .hero-copy h1 { font-size: 11vw; }
  .scene-chapter-copy p, .scene-inside p, .scene-mechanics p { font-size: 11vw; }
  .scene-chapters { top: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-section { height: 100svh; }
  .scene-photo { filter: none; }
  .scene-floor { opacity: .25; }
  .scene-chapters { display: none; }
}