:root { --wine: #5b2235; }

.mansion, .velvet { background: var(--paper); color: var(--ink); }
.intro { position: relative; isolation: isolate; overflow: hidden; background: #071a35; color: #fff8e9; border-bottom: 3px solid #b69353; }
.intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #071a35 8%, #071a35ed 25%, #071a35b0 41%, #071a351a 72%); }
.intro-layout { min-height: clamp(450px, 37vw, 600px); display: flex; align-items: center; padding-block: clamp(48px, 6vw, 90px); }
.intro-copy { max-width: 470px; }
.intro-image { position: absolute; z-index: -2; top: 0; right: 0; width: 78%; height: 100%; object-fit: cover; object-position: center; }
.eyebrow { margin: 0; color: #72552a; font: 700 .74rem/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.intro .eyebrow { color: #edc990; }
.intro h1 { max-width: 13ch; margin: .5rem 0 1.15rem; color: #fff8e9; font: normal clamp(3rem, 5.3vw, 5.7rem)/1 var(--serif); letter-spacing: -.05em; }
.lede { max-width: 36rem; margin: 0; color: #edf1f7; font: 1.16rem/1.6 var(--serif); }
.story-nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.story-nav a { display: flex; align-items: center; padding: .7rem .85rem; border: 1px solid #bf9d65; color: #fff8e9; font: 700 .8rem/1.2 var(--sans); text-decoration: none; }
.story-nav a:hover, .story-nav a:focus-visible { background: var(--brass); color: var(--night); }

.story { scroll-margin-top: 1rem; padding-block: clamp(3rem, 7vw, 6.5rem); border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.ice { background: var(--night); color: var(--ivory); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(16rem, .72fr); gap: clamp(1.75rem, 6vw, 6rem); align-items: center; }
.story-grid.reverse { grid-template-columns: minmax(16rem, .72fr) minmax(0, 1.28fr); }
.reverse .story-art { order: 2; }
.story-art { margin: 0; }
.story-art img { display: block; width: 100%; height: auto; aspect-ratio: 1.62 / 1; object-fit: cover; box-shadow: 0 1.3rem 3rem rgba(0, 0, 0, .2); }
.portrait-art img { object-position: center; }
.story-art figcaption { margin-top: .7rem; color: #4a5d72; font: .82rem/1.45 var(--sans); }
.ice figcaption { color: color-mix(in srgb, var(--ivory) 68%, transparent); }
.story-copy { max-width: 33rem; }
.story-copy h2, .closing h2 { margin: .35rem 0 1rem; color: var(--wine); font: normal clamp(2.15rem, 4vw, 4.35rem)/.98 var(--serif); letter-spacing: -.04em; }
.ice .story-copy h2 { color: #e8be70; }
.story-copy p { margin: .75rem 0; font-size: 1.06rem; line-height: 1.65; }

.closing { padding-block: clamp(4rem, 9vw, 8rem); background: var(--wine); color: var(--ivory); text-align: center; }
.orchid-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(16rem, .72fr); text-align: left; align-items: center; gap: clamp(1.75rem, 6vw, 6rem); }
.orchid-layout .story-art figcaption { color: color-mix(in srgb, var(--ivory) 80%, transparent); }
.orchid-layout p:not(.eyebrow) { max-width: 44ch; margin-bottom: 24px; }
@media (max-width: 720px) { .orchid-layout { grid-template-columns: 1fr; } }
.closing .eyebrow { color: #e8be70; }
.closing h2 { max-width: 17ch; color: var(--ivory); }
.cast-link { display: inline-flex; gap: .65rem; padding: .85rem 1.1rem; border: 1px solid #e8be70; color: var(--ivory); font: 700 .86rem/1.2 system-ui, sans-serif; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.cast-link:hover, .cast-link:focus-visible { background: #e8be70; color: var(--night); }

@media (max-width: 720px) {
  .intro::before { display: none; }
  .intro-layout { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding-block: 38px; }
  .intro-image { position: static; width: 100%; height: auto; }
  .story-grid, .story-grid.reverse { grid-template-columns: 1fr; }
  .reverse .story-art { order: initial; }
  .story-copy { max-width: none; }
  .story-art img { aspect-ratio: 1.45 / 1; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }