/* the-temple — page-specific styles (loaded after style.css) */

.cta-link { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--warm-cream); text-decoration: none; border-bottom: 1px solid rgba(247,241,232,0.25); padding-bottom: 0.2rem; display: inline-block; transition: all 0.6s var(--ease-smooth); font-family: var(--font-sans); }

.cta-link:hover { border-bottom-color: var(--burnt-orange); color: var(--soft-gold); }

header { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 4rem; display: flex; justify-content: space-between; align-items: center; z-index: 1010; transition: all 0.7s var(--ease-smooth); }

/* Hero */
        .page-hero { position: relative; height: auto; min-height: 68vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; overflow: hidden; padding: 10rem 8% 6rem; }

.hero-bg img { position: absolute; top: -20%; left: 0; width: 100%; height: 140%; object-fit: cover; object-position: center; filter: brightness(0.32) saturate(0.75); }

.hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.32) saturate(0.75); position: absolute; inset: 0; }

.hero-gradient { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(17,17,17,0.85) 0%, rgba(17,17,17,0.1) 55%, rgba(17,17,17,0.25) 100%); }

.hero-content { position: relative; z-index: 3; max-width: 900px; }

.hero-eyebrow { font-family: 'Federo', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5em; color: var(--burnt-orange); display: block; margin-bottom: 2rem; opacity: 0; animation: riseUp 1.4s var(--ease-smooth) 0.3s forwards; }

.hero-title { font-family: var(--font-serif); font-size: clamp(3.2rem, 4vw, 7rem); font-weight: 300; font-style: italic; line-height: 1.0; color: var(--warm-cream); margin-bottom: 2rem; opacity: 0; animation: riseUp 1.8s cubic-bezier(0.25,0.35,0.45,0.5) 0.55s forwards; }

.hero-subline { font-family: 'Federo', sans-serif; font-size: clamp(0.78rem, 1.1vw, 0.92rem); letter-spacing: 0.38em; text-transform: uppercase; color: rgba(247,241,232,0.45); opacity: 0; animation: riseUp 1.4s var(--ease-smooth) 1.0s forwards; }

/* Intro */
        .intro-section { padding: 9rem 8% 7rem; position: relative; }

.intro-section::before { content: ''; position: absolute; top: 0; left: 8%; width: 1px; height: 68px; background: var(--soft-gold); opacity: 0.2; }

.intro-section p { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.8vw, 2.6rem); font-style: italic; font-weight: 300; line-height: 1.5; color: var(--warm-cream); }

/* Story */
        .story-section { padding: 6rem 8% 9rem; display: grid; grid-template-columns: 1fr 1.1fr; gap: 8rem; align-items: start; max-width: 1600px; margin: 0 auto; }

.story-text h2 { font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: 1.1; margin-bottom: 2rem; }

.story-text p { font-size: 1.4rem; margin-bottom: 1.5rem; }

.story-text .cta-link { margin-top: 1.2rem; }

.story-img-block { position: sticky; top: 6rem; align-self: start; }

.story-img-main { width: 100%; aspect-ratio: 3/4; overflow: hidden; }

.story-img-main img { width: 100%; height: 115%; object-fit: cover; filter: brightness(0.88); transition: transform 1.8s var(--ease-smooth); }

.story-img-main:hover img { transform: scale(1.04) translateY(-3%); }

.story-img-float {
            position: absolute; bottom: -4rem; left: -5rem; width: 48%;
            padding: 0.5rem; background: var(--warm-cream);
            box-shadow: 0 30px 65px rgba(0,0,0,0.6); transform: rotate(-2.5deg);
        }

.story-img-float img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; filter: brightness(0.88) saturate(0.9); }

/* Gallery Strip */
        .gallery-section { padding: 10rem 0 8rem; overflow: hidden; }

.gallery-header { margin-bottom: 5rem; padding: 0 8%; }

.gallery-header h2 { font-size: clamp(2.5rem, 4vw, 4.5rem); }

.gallery-strip { display: flex; gap: 0; }

.gallery-item { flex: 1; min-width: 0; position: relative; overflow: hidden; }

