.story-page { background: #f5f1e8; color: #173f35; }
.story-header { position: absolute; color: #fff; background: rgba(8,27,21,.28); border-bottom: 0; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.story-header .nav-inner { border-bottom: 0; }
.story-header .desktop-nav { display: none; }
.story-header .brand { color: #fff; }
.story-header .book-button { background: rgba(245,241,232,.08); border-color: rgba(255,255,255,.5); color: #fff; }
.story-hero { position: relative; min-height: min(820px, 86vh); display: grid; align-items: end; color: #f5f1e8; overflow: hidden; }
.story-hero-image, .story-hero-shade { position: absolute; inset: 0; }
.story-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.story-hero-shade { background: linear-gradient(90deg, rgba(8,27,21,.78), rgba(8,27,21,.12) 70%), linear-gradient(0deg, rgba(8,27,21,.82), transparent 60%); }
.story-hero-copy { position: relative; z-index: 1; padding-bottom: clamp(70px, 10vw, 130px); }
.story-hero-copy > p:first-child, .story-belief > .shell > p { color: #c5d4ca; font-size: 11px; letter-spacing: .2em; }
.story-hero h1 { margin: 22px 0 30px; font-family: var(--zh); font-size: clamp(50px, 8vw, 106px); line-height: 1.16; font-weight: 300; letter-spacing: -.07em; }
.story-hero h1 em, .story-origin h2 em, .story-ritual h2 em { font-family: var(--serif); font-weight: 500; }
.story-hero-copy > p:last-child { max-width: 460px; margin: 24px 0 0; color: rgba(245,241,232,.74); font-family: var(--zh); font-size: 14px; line-height: 2; }
.story-hero-line { display: block; width: 92px; height: 1px; background: #c5d4ca; }
.story-origin-grid, .story-section-heading, .story-cities-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 8vw, 130px); }
.story-origin-copy { max-width: 750px; }
.story-kicker { margin: 0 0 18px; color: #8d765b; font-size: 11px; letter-spacing: .18em; }
.story-kicker.light { color: #c5d4ca; }
.story-origin h2, .story-section-heading h2, .story-cities h2 { margin: 0 0 35px; font-family: var(--zh); font-size: clamp(38px, 5.4vw, 72px); line-height: 1.4; font-weight: 300; letter-spacing: -.055em; }
.story-origin-copy > p:not(.story-kicker), .city-copy > p { max-width: 580px; margin: 0 0 20px; color: #69766f; font-family: var(--zh); font-size: 15px; line-height: 2.1; }
.story-material { background: #0d211a; color: #f5f1e8; }
.story-section-heading { margin-bottom: 70px; }
.story-section-heading h2 { color: #f5f1e8; }
.material-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.material-grid figure { margin: 0; }
.material-grid figure img { width: 100%; height: 600px; object-fit: cover; }
.material-grid figcaption { display: flex; gap: 15px; margin-top: 14px; color: rgba(245,241,232,.55); font-size: 10px; letter-spacing: .17em; }
.material-grid figcaption span { color: #c5d4ca; }
.material-copy > p { max-width: 470px; margin: 0 0 42px; color: rgba(245,241,232,.72); font-family: var(--zh); font-size: 16px; line-height: 2; }
.material-list { border-top: 1px solid rgba(245,241,232,.18); }
.material-list > div { display: grid; grid-template-columns: 35px 90px 1fr; gap: 18px; padding: 23px 0; border-bottom: 1px solid rgba(245,241,232,.18); align-items: start; }
.material-list span { color: #9eae9f; font-size: 11px; letter-spacing: .12em; }
.material-list strong { font-family: var(--zh); font-weight: 400; font-size: 18px; }
.material-list p { margin: 0; color: rgba(245,241,232,.58); font-family: var(--zh); font-size: 13px; line-height: 1.8; }
.story-ritual { background: #f5f1e8; }
.story-section-heading.dark h2 { color: #173f35; }
.ritual-list { border-top: 1px solid rgba(23,63,53,.2); }
.ritual-list article { display: grid; grid-template-columns: 100px minmax(0, 1fr) 130px; gap: 35px; align-items: start; padding: 28px 0; border-bottom: 1px solid rgba(23,63,53,.2); }
.ritual-list article > span, .ritual-list article > strong { padding-top: 5px; color: #8d765b; font-size: 11px; letter-spacing: .15em; font-weight: 400; }
.ritual-list h3 { margin: 0 0 9px; font-family: var(--zh); font-size: 23px; font-weight: 400; }
.ritual-list p { max-width: 520px; margin: 0; color: #69766f; font-family: var(--zh); font-size: 13px; line-height: 1.9; }
.story-cities { background: #ebe4d8; }
.story-cities-grid { align-items: center; }
.city-image { position: relative; }
.city-image img { width: 100%; height: 620px; object-fit: cover; }
.city-image span { position: absolute; left: 22px; bottom: 22px; color: #fff; font-size: 10px; letter-spacing: .15em; }
.city-copy h2 { color: #173f35; }
.story-belief { padding: clamp(100px, 14vw, 190px) 0; background: #173f35; color: #f5f1e8; text-align: center; }
.story-belief blockquote { margin: 30px auto; font-family: var(--zh); font-size: clamp(32px, 5vw, 66px); line-height: 1.55; font-weight: 300; letter-spacing: -.05em; }
.story-belief > .shell > span { color: #c5d4ca; font-size: 10px; letter-spacing: .2em; }
@media (max-width: 800px) { .story-header .desktop-nav { display: none; } .story-origin-grid, .story-section-heading, .story-cities-grid, .material-grid { grid-template-columns: 1fr; gap: 30px; } .material-grid figure img, .city-image img { height: 420px; } .ritual-list article { grid-template-columns: 75px minmax(0,1fr); gap: 20px; } .ritual-list article > strong { grid-column: 2; padding-top: 0; } }
@media (max-width: 520px) { .story-hero { min-height: 700px; } .story-hero h1 { font-size: 54px; } .material-list > div { grid-template-columns: 28px 70px 1fr; gap: 10px; } }