/* =========================================================
   ZARVAAN — OUR STORY
   Story-page styles only. Shared navbar/footer are controlled
   by style.css and intentionally are not redefined here.
========================================================= */

.story-page {
  background: var(--black, #050505);
  color: var(--text, #f5f0e6);
  overflow-x: clip;
}

.story-page main { overflow: hidden; }
.story-page main *, .story-page main *::before, .story-page main *::after { box-sizing: border-box; }
.story-page main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-page main a { text-decoration: none; }
.story-page main h1, .story-page main h2, .story-page main h3, .story-page main p { margin-top: 0; }
.story-page main h1, .story-page main h2 { font-family: var(--serif, "Cormorant Garamond", Georgia, serif); font-weight: 400; }
.story-page main h1 em, .story-page main h2 em { color: var(--champagne, #e5cc8a); font-weight: 400; }
.story-page .announcement { padding: 8px 14px; background: #080706; border-bottom: 1px solid rgba(198,164,90,.15); color: var(--champagne,#e5cc8a); text-align: center; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; letter-spacing: 2px; }

.story-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--gold,#c6a45a); font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; font-weight: 500; letter-spacing: 2.4px; line-height: 1.7; }
.eyebrow-line { display: inline-block; width: 28px; height: 1px; background: var(--gold,#c6a45a); }
.story-section-kicker { display: flex; align-items: center; gap: 13px; margin-bottom: 45px; color: #9b927f; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; letter-spacing: 1.8px; }
.story-section-kicker > span:first-child { color: var(--gold,#c6a45a); }
.kicker-line { display: inline-block; width: 44px; height: 1px; background: rgba(198,164,90,.45); }

/* Hero */
.story-hero { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr); min-height: 650px; border-bottom: 1px solid rgba(198,164,90,.14); }
.story-hero-media { position: relative; min-height: 650px; overflow: hidden; background: #17130e; }
.story-hero-media > img { position: absolute; inset: 0; object-position: center 48%; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.story-hero:hover .story-hero-media > img { transform: scale(1.035); }
.story-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(5,5,5,.04) 35%,rgba(5,5,5,.4) 100%),linear-gradient(0deg,rgba(5,5,5,.55),transparent 40%); pointer-events: none; }
.story-hero-index { position: absolute; bottom: 29px; left: clamp(24px,5vw,76px); display: flex; align-items: center; gap: 12px; color: #f1e8d7; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 8px; letter-spacing: 2px; }
.story-hero-index i { display: inline-block; width: 36px; height: 1px; background: var(--champagne,#e5cc8a); }
.story-hero-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px clamp(34px,7vw,108px) 84px clamp(34px,6vw,88px); background: radial-gradient(ellipse at 90% 10%,rgba(198,164,90,.07),transparent 38%),#090909; }
.story-hero h1 { margin: 0 0 26px; font-size: clamp(58px,6.3vw,91px); letter-spacing: -2.8px; line-height: .91; }
.story-hero-lead { max-width: 390px; margin: 0 0 15px; color: #e9e0d0; font-family: var(--serif,Georgia,serif); font-size: clamp(20px,2vw,25px); line-height: 1.4; }
.story-hero-description { max-width: 390px; margin: 0 0 29px; color: #9f9b92; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 11px; line-height: 2; }
.story-text-link { display: inline-flex; align-items: center; gap: 19px; padding-bottom: 9px; border-bottom: 1px solid rgba(198,164,90,.55); color: var(--champagne,#e5cc8a); font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; letter-spacing: 1.4px; }
.story-text-link span { font-size: 16px; transition: transform .2s ease; }
.story-text-link:hover span { transform: translate(3px,3px); }
.story-hero-signature { display: flex; align-items: center; gap: 12px; margin-top: 55px; color: #7f796d; font-family: var(--serif,Georgia,serif); font-size: 16px; font-style: italic; }
.signature-rule { width: 31px; height: 1px; background: var(--gold,#c6a45a); }

/* Belief */
.story-page .section { padding-top: clamp(76px,10vw,140px); padding-bottom: clamp(76px,10vw,140px); }
.story-belief { max-width: 1240px; margin: 0 auto; padding-right: 36px; padding-left: 36px; }
.story-belief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,9vw,145px); }
.story-belief-heading h2, .story-craft h2, .story-centered-heading h2, .story-discover h2 { margin: 0; font-size: clamp(48px,5.2vw,70px); letter-spacing: -1.7px; line-height: .99; }
.story-belief-copy { max-width: 520px; padding-top: 3px; color: #aaa69d; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 11px; line-height: 2.05; }
.story-belief-copy p { margin-bottom: 19px; }
.story-belief-copy .story-dropcap { color: #e3dbcc; font-family: var(--serif,Georgia,serif); font-size: 23px; line-height: 1.55; }
.story-signoff { display: flex; align-items: center; gap: 13px; margin-top: 31px; color: var(--gold,#c6a45a); font-family: var(--sans,Inter,Arial,sans-serif); font-size: 8px; letter-spacing: 1.7px; }
.story-signoff-mark { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(198,164,90,.55); border-radius: 50%; font-family: var(--serif,Georgia,serif); font-size: 19px; letter-spacing: 0; }

/* Craft editorial split */
.story-craft { display: grid; grid-template-columns: 1fr 1fr; background: #10100e; border-top: 1px solid rgba(198,164,90,.12); border-bottom: 1px solid rgba(198,164,90,.12); }
.story-craft-image { position: relative; min-height: 690px; overflow: hidden; background: #1c1710; }
.story-craft-image img { position: absolute; inset: 0; object-position: center; transition: transform .8s ease; }
.story-craft-image:hover img { transform: scale(1.025); }
.story-image-caption { position: absolute; right: 25px; bottom: 25px; color: #f4e7cb; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 8px; letter-spacing: 2px; }
.story-craft-copy { align-self: center; max-width: 650px; padding: 80px clamp(35px,7vw,105px); }
.story-craft-copy .story-section-kicker { margin-bottom: 55px; }
.story-craft h2 { margin-bottom: 26px; }
.story-craft-copy > p:not(.story-eyebrow) { max-width: 440px; margin-bottom: 15px; color: #a7a39a; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 11px; line-height: 2; }
.story-craft-points { margin-top: 34px; border-top: 1px solid rgba(198,164,90,.18); }
.story-craft-points > div { display: grid; grid-template-columns: 38px 1fr; gap: 12px; padding: 17px 0; border-bottom: 1px solid rgba(198,164,90,.18); }
.story-craft-points > div > span { padding-top: 3px; color: var(--gold,#c6a45a); font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; }
.story-craft-points p { margin: 0; }
.story-craft-points strong { display: block; margin-bottom: 5px; color: #e8dfcf; font-family: var(--serif,Georgia,serif); font-size: 20px; font-weight: 500; }
.story-craft-points small { display: block; color: #89857c; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 10px; line-height: 1.7; }

/* Principles */
.story-principles { padding-right: 36px; padding-left: 36px; }
.story-centered-heading { max-width: 640px; margin: 0 auto 60px; text-align: center; }
.story-centered-heading .story-eyebrow { justify-content: center; }
.story-centered-heading h2 { font-size: clamp(45px,5vw,65px); }
.story-centered-heading > p:last-child { margin: 22px 0 0; color: #99948a; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 11px; line-height: 1.8; }
.story-principle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 1120px; margin: 0 auto; border-top: 1px solid rgba(198,164,90,.25); border-bottom: 1px solid rgba(198,164,90,.25); }
.story-principle-card { position: relative; min-height: 270px; padding: 31px clamp(20px,3.5vw,48px) 36px; border-right: 1px solid rgba(198,164,90,.2); }
.story-principle-card:last-child { border-right: 0; }
.principle-number { color: var(--gold,#c6a45a); font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; letter-spacing: 1px; }
.principle-symbol { margin: 19px 0 16px; color: var(--champagne,#e5cc8a); font-size: 26px; }
.principle-symbol-serif { font-family: var(--serif,Georgia,serif); font-size: 32px; }
.story-principle-card h3 { margin-bottom: 12px; color: #eee5d5; font-family: var(--serif,Georgia,serif); font-size: 27px; font-weight: 400; }
.story-principle-card p { max-width: 260px; margin-bottom: 22px; color: #969188; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 10px; line-height: 1.9; }
.principle-bottom-line { display: block; width: 25px; height: 1px; background: var(--gold,#c6a45a); transition: width .25s ease; }
.story-principle-card:hover .principle-bottom-line { width: 55px; }

/* Quote */
.story-quote { position: relative; display: flex; min-height: 370px; flex-direction: column; align-items: center; justify-content: center; padding: 70px 24px; overflow: hidden; border-top: 1px solid rgba(198,164,90,.12); border-bottom: 1px solid rgba(198,164,90,.12); background: radial-gradient(ellipse at 50% 100%,rgba(198,164,90,.09),transparent 60%),#0d0c0a; text-align: center; }
.story-quote::before, .story-quote::after { position: absolute; top: 50%; width: min(18vw,220px); height: 1px; background: linear-gradient(90deg,transparent,rgba(198,164,90,.3)); content: ""; }
.story-quote::before { left: 0; }
.story-quote::after { right: 0; transform: rotate(180deg); }
.story-quote-mark { height: 42px; color: var(--gold,#c6a45a); font-family: var(--serif,Georgia,serif); font-size: 70px; line-height: 1; }
.story-quote > p { margin: 10px 0 25px; color: #e8decd; font-family: var(--serif,Georgia,serif); font-size: clamp(27px,3.7vw,46px); line-height: 1.25; }
.story-quote > p em { color: var(--champagne,#e5cc8a); font-weight: 400; }
.story-quote-rule { width: 35px; height: 1px; margin-bottom: 15px; background: var(--gold,#c6a45a); }
.story-quote-caption { color: #a79a7d; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 8px; letter-spacing: 2.2px; }

/* Closing CTA */
.story-discover { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr); align-items: center; gap: clamp(45px,9vw,130px); max-width: 1150px; margin: 0 auto; padding-right: 35px; padding-left: 35px; }
.story-discover-image { position: relative; height: 470px; max-width: 410px; width: 100%; justify-self: center; background: #15120e; }
.story-discover-image::after { position: absolute; inset: 14px -14px -14px 14px; z-index: 0; border: 1px solid rgba(198,164,90,.32); content: ""; pointer-events: none; }
.story-discover-image img { position: relative; z-index: 1; object-position: center; }
.story-discover-copy { max-width: 510px; }
.story-discover h2 { margin-bottom: 22px; font-size: clamp(47px,5.3vw,72px); }
.story-discover-copy > p:not(.story-eyebrow) { max-width: 400px; margin-bottom: 28px; color: #a6a197; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 11px; line-height: 2; }
.story-discover-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.story-page main .story-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 20px; padding: 14px 18px; border: 1px solid #b69253; background: transparent; color: #f2dba9; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; letter-spacing: 1.2px; transition: background .25s,color .25s,border-color .25s; }
.story-page main .story-button:hover { border-color: var(--champagne,#e5cc8a); background: var(--gold,#c6a45a); color: #080706; }
.story-page main .story-button span { font-size: 15px; }
.story-secondary-link { color: #d5c6a7; font-family: var(--sans,Inter,Arial,sans-serif); font-size: 9px; letter-spacing: 1px; }
.story-secondary-link span { margin-left: 6px; color: var(--gold,#c6a45a); }
.story-page main a:focus-visible, .story-page main button:focus-visible { outline: 2px solid var(--champagne,#e5cc8a); outline-offset: 4px; }

/* Mobile menu only: no desktop navbar/footer styling is overridden here. */
.story-page .menu-toggle { display: none; }
@media (max-width: 1000px) {
  .story-hero { min-height: 580px; }
  .story-hero-media { min-height: 580px; }
  .story-hero-copy { padding-right: 38px; padding-left: 38px; }
  .story-hero h1 { font-size: clamp(56px,7vw,76px); }
  .story-craft-image { min-height: 640px; }
  .story-craft-copy { padding-right: 38px; padding-left: 38px; }
  .story-belief-grid { gap: 55px; }
}
@media (max-width: 760px) {
  .story-page .announcement { font-size: 8px; letter-spacing: 1.4px; }
  .story-hero { grid-template-columns: 1fr; }
  .story-hero-media { min-height: 0; height: min(112vw,520px); }
  .story-hero-media > img { object-position: center 42%; }
  .story-hero-copy { padding: 57px 26px 52px; }
  .story-hero h1 { font-size: clamp(58px,12vw,82px); }
  .story-hero-signature { margin-top: 35px; }
  .story-page .section { padding-top: 78px; padding-bottom: 78px; }
  .story-belief { padding-right: 25px; padding-left: 25px; }
  .story-section-kicker { margin-bottom: 32px; }
  .story-belief-grid { grid-template-columns: 1fr; gap: 29px; }
  .story-belief-heading h2, .story-craft h2, .story-centered-heading h2, .story-discover h2 { font-size: clamp(48px,10vw,65px); }
  .story-belief-copy .story-dropcap { font-size: 21px; }
  .story-craft { grid-template-columns: 1fr; }
  .story-craft-image { min-height: 0; height: min(110vw,500px); }
  .story-craft-copy { max-width: none; padding: 70px 26px 75px; }
  .story-craft-copy .story-section-kicker { margin-bottom: 40px; }
  .story-principles { padding-right: 24px; padding-left: 24px; }
  .story-centered-heading { margin-bottom: 38px; }
  .story-principle-grid { grid-template-columns: 1fr; }
  .story-principle-card { min-height: 0; padding: 26px 8px 27px; border-right: 0; border-bottom: 1px solid rgba(198,164,90,.2); }
  .story-principle-card:last-child { border-bottom: 0; }
  .principle-symbol { margin: 12px 0 9px; }
  .story-principle-card p { max-width: 420px; }
  .story-quote { min-height: 330px; }
  .story-quote::before, .story-quote::after { width: 10vw; }
  .story-quote > p { font-size: clamp(26px,6vw,38px); }
  .story-discover { grid-template-columns: 1fr; gap: 48px; padding-right: 26px; padding-left: 26px; }
  .story-discover-image { height: min(105vw,430px); max-width: 360px; }
  .story-discover-copy { justify-self: center; width: 100%; }
  .story-discover-actions { gap: 20px; }
  /* These rules only make the shared mobile menu work if the main stylesheet uses the same .is-open state. */
  .story-page .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 38px; height: 38px; padding: 8px; border: 1px solid rgba(198,164,90,.3); background: transparent; cursor: pointer; }
  .story-page .menu-toggle span { display: block; width: 100%; height: 1px; background: var(--champagne,#e5cc8a); }
  .story-page #story-nav-links.is-open { display: flex; }
}
@media (max-width: 420px) {
  .story-page .announcement { padding-right: 8px; padding-left: 8px; font-size: 7px; letter-spacing: 1.1px; }
  .story-hero-copy { padding-right: 21px; padding-left: 21px; }
  .story-hero h1 { font-size: 56px; letter-spacing: -1.8px; }
  .story-hero-description { font-size: 10px; }
  .story-belief, .story-principles, .story-discover { padding-right: 21px; padding-left: 21px; }
  .story-craft-copy { padding-right: 21px; padding-left: 21px; }
  .story-discover h2 { font-size: 48px; }
  .story-discover-actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .story-page main *, .story-page main *::before, .story-page main *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}