/* Typography and photo transitions share one system across all seven scenes. */
:root{
  --photo-edge:32px;
  --photo-fade:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 10%,rgba(0,0,0,.28) 25%,rgba(0,0,0,.62) 50%,rgba(0,0,0,.88) 75%,#000 100%);
}
/* Oswald needs neutral tracking for Cyrillic: negative tracking joins glyphs. */
h1,h2,h3,.hero h1,.about-copy h2,.experience-intro h2,.scene-copy h3,.speaker h2,.price-section h2,.request-copy h2{
  letter-spacing:.012em;
  font-kerning:normal;
  line-height:1.24;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}
.hero-copy{width:52%;min-width:0;container-type:inline-size}
.hero h1{font-size:clamp(32px,12cqw,76px);line-height:1.26;letter-spacing:.008em}
.hero h1 .heading-line{display:block;padding-bottom:.025em}
.hero .hand{line-height:1.3;margin-bottom:20px;max-width:100%;text-wrap:balance}
.hero .eyebrow{line-height:1.55;letter-spacing:.055em;position:relative;z-index:1}
.hero .leaf{width:clamp(24px,3.1vw,48px);top:0;left:-9px;opacity:.88}
.about-copy,.practice-items,.scene-copy,.speaker-copy,.request-copy,.section-head>div{min-width:0}
.hand,.scene-copy .hand,.speaker .hand,.section-head .hand{line-height:1.35;letter-spacing:0;transform:none}
.scene-copy{container-type:inline-size}
.scene-copy h3{font-size:clamp(30px,9.5cqw,51px);line-height:1.22;letter-spacing:.01em}
.scene-copy .hand{margin-top:20px;margin-bottom:20px}
.scene-copy>p{overflow-wrap:break-word}
.section-head{align-items:center}
.section-head .hand{flex:0 0 auto}

/* Captions occupy their own space and never overlap the person in the photo. */
.about-photo{display:flex;flex-direction:column;gap:13px;padding:0;margin:0;align-self:center}
.about-photo .hand{position:static;inset:auto;max-width:none;margin:0;padding:0 12px;font-size:29px;line-height:1.35;text-align:center;transform:none;background:none;text-shadow:none}
.about-photo img{height:450px;object-position:center;flex:none}

/* One gentle edge treatment: narrow top/bottom fades preserve the subject. */
.about-photo img,.practice-image,.speaker-image img{
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.16) 8px,rgba(0,0,0,.5) 18px,rgba(0,0,0,.85) 30px,#000 48px,#000 calc(100% - 48px),rgba(0,0,0,.85) calc(100% - 30px),rgba(0,0,0,.5) calc(100% - 18px),rgba(0,0,0,.16) calc(100% - 8px),transparent),linear-gradient(to bottom,transparent 0,rgba(0,0,0,.16) 6px,rgba(0,0,0,.5) 14px,rgba(0,0,0,.85) 24px,#000 36px,#000 calc(100% - 36px),rgba(0,0,0,.85) calc(100% - 24px),rgba(0,0,0,.5) calc(100% - 14px),rgba(0,0,0,.16) calc(100% - 6px),transparent);
  mask-composite:intersect;
}
.speaker-image img{object-fit:contain;object-position:center}
.scene-photo,.reverse .scene-photo{--fade-direction:90deg}
.reverse .scene-photo{--fade-direction:270deg}
.scene-photo:after,.reverse .scene-photo:after,.scene-7 .scene-photo:after{
  background:linear-gradient(var(--fade-direction),#fff 0%,rgba(255,255,255,.98) 6%,rgba(255,255,255,.87) 12%,rgba(255,255,255,.63) 20%,rgba(255,255,255,.31) 29%,rgba(255,255,255,.09) 38%,rgba(255,255,255,0) 47%);
  pointer-events:none;
}
.scene-photo{
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.16) 6px,rgba(0,0,0,.5) 14px,rgba(0,0,0,.85) 24px,#000 36px,#000 calc(100% - 36px),rgba(0,0,0,.85) calc(100% - 24px),rgba(0,0,0,.5) calc(100% - 14px),rgba(0,0,0,.16) calc(100% - 6px),transparent);
}
.hero-image:after{
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 8%,rgba(255,255,255,.85) 16%,rgba(255,255,255,.6) 25%,rgba(255,255,255,.28) 35%,rgba(255,255,255,.07) 44%,transparent 53%);
}
.closing-photo:after{
  background:linear-gradient(90deg,var(--tint) 0%,rgba(242,251,252,.98) 8%,rgba(242,251,252,.85) 16%,rgba(242,251,252,.6) 25%,rgba(242,251,252,.28) 35%,rgba(242,251,252,.07) 44%,transparent 53%);
}
@media(min-width:701px) and (max-width:950px){
  .hero-copy{width:58%}
  .hero h1{font-size:12cqw}
  .scene-copy h3{font-size:9.5cqw}
  .about-photo img{height:420px}
  .about-photo .hand{font-size:25px}
}
@media(max-width:700px){
  .hero-copy{width:100%}
  .hero h1{font-size:12cqw;letter-spacing:.008em;line-height:1.26}
  .hero .hand{font-size:28px;line-height:1.3;margin-bottom:16px}
  .hero .eyebrow{font-size:11px;letter-spacing:.035em}
  .hero .leaf{width:27px;left:-11px;top:0}
  .about-copy h2,.request-copy h2{font-size:32px;line-height:1.26}
  .experience-intro h2{font-size:37px;line-height:1.25}
  .scene-copy h3{font-size:11.3cqw;line-height:1.24;letter-spacing:.01em}
  .scene-copy .hand{font-size:27px;line-height:1.35}
  .about-photo{margin:8px 0 0;gap:10px}
  .about-photo img{height:320px}
  .about-photo .hand{font-size:26px;padding:0;line-height:1.35}
  .section-head .hand{margin-right:0}
  .scene-photo:after,.reverse .scene-photo:after,.scene-7 .scene-photo:after{background:none}
  .scene-photo,.reverse .scene-photo{height:auto;aspect-ratio:1.3}
  .scene-photo img{object-fit:cover}
  .scene-7 .scene-photo{height:400px;aspect-ratio:auto}
  .hero-image:after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.86) 3%,rgba(255,255,255,.5) 7%,rgba(255,255,255,.15) 12%,transparent 18%)}
  .closing-photo:after{background:linear-gradient(180deg,var(--tint) 0%,rgba(242,251,252,.86) 3%,rgba(242,251,252,.5) 7%,rgba(242,251,252,.15) 12%,transparent 18%)}
  .speaker-image img{object-fit:contain}
}
@media(max-width:365px){.about-copy h2,.request-copy h2{font-size:29px}.experience-intro h2{font-size:33px}.scene-copy h3{font-size:11.3cqw}}