.sophie-page { background: #15080b; }
.story-nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem,4vw,3.5rem); background: linear-gradient(180deg,rgba(24,3,9,.96),rgba(24,3,9,.72)); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.13); }
.story-nav a { color: white; text-decoration: none; }
.story-nav__brand { display:flex; align-items:center; transform:skew(-4deg); }
.story-nav__brand .site-logo__main { font-size:1.35rem; }
.story-nav__brand .site-logo__main b { color:inherit; font-size:1.2em; }
.story-nav__brand .site-logo__life { width:3.5rem; height:2.75rem; }
.story-nav__back { font-size: .78rem; font-weight: 700; color: #ffd4de !important; }
.sophie-hero { position: relative; min-height: 92svh; display: grid; align-items: end; overflow: hidden; }
.sophie-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.sophie-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(17,2,7,.9) 0%,rgba(17,2,7,.5) 48%,rgba(17,2,7,.08)),linear-gradient(0deg,rgba(17,2,7,.88),transparent 55%); }
.sophie-hero__copy { position: relative; z-index: 2; width: min(780px,92vw); padding: 9rem clamp(1.2rem,7vw,7rem) 5rem; }
.story-kicker { color: #e91f50; text-transform: uppercase; letter-spacing: .19em; font-size: .7rem; font-weight: 700; }
.sophie-hero h1,.story-section h2 { font: italic 700 clamp(2.5rem,7vw,5.7rem)/.98 "Playfair Display",serif; }
.sophie-hero h1 { margin: .55rem 0 1.2rem; max-width: 900px; color: white; }
.sophie-hero p { max-width: 640px; color: #f5dce2; font-size: clamp(1rem,2vw,1.25rem); line-height: 1.6; }
.red-button,.outline-button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 700; }
.red-button { color: white; background: #c9133e; box-shadow: 0 10px 30px rgba(201,19,62,.35); }
.outline-button { color: white; border: 1px solid rgba(255,255,255,.35); }
.story-section { padding: clamp(4rem,10vw,8rem) clamp(1.2rem,7vw,7rem); }
.story-section--cream { color: #251318; background: #fff8ec; }
.story-section--dark { background: radial-gradient(circle at 50% 0,#5c0b20,#15080b 55%); }
.story-section--garden { color: #251318; background: #ede5d3; }
.story-grid { width: min(1180px,100%); margin: auto; display: grid; grid-template-columns: 1.08fr .72fr; gap: clamp(2rem,8vw,7rem); align-items: center; }
.story-copy h2,.feature-heading h2,.cards-intro h2 { margin: .5rem 0 1.4rem; font-size: clamp(2.4rem,5vw,4.8rem); }
.story-copy p,.feature-heading p,.cards-intro p { font-size: 1.04rem; line-height: 1.75; }
.portrait-card { margin: 0; padding: .65rem; border-radius: 220px 220px 18px 18px; background: #7d0c28; box-shadow: 0 24px 60px rgba(44,5,15,.23); }
.portrait-card img { display: block; width: 100%; aspect-ratio: .76; object-fit: cover; border-radius: 210px 210px 12px 12px; }
.portrait-card figcaption { padding: .9rem .4rem .35rem; color: white; text-align: center; font: italic 700 1.4rem "Playfair Display",serif; }
.feature-heading { width: min(850px,100%); margin: 0 auto 2.5rem; text-align: center; }
.story-section--dark .feature-heading p { color: #e9cbd3; }
.video-card { position: relative; display: block; width: min(1080px,100%); margin: auto; overflow: hidden; border-radius: 22px; box-shadow: 0 25px 80px rgba(0,0,0,.48); }
.video-card img { display: block; width: 100%; aspect-ratio: 16/8.2; object-fit: cover; transition: transform .5s ease; }
.video-card:hover img { transform: scale(1.025); }
.video-card::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,1,7,.7),transparent 55%); }
.video-card__play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:5rem; height:5rem; border-radius:50%; color:white; background:#d01846; box-shadow:0 0 0 10px rgba(255,255,255,.15); }
.video-card__label { position:absolute; z-index:2; left:1.4rem; bottom:1.2rem; color:white; font-weight:700; }
.center-action { margin-top:2rem; text-align:center; }
.garden-gallery { width:min(1220px,100%); margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.garden-gallery figure { margin:0; overflow:hidden; border-radius:16px; color:white; background:#4c1222; }
.garden-gallery img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.garden-gallery figcaption { padding:.85rem 1rem; font-weight:700; }
.serenity-cards { color:#2e1820; background:#fff9ee; }
.cards-intro { width:min(880px,100%); margin:0 auto 3rem; text-align:center; }
.cards-question { color:#a40c33; font:italic 700 1.6rem "Playfair Display",serif; }
.cards-visual { width:min(850px,100%); margin:0 auto 3rem; }
.cards-visual img { display:block; width:100%; max-height:580px; object-fit:cover; border-radius:22px; box-shadow:0 22px 60px rgba(75,6,25,.2); }
.stripe-wrap { width:min(1100px,100%); margin:auto; padding:clamp(.5rem,2vw,1.5rem); border:1px solid #ead8c6; border-radius:20px; background:white; }
.stripe-status { display:flex; min-height:220px; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; padding:2rem; color:#5c2432; text-align:center; }
.stripe-status small { max-width:580px; color:#765d64; font-size:.9rem; line-height:1.55; }
.stripe-status--ready { display:none; }
.stripe-status--error { min-height:180px; border:1px dashed #d9b9c1; border-radius:14px; background:#fff9fa; }
.stripe-status__spinner { width:2rem; height:2rem; border:3px solid #f1d8de; border-top-color:#c9133e; border-radius:50%; animation:stripe-spin .85s linear infinite; }
.stripe-retry { margin-top:.5rem; padding:.7rem 1rem; border:0; border-radius:999px; color:white; background:#c9133e; font:700 .85rem "DM Sans",sans-serif; cursor:pointer; }
.stripe-fallback { margin:1rem; color:#5c2432; text-align:center; }
@keyframes stripe-spin { to { transform:rotate(360deg); } }
.closing-story { padding:clamp(5rem,12vw,9rem) 1.2rem; text-align:center; background:radial-gradient(circle,#7d0b27,#21050d 65%); }
.closing-story blockquote { max-width:900px; margin:1.1rem auto .6rem; color:white; font:italic 700 clamp(2rem,5vw,4rem)/1.15 "Playfair Display",serif; }
.closing-story p { color:#e9bec8; margin-bottom:2rem; }
.story-footer { display:flex; justify-content:space-between; gap:1rem; padding:1.2rem clamp(1rem,4vw,3.5rem); color:#cfa8b1; background:#11070a; font-size:.75rem; }
@media(max-width:760px){.story-nav__back{font-size:0}.story-nav__back::after{content:"← Garden";font-size:.78rem}.sophie-hero{min-height:78svh}.sophie-hero__copy{padding-top:7rem}.story-grid{grid-template-columns:1fr}.portrait-card{width:min(420px,100%);margin:auto}.garden-gallery{grid-template-columns:1fr}.video-card img{aspect-ratio:4/3}.story-footer{flex-direction:column}}