.our-story { --story-cream: #f8f4ec; --story-ink: #283b33; --story-gold: #895d36; color: var(--story-ink); background: var(--story-cream); overflow-x: clip; }
.story-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 570px; background: #213b32; color: #fffaf1; }
.story-hero-copy { align-self: center; padding: 60px clamp(24px, 5vw, 85px); }
.story-kicker { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--story-gold); margin: 0 0 18px; }
.story-hero .story-kicker { color: #ebc48f; }
.our-story h1, .our-story h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.035em; }
.our-story h1 { font-size: clamp(2.6rem, 4.3vw, 4.7rem); line-height: 1.1; margin: 0 0 28px; }
.our-story h2 { font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1.15; margin: 0 0 24px; }
.our-story p { font-size: 1.08rem; line-height: 1.8; }
.our-story p.story-kicker { font-size: .75rem; line-height: 1.5; }
.story-hero-copy > p:not(.story-kicker) { color: #e5e9df; max-width: 480px; font-size: 1.17rem; }
.story-link { display: inline-block; color: #f0cb98; margin-top: 16px; padding: 10px 0; border-bottom: 1px solid #bda67e; }
.story-link:hover { color: #fff; }
.story-hero-photo { width: 100%; height: 100%; max-height: 690px; min-height: 570px; object-fit: cover; object-position: center 58%; }
.story-chapters { max-width: 1240px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 64px); }
.story-chapters > section { position: relative; isolation: isolate; }
.story-chapters > section:nth-of-type(odd)::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: #fff; z-index: -1; pointer-events: none; }
.story-chapter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 85px); align-items: center; padding: 72px 0; border-bottom: 1px solid #ded7c9; scroll-margin-top: 100px; }
.story-reverse .story-photo { grid-column: 2; grid-row: 1; }
.story-reverse .story-copy { grid-column: 1; grid-row: 1; }
.story-copy p:last-child { margin-bottom: 0; }
.story-photo { margin: 0; }
.story-photo img { display: block; width: 100%; height: auto; border-radius: 3px; }
.story-photo figcaption { color: #6c6d61; font-size: .84rem; line-height: 1.5; padding-top: 12px; }
.story-opening { padding: 72px 0; border-bottom: 1px solid #ded7c9; }
.story-opening-copy { max-width: 760px; margin: 0 auto 36px; }
.story-opening-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.story-opening-photos img { aspect-ratio: 1 / 1; object-fit: cover; }
.story-button { display: inline-flex; align-items: center; gap: 20px; padding: 13px 20px; background: #304e40; border: 1px solid #304e40; color: #fffaf1; border-radius: 3px; margin-top: 15px; min-height: 48px; }
.story-button:hover { color: #fff; background: #45634f; text-decoration: none; }
.story-catering { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 65px; align-items: center; padding: 72px 0; border-bottom: 1px solid #ded7c9; }
.story-catering-memory { padding: 17px; background: #fff; box-shadow: 0 3px 12px rgba(40, 59, 51, .16); transform: rotate(2deg); }
.story-catering-memory img { display: block; width: 206px; max-width: 100%; height: auto; }
.story-catering-memory p { font-size: .88rem; line-height: 1.5; margin: 14px 0 0; }
.story-family { padding: 72px 0; border-bottom: 1px solid #ded7c9; }
.story-family-copy { max-width: 760px; margin: 0 auto 35px; }
.story-family .story-photo { max-width: 850px; margin: auto; }
.story-ending { max-width: 740px; margin: auto; padding: 85px 0; text-align: center; }
.our-story .story-signature { font-family: Georgia, serif; font-style: italic; font-size: 1.7rem; margin-top: 25px; }
.our-story a:focus-visible { outline: 3px solid #c99b60; outline-offset: 5px; }
@media (max-width: 767px) { .story-hero { grid-template-columns: 1fr; min-height: 0; } .story-hero-copy { padding: 38px 24px; } .story-hero-photo { min-height: 0; height: 360px; object-position: center 65%; } .story-chapter { grid-template-columns: 1fr; gap: 26px; padding: 42px 0; } .story-chapter .story-copy { grid-column: 1; grid-row: 1; } .story-chapter .story-photo { grid-column: 1; grid-row: 2; } .story-opening, .story-family, .story-catering { padding: 42px 0; } .story-opening-photos { grid-template-columns: 1fr; gap: 25px; } .story-catering { grid-template-columns: 1fr; gap: 25px; } .story-catering-memory { max-width: 240px; margin: 0 auto; } .story-ending { padding: 50px 0; } .our-story p { font-size: 1rem; } }