.gallery-item img { width: 100%; height: 520px; object-fit: cover; filter: brightness(0.65) saturate(0.8); transition: all 1.4s var(--ease-smooth); display: block; }

.gallery-item:hover img { filter: brightness(0.85) saturate(1.0); transform: scale(1.04); }

.gallery-item-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 2rem 2rem; background: linear-gradient(to top, rgba(17,17,17,0.85) 0%, transparent 100%); font-family: 'Federo', sans-serif; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(247,241,232,0.5); opacity: 0; transition: opacity 0.6s; }

.gallery-item:hover .gallery-item-caption { opacity: 1; }

/* What Happens Here */
        .happenings { background: #161616; padding: 9rem 8%; position: relative; }

.happenings::before { content: ''; position: absolute; top: 0; left: 8%; width: 1px; height: 68px; background: var(--soft-gold); opacity: 0.18; }

.happenings-head { margin-bottom: 7rem; }

.happenings-head h2 { font-size: clamp(2.5rem, 4.5vw, 5rem); }

.happenings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5rem; max-width: 1400px; margin: 0 auto; }

.happening-item { border-top: 1px solid rgba(247,241,232,0.1); padding-top: 2.5rem; }

.happening-icon { font-family: var(--font-serif); font-size: 4.5rem; font-weight: 300; color: rgba(198,90,17,0.15); display: block; line-height: 1; margin-bottom: 1.5rem; }

.happening-item h3 { font-size: 1.7rem; margin-bottom: 1rem; }

.happening-item p { font-size: 1rem; }

/* Atmosphere Quote */
        .atmosphere { position: relative; height: 70vh; min-height: 500px; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; padding: 0 8% 6rem; }

.atm-bg { position: absolute; inset: 0; z-index: 1; }

.atm-bg img { position: absolute; top: -20%; left: 0; width: 100%; height: 140%; object-fit: cover; filter: brightness(0.2) saturate(0.5) sepia(0.3); }

.atm-overlay { position: absolute; inset: 0; z-index: 2; background: rgba(17,17,17,0.35); }

.atm-content { position: relative; z-index: 3; max-width: 900px; }

.atm-content blockquote { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 4.2rem); font-style: italic; font-weight: 300; line-height: 1.3; color: var(--warm-cream); margin-bottom: 1.8rem; }

.atm-content cite { font-family: 'Federo', sans-serif; font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--burnt-orange); font-style: normal; }

/* Visit */
        .visit-section { padding: 9rem 8%; display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; align-items: start; max-width: 1600px; margin: 0 auto; }

.visit-text h2 { font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: 1.1; margin-bottom: 2.5rem; }

.visit-detail { margin-bottom: 2.5rem; }

.visit-detail h3 { font-family: 'Federo', sans-serif; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.38em; color: var(--burnt-orange); margin-bottom: 0.8rem; }

.visit-detail p { font-size: 1.1rem; }

.visit-image { position: relative; }

.visit-image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; filter: brightness(0.82); }

/* Footer */
        footer { background: #0d0d0d; padding: 6rem 8% 0; border-top: 1px solid rgba(247,241,232,0.06); }

@media (max-width: 1240px) {
            nav { display: none; }
            .menu-btn { display: flex; }
            .mobile-nav { display: flex; }
        }

@media (max-width: 1100px) {
            .story-section { grid-template-columns: 1fr; gap: 5rem; }
            .story-img-float { display: none; }
            .happenings-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
            .visit-section { grid-template-columns: 1fr; gap: 4rem; }
            .footer-inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
        }

@media (max-width: 768px) {
            header { padding: 1.5rem 2rem; }
            .page-hero { padding: 8rem 6% 6rem; }
            .intro-section { padding: 6rem 8%; }
            .happenings-grid { grid-template-columns: 1fr; gap: 3rem; }
            .gallery-strip { flex-wrap: wrap; }
            .gallery-item { flex: 1 1 50%; }
            .gallery-item img { height: 320px; }
            .footer-inner { grid-template-columns: 1fr; gap: 3rem; }
        }

.menu-btn { background: none; border: none; cursor: pointer; padding: 0.4rem; flex-direction: column; gap: 6px; }