/* Home chapter one: a photographic camera study, separate from the Signature Intro. */
.opening{height:calc(100svh - 90px);min-height:570px;max-height:1050px;background:#cbb89d;color:#fff5e7;isolation:isolate}
.opening>img,.opening[data-scene="1"]>img,.opening[data-scene="2"]>img{object-position:60% 50%;transition:none;transform:none;width:100%;height:100%;object-fit:cover}
.opening:after{background:linear-gradient(90deg,#1d2d31bc 0%,#29332d58 39%,transparent 74%),linear-gradient(0deg,#162d34a8,transparent 35%);z-index:-1}
.opening-copy{position:relative;padding:clamp(45px,8vh,100px) 6vw 0;max-width:none;width:100%}
.opening-copy>.eyebrow{color:#fff2da;font-size:9px;letter-spacing:.23em;display:flex;align-items:center;gap:15px}
.opening-copy>.eyebrow:before{content:'';width:40px;height:1px;background:#f5c6a8}
.opening h1{font-size:clamp(53px,6.8vw,112px);line-height:1.14;letter-spacing:-.06em;max-width:1050px;margin:30px 0 0;text-shadow:0 3px 25px #11212a1a}
.opening h1 .type-line,.opening h1 .type-line:last-of-type{color:#fff8e9;overflow:visible;padding:.1em 0}
.opening h1 em{color:#ffd0ac}
.opening h1 .type-inner{display:inline-block;animation:hero-title-arrive 1.25s cubic-bezier(.16,1,.3,1) both}
.opening h1 .type-line:last-of-type .type-inner{animation-delay:.16s}
.opening .lead{color:#fff0de;font-size:14px;line-height:1.85;max-width:360px;margin-top:28px}
.hero-foot{position:absolute;inset:auto 6vw 32px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:0}
.hero-controls{display:flex;gap:28px;border:0}
.hero-controls button{position:relative;background:transparent;border:0;border-radius:0;padding:13px 0 14px;text-align:left;color:#fff7e9;opacity:.62;font-size:13px;transition:opacity .25s;min-width:90px}
.hero-controls button small{display:block;font-size:8px;letter-spacing:.12em;margin-bottom:5px;color:inherit}
.hero-controls button[aria-pressed=true]{color:#fff8e9;opacity:1}
.hero-controls button[aria-pressed=true]:before{display:none}
.hero-controls button:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:#fff5;transform-origin:left}
.hero-controls button[aria-pressed=true]:after{background:#ffd0ac;animation:hero-scene-progress 6.5s linear both}
.opening.hero-paused .hero-controls button:after{animation-play-state:paused}
.hero-controls button:hover{opacity:1;color:#ffd0ac}
.opening .illustration-note{color:#fff0dbb3;font-size:8px;font-style:italic;margin:14px 0 0}
.opening .pause{width:32px;height:32px;border:1px solid #fff6;background:transparent;color:#fff7e8;border-radius:50%;font-size:10px;flex-shrink:0}
.hero-scene-note{position:absolute;right:6vw;bottom:120px;z-index:1;max-width:300px;text-align:right;color:#fff7e9}
.hero-scene-note>small{font-size:8px;letter-spacing:.18em;color:#ffdec0;display:block;margin-bottom:10px}
.hero-scene-note>p{font:italic 400 clamp(23px,2.6vw,39px)/1.4 Editorial,Georgia,serif;text-wrap:balance}
.hero-scroll-cue{position:absolute;right:calc(6vw + 50px);bottom:37px;font-size:8px;letter-spacing:.14em;color:#fff1df}
@keyframes hero-title-arrive{from{clip-path:inset(0 0 100%);transform:translateY(22px)}to{clip-path:inset(-15% -5%);transform:none}}
@keyframes hero-scene-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:800px){.opening{height:calc(100svh - 74px);min-height:640px;max-height:1000px}.opening:after{background:linear-gradient(90deg,#203137b3,transparent 100%),linear-gradient(0deg,#122c38c9,transparent 65%)}.opening-copy{padding:42px 7vw 0}.opening h1{font-size:clamp(42px,8.6vw,67px);margin-top:27px;max-width:650px}.opening .lead{font-size:12px;max-width:300px;margin-top:22px}.hero-scene-note{right:7vw;bottom:150px;max-width:235px}.hero-scene-note>p{font-size:25px}.hero-foot{left:7vw;right:7vw;bottom:23px;gap:12px}.hero-controls{gap:18px}.hero-controls button{font-size:11px;min-width:65px}.hero-controls button small{font-size:7px;letter-spacing:.04em}.hero-scroll-cue{display:none}.opening .illustration-note{font-size:7px}.opening .pause{width:30px;height:30px}}
@media(max-width:380px){.opening h1{font-size:39px}.hero-controls{gap:13px}.hero-scene-note>p{font-size:23px}.opening .lead{font-size:11px}}
@media(prefers-reduced-motion:reduce){.opening h1 .type-inner,.hero-controls button[aria-pressed=true]:after{animation:none}.hero-controls button:after{transform:scaleX(1)}}
